Javascript basic course

Values and practices change everyday, but principle does not.

What we're learning today?

● Javascript introduction (5 mins)● Basic concepts (20 mins)● OOP in Javascript (20 mins)

Introduction

● Original created and used in Netscape.● A prototype based scripting language.● Was formalized in the ECMAScript

language standard.● Using commonly in web, and also for

other server side/desktop applications.● JavaScript™ is a registered trademark of

Oracle corporation.

Basic concepts of Javascript

● Variable scope● What is this?● Closure● Prototype

Variable scope

Global

● Declared outside functions.● Can be accessed everywhere.

Local

● Declared inside function● Can be accessed only inside the

function.

What is this?

All javascript code is executed in an execution context.● Global code runs in Global execution context.● Invocation of a function runs in a associated execution

context.

this = object for getting the current execution context.

ClosureWhen you return a function => you're creating a closure.

A closure is a special object that combines two things: ● Function● Binding local variables at the time that the function was

created.

Closure example-1function add(x) { return function(y) { return x + y; };}var add5 = add(5);var result = add5(3);console.log(result);

Guess the result?

Closure example-2 (Infamous loop)

function addLinks() { for(var i=0, link; i< 5; i++) { link = document.createElement("a"); link.innerHTML = "Link " + i; link.onclick = function() { alert(i); }; }}window.onload = addLinks();

Closure example-2 (Infamous loop-fixed)function addLinks() { for(var i=0, link; i< 5; i++) { link = document.createElement("a"); link.innerHTML = "Link " + i; link.onclick = function(num) { return function() { alert(num); }; } (i); }}window.onload = addLinks();

Prototype● A object is used as pattern to create other objects. ● When a function A is created:

○ Function A contains "prototype property" that associated to A.prototype object.

○ The A.prototype object contains a "constructor property" that links back to A function.

Prototype 

function People() {

}

Prototype 

function People() {

}

var steve = new People()

People.prototype object is used as reference for method look up and construct the new object.

OOP in Javascript

● Private, public, privilege● Inheritance● Modularization with namespace

Private

Private variable

function People() { var name;

}

Private function

function People() { //declaration-w1 var sayHello = function() { ... } //declaration-w2 function sayHello() { ... }}Private function can access to private variable or global variable only

Public

Public variable

function People() { this.name = null;

}

Public function

function People() { }

People.prototype.sayHi = function() {...}

Public functions cannot access to private variables/functions.

Privilege functions

Declaration

function People() { this.sayHi = function() { ... }

}

Usage

● To introduce private variable/functions to public function.

Private-public-privilege access matrix

Private func Privilege func Public func

Private var/func YES YES NO

Public var/func NO YES YES

Privilege func NO YES YES

Javascript inheritance

function People() { }

function Woman() {

}

//Make Woman inherits from PeopleWoman.prototype = new People();Woman.prototype.constructor = Woman;

Javascript inheritance - prototype chain

Javascript inheritance - call super method

function People() {}People.prototype.sayHi = function() {...}

function Woman() {

}

Woman.prototype = new People();Woman.prototype.constructor = Woman;Woman.prototype.sayHi = function() { People.prototype.sayHi.call(this); ...}

Methods look up in the prototype chain

1. An object's methods (like all properties) are found by walking up the object's prototype chain.

2. The entries in the prototype chain are references to ordinary objects.

3. Object.create() or the new operator creates objects with a prototype chain.

Modularization with namespace

Namespace helps you organize your code better and limits bugs caused by "name violation".

pyco = pyco || {};pyco.app = pyco.app || {}

=> you have namespace: pyco.appNow add functions to your pyco.app namespace:

pyco.app.Menu = new function() {...}...

References:

● https://developer.mozilla.org/en/JavaScript/Guide/Closures● https://developer.mozilla.

org/en/JavaScript/Guide/Inheritance_constructor_prototype● http://robertnyman.com/2008/10/09/explaining-javascript-

scope-and-closures/● http://javascript.crockford.com/prototypal.html● http://www.crockford.com/javascript/private.html● High performance Javascript book - Nicholas.C.Zakas.

Question?