Distinguer un langage compilé d'un langage interprété, comprendre comment le navigateur exécute JavaScript, et ce que JavaScript ajoute à une page HTML et CSS.
Le site du restaurant La Sardine est beau, mais il ne réagit à rien : le bouton « Voir le menu du jour » ne fait rien, le formulaire ne signale pas les erreurs avant l'envoi, le total de la commande ne se calcule pas. HTML structure, CSS décore ; pour que la page réagisse, il faut un langage de programmation que le navigateur sait exécuter : JavaScript.
Deux programmes : l'un écrit en C (langage compilé), l'autre en JavaScript (langage de script).
Un ordinateur n’exécute que du langage machine. Il faut donc traduire le code écrit par le développeur.
| Langage compilé | Langage interprété (de script) | |
|---|---|---|
| Traduction | une fois, avant l’exécution, par un compilateur | pendant l’exécution, par un interpréteur |
| Ce qu’on livre | un fichier exécutable | le code source |
| Erreurs | beaucoup sont détectées à la compilation | découvertes à l’exécution |
| Exemples | C, C++, Go, Rust | JavaScript, Python, PHP |
Les moteurs modernes (V8 dans Chrome et Node.js) mélangent les deux : ils compilent à la volée (JIT, Just In Time) les parties du code les plus utilisées.
JavaScript est né en 1995 chez Netscape, pour rendre les pages dynamiques. Il est normalisé sous le nom ECMAScript (ES6 en 2015 a apporté let, const, les fonctions fléchées, les classes…).
Ce que JavaScript permet :
<body>
...le contenu...
<script src="js/script.js"></script> <!-- juste avant </body> -->
</body>
Placé à la fin du <body>, le script s’exécute quand les éléments de la page existent déjà. On peut aussi le mettre dans le <head> avec l’attribut defer.
Un livre traduit de l'anglais vers l'arabe est traduit une fois pour toutes, puis tout le monde lit la traduction : c'est la compilation. Un interprète, lui, traduit la conférence phrase après phrase, en direct : c'est l'interprétation. JavaScript est lu et exécuté en direct par le navigateur.
HTML, c'est le squelette de la maison. CSS, c'est la peinture et la décoration. JavaScript, c'est l'électricité : les lumières qui s'allument quand on appuie sur l'interrupteur.
<button id="menu">Voir le menu du jour</button> <script> document.querySelector('#menu').addEventListener('click', () => { alert('Aujourd’hui : tajine de poisson'); }); </script>
Pour chaque besoin du restaurant, dites quel langage s'en charge : (1) le titre « Restaurant La Sardine » ; (2) la couleur bleue du titre ; (3) le total de la commande qui se met à jour quand on ajoute un plat ; (4) le message « Champ obligatoire » qui apparaît pendant la saisie ; (5) l'image du port.
1. HTML (le contenu : <h1>) 2. CSS (la présentation : color) 3. JavaScript (un calcul qui réagit à une action) 4. JavaScript (réaction pendant la saisie ; HTML5 peut aussi aider avec required) 5. HTML (<img>), sa taille en CSS
Comme pour le CSS, on peut écrire le JavaScript à trois endroits. Lesquels ? Lequel préférer ?
<!-- 1. Dans un attribut (à éviter) --> <button onclick="alert('Bonjour')">OK</button> <!-- 2. Dans une balise <script> de la page --> <script> console.log('Bonjour'); </script> <!-- 3. Dans un fichier externe (la bonne pratique), juste avant </body> --> <script src="js/script.js"></script>
On dit que JavaScript est interprété, pourtant les navigateurs modernes le « compilent à la volée » (JIT). Expliquez en une phrase.
Le moteur du navigateur (V8 dans Chrome, SpiderMonkey dans Firefox) commence par interpréter le code, puis compile en langage machine les parties qui s'exécutent souvent, pendant l'exécution, pour aller plus vite. Le développeur, lui, livre toujours le code source, sans étape de compilation.