Array functions in javascript

Finally my first post of the year. Coding in core javascript scared me from the beginning because it does not have a perfect IDE with intellisense as java for eclipse. Coming to the point, I decided to improve myself in javascript. I was actually going through the arrays in javascript and read about some interesting functions. So decided to jot them down for my reference later. I am not sure how popular or how efficient these functions are. Most of my work's application is developed in javascript and I dont remember seeing any of these functions.

Lets consider we created an array      

  var array = ['kolli','ravi'];

Coming to the functions:

1) Push and pop: These are the simple functions that we all know since our undergrad mostly in data structures, stacks. So in an array push adds an element to the end of the array and pop deletes an element from the end of the array.

Eg:

array.push('kanth');

This statement adds ‘kanth’ to the end of the array now the array being [‘kolli’,’ravi’,’kanth’]

array.pop();

This statement removes the last element in the array resulting in [‘kolli’,‘ravi’]

2) unshift and shift: These functions are also used to insert and remove elements from the array but from the other end (beginning of the array).

Eg:

array.unshift("hye");

This statement adds ‘Hye’ to the beginning of the array resulting in [‘hye’,’kolli’,’ravi’]

array.shift();

This statement removes the first element in the array. Result: [‘kolli’,’ravi’']

3) Splice: This is a little more complex function than the others. It can be used to add, remove, replace elements in the array.

Syntax:

splice(StartingPos, NoofItemsToDelete, Items_to_add);

Eg:

array.splice(2,0,'kanth');

This statement is going to insert ‘kanth’ at location 2 of the array, without deleting anything.

array.splice(2,1);

This statement is going to remove 1 element starting from position 2.

array.splice(1,1,'rocks');

This statement is going to replace the element in position 1 resulting in array [‘kolli’,’rocks’].

Finally one more advantage of this function is that it lets us add more than one element to the array by just separating them with a ‘,’.

Changing combo box options dynamically with javascript

Most of you guys might already have known about this. I have a requirement where I have to change the options of a combo box when i choose either “Hourly” or “salaried” in another combo box.

A new Option can be created using

var newOption = new Option(“text”, “value”);

Options can be accessed using the select that created the combo box

document.getElementById('ExcludeHoliday').options[0]

Where this code will select “ExcludeHoliday” combo box and the first option. When we try to remove an option from the middle it is essential to reorganize the list starting for the removed option. To mention, removing an option is to set the value of that option to “null” :)

JavaScript Timer

Well i am a novice in JavaScript, and so i started writing a simple Ad time out script. The most tricky part was to display the time along with the other text, and do transfer to the next page after time out. I learnt that we can place the html at any place

<SCRIPT type="text/javascript" LANGUAGE = "JavaScript">
<!--
var secs
var timerID = null
var timerRunning = false
var delay = 1000

function InitializeTimer()
{
    // Set the length of the timer, in seconds
    secs = 10
    StopTheClock();
    StartTheTimer();
}

function StopTheClock()
{
    if(timerRunning)
        clearTimeout(timerID)
    timerRunning = false;
   
}

function StartTheTimer()
{
    if (secs < 0)
    {
        window.location = "next.html"
    }
    else
    {
        document.getElementById('timer').innerHTML=secs;
        self.status = secs
        secs = secs - 1
        timerRunning = true
        timerID = self.setTimeout("StartTheTimer()", delay)
    }
}

//-->
</SCRIPT>

Then i learned that we can use document.getElementById(<a or span or div Id) in line 32 to set the value to the current time in the html.

The way i was accessing it in the body of html is

<p class="style3">click to skip or wait for <span id="timer"></span> &nbsp;seconds&nbsp;

A Div element can be used but i get it as

click to skip or wait for
5
seconds 

So i changed it to span to get all in a single line. I read that anchor tag also works but haven’t tried it.

Another interesting thing that i learned is that we can move to the next page after time out using

window.location("next.html");

JavaScript timer code : http://www.mcfedries.com/JavaScript/timer.asp