Richard van Velzen expert-shops.com JavaScript Mooi onder de rotzooi
Wie ben ik? <ul><li>Richard </li></ul><ul><li>20 jaar </li></ul><ul><li>Webdeveloper </li></ul><ul><li>Gitarist </li></ul>
JavaScript <ul><li>Eerste versie door Brendan Eich bij Netscape </li></ul><ul><ul><li>Mocha, LiveScript, JavaScript </li><...
Invloeden <ul><li>Scheme </li></ul><ul><ul><li>Functioneel </li></ul></ul><ul><li>Self </li></ul><ul><ul><li>Prototypaal <...
JavaScript <ul><li>Imperatief </li></ul><ul><ul><li>Op basis van statements </li></ul></ul><ul><li>Functioneel </li></ul><...
JavaScript Typen <ul><li>Undefined </li></ul><ul><li>Null </li></ul><ul><li>Boolean </li></ul><ul><li>Number </li></ul><ul...
JavaScript Typen <ul><li>Type achterhalen </li></ul><ul><ul><li>typeof variabele </li></ul></ul><ul><ul><ul><li>Is niet al...
Undefined <ul><li>De naam zegt het al: ongedefinieerd </li></ul><ul><li>De variabele undefined heeft altijd deze waarde </...
Null <ul><li>Net als in veel andere talen: onbekend </li></ul><ul><li>Dit is niet hetzelfde als undefined </li></ul><ul><l...
Boolean <ul><li>Booleans kunnen twee waarden bevatten </li></ul><ul><ul><li>true </li></ul></ul><ul><ul><li>false </li></u...
Number <ul><li>Geen integers en doubles, alleen Number </li></ul><ul><li>Gebaseerd op IEEE 754 floating point </li></ul><u...
String <ul><li>Strings zijn sequenties van karakters </li></ul><ul><li>Altijd  UTF-16 (2 bytes per teken) </li></ul><ul><l...
RegExp <ul><li>:-) </li></ul><ul><li>Gebaseerd op reguliere expressies uit Perl </li></ul><ul><li>/[a-zd]+/i matcht alle s...
Array <ul><li>Arrays zijn objecten met geïndexeerde elementen </li></ul><ul><li>[1, 2, 3] is een array met 3 elementen </l...
Object <ul><li>Bijna elk ander type is gebaseerd op Object </li></ul><ul><li>Alles behalve undefined en null is een object...
Object Prototype <ul><li>Array.prototype.each = function () { … }; </li></ul><ul><li>Het prototype legt de fundering voor ...
Function <ul><li>Het belangrijkste type van de taal </li></ul><ul><li>Bijzonder makkelijk in het gebruik </li></ul><ul><li...
Typen <ul><li>Let op: alle objectgebaseerde typen hebben ook een “constructor” </li></ul><ul><ul><li>Dit is  altijd  afger...
Variabelen <ul><li>De kern van alle programmeertalen </li></ul><ul><li>Altijd  vooraf definiëren </li></ul><ul><ul><li>Of ...
Variabelen Privacy <ul><li>Hoe minder globale variabelen, hoe beter </li></ul><ul><li>Direct uitvoeren van een functie </l...
Variabelen Privacy <ul><li>Een enkel globaal object waarin je complete applicatie draait is veilig </li></ul><ul><ul><li>G...
Operators <ul><li>== (en !=) vs. === (en !==) </li></ul><ul><li>== doet typeconversie -> ongewenst </li></ul><ul><li>=== c...
Operators <ul><li>+ </li></ul><ul><ul><li>Zowel concattenatie als optellen </li></ul></ul><ul><ul><ul><li>'string' + 'stri...
Statements <ul><li>while (i < 10) { … } </li></ul><ul><li>for </li></ul><ul><ul><li>for (var i = 0; i < 10; ++i) { … } </l...
Statements <ul><li>for … in geeft alle waarden van een object </li></ul><ul><li>Heel handig, maar ook alles uit het protot...
Statements <ul><li>With </li></ul><ul><ul><li>Bizarre uitvinding </li></ul></ul><ul><ul><li>Werkt enkel vertragend zonder ...
Automatische semicolon <ul><li>Ten eerste: geen enkele taal is perfect </li></ul><ul><li>Je mag ; weglaten </li></ul><ul><...
Gereserveerde woorden <ul><li>abstract </li></ul><ul><li>boolean  break  byte </li></ul><ul><li>case catch  char class con...
Globaal <ul><li>JavaScript kent geen aparte compilatie-units zoals bijvoorbeeld C </li></ul><ul><li>Hierdoor deelt ieder s...
Closure <ul><li>Het krachtigste wat in een taal kan zitten </li></ul><ul><ul><li>Een functie binnen een andere functie hee...
Vragen?
Upcoming SlideShare
Loading in …5
×

Richard van Velzen - JavaScript: mooi onder de rotzooi

1,309 views

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,309
On SlideShare
0
From Embeds
0
Number of Embeds
13
Actions
Shares
0
Downloads
5
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Richard van Velzen - JavaScript: mooi onder de rotzooi

  1. 1. Richard van Velzen expert-shops.com JavaScript Mooi onder de rotzooi
  2. 2. Wie ben ik? <ul><li>Richard </li></ul><ul><li>20 jaar </li></ul><ul><li>Webdeveloper </li></ul><ul><li>Gitarist </li></ul>
  3. 3. JavaScript <ul><li>Eerste versie door Brendan Eich bij Netscape </li></ul><ul><ul><li>Mocha, LiveScript, JavaScript </li></ul></ul><ul><ul><ul><li>LiveScript was niet verwarrend genoeg </li></ul></ul></ul><ul><li>Microsoft kopieerde de taal voor IE </li></ul><ul><li>Ondertussen hebben we JScript, TraceMonkey, V8, SquirrelFish/Nitro, Carakan, Tamarin, &c. </li></ul>
  4. 4. Invloeden <ul><li>Scheme </li></ul><ul><ul><li>Functioneel </li></ul></ul><ul><li>Self </li></ul><ul><ul><li>Prototypaal </li></ul></ul><ul><li>C </li></ul><ul><ul><li>Syntax </li></ul></ul><ul><li>Perl </li></ul><ul><ul><li>Regexes </li></ul></ul>
  5. 5. JavaScript <ul><li>Imperatief </li></ul><ul><ul><li>Op basis van statements </li></ul></ul><ul><li>Functioneel </li></ul><ul><ul><li>Functies beheren de werking </li></ul></ul><ul><li>Prototypaal </li></ul><ul><ul><li>Geen klassen, objecten ervan van objecten </li></ul></ul><ul><li>Objectgeoriënteerd </li></ul><ul><ul><li>Niet in de klassieke zin, bijna alles is een object </li></ul></ul><ul><li>Dynamisch </li></ul><ul><ul><li>Variabelen kunnen ieder type bevatten </li></ul></ul>
  6. 6. JavaScript Typen <ul><li>Undefined </li></ul><ul><li>Null </li></ul><ul><li>Boolean </li></ul><ul><li>Number </li></ul><ul><li>String </li></ul><ul><li>RegExp </li></ul><ul><li>Array </li></ul><ul><li>Object </li></ul><ul><li>Function </li></ul><ul><li>undefined </li></ul><ul><li>null </li></ul><ul><li>true, false </li></ul><ul><li>1, 1.5, -5 </li></ul><ul><li>“ string”, 'string' </li></ul><ul><li>/^[a-z]+$/g </li></ul><ul><li>['een', 'twee', 'drie'] </li></ul><ul><li>{key: 'value'} </li></ul><ul><li>function () { } </li></ul>
  7. 7. JavaScript Typen <ul><li>Type achterhalen </li></ul><ul><ul><li>typeof variabele </li></ul></ul><ul><ul><ul><li>Is niet altijd even correct </li></ul></ul></ul><ul><ul><ul><ul><li>Dankzij de DOM </li></ul></ul></ul></ul><ul><ul><li>Object.prototype.toString.call(variabele) </li></ul></ul><ul><ul><ul><li>Waarden staan vast </li></ul></ul></ul><ul><ul><ul><ul><li>Maar werkt niet altijd goed met de DOM samen </li></ul></ul></ul></ul><ul><ul><li>variabele instanceof String </li></ul></ul><ul><ul><ul><li>Onhandig, niet gebruiken </li></ul></ul></ul>
  8. 8. Undefined <ul><li>De naam zegt het al: ongedefinieerd </li></ul><ul><li>De variabele undefined heeft altijd deze waarde </li></ul><ul><li>Enige betrouwbare vergelijking is met typeof </li></ul><ul><ul><li>typeof var === 'undefined' </li></ul></ul>
  9. 9. Null <ul><li>Net als in veel andere talen: onbekend </li></ul><ul><li>Dit is niet hetzelfde als undefined </li></ul><ul><li>typeof null === 'object', dit is niet handig </li></ul><ul><li>Enige betrouwbare vergelijking: var === null </li></ul>
  10. 10. Boolean <ul><li>Booleans kunnen twee waarden bevatten </li></ul><ul><ul><li>true </li></ul></ul><ul><ul><li>false </li></ul></ul><ul><li>typeof true === 'boolean' </li></ul><ul><li>Het resultaat van een vergelijking is boolean </li></ul>
  11. 11. Number <ul><li>Geen integers en doubles, alleen Number </li></ul><ul><li>Gebaseerd op IEEE 754 floating point </li></ul><ul><ul><li>Niet betrouwbaar genoeg, slechte keuze </li></ul></ul><ul><li>Kent twee speciale waarden </li></ul><ul><ul><li>NaN: Not A Number </li></ul></ul><ul><ul><ul><li>Een globale variabele </li></ul></ul></ul><ul><ul><ul><li>typeof NaN === 'number', NaN !== Nan </li></ul></ul></ul><ul><ul><ul><li>isNan(1 + NaN) === true </li></ul></ul></ul><ul><ul><li>Infinity </li></ul></ul><ul><ul><ul><li>Altijd groter dan welk Number </li></ul></ul></ul><ul><ul><ul><li>-Infinity is altijd kleiner </li></ul></ul></ul>
  12. 12. String <ul><li>Strings zijn sequenties van karakters </li></ul><ul><li>Altijd UTF-16 (2 bytes per teken) </li></ul><ul><li>Geen harde newlines in strings </li></ul><ul><ul><li>'string string string en meer' </li></ul></ul><ul><ul><li>'string string string ' + 'en meer' </li></ul></ul>
  13. 13. RegExp <ul><li>:-) </li></ul><ul><li>Gebaseerd op reguliere expressies uit Perl </li></ul><ul><li>/[a-zd]+/i matcht alle sequenties van letters en cijfers </li></ul><ul><li>Vaak veel efficiënter dan andere methoden </li></ul><ul><li>In feite niets meer dan een object, net als Date </li></ul>
  14. 14. Array <ul><li>Arrays zijn objecten met geïndexeerde elementen </li></ul><ul><li>[1, 2, 3] is een array met 3 elementen </li></ul><ul><li>{'0': 1,'1': 2, '2': 3} </li></ul><ul><li>Geen echte arrays, dus niet zo efficiënt </li></ul><ul><li>Wel erg makkelijk in gebruik </li></ul>
  15. 15. Object <ul><li>Bijna elk ander type is gebaseerd op Object </li></ul><ul><li>Alles behalve undefined en null is een object </li></ul><ul><li>Objecten zijn in feite simpele key/value-paren </li></ul><ul><ul><li>Associatieve arrays </li></ul></ul><ul><li>Bijzonder handig in het gebruik </li></ul><ul><ul><li>Je kunt te allen tijde een element toevoegen of verwijderen </li></ul></ul><ul><ul><ul><li>object.key = 'value'; </li></ul></ul></ul><ul><ul><ul><li>delete object.key; </li></ul></ul></ul>
  16. 16. Object Prototype <ul><li>Array.prototype.each = function () { … }; </li></ul><ul><li>Het prototype legt de fundering voor een serie objecten </li></ul><ul><li>Herbruikbaarheid </li></ul><ul><li>Een prototype is gewoon een Object, met prototype </li></ul><ul><li>if (typeof Object.create !== 'function') { </li></ul><ul><li>Object.create = function (o) { </li></ul><ul><li>function F() {} </li></ul><ul><li>F.prototype = o; </li></ul><ul><li>return new F(); </li></ul><ul><li>}; </li></ul><ul><li>} </li></ul>
  17. 17. Function <ul><li>Het belangrijkste type van de taal </li></ul><ul><li>Bijzonder makkelijk in het gebruik </li></ul><ul><li>First-class </li></ul><ul><li>Lambda </li></ul><ul><ul><li>Anonieme functies </li></ul></ul><ul><ul><li>Kunnen ook een naam krijgen </li></ul></ul><ul><li>Closure </li></ul><ul><ul><li>Variabelen van een hogere scope blijven te allen tijde beschikbaar </li></ul></ul><ul><li>Scope </li></ul><ul><ul><li>Geen block scope, alleen functie-scope </li></ul></ul><ul><li>Met return geef je een waarde terug </li></ul>
  18. 18. Typen <ul><li>Let op: alle objectgebaseerde typen hebben ook een “constructor” </li></ul><ul><ul><li>Dit is altijd afgeraden </li></ul></ul><ul><ul><li>Alleen bij RegExp is het aanvaardbaar </li></ul></ul><ul><ul><li>new Boolean ('string') </li></ul></ul><ul><ul><ul><li>!!'string' </li></ul></ul></ul><ul><ul><li>new String(15) </li></ul></ul><ul><ul><ul><li>'' + 15 </li></ul></ul></ul><ul><ul><li>new Number('0') </li></ul></ul><ul><ul><ul><li>+'0' </li></ul></ul></ul><ul><ul><ul><li>parseInt('0', 10) </li></ul></ul></ul>
  19. 19. Variabelen <ul><li>De kern van alle programmeertalen </li></ul><ul><li>Altijd vooraf definiëren </li></ul><ul><ul><li>Of zoek je problemen? </li></ul></ul><ul><li>Een nietgedefinieerde variabele aanroept geeft een foutmelding, niet undefined </li></ul><ul><li>var mijnVariabele = {}; </li></ul><ul><li>Globale variabelen zijn evil ! </li></ul><ul><ul><li>En vooral: niet nodig </li></ul></ul>
  20. 20. Variabelen Privacy <ul><li>Hoe minder globale variabelen, hoe beter </li></ul><ul><li>Direct uitvoeren van een functie </li></ul><ul><ul><li>var APP = (function () { var verborgenVariabele = true; return { publiekeFunctie: function (variabele) { // dankzij closure is verborgenVariabele beschikbaar return verborgenVariabele; } }; }()); </li></ul></ul>
  21. 21. Variabelen Privacy <ul><li>Een enkel globaal object waarin je complete applicatie draait is veilig </li></ul><ul><ul><li>Geen gevaar door het overschrijven van globale variabelen </li></ul></ul><ul><li>var namen = ['jan', 'piet', 'klaas']; function getNaam(i) { return namen[i]; } var namen = function (naam) { return naam; } </li></ul>
  22. 22. Operators <ul><li>== (en !=) vs. === (en !==) </li></ul><ul><li>== doet typeconversie -> ongewenst </li></ul><ul><li>=== controleert eerst het type </li></ul><ul><ul><li>De regels voor typeconversie zijn erg vreemd </li></ul></ul><ul><ul><li>0.1 + 0.2 === 0.300000000000004 </li></ul></ul><ul><li>Verder de standaardlijst (!, +, -, +=, -= &c.) </li></ul><ul><ul><li>Uitzondering: || en && </li></ul></ul><ul><ul><ul><li>Niet logisch </li></ul></ul></ul><ul><ul><ul><li>&& geeft tweede argument indien eerste true was </li></ul></ul></ul><ul><ul><ul><li>|| is precies andersom </li></ul></ul></ul><ul><ul><ul><ul><li>En in beide gevallen: anders de eerste </li></ul></ul></ul></ul>
  23. 23. Operators <ul><li>+ </li></ul><ul><ul><li>Zowel concattenatie als optellen </li></ul></ul><ul><ul><ul><li>'string' + 'string' === 'stringstring' </li></ul></ul></ul><ul><ul><ul><li>1 + 1 === 2 </li></ul></ul></ul><ul><ul><ul><li>'string' + 5 === 'string5' </li></ul></ul></ul><ul><ul><ul><li>5 + 1 + 'string' === '6string' </li></ul></ul></ul>
  24. 24. Statements <ul><li>while (i < 10) { … } </li></ul><ul><li>for </li></ul><ul><ul><li>for (var i = 0; i < 10; ++i) { … } </li></ul></ul><ul><ul><li>for (var key in object) { … } </li></ul></ul><ul><li>do { … } while (); </li></ul><ul><li>switch (v) { case 1: break; default: true; } </li></ul><ul><li>if (false) { } else if (true) { } </li></ul><ul><li>try { … } catch (e) { … } finally { … } </li></ul><ul><li>Loops kennen een break en continue </li></ul><ul><ul><li>Liever niet, de taal is al verwarrend genoeg </li></ul></ul>
  25. 25. Statements <ul><li>for … in geeft alle waarden van een object </li></ul><ul><li>Heel handig, maar ook alles uit het prototype </li></ul><ul><ul><li>Ongewenst, vaak </li></ul></ul><ul><li>Met hasOwnProperty kun je zien of een element niet uit het prototype komt </li></ul><ul><ul><li>for (var key in table) { if (table.hasOwnProperty(key)) { // doe er echt iets mee } } </li></ul></ul>
  26. 26. Statements <ul><li>With </li></ul><ul><ul><li>Bizarre uitvinding </li></ul></ul><ul><ul><li>Werkt enkel vertragend zonder meerwaarde </li></ul></ul><ul><ul><li>with (object) { // waar komt a vandaan? alert(a); } </li></ul></ul><ul><ul><li>var b = a; alert(b.a); </li></ul></ul>
  27. 27. Automatische semicolon <ul><li>Ten eerste: geen enkele taal is perfect </li></ul><ul><li>Je mag ; weglaten </li></ul><ul><ul><li>Doe dit niet ! </li></ul></ul><ul><li>Kan bijzonder gedrag opleveren </li></ul>return { a: b }; return; { a: b; }; // geeft object return { a: b };
  28. 28. Gereserveerde woorden <ul><li>abstract </li></ul><ul><li>boolean break byte </li></ul><ul><li>case catch char class const continue </li></ul><ul><li>debugger default delete do double </li></ul><ul><li>else enum export extends </li></ul><ul><li>false final finally float for function </li></ul><ul><li>goto </li></ul><ul><li>if implements import in instanceof int interface </li></ul><ul><li>long </li></ul><ul><li>native new null </li></ul><ul><li>package private protected public </li></ul><ul><li>return </li></ul><ul><li>short static super switch synchronized </li></ul><ul><li>this throw throws transient true try typeof </li></ul><ul><li>var volatile void </li></ul><ul><li>while with </li></ul>
  29. 29. Globaal <ul><li>JavaScript kent geen aparte compilatie-units zoals bijvoorbeeld C </li></ul><ul><li>Hierdoor deelt ieder script hetzelfde globale object </li></ul><ul><ul><li>Alleen te voorkomen met (function () { … }()); </li></ul></ul>
  30. 30. Closure <ul><li>Het krachtigste wat in een taal kan zitten </li></ul><ul><ul><li>Een functie binnen een andere functie heeft toegang tot alle variabelen die de scope erbuiten kan zien </li></ul></ul><ul><li>for (var i = 0; i < 5; ++i) { elems[i].onclick = function () { alert(i); // werkt niet goed }; } </li></ul><ul><li>for (var i = 0; i < 5; ++i) { elems[i].onclick = (function (i) { return function () { alert(i); // werkt prima }; }(i)); } </li></ul>
  31. 31. Vragen?

×