Comment insérer un code JavaScript dans HTML ?

Il a deux façons de lier le code JavaScript au code HTML :

  1. en plaçant le code JavaScript dans un fichier séparé et en incluant ce fichier dans le code HTML à l’aide de l’élément script.
  2. en insérant directement du code JavaScript à l’intérieur du code HTML (encore à l’aide de l’élément script )


Dans un navigateur, JavaScript ne fait rien « tout seul ». Il a besoin d’être lancé depuis les pages web HTML. Pour appeler du code JavaScript depuis votre document HTML, vous aurez besoin de l’élément <script>. Il y a deux méthodes pour utiliser script : une qui sert lorsqu’on souhaite utiliser un script contenu dans un fichier tiers et une qui sert lorsqu’on intègre directement le code du script dans la page web.

Faire référence à un script externe

Généralement, un script est écrit dans un fichier .js à part. Pour exécuter un script depuis un fichier dans la page web, il suffira d’utiliser <script> avec un attribut src pointant vers le fichier du script en utilisant l’URL du fichier :

HTMLCopy to Clipboard

<script src="chemin/vers/le/script.js"></script>

Inscrire le code JavaScript dans le document HTML

Il est également possible d’insérer du code JavaScript directement dans la balise <script> sans fournir d’attribut src.

HTMLCopy to Clipboard

<script>
  window.addEventListener("load", function () {
    console.log(
      "Cette fonction est exécutée une fois quand la page est chargée.",
    );
  });
</script>

Installer GSAP

https://gsap.com/resources/Wordpress#installation

// wait until DOM is ready
document.addEventListener("DOMContentLoaded", function(event){

 console.log("DOM loaded");

 //wait until images, links, fonts, stylesheets, and js is loaded
 window.addEventListener("load", function(e){

  //custom GSAP code goes here
  // This tween will rotate an element with a class of .my-element
   gsap.to('.my-element', {
    rotation: 360,
    duration: 2,
    ease: 'bounce.out'
   })

   console.log("window loaded");
  }, false);

});

Pour wordpress suivre la démarche du site :

https://wplearninglab.com/wp-enqueue-script-to-add-javascript-wordpress

is loading …

Intégrer javascript sur wordpress

is loading …

Vidéo librairie d’animation

TEST