Översikt

Nu är det dags att programmera mot ett av webbläsarens äldsta, men samtidigt, viktigaste API; DOM, Document Object Model.

“Stand up”-vlogg

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

Stödjande inspelningar

HTML Element and the Document Object Model

1h 56m | Presentation

Snowpack nämns men är inaktuellt

Det nämns kort “Snowpack” i denna inspelning och den som är snabb kan få en skymt av tidigare års filstruktur. Bry er inte om detta utan fokusera på den filstruktur som presenteras i och med förra veckans övningsuppgift.

• Introduktion
• Document Object Model (DOM)
• Selecting Nodes (Legacy)
• Selecting Nodes (Selectors API)
• Traversing the DOM
• Manipulatation of the DOM
• Creating Nodes
• Working with attributes
• Separation of concerns
• Styling with Javascript
• HTML Templates

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

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

• Frågor inför handledning

Examinationsuppgift A3

Nu bör du verkligen vara igång och arbeta med examinationsuppgiften. Kanske bör du faktiskt ha som mål att färdigställa denna under denna kursvecka.

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

Utmaningar

Veckans utmaningar hjälper dig att stämma av hur bra du kan DOM och hur JavaScript integreras i webbläsaren.

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. Ge en kort förklaring av vad DOM är och hur det fungerar i webbläsaren.
2. Kan jag från JavaScript modifiera hela webbsidans innehåll och style utifrån JavaScript?
3. Om jag vill lägga till en ul/li lista med JavaScript, hur gör man det?
4. Kan jag skapa en bild i form av ett img element och lägga in i webbsidan med js?
5. Vill du förklara begreppet classlist och hur man kan använda det för att sätta eller ta bort klasser på ett html-element?
6. Förklara vad HTML templates är.
7. Hur förhåller sig html templates när man pratar om webbkomponenter?

Här är en utskrift från hur det såg ut när jag diskuterade ovan frågor med min AI-assistent Ajj.

Tips

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

1. Det viktiga är att slutföra A3. Vänta inte in i det sista. Satsa på att göra din MR redan nu på fredag så har du extra tid, om det behövs.
2. Försök prioritera så du också hinner med att titta på föreläsningen. Du behöver inte komma ihåg allt som händer i föreläsningen men titta lite extra noga på sista delen som handlar om HTML templates.
3. När du tittat på föreläsningarna så finns det en (blå) övningsuppgift där du får möjlighet att testa att programmera mot DOM och med HTML templates i webbläsaren.