Showing posts with label XML Applications. Show all posts
Showing posts with label XML Applications. Show all posts

Friday, August 24, 2012

XML Applications


This chapter demonstrates some small XML applications built on XML, HTML, XML DOM and JavaScript.

The XML Document Used

In this application we will use the "cd_catalog.xml" file.

Display the First CD in an HTML div Element

The following example gets the XML data from the first CD element and displays it in an HTML element with id="showCD". The displayCD() function is called when the page is loaded:

Example

x=xmlDoc.getElementsByTagName("CD");
i=0;

function displayCD()
{
artist=(x[i].getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue);
title=(x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue);
year=(x[i].getElementsByTagName("YEAR")[0].childNodes[0].nodeValue);
txt="Artist: " + artist + "<br />Title: " + title + "<br />Year: "+ year;
document.getElementById("showCD").innerHTML=txt;
}

Try it yourself »


Navigate Between the CDs

To navigate between the CDs in the example above, add a next() and previous() function:

Example

function next()
{ // display the next CD, unless you are on the last CD
if (i<x.length-1)
  {
  i++;
  displayCD();
  }
}

function previous()
{ // displays the previous CD, unless you are on the first CD
if (i>0)
  {
  i--;
  displayCD();
  }
}

Try it yourself »


Show Album Information When Clicking On a CD

The last example shows how you can show album information when the user clicks on a CD:

For more information about using JavaScript and the XML DOM, visit our XML DOM tutorial.