Plaatjes kijken

Workshop week 4

In deze workshop gaan we met javaScript een script schrijven, waarmee
we plaatjes kunnen wisselen zonder de pagina opnieuw te laden.
We maken op de meest simpele manier een Image Gallery!

Voor deze workshop kan je gebruik maken van de lesbrief.
Maak gebruik van online javaScript referentielijsten en je boek.

Het javaScript komt in een extern js bestand
Maak de code zo compleet en overzichtelijk mogelijk
Denk bv aan puntkomma's en object notatie
Schrijf variabele namen met kleine letters zonder spaties
Voorzie het script van commentaar
Gebruik een extern css bestand voor de presentatie

Opdracht

Maak een Image Gallery.
Gebruik hiervoor een lijst met linken naar plaatjes en een plaatje ter grote
van de plaatjes die je wil laten zien en een plek voor de titel.
Belangrijk bij deze opdracht zijn;

het gebruik van this
en return false

Je zult alle kennis uit de voorgaande lessen moeten gebruiken;
Events, getElementById, get- en setAttribute, nodes en functies met argumenten.
En natuurlijk weer CSS.

De beschikbare tijd zal als volgt worden ingedeeld:

±10min – Pseudo-code schrijven (wat moet er gebeuren in gewone schrijftaal)
±10min – Aanmaken XHTML, CSS en JavaScript bestanden.
±40min – Scripten en testen
±20min – Van CSS voorzien en debuggen

1. Pseudo-code schrijven

Schrijf in Jip & Janneke taal op wat jij denkt dat er moet gebeuren.
Wat moet er bepaald worden?
Wat en hoe moet er informatie doorgegeven worden?
Waar en wanneer zie ik het resultaat?

2. Aanmaken bestanden

Maak een valide XHTML bestand met linken naar de externe css en js bestanden.
Data struktuur, vormgeving en gedrag, strikt gescheiden.

3. Scripten en testen

Werk zo zelfstandig mogelijk, er zijn altijd verschillende manieren om iets te bereiken.
Je buurman heeft niet altijd de beste oplossing!
De kennis beklijft het best als je, je eigen logica volgt en zelf tot inzichten komt.

4. Debuggen

Uiteindelijk heb je drie bestanden; een .html-, een .css- en een .js bestand.
Zorg dat deze goed samen werken. Test alles nog een keer als het online staat.
Tip! Gebruik FireFTP Als ftp programma (plugin voor fireFox - binnen brouwser dus
platform onafhankelijk)