JSON ja XML

JSON

JSON (Javascript Object Notation) on yksinkertainen avoimen standardin tiedostomuoto tiedonvälitykseen. Nimestään huolimatta se on Javascriptistä riippumaton. JSON internet media type (MIME) on yleensä application/json ja tiedostopääte .json.

Esimerkki JSON:ista:

                
{
    "quiz": [
        {
            "question": "Miksi kutsutaan koodiin sijoitettuja kuvauksia, jotka eivät ole osa suoritettavaa koodia, vaan kertovat lausekkeiden toiminnan?",
            "choices": [
                "Muistiinpanoja",
                "Kommentteja",
                "Lainauksia",
                "Vertailuja"
            ],
            "type": "single",
            "answer": "1",
            "summary": "Kommentit eivät ole suoritettavaa koodia, vaan tekijänsä merkintöjä jotka selkeyttävät rakennetta ohjelmakoodia lukevalle henkilölle."
        }
    ]
}
                
            

JSON-harjoitus

Tee oma versiosi monivalintakyselystä hyödyntäen alla mainittua JSON-tiedostoa. Voit toteuttaa yhden tai useamman seuraavista tai lisätä jotain muuta mitä ei ole mainittu:

• Pisteiden lasku
• Oma vaihtoehdon valinta vastausmahdollisuuksien joukosta
• Valinnan muuttamisen salliminen tai estäminen
• Oikean vaihtoehdon näyttö
• Väärien vaihtoehtojen näyttö
• Ilmoitus siitä onko oma valinta oikein tai väärin
• Perustelu oikealle vaihtoehdolle
• Lomaketta hyödyntäen tai ilman
• Yhden tai useamman sivun toteutus
• Ulkoasu
• Responsiivisuus
• Saavutettavuus
• Lokalisointi
• Vastausvaihtoehdot ovat satunnaisessa järjestyksessä (vaatii JSON:in muokkausta)
• Useampi vastausvaihtoehto voi olla oikein (vaatii JSON:in muokkausta)

JSON-esimerkki

Tarvittava tiedosto: quiz.json tai quiz-multiple.json

Harjoitus vaatii palvelinympäristön toimiakseen.

Harjoituksen vaatima fetch-kutsu

Edellyttäen että tiedostot ovat samalla tasolla samassa kansiossa, käyttäen fetch-metodia:

                
fetch("./quiz.json")
.then(response => {
    if (!response.ok) {
        throw new Error(response.status);
    }
    return response.json();
})
.then(json => {
    // tee jotakin json:illa
})
.catch(err => {
    console.log(err);
});
                
            

XML

XML (Extensible Markup Language) on merkintäkielen standardi, joka määrittää tietojen merkintämuodon loogisella rakenteella. XML-kieltä käytetään sekä formaattina tiedonvälitykseen että tiedostomuotona dokumenttien tallentamiseen. Internet media type on yleensä application/xml ja tiedostopääte .xml.

Esimerkki XML:stä:

<?xml version="1.0" encoding="UTF-8" ?>
<root>
    <quiz>
    <question>Miksi kutsutaan koodiin sijoitettuja kuvauksia, jotka eivät ole osa suoritettavaa koodia, vaan kertovat lausekkeiden toiminnan?</question>
    <choices>Muistiinpanoja</choices>
    <choices>Kommentteja</choices>
    <choices>Lainauksia</choices>
    <choices>Vertailuja</choices>
    <type>single</type>
    <answer>1</answer>
    <summary>Kommentit eivät ole suoritettavaa koodia, vaan tekijänsä merkintöjä jotka selkeyttävät rakennetta ohjelmakoodia lukevalle henkilölle.</summary>
    </quiz>
</root>
                
            

XML-harjoitus

Tee oma versiosi monivalintakyselystä hyödyntäen alla mainittua XML-tiedostoa. Voit toteuttaa yhden tai useamman seuraavista tai lisätä jotain muuta mitä ei ole mainittu:

• Pisteiden lasku
• Oma vaihtoehdon valinta vastausmahdollisuuksien joukosta
• Valinnan muuttamisen salliminen tai estäminen
• Oikean vaihtoehdon näyttö
• Väärien vaihtoehtojen näyttö
• Ilmoitus siitä onko oma valinta oikein tai väärin
• Perustelu oikealle vaihtoehdolle
• Lomaketta hyödyntäen tai ilman
• Yhden tai useamman sivun toteutus
• Ulkoasu
• Responsiivisuus
• Saavutettavuus
• Lokalisointi
• Vastausvaihtoehdot ovat satunnaisessa järjestyksessä (vaatii XML:n muokkausta)
• Useampi vastausvaihtoehto voi olla oikein (vaatii XML:n muokkausta)

XML-esimerkki

Tarvittava tiedosto: quiz.xml tai quiz-multiple.xml

Harjoitus vaatii palvelinympäristön toimiakseen.

Harjoituksen vaatima fetch-kutsu

Edellyttäen että tiedostot ovat samalla tasolla samassa kansiossa, käyttäen fetch-metodia:

                
fetch("./quiz.xml")
.then(response => {
    if (!response.ok) {
        throw new Error(response.status);
    }
    return response.text();
})
.then(data => {
    const parser = new DOMParser();
    const xml = parser.parseFromString(data, 'application/xml');
    // tee jotakin xml:llä jota voidaan nyt käsitellä kuin DOM-puuta
})
.catch(err => {
    console.log(err);
});