Prepare for your exams
Get points
Guidelines and tips
Sell on Docsity
Docsity AI

Prepare for your exams

Study with the several resources on Docsity

Earn points to download

Earn points by helping other students or get them with a premium plan

Guidelines and tips

Sell on Docsity

Docsity AI

Log in Sign up

Prepare for your exams

Study with the several resources on Docsity

Find documents

Prepare for your exams with the study notes shared by other students like you on Docsity

Search for your university

Find the specific documents for your university's exams

Docsity AINEW

Summarize your documents, ask them questions, convert them into quizzes and concept maps

Explore questions

Clear up your doubts by reading the answers to questions asked by your fellow students

Earn points to download

Earn points by helping other students or get them with a premium plan

Share documents

20 Points

For each uploaded document

Answer questions

5 Points

For each given answer (max 1 per day)

All the ways to get free points

Get points immediately

Choose a premium plan with all the points you need

Study Opportunities

Choose your next study program

Get in touch with the best universities in the world. Search through thousands of universities and official partners

Community

Ask the community

Ask the community for help and clear up your study doubts

Free resources

Our save-the-student-ebooks!

Download our free guides on studying techniques, anxiety management strategies, and thesis advice from Docsity tutors

XML to HTML Conversion: Creating an Interactive Olympic Games Results Page, Assignments of Computer Science

University of Southern California (USC)Computer Science

The creation of an html/javascript program that takes an xml document containing the final results of selected sports at the 2008 olympic games, parses it, and displays the results in an interactive html page. Users can select a sport, view related events, and access event winner details, including name, country, timing, picture, and a youtube video.

Typology: Assignments

Pre 2010

Uploaded on 02/24/2010

koofers-user-p34 🇺🇸

10 documents

1 / 9

This page cannot be seen from the preview

Don't miss anything!

1

Homework: XML 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. Description

You are required to write an HTML/JavaScript program, which takes the URL of an

XML document containing the final results of selected sports at the 2008 Olympic

Games, parses the XML file, and displays results in an HTML document. The resulting

HTML document will display a selection list consisting of the names of the Sports and a

“Show Support Events” button. Clicking on the button will display another selection list

consisting of the names of different events for the Sport selected in the first selection list

and a “Show Event Winner” button. Clicking on this button will display information

about the winner of the event in an HTML table along with a picture and a video related

to the event or the athlete from youtube.com. The JavaScript program will be

implemented by embedding it in a HTML file, so that it can be executed within a

browser.

• Initially your program should display a single text box that allows the entering of

an arbitrary URL of an XML document containing selected results of the 2008

Olympic Games. The interface should look like the following Figure 1:

Figure 1. Initial web page

You should implement this form using only HTML.

• The form, when the “Submit Query” button is clicked, would call an

HTML/JavaScript function within the HTML file that parses the XML document

given as an input.

• After parsing the XML document, a new popup window should be displayed

consisting of a drop down selection list that should contain one entry for each

Discover Assignments of Computer Science University of Southern California (USC)

Partial preview of the text

Download XML to HTML Conversion: Creating an Interactive Olympic Games Results Page and more Assignments Computer Science in PDF only on Docsity!

Homework: XML 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. Description

You are required to write an HTML/JavaScript program, which takes the URL of an

XML document containing the final results of selected sports at the 2008 Olympic

Games, parses the XML file, and displays results in an HTML document. The resulting

HTML document will display a selection list consisting of the names of the Sports and a

“Show Support Events” button. Clicking on the button will display another selection list

consisting of the names of different events for the Sport selected in the first selection list

and a “Show Event Winner” button. Clicking on this button will display information

about the winner of the event in an HTML table along with a picture and a video related

to the event or the athlete from youtube.com. The JavaScript program will be

implemented by embedding it in a HTML file, so that it can be executed within a

browser.

• Initially your program should display a single text box that allows the entering of

an arbitrary URL of an XML document containing selected results of the 2008

Olympic Games. The interface should look like the following Figure 1:

Figure 1. Initial web page

You should implement this form using only HTML.

• The form, when the “Submit Query” button is clicked, would call an

HTML/JavaScript function within the HTML file that parses the XML document

given as an input.

• After parsing the XML document, a new popup window should be displayed

consisting of a drop down selection list that should contain one entry for each

Sport and a “Show Sport Events” button next to it, as shown in Figure 2. For

example, given the following XML document:

http://www-scf.usc.edu/~csci571/2008Fall/hw4/olympics.xml

your program should produce the web page shown in Figure 2 below.

• After selecting a Sport and clicking the “Show Sport Events” button, another

selection list consisting of the events related to the Sport selected in first selection

list and a “Show Event Winner” button should appear as shown in Figure 3.

• After selecting an event and clicking the “Show Event Winner” button, a table

should be displayed containing the details of the event winner including the name

of the event winner, winner’s country, the final timing of the event, the picture of

the athlete and a youtube.com video embedded in the last row of the table as

shown in Figure 4. The data shown in the table cells and the URLs for the pictures

and the videos are to be read from the XML document. You will have to embed

the video in the HTML page. See Section 3, Step 5 for details about embedding a

YouTube video in a webpage.

Figure 2. Selection list and “Show Sport Events” button generated after processing olympics.xml

• If the XML file is invalid (e.g. missing the closing tag or having tags that

overlap), an error message should be generated in a popup window as shown in

Figure 5.

Figure 4. Table containing event winner details shown after clicking “Show Event” Winner button

In case of a parsing error, your program should pop up the following web page:

Figure 5. Page generated from error.xml

For example, the error above is displayed when parsing the file:

http://www-scf.usc.edu/~csci571/2008Fall/hw4/error.xml

Since and Firefox DOM implementations do not contain the parseError object, you

should show an alert box if the XML file is not valid, as shown in the following Figure 6:

Figure 6. Error generated from error.xml in Firefox

3. Hints

• Step 1: Writing Your HTML/JavaScript program - Using the DOM Parser

IE and Firefox have a built-in DOM parser. Microsoft DOM implementation is

part of Microsoft XML Core Services (MSXML). An introduction to the

Microsoft DOM can be found at:

http://msdn.microsoft.com/library/default.asp?url=/library/en- us/xmlsdk/html/a09c098b-7e5a-45ff-b5ad-bc910f736a3f.asp

The set of DOM enumerated constants can be found at:

http://msdn.microsoft.com/library/default.asp?url=/library/en- us/xmlsdk/html/e94d1cdf-3d7f-4ac0-8c51-a17d2801519c.asp

Please note that since the MS XML parser does not define the DOM constants as

in Node.ELEMENT_NODE, you will have to define them in your code, as in:

ELEMENT_NODE = 1;

The set of DOM properties, methods and events can be found at:

http://msdn.microsoft.com/library/default.asp?url=/library/en- us/xmlsdk/html/d051f7c5-e882-42e8-a5b6-d1ce67af275c.asp

Here's how you could use the Microsoft DOM API and the Mozilla DOM API

used in Firefox to load and parse an XML document into a DOM tree, and then

use the DOM API to extract information from that document.

** ... ... .. . ... ... ... **

**... ** **... ** **... ** .. . **... ** **... ** **...

... **

Your task is to write a program that transforms this structure into HTML, where

first level tags contain the results for each sport and the first tag at the second

level for each Result will have the name of the Sport in the tag name,

e.g.Swimming. All the tags appearing at the second level

, and the six tags , , , ,

and appearing at the third level are fixed and your program

may assume that in a certain XML document, the entries at level 2 and 3 are

always in the same order, and that no entries are missing. However, you do not

know how many records of Result and events may occur in the file. When

producing the table, your program should use the tag names “name”, “winner”,

“country”, “final” and “picture” as the table headers as shown in Figure 3. Please

note, the headers should be dynamically populated from the XML file tags and

not from some constant strings written in the code. Please also note that after

clicking the buttons or selecting some different value in the selection lists, the

data in the Selection list and the table should be updated dynamically and no page

refresh should occur.

You can access the child nodes of the documents as follows:

mynodes=xmlDoc.documentElement.childNodes;

Note that unlike the Java-based DOM, which provides methods such as

getChildNodes() and getNodeType() that return a node list of children of a

current node and the type of a node respectively, with the DOM you have to

access the element properties directly, as in:

myNodeList= mynodes.item(i).childNodes; if (myNodeList.item(j).nodeType==ELEMENT_NODE)

• Step 2: Display the Resulting HTML Document

You should use the DOM document.write method to produce the required HTML,

as in:

html_text="XML Result"; hWin.document.write(html_text);

XML to HTML Conversion: Creating an Interactive Olympic Games Results Page, Assignments of Computer Science

Related documents

Partial preview of the text

Download XML to HTML Conversion: Creating an Interactive Olympic Games Results Page and more Assignments Computer Science in PDF only on Docsity!

Homework: XML 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. Description

You are required to write an HTML/JavaScript program, which takes the URL of an

XML document containing the final results of selected sports at the 2008 Olympic

Games, parses the XML file, and displays results in an HTML document. The resulting

HTML document will display a selection list consisting of the names of the Sports and a

“Show Support Events” button. Clicking on the button will display another selection list

consisting of the names of different events for the Sport selected in the first selection list

and a “Show Event Winner” button. Clicking on this button will display information

about the winner of the event in an HTML table along with a picture and a video related

to the event or the athlete from youtube.com. The JavaScript program will be

implemented by embedding it in a HTML file, so that it can be executed within a

browser.

• Initially your program should display a single text box that allows the entering of

an arbitrary URL of an XML document containing selected results of the 2008

Olympic Games. The interface should look like the following Figure 1:

You should implement this form using only HTML.

• The form, when the “Submit Query” button is clicked, would call an

HTML/JavaScript function within the HTML file that parses the XML document

given as an input.

• After parsing the XML document, a new popup window should be displayed

consisting of a drop down selection list that should contain one entry for each

Sport and a “Show Sport Events” button next to it, as shown in Figure 2. For

example, given the following XML document:

your program should produce the web page shown in Figure 2 below.

• After selecting a Sport and clicking the “Show Sport Events” button, another

selection list consisting of the events related to the Sport selected in first selection

list and a “Show Event Winner” button should appear as shown in Figure 3.

• After selecting an event and clicking the “Show Event Winner” button, a table

should be displayed containing the details of the event winner including the name

of the event winner, winner’s country, the final timing of the event, the picture of

the athlete and a youtube.com video embedded in the last row of the table as

shown in Figure 4. The data shown in the table cells and the URLs for the pictures

and the videos are to be read from the XML document. You will have to embed

the video in the HTML page. See Section 3, Step 5 for details about embedding a

YouTube video in a webpage.

• If the XML file is invalid (e.g. missing the closing tag or having tags that

overlap), an error message should be generated in a popup window as shown in

Figure 5.

In case of a parsing error, your program should pop up the following web page:

For example, the error above is displayed when parsing the file:

Since and Firefox DOM implementations do not contain the parseError object, you

should show an alert box if the XML file is not valid, as shown in the following Figure 6:

3. Hints

• Step 1: Writing Your HTML/JavaScript program - Using the DOM Parser

IE and Firefox have a built-in DOM parser. Microsoft DOM implementation is

part of Microsoft XML Core Services (MSXML). An introduction to the

Microsoft DOM can be found at:

The set of DOM enumerated constants can be found at:

Please note that since the MS XML parser does not define the DOM constants as

in Node.ELEMENT_NODE, you will have to define them in your code, as in:

ELEMENT_NODE = 1;

The set of DOM properties, methods and events can be found at:

Here's how you could use the Microsoft DOM API and the Mozilla DOM API

used in Firefox to load and parse an XML document into a DOM tree, and then

use the DOM API to extract information from that document.

Your task is to write a program that transforms this structure into HTML, where

first level tags contain the results for each sport and the first tag at the second

level for each Result will have the name of the Sport in the tag name,

e.g.Swimming. All the tags appearing at the second level

, and the six tags , , , ,

and appearing at the third level are fixed and your program

may assume that in a certain XML document, the entries at level 2 and 3 are

always in the same order, and that no entries are missing. However, you do not

know how many records of Result and events may occur in the file. When

producing the table, your program should use the tag names “name”, “winner”,

“country”, “final” and “picture” as the table headers as shown in Figure 3. Please

note, the headers should be dynamically populated from the XML file tags and

not from some constant strings written in the code. Please also note that after

clicking the buttons or selecting some different value in the selection lists, the

data in the Selection list and the table should be updated dynamically and no page

refresh should occur.