Lektionsplanering: Skriptspråk och klientsidestekniker

Årskurs: Gymnasiet

Ämne: Webbutveckling 3

Tema: Skriptspråk och klientsidestekniker

Koppling till styrdokument

Centralt innehåll

Denna lektion syftar till att ge en djupgående förståelse för klientsideprogrammering med fokus på JavaScript. Eleverna lär sig om grundläggande syntax, hur man manipulerar DOM (Document Object Model) och hur man skapar interaktiva funktioner på webbsidor.

Kunskapskrav

Eleven ska kunna använda JavaScript för att skapa dynamiska och interaktiva webbapplikationer, samt förstå grundläggande koncept inom klientsideprogrammering.

Lärarledda instruktioner

Introduktion till JavaScript (10 min)

• Förklara vad JavaScript är och dess vikt för att skapa interaktivitet på webben.
• Diskutera skillnaden mellan server-side och client-side programmering.
• Ge exempel på hur JavaScript används i praktiska situationer.

Grundläggande JavaScript-syntax (15 min)

• Gå igenom grundläggande syntax: variabler, datatyper, funktioner och operatorer.
• Demonstrera hur man skriver ett enkelt JavaScript-program och hur det integreras med HTML.
• Diskutera hur man kan använda kommentarsrader för att förbättra kodens läsbarhet.

Manipulering av DOM (15 min)

• Förklara vad DOM är och hur JavaScript kan manipulera det.
• Demonstrera hur man kan ändra HTML-element och stilar med JavaScript.
• Visa exempel på hur man lägger till och tar bort element från en webbsida dynamiskt.

Reflektion och diskussion (10 min)

• Sammanfatta viktiga punkter om JavaScript och dess roll i klientsideprogrammering.
• Diskutera hur eleverna kan applicera sina kunskaper om JavaScript i egna projekt.
• Svara på eventuella frågor från eleverna.

Aktivitet

Eleverna delas in i grupper och ges i uppgift att skapa en interaktiv webbkomponent (t.ex. en knapp som förändrar text eller bild när man klickar på den). De ska använda JavaScript för att implementera funktionaliteten och skriva en kort beskrivning av sin kod. Varje grupp presenterar sin komponent för klassen.

Exit-ticket

• Vad är rollen av JavaScript på en webbplats? (Att lägga till interaktivitet och dynamiska funktioner.)
• Nämn en grundläggande datatyp i JavaScript. (Sträng, heltal, array, boolean.)
• Vad står DOM för och vad är dess funktion? (Document Object Model; en representation av HTML-dokumentet som kan manipuleras med JavaScript.)
• Hur kan man använda JavaScript för att ändra en HTML-element? (Genom att referera till elementet och använda metoder för att ändra dess innehåll eller stil.)
• Ge ett exempel på en händelse som kan hanteras med JavaScript. (Click, hover, keypress.)

Hemuppgift

Som hemuppgift ska eleverna skriva ett JavaScript-skript som tar emot användarinmatning (exempelvis via en prompt) och uppdaterar webbplatsens innehåll baserat på den inmatningen. De ska dokumentera sin kod och reflektera över hur de kan förbättra den. Skriv “Hemuppgift” så tar jag fram en hemuppgift åt dig.

Citat

”JavaScript är det språket som gör webben levande.” – Okänd

Citatet betonar hur JavaScript tillför dynamik och interaktivity i webbupplevelsen.

Nästa lektion

Förslag på tema för nästa lektion: Användning av externa webbtjänster och API:er

Den föreslagna lektionen syftar till att introducera hur man integrerar externa webbtjänster i webbapplikationer och hur man använder API:er för datautbyte. Skriv “Nästa” så tar jag fram nästa lektion.