Your assignment is to take the following html file and implement the code necessary to take the XML file (events.xml), extract the events from the XML document and finally display the extracted information in a table you will create using DOM methods.
Once you’ve created the table, you will need to insert it inside the
(id= “cal”) shown below. Use only the DOM methods that appear in my slides. Do not use innerHTML or similar methods.
<html>
<head>
<title>Handling Events</title>
</head>
<body>
<div id=""cal""></div>
<script src="process+events.js"></script>
<script>
var oReq = new XMLHttpRequest();
oReq.addEventListener("load", processEvents);
oReq.open("GET", "http://pubpages.unh.edu/~jlw/771/events.xml");
oReq.send();
</script>
</body>
</html>
You will notice that the each event in the XML file has an empty <map> element. That
element can be ignored when you extract the event information (but don’t remove them
from the XML file, just write code to ignore them).
The JavaScript in the process+event.js file should include the following functions:
A constructor for events – the extracted date from the XML file will be a string, use new Date(datetime) to convert it to a date object. The two other properties will stay strings.
A function called processEvents which extracts the events from the XML file, sorts
them, and finally creates the table used to display them.
A function called collectEvents that extracts the events from the XML file and returns
an array of sorted event objects.
A function called compareDates that is used to sort the events array by datetime. Google for Array.prototype.sort for more information about how to write the
compareDates function.
[Update]
I am attaching the code..I am unable to display the final table. I don't know why?
function event( title,datetime,location)
{
this.date=new Date(datetime);
this.title=title;
this.location=location;
}
function processEvents()
{
var events;
if(this.status==200&&this.responseXML!=null)
{
events=collectEvents();
}
var table=documnet.createElement("TABLE");
var tableBody=document.createElement("tbody");
var htmlbody=document.getElementsByTagName('div');
for(var k1=0;k1<events.length;k1++) {="" var="" tblrow="document.createElement("tr");" col1="document.createElement("td");" col2="document.createElement("td");" col3="document.createElement("td");" col1.appendchild(events[k1].datetime);="" col2.appendchild(events[k1].title);="" col3.appendchild(events[k1].location);="" tblrow.appendchild(col1);="" tblrow.appendchild(col2);="" tblrow.appendchild(col3);="" tablebody.appendchild(tblrow);="" }="" table.appendchild(tablebody);="" htmlbody.appendchild(table);="" ="" function="" collectevents()="" eventlist="new" array();="" if(this.status="=200&&this.responseXML!=null)" xmlelem="this.responseXML;" title1="xmlElem.getElementsByTagName("title");" datetime1="xmlElem.getElementsByTagName("datetime");" location1="xmlElem.getElementsByTagName("location");" len="title1.length;" for(var="" k1="0;k1<len;k1++)" eventlist.push(new="" event(title1[k1].childnodes[0].nodevalue,datetime1[k1].childnodes[0].nodevalue,location1[k1].childnodes[0].nodevalue));="" neweventlist="eventList.sort(compareDates);" comparedates(date1,date2)="" return="" date1-date2;="" }<="" div=""> <div id="EditDialogPlaceholder"></div> <div id="ReplyDialogPlaceholder"></div></events.length;k1++)>
Submit an article or tip