Dans les pages Web affichées par votre navigateur (i.e. Firefox, Chrome, Edge…), JavaScript est souvent utilisé pour réaliser des boutons, des menus, des diaporamas, et un tas d'autres fonctionnalités. Nous allons voir dans cet article que pour la plupart de ces fonctionnalités, JavaScript n'est pas indispensable.
Une page Web est constituée de blocs (HTML) et de directives pour styliser ces blocs (CSS):
Un fois copiée sur votre ordinateur (c'est ce commence par faire le navigateur ), la page est interprétée avec ces informations. À cette étape, le contenu de la page Web est fixe, c'est à dire qu'aucun bloc de texte ne peut subitement apparaître.
Pourtant, il est commun de naviguer sur des sites dont les éléments de la page sont dynamiquement chargées, par exemple une messagerie instantanée. Dans ce cas, la page contient des directives dans un langage plus permissif que le CSS : le JavaScript.
Le navigateur lit le script JavaScript et peut sur ordre du script changer le contenu de la page et faire de nouvelles requêtes distantes liées à votre comportement.
Pour éviter d'ếtre pollué de popups, de pubs, et pour des raisons d'anonymat, une partie des internautes utilise des bloqueurs de script (tels que NoScript).
C'est pour éviter de pénaliser ces personnes qu'on va essayer de faire des sites qui n'utilisent pas (obligatoirement) JavaScript.
Pour marquer l'interaction, les scripts ont souvent pour effet de rendre un élément actif, en indiquant que l'élément en question appartient à la classe CSS “active”. L'élément aura sera alors affiché d'une manière particulière. Certains éléments HTML n'ont pas besoin de JavaScript, pour avoir des états similaires.
C'est donc avec ces éléments qu'on va jouer pour créer l'interactivité.
La première chose à comprendre pour ajouter des évènements en CSS3, est qu'il est impossible de cibler un élément HTML précédent ou parent. Comme rappelé par son nom Cascading Style Sheet, CSS est prévu pour faire les choses dans un ordre et un seul. On va donc faire attention à placer les éléments HTML au bon endroit et les sélecteurs CSS dans le bon ordre.
On va commencer par un cas simple : l'élément checkbox
.
Une case à cocher peut-être associée à plusieurs étiquettes.
Cela permet de changer l'état de la case à cocher sans cliquer sur la case.
Le code HTML est le suivant:
<input type="checkbox" id="bouton-0"> <label for="bouton-0">L'élément est activé</label> <label for="bouton-0">Cliquer ici pour activer l'élément</label>
Coté CSS:
input[id^="bouton-"]:checked ~ label</i> { display:none; cursor:pointer; border: 1px solid gray; width:36ch; text-align:center; padding: 1ch; background: whitesmoke; border-radius: 5px; } input[id^="bouton-"]:checked + label, input[id^="bouton-"]:not(:checked) + label + label { display:inline-block; }
Résultae
Ici, le CSS décrit le comportement qui est de cacher l'étiquette qui ne correspond pas à l'état. Dans le même principe, on peut cacher de paragraphes, des mots, ou des blocs.
L'alternative aux étiquettes (label) serait de placer une case à cocher invisible au dessus d'autres éléments. Le prérequis de cette méthode est de calculer en détails la position et la taille de chaque élément. C'est ce qu'on fait dans l'exemple suivant. Remarquons le troisième bloc, qui, après avoir coché la case, sort de la zone cliquable. L'utilisation d'une zone cliquable s'oppose à l'<label for=“bouton-0b”>étiquette</label> qui permet de cocher ou décocher la case depuis n'importe quelle zone de la page.
Un exemple de case à cocher sans label
Note: si l'élément checkbox
est dans un formulaire, le navigateur se souviendra de l'état (à moins que la conservation des données de formulaire soit désactivées) au rechargement de la page.
JavaScript permet de faire appel au fonctionnalités du navigateur, notamment:
cookies
(sauvegarde de l'état de la page)
L'utilisation la plus courante de JavaScript est l'ajout de classes CSS sur des éléments HTML ciblés,
communiquant au navigateur d'appliquer le style associé à la classe.
Hors, on a vu dans la partie précédente qu'on peut simulé des états actif/inactif avec des éléments checkbox
.
Le véritable intérêt du JavaScript est l'appel aux fonctions du navigateur, notamment l'utilisation des données relatives à l'utilisateur du site. Dans les faits, la plupart des effets de mise en page sont réalisable sans, tandis que le langage sera indispensable pour une application complexe telle qu'un jeu vidéo.
Ci-dessous, un tableau regroupant des fonctionnalités souvent réalisées en JavaScript avec mention de la faisabilité sans langage de script.
Composant | Action | Possible sans JavaScript |
---|---|---|
Boutons | Au clic sur un bouton, un élément apparaît dans la page. | Oui. |
Menus déroulants et accordéons | Il s'agit de déplier un famille d'éléments. Au clic, les élément enfants apparaissent. | Oui |
Diaporamas | On fait défiler des images, avec ou non la possibilité pour l'utilisateur de controler leur apparition | Oui |
//Smooth-Scrolling// | Lorsqu'on clique sur un lien interne à la page, le navigateur fait bouger la page pour donner l'impression qu'elle glisse vers sa destination | Non, il n'est pas possible d'avoir d'impact précis sur le défilement de la page sans JavaScript. |
Dans la partie suivante on ne va pas détailler comment faire chacune de ces choses mais seulement poser les principes de bases.
Javascript est indispensable pour toute application complexe : synchroniser une messagerie instantanée, calculer des résultats, charger dynamiquement des vidéos…
Dés lors que des choses peuvent être construite en série de manière automatique, il est intéressant d'utiliser JavaScript. Un script de 20 lignes, polluera moins les réseaux que 200 lignes d'éléments de formulaire.
Aussi, si l'on veut ajouter une fioriture en JavaScript, on peut toujours prévoir une balise <noscript>.