La syntaxe du Javascript

Parent Previous Next

La syntaxe du Javascript

Les instructions



La syntaxe du Javascript n'est pas compliquée. De manière générale, les instructions doivent être séparées par un point-virgule que l'on place à la fin de chaque instruction :

Code : JavaScript 

1

2

3

instruction_1;

instruction_2;

instruction_3;



En réalité le point-virgule n'est pas obligatoire si l'instruction qui suit se trouve sur la ligne suivante, comme dans notre exemple. En revanche, si vous écrivez plusieurs instructions sur une même ligne, comme dans l'exemple suivant, le point-virgule est obligatoire. Si le point-virgule n'est pas mis, l'interpréteur ne va pas comprendre qu'il s'agit d'une autre instruction et risque de retourner une erreur. 

Code : JavaScript 

1

2

Instruction_1;Instruction_2

Instruction_3


Mais attention ! Ne pas mettre les points-virgules est considéré comme une mauvaise pratique, c'est quelque chose que les développeurs Javascript évitent de faire, même si le langage le permet. Ainsi, dans ce tutoriel, toutes les instructions seront terminées par un point-virgule.


La compression des scripts


Certains scripts sont disponibles sous une forme dite compressée, c'est-à-dire que tout le code est écrit à la suite, sans retours à la ligne. Cela permet d'alléger considérablement le poids d'un script et ainsi de faire en sorte que la page soit chargée plus rapidement. Des programmes existent pour « compresser » un code Javascript. Mais si vous avez oublié un seul point-virgule, votre code compressé ne fonctionnera plus, puisque les instructions ne seront pas correctement séparées. C'est aussi une des raisons qui fait qu'il faut toujours mettre les points-virgules en fin d'instruction.

Les espaces


Le Javascript n'est pas sensible aux espaces. Cela veut dire que vous pouvez aligner des instructions comme vous le voulez, sans que cela ne gêne en rien l'exécution du script. Par exemple, ceci est correct : 

Code : JavaScript 

1

2

3

4

instruction_1;

   instruction_1_1;

   instruction_1_2;

instruction_2;     instruction_3;


Indentation et présentation



L'indentation, en informatique, est une façon de structurer du code pour le rendre plus lisible. Les instructions sont hiérarchisées en plusieurs niveaux et on utilise des espaces ou des tabulations pour les décaler vers la droite et ainsi créer une hiérarchie. Voici un exemple de codeindenté : 

Code : JavaScript 

1

2

3

4

5

6

7

8

9

function toggle(elemID) {

   var elem = document.getElementById(elemID);

           

   if (elem.style.display == 'block') {

       elem.style.display = 'none';        

   } else {

       elem.style.display = 'block';        

   }

}



Ce code est indenté de quatre espaces, c'est-à-dire que le décalage est chaque fois un multiple de quatre. Un décalage de quatre espaces est courant, tout comme un décalage de deux. Il est possible d'utiliser des tabulations pour indenter du code. Les tabulations présentent l'avantage d'être affichées différemment suivant l'éditeur utilisé, et de cette façon, si vous donnez votre code à quelqu'un, l'indentation qu'il verra dépendra de son éditeur et il ne sera pas perturbé par une indentation qu'il n'apprécie pas (par exemple, nous n'aimons pas les indentations de deux, nous préférons celles de quatre). 

Voici le même code, mais non indenté, pour vous montrer que l'indentation est une aide à la lecture : 

Code : JavaScript 

1

2

3

4

5

6

7

8

9

function toggle(elemID) {

var elem = document.getElementById(elemID);

     

if (elem.style.display == 'block') {

elem.style.display = 'none';        

} else {

elem.style.display = 'block';        

}

}



La présentation des codes est importante aussi, un peu comme si vous rédigiez une lettre : ça ne se fait pas n'importe comment. Il n'y a pas de règles prédéfinies comme pour l'écriture des lettres, donc il faudra vous arranger pour organiser votre code de façon claire. Dans le code indenté donné précédemment, vous pouvez voir qu'il y a des espaces un peu partout pour aérer le code et qu'il y a une seule instruction par ligne (à l'exception des if else, mais nous verrons cela plus tard). Certains développeurs écrivent leur code comme ça : 

Code : JavaScript

1

2

3

4

5

6

function toggle(elemID){

   var elem=document.getElementById(elemID);        

   if(elem.style.display=='block'){

       elem.style.display='none';        

   }else{elem.style.display='block';}

}



Vous conviendrez comme nous que c'est tout de suite moins lisible non ? Gardez à l'esprit que votre code doit être propre, même si vous êtes le seul à y toucher : vous pouvez laisser le code de côté quelques temps et le reprendre par la suite, et là, bonne chance pour vous y retrouver.


Les commentaires



Les commentaires sont des annotations faites par le développeur pour expliquer le fonctionnement d'un script, d'une instruction ou même d'un groupe d'instructions. Les commentaires ne gênent pas l'exécution d'un script. 

Il existe deux types de commentaires : les commentaires de fin de ligne, et les commentaires multilignes. 

Commentaires de fin de ligne



Ils servent à commenter une instruction. Un tel commentaire commence par deux slashs : 

Code : JavaScript 

1

2

3

4

instruction_1; // Ceci est ma première instruction

instruction_2;

// La troisième instruction ci-dessous :

instruction_3;



Le texte placé dans un commentaire est ignoré lors de l'exécution du script, ce qui veut dire que vous pouvez mettre ce que bon vous semble en commentaire, même une instruction (qui ne sera évidemment pas exécutée) : 

Code : JavaScript

1

2

3

4

instruction_1; // Ceci est ma première instruction

instruction_2;

// La troisième instruction ci-dessous pose problème, je l'annule temporairement

// instruction_3;


Commentaires multilignes



Ce type de commentaires permet les retours à la ligne. Un commentaire multiligne commence par /* et se termine par */ :

Code : JavaScript 

1

2

3

4

5

6

7

8

/* Ce script comporte 3 instructions :

     - Instruction 1 qui fait telle chose

     - Instruction 2 qui fait autre chose

     - Instruction 3 qui termine le script

*/

instruction_1;

instruction_2;

instruction_3; // Fin du script



Remarquez qu'un commentaire multiligne peut aussi être affiché sur une seule ligne : 

Code : JavaScript 

1

2

instruction_1; /* Ceci est ma première instruction */

instruction_2;




Les fonctions



Dans l'exemple du Hello world!, nous avons utilisé la fonction alert(). Nous reviendrons en détail sur le fonctionnement des fonctions, mais pour les chapitres suivants, il sera nécessaire de connaître sommairement leur syntaxe. 

Une fonction se compose de deux choses : son nom, suivi d'un couple de parenthèses (une ouvrante et une fermante) :

Code : JavaScript 

1

myFunction(); // « function » veut dire « fonction » en anglais



Entre les parenthèses se trouvent les arguments, que l'on appelle aussi paramètres. Ceux-ci contiennent des valeurs qui sont transmises à la fonction. Dans le cas du Hello world!, ce sont les mots « Hello world! » qui sont passés en paramètre : 

Code : JavaScript

1

alert('Hello world!');



Créé avec HelpNDoc Personal Edition: Créer des documents d'aide HTML facilement

Site à deux balles