Javascript, Do you speak it!
-
Upload
victor-porof -
Category
Technology
-
view
3.181 -
download
2
description
Transcript of Javascript, Do you speak it!
JavaScriptDo you speak it!
Tuesday, August 2, 2011
!"#$%&'(&'&)**+,&-*.%/012%*3%*4&5#663*78(9::;#%7/<=$&>:"#$%&'(&'&)*
Tuesday, August 2, 2011
“The world’s most
misunderstood
programming language”
Tuesday, August 2, 2011
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
JavaScript
aka Mocha
aka LiveScript
aka JScript aka ECMAScript
Tuesday, August 2, 2011
Java... Script?
somehow related to Java?
maybe a subset?
less capable interpreted version of Java?
Tuesday, August 2, 2011
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
Design errors
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”
1 + “1” = ?1 + +”1” = ?
Tuesday, August 2, 2011
Bad implementations
earlier implementations were buggy
embedded horribly in browsers
did not respect the ECMA standard
Tuesday, August 2, 2011
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
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
(Loosely) TypesNumber
String
Boolean
Object (Function, Array, Date, RegExp)
Null
Undefined
typeofinstanceof
Tuesday, August 2, 2011
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
Haskell vs. JSpalindr :: [Int] -> Boolpalindr [] = Truepalindr [x] = Truepalindr 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
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
OOP
polymorphism
encapsulation
inheritance
abstractization
class Dog { public string name = “”; public int yearsOld = 0;
void bark(int times); void bark(float volume); void sleep();}
class Pudel : Dog { public int cuteness = 5;}
Dog pinky = new Dog();Dog leyla = new Pudel();
Tuesday, August 2, 2011
Objects in JavaScriptMyNamespace.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
Objects in JavaScriptMyNamespace.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;
no private members?
Tuesday, August 2, 2011
Closuresfunction foo(a, b){ function bar() { return a + b; }
return bar();}
function foo2(a, b){ function bar(c) { return a + b + c; }
return bar;}
var res1 = foo(5, 2);var res2 = foo2(5, 2);
var res3 = res2(3);
Tuesday, August 2, 2011
Private membersMyNamespace.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
Private membersMyNamespace.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
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, interpreters are a lot smarter these days, but..
Tuesday, August 2, 2011
Scope chainsfunction scope1(){ var elem2;
function scope2(){ var elem2; function scope3(){ var elem3; var func = window.alert;
return { something: elem4, somethingElse: elem5 } } }}
Tuesday, August 2, 2011
Memory leaks
function leakMemory(){ var elem = somethingThatOccupiesLotsOfMemory; function inner(){ }; return inner;}
var res1 = leakMemory();var res2 = leakMemory();
Tuesday, August 2, 2011
Circular references
function leakMemory(){ var elem = document.getElementById(“someId”); elem.onclick = function(){ };}
Tuesday, August 2, 2011
Circular references
function dontLeakMemory(){ var elem = document.getElementById(“someId”); elem.onclick = function(){ };
elem = null;}
Tuesday, August 2, 2011
Circular references
function leakMemory(){ var elem = document.getElementById(“someId”); elem.onclick = function(){ };
return elem;}
Tuesday, August 2, 2011
Circular references
function dontLeakMemory(){ var elem = document.getElementById(“someId”); elem.onclick = function(){ }; try { return elem; } finally { elem = null; }}
Tuesday, August 2, 2011
Scope bindingfunction scopeBinding(){ this.elem = {}
function addMemberToElem(){ this.elem.newProperty = 5; // fail };
addMemberToElem();}
Tuesday, August 2, 2011
Scope bindingfunction scopeBinding(){ this.elem = {};
function addMemberToElem(){ this.elem.newProperty = 5; };
addMemberToElem.call(this);}
Tuesday, August 2, 2011
Scope bindingfunction scopeBinding(){ this.elem = {}
function addMemberToElem(propertyValue){ this.elem.newProperty = propertyValue; };
addMemberToElem.call(this, 5);}
Tuesday, August 2, 2011
Scope bindingfunction scopeBinding(){ this.elem = {}
var addMemberToElem = function(propertyValue){ this.elem.newProperty = propertyValue; }.bind(this);
addMemberToElem(5);}
Tuesday, August 2, 2011
“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