JavaScript im Jahr 2011

Tim „Scytale“ Weber <http://scytale.name/>

28. August 2011

2. Large Hackerspace Convention, shackspace Stuttgart

Feedback? Twitter @Scytale oder http://scytale.name/contact/

Ich

JavaScript

DHTML!!1!

Und das ist heute noch so.

Datentypen

Datentypen: number

typeof 3             // "number"
(-3.141).toString()  // "-3.141"
5e3                  // 5000

Datentypen: string

typeof "foo"      // "string"
typeof typeof 3   // "string"
"A" === '\u0041'  // true
'mööp♥'.length    // 5

Datentypen: null

typeof null      // "object"
null.toString()  // (Exception)

Datentypen: boolean

typeof true      // "boolean"
true.toString()  // "true"

Datentypen: undefined

undefined                 // undefined
typeof undefined          // "undefined"
typeof x                  // "undefined"
typeof x === 'undefined'  // true
x == undefined            // (Exception: „x is not defined“)

Datentypen: object

var x = {
    foo:    "bar",             // entspricht "foo": "bar"
    "true": "Spandau Ballet",  // bei reservierten oder nicht-Wörtern
    3.141:  "Pi"               // Zahl als Key
};
typeof x                       // "object"
x["foo"] === x.foo             // true
x.true                         // "Spandau Ballet"
x["3.141"]                     // "Pi"

Datentypen: array

var x = [2, 4, 6];
x[1]                // 4
x[5]                // undefined
x.length            // 3
x[5] = 9000
x.length            // 6 (!!)
x[4]                // undefined

Exceptions

throw {
	type:    "BullshitException",
	message: "I’m in space!"
};

throw "PENIS!";

throw 5;

throw true;

Datentypen: Function

var sum = function (a, b) {  // ähnlich: function sum(a, b) {
    return a + b;
};
sum(3, 8)                    // 11
sum("PEN", 15)               // "PEN15"
sum.foo = "bar";

Scoping

x = 3;      // global
var y = 4;  // auch global weil im äußersten Scope definiert
var foo = function (a) {
    var z = 9;
    y += a;
    return a * 2;
};
foo(15)  // 30
x        // 3
y        // 19
z        // (Exception weil undefiniert)

Objektorientierung

var animal = {
    lives: 1,
    "die": function () {
        this.lives--;
    }
};
var cat = {
    lives: 9
};
cat.prototype = animal;

this

var o = {
    val: 3,
    foo: function () {
        return this.val * 2;
    }
};
o.foo()              // 6
var o2 = {
    foo: o.foo
};
o2.foo()             // NaN (weil this auf o2 zeigt)
var blub = o.foo;
blub()               // NaN

Dinge von heute

Closures

Objekte 2011

var animal = function (startLives) {
    var lives = startLives;
    return {
        "die": function () {
            lives--;
        }
    }
};
var bello = animal(1);
bello.lives    // undefined
bello.die();

Frameworks benutzen

Code und Content trennen

<body onload="alert('foo!');">
<form onsubmit="alert('bumm');">

Code und Content trennen

jQuery(function () {
	alert('foo!');
});
$("form").submit(function () {
	foo();
});

Dinge ohne JavaScript funktionieren lassen

Schlecht:

<a href="javascript:loadTab('info');">

Gut:

<a id="infolink" href="/info">
<script>
$("#infolink").click(function () {
    loadTab('info');
    return false;
});
</script>

Markup auf „ohne JavaScript“ optimieren

<html class="no-js">

wird zu

<html class="
    js no-touch no-history multiplebgs boxshadow opacity
    no-cssanimations csscolumns cssgradients csstransforms
    no-csstransitions fontface localstorage sessionstorage
    svg no-inlinesvg tk-loaded wf-active js flexbox canvas
…">

Modulpattern statt globale Variablen

if (typeof di === 'undefined') {
    di = {};
}
di.JS2011Talk = {
    run: function () { … }
};

Vorsicht vor ==

 0 == ''    // true
 0 == '0'   // true
'' == '0'   // false
0 == true   // false
!'0'        // false
!!'0'       // true

Kleinkram

i
++
j

Fragen