٪۴۰ تخفیف تابستانه شروع شد! بزرگترین حراج سال ما

به ما بپیوندید

آموزش برنامه های XML

این فصل برخی از برنامه های HTML را با استفاده از XML ، HTTP ، DOM و JavaScript نشان می دهد. سند XML مورد استفاده در این فصل از فایل XML به نام “cd_catalog.xml” استفاده خواهیم کرد. نمایش داده های XML در…

محمد یوسفی

30 جولای 2021

این فصل برخی از برنامه های HTML را با استفاده از XML ، HTTP ، DOM و JavaScript نشان می دهد.


سند XML مورد استفاده

در این فصل از فایل XML به نام “cd_catalog.xml” استفاده خواهیم کرد.


نمایش داده های XML در یک جدول HTML

این مثال هر عنصر <CD> را مرور می کند و مقادیر عناصر <ARTIST> و <TITLE> را در یک جدول HTML نمایش می دهد:

مثال

<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>

برای کسب اطلاعات بیشتر در مورد استفاده از JavaScript و XML DOM ، به DOM Intro بروید.



اولین CD را در HTML div Element نمایش دهید

این مثال برای نمایش اولین عنصر CD در یک عنصر HTML با id = “showCD” از یک تابع استفاده می کند:

مثال

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;
}

بین CD ها بروید

برای حرکت بین CD ها در مثال بالا ، یک تابع 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);
  }
}

هنگام کلیک روی CD اطلاعات آلبوم را نشان دهید

آخرین مثال نشان می دهد که چگونه می توانید اطلاعات آلبوم را هنگام کلیک کاربر بر روی CD نشان دهید:

مثال

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;
}

منبع

مطالب مرتبط

0 0 رای ها
امتیازدهی به مقاله
اشتراک در
اطلاع از
guest
0 نظرات
بازخورد (Feedback) های اینلاین
مشاهده همه دیدگاه ها