Traduction
Tutoriel sur Javascript
Recherche dans ce tuto
L'auteur : Patrick Darcheville
Vous pouvez me contacter via Facebook pour questions & suggestions :
Page Facebook relative à mon site
Vous pouvez me contacter via Facebook pour questions & suggestions :
Page Facebook relative à mon site
Dans ce chapitre je vous montre comment générer beaucoup de code HTML via un courte routine JS ; donc modifier profondément le DOM initial
d'une page web.
Bien évidemment JS ne doit pas être désactivé par le navigateur (situation de plus en plus rare).
Donc dans le code HTML n'oubliez pas la balise noscript afin d'avertir le visiteur qu'il se prive de nombreuses fonctionnalités
en ayant désactivé JS.
le JS natif peut générer directement du HTML mais si vous souhaitez générer du code SVG il faudra de préférence
utiliser un framework tel Snap.svg.
Et si vous voulez générer du code MathML (pour afficher des formules mathématiques) il faudra aussi faire appel
à un micro framework tel "ASCIIMathML.js".
La solution ancienne pour générer du code HTML via un script JS était d'utiliser la méthode write de l'objet document ; mais vous allez vite comprendre que cette technique est à éviter.
L'encodage direct d'un gros tableau de données en HTML est une opération fastidieuse. Il faut manipuler beaucoup de balises doubles : table, caption, thead, tr, th, td, ... Le recours à un script contenant une ou plusieurs boucles est très utile ...
Mais revenons à JS !
Objectif : générer un tableau HTML de N lignes contenant des littéraux (valeurs fixes) via un script JS.
Le code JS est relativement simple car on ne manipule que de littéraux tels "col 1", "col 2", etc.
Notez que le titre H3 et l'élément BUTTON ont disparu. C'est à cause de la première instruction document.write() qui efface le contenu existant de la page.
C'est le visiteur qui précise laquelle des tables il veut afficher (table par 1 ou par 2 ... ou par 9).
Comme dans l'exemple précédent je vais d'abord utiliser des instructions basées sur "document.write".
Le code HTML :
Le script :
Plus de 'scorie' JS dans la code HTML.
Notez que les arguments des document.write() deviennent complexes car il faut manipuler balisage HTML, chaines et
variables ; il faut donc procéder à des concaténations délicates.
Le rendu :
Problème : le titre général de la page ainsi que le bouton de commande disparaissent car écrasés par la première instruction document.write()
Principe : tout le code HTML généré sera stocké dans une variable.
Ensuite il suffit de remplir la partie BODY de la page grâce au contenu de cette variable.
Le code HTML :
Le script :
Observez très attentivement l'instruction tableau+= ... dans la boucle.
Pour éviter des concaténations délicates j'ai créé une "template strings".
Je peux alors insérer des expressions (variables en particulier) avec la syntaxe dite 'moustache') : ${expression}
Attention la chaine doit alors être délimitée par des accents graves (alt+7)
observez aussi la dernière instruction : document.body.innerHTML = tableau
Le rendu :
Problème : le bouton de commande disparait toujours.
Mais c'est logique puisque le script recrée toute la partie BODY de la page donc
écrase les éléments initiaux.
Après maints tâtonnements nous arrivons enfin à la bonne solution.
Notez que l'élément DIV identifié 'affichage' et vide de tout contenu.
Le script est strictement identique au précédent sauf la dernière instruction.
Je n'écrase plus le code initial de la partie BODY.
Le rendu :
Comme le bouton de commande n'a pas disparu ; je peux demander successivement l'affichage de la table par 2, 3, 4 etc.
Maintenant je vous montre comment insérer de nouvelles images dans le DOM initial de la page web.
Les méthodes : createElement() et appendChild() permettent respectivement de créer puis d'insérer à un endroit
précis de nouveaux éléments HTML.
Dans l'exemple ci-dessous des images choisies de façon aléatoire sont insérées à raison d'une image par seconde pour produire
un patchwork sexy.
Pour chaque image nouvelle il faut lui donner des valeurs aux attributs SRC, top & left.
Pour arrêter le processus d'insertion il suffit de cliquer sur le bouton de commande.
Les nouvelles images sont "enfants" de la boite DIV identifiée "eau" ; elles seront positionnées en absolu dans cette boite en fonction de leurs valeurs pour les propriétés top & left.
Il est un peu compliqué.
Lisez le attentivement et vous apprendrez beaucoup sur les possibilités de modification du DOM initial grâce à JS.
function ajout()
{
var x ; var y;
x =Math.floor(Math.random()*90);
y =Math.floor(Math.random()*300);
x =x +"%";
y=y+"px";
var parent =document.querySelector("#patchwork");
var image=document.createElement("img");
var reel = Math.random() ;
var entier = Math.ceil(reel*25) ;
switch(entier)
{
case 1 : image.src ="../images/japonaise_nue.jpg" ; break;
case 2 : image.src ="../images/black_nue.jpg" ; break;
case 3 : image.src ="../images/seins_nus.jpg" ; break;
...
case 25 : image.src ="../images/bikini28.jpg" ; break;
} // fin switch
image.style.left =x;
image.style.top = y;
parent.appendChild(image);
} // fin fonction ajout
var routine = setInterval(ajout,1000);
Attention la largeur du conteneur DIV est exprimé en %. Donc le "left" de chaque image doit être un pourcentage !
var routine = setInterval(ajout,1000) : l'appel régulier de la fonction ajout est identifié "routine".
Donc pour mettre fin à cet appel régulier de cette fonction, il suffit d'exécuter la commande <clearInterval(routine).
Il s'agit de méthodes de l'objet window (objet qui peut être sous-entendu en tant qu'objet racine).
Ces deux méthodes sont appelées "minuteurs" ou "timers".
Ne confondez pas setInterval(fonction, fréquence) avec setTimeOut(fonction, délai).
Dans le premier cas il s'agit d'un appel régulier d'un fonction alors que dans le deuxième cas il s'agit d'un appel unique différé
d'un certain délai : traitement asynchrone.
Pendant longtemps la seule solution pour effectuer un traitement asynchrone en JS était d'utiliser la méthode setTimeOut().