03 Advanced JavaScript

Advanced JavaScriptFrom Novice To Ninja

Tuesday, September 18, 12

Agenda

JavaScript History

Language Overview

Arrays & Objects

Functions


The World’s Most Misunderstood Programming Language


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


JS TodayUsed for Client side development on desktop and mobile

Used for Server side development using NodeJs

Embedded in applications using Rhino


Language Overview

JavaScript is not a toy

JavaScript has nothing to do with Java

JavaScript is a powerful programming language on its own


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)


JavaScript Core TypesNumbers

Strings

Booleans

null

undefined

Objects


JavaScript Gotchas

var x = “3”;

var y = 5;

x + y == 8;

x + y == 35;

x + y === 35;


JavaScript Gotchas

var x = “3”;

var y = 5;

x + y == 8; // false

x + y == 35; // true

x + y === 35; // false


JavaScript Gotchasfunction foo() {

return

{

val : 3 }}

function bar() {

return { val : 3 }}

var x = foo();

var y = bar();

x.val == y.val;


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


JavaScript Gotchas

1 === 1;

1/0 === 1/0;

Number(‘a’) === Number(‘a’);

‘a‘ === “a”


JavaScript Gotchas

1 === 1; // true

1/0 === 1/0; // true

Number(‘a’) === Number(‘a’); // false

‘a‘ === “a” // true


Q & A

JavaScript History

Language Overview

Arrays & Objects

Functions


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


Using Objects

name Ynon Perek

website http://www.ynonperek.com


http://www.ynonperek.com


Using Objects

var myObject = {

name : “Ynon Perek”,

website : “http://www.ynonperek.com”

}




Using Objects

console.dir(myObject); // prints all the fields

myObject.name === “Ynon Perek”

myObject[‘website’] === http://www.ynonperek.com




Object Patterns

Object Literals vs. Object Ctor

Maker functions

Object Prototypes


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


Maker Functions


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;}


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


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


Object Prototypes


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.


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


The object Function

function object(parent) { function F() {};

F.prototype = parent || Object;

return new F();

}


The object Function

creates a new object with the prototype ‘parent’

uses new to keep the prototype link

supports no arguments for object literals


Prototype Examplevar person = { age : 12 };

var student = object(person);

student.grade = 90;

var freshman = object(student);

freshman.goto = “party”;


Prototypes & Makers

Always use Maker functions

For leafs, initialize object literals

For nodes, use the object() function


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


Arrays

Arrays are objects with numeric keys.

A length attribute is maintained automatically by JS to mean last_index + 1


Array Functionsjoin

pop, push

shift, unshift

reverse, sort - changes original array

a.slice(0, a.length).reverse() - Does not modify original array a


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.


Q & A

JavaScript History

Language Overview

Arrays & Objects

Functions


Functions

The word ‘function’

Followed by an optional name

Followed by a set of parameters

Followed by the function body


Functionsfunction hello(who) { console.log(“Hello, “ + who);

}

var hello = function hello(who) { console.log(“Hello, “ + who);

};


Function.Prototype

apply, call

toString


Scope

In JavaScript, only functions have scope.

The var keyword indicates a scoped variable

There is no block scope


Scope

// Using functions to scope our code

(function() { var x = 5;

var y = 7;

console.log(x + y);

}());


Scope

Do:

Wrap every file in an anonymous function

Prefix every variable with var

A Good fence makes good neighbors


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


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


Tip

Prefer that-style constructor over this

In that-style constructors, always remember to return that.


Function Patterns

Modules

Immediate Functions

Configuration Objects

Prototype Methods


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.


Function Argumentsfunction sum() {

var i = 0,

n = arguments.length,

sum = 0;

for ( i=0; i < n; ++i ) {

sum += arguments[i];

}

return sum;

}


Example - CalculatorPublic code:

add_to_register

sub_from_register

read_register

zero_register

http://ynonperek.com/course/web/javascript-functions.html#modules






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.



When a large list of arguments is required, use configuration objects

Solves “which comes first”

Rule of Thumb: if params > 2, use the object



Example

Student function which takes a configuration object with optional values

http://ynonperek.com/course/web/javascript-functions.html#conf






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)


Function Patterns

Modules

Immediate Functions


Prototype Methods


Function Prototypes


Function Prototypes

functions have a special attribute: prototype

When an object’s attribute lookup is performed, the interpreter checks its constructor.prototype


Function Prototypes

We implement inheritance using prototypes - this is called prototypical inheritance

Example: http://ynonperek.com/course/fed/javascript-oo.html


http://ynonperek.com/course/fed/javascript-oo.html




Design Patterns

Singleton

Factory

Super


SingletonPut the object on global.

Access it from everywhere in your program

Always consider using a namespace

global.Log = log;


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();}


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


Using Super

function object(parent) { function F() { /* CODE GOES HERE */ };


return new F();

}


Using Super

function object(parent) { function F() { this.uber = parent };


return new F();

}


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


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


Q & A


Thank You

Ynon Perek

[email protected]

ynonperek.com


mailto:[email protected]

mailto:[email protected]



Technology

03 Advanced JavaScript