Javascript as a functional, dynamic language

1,231 views

Published on

Slides in dutch!
Javascript as a functional, dynamic language - not simply as a GUI editing tool.

Contents: primitives, objects, prototypal inheritance, functions, closures, scoping, contexting, pitfalls. Excluding the labs.

Published in: Technology
1 Comment
1 Like
Statistics
Notes
No Downloads
Views
Total views
1,231
On SlideShare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
27
Comments
1
Likes
1
Embeds 0
No embeds

No notes for slide

Javascript as a functional, dynamic language

  1. 1. JavaScript as a dynamic, functional languageDoor: Jan Sabbe & Wouter Groeneveld
  2. 2. Inhoud1. Context2. Primitives & objecten3. Prototypal inheritance4. Functies & closures5. Scoping & contexting6. Pitfalls
  3. 3. Hoe JS gebruikt wordt <script>function oei() { doStuff(); i = 10; copyPasta(this.i, 20);}function copypasta(i, j) { alert(new Date(i).getTime()); return j;}</script><a onclick=“oei();”>lala</a>
  4. 4. Hoe JS gebruikt kan worden <script>$(document).ready(function() { $(“#link”).click(MyStuff.oei);});var MyStuff = (function() { function privateStuff() { ... } return { oei: function() { ... } };})();</script><a id=“link”>lala</a>
  5. 5. Primitives & objecten
  6. 6. Variable declarationvar variabele = 5;var hallo = "hallo";var 1 = “een”; // syntax errorvar _ = “omgh4x”; // okPrimitivesnumberstringbooleanImmutable & case sensitive!
  7. 7. Speciale valuesundefined: onbekende waardevar a;a == undefined;null: lege waardevar a = null;a == null;NaN: geen getalisNaN(parseInt(“bomma”)) == trueisNaN(undefined)== ??Infinity: groter dan alle andere numbers1 / 0 == Infinity
  8. 8. typeof = keywordgeeft strings:“object” (ook bij null)“function” (ook al is een functie een object)“string”, “boolean”“number” (ook bij Infinity, NaN)“undefined”
  9. 9. String utility functionsstr.splitstr.indexOfstr.replace(regex)str.toLowerCase...Zie API:https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String
  10. 10. Objecten:een map van key - values value kan getal, string, object, functie zijn
  11. 11. manieren om aan te maken literal var locatie = { x: 3, y: 4, afstandTot: function () { var dx = this.x + this.y; return Math.sqrt(dx); } }new Object() var locatie = new Object(); locatie.x = 3; locatie.y = 4; locatie.afstandTot = function () { … };
  12. 12. manieren om aan te makenLiteral objects syntax – opletten!!dit wel: dit niet:var obj = { var obj = { key1: value1, var bla = 3; doeStuff(); key2: value2, }; key3: value3};
  13. 13. lezen console.log(locatie.x); console.log(locatie[„x‟]; itereren for (var key in locatie) { console.log(locatie[key]); } toevoegen locatie.z = 1; locatie[„z‟] = 1; wijzigen locatie.x = 43; locatie[„x‟] = 43;verwijderen delete locatie.z; delete locatie[„zumba‟];
  14. 14. Functiesfunction eenFunctie(naam) { console.log("Hello, " + naam);}Functie literals:var eenFunctie = function(naam) { console.log("Hello, " + naam);}Gevolg: géén overloading, slechts def. overschrijven
  15. 15. voorbeeld: functie kan object retournerenfunction createPunt(x,y) { return { x: x, y: y, afstandTot: function (anderPunt) { return Math.sqrt(...); } };}
  16. 16. Arrays: (= een object)var arr = ["a", "b", "c"];Itereren:x.forEach(function(i) { console.log(i);});for(var i = 0; i < ...)
  17. 17. Array utility functionsarr.lengtharr.push, poparr.splice, slicearr.shift, unshiftarr.sortarr.filter, arr.map...Zie API:https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Array
  18. 18. Associative Arrays => Objectsvar objArr = { 0: "nul", 1: "een"};var arr = [ "nul", "een" ];
  19. 19. Lab 1
  20. 20. prototypes locatie myObjectobject verwijst naar ander object (prototype)
  21. 21. opzoeken van property locatiealtijd eerst in object myObject zelf opzoeken
  22. 22. opzoeken van propertylocatie myObject locatie.x
  23. 23. opzoeken van propertylocatie myObject indien niets gevonden, zoeken in prototype
  24. 24. opzoeken van propertylocatie myObject locatie.y
  25. 25. opzoeken van propertylocatie myObject anotherObj eventueel verder zoeken
  26. 26. opzoeken van propertylocatie myObject anotherObj locatie.w
  27. 27. wijzigingen locatie myObjectaltijd in object zelf
  28. 28. wijzigingenlocatie myObjectlocatie.x = 4;
  29. 29. toevoegenlocatie myObjectlocatie.y = 3;
  30. 30. verwijderenlocatie myObject delete locatie.y
  31. 31. Object.create (ES5)var punt = { afstandTot: function(anderPunt) { return Math.sqrt(...); }};var punt1 = Object.create(punt);punt1.x = 3;punt1.y = 4;var punt2 = Object.create(punt);
  32. 32. ECMAScript ?ECMA= European Computer Manufacturers Association= standaardisatie (de “spec”)Browsers implementeren ECv5 = Javascript
  33. 33. 2 objecten, 1 prototype ??var proto = { wow: “wow man da‟s vet!”};var obj = Object.create(proto);var obj2 = Object.create(proto);console.log(obj.wow == obj2.wow);console.log(obj.wow);proto.wow = “mind is blown, again...”;console.log(obj.wow);
  34. 34. prototype is een object kan dus steeds gewijzigd wordenArray.prototype.telEersteTweeOp = function () { return this[0] + this[1];}[1,2].telEersteTweeOp(); wordt bijvoorbeeld gebruikt door es5-shim om standaard API te implementeren op IE
  35. 35. Lab 2
  36. 36. Function arguments magic:function wow() { console.log(arguments[1]);}wow("jos", "lowie"); // prints "lowie"
  37. 37. closure:"een functie die de omgeving waarin hij is aangemaakt bijhoudt" functieX(7) functieY()
  38. 38. functieX()functieY(3)functieY(4)
  39. 39. Functie evaluatie = nieuwe omgeving!var omgevingY = functieX();omgevingY(3);omgevingY(4); // arr = [3, 4]functieX()(10);// nieuwe arr = [10]// vorige arr = [3, 4]
  40. 40. hoistingvar a = 3;function f() { console.log(a); var a = 5;}f(); // wat is de uitkomst?
  41. 41. Best practice: definieer alle vars eerst:function a() { var a, b, c, ...; ... a = 5;}JSLint checkt hierop.
  42. 42. Lab 3
  43. 43. Scope chaining: toplevel scope = window!w = 6; // same as „window.w = 6;‟ // same as „var w = 6;‟function F() { var X = 55; var Z = 10; function FinF(){ var X = 50; var Y = 60; }}
  44. 44. Scope chaining
  45. 45. function test () { var a = 5; if(a === 5) { var b = 555; ... } console.log(b); // kan dit?}
  46. 46. JS heeft géén Block level scope: ... maar wél Function level scope:function test () { var a = 5, b; if(a === 5) { b = 555; ... } console.log(b);} best practice: vars begin van functie zetten
  47. 47. Functie definieren en direct evalueren:(function(){})();Interessant voor encapsulatie!
  48. 48. function test () { var a = 5; if(a === 5) { (function () { var b = 555; })(); } console.log(b);}
  49. 49. Private variabelen voor object:function createPersoon() { var naam = Jos; return { getName: function() { return naam; } };}var persoon = createPersoon();persoon.getName(); // === “Jos”persoon.naam // === undefined
  50. 50. Module pattern:var MOD = (function(dep1, dep2) { var mr = "Mr."; function createPersoon(naam) { return { getName: function() { return mr + naam; } }; } return { init: function() { ... }, createPersoon: createPersoon };})(dependency1, dependency2);
  51. 51. Wanneer moet ik een module maken?• Duplicatie• Plugin, framework, ...• Reuse (component-gebaseerd)Wanneer mag ik geen module maken?• Eenmalige code, uniek op 1 pagina• Weinig code (gebruik gewoon encapsulatie)Hou het zo simpel mogelijk!
  52. 52. Context in functions
  53. 53. function afstander(anderPunt) { return this.x + this.y;}var punt1 = { x: 1, y: 1, afstandTot: afstander}var punt2 = { x: 2, y: 2, afstandTot: afstander} op wat slaat this?
  54. 54. this wordt bepaald bij oproepen functiepunt1.afstandTot(punt2) this = punt1punt2.afstandTot(punt1) this = punt2afstander(punt1) this = window (globale object in javascript)this kan expliciet opgegeven wordenafstander.apply(punt1, [punt2]); this = punt1afstander.call(punt1, punt2); this = punt1
  55. 55. callbacks en contexting:var persoon = { naam: "jos", roep: function() { alert("ey, " + this.naam); }}setTimeout(persoon.roep, 1000);
  56. 56. callbacks fix closures:var persoon = { naam: "jos", roep: function() { alert("ey, " + this.naam); }}setTimeout(function() { persoon.roep()}, 1000);
  57. 57. callbacks fix binding:var persoon = { naam: "jos", roep: function() { alert("ey, " + this.naam); }}setTimeout( persoon.roep.bind(persoon), 1000);
  58. 58. Lab 4 + JSLint
  59. 59. new operator: constructor functies newvar jos = new Persoon() is hetzelfde alsvar jos = Object.create(Persoon.prototype);Persoon.call(jos);
  60. 60. new operator: constructor functiesfunction Persoon() { this.naam = “jos”; // no return statement}Persoon.prototype.praat = function () {...}var jos = new Persoon();jos.naam === “jos";jos.praat();
  61. 61. instanceofvar jos = new Persoon();jos instanceof Persoon === true;// is hetzelfde als:Persoon.prototype.isPrototypeOf(jos)
  62. 62. Pitfalls
  63. 63. == doet aan type-casting== (equality operator) probeert te casten naar zelfde type gebruik === (identity operator) en !== - doen geen type casting
  64. 64. Falsy values:function ding(a) { if(!a) a = 5; return a;}ding(400); // ?ding(0); // ?ding(null); // ?Expliciet checken:if (a === undefined)
  65. 65. Objecten als key: var obj = {}; var key1 = new Object(); var key2 = new Object(); obj[key1] = “hi”; obj[key2] = “yo”; console.log(obj[key1]); // ??Oplossing: toString() implementeren?=> Gebruik een framework
  66. 66. typecasting lolligheid[] + 23 ?false + 23 ?true + 23 ?null + 23 ?[1, 2] + 23 ?“kadootje” + 23?undefined + 23 ?Infinity + 23 ?
  67. 67. Conclusie
  68. 68. Hoe JS gebruikt werd!!!<script>function oei() { doStuff(); i = 10; copyPasta(this.i, 20);}function copypasta(i, j) { alert(new Date(i).getTime()); return j;}</script><a onclick=“oei();”>lala</a>
  69. 69. Voor wie nog honger heefthttp://www.jefklak.be/wiki/code/javascript/home

×