Vous pouvez me contacter via Facebook pour questions & suggestions :
Page Facebook relative à mon site
HTML est un langage de balisage et non pas un langage de programmation.
HTML ne connait ni les variables, ni les boucles, ni les fonctions ! Heureusement rien n'interdit d'intégrer du code HTML dans un script.
Le plus simple pour générer du HTML avec JavaScript est d'utiliser la méthode write de l'objet document.
Nombre de lignes du tableau à préciser par le visiteur. Exemple 1
Le script correspondant ;
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 ...
C'est le visiteur qui précise laquelle des tables il veut afficher (table par 1 ou par 2 ... ou par 9)
Le script correspondant :
Dans le tableau précédent les contenus des cellules étaient des éléments constants.
Ici on affiche dans certaines cellules des contenus de variables.
Les noms des balises HTML et les littéraux (valeurs fixes) doivent être entre quotes (simples ou doubles).
Avec les outils de développement du navigateur (Chrome ou Firefox), on peut observer le code HTML généré par le script.
La commande à produire pour voir le code HTML généré : outils / plus d'outils / outils de développement / éléments
Attention l'exécution de la première instruction document.write provoque l'effacement de la page !!!
Donc si vous voulez rajouter des éléments HTML à une page chargée et sans pour autant effacer les anciens éléments HTML il ne faut surtout pas utiliser
cette méthode !
Ci-dessous exemple de ce qu'il ne faut pas faire en matière de codage !
Testez le programme bogué
Le code correspondant :
Les 4 images sont chargées et affichées via HTML.
Un clic sur le bouton de commande exécute une instruction document.write qui efface tous les éléments qui étaient affichés et en particulier
les quatre images.
Conclusion : il n'est plus possible d'utiliser document.write une fois que la page est chargée !
La solution ci-dessous :
Dès qu'on clique sur le bouton de commande sa légende change ... et les images restent affichées puisqu'on n'utilise plus "document.write".
Notez l'emploi du mot réservé this dans l'instruction JS.
Pour créer de nouveaux éléments HTML dans une page la solution orthodoxe est d'utiliser deux méthodes : createElement & appendChild..
Dans l'exemple ci-dessous 42 images choisies de façon aléatoire sont insérées et positionnées de façon tout aussi aléatoire dans une boite de fond "aqua".