JavaScript - Programming Languages course


Published on

  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

JavaScript - Programming Languages course

  1. 1. JavaScript Yoav Rubin, [email_address] 24.06.10
  2. 2. A little bit about myself <ul><li>Graduated from the CS faculty in 2001 </li></ul><ul><li>Started to work in IBM research – Haifa about a year before that </li></ul><ul><ul><li>In the domains of visual programming environments, end user development, cloud computing </li></ul></ul><ul><li>Extensive usage of Java and JavaScript </li></ul>Source: If applicable, describe source origin
  3. 3. JavaScript <ul><li>The language of the web </li></ul><ul><ul><li>Web applications </li></ul></ul><ul><ul><li>Mobile applications </li></ul></ul><ul><li>Dynamic language </li></ul><ul><ul><li>Dynamic typing </li></ul></ul><ul><ul><li>Dynamic binding </li></ul></ul><ul><ul><li>No compilation till execution time </li></ul></ul>
  4. 4. <ul><li>How would you summarize JavaScript in one sentence: </li></ul><ul><ul><ul><li>Everything is dynamic </li></ul></ul></ul><ul><ul><ul><li>Code simplification </li></ul></ul></ul><ul><ul><ul><li>Exactly what web apps developers need </li></ul></ul></ul><ul><ul><ul><li>(because the web is a hostile platform, and the mobile web is even worse) </li></ul></ul></ul>JavaScript
  5. 5. <ul><li>Type system </li></ul><ul><li>Prototypes and inheritance </li></ul><ul><li>Functions as first class citizens </li></ul><ul><li>Closures </li></ul><ul><li>Dynamic binding </li></ul>What will we cover
  6. 6. JavaScript type system
  7. 7. Types <ul><li>Number – a 64 bit (a.k.a double) </li></ul><ul><ul><li>No integer </li></ul></ul><ul><li>String </li></ul><ul><ul><li>immutable </li></ul></ul><ul><ul><li>No char </li></ul></ul><ul><li>Boolean </li></ul><ul><li>Objects </li></ul><ul><ul><li>Array </li></ul></ul><ul><ul><li>Function </li></ul></ul><ul><li>Unit types </li></ul><ul><ul><li>null </li></ul></ul><ul><ul><li>undefined </li></ul></ul><ul><ul><li>NaN </li></ul></ul>
  8. 8. Type system <ul><li>Strongly typed (loose definition) </li></ul><ul><ul><li>With clear coercion rules </li></ul></ul><ul><ul><ul><li>== , != a comparison without type coercion </li></ul></ul></ul><ul><ul><ul><li>===, !== a comparison with type coercion </li></ul></ul></ul><ul><ul><ul><li>4 == ‘4’; //true </li></ul></ul></ul><ul><ul><ul><li>4 === ‘4’ // false </li></ul></ul></ul><ul><ul><li>The type of a variable can be determined using the ‘typeof’ operator </li></ul></ul><ul><li>Dynamic typing </li></ul><ul><ul><li>The type is not declared </li></ul></ul><ul><ul><ul><li>var a = 3; // number </li></ul></ul></ul><ul><ul><li>Changing the variable’s content changes its type </li></ul></ul><ul><ul><li>a = ‘s’; // string </li></ul></ul><ul><ul><li>Type rules are enforced at runtime </li></ul></ul>
  9. 9. Everything is a boolean <ul><li>Strongly typed, but still… </li></ul><ul><li>Everything in JavaScript has its boolean interpretation </li></ul><ul><ul><li>Usually referred as ‘truthy’ and ‘falsy’ </li></ul></ul><ul><li>These values are interpreted as false when needed: </li></ul><ul><ul><li>0, “”, null, undefined, NaN, false </li></ul></ul><ul><ul><li>Everything else is true </li></ul></ul><ul><li>What is it good for ? </li></ul>
  10. 10. Everything is a boolean – what is it good for? <ul><li>Part of an ‘if’ statement </li></ul><ul><ul><li>All of the following statements are equivalent </li></ul></ul><ul><ul><ul><li>If(a != null) </li></ul></ul></ul>If(a) <ul><ul><ul><li>If(a !== null && </li></ul></ul></ul><ul><ul><ul><li>a !== undefined && </li></ul></ul></ul><ul><ul><ul><li>a !== ‘’ && </li></ul></ul></ul><ul><ul><ul><li>a !== 0 && </li></ul></ul></ul><ul><ul><ul><li>a !== NaN && </li></ul></ul></ul><ul><ul><ul><li>a !== false) </li></ul></ul></ul>
  11. 11. Everything is boolean – what is it good for? <ul><li>Logical and (&&) </li></ul><ul><ul><li>Receives two operands </li></ul></ul><ul><ul><li>If the first operand is truthy, then returns the second operand’s value </li></ul></ul><ul><ul><ul><li>Otherwise returns the first one </li></ul></ul></ul><ul><li>Sometimes called the guard operator </li></ul><ul><ul><ul><li>var val; </li></ul></ul></ul><ul><ul><ul><li>If(obj){ </li></ul></ul></ul><ul><ul><ul><li>val = obj.methodCall(); </li></ul></ul></ul><ul><ul><ul><li>} </li></ul></ul></ul><ul><ul><ul><li>else{ </li></ul></ul></ul><ul><ul><ul><li>val = obj; </li></ul></ul></ul><ul><ul><ul><li>} </li></ul></ul></ul>var val = obj && obj.methodCall();
  12. 12. Everything is boolean – what is it good for? <ul><li>Logical or (||) </li></ul><ul><ul><li>Receives two operands </li></ul></ul><ul><ul><li>If the first operand is falsy, then returns the second operand’s value </li></ul></ul><ul><ul><ul><li>Otherwise returns the first one </li></ul></ul></ul><ul><li>Sometimes called the default operator </li></ul><ul><ul><ul><li>var val; </li></ul></ul></ul><ul><ul><ul><li>If(possibleVal){ </li></ul></ul></ul><ul><ul><ul><li>val = possibleVal; </li></ul></ul></ul><ul><ul><ul><li>} </li></ul></ul></ul><ul><ul><ul><li>else{ </li></ul></ul></ul><ul><ul><ul><li>val = defaultVal; </li></ul></ul></ul><ul><ul><ul><li>} </li></ul></ul></ul>var val = possibleVal || defaultVal;
  13. 13. Objects are objects <ul><li>An object is a collection of things (fields) </li></ul><ul><ul><li>Data (members) </li></ul></ul><ul><ul><li>Functions (methods) </li></ul></ul><ul><li>A set of mappings between a name of a field (key) to the field (value), done using one of these ways: </li></ul><ul><ul><ul><ul><li>anObject.fieldName = 3; </li></ul></ul></ul></ul><ul><ul><ul><ul><li>anObject[“fieldName”] = 3; </li></ul></ul></ul></ul><ul><ul><ul><li>(*)these lines are usually equivalent </li></ul></ul></ul><ul><ul><li>Just like a hashmap (without hash value and rehash) </li></ul></ul><ul><li>The mapping can be changed in run-time </li></ul><ul><ul><li>It is possible to replace a method with another method </li></ul></ul><ul><li>Still, there is a way to extend objects based on other objects (note - not classes) </li></ul>
  14. 14. I’ll have what she’s having – prototypal inheritance
  15. 15. The prototype <ul><li>The prototype is an object </li></ul><ul><ul><li>Just like any other object </li></ul></ul><ul><ul><li>Each object can act as a prototype </li></ul></ul><ul><li>Each object has a prototype </li></ul><ul><ul><li>This is a hidden link </li></ul></ul><ul><ul><ul><li>Created when the object is created </li></ul></ul></ul><ul><ul><ul><li>Cannot be changed </li></ul></ul></ul><ul><ul><li>The prototype itself can be changed </li></ul></ul><ul><ul><ul><li>Just like any other object </li></ul></ul></ul>
  16. 16. The prototype – when is it used? <ul><li>Inheritance - using functionality declared elsewhere </li></ul><ul><li>On access to a field of an object WHEN this field is not part of that object </li></ul><ul><ul><li>The object’s prototype is accessed for that field </li></ul></ul><ul><ul><li>And then the prototype’s prototype </li></ul></ul><ul><ul><li>This goes all the way till the prototype of Object </li></ul></ul><ul><li>A nice metaphor for it is that an object is a transparency placed on top of its prototype </li></ul>
  17. 17. The prototype (pType) The object (theObject) theObject.age; // 32 pType.age ++; The object (theObject) The prototype (pType) theObject.age; // 33 delete theObject.age; // nothing happens theObject.age; // 33 delete pType.age; // no more age field theObject.age; // undefined “ Mr” title: “ barber” job: 32 age: “ Jeff” name: “ Mr” title: “ barber” job: 33 age: “ Jeff” name:
  18. 18. The prototype (pType) The object (theObject) theObject.age; // 32 theObject.age ++; // value read from pType, added to theObject The object (theObject) The prototype (pType) theObject.age; // 33 delete theObject.age; // no more age member in theObject theObject.age; // 32 delete pType.age; theObject.age; // undefined “ Mr” title: “ barber” job: 32 age: “ Jeff” name: “ Mr” title: “ barber” job: 32 age: “ Jeff” name: 33 age:
  19. 19. Polymorphism <ul><li>One of the most important attributes of OO languages </li></ul><ul><li>JavaScript’s objects are not rigid enough to provide single-morphism </li></ul><ul><li>There are JavaScript toolkits that add this functionality to the language </li></ul><ul><ul><li>The most renown for it is the “Dojo Toolkit” </li></ul></ul>
  20. 20. (From the tyranny of the compiler)
  21. 21. Functions
  22. 22. Functions are objects <ul><li>Have members </li></ul><ul><ul><li>e.g., length (the number of arguments in the function’s declaration) </li></ul></ul><ul><li>Have methods </li></ul><ul><ul><li>E.g., toString (returns a string containing the function’s signature and body) </li></ul></ul><ul><li>Are first class citizens </li></ul><ul><ul><li>Can be sent as arguments to a function </li></ul></ul><ul><ul><li>Can be returned as a return value from a function </li></ul></ul><ul><li>Can be executed </li></ul>
  23. 23. <ul><li>function add(a,b){ </li></ul><ul><li>return a+b; </li></ul><ul><li>}; </li></ul><ul><li>add.length; // 2 </li></ul><ul><li>add.toString(); // “function add(a,b){return a+b;}” </li></ul>Functions are objects
  24. 24. More about functions <ul><li>Can be defined within another function </li></ul><ul><li>In that case the inner function knows of all the things defined within the outer function </li></ul><ul><li>This is called closure </li></ul><ul><li>What is it good for? </li></ul>
  25. 25. Write a function that calculates the fibonacci value of a number
  26. 26. Classic solution <ul><li>function fib(n){ </li></ul><ul><li>if(n < 2) </li></ul><ul><li>return n; </li></ul><ul><li>return fib(n-1) + fib(n-2) </li></ul><ul><li>} </li></ul><ul><li>fib(10) results in 177 calls to the fib function </li></ul>
  27. 27. Solution with closure <ul><li>function fastFib(n){ </li></ul><ul><li>var memo = [0,1]; </li></ul><ul><li>var fib = function(n){ </li></ul><ul><li>var result = memo[n]; </li></ul><ul><li>if(result === undefined){ </li></ul><ul><li>result = fib(n-1) +fib(n-2); </li></ul><ul><li>memo[n] = result; </li></ul><ul><li>} </li></ul><ul><li>return result; </li></ul><ul><li>} </li></ul><ul><li>return fib(n); </li></ul><ul><li>} </li></ul><ul><li>fastFib(10) results in 19 calls to the fib function </li></ul>This pattern is nicknamed memoization
  28. 28. Functions - what else is dynamic <ul><li>Every time a function is executed it has a built in array-like variable called ‘arguments’ </li></ul><ul><ul><li>It holds the set of arguments sent in the function call </li></ul></ul><ul><ul><li>arguments[i] is the i-th argument in the function call </li></ul></ul><ul><li>This is needed since the function’s signature is just like road signs in Rome </li></ul><ul><ul><li>Recommendation only </li></ul></ul><ul><li>It is valid to call the function with either more or less arguments then in its signature </li></ul>
  29. 29. Functions – arguments vs length <ul><li>func.length > arguments.length </li></ul><ul><ul><li>The last (func.length - arguments.length) have the value of undefined </li></ul></ul><ul><li>func.length < arguments.length </li></ul><ul><ul><li>The last (arguments.length - func.length) are accessible only from the arguments variable </li></ul></ul><ul><li>func.length == arguments.length </li></ul><ul><ul><li>No problem </li></ul></ul>
  30. 30. Functions – what’s ‘this’ <ul><li>Every time a function is executed it has a built in variable called ‘this’ </li></ul><ul><li>‘this’ points out to the context in which the function would run </li></ul><ul><ul><li>The context is bound to the function </li></ul></ul><ul><ul><li>The binding is done in run-time </li></ul></ul><ul><li>The binding is dependant upon the way the function was called </li></ul><ul><ul><li>There are 4 forms a function can be called </li></ul></ul>
  31. 31. Function call forms <ul><li>Method form </li></ul><ul><li>Function form </li></ul><ul><li>Apply form </li></ul><ul><li>Constructor form </li></ul>
  32. 32. The method form <ul><li>The function is a field of an object </li></ul><ul><li>The call is written in the following way: theObject.FuncName(); </li></ul><ul><li>The ‘this’ variable points out to theObject </li></ul>
  33. 33. The function form <ul><li>The call is written in the following way: funcName(); </li></ul><ul><li>The ‘this’ variable points out to the global object </li></ul><ul><li>This call form makes the usage of helper function within other function to be sometimes tricky </li></ul>
  34. 34. The apply form <ul><li>Each function has a function called ‘apply’ </li></ul><ul><li>Receives two arguments </li></ul><ul><ul><li>An object that would act as the ‘this’ variable when the function is executed </li></ul></ul><ul><ul><li>An Array that would act as the ‘arguments’ variable when the function is executed </li></ul></ul><ul><li>The call is written in the following way: funcName.apply(thisPtr, [newArgs]); </li></ul>
  35. 35. The constructor form <ul><li>Constructors are the only element in JavaScript that starts with capital letters </li></ul><ul><ul><li>Though this is just a convention </li></ul></ul><ul><li>Used to create and initialize a specific object </li></ul><ul><ul><li>The ‘this’ variable points out to a newly created object </li></ul></ul><ul><li>If the function has a field called ‘prototype’ then this field is the prototype of the created element </li></ul><ul><li>This call is written in the following way: var newMyObj = new MyObject(); </li></ul>
  36. 36. Constructor form – an example <ul><li>function AA (name, title) { </li></ul><ul><li> = name; </li></ul><ul><li>this.title = title; </li></ul><ul><li>} </li></ul><ul><li>AA.prototype = {‘height’:3}; </li></ul><ul><li>var a = new AA(“John”, “Mr”); </li></ul><ul><li>function AA (name, title) { </li></ul><ul><li>this = {}; </li></ul><ul><li>this.linkToPrototype = AA.prototype || Object.prototype; </li></ul><ul><li> = name; </li></ul><ul><li>this.title = title; </li></ul><ul><li>return this; </li></ul><ul><li>} </li></ul>; // “John” a.title; // “Mr” a.height; // 3 The code Behind the scenes of the constructor The result
  37. 37. Call forms “ The binding is dependant upon the way the function was called” <ul><li>var obj = {}; </li></ul><ul><li>obj.f = f; </li></ul><ul><li>obj.f(); </li></ul><ul><li>obj.a ; // 3 </li></ul><ul><li>f(); // now there’s a global variable a whose value is 3 </li></ul><ul><li>var newObj = new f(); </li></ul><ul><li>newObj.a; // 3 </li></ul><ul><li>var str = ‘xyz’; </li></ul><ul><li>f.apply(str,[]); </li></ul><ul><li>str.a; // 3 </li></ul>function f(){this.a = 3}; Method form Function form Constructor form Apply form
  38. 38. What about access rights? <ul><li>There are no access rights in JavaScript </li></ul><ul><ul><li>Everything is public, there is no such thing as ‘private’ </li></ul></ul><ul><li>The various function execution forms simply deflate this important concept </li></ul><ul><li>However, it is possible to mimic a private access right for a field in an object </li></ul><ul><li>Done using closure </li></ul>
  39. 39. function Counter(){ var count = 0; this.getValue = function(){ return count ;}; this.increase = function(){count ++;}; this.decrease = function(){count --;}; this.setValue = function(newVal){count = newVal;}; } var c = new Counter(); c.setValue(5); c.increase(); c.getValue(); // 6 c. count; // undefined public public public public private
  40. 40. Anonymous functions <ul><li>Functions doesn’t have to have an identifier </li></ul><ul><li>They can be anonymous </li></ul><ul><li>Becomes very useful when combined with immediate execution of the function </li></ul>
  41. 41. Write a function that receives an array of objects and sets their showIndex method to show their index in that array
  42. 42. Bad solution <ul><li>function(objs){ </li></ul><ul><li>for(var i=0,l=objs.length;i<l;i++) { </li></ul><ul><li>objs [i].showIndex = function(){ </li></ul><ul><li>alert(i); </li></ul><ul><li>} </li></ul><ul><li>} </li></ul><ul><li>} </li></ul><ul><li>What will be alerted? </li></ul>
  43. 43. Good solution <ul><li>function(objs){ </li></ul><ul><li>for(var i=0,l=objs.length;i<l;i++) { </li></ul><ul><li>objs[i].showIndex = ( </li></ul><ul><li>function(t){ // a function that returns a function, t here is a local variable </li></ul><ul><li>return function() { // this function sees the local variable ‘t’ of the red function </li></ul><ul><li>alert(t); </li></ul><ul><li>} </li></ul><ul><li>} )(i); // executing the red function </li></ul><ul><li>} </li></ul><ul><li>} </li></ul>
  44. 44. “Everything should be made as simple as possible, but not simpler” Albert Einstein
  45. 45. What happens when things are too simple (the dark side of JavaScript)
  46. 46. Two scopes <ul><li>In JavaScript there are two scopes only </li></ul><ul><ul><li>The global scope </li></ul></ul><ul><ul><li>The function scope </li></ul></ul><ul><li>No block scope </li></ul>
  47. 47. Global as the default scope <ul><li>The default scope for variable definition is the global scope </li></ul><ul><li>function (){ </li></ul><ul><li>var a = 3; // local variable </li></ul><ul><li>b = 4; // global variable </li></ul><ul><li>} </li></ul><ul><li>Whenever a function is executed in the function form, ‘this’ points out to the global scope </li></ul><ul><ul><li>And the function form is the simplest one => the one most novice developers would use unwittingly </li></ul></ul><ul><li>It is very simple to pollute the global scope </li></ul>
  48. 48. Semicolon insertion <ul><li>You don’t have to write semicolon at the end of a code line </li></ul><ul><li>The run-time compiler does it for you </li></ul><ul><li>This may lead to errors that are hard to find </li></ul><ul><ul><li>function f1 (){ </li></ul></ul><ul><ul><li>return </li></ul></ul><ul><ul><li>{val: 4}; </li></ul></ul><ul><ul><li>}; </li></ul></ul><ul><ul><li>function f1 (){ </li></ul></ul><ul><ul><li>return; </li></ul></ul><ul><ul><li>{val: 4}; </li></ul></ul><ul><ul><li>}; </li></ul></ul><ul><ul><li>var a = f1(); // undefined </li></ul></ul>What the developer wrote Behind the scenes of the function The result
  49. 49. The ‘with’ keyword <ul><li>Define a scope for a block </li></ul><ul><li>Intended to be used as a short hand </li></ul>a.b.c = a.b.d +a.b.e; with(a.b){ c=d+e; }
  50. 50. with(obj){ a = b } if(obj.a === undefined){ if(obj.b === undefined){ a=b ;// two global variables } else { a = obj.b; // a is global, b is not } else { if(obj.b === undefined){ obj.a=b; // b is global , a not } else { obj.a = obj.b; // both not global } } The ‘with’ keyword obj.a = obj.b; // both not global obj.a = b; // b is global, a is not + a = obj.b; // a is global, b not a=b; // two global variables - + - a (exist in obj)
  51. 51. Bitwise operators <ul><li>JavaScript supports bitwise operators: </li></ul><ul><ul><li>& , |, ^ , >>, << , >>> </li></ul></ul><ul><li>But </li></ul><ul><ul><li>JavaScript have only 64 bit number type </li></ul></ul><ul><ul><ul><li>No integer </li></ul></ul></ul><ul><li>Bitwise operators are used for faster, close to the hardware computations </li></ul><ul><li>In JavaScript this is not the case </li></ul>
  52. 52. Numerical calculations <ul><li>All calculations in JavaScript are floating point calculation </li></ul><ul><ul><li>10 / 3 = 3.3333333333333335 </li></ul></ul><ul><ul><li>Simply put – erroneous when the decimal point is involve </li></ul></ul><ul><ul><li>0.1 + 0.2 = 0.30000000004 </li></ul></ul>
  53. 53. The utility parseInt <ul><li>ParseInt(stingValue, radix) </li></ul><ul><ul><li>Strings that start with 0x are treated as hexadecimal </li></ul></ul><ul><ul><li>Strings that start with 0 are treated as octal based </li></ul></ul><ul><ul><ul><li>parseInt(“08”) and parseInt(“09”) returns undefined </li></ul></ul></ul><ul><ul><ul><li>Used often when parsing dates </li></ul></ul></ul>
  54. 54. Remember this ? <ul><li>Imperative </li></ul><ul><li>With prototypes (object-based, but not object-oriented) </li></ul><ul><li>Functions are first-class entities </li></ul><ul><li>Has lambda functions </li></ul><ul><li>With closures </li></ul><ul><li>Is weakly typed </li></ul><ul><li>Has dynamic typing </li></ul><ul><li>Has dynamic binding </li></ul>
  55. 55. <ul><li>Thank You </li></ul>