« Nous pensons que nous créons le système pour nos propres usages. Nous croyons que nous le construisons à notre image… Mais l’ordinateur n’est pas vraiment comme nous. Il s’agit d’une projection d’une très petite partie de nous-même : cette partie dévouée à la logique, l’ordre, les règles et la clarté. »

- Ellen Ullman, Close to the Machine : Technophilia and its Discontents

C’est ici que la programmation peut entrer en jeu. Programmer est l’acte de construire un programme – un ensemble précis d’instructions indiquant à un ordinateur quoi faire. Parce que les ordinateurs sont des bêtes stupides et pédantes, la programmation est fondamentalement fastidieuse et frustrante.

Heureusement, si vous arrivez à faire abstraction de ce désagrément et peut-être même apprécier la rigueur de penser dans les termes que ces machines stupides peuvent comprendre, la programmation peut devenir gratifiante. Cela vous permet de réaliser en quelques secondes des tâches impossibles à réaliser à la main. C’est un moyen pour que votre ordinateur réalise des choses qu’il ne pouvait faire auparavant. Et tout cela procure un merveilleux exercice de pensée abstraite.

La plupart des programmes sont réalisés avec des langages de programmation. Un langage de programmation est un langage artificiel inventé pour fournir des instructions aux ordinateurs. Il est intéressant de remarquer que la manière la plus efficace que nous ayons trouvée pour communiquer avec l’ordinateur soit aussi similaire à la façon dont on communique entre nous. Comme les langages humains, les langages informatiques permettent à des mots et des phrases d’être combinés de façon nouvelle, rendant possible l’expression de tout nouveaux concepts.

Au début, les interfaces basées sur le texte telles que les invites de commandes BASIC et DOS des années 80 et 90 étaient le moyen principal d’interagir avec les ordinateurs. Elles ont largement été remplacées par des interfaces graphiques, qui sont plus faciles d’approche, mais qui offrent moins de liberté. Les langages de programmation sont toujours présents si vous savez où regarder. Un de ces langages, JavaScript, est intégré dans tous les navigateurs web modernes et de ce fait, est disponible sur la plupart des appareils.

Ce livre va tenter de vous le rendre suffisamment familier pour vous permettre de faire des choses utiles et amusantes avec ce langage.

Parallèlement à l’enseignement du JavaScript, je vais vous initier aux principes de base de la programmation. Il s’avère que la programmation est difficile. Les règles fondamentales sont claires et simples, mais les programmes construits sur ces règles tendent à devenir assez complexes pour introduire leurs propres règles et de nouvelles complexités. D’une certaine manière, vous construisez votre propre labyrinthe et vous pourriez bien vous y perdre.

Pendant la lecture de ce livre, il y aura des moments terriblement frustrants. Si vous êtes nouveau dans la programmation, il y aura beaucoup de nouvelle matière à digérer. La plupart des éléments de cette matière seront alors combinés de manière à approfondir votre compréhension.

Libre à vous de faire les efforts nécessaires. Lorsque vous avez du mal à suivre le livre, ne partez sur aucune conclusion hâtive concernant vos propres capacités. Vous êtes capable – vous avez juste besoin de persévérer. Prenez une pause, relisez certains passages et assurez-vous de lire et de comprendre les exemples de programmes et les exercices. Apprendre est un travail difficile, mais chaque chose que vous apprendrez vous appartiendra et rendra l’apprentissage subséquent plus facile.

« Quand les actions deviennent non productives, ramassez de l’information ; quand les informations deviennent indigestes, dormez. »

- Ursula L. Le Guin, The Left Hand of Darkness

Un programme est l’ensemble de plusieurs éléments. C’est un morceau de texte rédigé par un programmeur, c’est la force dirigeante qui fait que l’ordinateur fait ce qu’il fait, ce sont les données dans la mémoire de l’ordinateur, d’ailleurs il contrôle les actions effectuées sur cette même mémoire. Les analogies qui tentent de comparer un programme à des objets familiers sont souvent incomplètes. Celle qui convient le mieux est celle d’une machine – beaucoup de parties différentes sont généralement impliquées et pour que l’ensemble se tienne, nous devons considérer les façons dont ces parties sont interconnectées et contribuent au fonctionnement de l’ensemble.

Un ordinateur est une machine physique qui agit comme l’hôte de ces machines immatérielles. Les ordinateurs en soi ne peuvent seulement effectuer que des actions simples et stupides. La raison pour laquelle ils sont si utiles est qu’ils exécutent ces actions à une vitesse incroyablement élevée. Un programme peut ingénieusement combiner une quantité gigantesque de ces actions simplissimes afin de réaliser des choses beaucoup plus complexes.

Un programme est une construction de pensées. Ça ne coûte rien à construire, ça ne pèse rien, et ça grandit rapidement au rythme de vos doigts sur le clavier.

Mais sans attention, la taille d’un programme et sa complexité vont s’étendre hors de contrôle, mystifiant même la personne qui l’a créé. Garder un programme sous contrôle est le principal problème en programmation. Quand un programme fonctionne, c’est merveilleux. L’art de la programmation est l’aptitude de contrôler la complexité. L’enjeu principal est subtil – faire simple à travers la complexité.

Certains programmeurs croient que cette complexité est mieux contrôlée en utilisant seulement de petits ensembles de techniques très bien comprises dans leurs programmes. Ils ont établi des règles strictes (« les bonnes pratiques ») prescrivant la forme qu’un programme devrait avoir et ils restent prudemment à l’intérieur de leur petite zone de confort.

Ceci n’est pas seulement ennuyant, c’est inefficace. Les nouveaux problèmes nécessitent souvent de nouvelles solutions. Le monde de la programmation est très jeune et continue de se développer rapidement, et est assez varié pour laisser largement de place à différentes approches. Il y a de nombreuses et terribles méprises à faire dans le design d’un programme, et vous devriez progresser de manière à comprendre ce que vous faites. L’instinct de savoir à quoi ressemble un bon programme s’acquiert avec la pratique, non en suivant une liste de règles.

Au tout début de l’informatique, il n’y avait pas de langages. Les programmes ressemblaient à ceci :

00110001 00000000 00000000

00110001 00000001 00000001

00110011 00000001 00000010

01010001 00001011 00000010

00100010 00000010 00001000

01000011 00000001 00000000

01000001 00000001 00000001

00010000 00000010 00000000

01100010 00000000 00000000

Voici un programme qui ajoute ensemble tous les nombres de 1 à 10 et imprime le résultat : 1 + 2 + … + 10 = 55. Il pourrait s’exécuter sur une simple et hypothétique machine. Pour programmer sur les premiers ordinateurs, il était nécessaire de configurer de grands ensembles de commutateurs dans la bonne position ou encore perforer des trous dans un ruban ou une carte et les insérer dans l’ordinateur. Vous pouvez probablement imaginer comment cette procédure était fastidieuse et sujette aux erreurs. Même écrire de simples programmes demandait une grande intelligence et de la discipline. Les programmes plus complexes étaient pratiquement inconcevables.

Évidemment, entrer manuellement ces mystérieux schémas de bits (des uns et des zéros) procurait au programmeur le sentiment profond d’être un puissant sorcier. Et cela devait en valoir la peine en termes de satisfaction professionnelle.

Chacune des lignes du précédent programme contient une instruction unique. On pourrait le traduire en français ainsi :

1. Écrire le nombre 0 à l’emplacement mémoire 0.
2. Écrire le nombre 1 à l’emplacement mémoire 1.
3. Écrire la valeur située à l’emplacement mémoire 1 dans l’emplacement à l’adresse 2.
4. Soustraire le nombre 11 de la valeur située à l’emplacement mémoire 2.
5. Si la valeur à l’emplacement mémoire 2 est le nombre 0, continuer avec l’instruction 9.
6. Ajouter la valeur située à l’emplacement mémoire 1 à la valeur située à l’emplacement mémoire 0.
7. Ajouter le nombre 1 à la valeur située à l’emplacement mémoire 1.
8. Continuer avec l’instruction 3.
9. Afficher la valeur située à l’emplacement mémoire 0.

Bien que cela soit déjà plus lisible que la soupe de bits, cela reste sensiblement obscur. Il est beaucoup plus aisé d’utiliser des noms à la place des nombres pour les instructions et les adresses mémoires.

Affecter la variable total à 0.
Affecter la variable compteur à 1.
[boucle]
Affecter la variable comparer à la variable compteur.
Soustraire 11 de la variable comparer.
Si comparer est égal à zéro, continuer à [fin].
Ajouter compteur à total.
Ajouter 1 à compteur.
Continuer à [boucle].
[fin]
Afficher total.

À ce moment, pouvez-vous comprendre comment le programme fonctionne ? Les deux premières lignes affectent leur valeur initiale à deux emplacements mémoire : total sera utilisé pour compiler le résultat du calcul, et compteur servira à faire le suivi du nombre auquel nous nous sommes rendus. Les lignes utilisant comparer sont probablement les plus étranges. Le programme veut savoir si compteur est égal à 11 pour décider s’il peut arrêter son exécution. Puisque notre machine hypothétique est plutôt primitive, elle peut seulement comparer si un nombre est zéro, puis prendre une décision en conséquence. Donc, le programme utilise l’emplacement mémoire nommé comparer pour calculer la valeur de compteur - 11 et prendre une décision basée sur cette valeur. Les deux lignes suivantes ajoutent la valeur de compteur au résultat et augmentent compteur de 1 chaque fois que le programme décide que compteur n’est pas encore égal à 11.

Voici le même programme en JavaScript :

let total = 0, count = 1;
while (count <= 10) {
  total += count;
  count += 1;
}
console.log(total);
// → 55

Cette version apporte quelques améliorations. Le plus important, il n’est plus nécessaire de spécifier la manière dont nous voulons que le programme saute en arrière et en avant. La boucle while s’en charge. Elle continue d’exécuter le bloc (entouré par les accolades) en dessous aussi longtemps que la condition fournie est respectée. Cette condition est « count <= 10 », ce qui veut dire « count est plus petit ou égal à 10 ». Nous n’avons plus besoin de créer une valeur temporaire pour la comparer à zéro, détail qui était tout simplement insignifiant. Une partie de la puissance des langages de programmation est qu’ils peuvent s’occuper des détails insignifiants pour nous.

À la fin du programme, après que la boucle while est terminée, l’instruction console.log est utilisée pour afficher le résultat.

Finalement, voici ce à quoi le programme aurait pu ressembler si nous avions eu les commandes d’instructions range et sum disponibles qui, respectivement, créent une collection de nombres à l’intérieur d’un intervalle donné et calcule la somme de la collection de nombres :

console.log(sum(range(1, 10))) ;
// → 55

La morale de cette histoire est qu’un même programme peut être rédigé d’une manière courte ou longue, de façon peu lisible ou facile à comprendre. La première version du programme était extrêmement obscure, alors que la version finale est presque un langage humain (anglais) : « log the sum of the range of numbers from 1 to 10 ». (« Afficher la somme des nombres dans l’intervalle de 1 à 10 ».) (Nous verrons dans les chapitres suivants comment définir des opérations comme sum et range.)

Un bon langage de programmation aide le programmeur en lui permettant de parler à un niveau plus élevé des actions que l’ordinateur doit accomplir. Il aide à éviter d’avoir à tenir compte des détails, il fournit des blocs d’instructions pratiques (tel que while et console.log), il permet de définir ses propres blocs d’instructions (tel que sum et range), et rend ces blocs faciles à construire.

JavaScript fut introduit en 1995 comme une manière d’ajouter des programmes dans les pages web sur le navigateur Netscape. Le langage est désormais intégré dans tous les grands navigateurs web graphiques. Il rend possibles les applications web modernes – applications avec lesquelles vous interagissez directement sans devoir recharger la page à chaque action. JavaScript est utile également dans les sites web plus traditionnels en fournissant différentes formes d’interactivités et de fonctionnalités.

Il est important de noter que JavaScript n’a pratiquement rien à voir avec le langage de programmation nommé Java. Les similarités de nom furent inspirées par des considérations marketing plutôt que par bon jugement. Quand JavaScript fut introduit, le langage Java était fort et gagnait en popularité. Quelqu’un pensa qu’il serait judicieux de surfer sur ce succès. Maintenant nous sommes pris avec ce nom.

Après son adoption en dehors de Netscape, un standard fut défini pour décrire la façon dont le langage JavaScript devait fonctionner de manière à ce que les nombreux logiciels qui revendiquaient supporter JavaScript puissent parler du même langage. Il se nomme le standard ECMAScript, d’après l’organisation internationale Ecma qui fut à l’origine de la standardisation.

Certaines personnes disent des choses horribles à propos de JavaScript. Certaines de ces choses sont vraies. Quand je dus écrire quelque chose en JavaScript pour la première fois, j’en suis venu rapidement à mépriser ce langage. Il pouvait accepter pratiquement tout ce que j’écrivais, mais l’interprétait d’une manière complètement différente de ma volonté. Cela avait beaucoup à voir avec le fait que je n’avais aucune idée de ce que je faisais, bien sûr, mais il y a un véritable problème là : JavaScript est ridiculement permissif. L’idée derrière cette conception était que cela rendrait la programmation JavaScript plus facile pour les débutants. Dans les faits, cela rend plus ardu de trouver les problèmes dans vos programmes parce que le système ne vous les indique pas expressément.

Par ailleurs, cette flexibilité a aussi ses avantages. Cela laisse place à beaucoup de techniques qui sont impossibles à réaliser avec les langages plus stricts ; et comme vous pourrez le découvrir par exemple au chapitre 10, cela permet de surmonter certaines lacunes de JavaScript. Après avoir appris le langage convenablement et travaillé avec lui un certain temps, j’ai commencé à aimer JavaScript.

Il y a eu plusieurs versions de JavaScript. ECMAScript version 3 fut la plus largement supportée des versions pendant la grande ascension de JavaScript aux alentours de 2000 à 2010. À cette époque, les travaux sur l’ambitieuse version 4 étaient en cours, et planifiaient un nombre important d’améliorations et d’extensions au langage. Changer radicalement un langage vivant et largement utilisé s’est avéré politiquement difficile et les travaux sur la version 4 furent abandonnés en 2008 menant, en 2009, à une version 5 beaucoup moins ambitieuse qui apporta seulement quelques améliorations non controversées. Puis en 2015 vint la version 6, une mise à jour majeure incluant certaines des idées planifiées pour la version 4. Depuis, nous avons eu de nouvelles petites mises à jour chaque année.

Le fait que le langage évolue signifie que les navigateurs doivent constamment se mettre à jour, et si vous utilisez un vieux navigateur, il est possible qu’il ne supporte pas toutes les fonctionnalités. Les concepteurs du langage font attention pour n’apporter aucun changement qui puisse casser les programmes existants, cela fait en sorte que les nouveaux navigateurs peuvent quand même exécuter les vieux programmes. Dans ce livre, j’utilise la version 2017 de JavaScript.

Les navigateurs web ne sont pas les seules plateformes où JavaScript est utilisé. Certaines bases de données telles que MongoDB et CouchDB utilisent JavaScript comme langage de scripts et de requêtes. Plusieurs plateformes de programmation pour postes de travail et pour serveurs, comme le notable projet Node.js (le sujet du chapitre 20), fournissent un environnement pour programmer en JavaScript en dehors du navigateur.

Le code est le texte qui constitue les programmes. La plupart des chapitres de ce livre contiennent beaucoup de code. Je crois que lire et écrire du code est une partie indispensable de l’apprentissage de la programmation. Essayez de ne pas simplement survoler les exemples – lisez-les attentivement et comprenez-les. Cela pourra sembler lent et confus au début, mais je vous promets que vous allez vous y habituer. La même chose vaut pour les exercices. Ne présumez pas que vous les comprenez tant que vous n’avez pas encore écrit une solution valide.

Je vous recommande de tester vos solutions aux exercices dans un interpréteur JavaScript. De cette façon, vous saurez immédiatement si ce que vous faites fonctionne, et, je le souhaite, serez tenté d’expérimenter et d’aller au-delà des exercices.

Lorsque vous lisez ce livre dans votre navigateur, vous pouvez éditer (et exécuter) tous les exemples de programmes en cliquant dessus.

Si vous désirez exécuter les programmes inscrits dans ce livre en dehors du site web du livre, certaines attentions seront requises. Plusieurs exemples sont complets et devraient fonctionner dans n’importe quel environnement JavaScript. Mais le code de certains des derniers chapitres est souvent écrit pour un environnement spécifique (le navigateur ou Node.js) et ne peut pas être exécuté ailleurs. De plus, certains chapitres décrivent de plus gros programmes, et les morceaux de code inclus sont dépendants d’autres ou de fichiers externes. Le bac à sable (SandBox) du site web fournit des liens vers des fichiers zip contenant tous les scripts et données nécessaires à l’exécution du code pour un chapitre donné.

Ce livre contient essentiellement trois parties. Les douze premiers chapitres parlent du langage JavaScript. Les sept chapitres suivants concernent les navigateurs web et la manière dont JavaScript est utilisé pour les programmer. Finalement, deux chapitres sont dédiés à Node.js, un autre environnement dans lequel on peut programmer en JavaScript.

Dans le livre, il y a cinq projets de chapitres qui décrivent de plus grands exemples de programmes qui vous donneront un goût de ce qu’est la programmation. Par ordre d’apparition, nous travaillerons à construire un « robot de livraison », un « langage de programmation », un « jeu de plateforme », un « programme de dessin digital » et un « site web dynamique ».

La partie du livre traitant du langage commence avec quatre chapitres traitant de la structure de base du langage JavaScript. Ils introduisent les « structures de contrôle » (tel que le mot réservé while que vous avez vu dans cette introduction), les « fonctions » (écrire vos propres blocs de code), et les « structures de données ». Après cela, vous serez en mesure d’écrire de petits programmes. Ensuite, les chapitres 5 et 6 traitent des techniques pour utiliser les fonctions et les objets pour écrire du code abstrait et garder la complexité sous contrôle.

Après un premier chapitre du projet, la partie du livre dédiée au langage continue avec des chapitres sur la « gestion des erreurs et la résolution de bogues », les « expressions régulières » (un outil important pour travailler avec du texte), la « modularité » (une autre défense face à la complexité), et la « programmation asynchrone » (gérer les événements qui ont une durée). Le second chapitre du projet conclut cette première partie du livre.

La deuxième partie, les chapitres 13 à 19, décrit les outils auxquels le navigateur JavaScript a accès. Vous apprendrez à afficher des choses à l’écran (chapitres 14 et 17), répondre aux interactions de l’utilisateur (chapitre 15), et communiquer à travers le réseau (chapitre 18). On retrouve encore deux chapitres du projet dans cette partie.

Après cela, le chapitre 20 décrit Node.js, et le chapitre 21 construit un petit site web utilisant cet outil.

Dans ce livre, le texte écrit dans une police monospace va représenter des éléments de programmes – parfois il s’agit d’extraits de code autonome, et parfois ils réfèrent à une partie d’un programme connexe. Les programmes (dont vous en avez déjà vu quelques-uns) sont écrits de la façon suivante :

function factorial(n) {
  if (n == 0) {
    return 1;
  } else {
    return factorial(n - 1) * n;
  }
}

Parfois, pour montrer la sortie qu’un programme produit, la sortie attendue est écrite à la suite, avec deux barres obliques et une flèche en avant.

console.log(factorial(8));
// → 40320

Bonne lecture !