تطبيقات XML
يوضح هذا الفصل بعض صغير يستند إلى XML تطبيق XML، HTML، XML DOM وجافا سكريبت بناؤها.
المثال مستند XML
في هذا التطبيق، وسوف نستخدم "cd_catalog.xml" الملف.
عرض قرص مضغوط في عنصر HTML شعبة
الأمثلة التالية الحصول على بيانات XML من العنصر الأول من قرص مضغوط، ثم عرض البيانات في معرف = "showCD" عنصر HTML. displayCD () يتم استدعاء وظيفة عند تحميل الصفحة:
أمثلة
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;
}
محاولة »
إضافة النصي الملاحة
لإضافة ملاحة (وظيفة) في المثال أعلاه، نحن بحاجة إلى إنشاء المقبل () والسابقة () وظيفتين:
أمثلة
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();
}
}
محاولة »
عند النقر على المعلومات ألبوم القرص المضغوط يتم عرضها عند
يوضح المثال الأخير كيفية عرض معلومات الألبوم عندما ينقر المستخدم على مشروع CD:
محاولة .
لمزيد من المعلومات حول استخدام جافا سكريبت و XML DOM، زيارة موقعنا XML DOM البرنامج التعليمي .