1.1 Exempel på ett JavaScript-program
Syftet med exemplet är att visa hur JavaScript kan ge funktionalitet på en webbsida. Det finns kopplingar mellan HTML och JavaScript, genom att man i HTML hänvisar till en JavaScript-fil i ett script-element. I JavaScript-koden kommer man åt de olika HTML-elementen genom referenser till namnen i id- eller name-attributen. Gränssnittet för programmet är i detta fall ett formulär som skapats i HTML och stilsatts med CSS.
Vi tittar nu främst på strukturen och samverkan mellan HTML, CSS och JavaScript. Sedan kommer vi gradvis gå in på detaljer i JavaScript i de följande exemplen på denna webbplats.
7 min.
Sammanfattning
En kort sammanfattning av vad som tas upp i exemplet:
- Programmet är uppbyggt genom HTML, CSS och JavaScript i samverkan.
- Det som knyter ihop språken är DOM (Document Object Model).
- Det sker en dynamisk uppdatering av innehållet på webbsidan, dvs olika delar uppdateras, utan att sidan laddas om.
- Användaren interagerar med delarna i gränssnittet (formuläret i detta fall) och genererar därmed olika händelser. Dessa händelser aktiverar olika funktioner i programkoden.
Egna övningar
Här följer ett förslag på några egna övningar.
- Öppna de olika filerna i exemplet och orientera dig i strukturen. Du förväntas dock inte förstå JavaScript-koden nu, utan det kommer senare. Just nu studerar du endast upplägget med de olika filerna, samband mellan HTML, CSS och JavaScript och tittar bara översiktligt på JavaScript-koden.