2 - Introduction aux événements

⏪

⏬

⏩

1 - IHM

2 - 2 manières

3 - clic

4 - Modifier

5 - Autres évenements

6 - innerHTML

7 - interro !

8 - FAQ

Vous savez maintenant créer des pages HTML, gérer un peu de CSS et insérer du code Javascript.

Nous allons voir aujourd'hui comment permettre à votre page de surveiller localement les actions de l'utilisateur et de modifier son état en fonction de ces actions.

On parle de gestion des événements.

Pour ne pas détecter sans rien faire, nous verrons également comment agir sur les balises du coup.

Logiciels : Il faudra utiliser un éditeur de code. On propose ici d'utiliser Atom produit par Githhub, aujourd'hui possédé par Google, ou Notepad ++ (Notepadqq sur Linux). Sublim Text est également une alternative de qualité.

Evaluation ✎ : questions 06-07-16(grande question).

Documents de cours : open document ou pdf

Résumé : Version HTML ou imprimable ou PDF (couleur ou gris)

MODE COURS (cacher les questions)

1 - Interface Homme-Machine

⇩ ⇧ ⤊

Au début du Web, les sites étaient dits statiques. La seule interaction entre le serveur distant et l'utilisateur était liée aux URL. On explorait des pages dont le contenu était fixe : une même URL provoque toujours le même fichier HTML. D'où le terme statique pour désigner ces pages qui ne bougeaient pas.

Aujourd'hui, il existe plusieurs évolutions :

Certaines pages sont interactives : le serveur du site vous envoie des pages capables de modifier et d'enregistrer des données localement (c'est à dire sur la machine du client). Ces fonctionnalités sont liées à l'interpréteur Javascript. C'est ce que nous allons commencer à voir aujourd'hui. C'est le principe des petits jeux qu'on peut trouver sur le Web.
Certaines pages sont générées dynamiquement : le serveur envoie au client une page dont le contenu dépend des données envoyées par le client et des données présentes dans la base de données du serveur au moment de la demande. Une même URL peut provoquer un fichier HTML transmis différent en fonction des produits en stock par exemple. Les sites possédant un système de connexion sont de ce type. Nous élaborerons de tels sites un peu plus tard dans l'année.
Enfin, il existe des pages dynamiques en temps réel. Il existe une communication serveur-client sans même avoir besoin d'une nouvelle requête HTTP rechargeant la page. La communication client-serveur peut alors s'effectuer sans recharger la page. AJAX (Asynchronous JavaScript and XML) est la technologie actuellement utilisée pour réaliser cela. Cette technologie ne sera pas abordée dans le cadre de ce cours.

Dans cette activité, nous allons voir comment gérer le cas 1 : l'interactivité locale.

01° Suivre les consignes ci-dessous pour trouver les outils d'observation.

Ouvrir votre navigateur.
Ouvrir l'outil de développement Web permettant de visualiser les connexions au réseau. Pour cela :

Pour Firefox :

Menu (l'icône avec trois barres en haut à droite) puis
Outils
Dévéloppement Web
Réseau/Network.

Pour Chromium (le moteur libre sur lequel est construit Chrome) :

Menu (l'icône avec trois points en haut à droite) puis
Plus d'Outils
Outils de développements

02° Actualiser la page de façon à visualiser les fichiers qui sont téléchargés et dans quel ordre.

Cliquer ensuite sur l'image suivante.

Question : lors de clics successifs sur l'image, les changements sont-ils provoqués par une communication avec le serveur ou les changements sont-ils purement locaux ?

Correction ?

...CORRECTION...

On constate un chargement de l'image 2 la première fois où on clique sur l'image.

Ensuite, on constate qu'il n'y a plus aucun nouveau chargement sur le réseau lorsqu'on clique sur l'image. Le changement visuel est donc purement local.

03° Quel est l'événement provoqué par l'utilisateur qui modifie l'image du chat ?

Correction ?

...CORRECTION...

Un clic sur l'image.

2 - Les deux manières de gérer les événements

⇩ ⇧ ⤊

Dans toute cette partie, nous allons placer le javascript directement dans le fichier HTML de façon à gagner un peu de temps de réalisation.

Il s'agit du choix rapide mais pas très propre pour réaliser des prototypes et de petites pages. N'utilisez pas cela dans vos projets notés.

Nous avons déjà vu comment gérer un événement en HTML : l'événement "load" qui se déclenche lorsque la page est entièrement chargée. Nous l'avons utilisé de cette manière :

`1`	`window.addEventListener("load",demarrage);`

Nous avons utilisé le gestionnaire d'évenements (event handler en anglais) sur l'objet window : c'est donc window qui gère l'événement.

Cela marche bien mais on peut même faire plus simple. Par contre, la méthode simple permet moins de customisations.

Méthode 1 : gérer l'événement via JAVASCRIPT et la méthode addEventListener

On peut déclencher une surveillance d'événements depuis Javascript en insérant un code de ce type :

`JS`	`window.addEventListener("load",demarrage);`

Avantage : plus souple que la méthode 2 car on peut activer ou désactiver l'événement (voir plus loin)
Désavantage : plus lourd à taper que la méthode 2.

<!DOCTYPE html>
 
<html lang="fr">
 
<head>
    <meta charset="UTF-8" />
    <title>Gestion des événements</title>
</head>
 
<body>
    <main>
        <h1>Gestion au démarrage</h1>
    </main>
 
    <script>
 
function demarrage() {
    alert("Hello World !");
    alert("Surveillance déclenchée depuis JS");
}
 
window.addEventListener("load",demarrage);
 
    </script>
 
</body>
 
</html>

04-A° Créer la page HTML de la méthode 1 ci-dessus pour vérifier qu'une alerte apparaît bien à l'écran.

Méthode 2 : gérer l'événement via HTML et l'attribut onload

On peut insérer dans les balises HTML un attribut onload qui permet d'activer une fonction javascript lors du chargement de l'élément :

HTML

<body onload="demarrage()" >

Avantage : plus simple que la méthode 1
Désavantage : on ne peut pas désactiver la gestion une fois activée.

Exemple avec attribut onload dans l'une des balises HTML

<!DOCTYPE html>
 
<html lang="fr">
 
<head>
    <meta charset="UTF-8" />
    <title>Gestion des événements</title>
</head>
 
<body onload="demarrage()" >
    <main>
        <h1>Gestion au démarrage</h1>
    </main>
 
    <script>
 
function demarrage() {
    alert("Hello World 2 !");
    alert("Surveillance déclenchée depuis l'attribut HTML");
}
 
    </script>
 
</body>
 
</html>

On notera que l'attribut sur la ligne 10 est onload avec le préfixe on, et pas juste load.

04-B° Créer la page HTML de la méthode 2 ci-dessus pour vérifier qu'une alerte apparaît bien à l'écran.

Dans la suite de cette activité, nous nous limiterons à l'utilisation d'attributs HTML (la méthode 2) pour enclencher la surveillance d'événements. Une autre activité plus appronfondie sur les événements est disponible dans la partie Web Interactif.

On peut également utiliser cet attribut "onload" sur d'autres balises que body. Par exemple, des balises-images img. On peut ainsi déclencher un script agissant sur l'image uniquement après qu'elle soit vraiment chargée.

3 - Evénement clic

⇩ ⇧ ⤊

Evénement clic (click en anglais)

Cet événement correspond ... au clic sur un élément. Etonnant, non ?

Pour le surveiller, il suffit d'appliquer un attribut onclick dans la balise d'ouverture de l'élément HTML voulu.

Exemple

`1`	`<img onclick="fonction_qu_on_veut_activer()" src="https://doc.infoforall.fr/commun/images/accueil_HTML5_150.png">`

Cette ligne permet

D'insérer une image dont l'URL est "https://doc.infoforall.fr/commun/images/accueil_HTML5_150.png"
Lorsqu'on clique (puisque onclick), cela déclenchera l'appel à la fonction fonction_qu_on_veut_activer() qui doit être déclarée dans un fichier Javascript chargé depuis la page.

05° Rajouter des attributs onclick aux images de la page fournie ci-dessous de façon à activer la fonction image_cliquee() qui lançe deux alertes.

<!DOCTYPE html>
 
<html lang="fr">
 
<head>
    <meta charset="UTF-8" />
    <title>Gestion des clics</title>
</head>
 
<body>
    <main>
        <h1>Gestion des clics</h1>
        <img src="https://doc.infoforall.fr/commun/images/accueil_HTML5_150.png">
        <img src="https://doc.infoforall.fr/commun/images/accueil_js_150.png">
    </main>
 
    <script>
 
function image_cliquee() {
    alert("Vous avez cliqué sur une image !");
    alert("Mais on ne sait pas laquelle !");
}
 
    </script>
 
</body>
 
</html>

Correction ?

...CORRECTION...

<!DOCTYPE html>
 
<html lang="fr">
 
<head>
    <meta charset="UTF-8" />
    <title>Gestion des clics</title>
</head>
 
<body>
    <main>
        <h1>Gestion des clics</h1>
        <img onclick="image_cliquee()" src="https://doc.infoforall.fr/commun/images/accueil_HTML5_150.png">
        <img onclick="image_cliquee()" src="https://doc.infoforall.fr/commun/images/accueil_js_150.png">
    </main>
 
    <script>
 
function image_cliquee() {
    alert("Vous avez cliqué sur une image !");
    alert("Mais on ne sait pas laquelle !");
}
 
    </script>
 
</body>
 
</html>

On peut bien entendu associer un clic à une autre balise qu'une image. Exemple :

`1`	`<p onclick="alert('CLIC sur le paragraphe détecté !')">Clique sur moi !</p>`

Et cela donne ceci :

Clique sur moi !

✎ 06 - à faire valider° Rajouter quelques balises textes (paragraphes p, titres h1...) dans cette page HTML.

Créer alors des événements de type clic sur 3 de ces balises. Un clic devra provoquer l'apparition d'une alerte spécifique pour vérifier que c'est bien la bonne balise qui a été cliquée.

4 - Modifier les balises

⇩ ⇧ ⤊

Tentons de faire mieux : modifions la taille de l'image lorsqu'on clique dessus.

Le mot-clé this

Lorsque le mot-clé this est présent dans une fonction événementielle javascript, il contient la référence JAVASCRIPT de la balise HTML gestionnaire de cet événement.

Cela veut dire que si vous cliquez sur une image, this va automatiquement contenir la référence de cette image précise. D'où le nom this.

A l'aide de cette référence, on peut modifier l'un des attributs de la balise HTML avec une instruction de ce type :

this.src
En Français, cela veut dire "Va voir la balise HTML ayant déclenché l'événement (this) et trouve la valeur de son attribut src".

Par exemple, on peut provoquer l'affichage de l'adresse d'une image avec un code de ce type :

1
2

<img width="100px" onclick="alert(this.src);" src="https://doc.infoforall.fr/commun/images/accueil_HTML5_150.png">
<img width="100px" onclick="alert(this.src);" src="https://doc.infoforall.fr/commun/images/accueil_js_150.png">

Cliquez sur les images ci-dessous pour tester.

Modifier les balises (1/3)

Pour modifier une balise, vous avez besoin d'obtenir sa référence.

Pour l'instant, vous ne savez l'obtenir qu'avec l'utilisation de this lors d'un événement.

Imaginons que cette référence soit stockée dans this ou dans une référence reference_balise.

Pour modifier les valeurs des attributs de cette balise, il suffit de faire une affectation de la forme reference.attribut = nouvelle_valeur

Deux exemples appliqués aux balises-images ?

Modifier la largeur

L'élément voulu doit être de type block (comme p) ou inline-block (comme img).

Exemple (il faut utiilser soit la ligne 1, soit la ligne 2 dans une fonction Javascript) :

1
2

this.width = 200px;
reference_balise.width = 200px;

On notera que par défaut, changer la largeur d'une image provoque sa mise automatique à l'échelle. Si vous voulez la déformer, il suffit de modifier également la hauteur. Voir ci-dessous.

Modifier la hauteur

Exemple (encore une dois c'est soit la ligne 1 soit la ligne 2) :

1
2

this.height = 200px;
reference_balise.height = 200px;

✎ 07 - à faire valider° Modifier le code suivant pour réaliser un système où chaque clic augmente la taille de l'image cliquée de 10 px. Pour l'instant, la taille double à chaque fois.

<!DOCTYPE html>
<html lang="fr">
 
<head>
    <meta charset="UTF-8" />
    <title>Gestion des événements</title>
</head>
 
<body>
    <main>
        <h1>Gestion des clics</h1>
        <img width="100px" onclick="this.width=this.width*2;" src="https://doc.infoforall.fr/commun/images/accueil_HTML5_150.png">
        <img width="100px" onclick="this.width=this.width*2;" src="https://doc.infoforall.fr/commun/images/accueil_js_150.png">
    </main>
</body>
 
</html>

On peut utiliser une fonction, il faut simplement transmettre la référence de la balise en tant qu'argument.

A titre d'exemple, voici une page où chaque clic sur les images diminue la largeur mais augmente la hauteur.

Ligne 12 : l'argument lors de l'appel est this
Ligne 18 : le paramètre qui va recevoir l'argument envoyé est reference

<!DOCTYPE html>
<html lang="fr">
 
<head>
    <meta charset="UTF-8" />
    <title>Gestion des événements</title>
</head>
 
<body>
    <main>
        <h1>Gestion des clics</h1>
        <img width="100px" onclick="modifier(this);" src="https://doc.infoforall.fr/commun/images/accueil_HTML5_150.png">
        <img width="100px" onclick="modifier(this);" src="https://doc.infoforall.fr/commun/images/accueil_js_150.png">
    </main>
 
    <script>
 
function modifier(reference) {
    reference.width = reference.width - 10;
    reference.height = reference.height + 10;
}
 
     </script>
</body>
 
</html>

08° Visualiser bien que, dans la fonction gérant l'événement, le paramètre qui va recevoir à chaque fois ici la référence de la balise cliqué est nommée reference. Si ce n'est pas clair, il faut impérativement m'appeler pour que je vous dépanne.

Modifier les balises (2/3)

Modifier le style type d'affichage de la balise

Si vous voulez qu'une balise devienne de type block, inline, inline-block ou même ne pas la faire apparaître du tout sur l'interface (none).

Exemple (code à insérer dans une fonction javascript) :

this.style.display = 'block';
this.style.display = 'inline';
reference_balise.style.display = 'inline-block';
reference_balise.style.display = 'none';

Modifier la valeur d'un attribut quelconque, src par exemple

On peut même modifier l'attribut src qui définit la source de l'image.

Exemple (code à insérer dans via un attribut HTML) : modifie l'image lors d'un clic.
L'image 1 devient l'image 2 ou l'image 2 devient l'image 1...

1
2

<img onclick="this.src = 'image2.png';" src="image1.png">
<img onclick="this.src = 'image1.png';" src="image2.png">

09° Réaliser une page comportant quatre images. Vous pouvez reprendre le code précédent. Chaque clic sur une image doit transformer l'image en type block et provoquer un changement d'image.

Voici un exemple :

Correction ?

...CORRECTION...

Pour voir le code de l'exemple, il suffit de sélectionner la zone des images et de faire un clic-droit puis de sélectionner voir code source.

<!DOCTYPE html>
<html lang="fr">
 
<head>
    <meta charset="UTF-8" />
    <title>Gestion des événements</title>
</head>
 
<body>
    <main>
        <h1>Gestion des clics</h1>
        <img width="100px" onclick="modifier(this);" src="https://doc.infoforall.fr/commun/images/accueil_HTML5_150.png">
        <img width="100px" onclick="modifier(this);" src="https://doc.infoforall.fr/commun/images/accueil_js_150.png">
    </main>
 
    <script>
 
function modifier(reference) {
    reference.src = "https://doc.infoforall.fr/commun/images/accueil_python_150.png";
    reference.style.display = "block";
}
  
    </script>
</body>
 
</html>

Voyons quelques exemples de ce qu'on peut modifier sur une balise de type texte pourvu qu'on connaisse sa référence.

Modifier les balises (3/3)

Modifier la couleur du texte

Exemple (code à insérer dans une fonction javascript) :

1
2

reference.style.color = "red";
reference.style.color = 'black';

Modifier la couleur de fond

Exemple (code à insérer dans une fonction javascript) :

1
2

reference.style.backgroundColor = "red";
reference.style.backgroundColor = 'black';

Guillemets simples et doubles

Sur les codes JS fournis directement depuis un attribut, on remarquera qu'on ne peut pas utiliser de guillemets doubles puisque le code lui-même est délimité dans le HTML par des guillemets doubles. C'est pour cela que j'utilise les guillemets simples pour définir les valeurs.

Voici un code valide :

`1`	`<p onclick="this.style.color='white';">valide.</p>`

Voici un code invalide :

`1`	`<p onclick="this.style.color="white";">invalide.</p>`

10° Créer des événements sur les deux paragraphes ci-dessus de façon à ce qu'ils disent vrai !

Cliquer sur le paragraphe de la balise L10 doit modifier le fond doit devenir bleu.
Cliquer sur le paragraphe de la balise L11 doit modifier la couleur d'écriture en rouge.

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8" />
    <title>Gestion des événements</title>
</head>
<body>
    <main>
        <h1>Gestion des couleurs</h1>
        <p>Ce paragraphe doit devenir à fond bleu lorsqu'on clique dessus.</p>
        <p>Sur celui ci, c'est la couleur du texte qui doit devenir rouge.</p>
    </main>
</body>
</html>

Correction ?

...CORRECTION...

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8" />
    <title>Gestion des événements</title>
</head>
<body>
    <main>
        <h1>Gestion des couleurs</h1>
        <p onclick="this.style.backgroundColor='blue';">Ce paragraphe doit devenir à fond bleu lorsqu'on clique dessus.</p>
        <p onclick="this.style.color='red';">Sur celui ci, c'est la couleur du texte qui doit devenir rouge.</p>
    </main>
</body>
</html>

Bien entendu, tout ce qu'on peut faire en CSS peut donc s'activer via un code Javascript de ce type.

Propriétés CSS avec un nom composé

Javascript ne permet pas malheureusement d'utiliser le tiret - dans le nom des variables.

Comment faire alors ? Le choix fait par les concepteurs de Javascript est simple :

Si la propriété CSS est background-color, alors
il faut utiliser backgroundColor en Javascript.

5 - Les autres événements

⇩ ⇧ ⤊

Il existe une multitude d'événements.

Liste des événements

Voici les événements liés à la souris

Nom Javascript	Description
click	On clique et on relâche sur la balise.
dblclick	Pareil mais en clic double.
mousedown	On clique gauche sans relâcher sur la balise.
mouseup	On relâche gauche sur la balise.
mouseover	On survole la balise
mousemove	On déplace la souris sur l'élément.
mouseout	On fait sortir la souris de la balise.

Voici les événements liés au clavier

Nom Javascript	Description
keydown	On appuie sans relâcher sur l'une des touches.
keyup	On relâche une touche.
keypress	On appuie et relâche une touche.

Voici les événements liés à la sélection et la mise en focus ou ciblage

Nom Javascript	Description
focus	On vient de mettre le focus ou cibler l'élément, par exemple en cliquant sur l'élément.
blur	On annule ce ciblage, par exemple en cliquant ailleurs.
load	La balise est correctement chargée.

Nous allons cibler aujourd'hui les balises liées à la gestion de la souris.

11° Lire le descriptif ci-dessus.

Comment se nomme l'événement permettant de surveiller que la souris est sur le point de quitter la zone graphique d'une balise ?
Comment doit alors normalement se nommer l'attribut on.... correspondant à placer directement dans une balise HTML ?

Correction ?

...CORRECTION...

L'événement se nomme mouseout.

L'attribut onmouseout permet de générer un tel événement directement dans une balise.

12° Compléter le code HTML ci-dessous. On veut que les mots en gras soient écrits en rouge lors d'un survol à la souris.

Exemple interactif de l'effet final voulu :

Voici un texte sur lequel je veux que les mots contenus dans une balise STRONG deviennent rouge au survol .

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8" />
    <title>Gestion des autres événements</title>
</head>
<body>
    <main>
        <h1>Gestion des autres événements</h1>
        <p>Voici un <strong>texte</strong> sur lequel je veux que les mots contenus dans une balise STRONG deviennent rouge au <strong>survol</strong>.</p>
    </main>
</body>
</html>

Correction ?

...CORRECTION...

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8" />
    <title>Gestion des autres événements</title>
</head>
<body>
    <main>
        <h1>Gestion des autres événements</h1>
        <p>Voici un
            <strong onmouseover="this.style.color='red';">texte</strong>
            sur lequel je veux que les mots contenus dans une balise STRONG deviennent rouge au
            <strong onmouseover="this.style.color='red';">survol</strong>
        .</p>
    </main>
</body>
</html>

Nous avons encore un problème : la couleur ne revient pas à la normale une fois qu'on sort de la zone graphique de la balise. C'est normal : nous n'avons pas géré l'événément correspondant à cette sortie.

13° Compléter le code HTML ci-dessous. On veut rajouter un deuxième événement : le mot doit redevenir noir lorsqu'on quitte la zone.

Voici un texte sur lequel je veux que les mots contenus dans une balise STRONG deviennent rouge au survol .

On notera cette fois la présence d'une fonction possèdant deux paramètres : la référence de la balise à modifier et la couleur à imposer (sous forme d'un string).

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8" />
    <title>Gestion des autres événements</title>
</head>
<body>
    <main>
        <h1>Gestion des autres événements</h1>
        <p>Voici un
            <strong onmouseover="modifier(this, 'red');">texte</strong>
            sur lequel je veux que les mots contenus dans une balise STRONG deviennent rouge au
            <strong onmouseover="modifier(this, 'red');">survol</strong>
        .</p>
    </main>
    <script>
function modifier(reference, couleur) {
    reference.style.color = couleur;
}
    </script>
</body>
</html>

Correction ?

...CORRECTION...

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8" />
    <title>Gestion des autres événements</title>
</head>
<body>
    <main>
        <h1>Gestion des autres événements</h1>
        <p>Voici un
            <strong onmouseout="modifier(this, 'black');"
                    onmouseover="modifier(this, 'red');">texte
            </strong>
            sur lequel je veux que les mots contenus dans une balise STRONG deviennent rouge au
            <strong onmouseout="modifier(this, 'black');"
                    onmouseover="modifier(this, 'red');">survol
            </strong>
        .</p>
    </main>
    <script>
function modifier(reference, couleur) {
    reference.style.color = couleur;
}
    </script>
</body>
</html>

6 - innerHTML

⇩ ⇧ ⤊

Nous allons maintenant voir comment parvenir à modifier le texte affichée d'une balise HTML en utilisant un script javascript.

Commençons par voir le DOM.

DOM : Document Object Model

Le Document Object Model (DOM) est une interface de programmation qui permet à des scripts d'examiner ou de modifier le contenu affiché par le navigateur.

On représente le DOM à l'aide d'une structure de données nommée arbre. On peut alors clairement voir les balises parents et enfants (children).

Considérons la page HTML ci-dessous qui possède des balises normales (composées d'une balise d'ouverture et d'une balise de fermeture) et de quelques balises orphélines.

<!DOCTYPE html>
<html lang="fr">
 
<head>
    <meta charset="UTF-8" />
    <title>Intégration js</title>
    <link rel="stylesheet" href="style_1.css" />
    <script src="mes_scripts.js"></script>
</head>
 
<body>
    <main>
        <h1>Modifications avec javascript</h1>
        <p>Couleur voulue : <strong>bleu</strong></p>
        <p>Le texte de la couleur prendra la bonne couleur si vous cliquez dessus.</p>
    </main>
 
</body>
 
</html>

Voici l'arbre DOM de cette structure :

Or, qu'est-ce qui différencie les balises "normales" des balises orphélines ? Le fait que les balises "normales" peuvent contenir d'autres balises ou du texte.

1
2

<meta charset="UTF-8" />
<title>texte contenu entre la balise d'ouverture et de fermeture</title>

Ligne 2 : La balise title encadre un texte entre sa balise d'ouverture et sa balise de fermeture.

Ligne 1 : On notera que depuis HTML5, nous n'avons plus besoin de finir une balise orpheline par un slash. Comme vous n'êtes pas censé être des spécialistes, je les laisse souvent pour vous aider à voir qu'il s'agit d'une balise orpheline ne possèdant pas de balise de fermeture.

Voici comment on représente habituellement ce contenu interne entre balise d'ouverture et de fermeture sur l'arbre DOM.

✎ 14° QCM : Quelles sont les balises orphelines identifiables sur le DOM ci-dessous :

A : meta - title - link - script - main
B : meta - title - link - script
C : meta - link
D : title - script

Correction ?

...CORRECTION...

Comment accéder à ce texte ?

Et bien, il s'agit du contenu interne de la balise HTML. Les concepteurs du DOM l'ont donc nommé innerHTML.

innerHTML

Il s'agit du code contenu entre la balise d'ouverture et la balise de fermeture d'une balise.

Cela peut être du texte (exemple 1 ci-dessous), mais cela peut également être tout un ensemble d'autres balises (exemple2).

`1`	`<p>Voici un innerHTML composé d'un texte</p>`

<ol>
    <li>Premier élément</li>
    <li>Deuxième élément</li>
</ol>

Si vous désirez obtenir le contenu interne d'une balise, il suffit d'utiliser une instruction javascript contenant quelque chose comme ceci :

1
2
3

var texte = reference.innerHTML
var entier = parseInt(reference.innerHTML)
var flottant = parseFloat(reference.innerHTML)

Les deux dernières lignes sont là pour vous souvenir de l'existence des deux fonctions permettant de convertir en nnombre entier ou en nombre flottant.

Si vous désirez au contraire redéfinir ce contenu interne, il suffit d'utiliser ceci :

`1`	`reference.innerHTML = "Je suis le <em>nouveau</em> contenu"`

15° Utiliser cette-page test pour comprendre comment on parvient à transformer le innerHTML.

* * * * * * * * .

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8" />
    <title>Gestion des autres événements</title>
    <style>
        .s {
            display: inline-block;
            text-align: center;
            width: 20px;
            height: 20px;
            color: white;
            background-color: #BB00BB;
            margin: 5px;
        }
    </style>
</head>
<body>
    <main>
        <h1>Qui se cache derrière le nom mystère&nbsp;?</h1>
        <p>
            <span onclick="affiche(this,'L');" class="s">*</span>
            <span onclick="affiche(this,'o');" class="s">*</span>
            <span onclick="affiche(this,'v');" class="s">*</span>
            <span onclick="affiche(this,'e');" class="s">*</span>
            <span onclick="affiche(this,'l');" class="s">*</span>
            <span onclick="affiche(this,'a');" class="s">*</span>
            <span onclick="affiche(this,'c');" class="s">*</span>
            <span onclick="affiche(this,'e');" class="s">*</span>
        .</p>
    </main>
    <script>
function affiche(reference, caractere) {
    reference.innerHTML = caractere;
}
    </script>
</body>
</html>

Correction ?

...CORRECTION...

7 - Interrogation finale

⇩ ⇧ ⤊

✎ 16 - à faire valider° Réaliser la page HTML permettant de réaliser la tâche suivante : on veut qu'à chaque double-clic sur l'un des nombres, on multiplie le nombre par la bonne valeur.

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8" />
    <title>Interro finale</title>
    <style>
        .rep {
            display: inline-block;
            background-color : #CCEECC;
            padding: 20px;
        }
    </style>
</head>
<body>
    <main>
        <p>Les actions se produisent sur un double clic uniquement.</p>
        <p>On multiplie par deux à chaque fois : <span class="rep">1</span></p>
        <p>On multiplie par dix à chaque fois : <span class="rep" >1</span></p>
        <p>On multiplie par seize à chaque fois : <span class="rep" >1</span></p>
    </main>
</body>
</html>

8 - FAQ

⇩ ⇧ ⤊

Et comment peut-on modifier la classe d'une balise ? class est un mot-clé de Javascript !

On pourrait récupérer la valeur ou changer la valeur contenue dans la class d'une balise HTML. Il n'y aura aucune différence par rapport avec ce qu'on a fait avec id par exemple. Sauf, sauf, sauf que ... class est un mot-clé dans javascript. C'est un mot comme function, true ou false. On ne peut pas l'utiliser comme nom de variables ou autres. Comment faire alors ?

On remplacera class par className lorsqu'on veut accéder à cet attribut HTML depuis une instruction de Javascript. Et le tour est joué.

`1`	`ref_balise.className = 'maClasseCSSQueJeVeux';`

Activité publiée le 10 07 2020
Dernière modification : 31 01 2021
Auteur : ows. h.

⏪

⏫

⏩