[Solved] SOLVED:Homework 3: HTML and CSS Exercise

1. Objectives• Become familiar with the DOM paradigm;• Use an existing XML parser;• Transform the content of an XML document into an HTML page.2. DescriptionYou are required to write a HTML/JavaScript program, which takes the URLof an XML document containing Cable Network company information,parses the XML file, and extracts the list of cable networks, displaying themin a table. The JavaScript program will be embedded in an HTML file so thatit can be executed within a browser.• Your program should display a text box to enter the XML file name asshown below on Figure 1. On clicking the “Submit Query” button,your program should display the table as shown below, Figure 2. If thetext box is left empty and Submit Query is clicked, an appropriateerror message must be shown.!Figure 1: Initial Page• Once the XML file downloads, a JavaScript function within the HTMLfile parses the XML document that was passed as an input to thepopped up window.• After parsing the XML document, a table should be displayed!1consisting of the data for all Cable Networks companies that arecontained in the XML file. For example, given the following XMLdocument:http://cs-server.usc.edu:45678/hw/hw4/networklist.xmlthe table below should be displayed:!Figure 2: Table containing stocks from networklist.xmlHere is a version of the networklist.xml file containing the data that isdisplayed above: <Workbook<Table<Header<DataNetwork</Data<DataOwner</Data<DataFeeds</Data<DataNotes</Data<DataHomePage</Data<DataLogo</Data</Header<Row<NetworkAMC</Network<Feeds</FeedsNotes<HomePagehttp://www.amctv.com/</HomePage!2<Logohttp://cs-server.usc.edu:45678/hw/hw4/AMC_logo_2013.png</Logo</Row<Row<NetworkBravo</Network<Feeds</Feeds<HomePagehttp://www.bravotv.com/</HomePage<Logohttp://cs-server.usc.edu:45678/hw/hw4/bravo.png</Logo</Row<Row<Feeds</FeedsComedy Channel, owned by Time Warner. (English) and (Spanish) audio feed</Notes<HomePagehttp://cc.com/</HomePage<Logohttp://cs-server.usc.edu:45678/hw/hw4/ComedyCentral.png</Logo</Row</Table</Workbook3. Error HandlingIn case of a parsing error, your program should show an alert box indicatingan error was detected. For example if you try to load the incorrectlyformatted XML file:http://cs-server.usc.edu:45678/hw/hw4/invalid.xmlthen you should show an alert box if the XML file is not valid, as in thefollowing figure:!3!Figure 3: Error generated from invalid.xml in FirefoxAnother error condition that should be checked for is an XML filecontaining NO cable network companies. An example of an XML fileswhich does not contain company entries: <Workbook<Table<Header<DataNetwork</Data<DataOwner</Data<DataFeeds</Data<DataNotes</Data<DataHomePage</Data<DataLogo</Data</Header</Table</WorkbookIn addition, you program should handle the case when the XML file does notexist. A proper message should be displayed.The schema of the input XML files won’t change. We won’t test the casewhere the order of tags is changed or one of the tags is missed. In otherwords, every Row always contains the sub-tags: Network, Owner, Feeds,Notes, HomePage, and Logo in the “same” given order. Note that inside theFeeds tag, there may be ZERO or more Feed tags.If the value of a tag is empty, you should display a blank cell or N.A.No other error conditions need be checked. In all cases if an error is foundyour program should show an alert box indicating the error was detected.4. Hints• Step 1: Writing Your HTML/JavaScript program – Using the DOMParser!4Here’s how you could use the Microsoft DOM API and the MozillaDOM API (used in Firefox) to load and parse an XML document intoa DOM tree, and then use the DOM API to extract information fromthat document.Now you can generate the HTML table from the DOM tree. You canassume that every xml file will have identical tag names. However,the company entries may occur in any order.Your task is to write a program that transforms this type of XML fileinto the table as shown above.For example you can access the child nodes of the documents asfollows:footb = xmlDoc.documentElement.childNodes;Note that unlike the Java-based DOM, which provides methods suchas getChildNodes( ) and getNodeType( ) that return respectively a!5node list of children of a current node and the type of a node, with theDOM you have to access the element properties directly, as in:footbNodeList = footb.item(i).childNodes;if (footbNodeList.item(j).nodeType == ELEMENT_NODE)Below is the link to the web page that demonstrates how to handlewhite spaces in Mozilla:http://developer.mozilla.org/en/docs/Whitespace_in_the_DOM• Step 2: Display the Resulting HTML DocumentYou should use the DOM document.write method to output therequired HTML.• Step 3: Use JavaScript control syntaxThe only program control statements that you will need to use for thisexercise are the “if” and the “for” statements. The syntax of bothstatements is practically identical to the syntax of the correspondingstatement in the C, C++ and Java languages, as in:if (footbNodeList.item(j).nodeName==”Logo”) {// do stuff}for (j=0;j<footbNodeList.length;j++) {// do more stuff}Please make a note of the following issue:Cross-Site Scripting (XSS):JavaScript cannot call the resources from another domain. This is calledcross side scripting which is not allowed in browsers. Therefore, you must!6put your XML files and your script in the same domain. Please make sure,when you are testing your implementation, to place both the HTML file andthe XML file on your local machine IN THE SAME FOLDER. The files canbe copied from here:http://cs-server.usc.edu:45678/hw/hw4/invalid.xmlhttp://cs-server.usc.edu:45678/hw/hw4/networklist.xmlWindow.open() method must be used to pop up a new window which woulddisplay the final widget.Image files can be either local or remote, as these files do not exhibit thecross-site scripting issue.USC Disclaimer:You should avoid displaying the USC disclaimer in your pages. Otherwise,this will result in a 0.5 point penalty.Scrollable Window:The popup window should be scrollable so the user can read all recordslisted in the window.6. Material You Need to SubmitOn your course homework page, your link for this homework should go to apage that looks like the one displayed in the Figure on page 1. This pageshould include your entire JavaScript/HTML/CSS program in a singlefile. Also you should submit your source code electronically to the csci571account so that it can be graded and compared to all other students’ code viathe MOSS code comparison tool. If your submission is composed ofmultiple files, 3 points will be deducted.!7