<Lesson 22> [Contents] <Lesson 24>
23.1: Declaring Arrays with Known Initial Values in JavaScript
In the previous lesson, we have learned that we can declare an array using the new operator in JavaScript. The new operator declares an array dynamically which means that values are assigned when the script is run. However, if the initial values are specified, we can use another way to declare an array. For example, suppose a group of students obtained the following scores in their JavaScript examination, as follows:
| Name | Score |
|---|---|
| Alex | 50 |
| Brian | 60 |
| Carmen | 65 |
| Dave | 75 |
| Graham | 80 |
| Keynes | 68 |
| Morgan | 70 |
| Olson | 85 |
We can declare two arrays from the above date, one for the name and the other one for the score.
To declare the name array, we can use the following statement:
var StudentName=[“Alex”,”Brian”,”Carmen”,”Dave”,”Graham”,”Keynes”,”Morgan”,”Olson”]
The values must be enclosed in a pair of square brackets and separated by commas, the list of values is also known as initializer list. Note that you don’t need to use the new operator. The subscripts of the array are 0,1,2,3,4,5,6,7 which means StudentName(0)=Alex, StudentName(1)=Brian and so forth.
As for the scores, we use the following statement;
var Score=[50,60,65,75,80,68,70,85]
The subscripts are also 0,1,2,3,4,5,6,7 which means Score(0)=50, Score(1)=60 and so forth.
23.2 Performing Arithmetic operations on Values of an Array
We can perform arithmetic operations on the values of an array, such as to obtain the sum and the average values.
<html>
<head>
<meta http-equiv="Content-Language" content="en-us">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>JavaScript Example 23.1</title>
<script>function Start(){
var StudentName=["Alex","Brian","Carmen","Dave","Graham","Keynes","Morgan","Olson"];
var Score=[50,60,65,75,80,68,70,85]
var sum=0 , average=0;
for (i=0; i<Score.length;i++)
sum+=Score[i];
document.writeln("Total Score is "+sum+"<br>");
document.writeln("Avearge Score is "+sum/i);
}
</script>
</head>
<body>
</body>
</html>
Click on Example 23.1 to see the output.
* Note that you have to initialize the values of sum and average as 0.
23.3 Tabulating the values of an Array
We can display the values of the array in the above example in a table easily by writing the following script. Note that you can create a table dynamically using the document.write method and by incorporating all the HTML tags. You can write all the values using the for loop. The full script is shown below:
<html>
<head>
<meta http-equiv="Content-Language" content="en-us">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>JavaScript Example 23.1</title>
<script>function Start(){
var StudentName=["Alex","Brian","Carmen","Dave","Graham","Keynes","Morgan","Olson"];
var Score=[50,60,65,75,80,68,70,85]
document.writeln("<table border=\"1\""+"width=\"50%\">");
document.writeln("<thead><th>Name</th>"+"<th>Score</th></thead><tbody>");
for (i=0; i<Score.length;i++)
document.writeln("<tr><td>"+StudentName[i]+"</td><td>"+Score[i]+"</td></tr>");
document.writeln("</tbody></table>");
}
</script>
</head>
<body>
</body>
Click on Example 23.2 to view the output.