Génération de HTLM avec Javascript

HTML est un langage de balisage et non pas un langage de programmation.
HTML ne connaît ni les variables, ni les boucles, ni les fonctions !
Heureusement rien n'interdit d'intégrer du code HTML dans un script grâce à la méthode write de l'objet document.
Le paramètre de la méthode document.write doit être une instruction HTML valide et entre quotes.

Génération d'un tableau HTML

Nombre de lignes précisé par le visiteur.
Exemple 1

Le script correspondant

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>"); 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>");

Commentaire

C'est magique !
Si vous avez saisi 2 le tableau comprendra 2 lignes. Si vous avez saisi 30 il comprendra 30 lignes.
Si vous avez saisi 60 il sera limité à 50 lignes ; il y a en effet un test qui limite le nombre de lignes.
Donc désormais le code HTML dépend de la valeur d'une variable JavaScript !
On pourrait complexifier le code : nombre variable de lignes mais aussi nombre variable de colonnes ...

Générer une table de multiplication

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

Le script correspondant

var ventier = prompt("tapez un entier compris entre 1 et 9") ; if (ventier >9 ) {ventier =9 ; alert("saisie plafonnée à 9"); } document.write("<h3>la table de multiplication par : " + ventier +"</h3>"); document.write("<table>"); document.write("<tr>"); document.write("<th>" + ventier + " fois</th><th>donne</th>"); document.write("</tr>"); for (i=1; i<=10; i++) { produit = ventier *i ; document.write("<tr>"); document.write("<td>" + i + "</td>"); document.write("<td>" + produit + "</td>"); document.write("</tr>"); } document.write("</table>");

Commentaire

Dans le tableau précédents les contenus des cellules étaient des éléments constants.
Ici on affiche dans certaines cellules des variables (ventier, produit) ou des expressions mixant des éléments variables et des éléments constants. Par exemple : la table de multiplication par : " + ventier
Dans ce cas les éléments constants (balise HTML et texte) doivent être entre quotes !

Générer une instruction LINK

Si l'écran est de petite taille il faut rediriger vers une autre feuille de style externe.
Il faut donc produire via JavaScript une instruction LINK dans la partie HEAD !
Testez sur votre ordinateur puis sur un smartphone !

Sur un grand écran la page fait 900 de large, bordurée et centrée horizontalement ; sur un petit écran la page occupe tout l'écran et la couleur de fond est vert.

Ne simulez pas un smartphone avec votre PC en réduisant la fenêtre d'affichage ; ça marchera pas car dans le code on teste la largeur de l'écran !!!

Le code de l'exemple (extrait)

... <link href ="bureau.css" rel = "stylesheet" > <meta name="viewport" content= "width=device-width, user-scalable=yes" /> </head> <body> <h2>Génération d'une instruction LINK en JavaScript</h2> <script> if (screen.width < 900) { var lien =document.createElement('link'); lien.href ="mobile.css"; lien.rel ="stylesheet"; document.querySelector('head').appendChild(lien); } </script> ...

Commentaire

Code HTML : par défaut lien vers la feuille de style externe "bureau.css".

Code JS :
Si la largeur de l'écran est inférieure à 900 pixels redirection vers "mobile.css".

Ici la technique est plus ambitieuse ; on modifie le DOM de la page !

Surtout respectez la casse pour les méthodes : un E à createElement et un C à appendChild.
Retour menu