JavaScript loops exercise

Download this page and open with Dreamweaver. Or right click and select "View Source", then cut and paste the code to Dreamweaver.

Task 1

Use the place indicated in the code for this JavaScript exercise.

Construct an array containing the months of the year as strings. Using a for loop itterate over this printing each month to the page. Surround each month with a pair of HTML <p> tags, so what you are printing into the page is, for example: <p>January</p>.

You will need to use concatenation and dynamic page techniques for this in addition to the loop.

Extension

  1. Construct 2 arrays, one containing the teams from last year's premiership season and another one containing the points that they scored last season. Make sure these are in the order they finished the season from first to twentieth.

    Write a for loop which itterates over these arrays and creates a HTML table containing the final premiership football standings from last season. This table must contain three columns labled "Position", "Team" and "Points".

    A suggested approach would be to:

    1. Declare a variable to hold the HTML string. Assign to this a string containing a <table> tag and a table heading row which names each column of the table. You may need to refresh your memory about how HTML tables are coded.
    2. Create your for loop which loops over your arrays creating a new string containing the position, team and points for each row and also containing the HTML table code needed to create the row. Concatenate this new row to the variable you have already declared with each itteration of your for loop.
    3. Concatenate the final closing HTML tags, inlcuing </table> to your variable.
    4. Print this variable into this HTML page using one of the methods discussed on the dynamic pages section.

  2. Using the modulus operator (as shown below) to determine if each row is odd or even. Add a CSS class attribute to each <tr> tag with either "odd" or "even" as a value depending on whether the modulus operator returns 1 or 0. Use an if / else block inside the for loop to acomplish this.

    Next add a <style> block to the head of this page and code two CSS classes, one for tr.odd and one for tr.even, use these to add differing background colours to the odd and even rows.

    var modulus = rowNum % 2;