Islam Shaalan's Blog

Creating events on variables in Javascript

Handling an event on an array in Javascript is a common task. One of the most common scenarios is creating a custom control and triggering an event when a change happens in this control. I’ll explain a simpler scenario; when you are doing something behind the scenes and updating an array.Then, you’d want to notify the user with the added object.

The following steps are the main steps to create an event

First, we define an array with some values and an other array to hold the event handlers for the event that we need to trap.
var shapes = ["Rectangle", "Square", "Triangle"];
//an array to hold the name of methods registered as the event handlers
//for the onchange event.
var OnArrayChange = [];

Second, we create a method that adds the event handlers to the OnArrayChange array.
function RegisterOnArrayChangeEvent(methodName) {
OnArrayChange.push(methodName);
}

Third, we create a method that raises the event. The method will call each registered event handler and specify the updated of the shapes array.
function RaiseOnArrayChange(obj) {
//a loop through all registered event handlers and call them
for (var i = 0; i < OnArrayChange.length; i++) {
OnArrayChange[i](obj);
}
}

Fourth, we create a method that adds a new shape to the shapes array. Then, it raises the ArrayChange event.
function AddShape(shape) {
var len = shapes.push(shape);
//fire the change event
RaiseOnArrayChange(len);
}

The next step is used to wire an event handler with the event.

Fifth, we create the event handler for then ArrayChange event. The user will be alerted with the updated length.
function ArrayChangeEventHandler(length) {
alert(length);
}


Sixth,we register the event handler to the OnArrayChange event. and add the shape “Circle” to the array
function CreateShapes() {
//bind the event handler to the event
RegisterOnArrayChangeEvent(ArrayChangeEventHandler);
AddShape("Circle");
}


Finally, we call the CreateShapes method to begin the execution of the code.
CreateShapes();


Handling the JavaScript Array Object

Initializing an Array

There are 3 ways to initialize an array
1-
var shapes = new Array(); //Optional parameter array size
shapes[0]= "Square";
shapes[1]= "Rectangle";
shapes[2]= "Triangle";
2-
var shapes = new Array("Square","Rectangle","Triangle");
3-
var shapes = ["Square","Rectangle","Triangle"];
There is no performance impact in choosing any of these.(Whether you are using primitive or complex types)

The difference between the three ways is that; in the first way, the constructor can take a parameter with the length of the array, and the length right after initialization will be the value specified even if the array has no objects yet.

var shapes = new Array(2);
//the value of shapes.length is 2
shapes[0]= "Square";
shapes[1]= "Rectangle";
shapes[2]= "Triangle";
//The array will not raise an exception as expected
//it will just increase the length of the array
//the value of shapes.length becomes

Manipulating objects in array :

1- Push: Adds the value to the end of the array and returns the length of the array after adding the element
var letters = ["a", "b", "c"];
//array has a,b,c
letters.push("d");
//array now is a,b,c,d
letters.push("e","f");
//array now is a,b,c,d,e,f
2- Unshift: Adds the value to the beginning of the array. returns the length of the array after adding the element
var letters = ["a", "b", "c"];
//array has a,b,c
letters.unshift("d");
//array now is d,a,b,c
letters.unshift("e","f");
//array now is e,f,a,b,c,d
3- Pop: removes the last element of the array. returns the object removed.
var letters = ["a", "b", "c"];
//array has a,b,c
letters.pop();
//array now is a,b
//note that if u add any parameter to the pop method it will be ignored
//without giving any errors
4- Shift: removes the first element of the array. returns the object removed.
var letters = ["a", "b", "c"];
//array has a,b,c
letters.shift();
//array now is b,c
//note that if u add any parameter to the shift method it will be ignored
//without giving any errors
5- Splice:
takes parameters (StartIndex, DeleteCount, [Object1,…]) ; a very useful method that can do multiple things.

• Adding object
• Removing object(s)
• Replacing object(s)

var letters = ["a", "b", "c"];
//array has a,b,c
letters.splice(letters.length,0,"d");
//element is added to the end of the array
//array value is a,b,c,d
letters.splice(0,0,"-1");
//element is added to the beginning of the array
//array value is -1,a,b,c,d
letters.splice(0,0,"-3","-2");
//as noticed the splice can accept multiple objects to be added
//elements are added to the beginning of the array
//array value is -3,-2,-1,a,b,c,d
letters.splice(10,0,"m");
//element is added to the beginning of the array
//array value is -1,a,b,c,d,m
//giving an out of range value will not raise errors
//it will just add the specified object to the end of the array
letters.splice(1,2);
//elements are removed from the middle of the array
//array value is -3,a,b,c,d,m
letters.splice(0,1);
//element is removed from the beginning of the array
//array value is a,b,c,d,m
letters.splice(3,2);
//element is removed from the end of the array
//array value is a,b,c
letters.splice(1,1,"x","y");
//The element "b" at position 1 is removed and
//replaced with "x","y"beginning of the array
//the array value is a,x,y,c