javascript basic course
TRANSCRIPT
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?