Assignment 3
Due Mon., October 11, 2010
Summary
In this assignment, you will write JavaScript code to generate a list of numbers and process them. As a result, you will modify the HTML document that is associated with the JavaScript in order to display some results. This will look very much like the JavaScript examples you have seen in class already.
What To Do
- Create a folder on your own computer.
- Using a secure file tranfer program, download all of the files
needed for assignment 3.
These files are located at the following filepath on login.cs.unc.edu:
/afs/cs.unc.edu/proj/courses/comp416-f10/public_html/assignments/a3/a3-files/- One of the files in this directory is called a3.html.
If you look at it, you will see that it is a simple XHTML with a single <div> that has its id attribute set to "result". Again, this is very much like all of our in class examples. This XHTML file is linked to two JavaScript files and to a CSS stylesheet.
- The first JavaScript file is "prototype.js".
You do not need to do anything with this file. It is needed in order to make the document.observe() method work.
- The second JavaScript file is "a3.js".
This is where your JavaScript code is going to go. I describe exactly what your code needs to do below.
- The CSS stylesheet is called "a3.css".
It is currently empty, but you will need to modify it in order to complete the assignment.
- One of the files in this directory is called a3.html.
- Edit a3.js to complete the function gen_list()
so that it will generate a list of
20 random integers between 1 and 100.
Notice that a3.js starts off with a function definition for gen_list(). The function definition is currently empty (it just contains a few comments). Insert code into the function body in order to generate an array of 20 random integers between 1 and 100 and then return that array. In order to do this, you will need to make use of the following methods in the built-in JavaScript Math object:
- Math.random()
This method returns a random floating point number between 0.0 and 1.0. - Math.floor()
This method rounds a number down to the closest integer.
- Math.random()
- Insert code into the init() function in order to do the following:
- Use your newly completed gen_list() function to generate a list of random numbers.
- Construct a string to build the following XHTML:
- A header that says "A List of Random Numbers"
- Following the header, an unordered list with each of the
generated numbers as list items.
Numbers that are odd should be colored red and numbers that are even should be colored green. Numbers that are greater than 50 should be in a bigger font than numbers that are less than 50. In order to achieve this, set the class attribute of the list items in the unordered list you are generating as appropriate and edit a3.css to indicate the appropriate styling.
- A header that says "Statistics"
- Following this header, an unordered list with the following:
- A report of the minimum number in the list.
- A report of the maximum number in the list.
- A report of the number of odd numbers in the list.
- A report of the number of even numbers in the list.
- A report of the list average.
- Insert your XHTML into the <div> on the page. This is similar to all of our in class examples.
- Create an "a3" directory in your class webspace and upload all of the files to this directory.
When you are done, it should generate a page that looks like this.
HINT: To test if a number is odd or even, use the modulo operator '%' with 2 and test if the result is 1 or 0. For example, if the number you want to test is in the variable num, then the expression num%2 will be 1 if the number is odd and 0 if the number is even.