02GEEK: Developer and Marketing Training with Live personal support

Looping XML

Now that we're somewhat familiar with the way <a href="/courses/video/47/373/JavaScript.html">javascript</a> scripts are written, let's look at an example for loading and processing an XML document from inside a script. Consider the following scenario: Swimming centers and metropolitan corporations within New York City (NYC) are submitting statistics of swimming courses taken by children below the age of 12. The NY State swimming academy is collecting these statistics (that are uploaded to the web) and feeding them to XML document processing software. We are all aware that there are four basic swimming styles: freestyle, back-stroke, butterfly and breast-stroke. Suppose that for each style of swimming, the names of institutes and number of young trainees in that particular style of course being offered by this institute, are stored in a swimming.xml file: <?xml version="1.0" encoding="UTF-8" ?> <swimming> <style name="Freestyle"> <tute type="Manhattan Swim Institute">335</tute> <tute type="Brooklyn Swim Academy">400</tute> <tute type="Long Island Swim Coaching">555</tute> </style> <style name="Back-Stroke"> <tute type="Manhattan Swim Institute">245</tute> <tute type="Brooklyn Swim Academy">300</tute> <tute type="Long Island Swim Coaching">165</tute> </style> <style name="Butterfly"> <tute type="Manhattan Swim Institute">200</tute> <tute type="Brooklyn Swim Academy">350</tute> <tute type="Long Island Swim Coaching">150</tute> </style> <style name="Breast-Stroke"> <tute type="Manhattan Swim Institute">150</tute> <tute type="Brooklyn Swim Academy">300</tute> <tute type="Long Island Swim Coaching">400</tute> </style> </swimming> The Javascript written to process this XML document would be written as shown below: <script> function loadXML(path){ //javascript code for loading XML documents from a file path name } var xml = loadXML("swimming.xml"); var style = xml.documentElement.childNodes; var tutes; for(var i=0; i<style.length; i++){ if(style[i].nodeName != "#text"){ document.write('<h2>' + style[i].attributes.name.value + " training institutes are" + '</h2>'); tutes = style[i].childNodes(); for(var j=0; j<tutes.length; j++){ if(tutes[i].nodeName != "#text"){ document.write('<h1>' + tutes[j].attributes.type.value + '</h1>'); } } } document.write(' '); } </script> This script outputs statistics regarding which institutes offer courses in each of the four swimming styles, as well as the number of trainees enrolled for each. You must verify that the output generated by this script in the browser is consistent with the intention we stated earlier. As Donald Knuth , the famous algorithmist said: "Test the code. I have merely proved it correct. It may not execute as expected!" So practice and verification are as important as, if not more so than actual coding. Note that we have formatted the information being output by using <a href="/html5/101.html">HTML</a> tags embedded in quotes. This example highlights the real advantage of separating content from the application: XML for storing information, and <a href="/courses/video/47/365/XML-Overview-and-Context.html">XML</a> for formatting & rendering it through scripts.

Overview and Context of XML

We will learn about the historical perspective and overview of the XML standard. The main focus is on Information organization and cross platform usage