THE WALL Floors Windows per Floor

1. (50 points) Write a javascript function named p1 that creates a picture of a multi-floor brick wall with rows of windows. The sub uses two image files: (1) "window.jpg" which is 100 pixels wide and 150 pixels tall; and (2) a background image "brick3.gif". The form to the left is named f1 and contains two textboxes: (1) Floors (named f); and (2) Windows per Floor (named w). The sub creates a page on-the-fly that contains a <DIV> block with the following style: <div style='border:2px solid black;width:widthpx;heightpx;background-image:url(brick3.gif);position:absolute;Top:0px;Left:0px;'> The value of height is: the number of floors times 300 (i.e., f times 300). The value of width is: the number of windows per floor times 100 plus (the number of windows per floor + 1 ) times 100 (i.e., w * 100 + (w + 1 ) * 100 ) Window images (i.e., "window.jpg") have style attributes: "position:absolute"; "Top"; and "Left". Windows are centered vertically on each floor (i.e., 75 pixels from the top and bottom of each floor). Windows are spaced equally horizontally across the floor with 100 pixel spacing between the windows and 100 pixels to left of the first window and 100 pixels to the right of the last window on the floor. Show the javascript for p1. Show NO HTML.

<XML id="music_xmldata"> <?xml version="1.0"?> <!DOCTYPE my_music [ <!ELEMENT my_music (album+)> <!ELEMENT album (artist,title,year,pub,song+)> <!ELEMENT artist (#PCATA)> <!ELEMENT title (#PCATA)> <!ELEMENT year (#PCATA)> <!ELEMENT pub (#PCATA)> <!ELEMENT song (song_title,time)> <!ELEMENT song_title (#PCDATA)> <!ELEMENT time (#PCDATA)>] <my_music> <album> <artist>Bob Dylan<</artist> <title>Modern Times</title> <year>2006</year> <pub>Sony BMG</pub> <song><song_title>Thunder on the Mountain</song_title> <time>5:50></time></song> <song><song_title>Spirit on the Water</song_title> <time>7:42></time></song> <song><song_title>Rollin and Tumblin</song_title> <time>6:01></time></song> ...lotsa lines omitted... </album><album> <artist>Bob Dylan</artist> <title>Love and Theft</title> <year>2001</year> <pub>Sony BMG</pub> <song><song_title>Tweddle Dee and Tweedle Dum</song_title> <time>4:46></time></song> <song><song_title>Missisippi</song_title> <time>5:21></time></song> <song><song_title>Summer Days</song_title> <time>4:52></time></song> ...lotsa lines omitted... <song><song_title>Po Boy</song_title> <time>3:05></time></song> <song><song_title>Cry a While</song_title> <time>5:05></time></song> <song><song_title>Sugar Baby</song_title> <time>6:40></time></song> </album> </my_music> </XML>

2. (50 points) My music inventory is stored in XML and is embedded in an HTML page with an XML tag with id=music_xmldata (the DTD and a portion of the XML data are shown to the left). When this button is clicked, a javascript function named p2 is called. This function produces a new page on-the-fly which is a table showing my entire music inventory in the format shown below: MY MUSIC INVENTORY Artist: Bob Dylan Modern Times Sony BMG, 2006 Thunder on the Mountain 4:46 Spirit on the Water 5:21 Rollin and Tumblin 4:52 ...lots of lines omitted... Po Boy 3:05 Cry a While 5:05 Sugar Baby 6:40 Album Count = 2 Song Count = 22 This two-column table has: A heading row ("MY MUSIC INVENTORY") in bold with a gray background. For each album: A row in bold with "Artist: " followed by the artist's name. A row with the album title in the first column in bold, then publisher and year separated by a comma in the second column of the same row. A row for each song with the song title in the first column and the playing time in the second column. A row with "Albums Count = " followed by the count of albums in bold. A row with "Song Count = " followed by the count of songs in bold. The number of albums is root.childNodes.length; the artist is root.childNodes(i).childNodes(0).text; the title is root.childNodes(i).childNodes(1).text; the pub is root.childNodes(i).childNodes(2).text; the year is root.childNodes(i).childNodes(3).text; where i is the album number. The number of albums is root.childNodes.length. root.childNodes(i).childNodes(j).childNodes(0).text is the song's title; root.childNodes(i).childNodes(j).childNodes(1).text is the song's play time, where j is the song; j starts at 4 and continues through all songs on the album, so long as j < root.childNodes(i).childNodes.length. Show the javascript for p2. Show NO HTML. Show NO XML.