En guise d'introduction au JavaScript, voici un exemple où les possibilités offertes par le CSS peuvent être augmentées par le JavaScript.

JavaScript s'écrit avec une majuscule - S - au milieu du mot. Une pratique fréquente des programmeurs lorsque le mot est composé de deux mots.

La propriété CSS display permet d'afficher ou de cacher une zone (balise), identifiée par son attribut id.

Cette propriété a déjà été abordée lorsqu'on a parlé des différents supports ( @media ) sur lesquels une page HTML peut être utilisée : écran d'ordinateur, imprimante, ... Maintenant, nous allons voir que cette propriété peut être liée à des événements.

Un événement est, par exemple, un clic de souris, un double clic de souris, le déplacement de la souris, l'ouverture de la page dans le navigateur, sa fermeture, ...

Le JavaScript permet de programmer une réaction face à un événement, tel qu'un clic de souris ou un double-clic, sur une balise HTML.

Au lieu de cliquer sur un lien interne (dans un menu) pour consulter une partie précise de la page web - ce qui peut se faire en utilisant uniquement du code HTML (et en plaçant un second lien vers ce menu) - on va, ici, utiliser une autre technique : cliquer sur un titre pour apparaître la partie liée à ce titre et double-cliquer pour qu'elle disparaisse.

Cliquez, puis double-cliquez sur ce titre

Voici le code, utilisé ici, pour afficher et faire disparaître une zone :

<h1 onclick="document.getElementById('zone1').style.display='block'"
ondblclick="document.getElementById('zone1').style.display='none'">
Cliquez ou double-cliquez sur ce titre</h1>

    <aside id="zone1">

        <p>Paragraphe 1</p>

        <p>Paragraphe 2</p>

    </aside>

Dans ce code, on reconnaît facilement la balise de type titre, ici "h1". Cette balise ne contient que deux attributs : onclick et ondblclick

Petit rappel : Une balise peut contenir plusieurs attributs. Un attribut est toujours lié à une valeur (en HTML5). La syntaxe est donc nom_attribut="valeur_attribut". Les attributs sont placés dans la balise ouvrante. Le nom de la balise et celui de l'attribut sont séparés par un (ou plusieurs espaces). Idem entre les couples nom_attribut="valeur_attribut".

Le premier attribut - onclick - concerne l'événement qui se produit lorsqu'on clique.
Le second - ondblclick - concerne l'événement qui se produit lorsqu'on double-clique.

Tous les attributs liés à un événement ont un nom qui commence par "on" suivi du nom de l'événement. Facile de repérer les attributs liés à des événements !

Les événements sont gérés par du code Javacript. La valeur de l'attribut est du code JavaScript ... Logique ! Non ?

document.getElementById('zone1').style.display='block';

document.getElementById('zone1').style.display='none';

sont des instructions écrites en JavaScript

Instructions pour qui ? Pour le navigateur !
En effet, une fois la page affichée le navigateur écoute ...

Qui écoute-t-il ?
Principalement l'utilisateur, et pratiquement que ce que fait sa souris.

Le navigateur est un logiciel qui comprend le code HTML, le code CSS et le code JavaScript. L'étude de ces langages est donc nécessaire à quiconque veut publier sur internet de manière professionnelle.

Dans une page web, le code le plus important est le HTML. Les autres - CSS et JavaScript - sont accessoires. Le CSS permet de faire joli et le JavaScript permet de réagir aux événements (principalement aux clics de l'utilisateur)

En HTML, le code CSS est souvent mis dans un fichier externe. Idem en JavaScript. Il peut même exister plusieurs fichiers externes CSS et/ou JavaScript.

Les codes CSS et JavaScript peuvent aussi être écrits dans des attributs. Ces instructions sont alors prioritaires sur celles contenues dans un fichier externe.

Lorsqu'on veut placer du code JavaScript dans une balise, on utilise l'attribut on... pour "dire" comment le navigateur doit traiter cet événement.

document.getElementById('zone1').style.display='block';

Le code ci-dessus "dit" : la page ayant une balise identifiée 'zone1' doit avoir un style d'affichage de type block

Le but de cette page n'est pas d'apprendre le JavaScript, mais de comprendre que le JavaScript permet de réagir à des événements liés à la souris du lecteur.

Oui, mais quand ces instructions seront-elles exécutées ?
Quand se produit un événement.

Oui, mais quel événement ?
Il suffit de regarder le nom de l'attribut lié à code. Ici, onclick

Oui, mais click sur quoi ?
Il suffit de regarder le nom de la balise qui contient cet attribut onclick. Ici, la balise h1 ...

En résumé, si la balise reçoit l'événement click, elle va dire au navigateur d'exécuter le code contenu dans l'attribut onclick. Ici, afficher la zone 1.

document.getElementById('zone1').style.display='none';

Maintenant, le code ci-dessus ne devrait pas être difficile à comprendre. Il "dit" : la page ayant une balise identifiée 'zone1' doit avoir un style d'affichage = none

Mais après le chargement de la page cette zone 1 n'était pas affichée !
Bien vu ! Le chargement de la page est aussi un événement ...

<body onload="document.getElementById('zone1').style.display='none'">

La balise body contient un seul attribut : onload.

Ce code dit au navigateur lorsque tu charges le contenu de la balise body dans ta mémoire pour faire les traitements nécessaires (la mise en page) avant de l'afficher, tu appliqueras le type d'affichage "none" à "zone1".

Résultat. La zone 1 n'est pas affichée après l'affichage de la page.

Quasi toutes les balises admettent comme attribut onclick et ondblclick. Cependant l'attribut onload n'est admis que par quelques balises. Pratiquement, cet événement n'est employé qu'avec la balise body.

Si le code JavaScript est placé comme valeur d'un attribut non autorisé, il sera ignoré. Par exemple, dans une balise article, l'événement onload n'est pas autorisé.

Exemple : Fichier HTML affichant tout ce qu'il faut faire. (Regardez le code source de ce fichier)