Cours⚓︎

Cours tiré très largement du manuel NSI 1re Spécialité - Ed. 2021 Hachette et de https://frederic-junier.gitlab.io/parc-nsi

1. Introduction⚓︎

Dans le chapitre précédent, on a présenté des exemples de pages Web dynamiques générées par des programmes en PHP, Python ou Node.js. Chaque mise à jour de la page nécessite donc un nouveau cycle requête/réponse entre le client et le serveur. C’est indispensable s’il s’agit de modifier l’état d’une ressource côté serveur (une base de données par exemple), mais les changements peuvent n’être que temporaires et n’affecter que des éléments de la page côté client.

Javascript est un langage interprété qui répond à ce besoin qui s’exécute dans le navigateur du client. Javascript s’est imposé depuis son apparition en 1995 dans le navigateur Netscape comme le principal langage de développement Web en frontend (côté client) et depuis une dizaine d’années, sa variante Node.js concurence les langages de développement backend (côté serveur) comme PHP ou Python.

Une page Web moderne, reçue par un client, comporte au moins trois composants logiciels :

HTML pour la structure du document.
CSS pour le paramétrage de l’apparence des éléments et leur positionnement.
Javascript pour la définition de programmes qui vont réagir à des événements déclenchés par l’utilisateur de la page et modifier la structure de données de la page ( éléments HTML et styles CSS) à travers le DOM. Le DOM est une représentation de l’ensemble de la structure de la page Web sous la forme d’un arbre : les noeuds sont les éléments HTML et ils ont une liste de propriétés : contenu, style, événements associés . . .

2. Elements de syntaxe⚓︎

Programme NSI

Il ne s'agit pas de connaitre cette syntaxe (Hors programme) mais de pouvoir modifier du code existant.

types

Types	Exemples
Nombres	entiers (`123`) ou réels (`123.67`)
Chaines	`'texte'` ou `"texte"`
Booléens	`true` ou `false`
Tableaux	`t = [1, 6, 7]` ; `t[1]` ; `t.length`

instructions

Instructions	Exemples
Déclaration	`let var`
Affectation	`var = expression`
Conditionnelle	`if (expression) { instructions }` ou `if (expr) { instr } else { instr }`
Boucle bornée	`for (i = 0; i < n; i+=1) { instructions }`
Boucle non bornée	`while (expression) { instructions }`
Fonction	`function f(parametres) { instructions }`
Valeur de retour	`return expression`
Commentaires	`// commentaire`

Python vs Javascript

Comparé à Python, une différence importante est que les blocs d’instructions ne sont pas délimités par l’indentation, mais par des accolades.

Opérateur booléen et de comparaison (différents de python)

Opérateur	Syntaxe
et	`&&`
ou	`\|\|`
égalité	`==` ou `===` (plus strict)
inégalité	`!=`

3. Utilisation⚓︎

On peut écrire du code JavaScript:

dans les balises html directement :

<p onclick="alert('Salut')">Bonjour</p>

directement dans une page Web à l’intérieur d’un élément <script>, en général à l’intérieur de l’élément <head>.
dans du code JavaScript stocké séparément, en indiquant son URL avec l’attribut src de l’élément <script>:
```
<script src="moncode.js" defer></script>
```
defer

L'attribut src donne le chemin vers le fichier contenant le code Javascript et l'attribut defer précise que le chargement du Javascript doit se faire après que la page HTML soit totalement chargée. En effet, Javascript peut modifier la page à travers l'interface DOM, donc il faut ordonnancer le chargement des différentes ressources.

3.1 Modifier une page Web⚓︎

Le langage HTML permet de représenter le contenu d’une page Web sous forme textuelle.Lorsque le navigateur chargeune page HTML, il construit une représentation de la page avec un type construit complexe appelé DOM («Document Object Model»). Pour modifier le contenu de la page Web, on modifie le DOM grâce à un ensemble de fonctions JavaScript et le navigateur met à jour l’affichage de la page.

Tout élément HTML peut avoir un identifiant unique, que l’on spécifie grâce à l’attribut id. La fonction JavaScript document.querySelector permet de trouver un élément à partir d'une balise, d'une classe ou d'un identifiant (comme du CSS le ferait):

Code HTML	Code JavaScript
`<p id="msg">...</p`	`e = document.querySelector('#msg')`

Une fois un élément identifié, on peut accéder, en lecture et en écriture, à certains de ses attributs:

Attribut	Description
e.hidden	booléen qui indique si l’élément est visible ou caché
e.value	valeur d’un champ d’entrée (élément `<input>`)
e.innerHTML	le code HTML du contenu de l’élément
e.outerHTML	le code HTML de l’élément et de son contenu
e.classList	la liste des classes de l’élément (attribut class)

exemple : hidden

L’attribut hidden permet de cacher ou de montrer un élément (et son contenu).

L’instruction suivante permet de cacher l’élément s’il est visible, sinon de le cacher:

e.hidden = !e.hidden

exemple : innerHTML

On peut modifier le contenu de la page en ajoutant ou en retirant du code HTML. La méthode la plus simple consiste à remplacer le contenu d’un élément e:

e.innerHTML = 'Nous somme le ' + Date()

De façon similaire e.outerHTML remplace l’élément et son contenu. Il existe de nombreuses autres méthodes pour parcourir et modifier le contenu de la page.

exemple : classList

Comme on l’a vu dans la présentation de CSS, l’attribut class d’un élément est utilisé en liaison avec la feuille de style pour contrôler son aspect. Dans le DOM, l’attribut e.classList permet de modifier la liste des classes de l’élément e et ainsi de changer son aspect en ajoutant ou en enlevant une classe. Par exemple, l’instruction e.classList.toggle('important')permet d’ajouter ou d’enlever la classe important de l’élément e, ce qui, grâce à la feuille de style vue plus haut, lui ajoute ou lui enlève un cadre rouge. Les principales méthodes de e.classList sont les suivantes:

Attribut	Description
e.classList.add(cls)	ajoute cls à la liste de classes
e.classList.remove(cls)	retire cls de la liste de classes
e.classList.toggle(cls)	ajoute cls si elle est présente, sinon la retire
e.classList.replace(c1, c2)	remplace c1 par c2, si c1 existe
e.classList.contains(cls)	retourne true si cls est présente, false sinon

exemple : d'autres manières de sélectionner des élement du DOM

Enfin, les fonctions getElementsByTagId, getElementsByTagName ou getElementsByClassName permet d’obtenir et d’énumérer tous les éléments qui ont le même Id, le même type ou la même classe. Par exemple, le code suivante rend visible tous les paragraphes qui ont la classe important:

for(let e of document.getElementsByTagName('p')){
    if (e.classList.contains('important'))
        e.hidden = false
    }

3.2 Les événements⚓︎

Le langage JavaScript permet de réagir aux événements lorsque l’utilisateur interagit avec la page Web.

Pour associer une fonction de rappel à un élément, il suffit de lui ajouter un attribut correspondant à l’événement, par exemple onclick, dont la valeur est l’appel d’une fonction JavaScript.

Dans cet exemple, un clic sur le paragraphe «Bonjour» affiche une boîte d’alerte (fonction alert) avec le message «Salut»:

<p onclick="alert('Salut')">Bonjour</p>

Les évenements

Il existe de nombreux événements. Voici les plus utilisés:

Évenement (`<élément>`)	Condition de son émission
keydown, keyup	appui/relâchement d’une touche du clavier
click, dbleclick	clic ou double clic de la souris
mouseenter, mouseleave	survol d’un élément par le curseur de la souris
mousedown, mouseup	appui/relâchement du bouton de la souris
mousemove, mouseover	déplacement de la souris
change (`<input>`)	changement de valeur d’un champ de saisie
submit (`<form>`)	envoi d’un formulaire
load (`<body>`)	fin de chargement de la page

La réaction à un événement peut être définie dans le code HTML de l’élément concerné, comme on l’a vu ci-dessus avec l’attribut onclick. Dans ce cas, le nom de l’événement doit être précéde de on et sa valeur est une expression JavaScript:

<p onmouseenter="this.classList.add('important')" onmouseleave="this.classList.remove('important')"></p>

On peut également définir la fonction de rappel dans le code JavaScript, avec la méthode e.addEventListener(ev, f). La fonction f est alors appelée lorsque l’événement ev se produit, avec en paramètre l’événement. La définition de la fonction de rappel doit se faire une fois que la page est complètement chargée, en utilisant l’événement load de l’élément <body> :

<head>
    <script>
        function important(ev) {// ev.target est l'élément qui a reçu l'événement
            ev.target.classList.add("important")
        }
        function pasImportant(ev) {
            ev.target.classList.remove("important")
        }
        function init() {// appelée au chargement de la page
            e = document.getElementById("para")
            e.addEventListener("mouseenter", important)
            e.addEventListener("mouseleave", pasImportant)
        }
    </script>
</head>
<body onload="init()">
    <p id="para"></p>
</body>