JavaScript

Javascript is a scripting language that can be embedded inside HTML documents to process information and finally display it in the browser window. We actually embed a piece of code inside HTML tags! It's a client-side application entity, and we shall soon see a real life example. Let's first get some idea of Javascript syntax.

Javascript code should always be nested inside the HTML <script> element, between its start and end tags. Script tags have some information as element attribute e-value pairs, mainly to let the HTML parser know, for example, that it is text (human readable) code written in Javascript. This language provides many constructs that resemble constructs in everyday programming languages as well, so it's intuitive and easily learned. Condition testing, looping, API, you name it!

Let's now look at a real world example of loading an XML document inside Javascript. We look at a scenario where an XML document is loaded from a URL, by requesting data from a HTTP server and returning the content retrieved to the user. The example XML document is a flight booking information record:

<?xml version="1.0" encoding="UTF-8" ?>

<flight-booking id="TWA123456">

<name>James Bond</name>

<age>45</age>

<flight-number>TWA1625</flight-number>

<date>11-29-2012</date>

<time>12:15</time>

<origin>London</origin>

<destination>Paris</destination>

<class>Business</class>

</flight-booking>

The Javascript that does the above task would look something like:

<script type="text/javascript">

function loadXML(path){

if(window.XMLHttpRequest){

xhttp = new XMLHttpRequest();

}else{

xhttp = new ActiveObject("Microsoft.XMLHTTP);

}

xhttp.open('GET', path, false);

xhttp.send();

return xhttp.responseXML;

}

xml = loadXML("flightbooking.xml");

document.write(xml);

</script>

We have written a function that will load the XML document, given the URL to locate it. The call to the function is made, and the string return type stored. The document will be finally displayed in the browser window. But we don't get what we expect (you can verify that from the tutorial or your own script,) mainly because the root level XML element is the entire document node (root node of the DOM tree) and it's not a simple node; it has nested elements.

The main point to highlight here is the short learning cycle required for mastering Javascript (we have a great course for it, if you're unfamiliar!) There's nothing obscure about it... simplicity was the design goal right from the beginning.

In the next summary, we'll see how to use looping constructs to return selective information stored in the retrieved from the XML document. Until then, goodbye!