Extending javascript part one
-
Upload
vijaya-anand -
Category
Technology
-
view
412 -
download
0
description
Transcript of Extending javascript part one
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