แอปพลิเคชัน XML

แอปพลิเคชัน XML

บทนี้สาธิตแอปพลิเคชัน XML ขนาดเล็กบางตัวที่สร้างขึ้นบน XML, HTML, XML DOM และ JavaScript

ตัวอย่างเอกสาร XML

ในแอปพลิเคชันนี้ เราจะใช้ไฟล์ "cd_catalog.xml"

แสดงซีดีแผ่นแรกในองค์ประกอบ div HTML

ตัวอย่างต่อไปนี้รับข้อมูล XML จากองค์ประกอบซีดีแรก จากนั้นแสดงข้อมูลในองค์ประกอบ HTML ด้วย id="showCD" ฟังก์ชัน displayCD() จะถูกเรียกเมื่อโหลดเพจ:

ตัวอย่าง

 x=xmlDoc.getElementsByTagName("ซีดี");
ฉัน=0;

ฟังก์ชั่น displayCD()
-
ศิลปิน=(x[i].getElementsByTagName("ศิลปิน")[0].childNodes[0].nodeValue);
title=(x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue);
ปี=(x[i].getElementsByTagName("ปี")[0].childNodes[0].nodeValue);
txt="ศิลปิน: " + ศิลปิน + "<br />หัวข้อ: " + ชื่อ + "<br />ปี: "+ ปี;
document.getElementById("showCD").innerHTML=txt;
-

ลองเลย »

เพิ่มสคริปต์การนำทาง

ในการเพิ่มการนำทาง (ฟังก์ชันการทำงาน) ให้กับตัวอย่างข้างต้น จำเป็นต้องสร้างฟังก์ชันสองรายการ: ถัดไป() และก่อนหน้า():

ตัวอย่าง

 ฟังก์ชั่นถัดไป()
{ // แสดงซีดีแผ่นถัดไป เว้นแต่คุณจะอยู่ในซีดีแผ่นสุดท้าย
ถ้า (i<x.length-1)
-
ฉัน++;
ดิสเพลย์ซีดี();
-
-

ฟังก์ชั่นก่อนหน้า()
{ // แสดงซีดีก่อนหน้า เว้นแต่คุณจะอยู่ในซีดีแผ่นแรก
ถ้า (i>0)
-
ฉัน--;
ดิสเพลย์ซีดี();
-
-

ลองเลย »

แสดงข้อมูลอัลบั้มเมื่อคลิกบนซีดี

ตัวอย่างสุดท้ายแสดงวิธีแสดงข้อมูลอัลบั้มเมื่อผู้ใช้คลิกที่รายการซีดี:

ลองดูสิ

หากต้องการเรียนรู้เพิ่มเติมเกี่ยวกับการใช้ JavaScript และ XML DOM โปรดไปที่บทช่วยสอน XML DOM ของเรา