javascript basic course
TRANSCRIPT
![Page 1: Javascript basic course](https://reader033.vdocuments.site/reader033/viewer/2022052303/55514ed5b4c905f2288b5396/html5/thumbnails/1.jpg)
Javascript basic course
Values and practices change everyday, but principle does not.
![Page 2: Javascript basic course](https://reader033.vdocuments.site/reader033/viewer/2022052303/55514ed5b4c905f2288b5396/html5/thumbnails/2.jpg)
What we're learning today?
● Javascript introduction (5 mins)● Basic concepts (20 mins)● OOP in Javascript (20 mins)
![Page 3: Javascript basic course](https://reader033.vdocuments.site/reader033/viewer/2022052303/55514ed5b4c905f2288b5396/html5/thumbnails/3.jpg)
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.
![Page 4: Javascript basic course](https://reader033.vdocuments.site/reader033/viewer/2022052303/55514ed5b4c905f2288b5396/html5/thumbnails/4.jpg)
Basic concepts of Javascript
● Variable scope● What is this?● Closure● Prototype
![Page 5: Javascript basic course](https://reader033.vdocuments.site/reader033/viewer/2022052303/55514ed5b4c905f2288b5396/html5/thumbnails/5.jpg)
Variable scope
Global
● Declared outside functions.● Can be accessed everywhere.
Local
● Declared inside function● Can be accessed only inside the
function.
![Page 6: Javascript basic course](https://reader033.vdocuments.site/reader033/viewer/2022052303/55514ed5b4c905f2288b5396/html5/thumbnails/6.jpg)
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.
![Page 7: Javascript basic course](https://reader033.vdocuments.site/reader033/viewer/2022052303/55514ed5b4c905f2288b5396/html5/thumbnails/7.jpg)
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.
![Page 8: Javascript basic course](https://reader033.vdocuments.site/reader033/viewer/2022052303/55514ed5b4c905f2288b5396/html5/thumbnails/8.jpg)
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?
![Page 9: Javascript basic course](https://reader033.vdocuments.site/reader033/viewer/2022052303/55514ed5b4c905f2288b5396/html5/thumbnails/9.jpg)
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();
![Page 10: Javascript basic course](https://reader033.vdocuments.site/reader033/viewer/2022052303/55514ed5b4c905f2288b5396/html5/thumbnails/10.jpg)
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();
![Page 11: Javascript basic course](https://reader033.vdocuments.site/reader033/viewer/2022052303/55514ed5b4c905f2288b5396/html5/thumbnails/11.jpg)
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.
![Page 12: Javascript basic course](https://reader033.vdocuments.site/reader033/viewer/2022052303/55514ed5b4c905f2288b5396/html5/thumbnails/12.jpg)
Prototype
function People() {
}
![Page 13: Javascript basic course](https://reader033.vdocuments.site/reader033/viewer/2022052303/55514ed5b4c905f2288b5396/html5/thumbnails/13.jpg)
Prototype
function People() {
}
var steve = new People()
People.prototype object is used as reference for method look up and construct the new object.
![Page 14: Javascript basic course](https://reader033.vdocuments.site/reader033/viewer/2022052303/55514ed5b4c905f2288b5396/html5/thumbnails/14.jpg)
OOP in Javascript
● Private, public, privilege● Inheritance● Modularization with namespace
![Page 15: Javascript basic course](https://reader033.vdocuments.site/reader033/viewer/2022052303/55514ed5b4c905f2288b5396/html5/thumbnails/15.jpg)
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
![Page 16: Javascript basic course](https://reader033.vdocuments.site/reader033/viewer/2022052303/55514ed5b4c905f2288b5396/html5/thumbnails/16.jpg)
Public
Public variable
function People() { this.name = null;
}
Public function
function People() { }
People.prototype.sayHi = function() {...}
Public functions cannot access to private variables/functions.
![Page 17: Javascript basic course](https://reader033.vdocuments.site/reader033/viewer/2022052303/55514ed5b4c905f2288b5396/html5/thumbnails/17.jpg)
Privilege functions
Declaration
function People() { this.sayHi = function() { ... }
}
Usage
● To introduce private variable/functions to public function.
![Page 18: Javascript basic course](https://reader033.vdocuments.site/reader033/viewer/2022052303/55514ed5b4c905f2288b5396/html5/thumbnails/18.jpg)
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
![Page 19: Javascript basic course](https://reader033.vdocuments.site/reader033/viewer/2022052303/55514ed5b4c905f2288b5396/html5/thumbnails/19.jpg)
Javascript inheritance
function People() { }
function Woman() {
}
//Make Woman inherits from PeopleWoman.prototype = new People();Woman.prototype.constructor = Woman;
![Page 20: Javascript basic course](https://reader033.vdocuments.site/reader033/viewer/2022052303/55514ed5b4c905f2288b5396/html5/thumbnails/20.jpg)
Javascript inheritance - prototype chain
![Page 21: Javascript basic course](https://reader033.vdocuments.site/reader033/viewer/2022052303/55514ed5b4c905f2288b5396/html5/thumbnails/21.jpg)
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); ...}
![Page 22: Javascript basic course](https://reader033.vdocuments.site/reader033/viewer/2022052303/55514ed5b4c905f2288b5396/html5/thumbnails/22.jpg)
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.
![Page 23: Javascript basic course](https://reader033.vdocuments.site/reader033/viewer/2022052303/55514ed5b4c905f2288b5396/html5/thumbnails/23.jpg)
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() {...}...
![Page 24: Javascript basic course](https://reader033.vdocuments.site/reader033/viewer/2022052303/55514ed5b4c905f2288b5396/html5/thumbnails/24.jpg)
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.
![Page 25: Javascript basic course](https://reader033.vdocuments.site/reader033/viewer/2022052303/55514ed5b4c905f2288b5396/html5/thumbnails/25.jpg)
Question?