1. JavaScript
Do you speak it!
Tuesday, August 2, 2011
2. !"#$%&'(&'&)*
*
+,&-*.%/012%*3%*4&5#663*
78(9::;#%7/<=$&>:"#$%&'(&'&)*
Tuesday, August 2, 2011
3. “The world’s most
misunderstood
programming language”
Tuesday, August 2, 2011
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 faster
Tuesday, August 2, 2011
6. Java... Script?
somehow related to Java?
maybe a subset?
less capable interpreted version of Java?
Tuesday, August 2, 2011
7. Java... Script?
developed by Netscape in 1997 (vs. 3.0 in 1999)
Java prefix intended to create confusion
JavaScript is not interpreted Java
Tuesday, August 2, 2011
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. Bad implementations
earlier implementations were buggy
embedded horribly in browsers
did not respect the ECMA standard
Tuesday, August 2, 2011
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.1
Tuesday, August 2, 2011
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. (Loosely) Types
typeof
Number instanceof
String
Boolean
Object (Function, Array, Date, RegExp)
Null
Undefined
Tuesday, August 2, 2011
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. 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. 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. 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. 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. 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. 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. 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. 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
24. Why is JavaScript
slow?
No compilation!*
*yes, interpreters are a lot smarter these days, but..
Tuesday, August 2, 2011
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. Memory leaks
function leakMemory(){
var elem = somethingThatOccupiesLotsOfMemory;
function inner(){
};
return inner;
}
var res1 = leakMemory();
var res2 = leakMemory();
Tuesday, August 2, 2011
27. Circular references
function leakMemory(){
var elem = document.getElementById(“someId”);
elem.onclick = function(){
};
}
Tuesday, August 2, 2011
28. Circular references
function dontLeakMemory(){
var elem = document.getElementById(“someId”);
elem.onclick = function(){
};
elem = null;
}
Tuesday, August 2, 2011
29. Circular references
function leakMemory(){
var elem = document.getElementById(“someId”);
elem.onclick = function(){
};
return elem;
}
Tuesday, August 2, 2011
30. Circular references
function dontLeakMemory(){
var elem = document.getElementById(“someId”);
elem.onclick = function(){
};
try {
return elem;
}
finally {
elem = null;
}
}
Tuesday, August 2, 2011
31. Scope binding
function scopeBinding(){
this.elem = {}
function addMemberToElem(){
this.elem.newProperty = 5; // fail
};
addMemberToElem();
}
Tuesday, August 2, 2011
32. Scope binding
function scopeBinding(){
this.elem = {};
function addMemberToElem(){
this.elem.newProperty = 5;
};
addMemberToElem.call(this);
}
Tuesday, August 2, 2011
33. Scope binding
function scopeBinding(){
this.elem = {}
function addMemberToElem(propertyValue){
this.elem.newProperty = propertyValue;
};
addMemberToElem.call(this, 5);
}
Tuesday, August 2, 2011
34. Scope binding
function scopeBinding(){
this.elem = {}
var addMemberToElem = function(propertyValue){
this.elem.newProperty = propertyValue;
}.bind(this);
addMemberToElem(5);
}
Tuesday, August 2, 2011
35. “But why should I do OOP
with JavaScript?”
Tuesday, August 2, 2011
36. “But why should I do OOP
with JavaScript?”
Tuesday, August 2, 2011
