Tutoriel JavaScript & jQuery - sommaire

Vous pouvez me contacter via Facebook (questions, critiques constructives) : page facebook relative à mon site

Générer du HTML ou du SVG via JavaScript

Générer du HTML

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.

Méthode WRITE

Le plus simple pour générer du HTML avec JavaScript est d'utiliser la méthode write de l'objet document.

Exemple 1 : générer un tableau HTML

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 ...

Exemple 2 : 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 :

Dans le tableau précédent les contenus des cellules étaient des éléments constants.
Ici on affiche dans certaines cellules des variables ou des expressions mixant des éléments variables et des éléments constants.
Dans ce cas les éléments constants (balise HTML et texte) doivent être entre quotes !

Limites de la méthode

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 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 !

L'astuce aurait été ici :

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.

Essayez ce code corrigé !

Méthodes createElement et appendChild

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".

Testez l'exemple

Le code CSS & HTML correspondant

Si les nouvelles images sont "enfants" du DIV identifiée "eau" elles seront positionnées en absolu par rapport à cette boite en fonction de leurs valeurs pour les propriétés top & left !!!

Le script correspondant

var i =1; 
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("#eau");
	var image=document.createElement("img");
	var reel = Math.random() ;
	var entier = Math.ceil(reel*14) ; 
	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 13 : image.src ="../images/bikini4.jpg" ; break;
			case 14 : image.src ="../images/catcheuse.jpg" ; break;
		} // fin switch 
	image.style.left =x; 
	image.style.top = y;
	parent.appendChild(image); // ajout d'un enfant à parent
	i++; 
	if(i<=42) setTimeout(ajout,500); // fonction appelée 2 fois par seconde
} // fin fonction
ajout(); // premier appel de la fonction

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

On crée avec le script un nouvel élément HTML (une image) sans pour autant effacer ceux qui existent déjà (ce que ferait l'instruction document.write argumentée avec "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 (génération d'un entier compris entre 1 et 14 puis choix d'un chemin parmi 14)
• Affecter deux propriétés de style au nouvel élément (top & left)
• Insérer ce nouveau noeud à un endroit précis avec la méthode appendChild ; ici dans la boite DIV identifiée "eau"

Notez la récursivité : la fonction ajout() s'appelle elle-même toutes les 500 milli-secondes.

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

Snap SVG

Vous savez que SVG est un format d'image vectorielle. Il s'agit d'un langage XML donc d'un langage de balisage comme le HTML.
On ne peut pas générer du SVG dans une page avec JavaScript de base mais il existe des frameworks écrits en JavaScript qui ont été imaginé pour générer du SVG.
La plus célèbre de ces librairies est Snap SVG. Snap SVG est une bibliothèque JavaScript open source d’Adobe.
Cette librairie a été écrite par Dmitry Baranovskiy qui avait écrit auparavant Raphael. Snap SVG est donc la suite de Raphael.

Si vous êtes intéressé par ce framework visitez dans ce site le tuto "dessiner avec SVG".