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 javasc...
Prototypal Language   Javascript is classless object oriented    language.     Whaaaat?     How can we think of OOPS wi...
Classical vs Prototypal                 Java       Javascript     Classical          Prototypal     Classes            Fun...
Object creation   Using Object literal   var newObject ={   first: 10,   second: "aValue"   };   alert(newObject.first)   ...
Whats the difference?   The constructor maintain a link back to the    function that constructed them.   This is importa...
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  ...
How does it work?   Prototypes are implemented in javascript using    the prototype property of constructor functions.  ...
How does it work?var newClass = function(){this.first= 10;this.second="aValue";};newClass.prototype.one = 1;var newObject ...
How does it work?function Pet(name, species, hello){  this.name = name;  this.species = species;  this.hello = hello;}Pet....
Inheritance   Inheritence is achieved via Prototype Chaining   How to define a prototype object?     Just define the pr...
Inheritancefunction Pet()                         OUTPUT: Default Name{                                              meow ...
Prototype ChainingObject.prototype.inObj = 1;function A(){   this.inA = 2;}A.prototype.inAProto = 3;function B(){   this.i...
The “new”   We need the keyword “new” to carry out    inheritence   But it has a drawback:    var func = function(){    ...
The “new”   S o we can do the following:    Method 1                       Method 2    function func(){               fun...
Back up slides
Dynamically Typed   Type: metadata about a chunk of memory    that classifies the kind of data stored there.   Type decl...
Weekly Typed   Variables are not of a specific data type.            var aVar = 10; // Number            aVar = true; // ...
Closures   a closure is the local variables for a function -    kept alive after the function has returned, or   a closu...
Non C losure (E xample)                            void sayNumber(){                                int num = 10;         ...
C losure (E xample)  function sayName(name) {                               Ouput: I am foo      var phrase = "I am" + nam...
C losure (More E xample)    function sayName(name) {                            Ouput: My name is foo        var phrase = ...
Upcoming SlideShare
Loading in...5
×

Javascript

738

Published on

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
738
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
28
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Javascript

  1. 1. JAVASCRIPTAditya Gaur Mentor: Apurba Nath
  2. 2. Do we really need to learnJavascript?
  3. 3. YES!! But why? Language of web browser. Its not “some other language”. The most misunderstood language
  4. 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. 5. Prototypal Language Javascript is classless object oriented language.  Whaaaat?  How can we think of OOPS without class?
  6. 6. Classical vs Prototypal Java Javascript Classical Prototypal Classes Functions Constructors Functions Methods Functions
  7. 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. 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. 9. Why do we need classes? Code reuse Making user defined types
  10. 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. 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. 12. How does it work?var newClass = function(){this.first= 10;this.second="aValue";};newClass.prototype.one = 1;var newObject = new newClass();newObject.constructor.prototype.two = 2;alert(newObject.constructor.prototype.one); //1alert(newObject.constructor.prototype.two); //2var anotherObject = new newClass();alert(anotherObject.constructor.prototype.two); //2
  13. 13. How does it work?function Pet(name, species, hello){ this.name = name; this.species = species; this.hello = hello;}Pet.prototype.sayHello = function(){ alert(this.hello);}var rufus = new Pet("Rufus", "cat", "miaow");rufus.sayHello();
  14. 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. 15. Inheritancefunction Pet() OUTPUT: Default Name{ meow this.name = "Default Name"; this.sound = "Default Sound";}Pet.prototype.makeSound= function(){ alert(this.sound);}Pet.prototype.getName = function(){ alert(this.name);}var aPet = new Pet();function Cat(){ this.sound = "meow";}Cat.prototype = aPet;var aCat = new Cat();aCat.getName();aCat.makeSound();
  16. 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. 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. 18. The “new” S o we can do the following: Method 1 Method 2 function func(){ function func(){ this.name = "foo"; if (!(this instanceof func) ) } return new func(); function newObject(obj){ this.name = "foo"; return new obj(); } } var anObj = func(); var anObj = newObject(func); alert(anObj.name); alert(anObj.name);
  19. 19. Back up slides
  20. 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. 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. 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. 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. 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. 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.
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×