Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
branch: master
Fetching contributors…

Cannot retrieve contributors at this time

323 lines (240 sloc) 6.428 kb

Workshop über JavaScript - The Good Parts

Dauer: 1h Umgebung: In Google Chrome JavaScript Console

Motivation

  • Dicke der Bücher (JavaScript: The Complete Reference vs. JavaScript: The Good Parts) vergleichen
  • Schaut aus wie Java und C, ist aber sehr sehr unterschiedlich davon!

Hallo Welt (Aufgabe 0)

Erstelle ein Verzeichnis namens javascript-workshop und erzeuge dort ein minimales test.html mit folgendem Inhalt:

<!doctype html>
<html>
   <head>
      <title>JavaScript Workshop</title>
      <script type="text/javascript" src="test.js" ></script> <!-- muss genauso geschrieben werden! -->
   </head>
   <body>
      <p>Hallo Welt in HTML</p>
   </body>
</html>

Schreibe danach ein JavaScript Datei names test.js mit folgendem Inhalt:

document.write("Hallo Welt in JavaScript");

Im Weiteren werden wir nur in dieser JavaScript Datei arbeiten.

Einfache Sprachkonstrukte

// variables
var x = 3;
var y = x + 2; // 5

// conditionals
if(y == 5) {
   console.log("y ist 5");
} else if(y < 5) {
   console.log("y ist kleiner 5");
} else {
   console.log("y ist größer 5");
}

// for loop
for(var i = 0; i < 10; i++){
   console.log("counter " + i);
}

// while loop
var i = 0;
while(i < 10) {
   console.log("counter " + i);
   i++;
}

// functions

function add(x,y) {
   return x + y;
}
add(2,3); // 5
oder

// anonyme Funktion die in einer Variable gespeichert wird
var add = function(x,y) {
   return x + y;
}
add(2,3); // 5

var x = add;
x(2,3); // 5
var square = function(n) { 
   return n * n;
}

// high order functions, d.h. Funktionen, die man anderen Funktionen als Parameter übergeben kann!
var apply = function(n, func) {
   func(n);
};

apply(4,square); // returns 4^2 == 16

Aufgabe 1

var fizzbuzz = function(n) {
   // TODO 
};
// TODO rufe fizzbuzz mit den Zahlen 1 bis 100 auf. 

FizzBuzz Pseudocode:

  • Wenn Zahl durch 5 und 3 teilbar ist, dann FizzBuzz.
  • Wenn Zahl teilbar durch 3, dann Fizz.
  • Wenn Zahl teilbar durch 5, dann Buzz.
  • Sonst Ausgabe der Zahl.

x durch 3 teilbar => x modulo (%) 3 soll gleich 0 sein

Ausgabe auf der Konsole:

console.log("Feki.de ist toll");

Ausgabe in aktuellem HTML Fenster:

document.write("Feki.de ist toll");
document.write("<br />"); // für neue Zeile

Komplexere Sprachkonstrukte

// arrays
var myArray = [1,2,3];
myArray = ["a", "b", "c"];
myArray = [1, "a"];
myArray = [1, [2, [3, "b"]]];
myArray[0]; // 1
myArray[1][0]; // 2

// objects
var object = {};
object = {
   "key": "value"
};
object.key; // "value"
object["key"]; // "value"
object.key = 3;
object.key; // 3

// Kombination von objects und functions. Oder wie strukturiere ich meinen Code?
object = {
   "key1": "value1",
   "key2": function (x) { 
      return x + 1; 
   },
   "key3": {
      "asdf": function () { 
         return "hallo"; 
      },
      "asdfasdf": function () { 
         return this.asdf; // im gleichen Objekt kann man Variablen über this.varname ansprechen
      }
   }
};

BEISPIEL: localhost:3000/admin/order_origin.json

Aufgabe 2

Organisiere dein fizzbuzz so, dass es wie folgt aufgerufen werden kann:

// Führt Code aus Aufgabe 1 aus, d.h. Ausgabe von 1 bis 100 unter verwendung der FizzBuzz Regeln
de.feki.js.fizzbuzz();

Hinweise:

  • Nutze hierfür ineinander verschachtelte Objektstrukturen (Hashes) um die entsprechenden Namespaces zu erstellen.
  • Methoden im gleichen Objekt, können entweder über den globalen Pfad oder direkt mit dem Schlüsselwort this referenziert werden.

Zusatzaufgabe:

Extrahiere drei weitere Methoden (teilbarDurch3, teilbarDurch5 und teilbarDurch3und5) und verwende diese geeignet.

Schlechtes Erbe

Blockless Statements

if (foo)
     bar();

Wenn man nun eine weitere Zeile hinzufügt:

if (foo)
     bar();
     solve();

Wann wird solve(); ausgeführt?

Expression and Empty Statements

true;false; variablenname; ;;

Floating point arithmetic

Nur double als Nummer-Datentyp. Und das mit IEEE Floating Point Standard.

0.1 + 0.2 !== 0.3;

Die schlechten Seiten von JS

Basiert auf Globalen Variablen

var names = ['Simon', 'Flo', 'Andy']
// diese Variable ist nun für alle weiteren JS Anweisungen aufrufbar. 

...

Namenskonflikte unvermeidbar.

var $ = jquery;
var $ = mootools; // überschreiben der Variable

Semi-Colon Insertion

Beispiel:

var add = function(x,y) {
    return
            x + y;
};

vs.

var add = function(x,y) {
    return x + y;
};

== und !=

Beispiel:

'' == '0'             // false
0 == ''               // true
0 == '0'              // true
false == 'false'      // false
false == '0'          // true
false == undefined    // false
false == null         // false
null == undefined     // true
" \t\r\n " == 0       // true

Lösung: immer === verwenden, da es überall false zurückliefert.

typeof

typeof false // "boolean"
typeof 3 // "number". Gilt auch für NaN, Infinity
typeof "name" // "string"
typeof undefined // "undefined"
typeof [1,2,3] // "object"
typeof null // "object"
typeof {'name': 'Simon'} // "object"

Somit wenig Hilfreich. Beispiel:

typeof y; // "undefined"
y = null; 
typeof y; // "object"

Aber für einen Zweck notwendig:

typeof var === 'undefined'

Da früher auch var undefined = "not defined"; erlaubt war. Und man somit nicht var === undefined machen sollte. Wobei Chrome das schon nicht mehr zulässt.

phony arrays

var myArray = [7,8,9];
// Wird intern umgewandelt in {"0": 7, "1": 8, "2": 9}

Deswegen geht auch: myArray["0"] als Zugriff auf das erste Element.

Arrays werden größer und kleiner, aber sind dadurch auch deutlich langsamer.

Aufgabe 3

Gib deinen bisher erstellten Code bei http://www.jslint.com/ ein und verbessere ihn anhand der Angaben des Tools.

Links und Ressourcen

Jump to Line
Something went wrong with that request. Please try again.