XML ﯼﺩﺮﺑﺭﺎﮐ ﯼﺎﻫ ﻪﻣﺎﻧﺮﺑ

فهرست مطالب

ﺪﻫﺩ ﯽﻣ ﻥﺎﺸﻧ ﺍﺭ HTML ﯼﺩﺮﺑﺭﺎﮐ ﯼﺎﻫ ﻪﻣﺎﻧﺮﺑ ﺯﺍ ﯽﺧﺮﺑ ﻞﺼﻓ ﻦﯾﺍ

ﻩﺪﺷ ﻩﺩﺎﻔﺘﺳﺍ XML ﺪﻨﺳ

.ﺩﺮﮐ ﻢﯿﻫﺍﻮﺧ ﻩﺩﺎﻔﺘﺳﺍ "cd_catalog.xml" ﻡﺎﻧ ﻪﺑ XML ﻞﯾﺎﻓ ﺯﺍ ﻞﺼﻓ ﻦﯾﺍ ﺭﺩ

HTML ﻝﻭﺪﺟ ﮏﯾ ﺭﺩ XML ﯼﺎﻫ ﻩﺩﺍﺩ ﺶﯾﺎﻤﻧ

ﺪﻫﺩ ﯽﻣ ﺶﯾﺎﻤﻧ ﺍﺭ the ﻭ <ARTIST> ﺮﯾﺩﺎﻘﻣ ﻭ ﺪﻧﺯ ﯽﻣ ﻪﻘﻠﺣ <CD> ﺮﺼﻨﻋ ﺮﻫ ﻖﯾﺮﻃ ﺯﺍ ﻝﺎﺜﻣ ﻦﯾﺍ

ﻝﺎﺜﻣ

<table id="demo"></table>

<script>
function loadXMLDoc() {
  const xhttp = new XMLHttpRequest();
  xhttp.onload = function() {
    const xmlDoc = xhttp.responseXML;
    const cd = xmlDoc.getElementsByTagName("CD");
    myFunction(cd);
  }
  xhttp.open("GET", "cd_catalog.xml");
  
xhttp.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>

→ ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ

<!DOCTYPE html>
<html>
<style>
table,th,td {
  border : 1px solid black;
  border-collapse: collapse;
}
th,td {
  padding: 5px;
}
</style>
<body>

<button type="button" onclick="loadXMLDoc()">Get my CD collection</button>
<br><br>
<table id="demo"></table>

<script>
function loadXMLDoc() {
  const xhttp = new XMLHttpRequest();
  xhttp.onload = function() {
    const xmlDoc = xhttp.responseXML;
    const cd = xmlDoc.getElementsByTagName("CD");
    myFunction(cd)
  }
  xhttp.open("GET", "cd_catalog.xml");
  xhttp.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>

ﻪﺑ ،XML DOM ﻭ ﺖﭙﯾﺮﮑﺳﺍ ﺍﻭﺎﺟ ﺯﺍ ﻩﺩﺎﻔﺘﺳﺍ ﺩﺭﻮﻣ ﺭﺩ ﺮﺘﺸﯿﺑ ﺕﺎﻋﻼﻃﺍ ﯼﺍﺮﺑ

ﺪﯿﻫﺩ ﺶﯾﺎﻤﻧ div HTML ﺮﺼﻨﻋ ﮏﯾ ﺭﺩ ﺍﺭ CD ﻦﯿﻟﻭﺍ

:ﺪﻨﮐ ﯽﻣ ﻩﺩﺎﻔﺘﺳﺍ "id="showCD ﺎﺑ HTML ﺮﺼﻨﻋ ﮏﯾ ﺭﺩ CD ﺮﺼﻨﻋ ﻦﯿﻟﻭﺍ ﺶﯾﺎﻤﻧ ﯼﺍﺮﺑ ﻊﺑﺎﺗ ﮏﯾ ﺯﺍ ﻝﺎ

ﻝﺎﺜﻣ

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

→ ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ

<!DOCTYPE html>
<html>
<body>

<div id='showCD'></div>

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

</body>
</html>

ﺪﯿﻨﮐ ﺖﮐﺮﺣ ﺎﻫ ﯼﺩ ﯽﺳ ﻦﯿﺑ

ﺪﯿﻨﮐ ﺩﺎﺠﯾﺍ ﺍﺭ a ،ﻻﺎﺑ ﻝﺎﺜﻣ ﯼﺎﻫ ﯼﺩ ﯽﺳ ﻦﯿﺑ ﺶﯾﺎﻤﯿﭘ ﯼﺍﺮﺑ

ﻝﺎﺜﻣ

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

→ ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ

<!DOCTYPE html>
<html>
<body>

<div id='showCD'></div><br>
<input type="button" onclick="previous()" value="&lt;&lt;">
<input type="button" onclick="next()" value="&gt;&gt;">

<script>
let i = 0;
let len;
let cd;

const xhttp = new XMLHttpRequest();
xhttp.onload = function() {
  const xmlDoc = xhttp.responseXML;
  cd = xmlDoc.getElementsByTagName("CD");
  len = cd.length;
  displayCD(i);
}
xhttp.open("GET", "cd_catalog.xml");
xhttp.send();

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

function next() {
  if (i < len-1) {
    i++;
    displayCD(i);
  }
}

function previous() {
  if (i > 0) {
    i--;
    displayCD(i);
  }
}
</script>

</body>
</html>

ﯼﺩ ﯽﺳ ﯼﻭﺭ ﺮﺑ ﮏﯿﻠﮐ ﻡﺎﮕﻨﻫ ﻡﻮﺒﻟﺁ ﺕﺎﻋﻼﻃﺍ ﺶﯾﺎﻤﻧ

:ﺪﯿﻫﺩ ﻥﺎﺸﻧ ﺪﻨﮐ ﯽﻣ ﮏﯿﻠﮐ 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;
}

→ ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ

<!DOCTYPE html>
<html>

<head>
<style>
table,th,td {
  border : 1px solid black;
  border-collapse: collapse;
}
th,td {
  padding: 5px;
}
</style>
</head>

<body>

<p>Click on a CD to display album information.</p>
<p id='showCD'></p>
<table id="demo"></table>

<script>
const xhttp = new XMLHttpRequest();
let cd;
xhttp.onload = function() {
 const xmlDoc = xhttp.responseXML; 
 cd = xmlDoc.getElementsByTagName("CD");
 loadCD();
}
xhttp.open("GET", "cd_catalog.xml");
xhttp.send();

function loadCD() {
  let table="<tr><th>Artist</th><th>Title</th></tr>";
  for (let i = 0; i < cd.length; i++) { 
    table += "<tr onclick='displayCD(" + i + ")'><td>";
    table += cd[i].getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue;
    table += "</td><td>";
    table += cd[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue;
    table += "</td></tr>";
  }
  document.getElementById("demo").innerHTML = table;
}

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

</body>
</html>