JavaScript

JavaScript est un langage interprété, typé dynamiquement, créé en 1995 par Brendan Eich en dix jours pour animer les pages de Netscape. Trente ans plus tard, il fait tourner des applications entières dans le navigateur, des serveurs, des applications mobiles et des outils en ligne de commande. Son nom officiel de spécification est ECMAScript : une nouvelle version sort chaque année (ES2024, ES2025…).

Si vous hésitez encore sur le langage par lequel commencer, l'article par où commencer pour apprendre à coder compare les options.

Où s'exécute JavaScript

Distinction essentielle : le langage (variables, fonctions, objets, promesses) est le même partout. Les APIs varient. document n'existe pas dans Node, fs n'existe pas dans le navigateur.

La console du navigateur

Ouvrez n'importe quelle page, appuyez sur F12, onglet Console. Vous avez un REPL JavaScript complet :

2 + 3
// 5
"iducation".toUpperCase()
// 'IDUCATION'
document.title
// le titre de la page actuelle

console.log est l'outil de débogage de base, mais la console en offre d'autres :

console.table([{ nom: 'Ada', age: 36 }, { nom: 'Linus', age: 55 }])
console.error('Quelque chose a échoué')
console.time('boucle')
for (let i = 0; i < 1e6; i++) {}
console.timeEnd('boucle')

Installer Node.js

Pour exécuter du JavaScript hors du navigateur, installez Node.js en version LTS. Je recommande de passer par un gestionnaire de versions comme fnm :

# macOS / Linux
curl -fsSL https://fnm.vercel.app/install | bash
 
# Windows
winget install Schniz.fnm

fnm install --lts
node --version
npm --version

Premier script avec Node

const nom = process.argv[2] ?? 'inconnu'
console.log(`Bonjour ${nom}, bienvenue en JavaScript.`)

node bonjour.js Ada

Bonjour Ada, bienvenue en JavaScript.

Trois notions :

• const déclare une variable qu'on ne réassigne pas
• ?? fournit une valeur par défaut si la gauche est null ou undefined
• les backticks créent un template literal, ${} y insère une expression

Premier script dans une page

<!doctype html>
<html lang="fr">
  <head>
    <meta charset="utf-8" />
    <title>Premier script</title>
  </head>
  <body>
    <button id="btn">Clique</button>
    <p id="sortie"></p>
    <script type="module" src="main.js"></script>
  </body>
</html>

let clics = 0
const btn = document.querySelector('#btn')
const sortie = document.querySelector('#sortie')
 
btn.addEventListener('click', () => {
  clics++
  sortie.textContent = `${clics} clic(s)`
})

type="module" active les modules ES et diffère l'exécution jusqu'à ce que le HTML soit analysé. Les modules sont bloqués sur file://, lancez un serveur local :

npx serve .

Mode strict et points-virgules

Les modules ES sont automatiquement en mode strict : certaines erreurs silencieuses deviennent des exceptions (variable non déclarée, écriture sur une propriété en lecture seule). Dans un script classique, ajoutez 'use strict' en tête de fichier.

Les points-virgules sont optionnels grâce à l'ASI (insertion automatique). Les deux styles existent ; ce cours n'en met pas. Le seul piège : une ligne qui commence par (, [ ou ` se colle à la précédente.

const a = 1
;[1, 2].forEach(n => console.log(n))   // le ; protège

Outillage minimal

• VS Code avec l'extension ESLint
• Prettier pour le formatage automatique
• Node LTS via fnm

npm init -y
npm install --save-dev eslint prettier

Exercice

Écrire age.js qui lit une année de naissance en argument et affiche l'âge.

const annee = Number(process.argv[2])
if (Number.isNaN(annee)) {
  console.error('Usage : node age.js 1990')
  process.exit(1)
}
console.log(`Tu as environ ${new Date().getFullYear() - annee} ans.`)

JavaScript est partout, mais c'est un seul langage avec des environnements différents. Gardez cette distinction en tête : le chapitre suivant porte sur le langage pur, valable aussi bien dans Chrome que dans Node.