Upload
pfcongres
View
1.106
Download
1
Embed Size (px)
Citation preview
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?