Vefþróun – Gagnvirk vefsíða með formi og JavaScript
Tilgangur
Að nemendur læri að búa til gagnvirka vefsíðu með eyðublöðum (forms) og JavaScript sem vinnur úr gögnum frá notanda.
Hæfniviðmið og námsmarkmið
Nemandi getur búið til vefsíðu með eyðublaði sem tekur á móti gögnum og notar JavaScript til staðfestingar og úrvinnslu.
- Nemandi getur búið til HTML form með mismunandi inntakssvæðum (text, number, select, radio)
- Nemandi getur notað JavaScript til að staðfesta inntak (validation)
- Nemandi getur unnið úr gögnum úr formi og birt niðurstöður á vefsíðu
Getustig og forsendur nemenda
- Lestur: Nemendur geta lesið HTML, CSS og JavaScript kóða.
- Tækni: Nemendur þekkja HTML/CSS grundvallaratriði og JavaScript grunnatriði (frá 8. bekk).
- Aðrar forsendur: Nemendur þurfa skilning á inntaki/úttaki og rökhugsun.
Lýsing á kennslustund
Nemendur byggja á HTML/CSS/JavaScript þekkingu og læra að búa til eyðublöð sem safna gögnum frá notanda og JavaScript sem staðfestir og vinnur úr gögnunum. Verkefnið er að búa til hagnýta vefsíðu – t.d. könnun, skráningarform eða reiknivél – sem bregst skynsamlega við inntaki notanda.
1. Kynning (10 mín): Kennarinn sýnir dæmi um eyðublöð á netinu (skráning á síðu, könnun, pöntun). Spyr: Hvað gerist þegar þú ýtir á 'Senda'? Hvernig veit síðan að þú skrifaðir rétt netfang? Svarið: JavaScript athugar gögnin! 2. HTML Forms – Saman (20 mín): Kennarinn leiðir nemendur: (a) <form> tagið og mismunandi input tegundir (text, number, email, select, radio, checkbox), (b) <label> og skipulag forms, (c) <button> til að senda. Nemendur búa til prófunar-eyðublað. 3. JavaScript staðfesting (15 mín): Kennarinn sýnir hvernig á að: (a) Lesa gildi úr formi (document.getElementById().value), (b) Athuga hvort reitur er tómur, (c) Sýna villuboð ef inntak er rangt, (d) Sýna staðfestingu ef allt er rétt. 4. Verkefnavinna (25 mín): Nemendur velja og forrita eitt af: (a) Skráningarform (nafn, netfang, aldur) með staðfestingu, (b) Könnun um uppáhalds fag með niðurstöðum birt á síðunni, (c) BMI reiknivél sem tekur hæð/þyngd og birtir niðurstöðu. 5. Kynning og samantekt (10 mín): Nemendur sýna vefsíður. Kennarinn tengir við raunveruleikann: Öll form á netinu nota þetta!
Verkfæri og hugbúnaður
VS Code er faglegur ritill sem nemendur geta notað til lengri tíma. Replit er valkostur án uppsetningar.
Console í Developer Tools er ómissandi til JavaScript villuleitar.
Kennsluaðferðir
Nemendur búa til vefsíðu sem leysir raunverulegt vandamál eða þjónar tilgangi, sem eykur áhugahvöt.
Rannsóknargrundvöllur: Krajcik og Shin (2014) – PBL: Hagnýt verkefni tengd lífi nemenda auka innri áhugahvöt og dýpri nám.
Kennarinn sýnir grunnformið saman og nemendur bæta við eigin virkni sjálfstætt.
Rannsóknargrundvöllur: Pearson og Gallagher (1983) – Gradual Release of Responsibility: Smám saman aukið sjálfstæði leiðir til betri námsárangurs.
Matsaðferðir
- Verkefnamat: Virkar formið? Athugar JavaScript rétt inntak? Eru villuboð skýr?
- Tæknilegt mat: Er kóðinn skipulegur? Eru HTML, CSS og JS vel aðskilin?
- Sjálfsmat: Nemandinn metur hvað hann gerði vel og hvað hann myndi gera öðruvísi
Aðlögun
Nemendur bæta við localStorage til að geyma gögn, regex (regular expressions) staðfestingu eða CSS animations þegar form er sent.
Nemandinn fær HTML formið tilbúið og einbeitir sér aðeins að JavaScript staðfestingunni með skýrum leiðbeiningum.
Þverfaglegar tengingar
- Stærðfræði – útreikningar og formúlur (BMI, meðaltöl)
- Samfélagsfræði – kannanir og gagnaöflun