Extending JavaScriptpart one

Everything should be as simple as it is, but not simpler.

Albert Einstein

Javascript is a loosely-typedlanguage

Javascript is a loosely-typed language

var x = 23; //number

Javascript is a loosely-typed language

var x = 23; //number

x = "Apple"; //string

Javascript is a loosely-typed language

var x = 23; //number

x = "Apple"; //string

x = new Array(); //object

Javascript is a loosely-typed language

var x = 23; //number

x = "Apple"; //string

x = new Array(); //object

Any thing can be assigned to x.

What we are going to seein this presentation?

What we are going to see in this presentation?

Creating type-safe collections like stack and queue.

What we are going to see in this presentation?

Creating type-safe collections like stack and queue.

Creating type-safe collections

Creating type-safe collections

For help..

Add two methods into the Array class; one to know whether an array contains particular item and the other to remove an item at particular index.

Creating type-safe collections

For help..

Add two methods into the Array class; one to know whether an array contains particular item and the other to remove an item at particular index.

Array.prototype.contains = function(element) {return this.indexOf(element) > -1;

}

Array.prototype.remove = function(index) {return this.splice(index, 1);

};

Creating type-safe collections

For help..

Create an array that contains the primitive types.

var primitives = ["number","string","object","boolean","function"];

Let's make our hands dirty

Stack

Stack

Plan

Create a new class named Stack.

Stack

Plan

Create a new class named Stack.

Encapsulate an instance of array in a property.

Stack

Plan

Create a new class named Stack.

Encapsulate an instance of array in a property.

Create a constructor that takes a parameter for the type of data to be stored.

Stack

Plan

Create a new class named Stack.

Encapsulate an instance of array in a property.

Create a constructor that takes a parameter for the type of data to be stored.

For storing primitive types pass the type name to the constructor.

var myStack = new Stack("string");

Stack

Plan

For storing custom types pass the type itself to the constructor.

var Employee = function() { }; //custom type

var myStack = new Stack(Employee);

Stack

Plan

For storing custom types pass the type itself to the constructor.

var Employee = function() { }; //custom type

var myStack = new Stack(Employee);

Check the type is valid in the constructor.

Stack

Plan

For storing custom types pass the type itself to the constructor.

var Employee = function() { }; //custom type

var myStack = new Stack(Employee);

Check the type is valid in the constructor.

Create a method named push() to push items into the collection.

Stack

Plan

For storing custom types pass the type itself to the constructor.

var Employee = function() { }; //custom type

var myStack = new Stack(Employee);

Check the type is valid in the constructor.

Create a method named push() to push items into the collection.

Create a method named pop() to remove the last added item from the collection.

Stack

Plan

Create a method named getValue() to get the item at particular index.

Stack

Plan

Create a method named getValue() to get the item at particular index.

Create a method named setValue() to set the item at particular index.

Stack

Plan

Create a method named getValue() to get the item at particular index.

Create a method named setValue() to set the item at particular index.

Create a property named length that returns the total no. of items in the collection.

Stack

Action

Create a new class named Stack.

var Stack = function(type){}

Stack

Action

Create a new class named Stack.

var Stack = function(type){}

Function is a first class object in javascript.

Stack

Action

Create a new class named Stack.

var Stack = function(type){}

Function is a first class object in javascript.

Stack is the class name.

Stack

Action

Create a new class named Stack.

var Stack = function(type){}

Function is a first class object in javascript.

Stack is the class name.

type - data type to be stored.

Stack

Action

Create a new class named Stack.

var Stack = function(type){}

Function is a first class object in javascript.

Stack is the class name.

type - data type to be stored.

{} - the body code of the function is the constructor.

Stack

Action

The constructor should take a parameter for the type of data to be stored.

var Stack = function(type){

if(arguments.length != 1)throw new Error("There is no constructor that takes " + arguments.length + " arguments");

...

Stack

Action

The constructor should take a parameter for the type of data to be stored.

var Stack = function(type){

if(arguments.length != 1)throw new Error("There is no constructor that takes " + arguments.length + " arguments");

...

If the constructor takes less or more than one parameter throw error.

Stack

Action

Check the type is valid in the constructor.

var Stack = function(type){

if(arguments.length != 1)throw new Error("There is no constructor that takes " + arguments.length + " arguments");

if(primitives.contains(type))this.isPrimitive = true;

else if(typeof type == "function")this.isPrimitive = false;

elsethrow new Error("Invalid Type");

...

Stack

Action

Check the type is valid in the constructor.

var Stack = function(type){

if(arguments.length != 1)throw new Error("There is no constructor that takes " + arguments.length + " arguments");

if(primitives.contains(type))this.isPrimitive = true;

else if(typeof type == "function")this.isPrimitive = false;

elsethrow new Error("Invalid Type");

...If the type is primitive set isPrimitiveproperty to true else false.

Stack

Action

Encapsulate an instance of array in a property.

this.type = type;this.array = new Array();this.length = this.array.length;return this;

} //constructor ends

store the type in a property if it's valid.

Stack

Action

Encapsulate an instance of array in a property.

this.type = type;this.array = new Array();this.length = this.array.length;return this;

} //constructor ends

store an instance of array in a property.

Stack

Action

Create a property named length that returns the total no. of items in the collection.

this.type = type;this.array = new Array();this.length = this.array.length;return this;

} //constructor ends

store the length of array in a property.

Stack

Action

Set the constructor for the Stack.

Stack.prototype.constructor = Stack;

Stack

Action

Set the constructor for the Stack.

Stack.prototype.constructor = Stack;

every function has a prototype property that helps in inheriting, overriding and adding new methods to the class on fly.

Stack

Action

Create a method named push() to push items into the collection.

Stack.prototype.push = function(){}

Stack

Action

Override the push() method to check if the data is of the specified type.

Stack.prototype.push = function(){}

push - accepts multiple items atonce.

myArray.push(12, 23, 34);

So iterate through the arguments list and check each data is valid.

Stack

Action

Create a method named push() to push items into the collection.

...var is Valid;

for(var i = 0, j = arguments.length; i < j;i++){

isValid = this.isPrimitive ? (this.type.toLowerCase() == typeof arguments[i])

: (arguments[i] instanceof this.type);

if(!isValid)throw new Error("Invalid Argument");

} //loop ends

Stack

Action

Create a method named push() to push items into the collection.

...var is Valid;

for(var i = 0, j = arguments.length; i < j;i++){

isValid = this.isPrimitive ? (this.type.toLowerCase() == typeof arguments[i])

: (arguments[i] instanceof this.type);

if(!isValid)throw new Error("Invalid Argument");

} //loop ends

If any item is not valid throw error.

Stack

Action

Create a method named push() to push items into the collection.

for(var i = 0, j = arguments.length; i < j;i++){this.array.push(arguments[i]);

}this.length = this.array.length;return this.array.length;

} //push() ends

Stack

Action

Create a method named push() to push items into the collection.

for(var i = 0, j = arguments.length; i < j;i++){this.array.push(arguments[i]);

}this.length = this.array.length;return this.array.length;

} //push() ends

push all the items to the internal array.

Stack

Action

Create a method named push() to push items into the collection.

for(var i = 0, j = arguments.length; i < j;i++){this.array.push(arguments[i]);

}this.length = this.array.length;return this.array.length;

} //push() ends

set the length property.

Stack

Action

Create a method named pop() to remove the last added item from the collection.

Stack.prototype.pop = function(){this.array.pop();this.length = this.array.length;return this.array.length;

}

Stack

Action

Create a method named getValue() to get the item at particular index.

Stack.prototype.getValue = function(index){ return this.array[index];

}

Stack

Action

Create a method named setValue() to set the item at particular index.

Stack.prototype.getValue = function(index){ return this.array[index];

}

Stack.prototype.setValue = function(index, value){var isValid = this.isPrimitive ? (this.type.toLowerCase() == typeof value) : (value instanceof this.type);

if(!isValid)throw new Error("Invalid Argument");

this.array[index] = value;return this.array[index];

}

Stack

Complete

var Stack = function(type){

if(arguments.length != 1)throw new Error("There is no constructor that takes " + arguments.length + " arguments");

if(primitives.contains(type))this.isPrimitive = true;

else if(typeof type == "function")this.isPrimitive = false;

elsethrow new Error("Invalid Type");

this.type = type;this.array = new Array();this.length = this.array.length;return this;

}

Stack

Complete

Stack.prototype.constructor = Stack;

Stack.prototype.push = function(){

var is Valid;

for(var i = 0, j = arguments.length; i < j;i++){

isValid = this.isPrimitive ? (this.type.toLowerCase() == typeof arguments[i])

: (arguments[i] instanceof this.type);

if(!isValid)throw new Error("Invalid Argument");

}

Stack

Complete

for(var i = 0, j = arguments.length; i < j;i++){this.array.push(arguments[i]);

}this.length = this.array.length;return this.array.length;

}

Stack.prototype.pop = function(){ this.array.pop();this.length = this.array.length;return this.array.length;

}

Stack.prototype.getValue = function(index){ return this.array[index];

}

Stack

Complete

Stack.prototype.setValue = function(index, value){var isValid = this.isPrimitive ? (this.type.toLowerCase() == typeof value) : (value instanceof this.type);

if(!isValid)throw new Error("Invalid Argument");

this.array[index] = value;return this.array[index];

}

It's time to test

It's time to test

Steps

Start the firefox.

It's time to test

Steps

Start the firefox.

Open the firebug console window.

It's time to test

Steps

Testing constructor.

var myStack = new Stack();

It's time to test

Steps

Testing constructor.

Error: There is no constructor that takes 0 arguments

var myStack = new Stack();

It's time to test

Steps

Testing constructor.

var myStack = new Stack("string1");

It's time to test

Steps

Testing constructor.

Error: Invalid Type

var myStack = new Stack("string1");

It's time to test

Steps

Testing push().

var myStack = new Stack("string");

myStack.push(1);

It's time to test

Steps

Testing push().

Error: Invalid Argument

var myStack = new Stack("string");

myStack.push(1);

It's time to test

Steps

Testing push().

var myStack = new Stack("string");

myStack.push("Apple");

It's time to test

Steps

Testing push().

var myStack = new Stack("string");

myStack.push("Apple");

1

It's time to test

Steps

Testing push().

var myStack = new Stack("string");

myStack.push("Apple");

myStach.push("Orange", 3);

It's time to test

Steps

Testing push().

var myStack = new Stack("string");

myStack.push("Apple");

myStach.push("Orange", 3);

Error: Invalid Argument

It's time to test

Steps

Testing push().

var Employee = function(name) { this.name = name };

It's time to test

Steps

Testing push().

var Employee = function(name) { this.name = name };

var myStack = new Stack(Employee);

It's time to test

Steps

Testing push().

var Employee = function(name) { this.name = name };

var myStack = new Stack(Employee);

myStack.push("Apple");

It's time to test

Steps

Testing push().

var Employee = function(name) { this.name = name };

var myStack = new Stack(Employee);

myStack.push("Apple");

Error: Invalid Argument

It's time to test

Steps

Testing push().

var Employee = function(name) { this.name = name };

var myStack = new Stack(Employee);

myStack.push(new Employee("Stephenson"));

1

It's time to test

Steps

Testing getValue().

myStack.getValue(0);

It's time to test

Steps

Testing getValue().

myStack.getValue(0);

Object { name="Stephenson" }

Queue

Queue

Plan

Most of the stuff are same like Stack except some things.

Queue

Plan

Most of the stuff are same like Stack except some things.

Change the names of push() and pop() as enter() and exit().

Queue

Plan

Most of the stuff are same like Stack except some things.

Change the names of push() and pop() as enter() and exit().

In Stack the last added item comes out first while in Queue it's opposite. Change the exit() implementation.

Queue

Action

The implementation of all the methods except exit() is same as Stack. Let's ignore them in discussion.

Queue

Action

Change the exit() implementation.

Queue.prototype.exit = function(){this.array.remove(0);this.length = this.array.length;return this.length;

}

Queue

Action

Change the exit() implementation.

Queue.prototype.exit = function(){this.array.remove(0);this.length = this.array.length;return this.length;

}

remove the first item from the internal array by calling the remove() method added to the Array class.

Queue

Complete

var Queue = function(type){

if(arguments.length != 1)throw new Error("There is no constructor that takes " + arguments.length + " arguments");

if(primitives.contains(type))this.isPrimitive = true;

else if(typeof type == "function")this.isPrimitive = false;

elsethrow new Error("Invalid Type");

this.type = type;this.array = new Array();this.length = this.array.length;return this;

}

Queue

Complete

Queue.prototype.constructor = Queue;

Queue.prototype.enter = function(){

var is Valid;

for(var i = 0, j = arguments.length; i < j;i++){

isValid = this.isPrimitive ? (this.type.toLowerCase() == typeof arguments[i])

: (arguments[i] instanceof this.type);

if(!isValid)throw new Error("Invalid Argument");

}

Queue

Complete

for(var i = 0, j = arguments.length; i < j;i++){this.array.push(arguments[i]);

}this.length = this.array.length;return this.array.length;

}

Queue.prototype.exit = function(){ this.array.remove(0);this.length = this.array.length;return this.length;

}

Queue.prototype.getValue = function(index){ return this.array[index];

}

Queue

Complete

Queue.prototype.setValue = function(index, value){var isValid = this.isPrimitive ? (this.type.toLowerCase() == typeof value) : (value instanceof this.type);

if(!isValid)throw new Error("Invalid Argument");

this.array[index] = value;return this.array[index];

}

It's time to test

It's time to test

Steps

Testing exit().

var myQueue = new Queue("string");

It's time to test

Steps

Testing exit().

var myQueue = new Queue("string");

myQueue.enter("RED", "BLUE", "GREEN");

It's time to test

Steps

Testing exit().

var myQueue = new Queue("string");

myQueue.enter("RED", "BLUE", "GREEN");

myQueue.exit();

It's time to test

Steps

Testing exit().

var myQueue = new Queue("string");

myQueue.enter("RED", "BLUE", "GREEN");

myQueue.exit();

It's time to test

Steps

Testing exit().

myQueue.getValue(0);

It's time to test

Steps

Testing exit().

myQueue.getValue(0);

"BLUE"

Thank You