Javascript

JAVASCRIPT

Aditya Gaur Mentor: Apurba Nath

Do we really need to learn
Javascript?

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

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.
this.first= 10;
};
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?

this.first= 10;
};

newClass.prototype.one = 1;
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

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

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

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

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(){
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);

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 the
variable “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 have
access 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.

Javascript

Recommended

More Related Content

What's hot (20)

Viewers also liked (7)

Similar to Javascript (20)

Recently uploaded (20)

Javascript