JavaScript — Introduktion genom exempel

1.6 Funktioner och händelsehanterare

Funktioner används för att dela upp programmet i mindre delar och strukturera programkoden. Ibland kan en funktion vara självständig och utföra någon specifik del av programmet, men ofta är programkoden uppdelad i flera funktioner som samverkar. Funktioner kopplas också till olika delar i gränssnittet (knappar och andra element som användaren kan interagera med). Då användaren t.ex. klickar på en knapp, aktiveras en händelse, som anropar en funktion. Man brukar kalla det för ett händelsestyrt program.

Vi kommer titta på flera detaljer om funktioner i kommande exempel, men i detta exempel introduceras uppdelning i funktioner och koppling till element och händelser ("load" och "click").

Sammanfattning

• I exemplet är funktionen init kopplad till händelsen load. Denna händelse inträffar, då hela webbsidan (HTML- och CSS-kod) är inlagd och visas i webbläsarens fönster. Funktionen init blir den första funktionen som körs i programmet.
• Med element.addEventListener( "händelse", funktionsnamn ) kopplar man en funktion till en händelse och ett element. Funktionen anropas då händelsen inträffar på elementet. En sådan funktion kallas för en händelsehanterare.
• För att anropa en funktion i programkoden (dvs utan någon händelse), skriver man funktionens namn följt av parenteser — namn().
• I en funktion som är kopplad till en händelse och element, kan man använda this som en referens till det element användaren klickat på. Detta är speciellt användbart då man har flera element kopplade till samma funktion.
• Genom att lägga in false eller true i egenskapen disabled, kan man aktivera eller inaktivera elementet och dess händelsehanterare. Detta fungerar dock endast för element som finns för formulär (input, select, button, etc.).

Egna övningar

Här följer ett förslag på några egna övningar. Öppna filen test.html och test.js och utför följande:

• Den här gången är test.js tom, så lägg själv in en init-funktion och se till att den anropas på händelsen "load". Skriv något med console.log() i funktionen, så att du kan se att du kommer in i den, då du testar programmet.
  • Klicka på webbläsarens reload-knapp. Varje gång sidan laddas om, ska din utskrift i init-funktionen komma fram i konsolen.
• Skriv en funktion till, med valfritt namn. I funktionen lägger du in någon utskrift med console.log(). Lägg sedan in ett anrop av funktionen i init-funktionen.
• Skriv ytterligare en funktion med valfritt namn och en utskrift med console.log(). I init-funktionen tar du fram en referens till knappen och kopplar den till händelsen "click" och funktionen med hjälp av addEventListener().
  • Varje gång du klickar på knappen, ska din utskrift komma fram i konsolen.
• I init-funktionen tar du fram en referens till knappen och egenskapen disabled. Lägg där in false, så att knappen blir aktiv.
  • Knappen är ju redan aktiv från början, så du ser ingen skillnad, förrän du också utfört nästa punkt.
• I funktionen som är kopplad till knappen använder du this som referens och lägger in true i egenskapen disabled. Då blir knappen inaktiv, då du klickat på den.
  • Ladda om webbsidan, så blir knappen aktiv igen.