La première chose que nous étudierons concerne les éléments constitutifs du code.
Les instructions sont des constructions syntaxiques et des commandes qui effectuent des actions.
Nous avons déjà vu une déclaration, alert('Hello, world!') , qui affiche le message "Hello, world!".
Nous pouvons avoir autant d’instructions dans notre code que nous le souhaitons. Les instructions peuvent être séparées par un point-virgule.
Par exemple, nous divisons ici « Hello World » en deux alertes :
alert('Bonjour'); alert('Monde');Habituellement, les instructions sont écrites sur des lignes séparées pour rendre le code plus lisible :
alert('Bonjour');
alert('Monde');Un point-virgule peut être omis dans la plupart des cas lorsqu'il existe un saut de ligne.
Cela fonctionnerait également :
alerte('Bonjour')
alerte('Monde')Ici, JavaScript interprète le saut de ligne comme un point-virgule « implicite ». C'est ce qu'on appelle 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 veut pas dire « toujours » !
Il existe des cas où une nouvelle ligne ne signifie pas un point-virgule. Par exemple:
alerte(3 + 1 + 2);
Le code génère 6 car JavaScript n'insère pas de points-virgules ici. Il est intuitivement évident que si la ligne se termine par un plus "+" , alors il s'agit d'une « expression incomplète », donc un point-virgule serait incorrect. Et dans ce cas, cela fonctionne comme prévu.
Mais il existe des situations dans lesquelles JavaScript « échoue » à prendre un point-virgule là où il est vraiment nécessaire.
Les erreurs qui se produisent dans de tels cas sont assez difficiles à trouver et à corriger.
Un exemple d'erreur
Si vous êtes curieux de voir un exemple concret d'une telle erreur, consultez ce code :
alerte("Bonjour");
[1, 2].forEach(alerte); Pas encore besoin de réfléchir à la signification des crochets [] et forEach . Nous les étudierons plus tard. Pour l'instant, rappelez-vous simplement le résultat de l'exécution du code : il affiche Hello , puis 1 , puis 2 .
Supprimons maintenant le point-virgule après l' alert :
alerte("Bonjour")
[1, 2].forEach(alerte);La différence par rapport au code ci-dessus réside dans un seul caractère : le point-virgule à la fin de la première ligne a disparu.
Si nous exécutons ce code, seul le premier Hello s'affiche (et il y a une erreur, vous devrez peut-être ouvrir la console pour le voir). Il n'y a plus de chiffres.
C'est parce que JavaScript ne suppose pas de point-virgule avant les crochets [...] . Ainsi, le code du dernier exemple est traité comme une seule instruction.
Voici comment le moteur le voit :
alert("Bonjour")[1, 2].forEach(alerte); Ça a l'air bizarre, non ? Dans ce cas, une telle fusion est tout simplement erronée. Nous devons mettre un point-virgule après alert pour que le code fonctionne correctement.
Cela peut également se produire dans d’autres situations.
Nous recommandons de placer des 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.
Au fil du temps, les programmes deviennent de plus en plus complexes. Il devient nécessaire d'ajouter des commentaires qui décrivent ce que fait le code et pourquoi.
Les commentaires peuvent être placés à n’importe quel endroit d’un script. Ils n'affectent pas son 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('Bonjour');
alert('Monde'); // Ce commentaire suit la déclaration Les commentaires multilignes commencent par une barre oblique et un astérisque /* et se terminent par un astérisque et une barre oblique */ .
Comme ça:
/* Un exemple avec deux messages.
Il s'agit d'un commentaire multiligne.
*/
alert('Bonjour');
alert('Monde'); Le contenu des commentaires est ignoré, donc si nous mettons du code dans /* … */ , il ne s'exécutera pas.
Parfois, il peut être pratique de désactiver temporairement une partie du code :
/* Commenter le code
alert('Bonjour');
*/
alert('Monde');Utilisez les raccourcis clavier !
Dans la plupart des éditeurs, une ligne de code peut être commentée en appuyant sur la touche de raccourci Ctrl + / pour un commentaire sur une seule ligne et quelque chose comme Ctrl + Shift + / – pour les commentaires sur plusieurs lignes (sélectionnez un morceau de code et appuyez sur la touche de raccourci). Pour Mac, essayez Cmd au lieu de Ctrl et Option au lieu de Shift .
Les commentaires imbriqués ne sont pas pris en charge !
Il se peut qu'il n'y ait pas /*...*/ dans un autre /*...*/ .
Un tel code mourra avec une erreur :
/* /* commentaire imbriqué ?!? */ */ alert( 'Monde' );
N'hésitez pas à commenter votre code.
Les commentaires augmentent l'empreinte globale du code, mais ce n'est pas du tout un problème. Il existe de nombreux outils qui réduisent le code avant de le publier sur un serveur de production. Ils suppriment les commentaires afin qu'ils n'apparaissent pas dans les scripts de travail. Les commentaires n’ont donc aucun effet négatif sur la production.
Plus loin dans le didacticiel, il y aura un chapitre Qualité du code qui explique également comment rédiger de meilleurs commentaires.