JavaScript/Syntaxe du langage

Leçons de niveau 16
Une page de Wikiversité, la communauté pédagogique libre.
Début de la boite de navigation du chapitre
Syntaxe du langage
Icône de la faculté
Chapitre no 2
Leçon : JavaScript
Chap. préc. :Premiers pas
Chap. suiv. :Structures de contrôle
fin de la boite de navigation du chapitre
En raison de limitations techniques, la typographie souhaitable du titre, « JavaScript : Syntaxe du langage
JavaScript/Syntaxe du langage
 », n'a pu être restituée correctement ci-dessus.

Les commentaires[modifier | modifier le wikicode]

Les commentaires sont les mêmes que ceux du PHP, à savoir :

// Deux slashes pour un commentaire sur une ligne

/* Un slash et une étoile
   pour un commentaire sur
   plusieurs lignes...
*/

Les commentaires ne sont pas pris en compte. Ils ne servent que de repères et d'aide pour le codeur du script.

Théorie sur l'organisation du code[modifier | modifier le wikicode]

Notion de cadrage[modifier | modifier le wikicode]

C'est le seul point assez complexe du langage capricieux qu'est JavaScript. En effet le JavaScript se base sur des objets de la page où il est présent. En fait il s'agit d'une hiérarchie telle celle du langage ActionScript (Flash). Pour être très "propre" et pour faire référence à un objet de la page, on notera de la sorte :

window.document.form.champ.-----

Explications :

  • L'objet window pointe sur la fenêtre du navigateur (c'est donc le niveau le plus bas dans la hiérarchie possible en js).
  • L'objet document est à un niveau un peu supérieur. En effet, cela pointe sur la page mais au niveau de son contenu brut (sa source en l’occurrence).
  • L'objet form (parmi tant d'autres) est un objet qui vise les formulaires présents dans la page. C’est donc un niveau encore plus précis que document.
  • Enfin, l’objet champ est une occurrence de form. C’est un objet appartenant à form.


Et les (cinq) tirets finaux correspondent aux méthodes et caractères de chaque occurrence de l’objet form.

Il faut donc retenir qu'une fenêtre possède plusieurs niveaux en JavaScript. Du plus bas (window) au plus haut qui est un caractère d'une occurrence d'un niveau inférieur tel que form.

Vous verrez par la suite que ce qui paraît compliqué en théorie s'avère simple en pratique !

Voyons l'exemple du chapitre précédent :

// On avait ça :
document.write("Bonjour tout le monde !");
// Cela équivaut à cela :
window.document.write("Bonjour tout le monde !");

Ici, on peut constater que write n'est en fait qu'une méthode (fonction) de l’ensemble document. Cela peut faire penser à la POO (Programmation orientée objet) mais cela ne va pas jusque là.

Mais ceci est une erreur :

write("Bonjour tout le monde !");

Car on ne précise pas à quel ensemble appartient la méthode write. Cela n'affiche rien ou un message d'erreur.

Par ailleurs, la méthode JSON peut permettre le transport de données par AJAX.

Variables[modifier | modifier le wikicode]

Les variables en JavaScript n'ont pas nécessairement besoin d’être déclarées; mais il est plus correct de le faire :

// Déclaration de la variable nombre
var nombre;

La déclaration de variable se fait avec l'instruction var (variables en anglais (et en français)). Inutile de déclarer le type de variable (comme le feraient certains adeptes d'ActionScript). On peut immédiatement déclarer une valeur par défaut (mais cela n'est nullement obligatoire) :

var entier = 5;
var float = 1.999992;
var string = "J'adore wikiversity !";
var boolean = true; // ou false
var object = null;

Opérateurs[modifier | modifier le wikicode]

Tout comme les autres langages, JavaScript dispose d'opérateurs permettant d'effectuer les opérations informatiques de bases. Voici leur liste :

Opérateurs binaires d'affectation[modifier | modifier le wikicode]

Comme vu dans les exemples précédents, le symbole "=" (égal) permet d'affecter une valeur (nombre ou chaîne de caractères) à une variable.

var nombre = 18;
var chaine = "Bonjour tout le monde !";

// Et aussi
var a;
var b;
a = b;

// Et...
a = b = 0; // a et b valent toutes les deux 0

Opérateurs binaires de calcul[modifier | modifier le wikicode]

  • L'addition s'effectue en utilisant le traditionnel symbole "+" (plus)
  • La soustraction avec le symbole "-" (moins)
  • La multiplication avec le symbole "*" (étoile)
  • La division se sert du symbole "/" (slash)
var a = b = c = 2; // On initialise a, b et c
var d = a/(b+c)-a*4; // d = 2/(2+2)-2*4 = 1/2-8 = -7.5
var e = 3*(3+3); // e = 3*6 = 18

Il existe aussi les opérateurs +=, -=, *= et /= qui s'utilisent lorsque l'opération s'effectue sur une seule variable. Voici un exemple très simple :

var a = 3;
var b = a-2;

a -= b; // a = a-b = 3-1 = 2
a += b; // a = a+b = 3+1 = 4
b *= a; // b = b*a = 1*3 = 3
b /= b; // b = b/b = 1

Opérateurs de comparaisons[modifier | modifier le wikicode]

Les opérateurs de comparaison permettent de comparer deux valeurs et renvoient une valeur de type booléen (true, vrai ou false, faux) selon les cas. La syntaxe est simple à comprendre :

Valeur1 Opérateur de comparaison Valeur2
  • > : est strictement supérieur
  • < : est strictement inférieur
  • >= : est supérieur ou égal
  • <= : est inférieur ou égal
  • == : est strictement égal
  • != : est strictement différent
var a = b = 10;

document.write(a>b); // false
document.write(a>=b); // true
document.write((a+1)>b); // true
document.write(b!=a); // false
document.write(b==a); // true
document.write(b<=a); // true

Bien entendu il ne faut pas confondre l'opérateur "=" d'affectation et l'opérateur "==" de comparaison.

Opérateur de négation[modifier | modifier le wikicode]

Comme dans l'exemple précédent, il s'agit du point d'exclamation "!". Ainsi, true devient false et vice-versa.

Exemple :

var a = 3;
var b = 5;

document.write(a<b); // affiche true car 3<5
document.write(!(a<b)); // affiche false car l’expression équivaut à a>=b

Concaténation[modifier | modifier le wikicode]

La concaténation est une technique qui consiste à rassembler deux chaînes de caractères pour n'en former qu'une seule. C’est en quelque sorte le collage de ces deux chaînes. Pour ce faire, utilisez le signe "+" et "+=". C’est le même principe que précédemment.

Voici comme vous faisiez avant pour afficher deux chaînes à la suite :

var chaine_a = "Bonjour";
var chaine_b = "tout le monde";

// On affiche les deux chaînes à la suite
document.write(chaine_a);
document.write(chaine_b);

Et bien désormais, vous pouvez faire ainsi :

var chaine_a = "Bonjour";
var chaine_b = "tout le monde";

// On affiche les deux chaînes à la suite avec la concatenation
document.write(chaine_a+chaine_b);

On décline un peu...

var chaine_a = "Bonjour";
var chaine_b = "tout le monde";

chaine_a += chaine_b; // chaine_a vaut Bonjourtout le monde

Notez bien qu’il existe une ambiguïté entre l'opérateur de concaténation et le signe de l'addition en JavaScript. Cependant, l'interpréteur reconnaît s'il s'agit d'une chaîne (donc concaténation) ou bien d'un nombre (addition).

Opérateurs d'incrémentation et de décrémentation[modifier | modifier le wikicode]

Ils sont deux et permettent soit de diminuer de 1 la valeur d'une variable (décrémentation), soit de l'augmenter de 1 (incrémentation).

  • ++ : incrémente de 1
  • -- : décrémente de 1
var a = 0;
a++; // a = a+1 = 0+1 = 1
a--; // a = a-1 = 1-1 = 0
a--; // a = -1

Notez que si vous placez ces opérateurs devant la variable à incrémenter, l'action sera faite immédiatement ; voici un exemple simple :

var a = 0;
document.write(a++); // Affiche 0
document.write(++a); // Affiche 2
document.write(--a); // Affiche 1