एक्सएमएल एप्लीकेशन
यह अध्याय एक्सएमएल, एचटीटीपी, डोम और जावास्क्रिप्ट का उपयोग करते हुए कुछ एचटीएमएल अनुप्रयोगों को प्रदर्शित करता है।
प्रयुक्त XML दस्तावेज़
इस अध्याय में हम "cd_catalog.xml" नामक XML फ़ाइल का उपयोग करेंगे ।
HTML तालिका में XML डेटा प्रदर्शित करें
यह उदाहरण प्रत्येक <CD> तत्व के माध्यम से लूप करता है, और HTML तालिका में <ARTIST> और <TITLE> तत्वों के मान प्रदर्शित करता है:
उदाहरण
<table id="demo"></table>
<script>
function loadXMLDoc() {
const xmlhttp = new XMLHttpRequest();
xmlhttp.onload = function() {
const xmlDoc = xml.responseXML;
const cd = xmlDoc.getElementsByTagName("CD");
myFunction(cd);
}
xmlhttp.open("GET", "cd_catalog.xml");
xmlhttp.send();
}
function myFunction(cd) {
let table="<tr><th>Artist</th><th>Title</th></tr>";
for (let i = 0; i < cd.length; i++) {
table += "<tr><td>" +
cd[i].getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue
+
"</td><td>" +
cd[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue
+
"</td></tr>";
}
document.getElementById("demo").innerHTML = table;
}
</script>
</body>
</html>
जावास्क्रिप्ट और एक्सएमएल डोम का उपयोग करने के बारे में अधिक जानकारी के लिए, डोम इंट्रो पर जाएं।
HTML div Element में पहली सीडी प्रदर्शित करें
यह उदाहरण id="showCD" के साथ HTML तत्व में पहला सीडी तत्व प्रदर्शित करने के लिए एक फ़ंक्शन का उपयोग करता है:
उदाहरण
const xhttp = new XMLHttpRequest();
xhttp.onload = function() {
const xmlDoc = xhttp.responseXML;
const cd = xmlDoc.getElementsByTagName("CD");
myFunction(cd, 0);
}
xhttp.open("GET", "cd_catalog.xml");
xhttp.send();
function myFunction(cd, i) {
document.getElementById("showCD").innerHTML =
"Artist: " +
cd[i].getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue +
"<br>Title: " +
cd[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue +
"<br>Year: " +
cd[i].getElementsByTagName("YEAR")[0].childNodes[0].nodeValue;
}
सीडी के बीच नेविगेट करें
ऊपर के उदाहरण में सीडी के बीच नेविगेट करने के लिए, एक
next()और previous()फ़ंक्शन बनाएं:
उदाहरण
function next()
{
// display the next CD, unless you are on the last CD
if (i < len-1) {
i++;
displayCD(i);
}
}
function previous()
{
// display the previous CD, unless you are on the first CD
if (i > 0) {
i--;
displayCD(i);
}
}
सीडी पर क्लिक करते समय एल्बम की जानकारी दिखाएं
अंतिम उदाहरण दिखाता है कि जब उपयोगकर्ता किसी सीडी पर क्लिक करता है तो आप एल्बम की जानकारी कैसे दिखा सकते हैं:
उदाहरण
function displayCD(i) {
document.getElementById("showCD").innerHTML =
"Artist: " +
cd[i].getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue +
"<br>Title: " +
cd[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue +
"<br>Year: " +
cd[i].getElementsByTagName("YEAR")[0].childNodes[0].nodeValue;
}