Vefforritun – HTML, CSS og JavaScript saman
Tilgangur
Að nemendur læri JavaScript grunnatriði og sjái hvernig HTML, CSS og JavaScript vinna saman til að búa til gagnvirkar vefsíður.
Hæfniviðmið og námsmarkmið
Nemandi getur búið til gagnvirka vefsíðu sem notar HTML fyrir uppbyggingu, CSS fyrir útlit og JavaScript fyrir virkni.
- Nemandi skilur hlutverk HTML, CSS og JavaScript í vefforritun
- Nemandi getur notað JavaScript til að bregðast við atburðum (click, input)
- Nemandi getur breytt efni og útliti vefsíðu með JavaScript
Getustig og forsendur nemenda
- Lestur: Nemendur geta lesið HTML, CSS og enska hugtök.
- Tækni: Nemendur þekkja HTML og CSS (frá 5.-6. bekk) og hafa reynslu af textaforritun (Python).
- Aðrar forsendur: Nemendur þurfa skilning á breytum og skilyrðum úr Python.
Lýsing á kennslustund
Nemendur bæta JavaScript við HTML/CSS vefsíður sínar til að gera þær gagnvirkar. Þeir læra DOM manipulation – hvernig á að breyta vefsíðu með kóða. Verkefnið er að búa til gagnvirka vefsíðu sem bregst við notanda (takkar, inntak, breytingar á útliti).
1. Kynning (10 mín): Kennarinn sýnir vefsíðu sem bregst við smellum – litur breytist, texti birtist, mynd skiptist. Spyr: Hvernig gerist þetta? Svarið: JavaScript! Kennarinn notar samlíkinguna: HTML = beinagrind, CSS = klæðnaður, JavaScript = heilinn. 2. JavaScript grunnur – Saman (20 mín): Kennarinn leiðir nemendur: (a) Bæta við <script> tagi, (b) document.getElementById() – finna hlut, (c) .innerHTML – breyta texta, (d) .style – breyta útliti, (e) onclick – bregðast við smelli. Dæmi: Takki sem breytir lit á bakgrunni. 3. Verkefnavinna (35 mín): Nemendur búa til gagnvirka vefsíðu – velja eitt af: (a) Spurningaleikur: Spurningar birtast, notandi svarar, JavaScript athugar svar og sýnir skor, (b) Litabreyti-síða: Takkar sem breyta litum, letri og myndum, (c) Reiknivél: Inntak fyrir tölur, takkar fyrir aðgerðir, JavaScript reiknar og sýnir. 4. Kynning og samantekt (15 mín): Nemendur sýna gagnvirku vefsíðurnar. Kennarinn dregur saman: HTML + CSS + JS = fullkomin vefsíða!
Verkfæri og hugbúnaður
Vefritlar sýna HTML, CSS og JavaScript hlið við hlið og niðurstöðu í rauntíma.
Developer Tools (F12) gerir nemendum kleift að skoða og breyta vefsíðum og villuleita JavaScript.
Kennsluaðferðir
Kennarinn notar samlíkingu: HTML er beinagrind, CSS er húð og klæðnaður, JavaScript er heilinn og vöðvarnir.
Rannsóknargrundvöllur: Mayer (2009) – Multimedia Learning: Samlíkingar og sjónrænar framsetningar auka skilning á flóknum kerfum.
Kennarinn skrifar JavaScript í rauntíma og nemendur prófa sjálfir með breytingum.
Rannsóknargrundvöllur: Resnick og Rosenbaum (2013) – Tinkering: Tilraunir þar sem nemendur sjá strax niðurstöðu breytinga sinna eflir skilning og sköpunarkraft.
Matsaðferðir
- Verkefnamat: Er vefsíðan gagnvirk? Notar hún HTML, CSS og JavaScript rétt?
- Tæknilegt mat: Getur nemandinn sýnt hvar JavaScript kóðinn er og útskýrt hvað hann gerir?
- Jafningjamat: Félagar prófa og gefa endurgjöf á virkni og hönnun
Aðlögun
Nemendur bæta við localStorage til að geyma upplýsingar, CSS animations eða fleiri JavaScript atburðum.
Nemandinn fær HTML/CSS ramma tilbúinn og þarf aðeins að bæta við JavaScript virkni samkvæmt skýrum leiðbeiningum.
Þverfaglegar tengingar
- Enska – JavaScript notar ensk lykilorð og hugtök
- Myndmennt – hönnun notendaviðmóts og sjónræn frágangur