Application XML
Ce chapitre présente quelques petites applications XML construites sur XML, HTML, XML DOM et JavaScript.
Exemple de document XML
Dans cette application, nous utiliserons le fichier "cd_catalog.xml".
Afficher le premier CD dans un élément HTML div
L'exemple suivant récupère les données XML du premier élément CD, puis les affiche dans l'élément HTML avec id="showCD" Afficher les données. La fonction displayCD() est appelée au chargement de la page :
Instance
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;
}Exécuter l'instance»
Cliquez sur « Exécuter Instance" Bouton pour afficher l'instance en ligne
Afin d'ajouter la navigation (fonctionnalité) à l'instance ci-dessus, next() doit être créé et previous() deux fonctions :
Instance
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();
}
}Exécution de l'instance»
Cliquez sur le bouton "Exécuter l'instance" pour afficher l'instance en ligne
Afficher les informations de l'album lorsqu'il clique sur le CD
Le dernier exemple montre comment afficher les informations de l'album lorsque l'utilisateur clique sur un élément du CD :
Essayez-le.
Pour en savoir plus sur l'utilisation de JavaScript et du XML DOM, visitez notre tutoriel XML DOM.
