5 - Modifier le html avec javascript

⏪

⏬

⏩

1 - outils

2 - innerHTML

3 - getElementById

4 - agir

5 - interro !

6 - FAQ

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 9-10-11.

MODE COURS (cacher les questions)

1 - Outils de base : les tests

⇩ ⇧ ⤊

Avant de modifier l'apparence ou le contenu de nos pages en fonction du contenu, commençons par voir comment gérer les tests.

Tests conditionnels

La structure est assez proche de Python.

Voici un exemple sur une recherche de maximum sur 3 nombres.

Si a est plus grand ou égal à b ET que a est plus grand ou égal à c : on renvoie a
Si b est plus grand ou égal à a ET que b est plus grand ou égal à c : on renvoie b
Sinon : on renvoie c

function maximum(a, b, c) {
    /* Fonction qui renvoie la plus grande valeur parmi les nombres a, b et c
    :: param a (number) :: le premier nombre
    :: param b (number) :: le deuxième nombre
    :: param c (number) :: le troisième nombre  
    :: return (number) :: la plus grande valeur parmi a, b ou c
    */
    var reponse = 0;
    if (a >= b && a >= c) {
        reponse = a;
    } else if (b>=a && b>=c) {
        reponse = b;
    } else {
        reponse = c;
    }
    return reponse
}

Les différences et analogies sont les suivantes

Le SI s'écrit if comme avec Python
Le SINON Si s'écrit else if contrairement au elif de Python
Le SINON s'écrit else comme avec Python
Ce sont les accolades d'ouverture { et de fermeture } qui définissent ce que contient chaque bloc.
Pas de : à la fin des lignes
Le ET s'écrit &&
Le OU s'écrit || (AltGr + 6)
Il faut encadrer les conditions par des parenthèses

01° Créer une page HTML et le fichier JS mes_scripts.js en utilisant les codes suivants pour le HTML et le JS.

<!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>
    </main>
 
</body>
 
</html>

function maximum(a, b, c) {
    /* Fonction qui renvoie la plus grande valeur parmi les nombres a, b et c
    :: param a (number) :: le premier nombre
    :: param b (number) :: le deuxième nombre
    :: param c (number) :: le troisième nombre  
    :: return (number) :: la plus grande valeur parmi a, b ou c
    */
    var reponse = 0;
    if (a >= b && a >= c) {
        reponse = a;
    } else if (b>=a && b>=c) {
        reponse = b;
    } else {
        reponse = c;
    }
    return reponse
}
 
function demarrage() {
    var rep = maximum(1, 2, -3);
    alert(rep);
}
 
window.addEventListener("load",demarrage);

En le lançant, vous devriez constater l'apparition d'une fenêtre pop-up dès l'activation de la fenêtre. Elle vous signale que le maximum est 2.

Nous n'irons pas plus loin dans la description des tests conditionnels. Cette activité suppose que vous les avez déjà rencontré de nombreuses fois avec un autre langage de programmation.

2 - innerHTML

⇩ ⇧ ⤊

Nous allons maintenant voir comment parvenir à modifier le visuel d'une page HTML en utilisant un script javascript.

Commençons par voir le DOM de façon un peu plus poussé.

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 orphelines.

<!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 : <span id="couleur">bleu</span></p>
        <p id="texte">Le texte devrait avoir la couleur voulue maintenant.</p>
    </main>
 
</body>
 
</html>

Voici l'arbre DOM de cette structure :

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

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.

Le problème ?On voit clairement sur le DOM qu'avant de pouvoir accéder à l' innerHTML d'une balise, il faut d'abord parvenir à localiser la balise !

3 - méthode getElementById

⇩ ⇧ ⤊

L'une des manières de trouver la référence d'une balise est simplement d'attribuer un identifiant à la balise voulue et de chercher cet identifiant lors de la lecture des balises du DOM.

On crée une balise dans le fichier html en lui donnant un attribut nommé id dans lequel on affecte "couleur"

`1`	`<p>Couleur voulue : <span id="couleur">bleu</span></p>`

On fait pointer le javascript vers cette balise avec cet identifiant avec la méthode getElementById.
On modifie le contenu de la balise à l'aide du javascript : innerHTML

getElementById

Cette méthode appliquée à l'objet document permet de récupérer la référence d'une balise possèdant un id dont la valeur correspond à l'argument transmis via la méthode.

Dans le HTML

HTML

<p>Couleur voulue : <span id="couleur">bleu</span></p>

Dans le Javascript

JS1

var reference_balise = document.getElementById('couleur');

Avec cet exemple, reference_balise va faire référence à la balise HTML dont l'id est 'couleur'.

Pour récupérer le contenu interne de la balise (le texte situé entre la balise d'ouverture et la balise de fermeture), il suffit alors d'utiliser l'instruction suivante :

JS1
JS2

var reference_balise = document.getElementById('couleur');
var couleur_demandee = reference_balise.innerHTML;

Ces deux lignes pourraient être regroupées pour n'en faire qu'une :

JS1+2

var couleur_demandee = document.getElementById('couleur').innerHTML;

Dans les deux cas, la variable couleur_demandee contient alors 'bleu'.

02° Créer une page HTML et le fichier JS mes_scripts.js en utilisant les codes suivants pour le HTML et le JS. Lancer la page pour vérifier qu'elle fonctionne correctement.

On y crée

ligne 14 : une balise générique span ayant un attribut id valant couleur

HTML-14

<span id="couleur">

ligne 15 : une balise p ayant un attribut id valant texte

HTML-15

<p id="texte">

<!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 : <span id="couleur">bleu</span></p>
        <p id="texte">Le texte devrait avoir la couleur voulue maintenant.</p>
    </main>
 
</body>
 
</html>

function recuperer_couleur() {
    /* Fonction qui renvoie la couleur voulue
    :: return (string) :: le texte affiché dans le innerHTML de la balise d'id couleur
    */
    var reference_balise = document.getElementById('couleur');
    alert(typeof reference_balise);
    var couleur_demandee = reference_balise.innerHTML;
    alert(couleur_demandee);
    alert(typeof couleur_demandee);
    return couleur_demandee;
}
 
function modifier_texte(ref_balise, nouveau_texte) {
    /* Procédure qui modifie le texte contenu à l'intérieur d'une balise
    :: param ref_balise (object) :: la référence d'une balise HTML du document
    :: param nouveau_texte (string) :: le texte qu'on veut voir s'afficher dans la balise
    :: return (undefined) :: rien puisque c'est une procédure !
    */
}
 
function demarrage() {
    var choix_couleur = recuperer_couleur();
    alert(choix_couleur);
    alert(typeof choix_couleur);
    alert(typeof modifier_texte(5,2));
}
 
window.addEventListener("load",demarrage);

Quelques questions-réponses pour voir si vous comprennez ce que réalise ce code.

03° Les fonctions déclarées aux lignes 1, 13 et 21 se lançent-elles seules automatiquement ?

Correction ?

...CORRECTION...

Non, il s'agit juste de déclarations : on stocke le code mais on ne l'exécute pas.

04° Pourquoi se passe-t-il alors quelque chose lorsque la page est entièrement chargée ?

Correction ?

...CORRECTION...

La ligne 28 permet de voir qu'on lie l'événement load à la fonction demarrage : cette fonction est donc lancée automatiquement lorsque la page HTML est entièrement réalisée.

05° Donner, dans l'ordre séquentiel d'exécution, les numéros de lignes des 6 alertes qui apparaissent.

Correction ?

...CORRECTION...

Lors de la survenue de l'événement, on lance la fonction demarrage.

Ligne 22, on lance alors l'appel à la fonction recuperer_couleur dont on stockera le résultat dans la variable locale choix_couleur.

On part donc en ligne 1.

Après les commentaires, on récupère (en ligne 5) la référence de la balise ayant l'id couleur qu'on sauvegarde dans la variable reference_balise.

Ligne 6 (1er alerte) :on affiche le type du contenu de la variable reference_balise. On obtient object.

Ligne 7, on utilise cette référence pour récupérer le innerHTML (le contenu interne) de la balise. Et on stocke le résultat dans la variable couleur_demandee.

Ligne 8 (2e alerte) :on affiche le contenu de la variable couleur_demandee. On obtient bleu (voir la ligne 14 du code HTML).

Ligne 10 (3e alerte) :on affiche le type du contenu de la variable couleur_demandee. On obtient string.

On sort alors de la fonction en ligne 11 en renvoyant le contenu de la variable couleur_demandee.

On revient ligne 22 et on stocke "bleu" dans choix_couleur.

Ligne 23 (4e alerte) :on affiche le contenu de la variable choix_couleur. On obtient bleu.

Ligne 24 (5e alerte) :on affiche le type du contenu de la variable choix_couleur. On obtient string.

Ligne 25 (6e alerte) :on affiche le type de la réponse de la procédure modifier_texte. Comme c'est une procédure, elle ne renvoie rien. On obtient undefined, non défini.

Opérateur typeof

Il ne s'agit ni d'une fonction ni d'une procédure puisqu'on ne fournit pas d'argument. Il s'agit d'un opérateur. En plaçant un espace et la variable à étudier juste derrière, on parvient à récupérer le type du contenu.

Les types usuels sont :

number pour les nombres
string pour les chaînes de caractères
object pour les objets, dont les références des balises HTML
boolean pour les booléens, true ou false en Javascript
undefined pour le contenu non défini. C'est un peu le None de Python.

On peut tester le type d'une variable en utilisant un test de ce type :

typeof maVariable == 'number';

06° Rajouter dans la fonction demarrage quelques lignes pour afficher en plus le contenu de la balise p de la ligne 15 du code HTML. Il faut bien entendu utiliser la méthode getElementById.

Correction ?

...CORRECTION...

Voici trois lignes à insérer dans le code Javascript, pas n'importe où non plus !

On cherche la balise dont l'id est texte et on lit et stocke le contenu HTML de cette balise avant de l'afficher dans une alerte.

1
2
3

var reference_balise = document.getElementById('texte');
var le_contenu = reference_balise.innerHTML;
alert(le_contenu);

On notera que dans la méthode proposée, on effectue l'action en plusieurs étapes :

On cherche et stocke la référence de la balise
On utilise cette référence pour récupérer et stocker le contenu interne de la balise
On affiche via une alerte cette variable

1
2
3

var reference_balise = document.getElementById('texte');
var le_contenu = reference_balise.innerHTML;
alert(le_contenu);

Cette méthode est à privilégier si vous pensez que vous allez devoir agir plusieurs fois sur cette balise.

Si par contre vous savez que vous n'allez faire qu'une action unique sur cette balise, autant tout faire tenir sur une ligne :

`1`	`alert( document.getElementById('texte').innerHTML );`

4 - Agir sur les balises

⇩ ⇧ ⤊

Vous savez maintenant retrouver la référence d'une balise dont vous connaissez l'identifiant.

Nous avons vu comment lire le contenu interne, le innerHTML.

Voyons maintenant comment modifier ce contenu.

function modifier_texte(ref_balise, nouveau_texte) {
    /* Procédure qui modifie la couleur de la balise transmise
    :: param ref_balise (object) :: la référence d'une balise HTML du document
    :: param nouveau_texte (string) :: le texte qu'on veut voir s'afficher dans la balise
    :: return (undefined) :: rien puisque c'est une procédure !
    */
    ref_balise.innerHTML = nouveau_texte;
}
 
function demarrage() {
    modifier_texte(document.getElementById('texte'), 'Et hop, un nouveau texte');
}
 
window.addEventListener("load",demarrage);

Comme vous pouvez le voir, en ligne 7, on affecte tout simplement un nouveau contenu au innerHTML en utilisant une simple affectation (avec un =).

07° Utiliser ce nouveau code javascript sur le code HTML ci-dessous. Expliquer pourquoi le texte Le texte devrait avoir la couleur voulue maintenant se change en Et hop, un nouveau texte en analysant le code.

<!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 : <span id="couleur">bleu</span></p>
        <p id="texte">Le texte devrait avoir la couleur voulue maintenant.</p>
    </main>
 
</body>
 
</html>

function modifier_texte(ref_balise, nouveau_texte) {
    /* Procédure qui modifie la couleur de la balise transmise
    :: param ref_balise (object) :: la référence d'une balise HTML du document
    :: param nouveau_texte (string) :: le texte qu'on veut voir s'afficher dans la balise
    :: return (undefined) :: rien puisque c'est une procédure !
    */
    ref_balise.innerHTML = nouveau_texte;
}
 
function demarrage() {
    modifier_texte(document.getElementById('texte'), 'Et hop, un nouveau texte');
}
 
window.addEventListener("load",demarrage);

Correction ?

...CORRECTION...

Lors de l'activation, on arrive en ligne 10.

En ligne 11, on utilise alors la fonction modifier_texte en fournissant des arguments valants

document.getElementById('texte') qui va donc être stocké dans ref_balise
'Et hop, un nouveau texte' qui va donc être stocké dans nouveau_texte

On va alors en ligne 1 puis on modifie le contenu HTML à l'aide de la ligne 7.

On peut faire mieux que modifier simplement le contenu du texte.

On peut également modifier les attributs des balises dont on connait la référence.

On peut ainsi modifier le style CSS dynamiquement. Sur l'exemple ci-dessous, on obtient un texte rouge avec un fond noir. Groovy.

1
2

ref_balise.style.color = "red";
ref_balise.style.backgroundColor = 'black';

08° Modifier la fonction modifier_texte pour qu'elle impose un texte blanc sur fond rouge.

Correction ?

...CORRECTION...

function recuperer_couleur() {
    /* Fonction qui renvoie la couleur voulue
    :: return (string) :: le texte affiché dans le innerHTML de la balise d'id couleur
    */
    return document.getElementById('couleur').innerHTML;
}
 
function modifier_texte(ref_balise, nouveau_texte) {
    /* Procédure qui modifie la couleur de la balise transmise
    :: param ref_balise (object) :: la référence d'une balise HTML du document
    :: param nouveau_texte (string) :: le texte qu'on veut voir s'afficher dans la balise
    :: return (undefined) :: rien puisque c'est une procédure !
    */
    ref_balise.innerHTML = nouveau_texte;
    ref_balise.style.color = 'white';
    ref_balise.style.backgroundColor = "red";
}
 
function demarrage() {
    modifier_texte(document.getElementById('texte'), 'Et hop, un nouveau texte');
}
 
window.addEventListener("load",demarrage);

Propriétés CSS avec un nom composé

Javascript ne permet pas d'utiliser le caractère - dans le nom des variables propres. C'est pour cela qu'en CSS la propriété du fond est bien background-color mais pas en Javascript. Les concepteurs de javascript ont décidé de remplacer le tiret par une majuscule. C'est pour cela qu'en javascript on utilise backgroundColor.

5 - Interrogation finale

⇩ ⇧ ⤊

✎ 09° Réaliser la page HTML et la page JS permettant de réaliser la tâche suivante :

On veut que votre script JS lise le contenu de la balise d'id couleur qui doit contenir une couleur exprimée en français.
Il faut ensuite traduire la couleur en anglais
Le script devra finalement afficher un texte dans la balise d'id texte en changeant sa couleur de façon à ce qu'elle corresponde à la couleur notée.

En gros, si la couleur est rouge, il va falloir que le texte apparaisse en red.

Visuel avec une demande de rouge — Comparaison des deux affchages obtenus avec visibility: visible ou visibility: hidden

Visuel avec une demande de bleu — Comparaison des deux affchages obtenus avec visibility: visible ou visibility: hidden

Il faudra donc utiliser des tests if pour parvenir à réaliser votre action : si la variable de la couleur contient rouge, alors il faut lui affecter red ect...

Vous pouvez partir des codes HTML et js fournis ci-dessous.

Bon courage !

<!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 : <span id="couleur">bleu</span></p>
        <p id="texte">Le texte devrait avoir la couleur voulue maintenant.</p>
    </main>
 
</body>
 
</html>

function demarrage() {
    /* Etape 1 : on récupère la référence de la balise span voulue */
 
    /* Etape 2 : on récupère la couleur en français dans le innerHTML du span */
 
    /* Etape 3 : on transforme la couleur française contenue dans le string en version anglaise */
 
    /* Etape 4 : on récupère la référence de la balise p voulue */
 
    /* Etape 5 : on modifie la couleur du texte de la balise p */
 
    /* Etape 6 : on modifie le contenu interne (innerHTML) de la balise p */
 
}
 
window.addEventListener("load",demarrage);

Vous pouvez me contacter (en bas de page) si vous n'êtes pas en classe !

C'est un peu dommage, la page est statique finalement. On pourrait permettre à l'utilisateur de changer le contenu de la balise span. On espère ainsi que la couleur change automatiquement.

Attribut contenteditable

Si vous voulez rendre une balise texte éditable par l'utilisateur, il suffit de rajouter un attribut contenteditable dans la balise

`1`	`<p>Couleur voulue : <span contenteditable="true" id="couleur">bleu</span></p>`

Par défaut, les balises ne sont pas éditables.

On peut bien entendu modifier l'attribut depuis Javascript si on connait la référence de la balise. Voici le code pour activer (ligne 2) ou désactiver (ligne 3) cette fonctionnalité :

1
2
3

var ref_balise = document.getElementById('couleur');
ref_balise.contentEditable = 'true';
ref_balise.contentEditable = 'false';

Attention à la présence de la majuscule en Javascript contrairement au HTML.

✎ 10° Dans HTML : modifier le span de la couleur de façon à ce qu'il soit éditable. On rajoutera donc l'attribut contenteditable. Vérifier qu'on puisse bien modifier le texte : cliquer dessus et taper quelque chose au clavier. Malheureusement, cela ne provoque pas encore changement de couleur... On change juste le texte. C'est déjà pas mal.

Pourquoi la couleur ne change pas lorsqu'on change le texte ? Tout simplement car la fonction provoquant le changement de couleur n'est pas réactivée. Pour savoir faire cela, il va falloir gérer les événements sur la page. C'est l'objet de l'activité suivante.

✎ 11° Dans Javascript : modifier maintenant le code de la fonction qui gère la balise p possédant un identifiant : on veut que le script la transforme en balise éditable. Il faut utiliser contentEditable (attention à la majuscule) pour transformer la balise en balise éditable en plus du changement de couleur et de contenu texte.

6 - 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. Et le tour est joué.

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

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

⏪

⏫

⏩