This is the span block with id="fred" | 1. (50 points) The data in the two tables
(below right) specify how to draw the images that make up characters that appear on a digital clock face.
| |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
The textbox above named t is in a form named f1. When the button labelled "Show Time" is clicked a javascript function named p1
is executed. Data from the tables above are specified in the following six javascript declarations in p1 (don't write these).
dchars = "0123456789: " tp = Array(2,0, 0,30,31,31,59,15) lf = Array(0,1,29, 0, 1,29, 0,15) 1. retrieves the time value from the textbox named t1; 2. constructs several HTML image tags for each character 3. accumulates these image files in a string (named os); 4. when done, displays in the string of image tags (i.e., os) in the SPAN block with id="fred" shown above. Each character in the textbox (either: 0,1,2,3,4,5,6,7,8,9,0,:, or a blank space) is created by using some of the six images shown above to the right. Which ones are used are shown by the "y" or "n" below each character in the table above (in the program use the let array). Each HTML image tag has: (a) a specific file name (i.e., src from the imgval array); (b) either a width OR height attribute (i.e., from the hw array); (c) style="position:absolute;" AND ; (d) a value for top (i.e., from the tp array); (e) a value for left (i.e., from the lf array); and Each image looks like this: <img src="[value from imgval array]" [value from the hw array] style="position:absolute;top:[value from tp array]px;left:[value from the lf array]"> The time characters start at 30 pixels from the left of the page. Each time character starts 40 pixels further to the right than the previous one (so the first character starts at left=30, the second at left=70, the third at left=110...etc.). All time characters start 90 pixels from the top of the page. Write only the javascript code for p1. Show NO HTML. |
<XML id="t500"><?xml version="1.0"?>
<!DOCTYPE top500highschools [ <!ELEMENT top500highschools(school+)> <!ELEMENT school (rank,name,city,state,str,gr,tests,cb,sat,ns)> <!ELEMENT rank (#PCDATA)> <!ELEMENT name (#PCDATA)> <!ELEMENT city (#PCDATA)> <!ELEMENT state (#PCDATA)> <!ELEMENT str (#PCDATA)> <!ELEMENT gr (#PCDATA)> <!ELEMENT tests (#PCDATA)> <!ELEMENT cb (#PCDATA)> <!ELEMENT sat (#PCDATA)> <!ELEMENT ns (#PCDATA)> ]> <top500highschools> <school><rank>1</rank><name>School of Science and Engineering Magnet</name> <city>Dallas</city><state>TX</state><str>21</str><gr>100</gr> <tests>17.2</tests><cb>100</cb><sat>1786</sat><ns>2.874</ns></school> <school><rank>2</rank><name>School for the Talented and Gifted Magnet</name> <city>Dallas</city><state>TX</state><str>15</str><gr>100</gr> <tests>16.7</tests><cb>93</cb><sat>1885</sat><ns>2.807</ns></school> <school><rank>3</rank><name>BASIS Tucson</name> <city>Tucson</city><state>AZ</state><str>12</str><gr>100</gr> <tests>13.2</tests><cb>96</cb><sat>1854</sat><ns>2.531</ns></school> <school><rank>4</rank><name>Stanton College Preparatory</name> <city>Jacksonville</city><state>FL</state><str>22</str><gr>99</gr> <tests>11.8</tests><cb>99</cb><sat>1864</sat><ns>2.175</ns></school> ...lotsa schools NOT shown here... <school><rank>497</rank><name>George Washington</name> <city>San Francisco</city><state>CA</state><str>34</str><gr>95</gr> <tests>1.9</tests><cb>91</cb><sat>1441</sat><ns>0.092</ns></school> <school><rank>498</rank><name>South Hamilton</name> <city>Jewell</city><state>IA</state><str>12</str><gr>97</gr> <tests>0.2</tests><cb>87</cb><sat>NA</sat><ns>0.084</ns></school> <school><rank>499</rank><name>Bartow IB School, Summerlin Academy</name> <city>Bartow</city><state>FL</state><str>13</str><gr>90</gr> <tests>2.7</tests><cb>86</cb><sat>1666</sat><ns>0.082</ns></school> <school><rank>500</rank><name>New Century Technology</name> <city>Huntsville</city><state>AL</state><str>18</str><gr>95</gr> <tests>1.3</tests><cb>88</cb><sat>NA</sat><ns>0.081</ns></school> </top500highschools> </XML> |
2. (50 points) An XML data island with id=t500 contains
information on Newsweek's 2011 "Top 500 US High Schools" in the USA. The DTD and a small partial list of the data is shown to the left.
The ten tags for each school are: (1) Rank; (2) Name; (3) City; (4) State; (5) Student Teacher Ratio; (6) Graduation Rate; (7) AP/IB Tests; (8) % College Bound; (9) Average SAT; (10) Newsweek Score.
Using this XML data, write the javascript program named p2 to perform four tasks:
there are root.childNodes.length school tags When this button is clicked, the javascript function named p2 is executed and it produces the output for the four required tasks above on a new HTML page (i.e., on-the-fly). Show NO HTML. Show only the javascript for p2.
Data from here: |