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):

• la partie HTML contient du texte et des références à des médias (images, sons et vidéos)
• la partie CSS définit la police d'écriture, les mesures ,les couleurs et parfois des images à utiliser en arriérer plan

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.

• presque tous les éléments ont un état lié au survol de la souris, ou à la focalisation au clavier
• les liens ont en plus de cela des états : visité; en cours de clic
• les cases à cocher ont deux états : coché, décoché
• les boutons “radio” ont des états exclusifs si ils portent le même nom

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 L'élément est activé Cliquer ici pour activer l'élément

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>&nbsp; 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:

1. ajouter, modifier, supprimer des éléments HTML
2. lire et écrire des cookies (sauvegarde de l'état de la page)
3. lire les informations spécifique au navigateur (taille de la fenêtre, emplacement du curseur…)
4. appeler des sites externes, pour envoyer et rapatrier un contenu
5. manipuler de manière procédurale les éléments de la pages (par exemple, pour faire défiler 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.

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 &lt;noscript&gt;.