Structure du code

La première chose à apprendre est de construire des blocs de code.

Instructions

Les instructions sont des constructions de syntaxe et des commandes qui effectuent des actions.

Nous avons déjà vu une instruction alert("Hello World!") qui affiche le message.

Nous pouvons avoir autant d’instructions dans le code que nous le souhaitons. Une autre instruction peut être séparée par un point-virgule.

Par exemple, ici nous divisons le message en deux :

alert("Hello"); alert("World");

Chaque instruction est généralement écrite sur une ligne distincte – le code devient donc plus lisible :

alert("Hello");
alert("World");

Les points-virgules

Un point-virgule peut être omis dans la plupart des cas lorsqu’une rupture de ligne existe.

Cela fonctionnerait aussi :

alert("Hello")
alert("World")

Ici, JavaScript interprète le saut de ligne comme un point-virgule “implicite”. Cela s’appelle également une insertion automatique de point-virgule.

Dans la plupart des cas, une nouvelle ligne implique un point-virgule. Mais “dans la plupart des cas” ne signifie pas “toujours”!

Il y a des cas où une nouvelle ligne ne signifie pas un point-virgule, par exemple :

alert(3 +
1
+ 2);

Le code génère 6, car JavaScript n’insère pas de point-virgule ici. Il est intuitivement évident que si la ligne se termine par un plus "+", alors c’est une “expression incomplète”, donc un point-virgule serait incorrect. Et dans ce cas, cela fonctionne comme prévu.

Mais il existe des situations où JavaScript “échoue” à prendre un point-virgule là où il est vraiment nécessaire.

Les erreurs qui surviennent dans de tels cas sont assez difficiles à trouver et à corriger.

alert("Hello");

[1, 2].forEach(alert);

alert("Hello")

[1, 2].forEach(alert);

alert("Hello")[1, 2].forEach(alert);

Il est recommandé de mettre les points-virgules entre les instructions, même si elles sont séparées par des nouvelles lignes. Cette règle est largement adoptée par la communauté. Notons encore une fois – il est possible de laisser de côté les points-virgules la plupart du temps. Mais il est plus sûr – surtout pour un débutant – de les utiliser.

Les Commentaires

Au fil du temps, le programme devient de plus en plus complexe. Il devient nécessaire d’ajouter des commentaires qui décrivent ce qui se passe et pourquoi.

Les commentaires peuvent être placés à n’importe quel endroit du script. Ils n’affectent pas l’exécution, car le moteur les ignore simplement.

Les commentaires sur une ligne commencent par deux barres obliques //.

Le reste de la ligne est un commentaire. Il peut occuper une ligne complète ou suivre une déclaration.

Comme ici :

// Ce commentaire occupe une ligne à part
alert("Hello");

alert("World"); // Ce commentaire suit l'instruction

Les commentaires multilignes commencent par une barre oblique et un astérisque /* et se termine par un astérisque et une barre oblique */.

Comme ceci :

/* Un exemple avec deux messages.
C'est un commentaire multiligne.
*/
alert("Hello");
alert("World");

Le contenu des commentaires est ignoré, donc si nous mettons du code à l’intérieur /* … */ il ne s’exécutera pas.

Parfois, il est utile de désactiver temporairement une partie du code :

/* Commenter le code
alert('Hello');
*/
alert("World");

/*
  /* commentaire imbriqué ?!? */
*/
alert( 'World' );

N’hésitez pas à commenter votre code.

Les commentaires augmentent la taille globale du code, mais ce n’est pas un problème du tout. De nombreux outils permettent de réduire le code avant de le publier sur le serveur de production. Ils suppriment les commentaires, ils n’apparaissent donc pas dans les scripts de travail. Les commentaires n’ont donc aucun effet négatif sur la production.

Plus loin dans le tutoriel, il y aura un chapitre Style de codage qui explique également comment écrire de meilleurs commentaires.