JAVASCRIPT

JavaScript Arrays: Pushing, Popping and Shifting

This series of articles mainly concentrates on working with JavaScript arrays. This is the fourth article in the series and mainly concentrates on working with multiple arrays effectively. You can reuse these scripts to inject into server side controls easily (especially in .NET and Java).

Author Info:

By: Jagadish Chaterjee

Poor Best

Rating:

/ 21

March 21, 2006

TABLE OF CONTENTS:

I already covered single dimensional and two dimensional arrays in my first article. If you are new to JavaScript arrays, I strongly suggest you go through that article. All of the examples in this series can be directly tested, by simply copying and pasting the entire code (of each section) into any text file with the extension .HTM and opening it using a browser.

How to append an element to an array using JavaScript

I already covered different kinds of arrays in my first article. I explained combining (joining) and splitting of arrays in my second article. The third article covered copying, transferring and merging data. And in this section I focus on “pushing” (also called “appending”) an element to an array.

Now, let us try to develop a simple script (JavaScript) which adds (or pushes) a single element at the end of an array. Have a look at the following code:

<html>
      <head>
            <meta name=vs_targetSchema content="http://schemas.microsoft.com/intellisense/ie5">
<script id="clientEventHandlersJS" language="javascript">
<!--
functionShow()
{
      var myArray = new Array();
      myArray[0] = "Jag";
      myArray[1] = "Chat";
      myArray[2] = "Win";
      myArray[3] = "Dhan";
      document.write("Before adding<br>-------------<br>");
      for (var i = 0; i < myArray.length; i++)
      {
            document.write(myArray[i] + "<BR>");
      }
      myArray.push("aaa");
      document.write("<br>After adding<br>-------------<br>");
      for (var i = 0; i < myArray.length; i++)
      {
            document.write(myArray[i] + "<BR>");
      }
}

function ButtonPush_onclick() {
      Show();
}
//-->
            </script>
      </head>
      <body>
      <form id="form1">
                  <input type="button" value="Push and Show" id="ButtonPush" name="ButtonPush" onclick="return ButtonPush_onclick()">
            </form>
      </body>
</html>

Actually, within the above code, the “meta” tag is not necessary. Because I developed the above code using Visual Studio.NET 2003 Enterprise Architect, it was automatically added to provide its full-featured mechanisms.

When the above code is executed we get the following output:

Before adding
-------------
Red
Green
Blue
White

After adding
-------------
Red
Green
Blue
White

aaa

The explanation for the above code is in the next section.

Next: How to append an element to an array using JavaScript: discussion >>