Code et guide d'ordre d'exécution JavaScript

La conception de votre page Web à l'aide de JavaScript nécessite de prendre en compte l'ordre dans lequel votre code apparaît et que vous encapsuliez du code dans des fonctions ou des objets, qui ont tous un impact sur l'ordre dans lequel le code s'exécute.

É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 soit dans la page Web lui-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).

Que signifie dire que JavaScript est

Le code qui se trouve dans une fonction ou un objet n'est exécuté que 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 le l'ordre d'exécution est effectivement le point auquel la fonction ou l'objet est appelé à partir du code.

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 depuis l'ajout du parenthèses exécute la fonction et attribue la valeur renvoyée plutôt que d'attribuer la fonction lui-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 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

Toutes les fonctions attachées aux événements sur les éléments de la page elle-même s'exécuteront en fonction des actions de chaque visiteur individuel - ce code ne s'exécute que lorsqu'un événement particulier se produit pour le déclencher. Pour cette raison, peu importe si le code ne s'exécute jamais pour un visiteur donné, car ce visiteur n'a évidemment pas effectué l'interaction qui le requiert.

Tout cela, bien sûr, suppose que votre visiteur a accédé à votre page avec un navigateur qui a Javascript activée.

Certains utilisateurs ont installé des scripts spéciaux qui peuvent interagir avec votre page Web. Ces scripts s'exécutent après tout votre code direct, mais avant tout code attaché au gestionnaire d'événements de chargement.

Étant donné que votre page ne sait rien de ces scripts utilisateur, vous n'avez aucun moyen de savoir ce que ces scripts externes pourraient faire - ils peuvent remplacer tout ou partie du code que vous avez attaché aux divers événements auxquels vous avez affecté En traitement. Si ce code remplace les gestionnaires d'événements ou les écouteurs, la réponse aux déclencheurs d'événements exécutera le code défini par l'utilisateur à la place ou en plus de votre code.

Le point à retenir ici est que vous ne pouvez pas supposer que le code conçu pour s'exécuter après le chargement de la page sera autorisé à s'exécuter comme vous l'avez conçu. De plus, sachez que certains navigateurs ont des options qui permettent de désactiver certains gestionnaires d'événements dans le navigateur, auquel cas un déclencheur d'événement pertinent ne lancera pas le gestionnaire / écouteur d'événement correspondant dans votre code.