JavaScript-uitvoeringsorder

Het ontwerpen van uw webpagina met behulp van JavaScript vereist aandacht voor de volgorde waarin uw code wordt weergegeven en of u code in functies of objecten inkapselt, die allemaal van invloed zijn op de volgorde waarin de code wordt uitgevoerd. 

De locatie van JavaScript op uw webpagina

Aangezien het JavaScript op uw pagina wordt uitgevoerd op basis van bepaalde factoren, laten we overwegen waar en hoe u JavaScript aan een webpagina kunt toevoegen. 

Er zijn in principe drie locaties waaraan we JavaScript kunnen toevoegen:

• Direct in het hoofd van de pagina
• Direct in de hoofdtekst van de pagina
• Van een event handler / luisteraar

Het maakt niet uit of het JavaScript zich op de webpagina zelf bevindt of in externe bestanden die aan de pagina zijn gekoppeld. Het maakt ook niet uit of de gebeurtenishandlers hard zijn gecodeerd in de pagina of zijn toegevoegd door JavaScript zelf (behalve dat ze niet kunnen worden geactiveerd voordat ze worden toegevoegd).

Code rechtstreeks op de pagina

Wat betekent het om te zeggen dat JavaScript is direct in het hoofd of op de pagina? Als de code niet is ingesloten in een functie of object, staat deze direct op de pagina. In dit geval wordt de code opeenvolgend uitgevoerd zodra het bestand met de code voldoende is geladen om toegang te krijgen tot die code.

Code die zich binnen een functie of object bevindt, wordt alleen uitgevoerd wanneer die functie of dat object wordt aangeroepen.

Kort gezegd betekent dit dat elke code in het hoofd en de hoofdtekst van uw pagina die zich niet in een functie of object bevindt, wordt uitgevoerd terwijl de pagina wordt geladen - zodra de pagina heeft voldoende geladen om toegang te krijgen tot die code.

Dat laatste is belangrijk en heeft invloed op de volgorde waarin u uw code op de pagina plaatst: elke code die direct op de pagina wordt geplaatst en die moet interageren met elementen op de pagina, moet verschijnen na de elementen op de pagina waarvan het afhankelijk is.

Over het algemeen betekent dit dat als u directe code gebruikt om te communiceren met uw pagina-inhoud, deze code onderaan de body moet worden geplaatst.

Code binnen functies en objecten

Een code in functies of objecten wordt uitgevoerd wanneer die functie of dat object wordt aangeroepen. Als het wordt aangeroepen vanuit code die zich direct in het hoofd of hoofdgedeelte van de pagina bevindt, is de plaats in de uitvoeringsvolgorde feitelijk het punt waarop de functie of het object wordt aangeroepen vanuit de directe code.

Code toegewezen aan gebeurtenishandlers en luisteraars

Het toewijzen van een functie aan een gebeurtenishandler of luisteraar betekent niet dat de functie wordt uitgevoerd op het punt waarop deze is toegewezen - op voorwaarde dat u daadwerkelijk toewijzen de functie zelf en niet rennen de functie en het toewijzen van de geretourneerde waarde. (Daarom zie je over het algemeen de () aan het einde van de functienaam wanneer deze wordt toegewezen aan een gebeurtenis, omdat de toevoeging van haakjes de functie uitvoert en de geretourneerde waarde toewijst in plaats van de functie zelf toe te wijzen.)

Functies die zijn gekoppeld aan gebeurtenishandlers en luisteraars worden uitgevoerd wanneer de gebeurtenis waaraan ze zijn gekoppeld, wordt geactiveerd. De meeste evenementen worden geactiveerd door bezoekers die interactie hebben met uw pagina. Er zijn echter enkele uitzonderingen, zoals de laden gebeurtenis in het venster zelf, die wordt geactiveerd wanneer de pagina is geladen.

Functies gekoppeld aan gebeurtenissen op pagina-elementen