Download - 03 Advanced JavaScript
![Page 1: 03 Advanced JavaScript](https://reader038.vdocument.in/reader038/viewer/2022110306/55497eb3b4c90582588b48f3/html5/thumbnails/1.jpg)
Advanced JavaScriptFrom Novice To Ninja
Tuesday, September 18, 12
![Page 2: 03 Advanced JavaScript](https://reader038.vdocument.in/reader038/viewer/2022110306/55497eb3b4c90582588b48f3/html5/thumbnails/2.jpg)
Agenda
JavaScript History
Language Overview
Arrays & Objects
Functions
Tuesday, September 18, 12
![Page 3: 03 Advanced JavaScript](https://reader038.vdocument.in/reader038/viewer/2022110306/55497eb3b4c90582588b48f3/html5/thumbnails/3.jpg)
The World’s Most Misunderstood Programming Language
Tuesday, September 18, 12
![Page 4: 03 Advanced JavaScript](https://reader038.vdocument.in/reader038/viewer/2022110306/55497eb3b4c90582588b48f3/html5/thumbnails/4.jpg)
History1995 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 JScript
Tuesday, September 18, 12
![Page 5: 03 Advanced JavaScript](https://reader038.vdocument.in/reader038/viewer/2022110306/55497eb3b4c90582588b48f3/html5/thumbnails/5.jpg)
JS TodayUsed for Client side development on desktop and mobile
Used for Server side development using NodeJs
Embedded in applications using Rhino
Tuesday, September 18, 12
![Page 6: 03 Advanced JavaScript](https://reader038.vdocument.in/reader038/viewer/2022110306/55497eb3b4c90582588b48f3/html5/thumbnails/6.jpg)
Language Overview
JavaScript is not a toy
JavaScript has nothing to do with Java
JavaScript is a powerful programming language on its own
Tuesday, September 18, 12
![Page 7: 03 Advanced JavaScript](https://reader038.vdocument.in/reader038/viewer/2022110306/55497eb3b4c90582588b48f3/html5/thumbnails/7.jpg)
JavaScript Key IdeasInterpreter 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
![Page 8: 03 Advanced JavaScript](https://reader038.vdocument.in/reader038/viewer/2022110306/55497eb3b4c90582588b48f3/html5/thumbnails/8.jpg)
JavaScript Core TypesNumbers
Strings
Booleans
null
undefined
Objects
Tuesday, September 18, 12
![Page 9: 03 Advanced JavaScript](https://reader038.vdocument.in/reader038/viewer/2022110306/55497eb3b4c90582588b48f3/html5/thumbnails/9.jpg)
JavaScript Gotchas
var x = “3”;
var y = 5;
x + y == 8;
x + y == 35;
x + y === 35;
Tuesday, September 18, 12
![Page 10: 03 Advanced JavaScript](https://reader038.vdocument.in/reader038/viewer/2022110306/55497eb3b4c90582588b48f3/html5/thumbnails/10.jpg)
JavaScript Gotchas
var x = “3”;
var y = 5;
x + y == 8; // false
x + y == 35; // true
x + y === 35; // false
Tuesday, September 18, 12
![Page 11: 03 Advanced JavaScript](https://reader038.vdocument.in/reader038/viewer/2022110306/55497eb3b4c90582588b48f3/html5/thumbnails/11.jpg)
JavaScript Gotchasfunction foo() {
return
{
val : 3 }}
function bar() {
return { val : 3 }}
var x = foo();
var y = bar();
x.val == y.val;
Tuesday, September 18, 12
![Page 12: 03 Advanced JavaScript](https://reader038.vdocument.in/reader038/viewer/2022110306/55497eb3b4c90582588b48f3/html5/thumbnails/12.jpg)
JavaScript Gotchas// returns undef
function foo() {
return
{
val : 3 }}
// returns object
function bar() {
return { val : 3 }}
var x = foo();
var y = bar();
x.val == y.val; // error
Tuesday, September 18, 12
![Page 13: 03 Advanced JavaScript](https://reader038.vdocument.in/reader038/viewer/2022110306/55497eb3b4c90582588b48f3/html5/thumbnails/13.jpg)
JavaScript Gotchas
1 === 1;
1/0 === 1/0;
Number(‘a’) === Number(‘a’);
‘a‘ === “a”
Tuesday, September 18, 12
![Page 14: 03 Advanced JavaScript](https://reader038.vdocument.in/reader038/viewer/2022110306/55497eb3b4c90582588b48f3/html5/thumbnails/14.jpg)
JavaScript Gotchas
1 === 1; // true
1/0 === 1/0; // true
Number(‘a’) === Number(‘a’); // false
‘a‘ === “a” // true
Tuesday, September 18, 12
![Page 15: 03 Advanced JavaScript](https://reader038.vdocument.in/reader038/viewer/2022110306/55497eb3b4c90582588b48f3/html5/thumbnails/15.jpg)
Q & A
JavaScript History
Language Overview
Arrays & Objects
Functions
Tuesday, September 18, 12
![Page 16: 03 Advanced JavaScript](https://reader038.vdocument.in/reader038/viewer/2022110306/55497eb3b4c90582588b48f3/html5/thumbnails/16.jpg)
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 undefined
Tuesday, September 18, 12
![Page 17: 03 Advanced JavaScript](https://reader038.vdocument.in/reader038/viewer/2022110306/55497eb3b4c90582588b48f3/html5/thumbnails/17.jpg)
Using Objects
name Ynon Perek
website http://www.ynonperek.com
Tuesday, September 18, 12
![Page 18: 03 Advanced JavaScript](https://reader038.vdocument.in/reader038/viewer/2022110306/55497eb3b4c90582588b48f3/html5/thumbnails/18.jpg)
Using Objects
var myObject = {
name : “Ynon Perek”,
website : “http://www.ynonperek.com”
}
Tuesday, September 18, 12
![Page 19: 03 Advanced JavaScript](https://reader038.vdocument.in/reader038/viewer/2022110306/55497eb3b4c90582588b48f3/html5/thumbnails/19.jpg)
Using Objects
console.dir(myObject); // prints all the fields
myObject.name === “Ynon Perek”
myObject[‘website’] === http://www.ynonperek.com
Tuesday, September 18, 12
![Page 20: 03 Advanced JavaScript](https://reader038.vdocument.in/reader038/viewer/2022110306/55497eb3b4c90582588b48f3/html5/thumbnails/20.jpg)
Object Patterns
Object Literals vs. Object Ctor
Maker functions
Object Prototypes
Tuesday, September 18, 12
![Page 21: 03 Advanced JavaScript](https://reader038.vdocument.in/reader038/viewer/2022110306/55497eb3b4c90582588b48f3/html5/thumbnails/21.jpg)
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 simpler
Tuesday, September 18, 12
![Page 22: 03 Advanced JavaScript](https://reader038.vdocument.in/reader038/viewer/2022110306/55497eb3b4c90582588b48f3/html5/thumbnails/22.jpg)
Maker Functions
Tuesday, September 18, 12
![Page 23: 03 Advanced JavaScript](https://reader038.vdocument.in/reader038/viewer/2022110306/55497eb3b4c90582588b48f3/html5/thumbnails/23.jpg)
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
![Page 24: 03 Advanced JavaScript](https://reader038.vdocument.in/reader038/viewer/2022110306/55497eb3b4c90582588b48f3/html5/thumbnails/24.jpg)
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 functions
Tuesday, September 18, 12
![Page 25: 03 Advanced JavaScript](https://reader038.vdocument.in/reader038/viewer/2022110306/55497eb3b4c90582588b48f3/html5/thumbnails/25.jpg)
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 questions
Tuesday, September 18, 12
![Page 26: 03 Advanced JavaScript](https://reader038.vdocument.in/reader038/viewer/2022110306/55497eb3b4c90582588b48f3/html5/thumbnails/26.jpg)
Object Prototypes
Tuesday, September 18, 12
![Page 27: 03 Advanced JavaScript](https://reader038.vdocument.in/reader038/viewer/2022110306/55497eb3b4c90582588b48f3/html5/thumbnails/27.jpg)
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
![Page 28: 03 Advanced JavaScript](https://reader038.vdocument.in/reader038/viewer/2022110306/55497eb3b4c90582588b48f3/html5/thumbnails/28.jpg)
Prototype Chain
Personage : 12
Studentgrade : 90
Freshmangoto: party
Workersalary : 3800
Freshman.grade === 90 // from StudentStudent.age === 12 // from PersonWorker.age === 12 // from PersonWorker.salary === 3800 // from Worker
Tuesday, September 18, 12
![Page 29: 03 Advanced JavaScript](https://reader038.vdocument.in/reader038/viewer/2022110306/55497eb3b4c90582588b48f3/html5/thumbnails/29.jpg)
The object Function
function object(parent) { function F() {};
F.prototype = parent || Object;
return new F();
}
Tuesday, September 18, 12
![Page 30: 03 Advanced JavaScript](https://reader038.vdocument.in/reader038/viewer/2022110306/55497eb3b4c90582588b48f3/html5/thumbnails/30.jpg)
The object Function
creates a new object with the prototype ‘parent’
uses new to keep the prototype link
supports no arguments for object literals
Tuesday, September 18, 12
![Page 31: 03 Advanced JavaScript](https://reader038.vdocument.in/reader038/viewer/2022110306/55497eb3b4c90582588b48f3/html5/thumbnails/31.jpg)
Prototype Examplevar person = { age : 12 };
var student = object(person);
student.grade = 90;
var freshman = object(student);
freshman.goto = “party”;
Tuesday, September 18, 12
![Page 32: 03 Advanced JavaScript](https://reader038.vdocument.in/reader038/viewer/2022110306/55497eb3b4c90582588b48f3/html5/thumbnails/32.jpg)
Prototypes & Makers
Always use Maker functions
For leafs, initialize object literals
For nodes, use the object() function
Tuesday, September 18, 12
![Page 33: 03 Advanced JavaScript](https://reader038.vdocument.in/reader038/viewer/2022110306/55497eb3b4c90582588b48f3/html5/thumbnails/33.jpg)
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 Car
Tuesday, September 18, 12
![Page 34: 03 Advanced JavaScript](https://reader038.vdocument.in/reader038/viewer/2022110306/55497eb3b4c90582588b48f3/html5/thumbnails/34.jpg)
Arrays
Arrays are objects with numeric keys.
A length attribute is maintained automatically by JS to mean last_index + 1
Tuesday, September 18, 12
![Page 35: 03 Advanced JavaScript](https://reader038.vdocument.in/reader038/viewer/2022110306/55497eb3b4c90582588b48f3/html5/thumbnails/35.jpg)
Array Functionsjoin
pop, push
shift, unshift
reverse, sort - changes original array
a.slice(0, a.length).reverse() - Does not modify original array a
Tuesday, September 18, 12
![Page 36: 03 Advanced JavaScript](https://reader038.vdocument.in/reader038/viewer/2022110306/55497eb3b4c90582588b48f3/html5/thumbnails/36.jpg)
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
![Page 37: 03 Advanced JavaScript](https://reader038.vdocument.in/reader038/viewer/2022110306/55497eb3b4c90582588b48f3/html5/thumbnails/37.jpg)
Q & A
JavaScript History
Language Overview
Arrays & Objects
Functions
Tuesday, September 18, 12
![Page 38: 03 Advanced JavaScript](https://reader038.vdocument.in/reader038/viewer/2022110306/55497eb3b4c90582588b48f3/html5/thumbnails/38.jpg)
Functions
The word ‘function’
Followed by an optional name
Followed by a set of parameters
Followed by the function body
Tuesday, September 18, 12
![Page 39: 03 Advanced JavaScript](https://reader038.vdocument.in/reader038/viewer/2022110306/55497eb3b4c90582588b48f3/html5/thumbnails/39.jpg)
Functionsfunction hello(who) { console.log(“Hello, “ + who);
}
var hello = function hello(who) { console.log(“Hello, “ + who);
};
Tuesday, September 18, 12
![Page 40: 03 Advanced JavaScript](https://reader038.vdocument.in/reader038/viewer/2022110306/55497eb3b4c90582588b48f3/html5/thumbnails/40.jpg)
Function.Prototype
apply, call
toString
Tuesday, September 18, 12
![Page 41: 03 Advanced JavaScript](https://reader038.vdocument.in/reader038/viewer/2022110306/55497eb3b4c90582588b48f3/html5/thumbnails/41.jpg)
Scope
In JavaScript, only functions have scope.
The var keyword indicates a scoped variable
There is no block scope
Tuesday, September 18, 12
![Page 42: 03 Advanced JavaScript](https://reader038.vdocument.in/reader038/viewer/2022110306/55497eb3b4c90582588b48f3/html5/thumbnails/42.jpg)
Scope
// Using functions to scope our code
(function() { var x = 5;
var y = 7;
console.log(x + y);
}());
Tuesday, September 18, 12
![Page 43: 03 Advanced JavaScript](https://reader038.vdocument.in/reader038/viewer/2022110306/55497eb3b4c90582588b48f3/html5/thumbnails/43.jpg)
Scope
Do:
Wrap every file in an anonymous function
Prefix every variable with var
A Good fence makes good neighbors
Tuesday, September 18, 12
![Page 44: 03 Advanced JavaScript](https://reader038.vdocument.in/reader038/viewer/2022110306/55497eb3b4c90582588b48f3/html5/thumbnails/44.jpg)
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 function
Tuesday, September 18, 12
![Page 45: 03 Advanced JavaScript](https://reader038.vdocument.in/reader038/viewer/2022110306/55497eb3b4c90582588b48f3/html5/thumbnails/45.jpg)
Return Value
return is used to return a value
default return value for non-ctor functions is undefined
default return value for ctor is this
Tuesday, September 18, 12
![Page 46: 03 Advanced JavaScript](https://reader038.vdocument.in/reader038/viewer/2022110306/55497eb3b4c90582588b48f3/html5/thumbnails/46.jpg)
Tip
Prefer that-style constructor over this
In that-style constructors, always remember to return that.
Tuesday, September 18, 12
![Page 47: 03 Advanced JavaScript](https://reader038.vdocument.in/reader038/viewer/2022110306/55497eb3b4c90582588b48f3/html5/thumbnails/47.jpg)
Function Patterns
Modules
Immediate Functions
Configuration Objects
Prototype Methods
Tuesday, September 18, 12
![Page 48: 03 Advanced JavaScript](https://reader038.vdocument.in/reader038/viewer/2022110306/55497eb3b4c90582588b48f3/html5/thumbnails/48.jpg)
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
![Page 49: 03 Advanced JavaScript](https://reader038.vdocument.in/reader038/viewer/2022110306/55497eb3b4c90582588b48f3/html5/thumbnails/49.jpg)
Function Argumentsfunction sum() {
var i = 0,
n = arguments.length,
sum = 0;
for ( i=0; i < n; ++i ) {
sum += arguments[i];
}
return sum;
}
Tuesday, September 18, 12
![Page 50: 03 Advanced JavaScript](https://reader038.vdocument.in/reader038/viewer/2022110306/55497eb3b4c90582588b48f3/html5/thumbnails/50.jpg)
Example - CalculatorPublic code:
add_to_register
sub_from_register
read_register
zero_register
http://ynonperek.com/course/web/javascript-functions.html#modules
Tuesday, September 18, 12
![Page 51: 03 Advanced JavaScript](https://reader038.vdocument.in/reader038/viewer/2022110306/55497eb3b4c90582588b48f3/html5/thumbnails/51.jpg)
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
![Page 52: 03 Advanced JavaScript](https://reader038.vdocument.in/reader038/viewer/2022110306/55497eb3b4c90582588b48f3/html5/thumbnails/52.jpg)
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 object
Tuesday, September 18, 12
![Page 53: 03 Advanced JavaScript](https://reader038.vdocument.in/reader038/viewer/2022110306/55497eb3b4c90582588b48f3/html5/thumbnails/53.jpg)
Configuration Objects
Example
Student function which takes a configuration object with optional values
http://ynonperek.com/course/web/javascript-functions.html#conf
Tuesday, September 18, 12
![Page 54: 03 Advanced JavaScript](https://reader038.vdocument.in/reader038/viewer/2022110306/55497eb3b4c90582588b48f3/html5/thumbnails/54.jpg)
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
![Page 55: 03 Advanced JavaScript](https://reader038.vdocument.in/reader038/viewer/2022110306/55497eb3b4c90582588b48f3/html5/thumbnails/55.jpg)
Function Patterns
Modules
Immediate Functions
Configuration Objects
Prototype Methods
Tuesday, September 18, 12
![Page 56: 03 Advanced JavaScript](https://reader038.vdocument.in/reader038/viewer/2022110306/55497eb3b4c90582588b48f3/html5/thumbnails/56.jpg)
Function Prototypes
Tuesday, September 18, 12
![Page 57: 03 Advanced JavaScript](https://reader038.vdocument.in/reader038/viewer/2022110306/55497eb3b4c90582588b48f3/html5/thumbnails/57.jpg)
Function Prototypes
functions have a special attribute: prototype
When an object’s attribute lookup is performed, the interpreter checks its constructor.prototype
Tuesday, September 18, 12
![Page 58: 03 Advanced JavaScript](https://reader038.vdocument.in/reader038/viewer/2022110306/55497eb3b4c90582588b48f3/html5/thumbnails/58.jpg)
Function Prototypes
We implement inheritance using prototypes - this is called prototypical inheritance
Example: http://ynonperek.com/course/fed/javascript-oo.html
Tuesday, September 18, 12
![Page 59: 03 Advanced JavaScript](https://reader038.vdocument.in/reader038/viewer/2022110306/55497eb3b4c90582588b48f3/html5/thumbnails/59.jpg)
Design Patterns
Singleton
Factory
Super
Tuesday, September 18, 12
![Page 60: 03 Advanced JavaScript](https://reader038.vdocument.in/reader038/viewer/2022110306/55497eb3b4c90582588b48f3/html5/thumbnails/60.jpg)
SingletonPut the object on global.
Access it from everywhere in your program
Always consider using a namespace
global.Log = log;
Tuesday, September 18, 12
![Page 61: 03 Advanced JavaScript](https://reader038.vdocument.in/reader038/viewer/2022110306/55497eb3b4c90582588b48f3/html5/thumbnails/61.jpg)
FactoryUse 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
![Page 62: 03 Advanced JavaScript](https://reader038.vdocument.in/reader038/viewer/2022110306/55497eb3b4c90582588b48f3/html5/thumbnails/62.jpg)
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 super
Tuesday, September 18, 12
![Page 63: 03 Advanced JavaScript](https://reader038.vdocument.in/reader038/viewer/2022110306/55497eb3b4c90582588b48f3/html5/thumbnails/63.jpg)
Using Super
function object(parent) { function F() { /* CODE GOES HERE */ };
F.prototype = parent || Object;
return new F();
}
Tuesday, September 18, 12
![Page 64: 03 Advanced JavaScript](https://reader038.vdocument.in/reader038/viewer/2022110306/55497eb3b4c90582588b48f3/html5/thumbnails/64.jpg)
Using Super
function object(parent) { function F() { this.uber = parent };
F.prototype = parent || Object;
return new F();
}
Tuesday, September 18, 12
![Page 65: 03 Advanced JavaScript](https://reader038.vdocument.in/reader038/viewer/2022110306/55497eb3b4c90582588b48f3/html5/thumbnails/65.jpg)
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 age
Tuesday, September 18, 12
![Page 66: 03 Advanced JavaScript](https://reader038.vdocument.in/reader038/viewer/2022110306/55497eb3b4c90582588b48f3/html5/thumbnails/66.jpg)
JS App TipsApp 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 view
Tuesday, September 18, 12
![Page 67: 03 Advanced JavaScript](https://reader038.vdocument.in/reader038/viewer/2022110306/55497eb3b4c90582588b48f3/html5/thumbnails/67.jpg)
Q & A
Tuesday, September 18, 12
![Page 68: 03 Advanced JavaScript](https://reader038.vdocument.in/reader038/viewer/2022110306/55497eb3b4c90582588b48f3/html5/thumbnails/68.jpg)
Thank You
Ynon Perek
ynonperek.com
Tuesday, September 18, 12