1. (50 points) The textarea to the left contains
XML for the TOP 100 SMALL TOWNS & CITIES IN THE USA (from here).
The DTD is:
<?xml
version="1.0"?> <!DOCTYPE
besttowns[
<!ELEMENT
besttowns( state + )>
<!ELEMENT state
(statename, town + )>
<!ELEMENT statename (#PCDATA)>
<!ELEMENT town (townname, reason, population)
<!ELEMENT townname (#PCDATA)>
<!ELEMENT reason (#PCDATA)>
<!ELEMENT population(#PCDATA)>]
In the function named p1, assume the code to load the XML data from the textarea into
the root object in javascript has already been written. (Don't write this code, just start using root).
1. Create a table that shows the 100 best small towns:
place each of the statename values on a row by itself with colspan='3'
set the background color of this row to 'lightgray'
following the statename row, for each town in the state, make a row that has 3
columns that contain: townname; reason; and population 2. count the number of towns that appear in the state and remember the count and
the state with the largest count
3. after the table has been produced, display the state name with the most towns in
the table and the number of towns in that state.
NOTES: the number of states is: root.childNodes.length the state loop is: for ( i=0; i < root.childNodes.length; i++ ) the statename is: root.childNodes[i].childNodes[0].childNodes[0].nodeValue the town loop is: for( j=1; j < root.childNodes[i].childNodes.length; j++ ) townname is: root.childNodes[i].childNodes[j].childNodes[0].childNodes[0].nodeValue reason is: root.childNodes[i].childNodes[j].childNodes[1].childNodes[0].nodeValue population is: root.childNodes[i].childNodes[j].childNodes[2].childNodes[0].nodeValue