08:30 JavaScript 02

• Lister og loops

10:00 Pause

• Events og eventlisteners

10:30

11:30 Frokost

12:00 Fokus på webdocumentary dummy

• Husk at linke til et stylesheet fra index.html

Opgaven i webdocumentary er at tilføje en række effekter via JavaScripts. Her kommer events ind i billedet. JavaScript er også nyttigt, når du gør ting igen-og-igen (løsningen er altid: loop). Her er den magiske formular til sådan et loop:

for (n=0; n<mitArray.length; n++) {
	document.write( mitArray[i]  );
}

I JavaScript kaldes lister arrays. De kan defineres på flere måder. Den mest enkle er denne:

var mitArray = [
    "image01.jpg",
    "image02.jpg",
    "image03.jpg"s
];

Du har nu mulighed for at lave "molekyler" med kode, der kan bruges i din web documentary. I CSS er width: 100% sikkert en rigtig god ide, når billeder skal fylde hele skærmen.

Udfordring:

• du får brug ca. 9 billeder, der gemmes i images.
• Lav en liste med billedernes filnavne i JavaScript (dvs. et array).
• Skriv en funktion, der looper alle billederne ud i dokumentet som en slags galleri. Brug position og floats i CSS til styling af galleriet. Float left er nok en god ide.

Ekstra udfordring:

• Eksperimenter med at tilføje CSS klasser, der starter en CSS-animation via JavaScript når en selvvalgt event sker, fx click, onmouseover etc.
• Husk: optimer din grafik, så billederne ikke er monsterstore.

14:00 Afslutning