Tutoriel sur Javascript, Vue.js, jQuery.js & Node.js

Générer du HTML via JavaScript

Dans cette page je vous montre comment créer de nouveaux éléments HTML via un script JS donc enrichir le DOM de la page.
Avantage par rapport à la génération de HTML via PHP : pas de requête HTPP qui ralentit l'affichage de la page.
Limite : il faut bien sûr que l'interpréteur JS soit activé par le navigateur.

Je vais aussi présenter une innovation interessante de la dernière version de JS : les 'template strings'.

Générer du HTML avec "document.write"

La solution traditionnelle pour générer du code HTML via un script JS est d'utiliser la méthode write de l'objet document. Mais vous allez vite comprendre que cette solution est obsolète.

Exemple

Générer un tableau HTML de N lignes contenant des littéraux (valeurs fixes).
Le script correspondant ; ... <button onclick ="fgenerer()">Générer un tableau HTML !</button> <h3>Génération d'un tableau de N lignes remplis de littéraux</h3> <script> function fgenerer() { var nbre_lignes = prompt("saisir le nombre de lignes du tableau") ; if (nbre_lignes >50 ) {ventier =50 ; alert("nombre de lignes limitée à 50"); } document.write("<table style ='width : 50%; margin : auto ; border : 1px solid black' >"); for (i=0;i<=nbre_lignes; i++) { document.write("<tr>"); document.write("<td>col 1 </td>"); document.write("<td>col 2 </td>"); document.write("<td>col 3 </td>"); document.write("</tr>"); } document.write("</table>"); } </script> ...

Le code est relativement simple car on ne manipule que de littéraux (valeurs fixes) tels "col 1", "col 2", etc.

Le rendu

Notez que le bouton de commande a disparu ainsi que le titre H3 ...
C'est la faute à la méthode document.write qui supprime tout le code HTML existant avant l'appel de cette méthode.

Afficher une table de multiplication

C'est le visiteur qui précise laquelle des tables il veut afficher (table par 1 ou par 2 ... ou par 9).

Solution traditionnelle

Comme dans l'exemple précédent je vais utiliser des instructions basées sur "document.write".

Le code

La partie BODY ne comprend initialement qu'un seul élément : le bouton de commande.
Script : cette fois il faut manipuler des littéraux ("fois", "donne") mais aussi des variables (i, entier, produit).
Comme il faut concaténer des balises avec des littéraux et des variables, le script devient délicat à écrire.

Le rendu

Le titre général de la page ainsi que le bouton de commande disparaissent car écrasés par le premier "document.write()".

Deuxième solution

Principe : bâtir dans une variable un chaine tout le code HTML à générer.
Puis la partie BODY de la page récupère ce contenu en guise de DOM via la propriété innerHTML. Donc on n'utilise plus la méthode document.write().

Le code

Au départ le seul élément de BODY est le bouton de commande.
Le nouveau contenu de BODY est construit dans la variable "tableau". À chaque passage dans la boucle une ligne de contenu est rajouté dans la cette variable : tableau += "nouvelle ligne"
Notez bien la dernière instruction du script : document.body.innerHTML = tableau

Pour concaténer balises, littéraux et variables la syntaxe dévient délicate.
Il serait préférable d'utiliser les "littéraux de gabarit" (voir exemple suivant) pour éviter justement les concaténations.

Le rendu

Problème : le bouton de commande disparait mais c'est logique puisque le script réécrit toute la partie BODY de la page donc écrase l'élément initial.

Troisième solution : utiliser les 'template strings'

La version 6 de EMACScript propose les "template literals" OU "template strings" ; traduisez en français "littéraux de gabarits".

Grâce à cet outil on evite les fastidieuses concaténations ; on intègre les variables dans une chaine. Avec concaténation : "<tr><td>" + entier + "</td><td>fois " + i + "</td><td>donne " + produit + "</td></tr>" Avec des littéraux de gabarit : `<tr><td> ${entier} </td><td>fois ${i} </td><td>donne ${produit} </td></tr> `

Admettez que la deuxième solution est beaucoup plus simple.

Pour réaliser un "template string" il faut respecter des règles de syntaxe précises :
• délimiter la chaine (qui peut être multilignes) par des accents graves (altgr +7)
• intégrer dans cette chaine une ou des variables mais avec la syntaxe ${variable}

Attention les accents graves ne sont pas très visibles ; ne confondez pas avec apostrophe !

Le code avec littéraux de gabarit

Reprenons le thème "affichage d'une table de multiplication" avec utilisation cette fois des "templates strings". ... <body> <button onclick ="fgenerer()">Générer une table de multiplication</button> <div id ='affichage'></div> <script> function fgenerer() { var entier = prompt("tapez un entier compris entre 1 et 9") ; if (entier > 9 ) {entier =9 ; alert("saisie plafonnée à 9"); } var tableau = `<h3>La table de multiplication par ${entier}</h3><table> `; for (i=1; i<=10; i++) { produit = entier *i ; tableau += `<tr><td> ${entier} </td><td>fois ${i} </td><td>donne ${produit} </td></tr> `; } tableau+= `</table> `; document.getElementById('affichage').innerHTML = tableau; } </script> ...

Dans la partie BODY deux éléments initiaux : le bouton de commande et un DIV identifié "affichage" qui est vide.
Le script écrit le DOM pour la boite DIV donc le bouton de commande n'est plus écrasé.

Le rendu

Le bouton de commande ne disparait plus après l'affichage d'une table.
Demandez successivement l'affichage de la table par 2, 3, 4 etc.

Génération d'images dans une page

Nous voulons qu'un script rajoute des images dans une boite DIV.

Les méthodes createElement() et appendChild()

Pour ajouter des éléments au DOM rappelons aussi les techniques : createElement() et appendChild().
Dans l'exemple ci-dessous des images choisies de façon aléatoire sont insérées à raison d'une image par seconde afin de constituer un patchwork sexy.
Pour chaque image nouvelle il faut donner des valeurs aux attributs SRC, top & left.
Pour arrêter le processus d'insertion il suffit de cliquer sur le bouton de commande.

Le code CSS & HTML correspondant

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.

Si clic sur le bouton de commmande : deux instructions JS sont exécutées :
• arrêter la routine qui appelle régulièrement la fonction "ajout"
• suppression du bouton de commande

Le script

Attention la largeur du conteneur des images est exprimé en %. Donc le "left" de chaque image doit être un pourcentage !

On crée avec le script de nouveaux éléments de type IMG.

La démarche à chaque exécution de la fonction ajout() :
• générer de façon aléatoire un entier x inférieur à 90% et un entier y inférieur à 300px.
• créer un nouvel élément de type IMG avec la méthode createElement
• Attribuer à cet élément l'attribut SRC
• Attribuer deux propriétés de style au nouvel élément (top & left)
• Insérer cette nouvelle image avec la méthode appendChild

var routine = setInterval(ajout,1000) : l'appel régulier de la fonction ajout est identifié "routine".
Donc pour mettre fin à cet appel régulier il suffit d'exécuter la commande <clearInterval(routine) (associée à l'élément BUTTON).

Le rendu dans un nouvel onglet

Pensez à afficher la console pour observer le code HTML généré par le script.
Cliquez ici

Rappel sur SetTimeout() & setInterval()

Ne confondez pas setInterval(fonction, fréquence) avec etTimeOut(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.

SetTimeOut() est la solution traditionnelle pour faire en JS un traitement asynchrone (asynchrone : les instructions ne sont plus exécutées en fonction de leur ordre physique dans le programme).