Teooria

XML (Extensible Markup Language) on W3C poolt välja töötatud ja soovitatud standardne üldotstarbeline märgistuskeel struktureeritud teabe vahetamiseks infosüsteemide vahel, eriti veebirakendustes Internetis.

Praaktika

1. Valmista endale uus Vanilla keskkond Code Sandbox’is.

2. Kasuta järgmist malli index.js sees:

  document.getElementById("app").innerHTML = `<table id="xmlTable"></table>`;

3. Loo src kausta XML fail näiteks on toodud mängude kohta, aga mõtle endale muu teema. Vaheta küsimärgid enda mängu valiku vastu

<?xml version="1.0" encoding="UTF-8"?>
<gamelist>
    <game>
        <title lang="en">The last of us</title>
        <price>20.00</price>
    </game>
    <game>
        <title lang="en">Cs2</title>
        <price>14.99</price>
    </game>

    <game>
        <title lang="en">Uncharted 4</title>
        <price>20.00</price>
    </game>
</gamelist>

4. Lisa XML faili saamiseks funktsioon. Vaheta küsimärgid games.xml allikaga:

  xmlhttp.open("GET", "src/games.xml", true); //ava xml fail
    xmlhttp.send();
    let xmlhttp = new XMLHttpRequest(); //uus päring

5. Lisa tabeli generatsiooni funktsioon. Otsi küsimärkide asemele XML failist nimesi:

    const xmlDoc = xml.responseXML;
    let tableRows = "<tr><th>Title</th><th>Price</th><th>Platforms</th></tr>"; //on liisatud andmet tüübid
    let gameElements = xmlDoc.getElementsByTagName("game"); //
    for (let i = 0; i < gameElements.length; i++) {
      tableRows += //tsüükli loomine
        "<tr><td>" +
        gameElements[i].getElementsByTagName("title")[0].childNodes[0].nodeValue +
        "</td><td>" +
        gameElements[i].getElementsByTagName("price")[0].childNodes[0].nodeValue +
        "</td><td>";
      let platforms = gameElements[i].getElementsByTagName("platform");
      for (let j = 0; j < platforms.length; j++) {
        //tsüükli loomine
        tableRows += platforms[j].childNodes[0].nodeValue + "/";
      }
      tableRows += "</td></tr>";
    }
    document.getElementById("xmlTable").innerHTML = tableRows;

6. Tulemus võiks välja näha selline:

7. Uuenda XML faili "games.xml":

<?xml version="1.0" encoding="UTF-8"?>
<gamelist>
    <game>
        <title lang="en">The last of us</title>
        <price>20.00</price>
        <platforms>
        <platform>PS4</platform>
        <platform>PS5</platform>
        </platforms>
    </game>
    <game>
        <title lang="en">Cs2</title>
        <price>14.99</price>
        <platforms>
        <platform>Windows</platform>
        <platform>Linux</platform>
        </platforms>
    </game>

    <game>
        <title lang="en">Uncharted 4</title>
        <price>20.00</price>
        <platforms>
        <platform>PS4</platform>
        <platform>PS5</platform>
        </platforms>
    </game>
</gamelist>

8. Nüüd muuda tabeli loomise koodi, lisades tabelile juurde ühe header-i koos data sisuga.

9. Lõpuks, lehel võiks olla 3 pealkirja koos sisuga, näiteks:

index.mjs

function loadXMLDoc() {
    let xmlhttp = new XMLHttpRequest(); //uus päring
    xmlhttp.onreadystatechange = function () {
      if (this.readyState === 4 && this.status === 200) {
        //статус запроса выполнен
        getGameDetails(this);
      }
    };
    xmlhttp.open("GET", "src/games.xml", true); //ava xml fail
    xmlhttp.send();
  }
  
  function getGameDetails(xml) {
    //saame andmed xml failis
    const xmlDoc = xml.responseXML;
    let tableRows = "<tr><th>Title</th><th>Price</th><th>Platforms</th></tr>"; //on liisatud andmet tüübid
    let gameElements = xmlDoc.getElementsByTagName("game"); //
    for (let i = 0; i < gameElements.length; i++) {
      tableRows += //tsüükli loomine
        "<tr><td>" +
        gameElements[i].getElementsByTagName("title")[0].childNodes[0].nodeValue +
        "</td><td>" +
        gameElements[i].getElementsByTagName("price")[0].childNodes[0].nodeValue +
        "</td><td>";
      let platforms = gameElements[i].getElementsByTagName("platform");
      for (let j = 0; j < platforms.length; j++) {
        //tsüükli loomine
        tableRows += platforms[j].childNodes[0].nodeValue + "/";
      }
      tableRows += "</td></tr>";
    }
    document.getElementById("xmlTable").innerHTML = tableRows;
  }
  
  document.getElementById("app").innerHTML = `<table id="xmlTable"></table>`;
  
  loadXMLDoc();

games.xml

<?xml version="1.0" encoding="UTF-8"?>
<gamelist>
    <game>
        <title lang="en">The last of us</title>
        <price>20.00</price>
        <platforms>
        <platform>PS4</platform>
        <platform>PS5</platform>
        </platforms>
    </game>
    <game>
        <title lang="en">Cs2</title>
        <price>14.99</price>
        <platforms>
        <platform>Windows</platform>
        <platform>Linux</platform>
        </platforms>
    </game>

    <game>
        <title lang="en">Uncharted 4</title>
        <price>20.00</price>
        <platforms>
        <platform>PS4</platform>
        <platform>PS5</platform>
        </platforms>
    </game>
</gamelist>

styles.css

body {
  font-family: sans-serif;
  background-color: #1e1e1e;
  color: #f5f5f5;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
}

table {
  width: 80%;
  border-collapse: collapse;
  margin: 20px 0;
  font-size: 18px;
  min-width: 400px;
  background-color: #333;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
}

th,
td {
  padding: 12px 15px;
  text-align: left;
}

th {
  background-color: #444;
  color: #ffffff;
}

tr {
  border-bottom: 1px solid #444;
}

tr:nth-of-type(even) {
  background-color: #2a2a2a;
}

tr:hover {
  background-color: #444;
}

td {
  color: #dcdcdc;
}

Link

Codesandbox

H. 8 XML faili kuvamine JS lehel

Teooria

Praaktika

Link

Leave a ReplyCancel Reply