1. (50 points) The textarea (named toprr) shown to the left contains data on the "Top 500 Rock Songs" in a form named f1. The textarea has 500 song titles -- each with the following data (from DigitalDreamDoor.com):
1. Rank (a number from 1 → 500)
2. Song Title
3. Artist(s) [Note: if there is more than one version of the song, the artist's names are separated by commas)
The 3 items for each song are separated by the ";" character. Each song ends with a "*" character (except the last one which has nothing at the end).
retrieve the textarea data from toprr
split the data into 500 elements using the "*" character. Name this array s.
produce a 500 row table with 3 columns each by splitting each song's data (i.e., s[i]) into 3 values to be used in the row's cells)
if the Artist field contains a comma (indicating that multiple artist are to be listed):
1. make the table cell have a background color of "LightGray";
2. split the Artist string on the comma;
3. inside this 3rd column cell, place each artist on a line by itself
if the Artist field does NOT contain a comma, just place the artist name in the 3rd column cell and do not reset the background color
after the end of the table write the count of songs that have multiple artists.
When this button is clicked a javascript function named p1 is executed.
Write only the javascript for p1(). Show NO HTML. Do NOT provide column headings.
This is the DIV block with id="p1_out"
US Census, State Populations, 1870 and 1880
2. (50 points) The texarea to the left named ta2 is in a form named f2. The text inside the textarea is the summary for state populations for both 1870 and 1880. There are 38 states shown. Each state has three values:
1. state name followed by a ";"
2. state population in 1870 followed by a ";"
3. state population for 1880 followed by a "*" (except for the last one)
Assume there are the following four arrays defined in p2:
var sn = new Array ();
var p1870 = new Array ();
var p1880 = new Array ();
var pc = new Array();
When the button labelled "Execute p2" is clicked, the javascript function named p2 is executed. This function:
retrieves the data from ta2
for each state:
store the state name in the array sn
store the 1870 population in the p1870 array
store the 1880 population in the p1880 array
store the percent population change in the pc array
i.e., 100.0*( 1880 population - 1870 population )/ 1870 population
find the minimum and maximum percentage population change as the states are processed
then calculate: pixels_per_percent = 400.0 / maximum_percent_change [i.e., maximum_percent_change is the maximum value in the pc array]
create a 38 row by 6 column table where each row contains:
in columns 1 thru 5: (1) row number; (2) state name; (3) 1870 population; (4) 1880 population; (5) % population change
for column 6: calculate: pwide = pc[i] * pixels_per_percent, then show the following image:
<img src='green1x1.gif' height='10' width='the value of pwide'>
Place the table in the DIV with id="p2_out"> and after the table show:
the state name with the highest % population change and its % change AND
the state name with the lowest % population change and its % change
• Right justify the data in columns 3 through 5 and left justify the image in column 6.
• Display ALL percentages with ONLY two places to the right of the decimal
i.e., use: variable_name.toFixed(2)
•Show only the javascript for p2(). Show NO HTML. Show NO headings.