Exercise Questions

Suggested solutions to these questions can be found in Appendix A.

Question 1

Create an XML document that logically orders the following data for a school:

Child's name
Child's age
Class the child is in

I am using the following data:

Bibby Jones	13	1B
Beci Smith	12	1B
Jack Wilson	14	2C

<?xml version="1.0" encoding="iso-8859-1"?>
<school>
  <child>
    <name>Bibby Jones</name>
    <age>13</age>
    <class>
         1B
 </class>
  </child>
  <child>
    <name>Beci Smith</name>
    <age>12</age>
 <class>
         1B
 </class>
  </child>
  <child>
    <name>Jack Wilson</name>
    <age>14</age>
 <class>
         2C
 </class>
  </child>
</school>

Save this file as school.xml.

Question 2

Using JavaScript, load the information from the XML file into a page and display it when the user clicks a link.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Chapter 14 Question 2</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<script type="text/javascript" language="javascript">
if (window.ActiveXObject)
var xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
else if (document.implementation && document.implementation.createDocument)
var xmlDoc= document.implementation.createDocument("","doc",null);
    
xmlDoc.load("school.xml");
    
function writeTableOfSchoolChildren()
 {
         var xmlNode = xmlDoc.getElementsByTagName('child');
         var newTableElement = document.createElement('table');
        newTableElement.setAttribute('cellPadding',5);
    
         var tempElement = document.createElement('tbody');
         newTableElement.appendChild(tempElement);
         var tableRow = document.createElement('TR');
    
        tempElement.appendChild(tableRow );
    
        var i;
        var iRow;
         for (i=0; i < xmlNode.length;i++)
        {
            var tableRow = document.createElement('TR');
            for (iRow=0; iRow < xmlNode[i].childNodes.length; iRow++)
           {
              if (xmlNode[i].childNodes[iRow].nodeType != 1)
              {
                  continue;
             }
            var tdElement = document.createElement('TD');
                var textData =
         document.createTextNode(xmlNode[i].childNodes[iRow].firstChild.nodeValue);
           tdElement.appendChild(textData);
         tableRow.appendChild(tdElement);
        }
    
         tempElement.appendChild(tableRow);
       }
    
       // remove old table before adding new one
       if (document.all)
       {
          // IE specific code
          document.all.displaySchoolInfo.innerHTML = "";
       }
    
 document.getElementById('displaySchoolInfo').appendChild(newTableElement);
}
    
    
</script>
<body>
<p><A href="javascript:writeTableOfSchoolChildren()">Show Table of Children At The
School</A></p>
<p id="displaySchoolInfo"></p>
    
</body>
</html>