Syntaxe JavaScript - Définition

Variables

Les variables en JavaScript n'ont pas de type défini, et n'importe quelle valeur peut être stockée dans n'importe quelle variable. Les variables peuvent être déclarées avec var . Ces variables ont une portée lexicale et une fois la variable déclarée, on peut y accéder depuis la fonction où elle a été déclarée. Les variables déclarées en dehors d'une fonction et les variables utilisées sans avoir été déclarées en utilisant var, sont globales (peuvent être utilisées par tout le programme).

Voici un exemple de déclaration de variables et de valeurs globales :

      x = 0; // Une variable globale      var y = 'Hello!'; // Une autre variable globale             function f(){        var z = 'foxes'; // Une variable locale        twenty = 20; // Globale car le mot-clef var n'est pas utilisé        return x; // Nous pouvons utiliser x ici car il s'agit d'une variable globale      }      // La valeur de z n'est plus accessible à partir d'ici      

Structures de contrôle

Si Sinon

       if (expression1)       {         //instructions réalisées si expression1 est vraie;       }       else if (expression2)       {         //instructions réalisées si expression1 est fausse et expression2 est vraie;       }       else       {         //instructions réalisées dans les autres cas;       }      

Dans chaque structure if..else, la branche else  :

• est facultative
• peut contenir une autre structure if..else

Opérateur conditionnel

L'opérateur conditionnel crée une expression qui, en fonction d'une condition donnée, prend la valeur de l'une ou l'autre de 2 expressions données. Son fonctionnement est similaire à celui de la structure si..sinon qui, en fonction d'une condition donnée, exécute l'une ou l'autre de 2 instructions données. En ce sens on peut dire que l'opérateur conditionnel est aux expressions ce que la structure si..sinon est aux instructions.

       var resultat = (condition) ? expression1 : expression2;      

Le code ci-dessus, qui utilise l'opérateur conditionnel, a le même effet que le code ci-dessous, qui utilise une structure si..sinon :

       if (condition)       {         resultat = expression1;       }       else       {         resultat = expression2;       }      

Contrairement à la structure si..sinon, la partie correspondant à la branche sinon est obligatoire.

       var resultat = (condition) ? expression1; // incorrect car il manque la valeur à prendre si condition est fausse      

Instruction switch

L'instruction switch remplace une série de si..sinon pour tester les nombreuses valeurs que peut prendre une expression :

       switch (expression) {         case UneValeur:            // instructions réalisées si expression=UneValeur;           break;         case UneAutreValeur:            // instructions réalisées si expression=UneAutreValeur;           break;         default:           // instructions réalisées dans les autres cas;           break;       }      

• l'instruction break; termine le bloc case (le cas à traiter). Elle est facultative dans la syntaxe Javascript. Cependant, elle est recommandée, car en son absence l'exécution continuerait dans le bloc case suivant. Dans le dernier bloc case d'un switch l'instruction break; ne sert à rien, sauf à prévoir l'éventualité où on rajouterait plus tard un bloc case supplémentaire.
• la valeur du case peut être une chaîne de caractères
• les accolades { } sont obligatoires

Boucle For

Syntaxe pour plusieurs lignes d'instructions :

       for (initialisation;condition;instruction de boucle) {         /*            instructions exécutées à chaque passage dans la boucle                 tant que la condition est vérifiée         */       }      

Syntaxe pour une seule instruction :

       for (initialisation;condition;instruction)      

Boucle For..in

       for (var Propriete in Objet) {         //instructions utilisant Objet[Propriete];       }      

• L'itération s'effectue sur toutes les propriétés qui peuvent être associées à un compteur
• Les avis divergent sur la possibilité d'utiliser cette boucle avec un tableau.
• L'ensemble des propriétés balayées dans la boucle diffère selon les navigateurs. Théoriquement, cela dépend d'une propriété interne appelée "DontEnum" définie dans le standard ECMAscript, mais dans la pratique chaque navigateur renvoie un ensemble différent.

Boucle While

       while (condition) {         instruction;       }      

Boucle Do..while

       do {         instructions;       } while (condition);      

Changement de contexte de résolution de variables With

        with(Objet) {          var a = getElementById('a');          var b = getElementById('b');          var c = getElementById('c');        };      

• On n’a alors plus besoin d’écrire Objet. avant chaque getElementById().
• Les variables déclarées avec var dans un bloc with(){...} (ici, a, b et c ) ne modifient pas l’objet référencé par with(), mais restent dans le contexte local de la fonction ou du bloc en cours.
• Toute utilisation ou affectation de variable non déclarée dans le contexte local avec var va d’abord rechercher l’existence d'une propriété homonyme dans l’objet référencé par l’instruction with() la plus imbriquée en cours, avant de remonter récursivement la chaîne des instructions with() englobantes pour rechercher cette propriété dans les autres objets correspondants ; si une telle propriété n’est pas trouvée lors de l’affectation, une nouvelle propriété sera créée dans l'objet du dernier contexte introduit par l’instruction with().
• Dans un navigateur, le code Javascript s'exécute dans le contexte de l’objet window qui englobe tous les autres contextes de résolution, et qui désigne la fenêtre du navigateur et référence dans ses propriétés tous les autres objets, dont au moins :
  • lui-même dans sa propriété homonyme (window),
  • l'objet navigator donnant des renseignements sur le navigateur ayant créé la fenêtre,
  • l’objet frames contenant la liste des cadres affichés dans la fenêtre (l'un d'eux contient le document chargé tout entier),
  • l’objet location donnant les propriétés permettant de désigner, localiser et charger la source du document dans le cadre principal de la fenêtre,
  • l’objet history contenant l’historique de tous les emplacements visités dans l’ordre par le navigateur,
  • l’objet document chargé dans cette fenêtre (ses propriétés sont décrites dans le modèle de document DOM).
• Dans d’autres applications qu’un navigateur, l’objet principal conteneur dans lequel s’exécute un script peut être différent et peut désigner le système hôte fournissant ses services sous formes de méthodes et propriétés.

Attention, le code suivant :

        with(Objet) {          b = getElementById('a');        };      

n’est pas totalement équivalent à :

         Objet.b = Objet.getElementById('a');      

• En effet dans le second, la propriété b ne peut être affectée quand dans l’objet référencé par la variable Objet, qui doit déjà exister et pointer sur un objet existant. Aucune propriété d’un autre objet ne sera affecté. Si Objet ne référence aucun objet, il aura la valeur undefined (indéfini) et ne contiendra aucune propriété ; de ce fait l'affectation de sa propriété b inexistante ne donnera pas d'erreur mais lui ajoutera cette propriété alors que sa lecture donnera l'objet undefined qui produira une erreur si on essaye d'en extraire ses propres propriétés.
• En revanche, dans le premier, l'affectation peut modifier toute propriété nommée b dans un objet englobant (par exemple le document ou la fenêtre qui sera alors modifié).

Pour ces raisons, il est hautement recommandé de désigner explicitement l'objet dans lequel on affecte une valeur (faute de quoi des effets de bords restent possibles), ou de déclarer toutes les variables locales (avec var) afin de ne pas modifier les objets englobants, ce qui limite très fortement l’intérêt de l'instruction with() ; il vaut donc mieux déclarer une variable locale (ci-dessous nommée o) pour y stocker une référence à l'objet désigné (si cette référence est complexe et coûteuse à obtenir), et utiliser ses propriétés en préfixant toutes les propriétés ou méthodes par le nom de cette variable locale, afin de lever toute ambiguïté à l'exécution selon le contexte d'appel, et éviter ainsi des effets de bords inattendus :

        var o = Objet;        o. b = o.getElementById('a');