Programmation JavaScript/Ordre d'évaluation

Un livre de Wikilivres.
Aller à : navigation, rechercher
Programmation JavaScript
Programmation JavaScript
Sommaire
  1. Introduction 100 percent.svg
  2. Présentation
  3. Syntaxe 50%.svg
    1. Ligne d'instruction 100 percent.svg
    2. Ordre d'évaluation 100 percent.svg
    3. Bloc d'instructions 100 percent.svg
    4. Identificateurs 100 percent.svg
    5. Expression littérale 100 percent.svg
    6. Commentaire 100 percent.svg
    7. Mots réservés et constantes 100 percent.svg
    8. Variables 100 percent.svg
    9. Opérateurs 100 percent.svg
    10. Structures de contrôle 75%.svg
    11. Fonctions utilisateur 100 percent.svg
    12. Évènement 75%.svg
  4. Objets prédéfinis 00%.svg
    1. window 25%.svg
    2. document 25%.svg
    3. navigator 25%.svg
    4. Array 100 percent.svg
    5. Boolean 00%.svg
    6. Date 25%.svg
    7. Error 00%.svg
    8. Function 00%.svg
    9. Math 25%.svg
    10. Number 25%.svg
    11. Object 00%.svg
    12. String 25%.svg
    13. Element 25%.svg
    14. RegExp 00%.svg
  5. Fonctions prédéfinies
  6. Mise en œuvre
  7. Programmation avancée
    1. Opérateurs de bits 00%.svg
    2. Programmation objet 00%.svg
    3. Gestion d'évennements 00%.svg
    4. Exceptions et erreurs 00%.svg
    5. Interface DOM 00%.svg
    6. Objets Microsoft 00%.svg
    7. Applets Java 00%.svg
    8. Notation JSON 00%.svg
    9. AJAX 00%.svg
  8. Frameworks
    1. Dojo
      1. Hello World
      2. Widgets
      3. Ressources
    2. jQuery
    3. Node.js
    4. React
  9. Tests
    1. Ava
    2. Jest
    3. Selenium
  10. Débogage
  11. Références25%.svg
Modifier ce modèle ce sommaire
<< Ligne d'instruction / Bloc d'instructions >>


Scripts[modifier | modifier le wikicode]

Lors du chargement d'une page Web, dès que le navigateur rencontre un script, il l'exécute avant de charger la suite du document HTML. Si le script contient des instructions qui doivent être évaluées immédiatement et qui manipulent le document, ce dernier risque de ne pas être prêt.

Lorsque des balises <script> possèdent l'attribut defer, le navigateur est supposé télécharger ces scripts en parallèle (donc plus rapidement), et attendre d'avoir fini le chargement de la page avant de les exécuter dans l'ordre des balises.

Lorsque qu'elles possèdent l'attribut async, le navigateur les télécharge et exécute en parallèle, dans un ordre qui dépend du contexte, donc aléatoire et potentiellement avant la fin du chargement de la page. Il ne faut donc jamais l'utiliser pour charger des bibliothèques ayant des dépendances, comme jQuery.

S'il faut manipuler le document au moment du chargement, il est donc fortement recommandé de déclencher le code après avoir déclaré toute partie du document qui doit être utilisée. Il reste bien sûr possible de déclarer la plupart du code dans des fonctions avant le corps du document, comme cela est fait couramment, et soit d'appeler les fonctions dans un script ultérieur, soit de placer ces instructions dans la méthode document.onload.

Instructions[modifier | modifier le wikicode]

À la base, chaque fichier ou fragment de code JavaScript est évalué de haut en bas : chaque instruction est exécutée avant de passer à la suivante. Bien entendu, les fonctions, structures de contrôle, et d'autres éléments du langage font que certaines instructions sont évaluées à un autre moment, et/ou plusieurs fois, ou pas du tout.

Expressions[modifier | modifier le wikicode]

Les expressions sont évaluées de gauche à droite, en respectant la priorité des opérateurs et les parenthèses. Lorsqu'une expression est composée d'opérations de priorité identique (par exemple, plusieurs additions) la première opération en partant de la gauche est effectuée (et ses opérandes sont évaluées), puis son résultat est utilisé comme opérande de gauche de l'opération suivante (et l'opérande de droite est évaluée), et ainsi de suite.

str = 1 + 3 + "5" + -1 + 2
alert( str ) // affiche "45-12"

L'exemple ci-dessus montre que la première opération entre deux nombres se comporte normalement (1 et 3 font 4), la seconde se transforme en concaténation car une des opérandes est de type "string", et à partir de là le résultat de chaque opération est une chaîne donc toutes les additions suivantes se transforment en concaténations. Ce serait différent avec des parenthèses :

str = 1 + 3 + "5" + (-1 + 2)
alert( str ) // affiche "451"

Les opérations de priorité identique ne sont pas évaluées simultanément (techniquement ce ne serait pas possible d'ailleurs) et marginalement, cela peut avoir une influence sur le résultat. Par conséquent, les opérations que l'on appelle commutatives en mathématiques ne sont pas strictement commutatives en JavaScript.

u = v + (v = u) // équivalent à trois instructions séparées pour calculer la suite de Fibonacci
// est différent de :
u = (v = u) + v // façon tordue d'écrire u*=2

Dans cet exemple, l'addition n'est pas commutative. Si l'opération v=u est placée à gauche de l'addition, elle est évaluée en premier et modifie l'autre opérande. En revanche, placée à droite, elle est évaluée après v, et donc la valeur de v utilisée par l'addition est l'ancienne valeur.

<< Ligne d'instruction / Bloc d'instructions >>