Ce guide s’adresse aux intégrateurs, graphistes et autres débutants en programmation, afin de se préparer à la formation JavaScript.
Préalable : rigueur de syntaxe
Si en écrivant en Français, vous oubliez un point à la fin d’une phrase, ce n’est pas dramatique : c’est un humain qui va lire votre texte, et il pourra deviner que c’est juste un oubli.
En programmation, c’est une machine qui va lire votre code : tout ce que vous écrivez dans un fichier JavaScript doit donc avoir une syntaxe valide. La programmation demande une rigueur constante.
Les conventions de nommage
Il faut notamment faire attention à la casse, c’est-à-dire qu’une même lettre en majuscule ou en minuscule désigne deux caractères différents.
Pour éviter les erreurs, des conventions d’écriture existent :
- le camelCase pour les variables et fonctions (tout attaché, on démarre par une minuscule, puis majuscule à chaque nouveau mot),
- le PascalCase pour les classes (tout attaché, on démarre directement par une majuscule).
Les caractères spéciaux (accents, tirets, etc.) ne sont pas autorisés.
Le snake_case, qui existe dans d’autres langages, est à prohiber en JavaScript.
En Anglais
Comme il s’agit d’un guide d’initiation, par souci de simplification, les exemples qui vont suivre vont nommer les variables et les fonctions en Français.
Ne faites jamais ça dans un code réel. Les langages sont en Anglais, donc votre code doit aussi l’être, d’une part par cohérence, d’autre part pour ne pas limiter la compréhension de votre code à des développeurs francophones.
Les commentaires
Si vous voulez ajouter des notes dans votre fichier, qui ne seront pas exécutées comme du vrai code JavaScript, vous pouvez ajouter ce qu’on appelle des commentaires :
Les variables
La programmation servant à automatiser, il s’agit en grande partie de généralisation et d’abstraction, quelque chose qui n’est pas évident pour tout le monde. Pour démystifier, nous allons nous servir d’une métaphore concrète : nous allons imaginer que nous voulons cuisiner.
Pour cuisiner, la première chose dont vous aurez besoin sont les ingrédients. Ceux-ci ne se trouvent pas en vrac sur le sol de votre cuisine. Ils sont rangés dans des conteneurs : pots, bouteilles, boîtes, tiroirs et autres.
C’est cela une variable : un conteneur pour stocker une donnée. Et pour s’y retrouver, chaque variable/conteneur va avoir un nom, une étiquette.
Créer une variable
En JavaScript moderne, pour créer une variable et y stocker une donnée :
Les types de données simples
En programmation, il y aura différents types de données :
- du texte, appelé techniquement une chaîne de caractères (string en Anglais),
- un nombre (number en Anglais),
- un état qui sera vrai ou faux, appelé techniquement un booléen (boolean en Anglais),
- rien du tout (null en Anglais).
Les listes homogènes
Si vous avez des œufs, vous n’allez pas avoir une boîte pour chaque œuf. Vous aurez une boîte qui contient tous les œufs. Il s’agit donc d’une liste homogène, c’est-à-dire qui ne contient que des choses de même nature. C’est ce qu’on appelle en programmation un tableau (array en Anglais).
Comme il s’agit d’éléments homogènes, nous n’aurons pas besoin de les distinguer : chaque valeur de la liste est donc automatiquement étiquetée avec un nombre, en commençant par 0.
Les étiquettes pour chaque valeur dans une liste s’appellent une clé (key en Anglais) ou un index. Si je veux accéder directement à l’une des valeurs de la liste, par exemple l’œuf n°2 :
Je peux aussi savoir combien il y a d’œufs dans la boîte :
Je peux également ajouter un œuf :
Les listes hétérogènes
Imaginons maintenant que nous avons une boîte pour nos épices, avec différents tiroirs. Cette fois, les données sont hétérogènes. Nous n’allons pas étiqueter chaque tiroir avec 0, 1, 2, 3, etc., car sinon nous ne saurons plus de quelle épice il s’agit !
Il s’agit toujours d’une liste (puisque nous avons plusieurs épices), mais cette fois il va falloir choisir des noms pour chaque tiroir. En JavaScript, cela s’appelle un objet (object en Anglais).
Pour utiliser ce qu’il y a dans un des tiroirs, il suffit de faire :
La difficulté, c’est que cela peut s’imbriquer. Mais cela n’ajoute rien de nouveau : il faut simplement y aller pas à pas.
Les constantes
Vous pouvez changer la valeur d’une variable classique à n’importe quel moment :
On voit bien que cela risque vite de devenir incohérent. Il est donc possible de créer des conteneurs qu’il ne sera plus possible de modifier par la suite : c’est ce qu’on appelle des constantes.
Vous vous rendrez compte dans la pratique que c’est pour les listes (tableaux et objets) que c’est le plus pertinent.
Les blocs
Les boucles
La programmation sert en grande partie à automatiser des traitements. Si vous voulez répéter la même action dix fois, il suffit de faire ce qu’on appelle une boucle :
En détail, que se passe-t-il : un compteur est initialisé à 0, puis on lui dit de continuer tant que le compteur n’a pas atteint 10, et à chaque répétition on augmente le compteur de +1.
Il existe des variantes de boucles, mais nous les laissons de côté car vous en aurez rarement besoin en JavaScript.
Les itérations
Là où il est le plus intéressant de faire une boucle, c’est sur les tableaux. Si je veux faire la même action sur tous mes œufs, plutôt que le répéter à la main x fois, je peux automatiser :
| for (const oeuf of boiteAOeufs) { | |
| // Action qui va séparer le blanc du jaune pour chaque oeuf | |
| } |
Cela s’écrit comme cela se dit : « pour chaque œuf de la boîte, fais-moi ceci ». On parle d’itération.
Les conditions
Automatiser, c’est bien, mais nous aurons vite des cas particuliers à gérer, et il faut pouvoir s’adapter. C’est à cela que servent les conditions.
else if et else sont facultatifs, et il peut y avoir plusieurs else if.
Il est aussi possible de tester plusieurs conditions en même temps :
Les fonctions
Déclarer une fonction
Il nous faut maintenant soit récupérer une recette, soit créer la nôtre. Une recette est une série d’actions à réaliser. En programmation, on appelle cela une fonction.
Exécuter une fonction
La déclaration de la fonction n’est que la recette : la lire ou même l’écrire ne fait pas la mousse au chocolat pour autant. Il faut maintenant invoquer la recette : on parle d’exécution de la fonction :
Là, nous avons dépassé la métaphore : invoquer la recette fait désormais la mousse au chocolat tout seul ! Et nous pouvons la réutiliser autant de fois que nécessaire.
Les paramètres
Dans la même idée que les conditions : une fonction sert à automatiser, mais nous pouvons permettre des cas particuliers. C’est à cela que servent les paramètres, auxquels il est préférable d’associer une valeur par défaut.
La portée locale
Afin qu’il n’y ait pas d’interférences entre les fonctions, ce qui est créé dans la fonction est en portée locale : cela signifie que cela n’existe qu’à l’intérieur de la fonction.
C’est comme si le saladier se nettoyait tout seul pour chaque exécution de la fonction, pour éviter qu’il reste des traces d’une recette précédente !
Les paramètres sont aussi en portée locale.
Les classes
Les variables et fonctions peuvent suffire à faire la recette : on parle de programmation procédurale, car nous avons fait les choses au fil de l’eau, telles qu’elles vont se passer concrètement.
C’est le plus simple pour démarrer, mais il n’y a aucune organisation : les différentes variables et fonctions pour faire la recette sont en vrac. Nous pourrions les rassembler dans une structure commune pour avoir véritablement une recette, avec la liste des ingrédients (les variables), puis les différentes étapes (les fonctions). C’est ce qu’on appelle une classe.
Il ne reste plus qu’à invoquer la recette :
On parle alors de programmation orientée objet. C’est seulement la base : le reste (notamment le this) vous sera expliqué en formation.