Javascript basic course

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 Local

● Declared outside functions. ● Declared inside function
● Can be accessed everywhere. ● 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.

Closure
When 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-1
function 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 Private function

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

Public

Public variable Public function

function People() { function People() {
this.name = null;
}
}
People.prototype.sayHi = function() {
...
}

Public functions cannot access to
private variables/functions.

Privilege functions

Declaration Usage

function People() { ● To introduce private
this.sayHi = function() 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 People
Woman.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.app
Now 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.

Javascript basic course

Javascript basic course

More Related Content

What's hot

Viewers also liked

Similar to Javascript basic course

Recently uploaded

Javascript basic course