Premiers pas en JavaScript

Cours · JavaScript : rendre le Web interactif (école d'ingénieur), chapitre 1 · école d'ingénieur, informatique · le début du chapitre, la suite sur Adloun

Le site de la Librairie du Campus est structuré (livre HTML) et habillé (livre CSS). Il reste pourtant immobile : le menu ne s'ouvre pas sur un téléphone, le catalogue ne se filtre pas, le formulaire de commande ne dit qu'au moment de l'envoi que le code postal est faux, et aucun panier ne retient les livres choisis. Tout cela demande un programme qui s'exécute dans le navigateur, pendant que le lecteur regarde la page.

Ce programme s'écrit en JavaScript, le seul langage que tous les navigateurs exécutent. Ce premier chapitre installe les outils et les réflexes : où placer le code d'une page, comment le faire exécuter, comment lire ce qu'il affiche et les erreurs qu'il signale. Le langage lui-même commence au chapitre 2.

Objectifs du chapitre

Situer JavaScript : ce qu'il fait dans une page, ce qui le distingue de Java.
Relier un script à une page avec <script>, et choisir entre script classique, defer et module.
Afficher des valeurs avec console.log ; se servir de la console des outils de développement.
Exécuter un fichier avec Node.js, et un exemple dans l'Atelier web de la plateforme.
Distinguer une erreur de syntaxe d'une erreur d'exécution, et lire un message d'erreur.

1.1 Ce que fait JavaScript

Une page web met en jeu trois langages, chacun dans son rôle :

HTML décrit la structure : un titre, une liste, un formulaire ;
CSS décrit la présentation : couleurs, polices, disposition ;
JavaScript décrit le comportement : ce qui se passe quand on clique, quand on tape, quand des données arrivent.

Le navigateur lit le HTML et construit en mémoire un arbre d'objets, le DOM (Document Object Model) : un objet par élément, par attribut, par morceau de texte. Le CSS dit comment dessiner cet arbre. Un programme JavaScript peut lire l'arbre (combien y a-t-il de livres dans la liste ?), le modifier (afficher un message, cacher une carte, ajouter une ligne au panier) et réagir aux gestes du lecteur (clic, frappe, défilement). Le navigateur redessine aussitôt la page.

Le moteur JavaScript du navigateur (V8 dans Chrome et Edge, SpiderMonkey dans Firefox, JavaScriptCore dans Safari) exécute le script. Le même moteur V8, sorti du navigateur, est au cœur de Node.js, qui exécute du JavaScript sur un ordinateur comme java exécute un programme Java : sans page, sans fenêtre, avec accès aux fichiers et au réseau. Nous nous en servirons pour étudier le langage seul (chapitres 2 à 6) et pour écrire de petits serveurs (chapitre 10).

Repère historique : Dix jours de mai 1995

En 1995, Netscape veut un langage simple pour animer les pages de son navigateur. Brendan Eich en écrit le premier prototype en une dizaine de jours. Le langage s'appelle Mocha, puis LiveScript, puis JavaScript : Java est alors à la mode, et Netscape s'est allié à Sun. Les deux langages n'ont pourtant en commun qu'une partie de leur syntaxe. Pour éviter que chaque navigateur n'invente son dialecte, le langage est confié en 1997 à l'organisme Ecma International, qui le normalise sous le nom d'ECMAScript. Après une longue stagnation, ES5 (2009) le stabilise, puis ES2015 le renouvelle profondément : let, const, fonctions fléchées, classes, modules, promesses. Depuis, le comité TC39 publie une version par an. La même année 2009, Ryan Dahl présente Node.js, qui fait sortir JavaScript du navigateur.

JavaScript n'est pas Java

Un programmeur Java lira sans peine la plupart des lignes de ce livre : accolades, if, for, while, return, class, new, opérateurs arithmétiques et logiques. C'est précisément ce qui rend les différences dangereuses : on croit lire du Java, et le programme se comporte autrement.

	Java	JavaScript
exécution	compilé en bytecode, puis exécuté par la JVM	exécuté directement depuis le source (compilé à la volée par le moteur)
types	statiques, vérifiés à la compilation	dynamiques : une variable n'a pas de type, sa valeur en a un
nombres	`int`, `long`, `double`…	un seul type `number`, un flottant 64 bits
fonctions	des méthodes, dans une classe	des valeurs : on les range dans une variable, on les passe en argument
objets	toujours instances d'une classe	créés directement, sans classe ; les classes viennent en plus
exécution concurrente	plusieurs fils (threads)	un seul fil, piloté par des événements

Chaque fois qu'une habitude de Java risque de tromper, un encadré le signalera.

1.2 Un premier script dans une page

Voici une page de la Librairie, réduite à l'essentiel. Une ligne de son en-tête la relie à un fichier script.js :


<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>La Librairie du Campus</title>
  <link rel="stylesheet" href="style.css">
  <script type="module" src="script.js"></script>
</head>
<body>
  <h1>La Librairie du Campus</h1>
  <p id="annonce">Chargement…</p>
  <ul id="nouveautes">
    <li>Programmation Java</li>
    <li>HTML — Structurer le Web</li>
    <li>CSS — Mettre en forme le Web</li>
  </ul>
</body>
</html>

Le script compte les éléments de la liste des nouveautés et écrit le résultat dans le paragraphe <p id="annonce">, qui disait « Chargement… » :

La suite du cours est sur Adloun

Le chapitre en entier, formules et figures comprises, avec le tuteur, les fiches, les QCM et les exercices.

Lire la suite du cours

En accès libre, sans inscription.

Exercices corrigés de ce chapitre

Lire la suite du cours →