03 Advanced JavaScript

Advanced JavaScript
From Novice To Ninja

Tuesday, September 18, 12

Agenda

JavaScript History

Language Overview

Arrays & Objects

Functions


The World’s Most
Misunderstood
Programming Language


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 JScript


JS Today
Used 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 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)


JavaScript Core Types
Numbers

Strings

Booleans

null

undeﬁned

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 Gotchas
function foo() { function bar() {

return return { val : 3 }
}
{
var x = foo();
val : 3
} var y = bar();
}
x.val == y.val;


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; // 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 ﬁeld in an object is a name-value pair

The name can be any string

The value can be anything except undeﬁned


Using Objects

name Ynon Perek

website 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 ﬁnd an attribute in an
object, it searches the prototype.


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 : 3800


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 Example
var 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 Functions
join

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 ﬁeld and a
phone ﬁeld.

Test by creating 5 contacts in the Phonebook and
print them to the console.


Functions

The word ‘function’

Followed by an optional name

Followed by a set of parameters

Followed by the function body


Functions
function 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 ﬁle in an anonymous function

Preﬁx 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
undeﬁned

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

Conﬁguration 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 Arguments
function sum() {

var i = 0,

n = arguments.length,

sum = 0;

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

sum += arguments[i];

}

return sum;

}


Example - Calculator
Public 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 deﬁned

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
conﬁguration objects

Solves “which comes ﬁrst”

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



Example

Student function which takes a conﬁguration
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 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


Design Patterns

Singleton

Factory

Super


Singleton
Put the object on global.

Access it from everywhere in your program

Always consider using a namespace

global.Log = log;


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


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 F() { /* CODE GOES HERE */ };


return new F();

}


Using Super

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 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 ﬁle

Diﬀerent components can communicate using a
global object in a private namespace

A single controller object moves components in/
out of view


Thank You

Ynon Perek

ynonperek@yahoo.com

ynonperek.com


03 Advanced JavaScript

Recommandé

Recommandé

Contenu connexe

En vedette

En vedette (19)

Similaire à 03 Advanced JavaScript

Similaire à 03 Advanced JavaScript (7)

Plus de Ynon Perek

Plus de Ynon Perek (20)

Dernier

Dernier (20)

03 Advanced JavaScript