Richard van Velzen - JavaScript: mooi onder de rotzooi
Upcoming SlideShare
Loading in...5
×
 

Richard van Velzen - JavaScript: mooi onder de rotzooi

on

  • 1,672 views

 

Statistics

Views

Total Views
1,672
Views on SlideShare
1,661
Embed Views
11

Actions

Likes
0
Downloads
2
Comments
0

4 Embeds 11

http://www.slideshare.net 5
http://phptalks.localhost 3
http://www.php-talks.com 2
http://static.slidesharecdn.com 1

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Richard van Velzen - JavaScript: mooi onder de rotzooi Richard van Velzen - JavaScript: mooi onder de rotzooi Presentation Transcript

    • Richard van Velzen expert-shops.com JavaScript Mooi 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
    • JavaScript Typen
      • 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 () { }
    • JavaScript Typen
      • 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 ' + 'en meer'
    • RegExp
      • :-)
      • Gebaseerd op reguliere expressies uit Perl
      • /[a-zd]+/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;
    • Object Prototype
      • 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
    • Variabelen Privacy
      • 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; } }; }());
    • Variabelen Privacy
      • 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 opleveren
      return { a: b }; return; { a: b; }; // geeft object return { 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?