DokuWiki

This page is read only. You can view the source, but not change it. Ask your administrator if you think this is wrong.
====== Program Structure ======

    And my heart glows bright red under my filmy, translucent skin and they have to administer 10cc of JavaScript to get me to come back. (I respond well to toxins in the blood.) Man, that stuff will kick the peaches right out your gills!
    _why, Why's (Poignant) Guide to Ruby

Dans ce chapitre, nous allons commencer à faire des choses qui peuvent réellement commencer à être appelées de la programmation. Nous allons faire progresser nos commandes javaScript au-delà des simples mots et fragments de phrase que nous avons vu jusqu'ici, au point de pouvoir exprimer une prose avec du sens.

===== Expressions et instructions =====

Dans le Chapitre 1, nous avons produit des valeurs et leur avons appliqué des opérateurs pour obtenir de nouvelles valeurs. Créer des valeurs est est une part essentielle de chaque programme JavaScript, mais ça n'est qu'une partie.

Un fragment de code qui produit une valeur est appelé une expression. Chaque valeur écrite littéralement (tel que 22 ou "psychoanalysis") est une expression, comme l'est un opérateur binaire appliqué à deux expression ou une opérateur unaire appliqué à un.
Cela montre la beauté d'une interface basé sur un langage. Les expression peuvent se nicher d'une manière très similaire aux sous-phrases (subsentences) du langage humain — une sous-phrase peut contenir ses sous-phrases, et ainsi de suite. Cela nous permet de combiner des expressions pour exprimer arbitrairement des calculs complexes.

Si une expression correspond a un fragment de phrase, une instruction JavaScript correspond à une phrase complète d'un langage humain. Un programme est simplement une liste d'instruction.

Le type le plus simple d'instruction est une expression avec un point-virgule après lui. Ceci est un programme :

<code>
1;
!false;
</code>

Cela dit, c'est un programme inutile. Une expression  peut se contenter de produire une valeur qui peut ensuite être utilisée par l'expression la contenant. Une instruction se suffit à elle-même et ne sert à quelque chose que si elle affecte son environnement. Il peut afficher quelque chose — cela compte comme affecter l'environnement — ou il peut changer l'état interne de la machine d'une manière qui affectera les instructions qui suivront. Ces changements sont appelés effets secondaires (ou effets de bord, side effects). Les instructions dans l'exemple précédent produit uniquement les valeurs 1 et true , puis les met immédiatement à la poubelle. Cela ne produit aucun effet sur l'environnement du programme du tout. Lorsque l'on exécute ce programme, rien d'observable ne se produit.

Dans certains cas, JavaScript vous permet d'omettre le point-virgule à la fin de l'instruction. Dans d'autres cas, il doit figurer, ou la prochaine ligne sera traiter comme la suite de la même instruction. Les règles pour déterminer lorsque le point-virgule peut être omis sont quelque peu complexes et favrisent les erreurs. Dans ce livre, chaque instruction nécessitant un point-virgule sera terminé par un. Je vous recommande de faire de même dans vos programmes, au moins jusqu'à ce que vous ayez appris les subtilités qu'implique l'omission des points-virgules.

===== Variables =====

Comment un programme garde-t-il un état interne ? Comment se souvient-il de choses ? Nous avons vu comment prodire de nouvelles valeurs à partir d'anciennes valeurs, mais cela ne change pas les anciennes valeurs, et les nouvelles valeurs doivent être utiisées immédiatement ou se dissiperont immédiatement. Pour récupérer et conserver des valeurs, JavaScript fourni quelque chose appelé une variable.

<code>
var caught = 5 * 5;
</code>

Et cela nous donne notre second type d'instruction. Le mot spécial (mot-clé) var indique que cette phrase va définir une variable. Il est suivi par le nom de la variable et, si nous souhaitons immédiatement lui donner une valeur, par un opérateur = et une expression.

L'instruction précédente créé une variable appelée caught et l'utilise pour récupérer le nombre produit par la multiplication de 5 par 5.

Après que la variable ait été définie, son nom peut être utilisé comme une expression. La valeur d'une telle expression est la valeur contenue par la variable. Voici un exemple :

<code>
var ten = 10;
console.log(ten * ten);
// → 100
</code>

Les noms de variables peuvent être n'importe quel nom qui n'est pas un nom réservé (comme  var). Ils ne devraient pas inclure de caractère espace. Les chiffres peuvent aussi être utilisés dans les noms de variable — par exemple catch22 est un nom valide — mais le nom ne doit pas commencer par un chiffre. Un nom de variable ne peut pas contenir de ponctuation, à l'exception des caractères $ et  _.

Lorsqu'une variable pointe vers une valeur, cela ne signifie pas qu'elle aura cette valeur pour toujours. L'opérateur = peut être utilisé à n'importe quelle moment sur une variable existante pour la déconnecter de sa valeur existante et la faire pointer vers une nouvelle.

<code>
var mood = "light";
console.log(mood);
// → light
mood = "dark";
console.log(mood);
// → dark
</code>

Vous devriez imaginer les variables comme des tentacules plutôt que comme des boites. Elles ne contiennent pas de valeurs; elles les y lient —deux variables peuvent référer à la même valeur. Un programme peut seuelement accéder aux valeurs auxquelles il est encore lié. Lorsque vous avez besoin de vous souvenir de quelques chose, vous liez une tentacule à celà, ou vous rattachez une tentacule existante à cela.
Regardons un exemple. Pour se souvenir du nombre de dollars que Luigi vous doit toujours, vous créez une variable. Et lorsque ce dernier vous rembourse 35$, vous donnez à la variable une nouvelle valeur.

<code>
var luigisDebt = 140;
luigisDebt = luigisDebt - 35;
console.log(luigisDebt);
// → 105
</code>

Lorsque vous définissez une variable sans lui donner de valeur, la tentacule n'a rien à attraper, et fini dans le vide. Si vous demandez une valeur d'une variable vide, vous obtenez la valeur undefined.

Une seule instruction var peut définir des variables multiples. Les définition doivent être séparées par des virgules.

<code>
var one = 1, two = 2;
console.log(one + two);
// → 3
</code>

===== Mots-clés et mots réservés. =====

Les mots avec un sens particulier, comme var, sont des mots-clés, et ne devraient pas être utilisés comme des noms de variables. Il y a aussi un certain nombre des mots dont l'usage est réservé pour de futures version de JavaScript. Ceux-ci sont aussi officiellement non autorisés comme noms de variables, quoique certains environnements les acceptent. La liste complète des mots-clés et mots réservés est plutôt longue.

<code>
break case catch class const continue debugger
default delete do else enum export extends false
finally for function if implements import in
instanceof interface let new null package private
protected public return static super switch this
throw true try typeof var void while with yield
</code>

Ne vous souciez par de les mémoriser, mais souvenez-vous qu'ils peuvent êtr ele problème lorsqu'une définition de variable ne fonctionne pas comme prévu.

===== L'environment =====

La collection de variables et leurs valeurs qui existe à un moment donné est appelé l'environment. Lorsqu'un programme débute, l'environnement n'est pas vide. Il contient toujours des variables qui sont parties du langage standard, et, la plupart du temps, il contient des variables qui permette d'interagir avec le système qui l'entoure. Par exemple, dans un navigateur, il est des variables et fonctions pour inspecter et influencer le site chargé et lire les entrées clavier et souris.

===== Fonctions =====

Nombreuses des valeurs fournies par l'environnement par défaut ont le type function. Une fonction est un morceau de programme inséré dans une valeur. Une telle valeur peut être appliquée de manière a être exécutée dans le programme où elle est insérée. Par exemple, dans un environnement navigateur, la variable alert contient une fonction qui montre une boite de dialogue contenant un message. Elle est utilisée comme ceci :

<code>
alert("Good morning!");
</code>

Exécuter une fonction est appeler invoquer, appeler, ou appliquer celle-ci. Vous pouvez appeler une fonction en mettant des parenthèses après une expression qui produit une valeur fonction. La valeur entre parenthèses est transmise au programme dans la fonction. Dans l'exemple, la fonction alert utilise la chaîne de caractère que nous lui donnons comme le texte à montrer dans la boite de dialogue. Les valeurs données à une fonction sont appelées arguments. La fonction alert n'a besoin que d'un seuul argument, mais d'autres fonction peuvent avoir besoin d'un nombre ou de types différents d'arguments.

===== La fonction console.log =====

La fonction alert peut être utile comme dispositif de sortie lorsque l'on expérimente, mais cliquer pour fermer toutes ces boites de dialogue peut vite être énervant. Dans les précédents exemples, nous avons utiliser console.log pour sortir des valeurs. La plupart des systèmes JavaScript (incluant tous les navigateurs modernes et Node.js) fournissent une fonction console.log qui imprime ses arguments vers une sortie texte. Dans les navigateurs, cette sortie conduit vers la console JavaScript. Cette partie du navigateur est cachée par défaut, mais la plupart des navigateurs l'ouvre lorsque vous appuyez sur F12 ou, sur OS X, lorsque vous appuyez sur Commande-Option-I. Si cela ne marche pas, cherchez dans les menus un élément appelé "console web" ou "outils développeur".

Lorsque vous exécutez ces exemples, ou écrivez votre propre code, dans les pages de ce livre, les sorties console.log sont affichées après l'exemple, au lieu d'a lintérieur de la console JavaScript.

<code>
var x = 30;
console.log("the value of x is", x);
// → the value of x is 30
</code>

Bien que les variables ne puissent contenir des points, console.log en a clairement un. Cela en raison du fait que console.log n'est pas une simple variables. C'est en fait une expression qui récupère la propriété log de la valeur pointée par la variable console. Nous verrons ce que cela veut dire exactement dans le Chapitre 4.

===== Retourner des valeurs =====

Montrer une boite de dialogue ou écrire du texte à l'écran est un effet secondaire. Beaucoup de fonctions sont utiles en raison des effets secondaires qu'ils produisent. Les fonctions peuvent aussi produire des valeurs, et dans ce cas, elles n'ont pas à produire d'effet secondaire pour être utile. Par exemple, la fonction Math.max prend n'importe quel nombre de valeurs nombre et renvoie la plus grande.

<code>
console.log(Math.max(2, 4));
// → 4
<//code>

Lorsque une fonction produit une valeur on dit qu'elle retourne cette valeur. Tout ce qui produit une valeur est une expression en JavaScript, ce qui signifie qu'un appel de fonction peut être utilisé dans une expression plus large. Ici nous appelons Math.min, qui est l'opposé de Math.max, et est utilisé comment entrée de l'opérateur plus :

<code>
console.log(Math.min(2, 4) + 100);
// → 102
</code>

Le prochain chapitre explique comment écrire vos propre fonctions

===== prompt and confirm =====

L'environnement navigateur conteint d'autres fonctions hors d'alert pour afficher des fenêtres. Vous pouvez poser à l'utilisateur une question de confirmation avec confirm. Cela retourne un booléen : true si l'utilisateur clique sur OK et false si l'utilisateur clique Annuler.

<code>
confirm("Shall we, then?");
</code>

La fonction prompt peut poser une question "ouverte". Le premier argument est la question, La seconde est le texte qui sera placé dans la zone de texte éditable. Une ligne de texte peut être tapée dans cette zone, et la fonction retournera ce texte dans une chaîne de caractère.

<code>
prompt("Tell me everything you know.", "...");
<.code>

Ces deux fonctions ne sont pas très utilisées dans la programmation web moderne, principalement parce que vous n'avez aucun contrôle sur l'aspect visuel des fenêtres résultantes, mais elle sont utiles pour les programmes "jouets" et les expérimentations.

===== Contrôle du flux =====

Lorsque votre programme contient plus d'une instruction, les instructions sont exécutées, de manières prévisibles, du haut vers le bas. Comme exemple basique, ce programme à deux instructions. La première demande un nombre à l'utilisateur, et la seconde, qui est exécutées après, montre la racine carrée de ce nombre.

<code>
var theNumber = Number(prompt("Pick a number", ""));
alert("Your number is the square root of " +
      theNumber * theNumber);
</code>

La fonction Number converti une valeur en nombre. Nous avons besoin de cette conversion car le résultat de prompt est une valeur chaîne de caractère, et nous voulons un nombre. Il existe des fonctions similaires appelées String et Boolean qui convertissent des valeurs de ces types.

Voici une réprésentation schématique plutôt trivial du contrôle de flux :

http://eloquentjavascript.net/img/controlflow-straight.svg

===== Éxécution conditionnelle =====

Exécuter les instructions une à une dans l'ordre n'est pas la seule option que nous avons. Une alternative est l'exécution conditionnelle, où l'on choisit entre deux différentes routes sur la 

http://eloquentjavascript.net/img/controlflow-if.svg

L'exécution conditionnelle est écrite avec le mot-clé if en JavaScript. Dans ce cas simple, nous voulons juste que du code soit exécuter si, et seulement si une certaine conditions est validée. Par exemple, dans le précédent programme, nous souhaitons montrer la racine uniquement si l'entrée est effectivement un nombre.

<code>
var theNumber = Number(prompt("Pick a number", ""));
if (!isNaN(theNumber))
  alert("Your number is the square root of " +
        theNumber * theNumber);
</code>

Avec cette modification, si vous entrez "cheese", aucune sortie ne sera montrée.

Le mot-clé if exécute ou passe une instruction sur la base d'une expression booléenne. L'expression est écrite après le mot-clé, entre parenthèses, suivi de l'instruction à exécuter.

La fonction standard JavaScript isNaN retourne true seuelement si l'argument est NaN. La fonction Number retourne NaN lorsque l'on lui donne une chaîne de caractère qui ne représente pas un nombre valide. Donc, cette condition se traduit par "sauf si theNumber n'est pas un nombre, faire cela".

Vous n'aurez souvent pas juste du code qui s'exécute lorsqu'un condition renvoie true, mais aussi du code qui correspond à l'autre cas. Le chemin alternatif est représenté par une seconde flêche dans le diagramme. Le mot-clé else peut être utilisé avec if, pour créer deux voies séparées alternatives.

<code>
var theNumber = Number(prompt("Pick a number", ""));
if (!isNaN(theNumber))
  alert("Your number is the square root of " +
        theNumber * theNumber);
else
  alert("Hey. Why didn't you give me a number?");
</code>

Si nous avons plus de deux chemins parmi lesquels choisir, de multiples paires de if/else peuvent être "chaînées" ensemble. Voici un exemple :


<code>
var num = Number(prompt("Pick a number", "0"));

if (num < 10)
  alert("Small");
else if (num < 100)
  alert("Medium");
else
  alert("Large");
</code>

Le programme vérifiera si num est inférieure à 10. Si c'est le cas, la branche correspondante sera choisie, montrera "Small", et se terminera. Si ce n'est pas le cas, la branche else sera prise, et contient un second if. Si la seconde condition (< 100) se vérifie, cela signifie que le nombre est entre 10 et 100, et "Medium" sera affiché. Si ce n'est pas le cas, la seconde et dernière branche else sera choisie.

Le diagramme de flux pour ce programme ressemble à quelque chose comme ceci :

http://eloquentjavascript.net/img/controlflow-nested-if.svg

===== Boucles while et do =====

Considérez un programme qui imprime tous les nombres pairs de 0 à 12. Une manière de l'écrire est la suivante :

<code>
console.log(0);
console.log(2);
console.log(4);
console.log(6);
console.log(8);
console.log(10);
console.log(12);
<.code>

Ça marche, mais l'idée d'écrire un programme est de faire que quelque chose représente moins de travail, pas davantage. Si nous avons besoin de tous les nombres pairs inférieurs à 1000, l'exemple précédent serait inutilisable. Ce dont nous avons besoin est une manière de pouvoir répeter du code. Cette forme de contrôle de flux est appelée une boucle :

http://eloquentjavascript.net/img/controlflow-loop.svg

Le contrôle de flux par boucle nous permet de retourner à un point du programme où l'on se trouvait précedemment et de le répéter avec l'état actuel du programme. Si nous combinons cela avec une variable qui compte, nous pouvons avoir cela :

<code>
var number = 0;
while (number <= 12) {
  console.log(number);
  number = number + 2;
}
// → 0
// → 2
//   … etcetera
</code>

Une instruction commençant par le mot-clé while créé une boucle. Le mot while est suivi par une expression entre parenthèse puis par une instruction, semblable à un if. La boucle exécute cette instruction tant que l'expression produit une valeur qui est true lorsque convertie au type booléen.

Dans cette boucle, nous voulons à la fois imprimer le nombre actuel et ajouter deux à notre variable.Lorsque l'on a besoin d'exécuter plusieurs instructions dans une boucle, on les entoure d'accolades ({ et }). Les accolades font pour les instructions ce que les parenthèses font pour les expressions : elles les groupent ensemble, les faisant compter comme une seule instruction. Une séquence d'instruction groupée dans par des accolades est appelée un bloc.

Beaucoup de programmeurs JavaScript entoure chaque boucle ou dans le corps d'un if entre des accolades. Il le font dans un soucis de consistence et pour éviter d'avoir à ajouter ou enlever des blocs lorsque le nombre d'instruction change par la suite dans le corps de la structure. Dans ce livre, j'écrirais la plupart des corps comportant une seul instruction sans accolades, étant donné que je valorise la brièveté. Vous êtes libres de suivre le style que vous préférez.

La variable number démontre la manière qu'à une variable de suivre le progrès d'un programme. Chaque fois que la boucle se répète, number est incrémenté par 2. Donc, à la fin de chaque répétition, il est comparé au nombre 12 pour décider si le programme a effectué tout le travail qu'il avait à faire.

Pour prendre un exemple qui fait effectivement quelque chose d'utile, nous pouvons maintenant écrire un programme qui calcule et montre la valeur de 210 (2 à la puissance de 10). Nous utilisons deux variables : une qui garde la trace de notre résultat, et la seconde qui calcule combien de fois nous avons multiplié ce résultat par 2. La boucle teste si notre seconde variable a déjà atteint 10 puis met à jour les deux variables.

<code>
var result = 1;
var counter = 0;
while (counter < 10) {
  result = result * 2;
  counter = counter + 1;
}
console.log(result);
// → 1024
</code>

Le compteur pourrait aussi démarrer à 1 et vérifier si <= 10, mais, pour des raisons qui apparaitront au Chapitre 4, c'est une bonne idée de s'habituer à compter à partir de zéro.

La boucle do est une structure de contrôle similaire à la boucle while. Elle diffère en seulement un point : une boucle do exécute toujours son corps au moins une fois, puis ensuite teste si elle doit s'arrêter après cette exécution. Pour refléter cela, le test apparaît après le corps de la boucle :

<code>
do {
  var yourName = prompt("Who are you?");
} while (!yourName);
console.log(yourName);
</code>

Ce programme vous force à entrer un nom. Il vous le demandera à nouveau encore et encore tant qu'il n'aura pas autre chose qu'une chaîne de caractère vide. Appliquer l'opérateur ! convertira une valeur vers une valeur booléenne avant de l'inverser, et toutes les chaînes de caractère à l'exception de "" sont converties à true. Cela signifie que la boucle continue à s'exécuter tant que vous n'aurez pas fourni un nom qui n'est pas une chaîne de caractère vide.

===== Indenter le Code =====

Vous avez probablement remarqué les espaces que je met avant certaines instructions. En JavaScript, elles ne sont pas obligatoires — l'ordinateur acceptera sans problème un programme qui ne les aurait pas. En fait, même les sauts de ligne sont optionnels. Vous pourrioez écrire un programme comme une unique ligne si vous le souhaitiez. Le rôle de l'indentation dans les blocs est de faire ressortir la structure du code. Dans un code complexe, lorsque de nouveaux blocs sont ouverts à l'intérieur d'autres blocs, il peut devenir difficile de voir où un bloc finit et où un autre commence. Avec une indentation correcte, la forme visuelle d'un programme correspond à la forme des blocs qu'il contient. Je préfère utiliser deux espaces pour chaque ouverture de bloc, mais les goûts varient — certains préfèrent utiliser quatre caractères et d'autres le caractère tab.

===== boucles for =====

De nombreuses boucles suivent le motif vu dans les précédents exemples while. Pour commencer, une variable "compteur" est créée pour suivre le progrès de la boucle. Puis vient une boucle while, qui teste l'expression habituellement en vérifiant si le compteur à atteint la limite indiquée. À la fin du corps de la boucle, le compteur est mis à jour pour garder trace de la progression.
Étant donné que ce motif est très commun, JavaScript et d'autres langages similaires fournissent une syntaxe un peu plus courte et compréhensible, la boucle for.

<code>
for (var number = 0; number <= 12; number = number + 2)
  console.log(number);
// → 0
// → 2
//   … etcetera
</code>

Ce programme est exactement équivalent au précédent exemple qui imprimait les nombres paris. Le seul changement est que toutes les instructions qui sont reliées à l"état" de la boucle sont maintenant groupées ensemble.

Les parenthèses après un mot-clé for doivent conteni deux points-virgules. La partie avant le premier point virgule initialise la boucle, habituellement en définissant une variable. LA seconde partie est l'expression qui teste si la boucle doit continuer. La partie finale met à jour l'état de la boucle à chaque itération. Dans la plupart des cas, cela est plus court et plus claire qu'une structure while.

Voici le code qui calcule  210, en utilisant for au lieu de while :

<code>
var result = 1;
for (var counter = 0; counter < 10; counter = counter + 1)
  result = result * 2;
console.log(result);
// → 1024
</code>

Notez que même si aucun bloc n'est ouvert avec un {, l'instruction dans la boucle est toujours indentée de deux espaces pour faire apparaître plus clairement qu'elle "appartient" à la ligne qui la précède.

===== Sortir d'une boucle =====

Que la condition d'une boucle soit évaluée à false n'est pas la seule manière de terminer une boucle. Il existe une instruction spéciale appelée break qui a pour effet immédiat de sortir de la boucle.

Ce programme illustre l'instruction break. Il trouve le premier nombre qui est à la fois plus grand ou égal à 20 et divisible par 7.

<code>
for (var current = 20; ; current++) {
  if (current % 7 == 0)
    break;
}
console.log(current);
// → 21
</code>

Utiliser l'opérateur modulo (%) est une manière facile de tester si un nombre est divisible par un autre nombre. S'il l'est, le reste de la division est zéro.

La construction for dans l'exemple n'a pas de partie qui teste la fin de la boucle. Cela signifie que la boucle ne s'arrêtera pas sauf si l'instruction break est exécuter.

Si vous omettiez l'instruction break ou accidentellement écriviez une condition toujours évaluée à true, votre programme sera bloqué dans une boucle infinie. Un programme bloqué dans une boucle infinie ne se termine jamais, ce qui est habituellement une mauvaise chose.

Si vous veniez à créer une boucle infinie dans un des exemples de ces pages, vous devriez normalement vous voir demander au bout de quelques secondes si vous souhaitez mettre fin au script. Si cela échoue, vous devrez fermer l'onglet dans lequel vous travaillez, ou dans certains navigateurs fermer le navigateur, afin de régler le problème.

Le mot-clé continue est similaire à break, en cela qu'il influence le progrès d'une boucle. Lorsque continue est rencontrée dans le corps d'une boucle, on sort immédiatement du corps de la boucle, et l'on continue avec la prochaine itération.

===== Mettre à jours des variables succintement =====

En particulier lors des boucles, un programme à parfois besoin de "mettre à jour" une variable pour contenir une valeur basée sur la valeur précédent de ladite variable.

<code>counter = counter + 1;</code>

JavaScript fourni une raccourci pour cela :

<code>counter += 1;</code>

Des raccourcis similaires fonctionnent pour de nombreuses opérations, comme result *= 2 pour doubler result ou counter -= 1 pour compter à l'envers.

Cela nous permet de raccourci encore plus de notre exemple de compteur.

<code>
for (var number = 0; number <= 12; number += 2)
  console.log(number);
</code>

Pour counter += 1 et counter -= 1, il existe des équivalent encore plus courts : counter++ et counter--.

===== Dispatcher sur la base d'une valeur avec switch =====

Il est commun pour du code de ressembler à cela :

<code>
if (variable == "value1") action1();
else if (variable == "value2") action2();
else if (variable == "value3") action3();
else defaultAction();
</code>

Il existe une construction appelée switch qui vise à résoudre un tel “dispatch” de manière plus directe. Malheureusement, la syntaxe JavaScript utilisée pour cela (il s'agit d'un héritage des langages de programmation C/Java) est quelque peu étrange — une chaîne d'instructions if semble parfois avoir un meilleur aspect. Voici un exemple :

<code>
switch (prompt("What is the weather like?")) {
  case "rainy":
    console.log("Remember to bring an umbrella.");
    break;
  case "sunny":
    console.log("Dress lightly.");
  case "cloudy":
    console.log("Go outside.");
    break;
  default:
    console.log("Unknown weather type!");
    break;
}
</code>

Vous pouvez mettre autant de labels casedans le bloc ouvert par switch. Le programme sautera toujours au label correspondant à la valeur donnée à switch ou à default si aucune valeur correspondante n'est trouvée. L'exécution démarre à cet endroit, même s'il se trouve sous un autre label, jusqu'à ce qu'il rencontre une instruction break. Dans certains cas comme dans le cas "sunny" de l'exemple, cela peut être utilisé pour partager du code entre deux cas (cela recommande d'aller dehors aussi bien pour un temps ensoleillé que nuageux). Mais attention : il est facile d'oublier un break, ce qui causera l'exécution de code que vous ne souhaitez pas forcément voir exécuté.

===== Capitalisation =====

Les noms de variable ne devrait pas comporter d'espaces, mais il est parfois utile d'utiliser plusieurs mots pour décrire clairement ce que la variable représente. Cela est en gros à vous de choisir comment écrire vos noms de variables comportant plusieurs mots :

<code>
fuzzylittleturtle
fuzzy_little_turtle
FuzzyLittleTurtle
fuzzyLittleTurtle
</code>

Le premier style peut être difficile à lire. Personnellement, j'aime l'aspect de la version avec underscore, bien que ce soit un petit peu difficile à taper. Les fonctions Javascripts standards et la plupart des programmeurs JavaScripts suivent le style du bas —  ils capitalisent tous les mots exceptés le premier. Il n'est pas difficile de s'habituer à ces petites choses, et du code avec différents styles peut être ennuyeux à lire, nous suivrons donc cette convention.

Dans quelques cas, comme la fonction Number, la première lettre est aussi capitalisée. Cela est pour marquer la fonction comme un constructeur. Ce qu'est un constructeur sera clarifié dans le Chapitre 6. Pour le moment, la chose importante est de ne pas se soucier de cette impression de manque de constance.

===== Commentaires =====

Parfois, le code brut ne fourni par toutes les informations nécessaires que l'on souhaite voir transmise aux lecteurs humains de celui-ci, où celles-ci sont communiquées de manière tellement cryptiques que ceux-ci pourraient ne pas les comprendre. À d'autres moments, vous pourriez simplement vous sentir poètes et vouloir inclure quelques pensées comme partie du programme. C'est à cela que les commentaires servent.

Un commentaire est un morceau de texte qui est partie du programme mais totalement ignoré par l'ordinateur. JavaScript propose deux manières d'écrire des commentaires. Pour écrire un commentaire d'une ligne, vous pouvez utiliser deux caractères slash (//) puis écrire le texte du commentaire à leur suite.

<code>
var accountBalance = calculateBalance(account);
// It's a green hollow where a river sings
accountBalance.adjust();
// Madly catching white tatters in the grass.
var report = new Report();
// Where the sun on the proud mountain rings:
addToReport(accountBalance, report);
// It's a little valley, foaming like light in a glass.
</code>

Un commentaire // va jusqu'a la fin de la ligne. Une section de texte contenue entre /* et */ sera ignorée, même si elle contient des sauts de ligne. Cela est parfois utile pour ajouter des blocs d'informations à propos d'un fichier ou d'un bout de programme.

<code>
/*
 I first found this number scrawled on the back of one of
 my notebooks a few years ago. Since then, it has often
 dropped by, showing up in phone numbers and the serial
 numbers of products that I've bought. It obviously likes
 me, so I've decided to keep it.
*/
var myNumber = 11213;
</code>

===== Sommaire =====

Vous savez maintenant qu'un programme est constitué d'instructions, qui sont elles-même parfois contenues dans plusieurs instructions. Les instructions tendent à contenir des expressions, qui elles-même peuvent être constituées de plus petites expressions.

Écrire des instruction les une après les autres donne un programme qui s'exécute de bas en haut. Vous pouvez introduire des variations dans le flux en utilisant des instructions conditionnelles (if, elseet,  switch) et des boucles (while, do, and for).

Les variables peuvent être utilisées pour ranger des données sous un nom, et sont utiles pour suivre l'état d'un programme au fur et à mesure du temps. L'enrionnement est l'ensemble des variables définies. Les systèmes JavaScripts mettent toujours à disposition un ensemble de variables utiles dans votre environnement.

Les fonctions sont des valeurs spéciales qui encapsulent un morceau de programme. Vous pouvez les invoquer en écrivant functionName(argument1, argument2). Un tel appel de fonction est une expression, et peut produire une valeur.

===== Exercises =====

Si vous n'êtes pas sûrs de comment essayez vos solutions à ces exerces, référez-vous à l'introduction.

Chaque exercice commence avec une description du problème. Lisez cela et essayez de solver l'exercice. Si vous rencontrez des problèmes, considérez la lecture des indices après l'exercice. La solution complète des exercices n'est pas inclue dans ce livre, mais vous pouvez les trouvez en ligne à l'adresse eloquentjavascript.net/code. Si vous souhaitez apprendre quelque chose des exercices, je vous recommande de ne regarder qu'après en avoir trouvé la solution, ou au pire après l'avoir sérieusement attaqué de long en large au point d'en tirer un léger mal de tête.

===== Boucle triangle =====

Écrivez une boucle qui fera septs appels à console.log afin d'imprimer le triangle suivant :

<code>
#
##
###
####
#####
######
#######
</code>

Il peut se réveler utile de connaître la longueur d'une chaîne de caractère en écrivant .length après celle-ci.

<code>
var abc = "abc";
console.log(abc.length);
// → 3
</code>

La plupart des exercices contiennent un morceau de code que vous pouvez modifier pour solver l'exercice. Souvenez-vous que vous pouvez cliquer sur les blocs de code pour les éditer.

<code>
// Your code here.
</code>

Vous pouvez démarrer avec un programme qui imprime les numéros 1 à 7, que vous pouvez dériver avec quelques modifications de l'exemple imprimant les numéros pairs donnés plus tôt dans ce chapitre, où la boucle for a été introduite.

Considérez maintenant l'équivalence entre nombres et caractères #. Vous pouvez aller de 1 à 2 en ajoutant 1 (+= 1). Vous pouvez aller de "#" à "##" en ajoutant un caractère (+= "#"). Par conséquent, votre solution peut suivre avec une grande proximité le programme d'impression de nombres.

===== FizzBuzz =====

Écrivez un programme qui utilise console.log pour imprimer tous les nombres de 1 à 100, avec deux exceptions. Pour les nombres divisibles par 3, imprimer "Fizz" à la place du nombre, et pour les nombres divisibles par 5 (mais pas par 3), imprimez "Buzz" à la place.

Une fois que vous avez cela qui fonctionne, modifiez votre programme pour imprimer "FizzBuzz", pour les nombres divisibles à la fois par 3 et 5 (et toujours imprimer "Fizz" ou "Buzz" pour les nombres uniquement divisible par l'un des deux).

(Il s'agit d'une question utilisée en entretien dont on clame qu'elle suffirait a éliminer un pourcentage signifiant des candidats. Donc si vous l'avez résolue, vous pouvez en tirer en retirer satisfaction.)

<code>// Your code here.</code>

Faire défiler est clairement une question de boucle, et sélectionner quoi imprimer est question d'exécution conditionnelle. Souvenez-vous du truc de l'usage de l'opérateur modulo (%)pour vérifier si un nombre est divisible par un autre (avec un reste égal à 0).

Dans la première version, il y a trois issues possibles de chaque nombre, vous aurez donc à créer une chaîne if/else if/else.

La seconde version du programme a une solution simple et intelligente. La façon la plus simple est d'ajouter une nouvelle “branch” pour tester précisemment la condition donnée. Pour la méthode intelligente, mettez en place une chaîne de caractère qui contiendra le ou les mots, et imprimez soit cette chaîne, soit le nombre s'il n'y a pas de mot, en faisant un usage élégant de l'opérateur || .

===== Plateau d'échec =====

Écrivez un programme qui créé une chaîne de caractère qui représente un damier de 8 carreaux par 8, en utilisant des caractères newline pour séparer les lignes. À chaque carreau du plateau correspond un espace ou un caractère #. Ces caractères devraient former le plateau.

Passer la chaîne de caractère à console.log devrait afficher quelque chose comme celà :

<code>
 # # # #
# # # #
 # # # #
# # # #
 # # # #
# # # #
 # # # #
# # # #
</code>

Lorsque vous avez obtenu un programme générant ce motif, définissez une variable size = 8 et modifiez le programme de manière à ce qu'il fonctionne pour n'importe quelle valeur de size, et imprime une grille correspondant à cette valeur.

<code>// Your code here.</code>

La chaîne de caractère peut être construite en commencant par un caractère vide ("") et en ajoutant des caractères de manière répétée. Un caractère newline est écrit "\n".

Utilisez console.log pour inspecter la sortie du programme.

Pour travailler avec deux dimensions, nous aurez besoin d'une boucle dans une autre. Mettez des accolades autour des corps de vos boucles pour faciliter le repérage de leur début et fin. Essayer d'indenter correctement ces corps. L'ordre des boucles doit suivre l'ordre dans lequel l'on construit la chaîne de caractère (ligne par ligne, de gauche à droite, de haut en bas). La boucle extérieur se charge des lignes tandis que la boucle intérieure se charge des caractères des lignes.

Vous aurez besoin de deux variables pour garder trace de l'avancée de votre programme.  Pour savoir ou mettre un espace ou un dièse, vous pouvez tester si la somme des compteurs est pair (% 2).

Finir une ligne en ajoutant un caractère newline est un événement qui arrive lorsqu'une ligne est terminée, donc occupez-vous-en après la boucle intérieure mais à l'intérieur de la boucle externe.