EXERCISE 21 - BEGINNING JAVASCRIPT – CREATING ARRAYS

The following tasks should be completed using Code View in Dreamweaver or Notepad++. Create a folder named Beginning JavaScript on your working area (if the folder does not already exist), and save each file to this folder with a suitable name.

Do not forget to add the extension .html or (.htm) otherwise you will not be able to view the output in a browser.

Exercise 21a

Using Code View in Dreamweaver or Notepad++, enter the following text:

<html>

<head>

<title>Creating Arrays</title>

<script type = "text/JavaScript">

<!--

var authors = [ 'Ernest Hemingway',

'Charlotte Bronte',

'Dante Alighieri',

'Emily Dickinson'

];

//-->

</script>

</head>

<body>

<script type = "text/JavaScript">

<!--

document.write('<p>The first author is <strong>');

document.write(authors[0] + '</strong</p>');

document.write('<p>The last author is <strong>');

document.write(authors[authors.length-1] + '</strong</p>');

authors.unshift('Stan Lee');

document.write('<p>I almost forgot <strong>');

document.write(authors[0]);

document.write('</strong</p>');

//-->

</script>

</body>

</html>

Save the file as exercise 21a.html and view the page in your browser.

Make sure that you understand this code.

Exercise 21b

Using Code View in Dreamweaver or Notepad++, enter the following text:

<html>

<head>

<title>Array - For Loop</title>

</head>

<body>

<script type = "text/JavaScript">

<!--

var degFahren = new Array(212, 32, -459.15);

var degCent = new Array();

var loopCounter;

for (loopCounter = 0; loopCounter <= 2; loopCounter++)

{

degCent[loopCounter] = 5/9 * (degFahren[loopCounter] - 32);

}

for (loopCounter = 2; loopCounter >= 0; loopCounter--)

{

document.write("Value " + loopCounter + " was " + degFahren[loopCounter] + " degrees Fahrenheit");

document.write(" which is " + degCent[loopCounter] + " degrees centigrade<br />");

}

//-->

</script>

</body>

</html>

Save the file as exercise21b.html and view the page in your browser.

Can you improve this code by finding out the length of the degFahren array?

Edit the above code as shown below:

for (loopCounter = 0; loopCounter <= degFahren.length-1; loopCounter++)

{

degCent[loopCounter] = 5/9 * (degFahren[loopCounter] - 32);

}

for (loopCounter = degFahren.length-1; loopCounter >= 0; loopCounter--)

{

document.write("Value " + loopCounter + " was " + degFahren[loopCounter] + " degrees Fahrenheit");

document.write(" which is " + degCent[loopCounter] + " degrees centigrade<br />");

}

Save the file as exercise21b-ver2.html and view the page in your browser.

Make sure that you understand this code.

Exercise 21c

Using Code View in Dreamweaver or Notepad++, edit the file exercise21b-ver2.html as follows:

<html>

<head>

<title>Array - For Loop</title>

</head>

<body>

<script type = "text/JavaScript">

<!--

function convertToCentigrade(degFahren)

{

var degCent;

degCent = 5/9 * (degFahren - 32);

return degCent;

}

var degFahren = new Array(212, 32, -459.15);

var degCent = new Array();

var loopCounter;

for (loopCounter = 0; loopCounter <= degFahren.length-1; loopCounter++)

{

degCent[loopCounter] = convertToCentigrade(degFahren[loopCounter]);

}

for (loopCounter = degFahren.length-1; loopCounter >= 0; loopCounter--)

{

document.write("Value " + loopCounter + " was " + degFahren[loopCounter] + " degrees Fahrenheit");

document.write(" which is " + degCent[loopCounter] + " degrees centigrade<br />");

}

//-->

</script>

</body>

</html>

Save the file as exercise21c.html and view the page in your browser.

The results displayed will be exactly the same as the previous exercise.

You should now amend your code using the Math.,round() method so that all values are displayed to 2 decimal places.

Edit the above code as shown below:

for (loopCounter = degFahren.length-1; loopCounter >= 0; loopCounter--)

{

degFahren[loopCounter] = degFahren[loopCounter] * 100;

degFahren[loopCounter] = Math.round(degFahren[loopCounter]); degFahren[loopCounter] = degFahren[loopCounter]/100;

degCent[loopCounter] = degCent[loopCounter] * 100;

degCent[loopCounter] = Math.round(degCent[loopCounter]);

degCent[loopCounter] = degCent[loopCounter]/100;

document.write("Value " + loopCounter + " was " + degFahren[loopCounter] + " degrees Fahrenheit");

document.write(" which is " + degCent[loopCounter] + " degrees centigrade<br />");

}

Save the file as exercise21c-ver2.html and view the page in your browser.

Make sure that you understand this code.

A - Beginning JavaScript - Ex21 - Creating Arrays Version 3

Page 5 of 5