Webbteknik 3

Beskrivning och uppgifter

Du ska skapa JavaScript-koden för en webbsida där man i en meny kan välja olika ämnen. En XML-fil med information om ämne ska läsas in och webbsidan ska uppdateras med information från filen. I XML-koden finns också en referens till en JSON-fil med kurser. Denna JSON-fil ska också läsas in och presenteras på webbsidan.

a. Läs in XML-filen med info om ämnen

Då man i menyn väljer ett ämne, ska man antingen få en kort information om ämnet eller en text om att det saknas info om ämnet. Då ett ämne valts, ska menyn återställas till första alternativet, dvs "Välj ämne...".

• Informationen ska läsas in från XML-filen subjects.xml, som innehåller namn och info för några ämnen. Om det ämne som valts i menyn finns i filen, ska ämnets namn och info skrivas ut, enligt nedanstående bild. Om valt ämne inte finns i filen, ska innehållet i elementet not_awailable skrivas ut.
  • Använd Fetch för inläsning av filen.
• Utskriften ska ske i div-elementet med id "subjectInfo". I js-filen finns det redan en global variabel, subjectInfoElem, som innehåller en referens till detta element.
• Det ska se ut på följande sätt, då ett ämne finns respektive inte finns:
  

b. Läs in en JSON-fil med kursinfo

• I XML-koden för valt ämne finns det ett element med ett filnamn för JSON-filen med ämnets kurser. Du ska nu läsa in den filen.
  • Använd Fetch för inläsning av filen.
• För varje kurs i JSON-koden ska kurskod, titel, antal poäng, beskrivning och lärare presenteras enligt nedanstående bild. Detta ska läggas in med lämpliga HTML-taggar i div-elementet med id "courseList". Använd den globala variabeln courseListElem för att referera till elementet.
  • Observera att alla kurser inte har någon lärare angiven, så det är endast då egenskapen teacher finns som det ska ske en utskrift av lärare.
• Det ska se ut på följande sätt:
  

c. Länkar till ämnes- och kurssidor (ej obligatoriskt)

Som en extramerit, ska även följande utföras:

• I presentation av ämnet, ska ämnets namn göras till en länk. Använd den url som finns i attributet i elementet subject.
• I presentation av kurserna lägger du till en länk till kursens webbplats. Använd url:en i egenskapen url som finns i website
• Det ska se ut på följande sätt:
  

Publicera dina filer

• Lägg mappen för U3 i den mapp du har för alla dina uppgifter.
• Lägg in en länk på den gemensamma ingångsidan till ditt program.
• Publicera på Netlify samt testa att länken och ditt program fungerar.

Krav

Kraven på det du skapar i denna uppgift är följande.

Godkänt

Följande krav måste vara uppfyllda, för att du ska bli godkänd.

• XML- och JSON-filerna i mappen data ska läsas in med asynkron kommunikation genom AJAX med Fetch.
• XML- och JSON-koden ska tolkas och innehåll från ett antal delar av informationen ska presenteras med HTML-kod på webbsidan. Innehållet ska hämtas från XML- respektive JSON-filen, men du behöver vid utskriften strukturera upp det med HTML-element.
• I js-filen i arbetsmaterialet finns två globala variabler. Några fler globala variabler får inte införas.
• Inga andra filer än js-filen får ändras.

Extramerit

Följande är inte obligatoriskt för att bli godkänd, men kan ge en extra förtjänst som tas med i bedömning av kursens slutbetyg.

• Skapa länkar till ämnes- och kurssidor med hjälp av de url:er som finns i XML- och JSON-filerna.