Kmom05: DOM och events

By . Latest revision .

När vi använder JavaScript i webbläsaren handlar det mycket om att modifiera HTML-sidan och tillföra effekter. För att göra det manipulerar HTML-sidans DOM träd via JavaScript. Det handlar om att modifiera elementen på sidan och förändra deras style för att uppnå önskat beteende.

Så här kan det se ut när man leker med JavaScript och DOM.

(Detta är instruktionen för kursmomentet och omfattar det som skall göras inom ramen för kursmomentet. Momentet omfattar cirka 20 studietimmar inklusive läsning, arbete med övningar och uppgifter, felsökning, problemlösning, redovisning och eftertanke. Läs igenom hela kursmomentet innan du börjar jobba. Om möjligt – planera och prioritera var du vill lägga tiden.)

#Läsanvisningar

(ca: 4-6 studietimmar)

#Kurslitteratur

Det finns inga läsanvisningar till kurslitteraturen.

#MDN

Läs följande:

  1. I samlingen om “Web technology for developers” finns en sektion “Web APIs” där vi hittar information om “Document Object Model (DOM)”. Bekanta dig översiktligt med det dokumentet och dess innehåll.

  2. Läs igenom följande guider relaterade till DOM.

#Video

Titta på följande:

  1. Videoserien Lär dig JavaScript är tätt kopplat till kursmaterialet. Kika igenom serien under kursens gång.

  2. Se JavaScript-gurun Douglas Crockford i slutet om historian om JavaScript: “Crockford on JavaScript - Part 5: The End of All Things”.

#Övningar & Uppgifter

(ca: 12-16 studietimmar)

#Uppgifter

Dessa uppgifter skall utföras och redovisas.

  1. Gör uppgiften “JavaScript, DOM och Events”. Spara koden i me/kmom05/dom.

#Extra

Gör uppgiften “Memory - rita flaggor med JavaScript vid DOM”. Spara koden i me/kmom05/flag4.

#Resultat & Redovisning

(ca: 1-2 studietimmar)

Läs instruktionen om hur du skall redovisa.

Se till att följande frågor besvaras i redovisningstexten.

  • Hur upplevde du DOM-uppgiften, var något svårt eller utmanande?
  • Beskriv vad du gjorde som sista uppgift i DOM-uppgiften.
  • Vad anser du om Crockfords videor, har du tittat på dem och gav de något?
  • Vad är din TIL för det här kursmomentet?

#Revision history

  • 2018-11-26: (E, lew) Moved memory to extra.
  • 2017-10-10: (D, mos) Genomgång inför ht17.
  • 2016-03-15: (C, mos) Lade till videoserie med “Lär dig JavaScript”.
  • 2015-01-19: (B, mos) Bort ruta om kursutveckling och bort länk till youtube-serie.
  • 2014-10-06: (A, mos) Första utgåvan för javascript1 kursen.

Document source.