Översikt

Förra veckan var en intensiv vecka med examinationer och webbkomponenter. Ingen rast, ingen ro. Denna vecka tar du dig an en mycket viktig del när det kommer till programmering i JavaScript, händelsestyrd programmering! Veckans fyra artiklar går igenom hur webbläsaren kör din kod, hur du lyssnar på händelser, hur webbkomponenter tar emot och skickar händelser och hur du testar dem. Information om veckans upplägg annonseras löpande i kursens Zulip-kanal.

Veckostart med händelser

Tisdagen i kursvecka 11 var det första passet i läsperiod två, och den första kvarten ägnades åt 1DV025. Mats och Mikael gick igenom veckans tema, händelsestyrd programmering, och påminde om B1 på torsdag och omexaminationen av A2 på fredag. De avslutade med råd om hur du kan lägga upp veckan kring artiklarna och övningsuppgiften Bart Board.

Video

2026-11-10 16:15

Sammanfattning

Om passet

Tisdagens pass i kursvecka 11 var det första i läsperiod två, och det första där 1DV025 och 1DV026 delar på samma pass. Mats och Mikael ägnade den första kvarten åt 1DV025: veckans tema, B1 på torsdag, omexaminationen av A2 och hur du kan lägga upp veckan. Resten av passet handlade om 1DV026 och ingår inte i inspelningen.

Händelsestyrd programmering

Kursen har tjuvstartat med händelser tidigare, men nu ägnas en hel kursvecka åt dem. Mats beskriver det som ett paradigmskifte: koden körs inte längre uppifrån och ned, utan det är användaren som styr vilken kod som körs genom att utlösa händelser i gränssnittet. Mikael föreslog benämningen händelsestyrd programmering, och Mats höll med. Begreppet återkommer i andra kurser, närmast i parallellkursen 1DV026 och längre fram i Java-kursen.

Veckans fyra artiklar handlar om händelser och systemet som JavaScript är uppbyggt kring:

1. Händelseloopen.
2. Händelser i DOM:en, med händelsens väg genom trädet och de två metoderna preventDefault() och stopPropagation().
3. Händelser i webbkomponenter, en fortsättning på förra veckans webbkomponenter.
4. Att testa webbkomponenter, en orientering utanför kursens ram.

Varje artikel har en tidsuppskattning, så att du kan planera din tid. Händelseloopen tar ungefär en kvart att läsa. Artiklarna har frågor att fundera på, och koden kan du kopiera och undersöka i din egen lilla testmiljö. Några artiklar har dessutom deluppgifter insprängda i texten.

B1 på torsdag

Examinationsuppgift B1 är ett quiz, upplagt på samma sätt som A1, och är öppen torsdag 12 november kl. 13.15–15.00. Testet handlar om webbläsarens beståndsdelar och hur de samverkar, det som togs upp i kursvecka 8 och i artiklarna kring det. Mikael kallade det en rivstart på läsperioden. Datum för omexaminationerna hittar du på sidan om B1.

Omexamination av A2 och förkunskapskraven

Deadline för omexaminationen av A2, Beskrivande statistik, är fredag 13 november kl. 17.00. Därefter finns ett tillfälle till i början av januari och ett sista i juni. Mats betonade att A2 är en viktig examination, eftersom den ingår i förkunskapskraven till många kurser. Den sista omexaminationen av A1 ligger också i början av januari, innan Java-kursen i läsperiod tre går igång. Har du inte klarat A1 och A2 får du inte läsa Java-kursen. Formellt krävs hela delkurs A, alltså även A3. Tidigare år har dispens beviljats, men avsteg bedöms individuellt, och förkunskapskraven finns för att visa att du har de färdigheter som krävs för att tillgodogöra dig kommande kurser.

Mikael tycker att du som ligger på gränsen ska skriva upp A2 på en gul lapp på skrivbordet. Att behöva förlita sig på undantag är stressigt, och det vill du undvika. Glöm ändå inte veckans händelser. Känner du att du tappar taget räcker det med ett meddelande på Zulip för att få tips om vad du ska fokusera på, eller individuell handledning, så att du kommer tillbaka på banan.

Bart Board

Veckans övningsuppgift, Bart Board, är inspirerad av introt till Simpsons. Här organiserar du webbkomponenten i flera filer, på det sätt som komponenter i kursen ska organiseras, i stället för att skriva allt i en fil som i en del tidigare exempel. Till uppgiften finns en inspelad genomgång av lösningen. Den har några år på nacken, och Mats har sedan dess ändrat hur webbkomponenterna organiseras, så det moderniserade lösningsförslaget skiljer sig något från det som visas i inspelningen.

Mikael har inte gjort uppgiften själv (“jag är lärare, det är min bonus”), men har tittat på den och på inspelningen.

Hur du kan lägga upp veckan

Mats råd är att läsa artiklarna först. Mikael hade läst artiklarna och sedan byggt egna små exempelprogram vid sidan om. Tycker du att det är svårt att komma på egna exempel har du Bart Board, som knyter ihop händelsehanterare och webbkomponenter.

Framåtblick

Webbkomponenter och händelsehanterare är baskunskap som de närmaste veckorna bygger vidare på. Nästa vecka handlar om asynkron JavaScript och veckan därefter om komposition av webbkomponenter. Därefter tycker Mats att puckeln i kursen är passerad. Det blir inte superlätt, men mängden stoff och arbetet som krävs för att hålla takten minskar när ni kommer in i december. Kanske, gissade Mats, för att det blir tyngre i parallellkursen 1DV026 i stället.

Veckans artiklar och exempel

Veckans teori finns samlad i fyra artiklar. Läs dem i ordning; varje artikel bygger på den föregående. Mellan den tredje och den fjärde följer du hur en komponent skickar data uppåt, steg för steg.

1. Händelseloopen – huvudtråden, anropsstacken, task queue och loopen som binder ihop dem, varför sidan fryser och hur timers och web workers passar in.

2. Händelser i DOM:en – att lyssna och sluta lyssna, händelseobjektet, händelsens väg genom trädet, delegering och skillnaden mellan preventDefault() och stopPropagation().

3. Händelser i webbkomponenter – var en komponents lyssnare och timers hör hemma, händelser från shadow DOM och hur en komponent skickar data uppåt med egna händelser.

4. Exemplet Klickräknaren – händelser fortsätter där klickräknaren från kursvecka 10 slutade. Du följer fem steg, ett per tagg, där <click-counter> skickar händelsen countchange och en enda lyssnare till slut hör alla räknare. Du ser varför reset() inte skickar någon händelse, när bubbles behövs och varför composed inte behövs. Exemplet avslutas med tester av händelsen.

5. Att testa webbkomponenter – en orientering, utanför kursens ram, om komponenttester med Vitest i jsdom och i en riktig webbläsare, och om hur attribut, händelser, livscykeln och timers testas.

Läsanvisningar

Under läsanvisningar hittar du veckans kapitel som ska läsas i kurslitteraturen. Planera upp och dela upp läsningen under veckan. Denna vecka har kursledningen kryddat med två externa föreläsningar!

Övningar

Under Övningsuppgifter hittar du övningsuppgifter som det är lämpligt att du arbetar med under veckan.

PS. Övningsuppgiften innehåller en inspelad diskussion kring lösningen av övningsuppgiften. Missa inte att titta på den.

Äldre inspelningar

Inspelningarna från 2020 och 2021 tar upp samma stoff som artiklarna, men är delvis inaktuella. Bland annat läggs lyssnare i dem till på andra ställen än i kursens övningsuppgifter i dag. Artiklarna räcker, men vill du se genomgångarna i rörlig bild finns de kvar här. Sammanfattningar och presentationer till inspelningarna hittar du i samlingen av inspelningar för delkurs B.

2020-11-03 1:42:50

Samtidighetsmodellen och eventdriven programmering: stacken, kön och händelseloopen, timers, lyssnare, delegering, propagation och web workers. Motsvarar artiklarna Händelseloopen och Händelser i DOM:en.

2021-12-03 29:43

Webbkomponenter – händelser: lyssnare i livscykeln och egna händelser. Motsvarar artikeln Händelser i webbkomponenter.

Handledning

Skicka gärna in frågor på förhand via formuläret som du når här:

• Frågor inför öppen handledning

Examinationsuppgift B1

Dags för kursens andra quiz-baserade examinationsuppgift. Läs mer om examinationsuppgift B1 här.

Examinationsuppgift B2

Även om du har en veckas teori kvar innan du kan ge dig an examinationsuppgift B2, kan det redan nu vara bra att läsa igenom uppgiften så att du vet vad som komma skall.

Studiefrågor

Här är ett antal frågor som du kan försöka besvara och diskutera tillsammans med din AI-assistent. Tveka inte att lyfta någon av frågorna till handledningen för att fortsätta diskussionen med lärare och studiekamrater.

1. Vad gör händelseloopen? Varför kan en lång beräkning i en lyssnare få hela sidan att frysa, och vad kan du göra åt det?
2. Varför skrivs A, C, B ut om B skrivs ut med setTimeout() och fördröjningen 0?
3. Vad är skillnaden mellan event.target och event.currentTarget, och hur utnyttjar delegering den skillnaden?
4. Vad är skillnaden mellan preventDefault() och stopPropagation()? Varför ska den senare användas sparsamt?
5. Varför läggs en komponents lyssnare till i connectedCallback() och tas bort i disconnectedCallback()? Vad kan hända om en lyssnare på document aldrig tas bort?
6. Hur skickar en komponent data uppåt till den som använder den? När behövs bubbles och composed på en egen händelse?
7. Vad kan du testa i en komponent med jsdom, och vad kräver en riktig webbläsare? Hur testar du att en komponent skickar en händelse?

Tips

Här följer tips till hur du kan prioritera bland kursmaterialet för att komma igång med veckan.

1. Läs veckans fyra artiklar i ordning. Inspelningarna är frivilliga, men de två externa föreläsningarna om händelseloopen under läsanvisningarna är väl värda att se.
2. Om du har glömt vissa saker så kan du behöva gå tillbaka och fräscha upp din kunskap om webbkomponenter från kursvecka 10.
3. Gör övningsuppgiften Bart Board. Den tränar precis det den tredje artikeln går igenom: lyssnare med ett AbortController, en timer som stoppas och en egen händelse. Det förbereder dig inför examinationsuppgift B2.
4. Missa inte att titta på den inspelade föreläsningen som visar ett förslag på facit till veckans övningsuppgift. Du får se diskussion om webbkomponentens olika delar.