JavaScript                            Do you speak it!Tuesday, August 2, 2011
!"#$%&(&&)*                   *                   +,&-*.%/012%*3%*4&5#663*                   78(9::;#%7/<=$&>:"#$%&(&&)*Tu...
“The world’s most                                  misunderstood                          programming language”Tuesday, Au...
We’ll talk about                          why JavaScript is the most misunderstood                          programming la...
JavaScript                          aka Mocha                                        aka LiveScript                       ...
Java... Script?                          somehow related to Java?                          maybe a subset?                ...
Java... Script?                          developed by Netscape in 1997 (vs. 3.0 in 1999)                          Java pre...
Design errors                                                           1 + “1” = ?                                       ...
Bad implementations                          earlier implementations were buggy                          embedded horribly...
Evolution                          first versions of JavaScript were quite weak                          no exception handl...
Overview                          types and operators, core objects, methods                          does not have classe...
(Loosely) Types                                                          typeof                          Number           ...
Lisp in C’s clothing                          C-like syntax (curly braces, for statement...)                          appe...
Haskell vs. JS          palindr :: [Int] -> Bool          palindr [] = True          palindr [x] = True          palindr x...
Objects                          JavaScript is fundamentally about objects                          usually implemented as...
OOP                                             class Dog {                                               public string na...
Objects in JavaScript          MyNamespace.Dog = function(){             this.name = “”;             this.yearsOld = 0;   ...
Objects in JavaScript          MyNamespace.Dog = function(){             this.name = “”;             this.yearsOld = 0;   ...
Closures          function foo(a, b){            function bar() {              return a + b;            }                r...
Private members          MyNamespace.Dog = function(){            var name = “”;            var yearsOld = 0;             ...
Private members          MyNamespace.Dog = function(paramName, paramYearsOld){            var name = paramName;           ...
Why is JavaScript                                slow?                           Bad compilation?Tuesday, August 2, 2011
Why is JavaScript                                slow?                           No compilation!*Tuesday, August 2, 2011
Why is JavaScript                                slow?                           No compilation!*             *yes, interp...
Scope chains          function scope1(){            var elem2;                function scope2(){                  var elem...
Memory leaks          function leakMemory(){            var elem = somethingThatOccupiesLotsOfMemory;                funct...
Circular references          function leakMemory(){            var elem = document.getElementById(“someId”);              ...
Circular references          function dontLeakMemory(){            var elem = document.getElementById(“someId”);          ...
Circular references          function leakMemory(){            var elem = document.getElementById(“someId”);              ...
Circular references          function dontLeakMemory(){            var elem = document.getElementById(“someId”);          ...
Scope binding          function scopeBinding(){            this.elem = {}                function addMemberToElem(){      ...
Scope binding          function scopeBinding(){            this.elem = {};                function addMemberToElem(){     ...
Scope binding          function scopeBinding(){            this.elem = {}                function addMemberToElem(property...
Scope binding          function scopeBinding(){            this.elem = {}                var addMemberToElem = function(pr...
“But why should I do OOP                             with JavaScript?”Tuesday, August 2, 2011
“But why should I do OOP                             with JavaScript?”Tuesday, August 2, 2011
?Tuesday, August 2, 2011
Upcoming SlideShare
Loading in...5
×

Javascript, Do you speak it!

2,942

Published on

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

No Downloads
Views
Total Views
2,942
On Slideshare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
15
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Javascript, Do you speak it!

  1. 1. JavaScript Do you speak it!Tuesday, August 2, 2011
  2. 2. !"#$%&(&&)* * +,&-*.%/012%*3%*4&5#663* 78(9::;#%7/<=$&>:"#$%&(&&)*Tuesday, August 2, 2011
  3. 3. “The world’s most misunderstood programming language”Tuesday, August 2, 2011
  4. 4. We’ll talk about why JavaScript is the most misunderstood programming language Object Oriented Programming in JavaScript function scope, closures, circular references making the web a little fasterTuesday, August 2, 2011
  5. 5. JavaScript aka Mocha aka LiveScript aka JScript aka ECMAScriptTuesday, August 2, 2011
  6. 6. Java... Script? somehow related to Java? maybe a subset? less capable interpreted version of Java?Tuesday, August 2, 2011
  7. 7. Java... Script? developed by Netscape in 1997 (vs. 3.0 in 1999) Java prefix intended to create confusion JavaScript is not interpreted JavaTuesday, August 2, 2011
  8. 8. Design errors 1 + “1” = ? 1 + +”1” = ? overloading “+” means both addition and string concatenation with type conversion error-prone “with” statement reserved word policies are much too strict semicolon insertion was “a huge mistake”Tuesday, August 2, 2011
  9. 9. Bad implementations earlier implementations were buggy embedded horribly in browsers did not respect the ECMA standardTuesday, August 2, 2011
  10. 10. Evolution first versions of JavaScript were quite weak no exception handling, inner functions in its present form, it’s a full OOP language ECMAScript 5.1Tuesday, August 2, 2011
  11. 11. Overview types and operators, core objects, methods does not have classes, but this functionality is accomplished with object prototypes functions are objects (and can be passed around as parameters)Tuesday, August 2, 2011
  12. 12. (Loosely) Types typeof Number instanceof String Boolean Object (Function, Array, Date, RegExp) Null UndefinedTuesday, August 2, 2011
  13. 13. Lisp in C’s clothing C-like syntax (curly braces, for statement...) appears to be a procedural language it’s actually a functional language!Tuesday, August 2, 2011
  14. 14. Haskell vs. JS palindr :: [Int] -> Bool palindr [] = True palindr [x] = True palindr xs = (head xs == last xs) && palindr (tail (init xs)) function palindr(xs) { var i, len = xs.length; for (i = 0; i < len / 2; i++) if (xs[i] !== xs[len - i - 1]) return false; return true; }Tuesday, August 2, 2011
  15. 15. Objects JavaScript is fundamentally about objects usually implemented as hashtables objects are created using constructors use a namespace for them (don’t modify objects you don’t own) use JS sugar: var obj = {}; and var arr = [];Tuesday, August 2, 2011
  16. 16. OOP class Dog { public string name = “”; public int yearsOld = 0; polymorphism void bark(int times); void bark(float volume); encapsulation void sleep(); } inheritance class Pudel : Dog { public int cuteness = 5; abstractization } Dog pinky = new Dog(); Dog leyla = new Pudel();Tuesday, August 2, 2011
  17. 17. Objects in JavaScript MyNamespace.Dog = function(){ this.name = “”; this.yearsOld = 0; }; MyNamespace.Dog.prototype = { bark: function(param){ }, sleep: function(){ } }; var pinky = new Dog(); var leyla = new Dog(); leyla.cuteness = 5;Tuesday, August 2, 2011
  18. 18. Objects in JavaScript MyNamespace.Dog = function(){ this.name = “”; this.yearsOld = 0; }; no private members? MyNamespace.Dog.prototype = { bark: function(param){ }, sleep: function(){ } }; var pinky = new Dog(); var leyla = new Dog(); leyla.cuteness = 5;Tuesday, August 2, 2011
  19. 19. Closures function foo(a, b){ function bar() { return a + b; } return bar(); var res1 = foo(5, 2); } var res2 = foo2(5, 2); function foo2(a, b){ var res3 = res2(3); function bar(c) { return a + b + c; } return bar; }Tuesday, August 2, 2011
  20. 20. Private members MyNamespace.Dog = function(){ var name = “”; var yearsOld = 0; this.bark = function(param){ if (“Number” === typeof param) { } else { } }; this.sleep = function(){ }; }; var pinky = new Dog();Tuesday, August 2, 2011
  21. 21. Private members MyNamespace.Dog = function(paramName, paramYearsOld){ var name = paramName; var yearsOld = paramYearsOld; this.bark = function(param){ }; this.sleep = function(){ }; get nrYearsOld(){ return yearsOld; }; }; var pinky = new Dog(); console.log(pinky.nrYearsOld);Tuesday, August 2, 2011
  22. 22. Why is JavaScript slow? Bad compilation?Tuesday, August 2, 2011
  23. 23. Why is JavaScript slow? No compilation!*Tuesday, August 2, 2011
  24. 24. Why is JavaScript slow? No compilation!* *yes, interpreters are a lot smarter these days, but..Tuesday, August 2, 2011
  25. 25. Scope chains function scope1(){ var elem2; function scope2(){ var elem2; function scope3(){ var elem3; var func = window.alert; return { something: elem4, somethingElse: elem5 } } } }Tuesday, August 2, 2011
  26. 26. Memory leaks function leakMemory(){ var elem = somethingThatOccupiesLotsOfMemory; function inner(){ }; return inner; } var res1 = leakMemory(); var res2 = leakMemory();Tuesday, August 2, 2011
  27. 27. Circular references function leakMemory(){ var elem = document.getElementById(“someId”); elem.onclick = function(){ }; }Tuesday, August 2, 2011
  28. 28. Circular references function dontLeakMemory(){ var elem = document.getElementById(“someId”); elem.onclick = function(){ }; elem = null; }Tuesday, August 2, 2011
  29. 29. Circular references function leakMemory(){ var elem = document.getElementById(“someId”); elem.onclick = function(){ }; return elem; }Tuesday, August 2, 2011
  30. 30. Circular references function dontLeakMemory(){ var elem = document.getElementById(“someId”); elem.onclick = function(){ }; try { return elem; } finally { elem = null; } }Tuesday, August 2, 2011
  31. 31. Scope binding function scopeBinding(){ this.elem = {} function addMemberToElem(){ this.elem.newProperty = 5; // fail }; addMemberToElem(); }Tuesday, August 2, 2011
  32. 32. Scope binding function scopeBinding(){ this.elem = {}; function addMemberToElem(){ this.elem.newProperty = 5; }; addMemberToElem.call(this); }Tuesday, August 2, 2011
  33. 33. Scope binding function scopeBinding(){ this.elem = {} function addMemberToElem(propertyValue){ this.elem.newProperty = propertyValue; }; addMemberToElem.call(this, 5); }Tuesday, August 2, 2011
  34. 34. Scope binding function scopeBinding(){ this.elem = {} var addMemberToElem = function(propertyValue){ this.elem.newProperty = propertyValue; }.bind(this); addMemberToElem(5); }Tuesday, August 2, 2011
  35. 35. “But why should I do OOP with JavaScript?”Tuesday, August 2, 2011
  36. 36. “But why should I do OOP with JavaScript?”Tuesday, August 2, 2011
  37. 37. ?Tuesday, August 2, 2011
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×