Å designe din webside ved hjelp av JavaScript krever oppmerksomhet i rekkefølgen koden vises i og om du kapsler kode inn i funksjoner eller objekter, som alle påvirker rekkefølgen i koden kjører.
Plasseringen av JavaScript på din webside
Siden JavaScript på siden din kjøres basert på visse faktorer, la oss vurdere hvor og hvordan du legger til JavaScript på en webside.
Det er i utgangspunktet tre steder vi kan knytte JavaScript til:
- Direkte inn i hodet på siden
- Direkte inn i siden av siden
- Fra en begivenhetsbehandler / lytter
Det gjør ingen forskjell om JavaScript er innen websiden seg selv eller i eksterne filer som er koblet til siden. Det har heller ingen rolle om hendelsesbehandlerne blir hardkodet inn på siden eller lagt til av JavaScript selv (bortsett fra at de ikke kan utløses før de legges til).
Kode direkte på siden
Hva betyr det å si at JavaScript er? direkte i hodet eller kroppen på siden? Hvis koden ikke er vedlagt i en funksjon eller et objekt, er den direkte på siden. I dette tilfellet kjører koden sekvensielt så snart filen som inneholder koden er lastet tilstrekkelig til at den koden kan nås.
Kode som er innenfor en funksjon eller objekt kjøres bare når den funksjonen eller objektet kalles.
I utgangspunktet betyr dette at en hvilken som helst kode i hodet og kroppen på siden din som ikke er inne i en funksjon eller et objekt, kjører når siden lastes inn - så snart siden har lastet tilstrekkelig til å få tilgang til den koden.
Den siste biten er viktig og påvirker rekkefølgen du plasserer koden på siden: alle koder som er plassert direkte på siden som må samhandle med elementer på siden, må vises etter elementene på siden den er avhengig av.
Generelt betyr dette at hvis du bruker direkte kode for å samhandle med sideinnholdet ditt, bør en slik kode plasseres på bunnen av kroppen.
Kode innen funksjoner og objekter
En kode inne i funksjoner eller objekter kjøres når den funksjonen eller objektet kalles. Hvis det blir kalt fra kode som er direkte i hodet eller kroppen på siden, er det stedet i utførelsesrekkefølge er effektivt det punktet hvor funksjonen eller objektet kalles fra direkte kode.
Kode tildelt hendelseshåndtere og lyttere
Tildeling av en funksjon til en begivenhetsbehandler eller lytter fører ikke til at funksjonen kjøres på det punktet den er tilordnet - forutsatt at du faktisk er tildele selve funksjonen og løper ikke funksjonen og tilordne den returnerte verdien. (Dette er grunnen til at du vanligvis ikke ser () på slutten av funksjonsnavnet når det blir tilordnet en hendelse siden tillegget til parenteser kjører funksjonen og tildeler den returnerte verdien i stedet for å tilordne funksjonen seg selv.)
Funksjoner som er knyttet til hendelsesbehandlere og lyttere, kjøres når hendelsen de er knyttet til, utløses. De fleste hendelser utløses av besøkende som samhandler med siden din. Noen unntak finnes imidlertid, for eksempel laste hendelse i selve vinduet, som utløses når siden er ferdig lastet.
Funksjoner knyttet til hendelser på sideelementer
Eventuelle funksjoner som er knyttet til hendelser på elementer på selve siden, kjøres i henhold til handlingene til hver enkelt besøkende - denne koden kjøres bare når en bestemt hendelse oppstår for å utløse den. Av denne grunn spiller det ingen rolle om koden aldri kjøres for en gitt besøkende, siden den besøkende åpenbart ikke har utført samhandlingen som krever den.
Alt dette forutsetter selvfølgelig at besøkende har tilgang til siden din med en nettleser som har Javascript aktivert.
Tilpassede besøkende brukerskript
Noen brukere har installert spesielle skript som kan samhandle med websiden din. Disse skriptene kjører etter all din direkte kode, men før hvilken som helst kode som er koblet til håndteringen av lasten
Siden siden ikke vet noe om disse brukerskriptene, har du ingen måte å vite hva disse eksterne skriptene kan gjøre - de kan overstyre en eller hele koden du har knyttet til de forskjellige hendelsene du har tilordnet behandling. Hvis denne koden overstyrer hendelsesbehandlere eller lyttere, kjører svaret på hendelsesutløsere koden som er definert av brukeren i stedet for eller i tillegg til koden din.
Hjemme-poenget her er at du ikke kan anta at kode som er designet for å kjøres etter at siden har lastet inn, får lov til å kjøre slik du har designet den. I tillegg må du være oppmerksom på at noen nettlesere har alternativer som gjør det mulig å deaktivere noen hendelsesbehandlere i nettleser, i hvilket tilfelle vil en relevant hendelsesutløser ikke starte den aktuelle begivenhetsbehandleren / lytteren i din kode.