Modifier le HTML par le JavaScript

Cours 7 – Modification HTML par JS
3INOC – 2013-14
B. Emery
ModifierleHTMLparleJavaScript
Introduction :
Par l’intermédiaire du DOM, le JavaScript peut modifier le contenu d’un fichier HTML. Voici les
principaux éléments que l’on peut modifier et la façon de le faire.
Cibler les éléments HTML :
Pour modifier les éléments HTML, il est plus commode de les associer à une variable JS, en particulier
s’il est nécessaire d’effectuer plusieurs modifications. Cependant, ceci n’est pas une obligation. Le
DOM, permet d’effectuer le ciblage des éléments et, les principales méthodes pour le faire sont
présentées ci-après. Une fois associé à une variable, il est possible d’accéder aux différents paramètres
de l’élément HTML en utilisant la notation pointé sur la variable elle-même.
REMARQUE : Une méthode est à peu près équivalente à une fonction mais utilisée en notation
pointée. On écrit donc la méthode à la fin du nom de l’objet sur lequel elle s’applique. Il est
nécessaire de commencer la chaine de notation pointée par un élément connu, le plus souvent, la
racine « document » qui correspond à la page HTML (l’objet window qui englobe l’objet document
est généralement omis, comme indiqué plus loin).
Le plus simple, selon son identifiant : .getElementById('identifiant')
La façon la plus facile de pointer un élément HTML précis est d’utiliser la méthode
.getElementById('identifiant') où l’argument utilisé est l’identifiant de l’attribut id de la balise HTML
à cibler. Evidemment, cet attribut doit avoir été renseigné dans le fichier HTML.
Récupérer tous les éléments d’un type : .getElementsByTagName('balise')
Cette méthode permet de récupérer tous les éléments d’un type de balise. Cela crée un tableau
(array) contenant tous ces éléments. Chaque élément est donc accessible selon son indice.
REMARQUE : Pour accéder à un élément précis, on ajoute [indice] à la fin de la méthode, en précisant
l’indice de l’élément. Le premier indice est 0, donc l’indice d’un élément donné est équivalent à sa
position dans l’arborescence DOM moins un. Il en va de même pour les méthodes suivantes.
Récupérer tous les éléments d’une classe donnée : .getElementsByClassName('classe')
Cette méthode permet, comme la précédente, de récupérer le tableau de tous les éléments étant de la
même classe, indiquée en argument.
Récupérer tous les éléments d’un sélecteur (CSS) : .querySelectorAll('sélecteur')
Ayant vu les sélecteurs CSS, il est parfois plus facile de récupérer les éléments en utilisant la syntaxe
CSS, c’est ce que fait cette méthode. Elle récupère dans un tableau tous les éléments répondant à un
1
Cours 7 – Modification HTML par JS
3INOC – 2013-14
B. Emery
sélecteur CSS comme p.ex. "#menu .item a", qui correspond à tous les éléments <a> contenus dans
un élément de classe item, lui-même contenu dans l’élément d’id menu.
Pour aller plus loin : créer sa propre fonction de recherche
Il est tout à fait possible de créer une nouvelle méthode, mais c’est plus simple de concevoir une
fonction. Pour cela, on déclare une fonction qui récupère tous les éléments à l’aide de :
var maVariable= document.getElementsByTagName('*');
Ensuite, il suffit de créer une boucle (for p.ex) sur autant d’éléments que maVariable.length et de
tester ce qu’on cherche à l’aide de la propriété adéquate. Si la réponse est positive, on l’ajoute à un
tableau qui contiendra tous les résultats et on retourne ce tableau à la fin de la fonction.
Par exemple :
function getElementsByTitle(titre) {
var resultat=new Array(), toutesBalises= document.getElementsByTagName('*');
for (var i=0; i<toutesBalises.length; i++) {
if (toutesBalises[i].getAttribute('title')
&& toutesBalises[i].getAttribute('title')==titre)
{resultat.push(toutesBalises[i]);}
}
return resultat ;
}
Le DOM (Document Object Model)
A part la méthode .getElementById(), pour bien comprendre les autres méthodes précédemment
nommées, il est nécessaire de comprendre le DOM. Le container qui contient le tout est window (qui
représente la fenêtre du navigateur), il est généralement implicite et donc on ne le met pas (à moins
d’utiliser des frames). Lorsqu’il n’y a qu’un seul fichier, le container qui contient toutes les balises est
document, qui correspond à la balise <html>.
Le DOM est organisé tel un arbre, en commençant par le tronc (document), les balises sont rattachées
les unes aux autres en fonction de leur parenté. Chaque élément est appelé « nœud ». Le contenu
d’une balise est également un nœud.
Lire et Modifier un attribut d’une balise, méthode ou propriété ?
Une fois l’élément associé à une variable, il est facile de lire ou de modifier un attribut existant.
Deux méthodes sont toujours disponibles pour cela : getAttribute('attribut') et setAttribute
('attribut','valeur'). La première permet de récupérer la valeur de l’attribut, tandis que la seconde
permet de la modifier.
Toutefois, pour la plupart des balises « classiques », leurs attributs sont directement accessibles en
notation pointé (il s’agit d’une propriété). Dans l’exemple précédent, il aurait été plus court d’utiliser
la propriété .title. Comme autre exemple, l’attribut href d’une balise <a> peut être accédé (en lecture
ou en écriture) directement en ajoutant .href à la fin de la notation pointée de l’élément.
2
Cours 7 – Modification HTML par JS
3INOC – 2013-14
B. Emery
Malheureusement, cela n’est pas vrai pour tous les attributs. Parfois, c’est simplement le nom de
l’attribut qui change, comme par exemple pour la classe ou il faut utiliser .className. D’autres fois,
la propriété correspondante n’existe simplement pas. Dans le cas du SVG, cela se complique
également, comme indiqué ci-dessous.
Modifier le contenu d’une balise : .innerHTML
La propriété .innerHTML permet de récupérer ou de modifier le contenu d’une balise sous forme de
texte, comme si on utilisait un éditeur de texte. De fait, il est également possible d’ajouter des balises
HTML par ce biais.
Le cas du SVG :
Le DOM des objets SVG est un peu plus compliqué qu'il n'y parait. Ainsi, l'utilisation d'une notation
pointée pour modifier certains attributs peut être source d'erreur.
Prenons par exemple le rectangle suivant :
<rect id="rectangle" x="0" y="0" width="100" height="50" fill="red" stroke="black" strokewidth="1" />
Comme d'habitude, pour manipuler cet objet, il faut préalablement l'associer à une variable JS :
var monObjet=document.getElementById('rectangle');
Pour modifier la position de ce rectangle, il suffit de modifier les valeurs des paramètres x et y. Et
c'est là que les choses se compliquent. Nous aurions pu nous attendre à une notation simple du
genre: « monObjet.x = 10; », mais cette ligne de code ne fonctionnera pas.
En effet, en raison des instructions d'animation propre à SVG, le DOM des éléments SVG est moins
intuitif. Ainsi, pour modifier cette valeur x, il faut utiliser l'instruction suivante :
monObjet.x.baseVal.value=10;
Alternativement,
nous
aurions
pu
plus
simplement
passer
par
.setAttribute(’attribut’,’valeur’) vue plus haut : monObjet.setAttribute("x", 10);
la
méthode
De la même manière, pour modifier un attribut de style, il faut passer par une notation plus
compliquée, car il s’agit en réalité d’information de CSS. Ainsi modifier la couleur de remplissage se
fait ainsi : monObjet.style.fill="blue";
Pour résumer, afin d'altérer certains attributs des objets SVG, il faut soit passer par la méthode
.setAttribute(), soit utiliser une notation pointée plus complexe que celle des éléments HTML, dont la
syntaxe générale est :
Pour les dimensions : .attribut.baseVal.value= valeur;
Pour le style : .style.attribut = valeur;
Quelques éléments de programmation Javascript
Le JavaScript est avant tout un langage de programmation. De fait, on y retrouve des opérateurs, des
boucles, des conditions. Maintenant qu’on a vu comment modifier les éléments HTML de notre
fichier, regardons les règles de programmation qui nous permettrons de créer des fonctions complexes
mais avec un nombre de lignes de code réduit.
3
Cours 7 – Modification HTML par JS
3INOC – 2013-14
B. Emery
Les opérateurs
L’assignation à une variable : =
Pour assigner une valeur à une variable, on utilise le symbole =. Ainsi maVariable = 5; permet
d’assigner à cette variable le nombre 5.
L’addition ou la concaténation : +, +=, ++
En utilisant l’opérateur + on additionne deux nombres. Cet opérateur peut également être utilisé pour
concaténer du texte. Ainsi total = 5+6; donnera 11 (un nombre) tandis que total = "5"+"6"; donnera
"56" (un texte).
Lorsque l’on souhaite ajouter une valeur (nombre ou texte) à ce que contient déjà une variable, on
utilise l’opérateur += à la place de =. Bref, total = total +3; peut être remplacé par total += 3;.
Finalement, pour incrémenter le total d’une variable numérique de 1, on peut utiliser l’opérateur ++.
Ainsi total = total +1; ou total+=1; est équivalent à total++;. Il est aussi possible d’écrire ++total;,
mais cela n’a pas tout à fait la même signification. Dans la plupart des cas, cela n’aura pas d’influence,
mais si le ++ se situe avant la variable, cela signifie qu’elle est incrémentée avant d’être transmise
alors que dans l’autre cas, cela se fait après. P.ex :
var v=0;
alert(v++ +' '+ v); // Affichera "0 1"
v=0;
alert(++v +' '+ v); // Affichera "1 1"
La soustraction : -, -=, -A l’instar de l’addition, l’opérateur de soustraction fonctionne de la même manière, mais uniquement
pour les valeurs numériques.
La multiplication (*, *=), la division (/,/=) et le modulo (%, %=)
Ces derniers opérateurs arithmétiques fonctionnent comme les autres. Le modulo correspond au reste
d’une division.
Les comparateurs
Les comparateurs permettent d’effectuer des comparaisons, très utiles pour les conditions. Le résultat
d’une comparaison est true ou false.
Le comparateur « a la valeur » (==) et son type (===)
Pour tester si une variable a la bonne valeur, il suffit d’utiliser le comparateur ==. Si on souhaite
également être certain qu’il s’agit aussi du bon format (numérique, textuel), alors on utilise ===.
P.ex. :
var n=5, t="5" ;
alert(n==t); // affichera true
alert(n===t); //affichera false
Les comparateurs plus petit (<) ou égal (<=) et plus grand (>) ou égal (>=)
Est-il vraiment nécessaire de préciser la signification de ces comparateurs ?
4
Cours 7 – Modification HTML par JS
3INOC – 2013-14
B. Emery
Les comparateurs de différence : != et !==
Le premier permet de s’assurer d’une simple différence de valeurs, sans considérer le format, tandis
que !== implique une différence de la valeur ou du format. P.ex. :
var n=5, t="5" ;
alert(n != t); //affichera false
alert(n !== t); // affichera true
Les opérateurs logiques : &&, ||, !
Ajoutons aux comparateurs, les opérateurs logiques, qui permettent d’évaluer plus d’une condition à
la fois ou de manipuler une condition. Le ET est symbolisée par &&. Il retourne true si les 2
conditions sont vraies et false dans les autres cas. Le OU est symbolisé par || et retourne false que si
les 2 conditions sont fausses. L’inverseur ! (NON) permet d’inverser la valeur booléenne soumise.
Ainsi !false équivaut à true. Ces opérateurs sont évidemment combinables, l’utilisation de
parenthèses permet d’aider à structurer, mais est généralement optionnelle.
Les structures conditionnelles
Les structures conditionnelles permettent d’effectuer des instructions seulement si une ou plusieurs
conditions sont vérifiées. A l’instar des fonctions, en tant que structures, elles ne s’achèvent pas par
un ;.
Si, sinon si, sinon : if (condition) {instruction;} else if (condition) {instruction;} else
{instruction;}
La structure conditionnelle de base est if (condition) {instruction;} qui effectue l’instruction (ou les
instructions) indiquée(s) entre { } si la (ou les) condition(s) indiquée(s) entre ( ) est vraie.
A cette structure de base, on peut ajouter un « sinon » else {instruction;} qui effectue d’autres
instructions dans le cas où la condition précédemment donnée est fausse.
Il est possible d’enchainer les sinon (else) et les si (if) pour créer de grandes structures
conditionnelles. Toutefois, lorsqu’il faut détailler plusieurs instructions différentes pour un très grand
nombre de cas, il est recommandé d’utiliser plutôt la structure switch, présentée ci-après.
Dans le cas de : switch (variable) {case "valeur1" : instruction; break; default : instruction;}
Avec cette structure, on peut assigner des instructions à chaque valeur possible de la variable
soumise. La structure commence avec le mot-clé switch suivi de la variable soumise entre
parenthèses. Les cas possibles sont indiqués entre les accolades qui, comme pour les autres structures
ne s’achèvent pas avec un ;. Chaque cas commence par case suivi de la valeur. Les instructions sont
indiquées après les : et s’achève avec l’instruction break;. Il est possible de créer autant de cas qu’il y
a de valeur possible. On peut également achever les cas avec le mot-clé default : qui permettra
d’exécuter des instructions si aucun cas précédent ne s’applique. Il n’est pas nécessaire d’achever
celles-ci avec break; car étant le dernier cas, la structure se termine forcément après cela.
5
Cours 7 – Modification HTML par JS
3INOC – 2013-14
B. Emery
Exemple :
var soumis=prompt("Entrez un chiffre entre 1 et 3") ;
// on demande d’entrer un chiffre, mais prompt renvoie forcément un caractère.
switch (soumis) {
case "1" : alert("Vous avez entré la valeur 1") ; break ; // essayer d’omettre les break pour
case "2" : alert("Vous avez entré la valeur 2") ; break ; // voir ce qu’il se passe.
case "3" : alert("Vous avez entré la valeur 3") ; break ;
default : alert("Vous n’avez pas entré une valeur autorisée !") ;
} // on n’achève pas une structure avec ;
Une simplification, les ternaires : condition ? valeurSiJuste : valeurSiFaux ;
Lorsqu’on veut simplement obtenir une valeur pour un simple cas vrai/faux, il est plus court d’utiliser
une ternaire. La condition testée est suivie d’un ? puis des valeurs si vrai ou si faux, séparées par :.
alert("Vous avez "+ (parseInt(prompt("Entrez votre âge ?"))<18 ? "moins" : "plus") + " de 18 ans.");
Les boucles
Pour un certain nombre de fois : for (var variableIncr=valeur_initiale ;
conditionDeContinuation ; incrémentation) {instruction;}
La boucle for permet d’exécuter une instruction pour un certain nombre de fois. Celui-ci peut être
déterminé par une variable ou directement par une valeur. Une variable d’incrémentation est
également définie et est utilisée comme compteur. La condition indiquée en argument est celle qui
permet de continuer. Ainsi, tant qu’elle est vraie, la boucle est effectuée. Par conséquent, utiliser la
condition true, créerait une boucle infinie et planterait la machine. Heureusement, la plupart des
navigateurs modernes disposent d’un mécanisme de sécurité permettant d’éviter cela. Le dernier
argument est l’incrémentation. Celle-ci est réalisée après l’exécution des instructions indiquées entre
les { }.
Exemple :
var factoriel=parseInt(prompt("Entrez le factoriel à calculer")), resultat=1 ;
// on utilise parseInt() pour convertir le caractère en un nombre, même si cela n’est pas nécessaire.
for (var i=1 ; i<=factoriel ; i++) {resultat*=i ;} // calcul le résultat.
alert("Le résultat de " + factoriel +"! est : " + resultat); // affiche le résultat.
Tant que : while (conditionDeContinuation) {instruction ;}
Cette boucle est plus simple que la précédente, mais plus dangereuse également. Si on ne prend pas
garde à ce que la condition puisse être modifiée dans les instructions de la boucle, celle-ci risque de
continuer infiniment. Ainsi while(true){ } crée une boucle infinie. Il est toutefois possible de casser
une boucle en utilisant l’instruction break;. Celle-ci y mettra fin immédiatement, comme pour le
switch. Une autre instruction spéciale peut être utilisée, continue;, qui met fin à l’itération en cours,
mais pas à la boucle, celle-ci reprend donc au début de l’itération suivante. Ces instructions spéciales
peuvent être utilisées avec d’autres structures.
Si la condition est fausse dès le début, alors les instructions ne seront pas exécutées. Une variante de
cette boucle existe pour qu’une itération soit toujours exécutée : do {instruction ;} while (condition);.
Vous l’avez probablement remarqué, mais exceptionnellement, cette structure s’achève avec un ;.
6
Cours 7 – Modification HTML par JS
3INOC – 2013-14
B. Emery
Les minuteries.
Minuterie répétitive :
Il est possible de créer une minuterie « répétitive » à l’aide de la méthode JS de l’objet window :
setInterval("maFonction()", intervalle);. Avec cette méthode, la fonction spécifiée est exécutée
toutes les « x » millisecondes, selon l’intervalle spécifié.
Pour stopper cette minuterie, il faut utiliser la méthode clearInterval(nomMinuterie);, ce qui
nécessite donc que la minuterie ait été associée à une variable (var timer=setInterval(…) ;).
Retardateur :
Pour un simple déclanchement retardé sans répétition, on utilise setTimeout("maFonction()",
intervalle);.
REMARQUE : Comme le JavaScript est asynchrone, les instructions suivant les minuteries sont
exécutées immédiatement, et non après la fin de celles-ci.
Exercices : des animations et de l’interactivité.
Avec tout ce que nous avons vu dans ces deux derniers cours, vous avez désormais de quoi ajouter de
l’interactivité et des animations à votre page HTML. Les événements du DOM permettent de rendre les
balises HTML interactives et le JavaScript permet d’effectuer des modifications du code HTML.
Voici quelques exercices :
1. Changer la couleur du fond de la page en cliquant sur celle-ci. Faire une rotation des 7
couleurs de l’arc-en-ciel.
2. Afficher dans une balise, le contenu d’une autre balise sur laquelle vous avez cliqué.
3. Réalisez une page qui vous permet de calculer différentes formules mathématiques ou
physiques lorsqu’on clique dessus.
4. Créer un menu déroulant ou simplement des liens « masquer/afficher » en modifiant la
propriété display ou la propriété visibility de l’attribut style d’une balise. Dans la CSS,
utilisez la déclaration cursor : pointer; pour modifier l’icône de la souris au-dessus de
l’élément cliquable.
5. Faire un diaporama de plusieurs images qui défilent au clic sur une photo. Rendre le
diaporama automatique à l’aide d’une minuterie.
6. Déplacer un cercle en SVG pour qu’il rebondisse sur les bords du SVG.
7. Déplacer un cercle en SVG selon une trajectoire balistique (retrouvez les formules
mathématique du MRUA dans vos cours de phyisique).
Principales références :
Site du W3C : http://www.w3.org
DÉVELOPPER VOTRE SITE WEB, F. Basmaison et coll., MicroApplication 2012
DYNAMISER VOS SITES WEB AVEC JAVASCRIPT, J. Pardanaud et S. De La Marck, Site du Zéro 2012
7