1

CS1046 – Lab 3

Timing: This lab should take you 90 to 120 minutes.

Ex. 1: 20, Ex. 2: 30, Ex. 3: 20, Ex. 4: 15 = (85 mins)

Objectives:

By the end of this lab you should be able to:

Define the terms: script and program

Identify an object and its properties, methods and events

Identify the document object and at least one of its properties, one of its events and one of its

methods

Create and link an external script file with the extension .js and attach it to an HTML webpage

Identify and write a JavaScript statement

Identify, explain the purpose of, and write a JavaScript comment

Explain the purpose of a variable

Declare a variable

Assign a value to (store something in) a variable

Distinguish between the three data type of a variable

Properly use single and double quotes when working with String variables

Display the value of a variable on a webpage

Follow the six rules for naming a variable

Identify an array and identify the situations in which you would use an array

Create and fill an array with values

Retrieve a value(s) from an array

Write a valid expression involving variables and arithmetic and concatenation operators

Exercise 1 – Incorporating JavaScript code into your HTML webpage and using the document object

1. When we write JavaScript we are writing a script or a program. Both of these terms really just

mean: a series of instructions. Thus, your favourite recipe for apple pie could also be considered

a script or a program (except it uses a human to execute it rather than a computer). The manual

for installing your dishwasher is also an example of a program/script. One of the only real

requirement when writing a script is that the instructions are clear and comply to some syntax

rules (for example, when writing a recipe, you follow the rule to use either all metric

measurements or all imperial measurements, to mix them would be confusing). Also, the script

should achieve a clear goal, for example, a recipe for apple pie should actually produce an apple

pie at the end of the instructions, not chicken noodle soup. A script that creates an online

calculator in a webpage should produce the correct answers when someone presses the

necessary buttons on your webpage.

2

2. To create a script we need to gather together the necessary parts. Two key parts we will need

are objects and variables:

a. An object is a thing, such as a button or a text box on a webpage. It could also be an

element (remember elements are the opening and closing HTML tags and the stuff in

between them). An analogy from our Apple Pie recipe example would be the pastry.

The pastry would be an object.

b. A variable stores or holds data (it is kind of like a bucket). A variable can point to an

object or to a simpler thing that holds a value (either a numeric value or a text value),

such as the width of a webpage button, the URL for the webpage. In our Apple Pie

recipe example, the amount of water or flour used to make the pastry might be held in

variables such as amtOfFlour, amtOfWater.

Now let us take a closer look at Objects.

3. Objects

a. An instance of an object is ONE actual object. For example, one actual button on a

webpage would be an instance of the button object. Another example would be student

objects. An instance of a student object would be the actual student named “John

Smith”.

b. Each instance of object can have its own:

i. Properties – a characteristic of the object For example, some properties of a

button are: backgroundColour, caption and name.

ii. Methods – the things that people need to do with the object. Often methods

can get values of the object’s properties OR set the values of object’s

properties. For example, you might want to make change the colour of the

button to pink, so you use a method called setBackgroundColor(“pink”).

iii. Events – the way people interact with the object For example, the onclick

event fires (activates) when a person (user) clicks on the button.

c. One of the most important objects in JavaScript is the document object. It lets you

access and change the content on a webpage

i. Some of the document’s properties are the title, the URL and the date last

modified (lastModified)

ii. Some of the document’s methods are write() which adds new content to the

webpage and getElementById() which accesses an HTML element by the id you

give it.

iii. Some of the document’s events are load which activates/fires when the user

first loads your page into his/her browser or keypress which activates/fires if

the user presses a key on the keyboard.

d. Now let’s write some JavaScript to make the document object do something.

4. Using the Chrome browser, go to this webpage:

http://www.csd.uwo.ca/~lreid/cs1046/labs/lab3/lab3ex1a.html

Right click and view the source for this page.

5. Create a new folder called lab3.

Open Notepad and then save the file (in the lab3 folder) as yourwesternuseridlab3ex1a.html (eg.

3

jsmith2lab3ex1a.html).

It is important to save the file as an .html and not .txt file. Consult Lab 1 Exercise 5 if you

experience difficulty.

6. Using the Chrome browser, go to this webpage:

http://www.csd.uwo.ca/~lreid/cs1046/labs/lab3/lab3ex1.css and copy the code into your lab3

folder, using Notepad to create a new file, paste the css code in and give this new file the name:

lab3ex1.css (It is important to use this name, because we have already linked this css file to the

HTML file)

7. Using Notepad, open the HTML file you just created. We are going to add our first JavaScript

code to this page. Move to just after the </h2> HTML tag but before the </body> tag in your

lab3ex1a.html file and add the following:

<script src="writingtopage.js"></script>

This line instructs the system to insert the JavaScript code found in the writingtopage.js file into

our HTML webpage.

8. Try opening your lab3ex1a.html in Chrome, notice how nothing has changed. This is because

you have not created the JavaScript file yet.

Now open Notepad and create a new file and save it in your lab3 directory as writingtopage.js

9. Add the following line to writingtopage.js:

document.write('Good Afternoon YourName');

Change YourName to your actual name. Make sure you spell everything correctly, remember to

include the single quotes and brackets around Good Afternoon YourName and remember to end

the line with the semicolon, it is important!

10. Now try refreshing your lab3ex1a.html file. Every time you write some code, you should verify

that it works. Even the best programmers in the world need to check to see if their code

executed properly. By refreshing your webpage, you are executing/running the code to see if it

works. You should now see the greeting (Good Afternoon YourName) in the correct spot. This is

because we told the document object that we wanted to write to it, immediately after we

displayed the <h2> heading.

The line: document.write('Good Afternoon YourName'); is called a statement in programming.

A statement is a single instruction. In JavaScript, the semicolon indicates the end of a

statement. Do not forget to use the semicolon.

It is also good practice to always put each statement on its own line. Do not write a program like

you would with a paragraph, all running together, instead put each statement on a single line.

4

11. Let’s add another statement to our .js file. Right after the document.write('Good Afternoon

YourName'); statement

add the statement:

document.write('<h1>Would you like some cupcakes?</h1>');

So your .js file should look like this:

Save your .js file and refresh your HTML page to observe the change. Notice that your page

knows to process the <h1> tag properly (i.e., it treats it as markup and, as a result, it is not

displayed).

12. One thing all good programmers do is comment their code. Commenting is adding explanations

that do not get executed (i.e., the browser does not really care if you add them) but comments

will help other programmers understand your code better. Comments also help you remember

why you did what you did and help other programmers understand your code. Let’s add some

comments. If the comments you feel you should add will span more than 1 line (multiline

comments), put a /* to start them and a */ to indicate the end of them. Go into your .js file and

add the comment below to the top of the file (before your 2 statements) and then save your

file:

/* This is the first JavaScript code that I have written

Written by: Your Name

Written on: The date

*/

13. For comments that will only be one line, you can use two slashes //

Add the following comment to the very end of you .js file and save the .js file

//The end of my first program

5

14. Your .js file should now look like this:

15. Refresh/reload your HTML page; you should notice that nothing changed. Remember

comments are not executed, they are just like post-it notes to yourself that serve as a reminder

(similar to when you put notes in the margins of a textbook).

16. If you want to read a really great short little explanation of objects, check out this article

http://html.net/tutorials/javascript/lesson9.php

Congratulations, you now can:

a. Add the external <script> tag to an HTML file in order to include JavaScript statements in

your webpage.

b. Use an object, the document object, in a webpage.

c. Execute one of the document object methods, the write() method.

d. Identify a JavaScript statement.

e. Identify two different types of JavaScript comments.

f. Verify to make sure your code executed properly.

6

Exercise 2 – Declaring variables, assigning values to variables and working with numeric variables

A variable is a container for data. For example, if you wanted to create an online calculator program

and the user wanted to see the result of 456 X 34, you would need one variable to hold the value 456,

another variable to hold the value 34 and a third variable to hold the resulting answer. If you

remember algebra, you already have a vague idea of what a variable is. One noticeable difference is that

programmers try to pick more descriptive names than your math teacher would have picked (likely your

math teacher picked names like: x, y and z).

1. Before you can use a variable, you need to create space for that variable. This is done by

declaring the variable, for example:

var quantity;

The statement above is a variable declaration (we are creating space in memory for a variable

called quantity):

Things to note about the above declaration:

a. var is a keyword it is a special word that the JavaScript interpreter (tool that checks

your code before displaying it in a browser) uses to say “I am going to create memory

space for a new variable” . This is the only thing you can do with the word var. You

cannot use any keywords as variable names, this will confuse the interpreter. Thus you

can NOT do this:

var var;

b. quantity is the name of the variable. There are rules and suggestions for variable names

in JavaScript:

It cannot be a keyword (like var)

It must start with a letter, or a dollar sign ($), or an underscore

It cannot start with a number

It can contain numbers, letters, dollar signs or underscores but no other

characters (e.g. my.home.town would be an invalid variable name, while

my_Home_Town1 would be valid name )

It is case sensitive, so quantity and Quantity are two DIFFERENT variables

It should be a descriptive name, so rather than this:

var w;

a more appropriate name might be:

var width;

If your variable is made up of more than one word, use a capital letter for the

first letter of every word after the first word, for example, rather than this:

var firstname;

do this instead:

var firstName;

c. The declaration must end with a semi colon;

7

2. Open the file: http://www.csd.uwo.ca/~lreid/cs1046/labs/lab3/lab3ex2a.html and save the

source (the HTML tags) to your lab3 folder, in a newly created file called lab3ex2a.html. View it

in the browser. Notice how this page should calculate the total price of cupcakes based on the

number the user puts in the text box.

3. In the HTML source, right after the line that creates the button <button>… </button> add the

following line:

<script src="calculating.js"></script>

This line of code instructors the interpreted to include the file calculating.js in our HTML file.

4. In Notepad open a new file and save it in your lab3 folder as calculating.js

5. Now we are going to declare the variables we will need to do the calculation. We will make one

variable to hold the number of cupcakes, another variable will hold the cost per cupcake and the

third variable will hold the resulting calculation. So in the file: calculating.js add the following to

declare these 3 variables:

var costPerCupcake;

var amountOfCupcakes;

var totalCost;

Take note of the fact that we used descriptive names for the variables and followed the rules for

naming them.

6. Save both files (i.e., lab3ex2a.html and calculating.js file) and then reload lab3ex2a.html in the

browser. Notice that nothing has changed. This is because we have only declared the variables

but not used them yet.

7. Next, we will add some code to do our calculation; first, we will enter the cost per cupcake as 3

dollars. You ALWAYS put the variable on the left side and the value you want to store into it on

the right side. So add the following line after the declaration lines:

costPerCupcake = 3;

8. Then add the code below to get the number of cupcakes from the text box on our webpage:

amountOfCupcakes = document.getElementById("amtToGet ").value;

NOTE: for the above line of code, we use the id for the textbox to access it as an object and then

use the value property (.value) to retrieve the number the user entered in the box.

8

9. Then to calculate the total cost for the cupcakes, add this line:

totalCost = amountOfCupcakes * costPerCupcake;

NOTE: in the line above the multiplication operator (*) is used but there are other arithmetic

operators that exist. Assume we have three simple variables x, y and z, here is a table to help

you understand the common arithmetic operators:

var x;

var y;

var z;

x = 10; //so the variable x hold the value 10 now

y = 2; //and the variable y holds the value 2 now

If, right after the above 5 statements, we did this JavaScript statement(s):

THEN the value in z would be:

Operation Notes

z=x+y; 12 Addition

z=x/y; 5 Division

z=x*y; 20 Multiplication

z=x-y; 8 Subtraction

z=x%3; 1 Modulus (Divides and returns the remainder)

x++; Increment by 1 x will have 11 in it after statement is executed.

x--; Decrement by 1 x will have 9 in it it after statement is executed.

x=x+y; z=x+y;

14 Demonstrating that variables can be overwritten x takes on the value 12 in first statement and thus z = x (now 12) + y (still 2), so z is now 14

10. Finally we need to display the answer to the user, To display the output, add the following

statement:

document.write(totalCost);

11. Now save your calculating.js file and reload your HTML webpage in your browser.

9

12. Make sure your code displayed the correct total of 3. NOTE: initially, the textbox has 1 in it (the

default value), so the total cost displayed will be 1 * 3 3, we still have some work to do before

we can change the number of cupcakes in the textbox and have it calculate that cost). If it did

not work, it could be a very small error; for example, when I first created this lab, I incorrectly

typed: getElementByID rather than getElementById and my code wouldn’t work and it took me

a while to figure it out. I have indicated in red what I did wrong getElementByID vs

getElementById. Your code should look like this:

13. Change getElementById to getElementByID then save and reload your html page again and

notice that the page does not work anymore.

14. You can use Google Chrome to find out why your page is not working. To do this, right click on

the webpage and select Inspect Elements (or it might just be called Inspect). Next click on the

Sources tab and click on the calculating.js file and then you should be able to see which line is

causing the problem. The diagram below shows what it would look like. The area highlighted in

yellow emphasizes the problem:

15. Click on the X to get rid of the inspection window and change the code back so that it works (i.e.,

change getElementByID to getElementById and resave the file and reload the page)

var costPerCupcake;

var amountOfCupcakes;

var totalCost;

costPerCupcake=3;

amountOfCupcakes =document.getElementById("amtToGet").value;

totalCost = amountOfCupcakes * costPerCupcake;

document.write(totalCost);

10

16. Now right under the line document.write(totalCost) add the line:

document.write("totalCost");

so your code should look like this now:

17. Reload your webpage in the browser and watch what happens. Notice that if you put quotes

around text (even if it is a variable name) it displays the text exactly, not the value inside the

variable. So if you want to display a variable, do NOT put quotes around it. If you want to display

text, do put quotes around it.

18. Now let us make the output a bit nicer, update your JavaScript file so it looks like this:

19. Reload the HTML and observe the difference.

20. Figure out how to modify your program (change something in the .js file) so that cupcakes are

now 4.50 per cupcake.

21. We still have one BIG problem. Right now, no matter what value the user puts in our textbox,

our script always only calculates for the initial value of 1 cupcake. Try putting 3 in the textbox

and press the button. Notice that it still just displays the cost for the default value of 1 cupcake.

To fix this issue we need to change the tag for the button, so that when the button is clicked it

does “something”. We will give the name of the “something” that it does: calcCost. In your

HTML file, change the Calculate Cost button tag so that it now looks like this (new part is

indicated in red):

<button onclick="calcCost()">Calculate Cost</button>

Remember JavaScript syntax must be precise, so make sure you type the line exactly as it

appears above.

var costPerCupcake;

var amountOfCupcakes;

var totalCost;

costPerCupcake=3;

amountOfCupcakes =document.getElementById("amtToGet").value;

totalCost = amountOfCupcakes * costPerCupcake;

document.write("<p><h1>Total Cost: ");

document.write(totalCost);

document.write(" dollars </h1></p>");

var costPerCupcake;

var amountOfCupcakes;

var totalCost;

costPerCupcake=3;

amountOfCupcakes =document.getElementById("amtToGet").value;

totalCost = amountOfCupcakes * costPerCupcake;

document.write(totalCost);

document.write("totalCost");

11

22. Try reloading your HTML page, notice that it still does not work. This is because we instructed

the system to do calcCost when the user clicks on the button. calcCost is called a function (a

function is just a little task) BUT we have not yet declared/indicated what the function called

calcCost should do. We will do that in four steps:

a. Create the header for the function

b. Use the opening curly brace to show where the group of statements begin

c. Put the body of the function next (the series of instructions for the task, you have

already written them!)

d. Use the closing curly brace to show where the group of statements ends

23. The steps are shown below. Update your calculating.js file so that it looks like this (the new

parts are indicated in red):

24. Now try reloading it in the browser and make sure your program correctly calculates the cost

based on the number of cupcakes (it might open a new page for this info, we will look at how to

fix this type of problem later on).

CONGRATULATIONS! You have written your first truly functional piece

of JavaScript code, you are now a programmer! In order to be a GOOD programmer, you should

add some comments and properly indent your code. This will not change how your program

functions, but it will make the program a lot easier to understand. Think of it as a dirty

refrigerator. Cleaning it up does not change the way the fridge works, but it makes it much

easier to use ! We always indent the code a few spaces between the opening function

functionName() { and the closing } as it makes our code easier to read.

function calcCost() {

var costPerCupcake;

var amountOfCupcakes;

var totalCost;

costPerCupcake=4.5;

amountOfCupcakes =document.getElementById("amtToGet").value;

totalCost = amountOfCupcakes * costPerCupcake;

document.write("<p><h1>Total Cost: ");

document.write(totalCost);

document.write(" dollars </h1></p>");

}

12

25. Comment and indent and put white space (blank lines to make it more readable) into your code

so that it looks like this:

Congratulations, you now can:

Declare a variable

Assign a numeric value to a variable

Assign a mathematical expression to a variable using arithmetic operators

Output the value in a variable

Identify when the document.write will display the contents (value) of the variable and

when it will display text.

Use the Inspect Element feature in Google Chrome to find which line of your JavaScript

code is causing an error.

Add comments/white space/indentation to your code

function calcCost() {

//This function will calculate the cost of cupcakes based on what the number the user

//enters in the text box

//Variable Declaration

var costPerCupcake;

var amountOfCupcakes;

var totalCost;

//do calculations

costPerCupcake=4.5;

amountOfCupcakes =document.getElementById("amtToGet").value;

totalCost = amountOfCupcakes * costPerCupcake;

//display answers

document.write("<p><h1>Total Cost: ");

document.write(totalCost);

document.write(" dollars </h1></p>");

} //end of function

13

Exercise 3 – Working with String Variables

In the previous example, we were working with numeric variables (i.e., variables that hold numbers).

We can also use variables to hold textual data. These types of variables are called string variables. We

will add string variables to improve our cupcake webpage.

1. Download the following 2 files and save them in your lab3 folder:

http://www.csd.uwo.ca/~lreid/cs1046/labs/lab3/lab3ex3a.html

http://www.csd.uwo.ca/~lreid/cs1046/labs/lab3/calculatingtwo.js

2. Open the HTML file in the browser to make sure it works and then in order to edit the files, open

them both in Notepad.

3. In calculatingtwo.js, make a variable to hold the type of currency. Add the following line to

declare a string variable right underneath the other declarations:

var currencyType;

4. Replace the line that says document.write (“ dollars </h1></p>”); with these three lines:

currencyType="Euros";

document.write(currencyType);

document.write("</h1></p> ");

5. Notice that you must always put quotes around your strings when putting them in a variable.

Reload your webpage and make sure it says Euros now instead of dollars.

6. Figure out how to modify your variable so that the currency is now Yen

There is just one string operator, the + symbol. This symbol is called the concatenation symbol

and it joins strings together. For example, if you had:

var firstName;

var lastName;

var wholeName;

firstName="Homer";

lastName = "Simpson";

wholeName=firstName+lastName; //Line A

Then the variable wholeName would contain the string: "HomerSimpson". This might not be

exactly what you want; you probably would want a space between Homer and Simpson. There

are a few ways you could do that. We could change the last line above to this:

wholeName= firstName + " " + lastName;

or we could create another variable and do the following:

var space= " ";

wholeName=firstName+space+lastName;

14

7. NOTE: there are some tricks to watch out for with strings and the concatenation operation (+),

look at the following variables. Here is code with different scenarios of what can happen using

the + operator:

var w;

var x;

var y;

var z;

w=7;

x=9;

y="7";

z= "9"

var result;

result = w+x; //result would the number 16

result = y+z; //result would have the string "79"

result = w+y; //result would have the string "77" because if one of the variables on either side of

the + is a string, then the answer is a string

result=w*x; //result would have the number 63;

result=y*z; //ERROR (you cannot multiply strings)

8. NOTE: there are also some tricks to watch out for with quotes, for example:

var firstName;

var lastName;

firstName= "Maggie"; //double quotes are fine as long as you use at both ends of string

lastName='Simpson'; // single quotes are fine as long as you use at both ends of string

firstName="Maggie'; //ERROR, can’t mix up the set of quotes, just use one or the other

firstName= "Maggie's Book”; //This is okay, this is how you put an apostrophe (single quote) in a

string, need to use double quotes on the outside

firstName= '"To be or not to be" by William Shakespeare '; // this is okay, this is how you put

double quotes in a string, need to use single quotes on the outside

9. Go back to your calculatingtwo.js file, and just below the comment //display answers put the

tags into a string variable called myOpenTags and myCloseTags as follows:

var myOpenTags;

var myCloseTags;

myOpenTags="<p><h1>";

myCloseTags="</h1></p>";

10. Create a string variable (give it a reasonable name) and store the phrase Total Cost: into it.

11. Replace the document.write() lines so that they ONLY use variables and so that the output looks

correct (e.g. you have 3 Yen, NOT 3Yen)

12. Make one more variable called myProgram and put the value "YourName's first program! " into

it. Make sure the apostrophe is displayed. Use the document.write command to have this

statement appear after the total cost of the cupcakes.

13. Reload your program into your browser to make sure it works.

15

In addition to numeric and string variables, JavaScript also allows the creation of Boolean

variables. Unlike a string variable or a numeric variable that can contain one of an almost infinite

number of values, a Boolean variable can only be one of two values: true or false. This variable

type will be discussed in detail in a future lab.

Congratulations, you now can:

Assign a string value to a variable

Concatenate strings

Put an apostrophe inside a string

Put double quotes inside a string

Output a string

16

Exercise 4 – Creating arrays, assigning arrays, accessing arrays

1. An array is a special type of variable that can hold more than one value. Arrays can be used in

situations where a programmer needs to store related (similar) items collectively. For instance if

you wanted to keep track of grocery items, rather than having the code shown below in box A,

you could replace it with the code shown in box B.

Think of an array as a list of values. Arrays are one of the most useful data structures that

computer scientists have. Let’s make a list of cupcake flavours. Open the webpage you were

just working on or use this one: http://www.csd.uwo.ca/~lreid/cs1046/labs/lab3/lab3ex4a.html

and copy it to your lab3 folder and open the file in Notepad. Right after the line where you

create a button in the HTML file but above the <script> tag, add the following code to create a

dropdown list of cupcake flavours:

2. Now save your file, open it in the browser and make sure the dropdown box worked.

3. Copy the file http://www.csd.uwo.ca/~lreid/cs1046/labs/lab3/calculatingthree.js to your lab3

folder and open it in Notepad.

4. In your HTML file, change the <script> tag so that it points to calculatingthree.js

5. Edit the calculatingthree.js file and in it declare an array to hold the cupcake types by adding the

following line just below your other 3 declarations:

var cupcakeTypes=[];

6. Then immediately after the declaration you just made, add the following line to fill the array

with cupcake flavours:

cupcakeTypes=['Red Raspberry','Berry Berry Blueberry','Cherry Chocolate'];

<h1>Our Flavours</h1>

<select id="cupcakeTypes">

<option value="rasp">Raspberry</option>

<option value="blue">Blueberry</option>

<option value="choco">Chocolate</option>

</select>

CODE A

var item1;

var item2;

var item3;

var item4:

var item5;

item1=’eggs’;

item2=’cheese’;

item3=’milk’;

item4=’bread’;

item5=’cookies’;

CODE B

var items:

items =[‘eggs’,’cheese’,’milk’,’bread’,’cookies’];

17

7. Reload your HTML file and make sure your button still works but notice that nothing else has

changed. This is because all we have done is put the values in the array, we have not used them

yet. Now that our array is holding our values, we will at some point want to access these values.

For now, because we do not have enough tools to do much with our array, all we are going to do

is display each array value. To access an individual value in an array, you have to use an index.

The index is a value that tells us which item to access. The index is always an integer value and

always surrounded by square brackets. Computer Scientists like to start counting at 0, so

cupcakeTypes[0] would be the very first value (in our case: Red Raspberry).

8. Add the following 2 lines to calculatingthree.js near the end of the code, just before the } :

//display types of cupcakes

document.write( cupcakeTypes[0] );

9. Save your calculatingthree.js file, reload your HTML file again and click on the button and make

sure the first type of cupcake appears.

10. Now add 2 more lines to the calculatingthree.js file that will make the other 2 types of cupcakes

show up on the screen. Remember that the index value starts at 0, so if you want to see the

third type of cupcake, the index will NOT be 3. Figure out what value it should be.

11. Save your calculatingthree.js file and reload your HTML file and click on the button to make sure

the three types of cupcakes appear on the screen. In a few weeks you will learn how to access

each item in an array quickly, so that you could display 1000s of cupcake types by only writing 3

lines of code!

12. You can also assign just one item in an array individually. We will now add one more cupcake

type, a fourth type (so index would be [3]), in your calculatingthree.js file. You will assign this

value near where you are displaying the values, rather than in the line where you put all the

values in initially. Add the following line right after the location where you just displayed the

third cupcake:

cupcakeTypes[3]="Your Western User Id’s Tootie Fruity";

13. Add a line to create a fifth cupcake type in the array and give it the value of your favourite

cupcake flavor.

14. Add a line that will change (overwrite the old value with this new value) the value in the second

item of the array to be "Butter Pecan"

15. Now add the line:

document.write(cupcakeTypes.length);

16. Save your .js file and reload your .html file and notice that the .length property of an array will

tell you how many items are in an array. This number should be five.

17. Add a comment to the top of the calculatingthree.js file that has Code written by your name

(userid) at the top, for example:

//Code written by: Homer Simpson (hsimpo44)

18. Now just for a bit more practice, declare a string variable called allTheTypes near the top of the

file with all the other declarations. Then move down to just after where you put a value in the

fifth element in the array (the one at [4]) and write the code that will concatenate the 5 cupcake

types from the array together and store them all together in that single string variable with <br>

codes between them. Thus, the line should START with this:

18

allTheTypes=cupcakeTypes[0] + "<br>" + ….. ; //you figure out what to put for the ….

19. Then add the statement:

document.write(allTheTypes);

This statement should display something similar to the following on the page:

Congratulations, you now can:

Declare a variable that will hold an array

Fill the values of the array in a single line

Fill the value of one item of the array

Access a specified item first item in the array using the correct index value

Use the length property to get the number of values in an array

Change the value of an array item

HAND THIS WORK INTO OWL IN ORDER TO GET YOUR LAB MARK.

1. Go into owl and for Lab 3, submit your last file, the one called lab3ex4a.html AND submit the file

calculatingthree.js so that we can check that your code is working properly.