JavaScript-körningskod och guide

Att designa din webbsida med JavaScript kräver uppmärksamhet på i vilken ordning din kod visas och oavsett om du kapslar in kod i funktioner eller objekt, som alla påverkar koden i vilken ordning körs.

Eftersom JavaScript på din sida körs baserat på vissa faktorer, låt oss överväga var och hur du lägger till JavaScript till en webbsida.

Det finns i princip tre platser där vi kan bifoga JavaScript:

• Direkt in på sidan
• Direkt in i sidans kropp
• Från en händelsehandlare / lyssnare

Det gör ingen skillnad om JavaScript är det på webbsidan själv eller i externa filer som är länkade till sidan. Det spelar ingen roll om händelseshanterarna är hårkodade på sidan eller läggs till av JavaScript själv (förutom att de inte kan triggas innan de läggs till).

Vad betyder det att säga att JavaScript är direkt i sidans huvud eller kropp? Om koden inte bifogas i en funktion eller ett objekt är den direkt på sidan. I detta fall körs koden i tur och ordning så snart filen som innehåller koden har laddats tillräckligt för att den koden ska nås.

Kod som finns inom en funktion eller ett objekt körs endast när den funktionen eller objektet anropas.

I grund och botten betyder det att alla koder i huvudet och kroppen på din sida som inte finns i en funktion eller objekt kommer att köras när sidan laddas - så snart sidan har laddats tillräckligt för att få åtkomst till den koden.

Den sista biten är viktig och påverkar i vilken ordning du placerar din kod på sidan: varje kod som placeras direkt på sidan som måste interagera med element på sidan måste visas efter elementen på sidan som det är beroende av.

I allmänhet betyder detta att om du använder direkt kod för att interagera med ditt sidinnehåll, bör en sådan kod placeras längst ner på kroppen.

Kod inom funktioner och objekt

En kod inuti funktioner eller objekt körs när den funktionen eller objektet anropas. Om det heter från kod som är direkt i huvudet eller kroppen på sidan, är dess plats i exekveringsordning är i själva verket den punkt där funktionen eller objektet kallas från direkt koda.

Tilldelning av en funktion till en händelseshanterare eller lyssnare resulterar inte i att funktionen körs vid den punkt där den är tilldelad - förutsatt att du faktiskt är tilldela själva funktionen och springer inte funktionen och tilldela det returnerade värdet. (Det är därför du i allmänhet inte ser () i slutet av funktionsnamnet när det tilldelas en händelse sedan tillägget av parenteser kör funktionen och tilldelar det returnerade värdet istället för att tilldela funktionen sig.)

Funktioner som är kopplade till händelseshanterare och lyssnare körs när händelsen som de är kopplad till utlöses. De flesta händelser utlöses av besökare som interagerar med din sida. Vissa undantag finns dock, till exempel ladda händelse i själva fönstret, som utlöses när sidan slutar laddas.

Funktioner knutna till händelser på sidelement

Alla funktioner som är kopplade till händelser på element på själva sidan kommer att köras enligt handlingarna för varje enskild besökare - den här koden körs endast när en viss händelse inträffar för att utlösa den. Av denna anledning spelar det ingen roll om koden aldrig körs för en given besökare, eftersom den besökaren uppenbarligen inte har utfört den interaktion som kräver det.

Allt detta förutsätter naturligtvis att din besökare har åtkomst till din sida med en webbläsare som har JavaScript aktiverad.

Vissa användare har installerat specialskript som kan interagera med din webbsida. Dessa skript körs efter all din direkta kod, men innan vilken kod som är kopplad till lasthändelseshanteraren.

Eftersom din sida inte vet något om dessa användarskript har du inget sätt att veta vad dessa externa skript kan göra - de kan åsidosätta någon eller alla koder som du har kopplat till de olika händelser som du har tilldelat bearbetning. Om den här koden åsidosätter händelseshanterare eller lyssnare kör svaret på händelsetrigrar koden som definierats av användaren i stället för, eller utöver, din kod.

Utgångspunkten här är att du inte kan anta att kod som är utformad för att köras efter att sidan laddats kommer att tillåta att köra som du designade den. Var dessutom medveten om att vissa webbläsare har alternativ som gör det möjligt att inaktivera vissa evenemangshanterare inom webbläsare, i vilket fall en relevant händelsetrigger inte kommer att starta motsvarande händelsehanterare / lyssnare i din koda.