Upcoming SlideShare
Loading in...5







Total Views
Views on SlideShare
Embed Views



0 Embeds 0

No embeds



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.

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

    Javascript Javascript Presentation Transcript

    • JAVASCRIPTAditya Gaur Mentor: Apurba Nath
    • Do we really need to learnJavascript?
    • YES!! But why? Language of web browser. Its not “some other language”. The most misunderstood language
    • Javascript developed by Brendan Eich of Netscape under the name Mocha Renamed to livescript. Finally to javascript Sometimes also called ECMAscript first appeared in that Navigator 2.0 browser
    • Prototypal Language Javascript is classless object oriented language.  Whaaaat?  How can we think of OOPS without class?
    • Classical vs Prototypal Java Javascript Classical Prototypal Classes Functions Constructors Functions Methods Functions
    • Object creation Using Object literal var newObject ={ first: 10, second: "aValue" }; alert(newObject.first) Using constructor function var newClass = function(){ this.first= 10; this.second="aValue"; }; var newObject = new newClass(); alert(newObject.first);
    • Whats the difference? The constructor maintain a link back to the function that constructed them. This is important when we are using the prototype feature. var newClass = function(){ this.first= 10; this.second="aValue"; }; var newObject = new newClass(); alert(newObject.constructor);
    • Why do we need classes? Code reuse Making user defined types
    • Javascript object prototype It is javascript’s way of sharing implementation across similar objects No Classes All objects are created by adding properties and methods to an empty object or by cloning an existing one. Prototype-based inheritance - an existing object is used as a template to build other objects
    • How does it work? Prototypes are implemented in javascript using the prototype property of constructor functions. The prototype property is basically a template for the objects created by the constructor.
    • How does it work?var newClass = function(){this.first= 10;this.second="aValue";}; = 1;var newObject = new newClass();newObject.constructor.prototype.two = 2;alert(; //1alert(newObject.constructor.prototype.two); //2var anotherObject = new newClass();alert(anotherObject.constructor.prototype.two); //2
    • How does it work?function Pet(name, species, hello){ = name; this.species = species; this.hello = hello;}Pet.prototype.sayHello = function(){ alert(this.hello);}var rufus = new Pet("Rufus", "cat", "miaow");rufus.sayHello();
    • Inheritance Inheritence is achieved via Prototype Chaining How to define a prototype object?  Just define the prototype of the derived object to be equal to the prototype object
    • Inheritancefunction Pet() OUTPUT: Default Name{ meow = "Default Name"; this.sound = "Default Sound";}Pet.prototype.makeSound= function(){ alert(this.sound);}Pet.prototype.getName = function(){ alert(;}var aPet = new Pet();function Cat(){ this.sound = "meow";}Cat.prototype = aPet;var aCat = new Cat();aCat.getName();aCat.makeSound();
    • Prototype ChainingObject.prototype.inObj = 1;function A(){ this.inA = 2;}A.prototype.inAProto = 3;function B(){ this.inB = 4;}B.prototype = new A;B.prototype.constructor = B;B.prototype.inBProto = 5; x = new B;document.write(x.inObj + , + x.inA + , + x.inAProto + , + x.inB+ , + x.inBProto);
    • The “new” We need the keyword “new” to carry out inheritence But it has a drawback: var func = function(){ OUTPUT : Window.object alert(this); object.object } var aVar = func(); var anotherVar = new func();  Also it gives us an impression of Class based language
    • The “new” S o we can do the following: Method 1 Method 2 function func(){ function func(){ = "foo"; if (!(this instanceof func) ) } return new func(); function newObject(obj){ = "foo"; return new obj(); } } var anObj = func(); var anObj = newObject(func); alert(; alert(;
    • Back up slides
    • Dynamically Typed Type: metadata about a chunk of memory that classifies the kind of data stored there. Type declaration is not necessary. var aVar = 10; //type: Number var anotherVar = true; // type: Boolean Variables in JavaScript are typed, but that type is determined internally. In the example, var aVar will be type Number and var anotherVar will be type Boolean. 
    • Weekly Typed Variables are not of a specific data type. var aVar = 10; // Number aVar = true; // Boolean aVar = “This is a string!” // String
    • Closures a closure is the local variables for a function - kept alive after the function has returned, or a closure is a stack-frame which is not deallocated when the function returns.
    • Non C losure (E xample) void sayNumber(){ int num = 10; printf(“%d”,num); return; } sayNumber();When the function “sayNumber” is called, it creates a stack frame for itself and thevariable “num” will exist in the stack.As soon as the function returns the variable “num” ceases to exist.
    • C losure (E xample) function sayName(name) { Ouput: I am foo     var phrase = "I am" + name;     var sayString = function() {         alert(phrase);     };     return sayString; } var say = sayName(“foo"); say();In this case too the stack frames are created but here the inner functions haveaccess to the outer function’s variable even after the outer function has returned.
    • C losure (More E xample)   function sayName(name) { Ouput: My name is foo       var phrase = "I am" + name;       var sayString = function() {           alert(phrase);       };       phrase = "My name is" + name;       return sayString;   }   var say = sayName(“foo");   say();  This example shows that the variables are not copied. Their reference is stored.