Ce chapitre présente quelques petites applications XML construites sur XML, HTML, XML DOM et JavaScript.
Dans cette application, nous utiliserons le fichier "cd_catalog.xml".
L'exemple suivant récupère les données XML du premier élément CD, puis affiche les données dans l'élément HTML avec id="showCD". La fonction displayCD() est appelée au chargement de la page :
x=xmlDoc.getElementsByTagName("CD");
je = 0 ;
fonction displayCD()
{
artiste=(x[i].getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue);
title=(x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue);
année=(x[i].getElementsByTagName("YEAR")[0].childNodes[0].nodeValue);
txt="Artiste : " + artiste + "<br />Titre : " + titre + "<br />Année : "+ année ;
document.getElementById("showCD").innerHTML=txt;
}
Essayez-le »
Afin d'ajouter la navigation (fonctionnalité) à l'exemple ci-dessus, deux fonctions doivent être créées : next() et previous() :
fonction suivante()
{ // affiche le CD suivant, sauf si vous êtes sur le dernier CD
si (i<x.length-1)
{
je++;
displayCD();
}
}
fonction précédente()
{ // affiche le CD précédent, sauf si vous êtes sur le premier CD
si (i>0)
{
je--;
displayCD();
}
}
Essayez-le »
Le dernier exemple montre comment afficher les informations sur 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 didacticiel XML DOM.