0
Advanced JavaScript                  From Novice To NinjaTuesday, September 18, 12
Agenda                  JavaScript History                  Language Overview                  Arrays & Objects           ...
The World’s Most                     Misunderstood                     Programming LanguageTuesday, September 18, 12
History             1995 Brendan Eich started             developing a new language             for Netscape Navigator 2.0...
JS Today                  Used for Client side                  development on                  desktop and mobile        ...
Language Overview                  JavaScript is not a toy                  JavaScript has nothing to do with Java        ...
JavaScript Key Ideas                  Interpreter based (no compilation)                  Loosely typed language          ...
JavaScript Core Types                  Numbers                  Strings                  Booleans                  null   ...
JavaScript Gotchas                  var x = “3”;                  var y = 5;                  x + y == 8;                 ...
JavaScript Gotchas                  var x = “3”;                  var y = 5;                  x + y == 8;    // false     ...
JavaScript Gotchas                  function foo() {   function bar() {                      return             return { v...
JavaScript Gotchas                  // returns undef   // returns object                  function foo() {   function bar(...
JavaScript Gotchas                  1          === 1;                  1/0        === 1/0;                  Number(‘a’) ==...
JavaScript Gotchas                  1          === 1;               // true                  1/0        === 1/0;          ...
Q&A                  JavaScript History                  Language Overview                  Arrays & Objects              ...
Objects                  JS Objects are container for data                  A data field in an object is a name-value pair ...
Using Objects                   name      Ynon Perek                   website   http://www.ynonperek.comTuesday, Septembe...
Using Objects                  var myObject = {                            name : “Ynon Perek”,                           ...
Using Objects             console.dir(myObject); // prints all the fields             myObject.name        === “Ynon Perek...
Object Patterns                  Object Literals vs. Object Ctor                  Maker functions                  Object ...
Object Literals vs. Ctor                  Using object literals is the recommended way to                  create objects ...
Maker FunctionsTuesday, September 18, 12
Maker Functions             function Person(name, age) {                  var that = { name : name, age : age };          ...
Maker Functions                  Using a maker function to create new objects                  saves duplicate code       ...
Example                  Implement a Quiz JavaScript system                  Use “Question” class with four possible answe...
Object PrototypesTuesday, September 18, 12
Object Prototypes                  In JavaScript, every object has a “prototype”                  object.                 ...
Prototype Chain         Freshman                         Student                Person         goto: party                ...
The object Function             function object(parent) {                     function F() {};                            ...
The object Function                  creates a new object with the prototype ‘parent’                  uses new to keep th...
Prototype Example             var person     = { age : 12 };             var student     = object(person);             stu...
Prototypes & Makers                  Always use Maker functions                  For leafs, initialize object literals    ...
Exercise                  Write a maker function for a Car object, using an                  object literal. Car should pr...
Arrays                  Arrays are objects with numeric keys.                  A length attribute is maintained automatica...
Array Functions                  join                  pop, push                  shift, unshift                  reverse,...
Exercise                  Implement a Phonebook object that maintains an                  array of Contact objects.       ...
Q&A                  JavaScript History                  Language Overview                  Arrays & Objects              ...
Functions                  The word ‘function’                        Followed by an optional name                        ...
Functions                  function hello(who) {                   console.log(“Hello, “ + who);                  }       ...
Function.Prototype                  apply, call                  toStringTuesday, September 18, 12
Scope                  In JavaScript, only functions have scope.                  The var keyword indicates a scoped varia...
Scope             // Using functions to scope our code             (function() {               var x = 5;                 ...
Scope                       Do:                             Wrap every file in an anonymous function                       ...
Constructor Functions                  If a function is called with new:                        A new object is created be...
Return Value                  return is used to return a value                  default return value for non-ctor function...
Tip                  Prefer that-style constructor over this                  In that-style constructors, always remember ...
Function Patterns                  Modules                  Immediate Functions                  Configuration Objects     ...
Modules                  A module is a unit of code reuse                  Some code in a module is “public” - shared with...
Function Arguments             function sum() {                   var i = 0,                            n = arguments.leng...
Example - Calculator                     Public code:                            add_to_register                          ...
Immediate Functions                  Execute a function as soon as it is defined                  Provides a scoped “sandbo...
Configuration Objects                  When a large list of arguments is required, use                  configuration object...
Configuration Objects                  Example                        Student function which takes a configuration          ...
Function Exercise                  Write a module for time management                  Module should provide:             ...
Function Patterns                  Modules                  Immediate Functions                  Configuration Objects     ...
Function PrototypesTuesday, September 18, 12
Function Prototypes                  functions have a special attribute: prototype                  When an object’s attri...
Function Prototypes                  We implement inheritance using prototypes - this                  is called prototypi...
Design Patterns                  Singleton                  Factory                  SuperTuesday, September 18, 12
Singleton                  Put the object on global.                  Access it from everywhere in your program           ...
Factory                  Use a single factory object with a method to                  produce each product               ...
Using Super                  JavaScript has no native ‘super’ call                  To use the superclass in the inheritan...
Using Super             function object(parent) {                     function F() { /* CODE GOES HERE */ };              ...
Using Super             function object(parent) {                     function F() { this.uber = parent };                ...
Using Super                  Now each object has an ‘uber’ property that                  points to its prototype object  ...
JS App Tips                  App is made of components. On mobile, only one                  visible component at a time; ...
Q&ATuesday, September 18, 12
Thank You                  Ynon Perek                  ynonperek@yahoo.com                  ynonperek.comTuesday, Septembe...
Upcoming SlideShare
Loading in...5
×

03 Advanced JavaScript

2,038

Published on

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

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

No notes for slide

Transcript of "03 Advanced JavaScript"

  1. 1. Advanced JavaScript From Novice To NinjaTuesday, September 18, 12
  2. 2. Agenda JavaScript History Language Overview Arrays & Objects FunctionsTuesday, September 18, 12
  3. 3. The World’s Most Misunderstood Programming LanguageTuesday, September 18, 12
  4. 4. History 1995 Brendan Eich started developing a new language for Netscape Navigator 2.0 Original name was LiveScript Announced on Dec 1995 as JavaScript 1996 Microsoft responded with JScriptTuesday, September 18, 12
  5. 5. JS Today Used for Client side development on desktop and mobile Used for Server side development using NodeJs Embedded in applications using RhinoTuesday, September 18, 12
  6. 6. Language Overview JavaScript is not a toy JavaScript has nothing to do with Java JavaScript is a powerful programming language on its ownTuesday, September 18, 12
  7. 7. JavaScript Key Ideas Interpreter based (no compilation) Loosely typed language Objects are just hash tables Prototypical inheritance model Functions are regular objects (with a twist) Arrays are regular objects (with a twist)Tuesday, September 18, 12
  8. 8. JavaScript Core Types Numbers Strings Booleans null undefined ObjectsTuesday, September 18, 12
  9. 9. JavaScript Gotchas var x = “3”; var y = 5; x + y == 8; x + y == 35; x + y === 35;Tuesday, September 18, 12
  10. 10. JavaScript Gotchas var x = “3”; var y = 5; x + y == 8; // false x + y == 35; // true x + y === 35; // falseTuesday, September 18, 12
  11. 11. JavaScript Gotchas function foo() { function bar() { return return { val : 3 } } { var x = foo(); val : 3 } var y = bar(); } x.val == y.val;Tuesday, September 18, 12
  12. 12. JavaScript Gotchas // returns undef // returns object function foo() { function bar() { return return { val : 3 } } { var x = foo(); val : 3 } var y = bar(); } x.val == y.val; // errorTuesday, September 18, 12
  13. 13. JavaScript Gotchas 1 === 1; 1/0 === 1/0; Number(‘a’) === Number(‘a’); ‘a‘ === “a”Tuesday, September 18, 12
  14. 14. JavaScript Gotchas 1 === 1; // true 1/0 === 1/0; // true Number(‘a’) === Number(‘a’); // false ‘a‘ === “a” // trueTuesday, September 18, 12
  15. 15. Q&A JavaScript History Language Overview Arrays & Objects FunctionsTuesday, September 18, 12
  16. 16. Objects JS Objects are container for data A data field in an object is a name-value pair The name can be any string The value can be anything except undefinedTuesday, September 18, 12
  17. 17. Using Objects name Ynon Perek website http://www.ynonperek.comTuesday, September 18, 12
  18. 18. Using Objects var myObject = { name : “Ynon Perek”, website : “http://www.ynonperek.com” }Tuesday, September 18, 12
  19. 19. Using Objects console.dir(myObject); // prints all the fields myObject.name === “Ynon Perek” myObject[‘website’] === http://www.ynonperek.comTuesday, September 18, 12
  20. 20. Object Patterns Object Literals vs. Object Ctor Maker functions Object PrototypesTuesday, September 18, 12
  21. 21. Object Literals vs. Ctor Using object literals is the recommended way to create objects It is faster than calling new Object() It is more predictable than calling new Object() It is simplerTuesday, September 18, 12
  22. 22. Maker FunctionsTuesday, September 18, 12
  23. 23. Maker Functions function Person(name, age) { var that = { name : name, age : age }; that.hello = function() { console.log(“Hello, My name is ” + that.name) }; return that; }Tuesday, September 18, 12
  24. 24. Maker Functions Using a maker function to create new objects saves duplicate code Use the “that” pattern against “new” pitfalls Load your newly created object with functionsTuesday, September 18, 12
  25. 25. Example Implement a Quiz JavaScript system Use “Question” class with four possible answers and on correct answer Use “Quiz” class to hold an array of questionsTuesday, September 18, 12
  26. 26. Object PrototypesTuesday, September 18, 12
  27. 27. Object Prototypes In JavaScript, every object has a “prototype” object. When JS interpreter fails to find an attribute in an object, it searches the prototype.Tuesday, September 18, 12
  28. 28. Prototype Chain Freshman Student Person goto: party grade : 90 age : 12 Freshman.grade === 90 // from Student Student.age === 12 // from Person Worker.age === 12 // from Person Worker Worker.salary === 3800 // from Worker salary : 3800Tuesday, September 18, 12
  29. 29. The object Function function object(parent) { function F() {}; F.prototype = parent || Object; return new F(); }Tuesday, September 18, 12
  30. 30. The object Function creates a new object with the prototype ‘parent’ uses new to keep the prototype link supports no arguments for object literalsTuesday, September 18, 12
  31. 31. Prototype Example var person = { age : 12 }; var student = object(person); student.grade = 90; var freshman = object(student); freshman.goto = “party”;Tuesday, September 18, 12
  32. 32. Prototypes & Makers Always use Maker functions For leafs, initialize object literals For nodes, use the object() functionTuesday, September 18, 12
  33. 33. Exercise Write a maker function for a Car object, using an object literal. Car should provide members: max_speed and drive() Write maker functions for 3 car models using the object() function. Implement a function on a car model which uses data from CarTuesday, September 18, 12
  34. 34. Arrays Arrays are objects with numeric keys. A length attribute is maintained automatically by JS to mean last_index + 1Tuesday, September 18, 12
  35. 35. Array Functions join pop, push shift, unshift reverse, sort - changes original array a.slice(0, a.length).reverse() - Does not modify original array aTuesday, September 18, 12
  36. 36. Exercise Implement a Phonebook object that maintains an array of Contact objects. Each Contact should have a name field and a phone field. Test by creating 5 contacts in the Phonebook and print them to the console.Tuesday, September 18, 12
  37. 37. Q&A JavaScript History Language Overview Arrays & Objects FunctionsTuesday, September 18, 12
  38. 38. Functions The word ‘function’ Followed by an optional name Followed by a set of parameters Followed by the function bodyTuesday, September 18, 12
  39. 39. Functions function hello(who) { console.log(“Hello, “ + who); } var hello = function hello(who) { console.log(“Hello, “ + who); };Tuesday, September 18, 12
  40. 40. Function.Prototype apply, call toStringTuesday, September 18, 12
  41. 41. Scope In JavaScript, only functions have scope. The var keyword indicates a scoped variable There is no block scopeTuesday, September 18, 12
  42. 42. Scope // Using functions to scope our code (function() { var x = 5; var y = 7; console.log(x + y); }());Tuesday, September 18, 12
  43. 43. Scope Do: Wrap every file in an anonymous function Prefix every variable with var A Good fence makes good neighborsTuesday, September 18, 12
  44. 44. Constructor Functions If a function is called with new: A new object is created before entering the function That object is passed as the this argument That object becomes the default return value of the functionTuesday, September 18, 12
  45. 45. Return Value return is used to return a value default return value for non-ctor functions is undefined default return value for ctor is thisTuesday, September 18, 12
  46. 46. Tip Prefer that-style constructor over this In that-style constructors, always remember to return that.Tuesday, September 18, 12
  47. 47. Function Patterns Modules Immediate Functions Configuration Objects Prototype MethodsTuesday, September 18, 12
  48. 48. Modules A module is a unit of code reuse Some code in a module is “public” - shared with other modules. Some code in a module is “private” - cannot be accessed from outside.Tuesday, September 18, 12
  49. 49. Function Arguments function sum() { var i = 0, n = arguments.length, sum = 0; for ( i=0; i < n; ++i ) { sum += arguments[i]; } return sum; }Tuesday, September 18, 12
  50. 50. Example - Calculator Public code: add_to_register sub_from_register read_register zero_register http://ynonperek.com/course/web/javascript- functions.html#modulesTuesday, September 18, 12
  51. 51. Immediate Functions Execute a function as soon as it is defined Provides a scoped “sandbox” for initialization code Pass in the global object to avoid using ‘window’ in your code.Tuesday, September 18, 12
  52. 52. Configuration Objects When a large list of arguments is required, use configuration objects Solves “which comes first” Rule of Thumb: if params > 2, use the objectTuesday, September 18, 12
  53. 53. Configuration Objects Example Student function which takes a configuration object with optional values http://ynonperek.com/course/web/javascript- functions.html#confTuesday, September 18, 12
  54. 54. Function Exercise Write a module for time management Module should provide: add_meeting(meeting_info) delete_meeting(meeting_info) get_meetings_between(start_dt, end_dt)Tuesday, September 18, 12
  55. 55. Function Patterns Modules Immediate Functions Configuration Objects Prototype MethodsTuesday, September 18, 12
  56. 56. Function PrototypesTuesday, September 18, 12
  57. 57. Function Prototypes functions have a special attribute: prototype When an object’s attribute lookup is performed, the interpreter checks its constructor.prototypeTuesday, September 18, 12
  58. 58. Function Prototypes We implement inheritance using prototypes - this is called prototypical inheritance Example: http://ynonperek.com/course/fed/ javascript-oo.htmlTuesday, September 18, 12
  59. 59. Design Patterns Singleton Factory SuperTuesday, September 18, 12
  60. 60. Singleton Put the object on global. Access it from everywhere in your program Always consider using a namespace global.Log = log;Tuesday, September 18, 12
  61. 61. Factory Use a single factory object with a method to produce each product Implement a product method that takes a name of a product, and runs its correct producer function CarFactory.produce = function(model) { var ctor = CarFactory[model]; return ctor(); }Tuesday, September 18, 12
  62. 62. Using Super JavaScript has no native ‘super’ call To use the superclass in the inheritance chain, we must work something out ourselves Let’s modify our object function to allow superTuesday, September 18, 12
  63. 63. Using Super function object(parent) { function F() { /* CODE GOES HERE */ }; F.prototype = parent || Object; return new F(); }Tuesday, September 18, 12
  64. 64. Using Super function object(parent) { function F() { this.uber = parent }; F.prototype = parent || Object; return new F(); }Tuesday, September 18, 12
  65. 65. Using Super Now each object has an ‘uber’ property that points to its prototype object Can use student.uber.age to get the person’s ageTuesday, September 18, 12
  66. 66. JS App Tips App is made of components. On mobile, only one visible component at a time; on Desktop, can have more than one. Each component has its own JS file Different components can communicate using a global object in a private namespace A single controller object moves components in/ out of viewTuesday, September 18, 12
  67. 67. Q&ATuesday, September 18, 12
  68. 68. Thank You Ynon Perek ynonperek@yahoo.com ynonperek.comTuesday, September 18, 12
  1. A particular slide catching your eye?

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

×