Ordre d'exécution JavaScript

La conception de votre page Web à l'aide de JavaScript nécessite de prêter attention à l'ordre dans lequel votre code apparaît et si vous encapsulez le code dans des fonctions ou des objets, qui ont tous un impact sur l'ordre dans lequel le code s'exécute. 

L'emplacement de JavaScript sur votre page Web

Étant donné que le JavaScript de votre page s'exécute en fonction de certains facteurs, considérons où et comment ajouter du JavaScript à une page Web. 

Il existe essentiellement trois emplacements dans lesquels nous pouvons attacher JavaScript:

• Directement en tête de page
• Directement dans le corps de la page
• Depuis un gestionnaire / écouteur d'événements

Cela ne fait aucune différence que le JavaScript se trouve dans la page Web elle-même ou dans des fichiers externes liés à la page. Peu importe que les gestionnaires d'événements soient codés en dur dans la page ou ajoutés par le JavaScript lui-même (sauf qu'ils ne peuvent pas être déclenchés avant d'être ajoutés).

Code directement sur la page

Que signifie dire que JavaScript est directement dans la tête ou le corps de la page? Si le code n'est pas inclus dans une fonction ou un objet, il se trouve directement dans la page. Dans ce cas, le code s'exécute séquentiellement dès que le fichier contenant le code a été chargé suffisamment pour que ce code soit accessible.

Le code qui se trouve dans une fonction ou un objet est exécuté uniquement lorsque cette fonction ou cet objet est appelé.

Fondamentalement, cela signifie que tout code à l'intérieur de la tête et du corps de votre page qui ne se trouve pas dans une fonction ou un objet s'exécutera pendant le chargement de la page - dès que la page a chargé suffisamment pour accéder à ce code.

Ce dernier bit est important et affecte l'ordre dans lequel vous placez votre code sur la page: tout code placé directement dans la page qui doit interagir avec des éléments de la page doit apparaître après les éléments de la page dont il dépend.

En général, cela signifie que si vous utilisez du code direct pour interagir avec le contenu de votre page, ce code doit être placé en bas du corps.

Code dans les fonctions et les objets

Un code à l'intérieur des fonctions ou des objets est exécuté chaque fois que cette fonction ou cet objet est appelé. S'il est appelé à partir d'un code qui se trouve directement dans l'en-tête ou le corps de la page, sa place dans l'ordre d'exécution est en fait le point auquel la fonction ou l'objet est appelé à partir du code direct..

Code attribué aux gestionnaires d'événements et aux écouteurs

L'affectation d'une fonction à un gestionnaire d'événements ou à un écouteur n'entraîne pas l'exécution de la fonction au point auquel elle est affectée - à condition que vous soyez réellement attribuer la fonction elle-même et ne pas courrir la fonction et l'attribution de la valeur retournée. (C'est pourquoi vous ne voyez généralement pas le () à la fin du nom de la fonction lorsqu'elle est affectée à un événement car l'ajout des parenthèses exécute la fonction et affecte la valeur renvoyée plutôt que d'affecter la fonction elle-même.)

Les fonctions attachées aux gestionnaires d'événements et aux écouteurs s'exécutent lorsque l'événement auquel ils sont attachés est déclenché. La plupart des événements sont déclenchés par des visiteurs qui interagissent avec votre page. Il existe cependant certaines exceptions, telles que la charge événement sur la fenêtre elle-même, qui se déclenche lorsque le chargement de la page est terminé.

Fonctions attachées aux événements sur les éléments de page