Le Javascript est désactivé sur votre poste !
Donc le bouton de commande est inopérant.
Pour redémarrer l'animation cliquez sur le bouton "actualiser la page" dans la barre de commandes !

Javascript : recharger / rediriger

Rappels HTML

La balise meta refresh permet le rechargement et la redirection.

Rechargement

Si, par exemple, vous voulez que cette page soit rechargée automatiquement toutes les 10 secondes il suffit d'écrire l'instruction HTML suivante dans la partie HEAD :

<meta http-equiv ="Refresh" content ="10" />

Le rechargement automatique est à éviter surtout si la page est lourde (beaucoup d'images) puisqu'il se traduit par une requête auprès du serveur qui héberge le site.

Redirection

Si par exemple, vous voulez qu'au bout de 5 secondes il y ait redirection automatique vers la page "menu" de ce tuto, Il suffirait d'écrire dans la partie HEAD :

<meta http-equiv="refresh" content="5;debutant_menu.htm">

Remarquez que l'attribut content contient deux paramètres : nombre de secondes avant redirection et la page cible.

Recharger contrôlé avec JavaScript

L'inconvénient avec HTML c'est que le rechargement ou la redirection sont automatiques.

Rechargement contrôlé

Maintenant si vous voulez que le rechargement ne soit pas automatique mais contrôlé par l'internaute vous devez utiliser JavaScript.

Ci-dessous une animation SVG !

Le code SVG

<svg width="50%" height="auto" viewBox ="0 0 400 400" > <rect x="0" y="0" width="100" height="100" fill ="green" > <animateTransform attributeName="transform" type="translate" from="0,0" to ="400,400" begin="0s" dur="10s" restart ="never" fill ="freeze"/> </rect> </svg>

L'attribut repeatCount est absent donc il n'y a pas de répétition automatique de l'animation SVG ; elle n'est exécutée qu'une fois !

Le code HTML dans la partie HEAD

<noscript> <p class ="remarque">Le Javascript est désactivé sur votre poste ! <br>Donc le bouton de commande est inopérant. <br>Pour redémarrer l'animation cliquez sur le bouton "actualiser" du navigateur ! </p> </noscript>

Sur tous les navigateurs il est possible de désactiver JavaScript. C'est souvent le cas pour les postes dans de nombreuses entreprises.
Selon une étude récente moins de 1% des utilisateurs ont désactivé JavaScript.
Pour que le code de votre page tienne compte de cette situation il faut utiliser la balise HTML noscript

Si JavaScript est désactivé le navigateur exécute les instructions HTML contenues à l'intérieur du conteneur NOSCRIPT.
Dans notre exemple il explique à l'internaute qu'il faut "actualiser" la page pour redémarrer l'animation en utilisant une commande du navigateur.

Le code HTML dans la partie BODY

<button onclick ="fstart()">Redémarrez l'animation SVG ! </button>

Le script

		function fstart() 
			{location.reload(); }

C'est une façon très classique d'appeler une fonction JavaScript à partir du HTML.
On dit qu'on utilise le "gestionnaire d'événements de HTML".
En guise d'attribut on peut naturellement utiliser d'autres événements : onmouseover, onload, onmouseout, onchange, etc.

Redirection contrôlée avec JavaScript

L'inconvénient avec HTML c'est que la redirection est automatique.

Mais si vous voulez coder l'algorithme du genre : "si condition VRAI afficher "page1.htm" sinon afficher "page2.htm" alors on parle de redirection conditionnelle. HTML ne sait pas faire car les conditions n'existent pas en HTML ; il faut programmer en JavaScript !

Exemple de redirection conditionnelle traitée avec JavaScript

En fonction du choix dans une liste déroulante il y affichage d'une page différente mais toujours avec une jolie photo ...

Préférez vous une belle plagiste en bikini ou en trikini ou en monkini voire en burkini (lol) ?

Le code HTML correspondant

... <select onchange ="faiguillage()" size = "4" > <option value ="bikini">En bikini</option> <option value ="trikini">En trikini</option> <option value ="monokini">En monokini</option> <option value ="burkini">En burkini</option> </select> ...

Une liste déroulante , emploi du gestionnaire d'événement : attribut onchange.

Le script correspondant

	function faiguillage() 
	{
		var choix = document.querySelector("select");
		switch(choix.value)
			{
				case "bikini" : location.href ="bikini.htm" ; break ;
				case "trikini" : location.href ="trikini.htm" ; break ;
				case "monokini" : location.href ="monokini.htm" ; break ;
				case "burkini" : location.href ="burkini.htm" ; break ;
			} //fin switch
	} // fin fonction

Notez bien la syntaxe : location.href ="url de la page".
On utilise donc la propriété href de l'objet location.

Problème : la nouvelle page ne s'affiche dans la même fenêtre.

Redirection en JavaScript : deuxième solution

Heureusement il y a une autre solution : la méthode open() de l'objet window
Je rappelle que window est l'objet racine donc il n'est pas obligatoire de l'écrire dans l'instruction.
Ainsi on écrit en général alert() et non pas window.alert() ...

Préférez vous une belle plagiste en bikini ou en trikini ou en monkini voire en burkini (lol) ?

Le code HTML de la 2ième solution

<select onchange ="fchoix()" size = "4" id ="choix"> <option value ="bikini">En bikini</option> ... </select>

Le script de la 2ième solution

	function fchoix() 
	{
		var choix = document.getElementById("choix");
		switch(choix.value)
			{
				case "bikini" : window.open("bikini.htm") ; break ;
				case "trikini" :window.open("trikini.htm") ; break ;
				case "monokini" :window.open("monokini.htm") ; break ;
				case "burkini" :window.open("burkini.htm") ; break ;
			} //fin switch
	} // fin fonction

La fonction JavaScript se nomme fchoix.

La liste est référencée dans la fonction JS avec la méthode getElementById.
Dans le choix multiple emploi de la méthode open de l'objet window qui ouvre la nouvelle page dans un nouvel onglet.
Retour menu