CMSC 104 Fall 2009

Arrays Lab

Objectives

• To learn how to work with arrays in JavaScript
• To practice using functions that return arrays

The Lab Assignment

• One page prompts the user to enter their full name and prints it on the web page in a particular format.(Beginner)
• The second page emulates the rolling of two die everytime a button is clicked or the page is loaded.(Intermediate)
• The third page asks you to find the number of items you purchased for a particular price.(Advanced)

Web page one

1. Split is a method that is called by a string object and returns an array of Strings. A good reference for split can be found by going to http://www.w3schools.com/jsref/jsref_split.asp

2. Split can have no arguments, one arguments, or two arguments. See the following example.

   var str="How are you doing today?";
   
   document.write(str.split() + "<br />");
   document.write(str.split(" ") + "<br />");
   document.write(str.split("") + "<br />");
   document.write(str.split(" ",3));
         

3. The previous code generates the following output:

How are you doing today?
How,are,you,doing,today?
H,o,w, ,a,r,e, ,y,o,u, ,d,o,i,n,g, ,t,o,d,a,y,?
How,are,you
      

4. Using split, create a web page the prompts the user for their full name and then prints it in the format "lastname, firstname middlename".

Web page two

1. You will find six images of a die on the internet which represent the values 1- 6 at the following web site http://www.csee.umbc.edu/courses/undergraduate/104/fall09/ordonez/projects/die-images/. Create an array using the image names. Remember the images should be stored in the same location as the web page unless you want to use a relative or absolute path to access them.
2. Prompt the user for the number of dice they would like to roll.
3. Generate a random number between 1 and 6 for each die.The method for generating a random number in Java Script is below. You may want to consider using the Math.ceil() or Math.floor() functions for rounding.

var value = Math.random();
document.write(value + "<br />");
document.write(Math.ceil(value));

       

4. The previous code generates the following output:

0.11275787446612806
1
       

5. Display an image for each die that was rolled and then display the sum of all the dice. The code for inserting an image into a web page is below:

<img src="image1.gif"/>
	        

6. Sample Screen Shots

Web page three

You spent $80.45 on different quantities of three of your favorite things. Each one of your favorite things costs $6.99, $4.99, and $2.19. You bought a total of 15 items. Write a program using nested loops that can tell you how many items of each of your favorite things you bought and display result in a web page.