Översikt

Efter många veckor av programmerande i Node-plattformen är det nu dags att börja titta på hur vi kan ta våra program till webben! Vi inleder denna vecka med att titta på webbläsaren, hur den är uppbyggd och hur vi bör ladda in våra skript i webbläsaren.

“Stand up”-vlogg

Förra årets vlogg för den som vill få en extra introduktion till veckan och till delkurs B.

Stödjande inspelningar

Webbläsaren och Javascript

Vi tittar på hur webbläsaren är uppbyggd och vad vi ska tänka på när vi länkar in javascript i webbläsaren.

1h 13m | Presentation

Varför Javascript i webbläsaren?

6m | Presentation

Introduktion till “Custom elements” och webbkomponenter

Kan vi bygga våra egna html element? Absolut! Vi tittar på hur.

19m | Presentation

Läsanvisningar

Under läsanvisningar hittar du veckans kapitel som ska läsas i kurslitteraturen. Planera upp och dela upp läsningen under veckan.

Övningar

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

Handledning

• Frågor inför handledning

Examinationsuppgift A3

Nu är det hög tid att börja arbeta med examinationsuppgift A3.

Läs mer om “Examinationsuppgift A3 - Tjugoett” här.

Utmaningar

Veckans utmaningar handlar om webbläsaren som programmeringsmiljö.

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. Jag håller på och lär mig hur man skapar egna html-element med hjälp av “custom elements” och jag vill bygga upp ett exempelprogram för att utforska hur det fungerar. Jag kommer ge dig instruktioner så kan du föreslå kodlösningar och kommentera dem så kan jag lära mig från dig, ok?
2. Jag vill börja med ett enkelt element <hello-message> som bara skriver ut en hälsning i sitt Shadow DOM. Hur hade du gjort?
3. Nu vill jag att elementet ska kunna ta emot ett attribut name och visa hälsningen med det namnet istället för en generisk text.
4. Hur kan jag reagera på att attributet name ändras efter att elementet redan är infogat i sidan?
5. Jag vill skapa ett andra element som ärver från mitt hello-message-element och lägger till en knapp som byter hälsningsspråk.
6. Kan du visa hur jag laddar in mina script-filer i huvuddokumentet på ett sätt som fungerar bra ihop med moduler (type="module")?

Tips

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

1. Nu behöver du komma igång med A3. Det är fortfarande drygt 2 veckor till inlämning, men samtidigt så startar kursen upp med nya saker så håll farten uppe och gör så mycket av A3 som du kan. Det kan vara skönt att ha tid innan inlämningen för att finslipa din kod och testa så att allt fungerar.
2. Försök prioritera så du också hinner med att titta på de tre föreläsningar som finns. Du behöver inte börja koda i webbläsaren än, men det är värdefullt om du redan nu börjar titta på hur det fungerar.
3. När du tittat på föreläsningarna så finns det en (grön) övningsuppgift där du får möjlighet att testa att programmera i webbläsaren och använda den miljön för utveckling. Missa inte att övningsuppgiften har ett inspelat lösningsförslag.