6.5 Tillämpningar
Denna gång handlar det om två tillämpningar med drag-and-drop. Det första är en modifiering av ett program som tagits upp i ett tidigare exempel, fast då med en annan form av interaktion. Det andra är en ny tillämpning, fast delar av den har tidigare tagits fram i andra exempel.
- Ett litet pussel, som nu läggs med drag-and-drop.
- Ett spel eller kunskapstest där ord och bilder på städer väljs slumpmässigt. Man ska sedan dra stadsnamn till bilderna.
27 min.
Sammanfattning
- Programmen skapas genom en kombination av HTML, CSS och JavaScript (liksom alla program i denna exempelsamling).
- Då man skapar programmet bestämmer man först funktionalitet och interaktivitet. Utifrån det designar man gränssnitet, som sedan implementeras i HTML och CSS. En del visuell feedback kan kanske helt skapas med CSS och då bör man göra det istället för med JavaScript, eftersom det har att göra med utseendet och stilen.
- Resten av funktionaliteten skapas med JavaScript. Då börjar man med att se över vilka händelser som finns och kopplar samman element med funktioner för händelserna. Man ser också över vilken global data man behöver i variabler och konstanter.
- Därefter får man implementera de olika funktionerna och eventuellt strukturera upp det i flera funktioner. Det kan vara bra att börja med att skriva en punktlista för varje funktion, där man på vanlig svenska skriver ner vad som ska göras.
- Då man skriver programkoden bör man göra det i små steg och testa efter varje steg.
Egna övningar
Det finns inga övningar denna gång, men studera exemplen och experimentera på egen hand med koden i dem.