Webbteknik 3

Beskrivning och uppgifter

I arbetsmaterialet finns det två HTML-dokument och två script-filer. Filerna index.html och script.js är det funktionsbaserade program som du ska utgå från. Du ska arbeta med filerna index2.html och script2.js, där du ska skriva din kod. Förslagsvis börjar du med att kopiera koden från script.js till script2.js, så att du sedan kan modifiera koden i den filen.

a. Konvertera till en objektklass

Du ska göra om koden för bildspelet till en objektklass med nyckelordet class. Alla globala variabler i programmet ska bli egenskaper i objektet. Alla funktioner utom init, ska bli metoder i objektet. Förslagsvis skapar du det hela genom följande punkter:

• Class och constructor
  • Skapa en class kallad ImageViewer. Den första metoden kallar du constructor.
  • Metoden constructor ska ha en parameter, som du kan kalla elem
    • När instanserna sedan skapas ska man skicka med en referens till HTML-elementet för bildspelet.
  • Det som i originalkoden är globala variabler ska nu istället vara egenskaper i objektet. Det innebär följande:
    • Ta bort deklarationerna av alla globala variabler i början av filen.
    • Den initiering av variablerna som i originalkoden finns i init, flyttas till constructor och ändras så att det är egenskaperna som initeras. Egenskapen viewerElem tilldelas endast parametern elem, istället för den tilldelning med querySelector som finns i originalkoden.
  • Flytta även all kod där händelselyssnare läggs på knapparna från init till constructor.
    • Det enda som ska finnas kvar i init är tilldelningen av händelselyssnaren för menyn categoryMenu.
  • Referenserna till funktionerna i händelselyssnarna måste inledas med this, för att referera till metoderna i objektet. För att this då ska referera till rätt objekt, måste de läggas i en anonym funktion.
    • Istället för endast addEventListener("click", prevImg), kan du skriva addEventListener("click", () => this.prevImg()).
• Övriga metoder
  • Flytta alla funktioner utom init, till klassen och justera koden, så att de blir metoder i klassen.
  • Användning av this:
    • Överallt där det refereras till en egenskap eller metod, måste du inleda med this.
    • I autoImg används this för att referera till "auto"-knappen. Det funkar inte, då funktionen ligger i klassen, så du måste modifiera koden, så att den referensen görs på annat sätt.
• Init-funktionen och instans av objektet
  • I början av funktionan init skapar du en instans av ImageViewer och sparar i en lokal variabel. Som parameter skickar du med en referens till elementet med id "largeViewer".
  • Före anropet av openViewer lägger du till din lokala variabel för instansen, så att metoden i objektet anropas.
• Testa
  • När du kommit så här långt, kan du börja testa ditt program. Det ska nu fungera likadant som originalprogrammet.

b. Små bildspel för kategorierna

Du ska här skapa fyra små bildspel för kategorierna. I HTML-filen finns redan kod för dem och i JavaScript ska du skapa fyra instanser av ImageViewer. Du ska också lägga på händelselyssnare, så att man får en snabbvisning av bilderna, då man pekar på bildspelets ruta. Om man klickar på rutan, ska bildspelet i dialogen öppnas med vald kategori av bilder.

• I init-funktionen lägger du in en for-loop som genomlöps fyra gånger och gör följande:
  • Skapa en instans av ImageViewer för ett litet bildspel. Selektor till dess HTML-element kan du få fram genom att lägga samman "#viewer" med loopvariabeln. Spara instansen i en lokal variabel.
  • Öppna bildspelet med metoden openViewer. Den första parametern ska vara en adress till en JSON-fil och den andra parametern ska vara false.
    • Sätt samman filens adress med hjälp av loopvariabeln, för att få in rätt nummer i filnamnet.
    • Med false i den andra parametern anges att bildspelet inte ska öppnas i en modal dialog. De små bildspelen ligger ju i div-element.
  • På bildspelets element lägger du på händelselyssnare för mouseenter och mouseleave och anrop av funktionerna autoStart respektive autoStop. Till autoStart skickar du med önskad tid för bildvisningen, t.ex. 300.
    • Anropen av funktionerna måste läggas i anonyma funktioner, för att this ska fungera i dem.
  • Lägg också på en händelselyssnare för click, så att det stora bildspelet öppnas, då man klickar på ett litet bildspel.

c. Meny för bildval i bildspelet (extramerit, ej obligatorisk)

Du ska nu göra ett tillägg i programmet, så att bildtexterna för vald bildkategori visas i en meny. Då man gör ett val i menyn, ska den valda bilden visas i bildspelet. I HTML-koden finns denna meny i det stora bildspelet, i select-elementet med class "imgMenu".

• I JavaScript-koden tar du i constructor fram en referens till menyn och sparar i en egenskap som du kan kalla imgMenu.
  • Detta kommer ju då också ske för de små bildspelen, där menyn inte finns, men där blir då resultatet null, vilket du sedan utnyttjar för att kontrollera om menyn finns.
• Om menyn finns, lägger du på en händelselyssnare med en funktion som gör att man får fram vald bild.
  • I funktionen får du alltså uppdatera egenskapen imgIx och anropa metoden showImg.
  • Återställ även menyn till första alternativet.
• I getImages kontrollerar du också om menyn finns och i så fall lägger du in option-element med bildernas caption. Lägg även in ett första option-element med texten "Välj bild...".

Publicera dina filer

• Lägg in en länk på den gemensamma ingångsidan till din uppgift.
• 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.

• Alla globala variabler och funktioner (förutom init-funktion) ska ingå i det objekt som beskrivs i instruktionerna ovan.
• Inga globala variabler får finnas i programmet. De ska istället vara egenskaper i objektet.
• Objektklassen ska skapas med class i JavaScript

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.

• Utför punkt c i beskrivningen ovan.