Javascript
-
Upload
aditya-gaur -
Category
Technology
-
view
679 -
download
1
description
Transcript of Javascript
JAVASCRIPT
Mentor: Apurba NathAditya Gaur
Do we really need to learn Javascript?
Language of web browser. Its not “some other language”. The most misunderstood language
YES!! But why?
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
var newObject ={first: 10,second: "aValue"};alert(newObject.first)
var newClass = function(){this.first= 10;this.second="aValue";};var newObject = new newClass();alert(newObject.first);
Using Object literal
Using constructor function
What's 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.
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); //2
var anotherObject = new newClass();alert(anotherObject.constructor.prototype.two); //2
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();
How does it work?
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
Inheritance function Pet() { 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();
OUTPUT: Default Name meow
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(){ alert(this);}var aVar = func();var anotherVar = new func();
OUTPUT : Window.object object.object
Also it gives us an impression of Class based language
The “new” So we can do the following:
function func(){ this.name = "foo";}function newObject(obj){ return new obj();}var anObj = newObject(func);alert(anObj.name);
function func(){ if (!(this instanceof func) ) return new func(); this.name = "foo";}var anObj = func();alert(anObj.name);
Method 1 Method 2
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.
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.
var aVar = 10; //type: Numbervar anotherVar = true; // type: Boolean
Weekly Typed Variables are not of a specific data type.
var aVar = 10; // NumberaVar = true; // BooleanaVar = “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 Closure (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 the variable “num” will exist in the stack.As soon as the function returns the variable “num” ceases to exist.
Closure (E xample)
function sayName(name) { 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 have access to the outer function’s variable even after the outer function has returned.
Ouput: I am foo
Closure (More E xample)
function sayName(name) { var phrase = "I am" + name; var sayString = function() { alert(phrase); }; phrase = "My name is" + name; return sayString; } var say = sayName(“foo"); say();
Ouput: My name is foo
This example shows that the variables are not copied. Their reference is stored.