Richard van Velzenexpert-shops.com

JavaScriptMooi onder de rotzooi

Wie ben ik?

Richard 20 jaar Webdeveloper Gitarist

JavaScript

Eerste versie door Brendan Eich bij Netscape

Mocha, LiveScript, JavaScript LiveScript was niet verwarrend genoeg

Microsoft kopieerde de taal voor IE

Ondertussen hebben we JScript, TraceMonkey, V8, SquirrelFish/Nitro, Carakan, Tamarin, &c.

Invloeden

Scheme Functioneel

Self Prototypaal

C Syntax

Perl Regexes

JavaScript

Imperatief Op basis van statements

Functioneel Functies beheren de werking

Prototypaal Geen klassen, objecten ervan van objecten

Objectgeoriënteerd Niet in de klassieke zin, bijna alles is een object

Dynamisch Variabelen kunnen ieder type bevatten

JavaScriptTypen

Undefined Null Boolean Number String RegExp Array Object Function

undefined null true, false 1, 1.5, -5 “string”, 'string' /^[a-z]+$/g ['een', 'twee', 'drie'] {key: 'value'} function () { }

JavaScriptTypen

Type achterhalen typeof variabele

Is niet altijd even correct Dankzij de DOM

Object.prototype.toString.call(variabele) Waarden staan vast

Maar werkt niet altijd goed met de DOM samen variabele instanceof String

Onhandig, niet gebruiken

Undefined

De naam zegt het al: ongedefinieerd De variabele undefined heeft altijd deze

waarde Enige betrouwbare vergelijking is met typeof typeof var === 'undefined'

Null

Net als in veel andere talen: onbekend Dit is niet hetzelfde als undefined typeof null === 'object', dit is niet handig Enige betrouwbare vergelijking: var === null

Boolean

Booleans kunnen twee waarden bevatten true false

typeof true === 'boolean' Het resultaat van een vergelijking is boolean

Number

Geen integers en doubles, alleen Number Gebaseerd op IEEE 754 floating point Niet betrouwbaar genoeg, slechte keuze

Kent twee speciale waarden NaN: Not A Number

Een globale variabele typeof NaN === 'number', NaN !== Nan isNan(1 + NaN) === true

Infinity Altijd groter dan welk Number -Infinity is altijd kleiner

String

Strings zijn sequenties van karakters Altijd UTF-16 (2 bytes per teken) Geen harde newlines in strings 'string string string

en meer'

'string string string\n' + 'en meer'

RegExp

:-) Gebaseerd op reguliere expressies uit Perl /[a-z\d]+/i matcht alle sequenties van letters

en cijfers Vaak veel efficiënter dan andere methoden In feite niets meer dan een object, net als

Date

Array

Arrays zijn objecten met geïndexeerde elementen

[1, 2, 3] is een array met 3 elementen {'0': 1,'1': 2, '2': 3} Geen echte arrays, dus niet zo efficiënt Wel erg makkelijk in gebruik

Object

Bijna elk ander type is gebaseerd op Object Alles behalve undefined en null is een object Objecten zijn in feite simpele key/value-paren Associatieve arrays

Bijzonder handig in het gebruik Je kunt te allen tijde een element toevoegen of

verwijderen object.key = 'value'; delete object.key;

ObjectPrototype

Array.prototype.each = function () { … };

Het prototype legt de fundering voor een serie objecten

Herbruikbaarheid Een prototype is gewoon een Object, met

prototype if (typeof Object.create !== 'function') { Object.create = function (o) { function F() {} F.prototype = o; return new F(); };}

Function

Het belangrijkste type van de taal Bijzonder makkelijk in het gebruik First-class Lambda Anonieme functies Kunnen ook een naam krijgen

Closure Variabelen van een hogere scope blijven te allen

tijde beschikbaar Scope Geen block scope, alleen functie-scope

Met return geef je een waarde terug

Typen

Let op: alle objectgebaseerde typen hebben ook een “constructor”

Dit is altijd afgeraden Alleen bij RegExp is het aanvaardbaar

new Boolean ('string') !!'string'

new String(15) '' + 15

new Number('0') +'0' parseInt('0', 10)

Variabelen

De kern van alle programmeertalen Altijd vooraf definiëren Of zoek je problemen?

Een nietgedefinieerde variabele aanroept geeft een foutmelding, niet undefined

var mijnVariabele = {}; Globale variabelen zijn evil! En vooral: niet nodig

VariabelenPrivacy

Hoe minder globale variabelen, hoe beter Direct uitvoeren van een functie var APP = (function () {

var verborgenVariabele = true;

return { publiekeFunctie: function (variabele) { // dankzij closure is verborgenVariabele beschikbaar return verborgenVariabele; } };}());

VariabelenPrivacy

Een enkel globaal object waarin je complete applicatie draait is veilig

Geen gevaar door het overschrijven van globale variabelen

var namen = ['jan', 'piet', 'klaas'];function getNaam(i) { return namen[i];}

var namen = function (naam) { return naam;}

Operators

== (en !=) vs. === (en !==) == doet typeconversie → ongewenst === controleert eerst het type De regels voor typeconversie zijn erg vreemd 0.1 + 0.2 === 0.300000000000004

Verder de standaardlijst (!, +, -, +=, -= &c.) Uitzondering: || en &&

Niet logisch && geeft tweede argument indien eerste true was || is precies andersom

En in beide gevallen: anders de eerste

Operators

+ Zowel concattenatie als optellen

'string' + 'string' === 'stringstring' 1 + 1 === 2

'string' + 5 === 'string5' 5 + 1 + 'string' === '6string'

Statements

while (i < 10) { … } for for (var i = 0; i < 10; ++i) { … } for (var key in object) { … }

do { … } while (); switch (v) { case 1: break; default: true; }

if (false) { } else if (true) { } try { … } catch (e) { … } finally { … }

Loops kennen een break en continue Liever niet, de taal is al verwarrend genoeg

Statements

for … in geeft alle waarden van een object Heel handig, maar ook alles uit het prototype Ongewenst, vaak

Met hasOwnProperty kun je zien of een element niet uit het prototype komt

for (var key in table) { if (table.hasOwnProperty(key)) { // doe er echt iets mee }}

Statements

With Bizarre uitvinding Werkt enkel vertragend zonder meerwaarde with (object) {

// waar komt a vandaan? alert(a);}

var b = a;alert(b.a);

Automatische semicolon

Ten eerste: geen enkele taal is perfect Je mag ; weglaten Doe dit niet!

Kan bijzonder gedrag opleverenreturn{

a: b};

return;{

a: b;};

// geeft objectreturn {

a: b};

Gereserveerde woorden

abstract boolean break byte case catch char class const continue debugger default delete do double else enum export extends false final finally float for function goto if implements import in instanceof int interface long native new null package private protected public return short static super switch synchronized this throw throws transient true try typeof var volatile void while with

Globaal

JavaScript kent geen aparte compilatie-units zoals bijvoorbeeld C

Hierdoor deelt ieder script hetzelfde globale object

Alleen te voorkomen met (function () { … }());

Closure

Het krachtigste wat in een taal kan zitten Een functie binnen een andere functie heeft

toegang tot alle variabelen die de scope erbuiten kan zien

for (var i = 0; i < 5; ++i) { elems[i].onclick = function () { alert(i); // werkt niet goed };}

for (var i = 0; i < 5; ++i) { elems[i].onclick = (function (i) { return function () { alert(i); // werkt prima }; }(i));}

Vragen?