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 la page

Dans cette page je vais évoquer le rechargement de la page en Javascript. Mais je vais aussi en profiter pour évoquer une balise HTML peu connue : NOSCRIPT et vous expliquer son intérêt.

Je vais faire aussi une "piqure de rappel" sur l'appel des fonctions JS en HTML : la bonne et la mauvaise méthodes.

Contrôle par l'internaute d'une animation SVG

Attention l'animation SVG contenue dans cette page fonctionne avec tous les navigateurs récents sauf Edge ...

Vous savez sans doute que vous pouvez programmer un rechargement régulier d'une page via le HTML.
Si, par exemple, vous voulez que la 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" />

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

Ci-dessus une animation SVG !

Le code de la page

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

Dans la partie BODY:

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

C'est une façon très classique d'appeler une fonction JavaScript à partir du code 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.

Le script

<script> function fstart() {location.reload(); } </script>

Pour recharger la page courante en JavaScript il faut utiliser la méthode reload() de l'objet location.
Retour menu