Upcoming SlideShare
Loading in...5

Like this? Share it with your network








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 Presentation Transcript

  • 1. JAVASCRIPTAditya Gaur Mentor: Apurba Nath
  • 2. Do we really need to learnJavascript?
  • 3. YES!! But why? Language of web browser. Its not “some other language”. The most misunderstood language
  • 4. 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
  • 5. Prototypal Language Javascript is classless object oriented language.  Whaaaat?  How can we think of OOPS without class?
  • 6. Classical vs Prototypal Java Javascript Classical Prototypal Classes Functions Constructors Functions Methods Functions
  • 7. 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);
  • 8. 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);
  • 9. Why do we need classes? Code reuse Making user defined types
  • 10. 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
  • 11. 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.
  • 12. 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
  • 13. 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();
  • 14. 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
  • 15. 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();
  • 16. 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);
  • 17. 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
  • 18. 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(;
  • 19. Back up slides
  • 20. 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. 
  • 21. Weekly Typed Variables are not of a specific data type. var aVar = 10; // Number aVar = true; // Boolean aVar = “This is a string!” // String
  • 22. 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.
  • 23. 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.
  • 24. 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.
  • 25. 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.