Cours : Pages interactives

Intégration de JavaScript dans une page web

L’intégration de JavaScript dans une page HTML s’effectue par le biais d’une balise HTML dédiée.

La balise SCRIPT

La présence de code JavaScript est indiquée par la balise SCRIPT du HTML prévue à cet effet. Cette balise permet indifféremment d’insérer directement du code JavaScript dans le fichier html ou bien de faire référence à un emplacement externe (URL) contenant du code JavaScript.

L’intégration de code JavaScript directement au sein d’une page HTML s’effectue de la manière suivante :

Astuce

Vous verrez parfois dans des codes plus anciens une balise paramétrée comme suit :

<script type="text/javascript">

L’attribut type est optionnel en html 5 : JavaScript en est le langage de script par défaut.

Emplacement du code JavaScript

De la même manière que le CSS, une page HTML peut contenir une ou plusieurs balises SCRIPT. Ces balises contiennent soit le code JavaScript lui-même, soit une référence à l’emplacement de celui-ci.

Dans le cas où le code figure dans un fichier externe, l’attribut src désigne l’URL correspondante.

À retenir

L’extension d’un fichier contenant du code JavaScript est .js.

Les scripts stockés dans des fichiers externes présentent l’intérêt de pouvoir être appelés par plusieurs pages distinctes sans répétition du code, de la même manière qu’une même feuille de style CSS externe peut s’appliquer à toutes les pages d’un site web qui y font référence.

Il est techniquement possible de placer du code JavaScript directement au sein d’un élément HTML comme ceci :

Mais comme pour le CSS il est préférable d’éviter un tel mélange des composants de la page : mieux vaut bien séparer le code JavaScript du HTML afin de faciliter la lecture et la maintenance de l’un et de l’autre.

Incidence de l’emplacement du code sur les performances

Les balises SCRIPT peuvent être placées dans l’en-tête (HEAD) ou dans le corps (BODY) de la page HTML en fonction des besoins. Que le code soit inséré directement ou bien appelé depuis une ressource externe, l’endroit où la balise correspondante est insérée, a une incidence sur la vitesse d’affichage. Dans une optique de rapidité d’affichage de la page, on placera de préférence les scripts JavaScript à la fin de l’élément BODY.

• Cela permet d’éviter que l’interprétation des scripts ne ralentisse l’affichage des éléments visibles de la page.

Manipulation du DOM par JavaScript

Le DOM ou modèle objet de document

Le DOM ou modèle objet de document est une interface qui permet à un langage de programmation de manipuler le contenu, la structure et le style d’une page web.

• On représente souvent le DOM schématiquement sous la forme d’un arbre.

Le DOM ci-dessus est une forme de représentation du code HTML suivant :

L’interface que constitue le DOM est accessible à JavaScript. Nous pouvons donc accéder de manière programmatique aux différents éléments qui le composent. Plusieurs méthodes d’accès sont prévues.

Méthodes d’accès aux éléments du DOM

On peut accéder à un élément par son identifiant. L’accès par identifiant s’effectue avec la méthode getElementById(). Elle retourne l’élément disposant de l’identifiant spécifié en paramètre lors de l’appel.

Exemple

<p>Ceci est un paragraphe 1.</p>

<p id="cible">Ceci est un paragraphe 2.</p>

<button onclick="afficheContenuCible()">Cliquez ici pour afficher la valeur du paragraphe cible</button>

<script>

function afficheContenuCible() {

let valeurCible = document.getElementById("cible").innerHTML;

alert("la cible contient "+ valeurCible);

}

</script>

• Le clic sur le bouton déclenche l’exécution de la fonction afficheContenuCible qui interroge le DOM pour obtenir l’élément et lire son contenu HTML avec innerHTML.

Ce que l’internaute voit : une fenêtre qui s’ouvre dans laquelle est affiché le texte suivant : la cible contient « Ceci est un paragraphe 2 ».

L’accès par identifiant fournit un résultat unique puisque l’identifiant est unique en HTML. Si l’on souhaite accéder à une classe d’éléments, on aura recours à la méthode getElementByClassName().

Cette méthode retourne un ensemble de résultats sous la forme d’un tableau d’éléments. On aura donc recours à des boucles pour traiter l’ensemble des éléments, et on utilisera si besoin un accès individuel via la position indicielle d’un élément donné du tableau.

Il est également possible d’accéder aux éléments par le biais de leurs sélecteurs CSS. Deux méthodes sont proposées : querySelector() et querySelectorAll().

Rappel

Le langage de styles CSS est utilisé pour mettre en forme des fichiers web, de type HTML ou encore XML, à travers des feuilles de styles.

La méthode querySelector() permet d’accéder à un élément par son sélecteur CSS.

Exemple

document.querySelector("#cible")

La méthode querySelectorAll() permet d’obtenir l’ensemble des éléments d’une classe donnée à partir de leur sélecteur CSS. Par exemple, pour obtenir tous les paragraphes de classe « exemple » on utilisera le sélecteur CSS suivant :

Exemple

document.querySelectorAll("p.exemple")

Le DOM nous permet non seulement d’accéder aux éléments de la page, mais aussi d’en modifier les propriétés.

Méthodes de manipulations du DOM avec Javascript

JavaScript nous offre un large éventail de possibilités de manipulation du modèle objet de notre document.

Commençons par créer un bouton, capable de modifier son propre contenu html lorsqu’on clique dessus.

Exemple

<button type="button" onclick="this.innerHTML='merci'">Cliquez moi</button>

Un événement déclencheur sur un élément donné peut également servir à modifier un élément tiers. Dans l’exemple ci-après, un clic sur un bouton entraine l’ajout d’une portion de texte au texte pré-existant d’un paragraphe.

Exemple

<p id="phrases">On commence par une phrase.</p>

<button type="button" onclick="ajoutePhrase()">Plus de texte svp</button>

<script>

function ajoutePhrase() {

document.getElementById('phrases').innerHTML = document.getElementById('phrases').innerHTML + " Et on rajoute une nouvelle phrase.";

}

</script>

L’internaute, après avoir cliqué sur le bouton intitulé « Plus de texte svp » voit le texte « On commence par une phrase » complété ainsi : « On commence par une phrase. Et on ajoute une nouvelle phrase ».

Les modifications effectuées sur le DOM peuvent aussi bien porter sur les propriétés d’un l’élément (attributs HTML) que sur son style (propriétés CSS).

Dans l’exemple suivant nous allons opérer plusieurs modifications sur un seul et même élément de type hyperlien :

• changement de l’URL de destination
• ajout d’un nouvel attribut et de sa valeur
• modification du style graphique

Exemple

<a id="wiki" href="http://wikipedia.fr/">Wikipédia</a>

<button onclick="modif('wiki')">modifions</button>

<script>

function modif(element) {

// modification de l'URL de destination

document.getElementById(element).href = "https://en.wikipedia.org/wiki/Main_Page";

// ajout d'un nouvel attribut

document.getElementById(element).target = "_blank";

// modification du style

document.getElementById(element).style.color = "green";

}

</script>

Avant son clic sur le bouton intitulé « modifions », la page ressemble à cela :

et le lien porté par le texte Wikipédia, affiche la page de Wikipédia dont l’URL est http://wikipedia.fr/, à la place de la page actuelle.

Après son clic sur le bouton intitulé « modifions », la page ressemble à cela :

et le lien porté par le texte Wikipédia, affiche la page de Wikipédia dont l’URL est https://en.wikipedia.org/wiki/Main_Page, cette fois dans un nouvel onglet.

Jusqu’à présent nous avons seulement modifié des éléments html pré-existants. De la même manière qu’il nous a été possible d’ajouter de nouveaux attributs à ces éléments, il existe des méthodes dédiées qui permettent d’ajouter des éléments nouveaux à ceux déjà créés dans le code html.

Dans l’exemple ci-après le code html créée seulement les deux premiers paragraphes. Le troisième paragraphe est ensuite ajouté au DOM par JavaScript.

Exemple

<body>

<p>Un premier paragraphe.</p>

<p>Un second paragraphe.</p>

<script>

let paragraphe = document.createElement("p");

let noeud = document.createTextNode("Un troisième paragraphe.");

paragraphe.appendChild(noeud);

document.body.appendChild(paragraphe);

</script>

</body>

Le navigateur internet construit le DOM à partir du code source, mais JavaScript nous permet d’apporter toutes sortes de modifications à cet existant, et ces modifications sont répercutées à l’affichage par le navigateur. Cela ne présente guère d’intérêt de manière statique car nous pouvons d’emblée fixer comme nous le souhaitons les éléments, leurs propriétés et leurs attributs au niveau du code HTML.

En revanche, cette flexibilité offerte par l’accès au DOM avec JavaScript prend tout son sens dans un contexte interactif où la page HTML va pouvoir être modifiée en fonction d’événements et d’interactions avec l’utilisateur.

Gestion des événements avec JavaScript

Les événements sont des actions détectées par JavaScript à partir desquelles il sera possible d’exécuter un script. Ces événements peuvent être interactifs, comme la réaction au clic de l’utilisateur sur sa souris, ou non-interactives, comme le chargement ou la fermeture d’une page.

Découvrons les principaux événements courants dans le contexte de pages HTML.

Événements non interactifs

Le cas d’usage le plus classique est le déclenchement d’une action lorsque la page a fini de charger l’ensemble des contenus.

Exemple

<body onload="messageBienvenue()">

<h1>Exemple d'action au chargement de la page</h1>

<p>Le script de cette page se lance une fois la page chargée.</p>

<script>

function messageBienvenue() {

alert("Bienvenue sur cette page");

}

</script>

</body>

Notre code de démonstration affiche un simple message de bienvenue dans une fenêtre une fois la page chargée dans le navigateur du client.

On pourrait employer la même méthode pour vérifier si les cookies sont ou non activés. Nous pourrions aussi détecter si l’utilisateur utilise un terminal mobile pour lui proposer le cas échéant le téléchargement d’une application adaptée au système d’exploitation de son téléphone mobile.

Dans notre exemple l’événement onload est rattaché à l’élément body. On pourrait de la même manière réagir plus spécifiquement au chargement d’une image donnée : il suffirait pour cela d’ajouter un attribut onload à la balise IMG correspondante, et d’y associer l’action souhaitée.

Attention

Les gestionnaires d’événements ne sont pas écrits selon la convention camelCase usuelle en JavaScript. L’événement lié au chargement s’écrit onload et non pas onLoad.

Événements interactifs

JavaScript enrichit grandement les possibilités d’interactions permises par l’utilisation de la souris, dans le seul cadre du html.

Le cas d’usage le plus courant est le clic sur un bouton, détecté avec onclick. Nous l’employons à titre d’exemple dans le cadre d’un formulaire. Cet événement déclenchera dans notre cas l’évaluation de l’âge de la personne, pour déterminer en quelques lignes de code si elle est mineure ou majeure.

Exemple

<form>

<input type="number" min="0" id="champ_age" placeholder="entrez votre âge">

<input type="submit" onclick=evalueAge()>

</form>

<script>

function evalueAge() {

let age = document.getElementById("champ_age").value;

if (age > 18) {

alert("vous êtes majeur(e)");

}

else {

alert("vous êtes mineur(e)");

}

}

</script>

Résultat :
Après un clic sur le bouton de validation du formulaire, si l’internaute a saisi un nombre strictement supérieur à 18, une fenêtre contenant le message « vous êtes majeur(e) » s’affiche, sinon une fenêtre contenant le message « vous êtes mineur(e) » s’affiche.

Cet exemple illustre la possibilité offerte par JavaScript d’effectuer localement un certain nombre de vérifications, de calculs ou de transformations de données, avant leur envoi au serveur pour traitement. Cela ne dispense pas ensuite d’effectuer côté serveur des contrôles sur les données soumises, mais JavaScript permet de réduire les allers-retours entre client et serveur et d’améliorer l’ergonomie des interactions.

• Si besoin, il est possible de gérer plus précisément les clics de la souris, en traitant de manière séparée l’enfoncement du bouton de la souris (avec mousedown) et son relâchement (avec mouseup).
• Il est également possible de gérer le survol d’un élément par la souris avec onmouseover et avec onmouseout pour la fin de survol.

Notre code ci-après modifie dynamiquement le style de l’élément h1 initialement affiché en noir. Il applique une couleur rouge au texte en cas de survol, et une couleur verte lorsque le survol se termine.

Exemple

<h1 onmouseover="ajouteEffet(this)" onmouseout="retireEffet(this)">Je suis le titre principal de cette page</h1>

<p>Je suis un paragraphe.</p>

<script>

function ajouteEffet(element) {

element.style.color="red";

}

function retireEffet(element) {

element.style.color="green";

}

</script>

L’interaction avec l’utilisateur ne se limite pas à la souris. JavaScript nous permet aussi de gérer des interactions en provenance du clavier de l’utilisateur, à l’aide des méthodes dédiées keypress, keydown et keyup.

Gestion personnalisée d’événements avec les écouteurs

Nous pouvons si nécessaire ajouter nos propres écouteurs d’événements personnalisés grâce à la méthode addEventListener() et ainsi programmer le déclenchement d’actions spécifiques en fonction de la survenue de différents événements.

• La méthode addEventListener() requiert deux paramètres obligatoires : l’événement et l’action à mener, dans cet ordre.

Dans l’exemple ci-après, nous allons rendre un paragraphe cliquable, et compléter son contenu textuel à chaque clic.

Exemple

<p id="cible">Je suis un paragraphe à l'écoute des clics.</p>

<script>

document.getElementById("cible").addEventListener("click", ajouteTexte);

function ajouteTexte() {

document.getElementById("cible").innerHTML += " Quand on me clique dessus je rajoute du texte.";

}

</script>

Attention

Vous noterez que l’événement passé en premier paramètre à la méthode addEventListener() est « clic » et non pas « onclick ». Dans ce contexte, on omet le préfixe « on » pour toutes les méthodes.
Vous noterez aussi que le second paramètre est le nom de la fonction, sans les parenthèses d’appel de celle-ci.

L’ajout d’écouteurs d’événements à un élément ne remplace pas d’éventuels gestionnaires d’événements pré-existants. Il est possible d’ajouter plusieurs écouteurs à un même élément, y compris plusieurs écouteurs sur la même méthode.

Exemple

document.getElementById("cible").addEventListener("click", ajouteTexte);

document.getElementById("cible").addEventListener("click", afficheImage);

document.getElementById("cible").addEventListener("mouseover", changeCouleur);

Une méthode complémentaire removeEventListener() permet si nécessaire de supprimer des gestionnaires d’événements.

Exemple

document.getElementById("cible").removeEventListener("click", afficheImage);

L’emploi d’écouteurs permet aussi de bien dissocier le code JavaScript du code HTML.