The document discusses JavaScript and some of its key features: - JavaScript is the programming language of the web browser and was originally developed by Netscape under different names before being standardized. - JavaScript uses a prototypal object model instead of classes, with objects inheriting directly from other objects via prototypal inheritance chains rather than from classes. - The "new" keyword is used to create objects but can give the misleading impression of classes; functions can also be used to create objects without "new" by returning the object.

1. JAVASCRIPT
Aditya Gaur Mentor: Apurba Nath

2. Do we really need to learn
Javascript?

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. 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);

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";
};
newClass.prototype.one = 1;
var newObject = new newClass();
newObject.constructor.prototype.two = 2;
alert(newObject.constructor.prototype.one); //1
alert(newObject.constructor.prototype.two); //2
var anotherObject = new newClass();
alert(anotherObject.constructor.prototype.two); //2

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. 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. Inheritance
function 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. Prototype Chaining
Object.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(){
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. 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 the
variable “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 have
access 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.