• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Javascript basic course
 

Javascript basic course

on

  • 2,067 views

 

Statistics

Views

Total Views
2,067
Views on SlideShare
2,067
Embed Views
0

Actions

Likes
2
Downloads
26
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Javascript basic course Javascript basic course Presentation Transcript

    • Javascript basic course Values and practices changeeveryday, but principle does not.
    • What were 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.
    • ClosureWhen you return a function => youre 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 isused as reference formethod look up andconstruct the new object.
    • OOP in Javascript● Private, public, privilege● Inheritance● Modularization with namespace
    • PrivatePrivate variable Private functionfunction 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
    • PublicPublic variable Public functionfunction People() { function People() { this.name = null; }} People.prototype.sayHi = function() { ... } Public functions cannot access to private variables/functions.
    • Privilege functionsDeclaration Usagefunction 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 inheritancefunction People() {}function Woman() {}//Make Woman inherits from PeopleWoman.prototype = new People();Woman.prototype.constructor = Woman;
    • Javascript inheritance - prototype chain
    • Javascript inheritance - call super methodfunction 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 chain1. An objects methods (like all properties) are found by walking up the objects 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 namespaceNamespace helps you organize your code better and limits bugscaused 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?