Webbutveckling · område 6

Inför prov 4

Prov i JavaScript och DOM, skriftligt och utan dator. Den här sidan säger vad provet är, vad som kan komma och hur du pluggar. Själva innehållet står i guiden – det är dit varje rad här pekar.

17 mars Prov 4 – JavaScript och DOM, kl 11:05 Onsdag, dagen efter inlämningen av Projekt 5. 50 minuter.

Så ser provet ut

Skriftligt, 50 minuter. Antal frågor, poäng och betygsgränser står på provbladet
Ingen dator, inga anteckningar, ingen mobil. Du får penna och papper
Provet prövar tre saker: att läsa kod, att förutsäga vad den gör, och att anpassa den. Det blandar HTML, CSS och JavaScript: skripten, HTML:en som styr dem och CSS-klasserna de sätter
Koden kommer ur referensprojektet, fyrsajten med sina tre skript: ljudmodulen, fältet som visar att det är rätt ifyllt och det mörka läget
Att förutsäga är att följa koden rad för rad och säga vad som händer, som i läsövningen den 23 februari. Ett resonemang som följer koden är det som visar att du kan läsa den
När du anpassar skriver du för hand. Det som räknas är att namnen stämmer tecken för tecken, och att citattecken, parenteser, klamrar och semikolon sitter där de ska
Provet prövar koden. Vilka ljud en sajt ska ha, hur långa rörelserna ska vara och varför är Gränssnittsdesigns, och prövas inte här

Samma kod som i din egen sajt

Provet ligger dagen efter inlämningen av en anledning. Ljudmodulen, attributen som styr den och klassen som ett skript sätter har du just kopplat in och skrivit i din egen sajt. Den som förstått varför raden står där den står klarar också att förutsäga vad den gör på papper.

Vad som kan komma

Områdets första sex pass. Sista kolumnen är där du läser på.

Lektion	Du ska kunna	Läs
Vad JavaScript gör	Peka ut variabel, funktion, parameter, anrop, villkor, loop och händelse i ljudmodulen. Skilja på `const` och `let`, och följa ett klick från knappen till ljudet	Avsnitt 1
DOM – dokumentobjektsmodellen	Förklara skillnaden mellan HTML-filen och DOM. Hitta element med `querySelector` och `querySelectorAll`, och ändra text, klass och attribut. Veta vad `null` betyder	Avsnitt 2
Händelser	Läsa och skriva en rad med `addEventListener`: vem, vilken händelse, vad. Säga varför `onclick` inte används, läsa `falt.js` och regeln för `input.godkant`, och läsa ett felmeddelande	Avsnitt 3
Koppla in och anpassa en modul	Skriva `script`-raden med `defer` och säga vad `defer` gör. Veta vad i ljudmodulen som är säkert att ändra, och vad `morkt-lage.js` gör med klasserna, `aria-pressed` och `localStorage`	Avsnitt 4
När JavaScript inte finns	Säga vad som händer med fyrsajten när JavaScript är avstängt, och varför. Förklara `hidden` på lägesknappen, och varför innehåll inte får skapas av skriptet	Avsnitt 5
Ljud och mikrointeraktioner byggs in	Peka på vad varje cell i en överlämningstabell blir i koden: attributen, filen, händelsen och talen i `transition`	Avsnitt 6

Utmaningarna i avsnitt 7 bygger på samma kod som resten. Läs dem om du siktar högt.

Vad som inte prövas

Vilka ljud och rörelser en sajt ska ha, och varför. Ljudfamiljer, tidskurvor och mikrointeraktionens delar är Gränssnittsdesigns, och du lärde dig dem där
Att spela in och redigera ljud. Det hör också till Gränssnittsdesign

Så pluggar du

Sex saker, i den här ordningen. Den femte är den som ger mest och som flest hoppar över.

Plugglista

Kört ordträningen i guidens snabbreferens tills du klarar hela listan
Läst avsnitt 1 till 6 en gång var
Öppnat referensprojektets tre skript i skript/ och läst kommentarerna, och sedan letat upp det de arbetar med: data-ljud och hidden på lägesknappen, och .godkant, .morkt och .lage-knapp[aria-pressed="true"] i stil.css
Följt ett klick på papper genom ljudmodulen och genom morkt-lage.js, rad för rad, tills du kan säga vad som körs när sidan laddas och vad som körs vid varje klick
Skrivit koden för hand på papper minst en gång, utan att titta: en script-rad med defer, en lyssnare som byter en klass med classList, och CSS-regeln för klassen
Gått igenom din egen sajt och pekat på raden i koden som uppfyller varje ska-krav i Projekt 5

Kryssen sparas i din webbläsare.

Punkt fem är den som avgör

Att läsa kod och att skriva kod är två olika färdigheter. Har du aldrig skrivit en lyssnare utan en kodeditor som fyller i åt dig märker du det för första gången under provet. Det är sällan orden som sitter löst – det är }); sist i lyssnaren, citattecknen runt selektorn och punkten före klassnamnet.

Så kan det se ut när du övar

Ta en sajt om något helt annat och läs samma mönster. Här ett bibliotek, där knapparna för bokhyllorna markeras när man väljer dem:

<button class="hylla" type="button" data-hylla="deckare">Deckare</button>
<button class="hylla" type="button" data-hylla="poesi">Poesi</button>

// Varje hyllknapp växlar klassen vald. Hur det ser ut står i stil.css.
const hyllknappar = document.querySelectorAll("[data-hylla]");

for (const hyllknapp of hyllknappar) {
  hyllknapp.addEventListener("click", function () {
    hyllknapp.classList.toggle("vald");
    console.log(hyllknapp.dataset.hylla);
  });
}

.hylla.vald {
  outline: 0.2rem solid currentColor;
}

Följ ett klick på Poesi på papper, och sedan ett klick till på samma knapp. Skriv vad som körs, vilka klasser knappen har efteråt och vad konsolen skriver. Kontrollera sedan mot guiden: när körs loopen, och när körs lyssnaren? Skriv till sist av koden för hand utan att titta, och jämför tecken för tecken.

Om du är sjuk på provdagen

Hör av dig samma dag, inte veckan efter. Du får skriva provet vid ett annat tillfälle, men du behöver komma överens med mig om när.