News:

Build a stunning handcrafted website with IT Acumens

Main Menu

JavaScript: Arrays

Started by VelMurugan, May 21, 2009, 08:25 PM

Previous topic - Next topic

VelMurugan

JavaScript: Arrays

Arrays are a fundamental part of most programming languages and scripts. Arrays are simply an ordered stack of data items. Each element of the array can store its own data, just like a variable, thus you can say arrays are collections of variables. Items can be added and removed from the array at any time, also their value can be changed easily. One other feature of the arrays, which is specific to JavaScript is that the elements in the array can be of different types. For example in an array you can have both a string and an integer.

Using arrays, you can store multiple values under a single name. Instead of using a separate variable for each item, you can use one array to hold all of them.

    * Creating Arrays

    * Associative Arrays

    * Multidimensional Arrays


VelMurugan


Creating Arrays


There are a few different ways to create an array. The old way of creating arrays to involve the Array() constructor. JavaScript arrays are dynamic, so you can declare an array and do not pass any arguments with the Array() constructor. In this case you will create an empty array with no elements.

<script type="text/javascript">

//We initialize the array using the array() constructor.
var first_array = new Array();

first_array[0] = "This is an element";
first_array[1] = 5;
first_array[2] = "JavaScript - Tutorial";
first_array[3] = 16;
first_array[4] = 7;

var counter=0;

//Let's print out the elements of the array.
for (counter=0; counter<first_array.length; counter  )
   document.write(first_array[counter]   "<br>");

</script>


To declare an array with the specified number of elements you should pass a single integer as an argument. If you pass more than one argument then the number of elements will be equal to the number of data values specified. If you specify numbers or true/false values inside the array then the type of variables will be numeric or Boolean instead of string. Array's elements are accessed using their index, which starts from 0.

<script type="text/javascript">

//We declare the first array and pass a single integer as an argument..
var cars = new Array(5);

cars[0] = "Audi";
cars[1] = "Bentley";
cars[2] = "Mercedes";
cars[3] = "Mini";
cars[4] = "BMW";

//Now we declare the second array and pass 8 arguments.
//This technique does not work in JavaScript 1.2.
var flowers = new Array("Rose", 2.45, "Daisy", 1.57, "Orchild", 0.75, "Tulip", 1.15);

var counter=0;
document.write("<h1>Elements of the first array:</h1>");

for (counter=0; counter<cars.length; counter  )
   document.write(cars[counter]   "<br>");

counter=0;
document.write("<h1>Elements of the second array:</h1>");

for (counter=0; counter<flowers.length; counter  ) {

   if (counter % 2 == 0) {
      document.write(flowers[counter]   " costs ");
   }
   else {
      document.write(flowers[counter]   "<br>");
   }

}

</script>


VelMurugan

Associative Arrays

Associative arrays are arrays that allow you to call the array element you need using a string rather than a number, which is often easier to remember. The downside is that these aren't as useful in a loop because they do not use numbers as the index value. Have a look at the following example:

<script type="text/javascript">

var first_array = new Array();
first_array["key1"] = "the first element";
first_array["key2"] = "the second element";

var second_array  = new Array();
second_array["key3"] = "this is the first element of the second array";
second_array["key4"] = "this is the second element of the second array";

document.write(first_array["key1"]   "<br>");   //prints "the first element."
document.write(second_array["key3"]   "<br>");  //prints "the first element of the second array"
document.write(first_array["key2"]   "<br>");   //prints "the second element"
document.write(second_array["key4"]   "<br>");  //prints "this is the second element of the second array"

</script>


Because the indices in this associative array are not numbers, we cannot use a simple counter in a for loop to work with the array. The way to iterate over the items in an associate array is to use the for (value in array) construct, allowing you to access each item's value via array[value]. Have a look at the example:

<script type="text/javascript">

//We initialize the array using the Array() constructor.
//Note that for readability one can spread the argument over several lines.
var flower_shop = new Array ();

flower_shop["rose"] = "5.00";
flower_shop["daisy"] = "4.00";
flower_shop["orchid"] = "2.00";

//let's print out the headers to our table
document.write("<table border="1" cellpadding="5">");
document.write("<tr><th>Flower</th><th>Price</th></tr>");

//Now we start the for loop using the variable flower to hold our key.
for ( var flower in flower_shop) //print the values into a table cell for each iteration
  document.write( "<tr><td>"   flower   "</td><td>"   flower_shop[flower]   "</td></tr>");

//finally close the table
document.write ("</table>");

</script>

VelMurugan


Multidimensional Arrays


In the preceding examples you've learned how to use arrays. But what if you want to give more information on each flower? You now have the cost, but what if you wanted to add the number of flowers you get for that price, and the colour of the flower? One of the ways to do it is using multidimensional arrays.

A multidimensional array is an array that contains at least one other array as the value of one of the indexes. Example below shows how to use multidimensional array:

<script type="text/javascript">

//Initialize the array using the Array() constructor.
var flower_shop = new Array();

flower_shop['rose'] = new Array( "5.00", "7 items", "red" );
flower_shop['daisy'] = new Array( "4.00", "3 items", "blue" );
flower_shop['orchild'] = new Array( "2.00", "1 item", "white" );

//print "rose costs 5.00, and you get 2 items."
document.write( "rose costs "   flower_shop['rose'][0]   ", and you get "   flower_shop['rose'][1]   ".<br>");
//print "daisy costs 4.00, and you get 3 items."
document.write( "daisy costs "   flower_shop['daisy'][0]   ", and you get "   flower_shop['daisy'][1]   ".<br>");
//print "orchild costs 2.00, and you get 1 item.
document.write( "orchild costs "   flower_shop['orchild'][0]   ", and you get "   flower_shop['orchild'][1]   ".<br>");

</script>

berero

Quote from: VelMurugan on May 21, 2009, 08:25 PMJavaScript: Arrays

Arrays are a fundamental part of most programming languages and scripts. Arrays are simply an ordered stack of data items. Each element of the array can store its own data, just like a variable, thus you can say arrays are collections of variables. Items can be added and removed from the array at any time, also their value can be changed easily. One other feature of the arrays, which is specific to JavaScript is that the elements in the array can be of different types. For example in an array you can have both a string and an integer.

Using arrays, you can store multiple values under a single name. Instead of using a separate variable for each item, you can use one array to hold all of them.

    * Creating Arrays

    * Associative Arrays

    * Multidimensional Arrays




Arrays are essential in programming for organizing multiple data items. In JavaScript, arrays can store different data types, including strings and integers, in one collection. You can easily add, remove, or change values in an array.

Key topics include:

Creating Arrays: Arrays can be created using square brackets ([]) or the Array() constructor.

Associative Arrays: JavaScript technically doesn't support associative arrays (arrays with named keys); objects are used instead.

Multidimensional Arrays: Arrays within arrays, useful for storing data in a grid-like format (e.g., array[j]). :confused

berero

Quote from: VelMurugan on May 21, 2009, 08:25 PM
Multidimensional Arrays


In the preceding examples you've learned how to use arrays. But what if you want to give more information on each flower? You now have the cost, but what if you wanted to add the number of flowers you get for that price, and the colour of the flower? One of the ways to do it is using multidimensional arrays.

A multidimensional array is an array that contains at least one other array as the value of one of the indexes. Example below shows how to use multidimensional array:

<script type="text/javascript">

//Initialize the array using the Array() constructor.
var flower_shop = new Array();

flower_shop['rose'] = new Array( "5.00", "7 items", "red" );
flower_shop['daisy'] = new Array( "4.00", "3 items", "blue" );
flower_shop['orchild'] = new Array( "2.00", "1 item", "white" );

//print "rose costs 5.00, and you get 2 items."
document.write( "rose costs "   flower_shop['rose'][0]   ", and you get "   flower_shop['rose'][1]   ".<br>");
//print "daisy costs 4.00, and you get 3 items."
document.write( "daisy costs "   flower_shop['daisy'][0]   ", and you get "   flower_shop['daisy'][1]   ".<br>");
//print "orchild costs 2.00, and you get 1 item.
document.write( "orchild costs "   flower_shop['orchild'][0]   ", and you get "   flower_shop['orchild'][1]   ".<br>");

</script>




In JavaScript, arrays are versatile collections that can store various data types. You can create them with square brackets [] or the Array() constructor. For named keys, JavaScript uses objects instead of associative arrays. Multidimensional arrays (arrays within arrays) are handy for grid-like data structures.

Quick Reply

Note: this post will not display until it has been approved by a moderator.

Name:
Email:
Verification:
Please leave this box empty:
Type the letters shown in the picture
Listen to the letters / Request another image

Type the letters shown in the picture:

Shortcuts: ALT+S post or ALT+P preview