Chapitre 1 : Introduction à JavaScript

Dans le semestre 1, au cours développement Web 1, nous avons vu HTML et CSS.

HTML est un langage structurel qui définit le contenu de la page Web tels que les titres, les
paragraphes, les images, etc.
CSS est un langage de style qui met en forme le contenu de la page Web tels que la couleur
de l’arrière-plan, la police des caractères, style de la bordure, etc.
JavaScript (JS) est un langage de programmation qui rend dynamique le site Web en ajoutant
des interactions avec l’utilisateur, des animations, de l'aide à la navigation, comme par
exemple :
• Afficher/masquer du texte,
• Faire défiler des images,
• Faire des calculs,
• Ajouter une suggestion de frappe dans un champ de texte

1. Qu'est-ce que le JavaScript ?

Le JavaScript est un langage de programmation de scripts orienté objet.
Un script JS est une suite d’instructions interprétée par l’interpréteur du navigateur Web.
JavaScript étant un langage de scripts, cela signifie qu'il s'agit d'un langage interprété.
Chaque navigateur possède un interpréteur JavaScript, qui diffère selon le navigateur. Si vous
utilisez Internet Explorer, son interpréteur JavaScript s'appelle Chakra (l'interpréteur des
versions antérieures à IE9 s'appelle JScript), celui de Mozilla Firefox se nomme SpiderMonkey
et celui de Google Chrome est V8.
Le JavaScript est un langage dit client-side, c'est-à-dire que les scripts sont exécutés par le
navigateur chez l'internaute (le client). Cela diffère des langages de scripts dits server-side qui
sont exécutés par le serveur Web. C'est le cas des langages comme le PHP.
Les scripts client-side et server-side n'ont pas le même objectif. Un script server-side va
s'occuper de « créer » la page Web qui sera envoyée au navigateur. Ce dernier va alors afficher
la page puis exécuter les scripts client-side tel que le JavaScript. Voici un schéma reprenant ce
fonctionnement :

1
 Figure 1. JavaScript est un langage dit client-side

2. Historique et versions
Le JS est créé en 1995 par Brendan Eich qui travaillait chez Netscape Communication
Corporation, la société qui éditait le célèbre navigateur Netscape Navigator, alors principal
concurrent d'Internet Explorer.
JavaScript est nommé en hommage au langage Java créé par la société Sun Microsystems. En
effet, à cette époque, le langage Java était de plus en plus populaire. Mais, ces deux langages
sont différents n'ont pas le même fonctionnement.
Le JavaScript sort en décembre 1995 et est embarqué dans le navigateur Netscape 2. Le
langage est alors un succès, si bien que Microsoft développe une version semblable, appelée
JScript, qu'il embarque dans Internet Explorer 3, en 1996.
Netscape décide d'envoyer sa version de JavaScript à l'ECMA International (European
Computer Manufacturers Association à l'époque, aujourd'hui European association for
standardizing information and communication systems) pour que le langage soit standardisé,
c'est-à-dire pour qu'une référence du langage soit créée et que le langage puisse ainsi être
utilisé par d'autres personnes et embarqué dans d'autres logiciels. L'ECMA International
standardise le langage sous le nom d'ECMAScript.
Depuis, les versions de l'ECMAScript ont évolué. La version la plus connue et mondialement
utilisée est la version ECMAScript 5, parue en décembre 2009.
Les versions du JavaScript sont basées sur celles de l'ECMAScript (abréger en ES ci-dessous).
Ainsi, il existe :
• ES 1 et ES 2, qui sont les prémices du langage JavaScript ;
• ES 3 (sorti en décembre 1999) ;
• ES 4, qui a été abandonné en raison de modifications trop importantes qui ne furent
pas appréciées ;
• ES 5 (sorti en décembre 2009), la version la plus répandue et utilisée à ce jour ;
• ES 6, publié en Juin 2015, appelé aussi ES2015 et dont l'implémentation avait déjà été
commencée avant cette date au sein de plusieurs navigateurs.

2
 • ES7 : ou ES2016, apporte peu de changements au langage. C’est la première version
publiée après le changement du processus de normalisation qui prévoit en effet de
publier chaque année une nouvelle norme avec les ajouts qui ont eu lieu dans
l'intervalle, afin d'éviter de publier des changements énormes comme ce fut le cas en
2015.
• ES8, ES9 et ES10 paru respectivement en 2017, 2018 et 2019.
Ce cours portera sur la version 6 de l'ECMAScript.

3. Premier exemple : Hello World

<!DOCTYPE html>
<html>
<head>
<title>Hello World!</title>
</head>
<body>
<script>
alert('Hello world!');
</script>
</body>
</html>

En écrivant ce code dans un fichier HTML, et en l’ouvrant avec le navigateur, on voit une boite
de dialogue comme dans la figure 2.

Figure 2. Boîte de dialogue avec le message Hello world!

Dans le code HTML donné précédemment, on remarque un élément <script> : c'est lui qui
contient le code JavaScript que voici :
alert('Hello world!');

Il s'agit d'une instruction qui permet de faire apparaitre une boite de dialogue.

3
 4. Où placer le code JavaScript
Il existe trois manières pour ajouter un code JS à une page HTML.
• 1ère manière : Le code JS peut être écrit à l’intérieur de la balise <script></script>. On
peut mettre autant de fois la balise <script> dans le code HTML,soit dans la partie
<head>,soit dans la partie <body>.
• 2ème manière : Le code JS peut être placé dans un fichier externe ayant l’extension js
et dans ce cas, il faut ajouter la ligne suivante à la fin de la partie <body> de la page
HTML pour faire le lien avec le code JS du fichier externe :
<script src="code.js"></script>

• 3ème manière : Le code JS peut être écrit dans un balise HTML comme suit :
<balise onEvenement="codeJS">

Remarques :
• Il vaut mieux privilégier un fichier externe plutôt que d'inclure le code JavaScript
directement dans la page, pour la simple et bonne raison que le fichier externe est mis
en cache par le navigateur et n'est donc pas rechargé à chaque chargement de page,
ce qui accélère l’affichage de la page.
• Dans le cas où on écrit le code JS dans le fichier HTML, il est recommandé de le mettre
l’élément script juste avant la fermeture de la partie body. En effet, une page Web est
lue par le navigateur de façon linéaire, c'est-à-dire qu'il lit d'abord le <head>, puis les
éléments de<body>les uns à la suite des autres. Si on appele un fichier JavaScript dès
le début du chargement de la page, le navigateur va donc charger ce fichier, et si ce
dernier est volumineux, le chargement de la page s'en trouvera ralenti. C'est normal
puisque le navigateur va charger le fichier avant de commencer à afficher le contenu
de la page.

5. Convention d’écriture
a. Commentaire
// un commentaire sur une ligne
/* un commentaire
Sur
Plusieurs
Lignes
*/

b. Nom de fonction et de variable

JS est sensible à la casse : x et X sont deux variables différentes.