XML Applications
Ce chapitre présente quelques petites applications XML basées sur XML, HTML, XML DOM et JavaScript.
Le document XML utilisé
Dans cette application, nous allons utiliser le "cd_catalog.xml" fichier.
Afficher le premier CD dans un élément HTML DIV
L'exemple suivant récupère les données XML de l'élément premier CD et l'affiche dans un élément HTML avec id = "showCD". Le displayCD () est appelée lorsque la page est chargée:
Exemple
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;
}
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;
}
Essayez vous-même »
Naviguer entre les CD
Pour naviguer entre les CD dans l'exemple ci-dessus, ajouter un next () et previous ():
Exemple
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();
}
}
{ // 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();
}
}
Essayez vous-même »
Afficher les informations de l'album en cliquant sur un CD
Le dernier exemple montre comment vous pouvez afficher des informations album lorsque l'utilisateur clique sur un CD:
Pour plus d'informations sur l'utilisation de JavaScript et le DOM XML, visitez notre tutoriel XML DOM.
0 commentaires:
Post a Comment
HELLO VISITORS THANKS FOR YOUR VISIT AND COMMENT