Dans mon cas de figure, c’était un projet « Full JS » et je devais trouver un moyen d’obtenir l’adresse IP du visiteur du site à travers JavaScript.

Utiliser une API pour afficher l’adresse IP en JavaScript

C’est probablement la méthode la plus simple (sur papier).

Il existe pléthore d’API qui permettent d’afficher l’adresse IP des visiteurs de votre site et même bien plus, comme la latitude et le longitude, la région, la ville …

L’une des plus connues est ipify.org. Ipify est la plus connue et probablement la plus utilisée car elle propose une offre gratuite et simple à intégrer qui permet 1000 requêtes par mois, à l’instar de son concurrent ipapi.com.

Pour afficher l’adresse IP d’un visiteur en JavaScript avec ipify, il suffit d’utiliser le code ci-dessous:

// Il faut préalablement s'inscrire sur ipify avant d'utiliser ce code
<script type="application/javascript">
  function getIP(json) {
    document.write("My public IP address is: ", json.ip);
  }
</script>

<script type="application/javascript" src="https://api.ipify.org?format=jsonp&callback=getIP"></script>

Sauf que 1000 requêtes c’est peanuts ! Et très rapidement votre appel à l’API ne fonctionnera plus.

Utiliser Php pour créer une fonction JavaScript qui retourne l’adresse IP

Il est plus que probable qu’un codeur expérimenté 🤓 rira en voyant ce hack, mais à mon niveau je l’ai trouvé excellent et incroyablement simple à mettre en place. Le simple fait de modifier l’en-tête a permis de rendre cela possible !

Pour se faire, vous devez créer un fichier ip.php (vous pouvez le nommer comme vous le souhaiter) et nous allons y coller le code ci-dessous :

<?php
     header("Content-type: text/javascript");
?>
function getIPAddress(){ return "<?php echo $_SERVER['REMOTE_ADDR']; ?>"; }

Vous n’avez plus qu’à appeler cette page avec les balises script

<!-- Remplacez mon-chemin par le chemin où se trouver votre fichier -->   
<script type="text/javascript" src="mon-chemin/ip.php"></script>

Il ne vous reste plus qu’à appeler la fonction getIpAddress() à l’endroit où vous souhaitez afficher l’ip de vos visiteurs.

En l’état le code fonctionne parfaitement. Le seul bémol si vous l’avez testé, est que le fichier ip.php affiche la fonction en clair, et pour cause, c’est du javascript.

Autre point négatif, tout le web peut appeler la fonction getIPAddress() en faisant un lien vers cette page. Je doute que vous ayez envie de jouer les CDN. L’idéal est donc de rajouter une petite condition pour que le script s’exécute uniquement depuis votre nom de domaine.

<?php
// Remplacer s2prod.net par votre propre nom de domaine
if($_SERVER['HTTP_HOST'] === 's2prod.net') {
  header("Content-type: text/javascript");
?>
function getIPAddress(){ return "<?php echo $_SERVER['REMOTE_ADDR']; ?>"; }
<?php
} else {
  header("HTTP/1.1 403 Forbidden");
}
?>

Afficher les coordonnées GPS et la ville de vos visiteurs

Si vous souhaitez afficher les coordonnées latitude, longitude ou même la ville, vous pouvez utiliser l’objet Navigator de JavaScript. Il faudra cependant faire appel à une API de géocodage inversé comme Nomimatim, qui a la bonne idée d’être gratuite et relativement précise.

⚠️ Attention, pour que l’appel fonctionne, il faut que votre visiteur accepte la géolocalisation, dans le cas contraire, cela générera une erreur.

if (navigator.geolocation) {
  navigator.geolocation.getCurrentPosition(
    function (position) {
      const lat = position.coords.latitude;
      const lng = position.coords.longitude;

      // Appelle l'API de géocodage inversé de Nominatim
      fetch(
        `https://nominatim.openstreetmap.org/reverse?format=jsonv2&lat=${lat}&lon=${lng}`
      )
        .then((response) => response.json())
        .then((data) => {
          // Récupère le nom de la ville à partir des données renvoyées par l'API
          const ville =
            data.address.city|| data.address.town || data.address.village;
          document.write(`Vous êtes à ${ville}!`);
        })
        .catch((error) => document.write(error));
    },
    function (error) {
      document.write(error);
    }
  );
} else {
  document.write(
    "La géolocalisation n'est pas prise en charge par votre navigateur"
  );
}

Conclusion

L’appel à une API gratuite et limitée peut servir dans certains cas de figure. Personnellement je préfère la méthode fait maison pour obtenir l’adresse IP en modifiant l’en-tête avec PHP. Aucune limitation et simple à mettre à œuvre. Concernant les autres données, il faudra utiliser l’objet Navigator qui devrait faire l’objet d’une autorisation du visiteur contrairement à l’usage d’une API externe.

Je lui ai donc demandé de me transmettre un code en Vanilla JavaScript, HTML et CSS afin de créer un générateur de mot passe aléatoire.

Pour les impatients, vous pouvoir le démonstration du code ici et copier le ici

1. Contextualisez votre demande à ChatGPT

Tu es un développeur web et tu dois me créer un générateur de mot de passe en javascript

Voici un exemple de générateur de mot de passe en JavaScript :

function generatePassword(length) {
  var password = "";
  var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789!#$%&()*+,-./:;<=>?@[]^_`{|}~";

  for (var i = 0; i < length; i++) {
    password += possible.charAt(Math.floor(Math.random() * possible.length));
  }
  return password;
}

Cette fonction prend en paramètre la longueur souhaitée pour le mot de passe et retourne un mot de passe aléatoire généré en utilisant les caractères possibles définis dans la variable « possible ». Vous pouvez également ajouter ou supprimer des caractères à cette variable pour personnaliser les caractères utilisés pour générer le mot de passe.

2. Affinez votre demande à ChatGPT

Peux-tu me créer un formulaire qui exécutera cette fonction et qui affichera le mot de passe généré

Voici un exemple de formulaire HTML qui exécute la fonction de générateur de mot de passe lorsque l’utilisateur soumet le formulaire, et qui affiche le mot de passe généré dans une zone de texte :

<form onsubmit="generateAndDisplayPassword()">
  <label for="length">Entrez la longueur souhaitée pour le mot de passe :</label>
  <input type="number" id="length" name="length" min="1">
  <input type="submit" value="Générer le mot de passe">
</form>

<br>

<textarea id="password" readonly></textarea>

<script>
  function generateAndDisplayPassword() {
    var length = document.getElementById("length").value;
    var password = generatePassword(length);
    document.getElementById("password").innerHTML = password;
  }
  
  function generatePassword(length) {
  var password = "";
  var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789!#$%&()*+,-./:;<=>?@[]^_`{|}~";

  for (var i = 0; i < length; i++) {
    password += possible.charAt(Math.floor(Math.random() * possible.length));
  }
  return password;
  }
</script>

Ce code crée un formulaire qui demande à l’utilisateur de saisir la longueur souhaitée pour le mot de passe. Lorsque l’utilisateur soumet le formulaire en cliquant sur le bouton « Générer le mot de passe », la fonction « generateAndDisplayPassword » est exécutée. Cette fonction utilise la longueur saisie par l’utilisateur pour générer un mot de passe en utilisant la fonction de générateur de mot de passe définie, puis affiche le mot de passe généré dans la zone de texte avec l’ID « password ».

Le code me paraît tout à fait cohérent par rapport au peu d’information que je lui ai fourni, je m’étonne juste de l’utilisation de var au lieu de let pour la déclaration des variables, mais cela peut être un choix de compatibilité avec les anciens navigateurs.

3. Ajout de fonctionnalités au code initial

Peux tu ajouter dans le code qui permet de prévenir du comportement par défaut des formulaires

Oui, voici à quoi pourrait ressembler le code HTML avec la prévention du comportement par défaut des formulaires :

<form onsubmit="generateAndDisplayPassword(); return false;">
  <label for="length">Entrez la longueur souhaitée pour le mot de passe :</label>
  <input type="number" id="length" name="length" min="1">
  <input type="submit" value="Générer le mot de passe">
</form>

<br>

<textarea id="password" readonly></textarea>

<script>
  function generateAndDisplayPassword() {
    var length = document.getElementById("length").value;
    var password = generatePassword(length);
    document.getElementById("password").innerHTML = password;
  }
  
  function generatePassword(length) {
  var password = "";
  var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789!#$%&()*+,-./:;<=>?@[]^_`{|}~";

  for (var i = 0; i < length; i++) {
    password += possible.charAt(Math.floor(Math.random() * possible.length));
  }
  return password;
  }
</script>

La ligne « onsubmit = »generateAndDisplayPassword(); return false; » dans l’élément <form> est ce qui prévient le comportement par défaut des formulaires. Lorsque l’utilisateur soumet le formulaire, la fonction « generateAndDisplayPassword » est d’abord exécutée, puis « return false » empêche le navigateur de soumettre le formulaire. Cela évite que la page ne soit actualisée et que les données saisies dans le formulaire ne soient perdues.

Je vous invite à vérifier que cette solution est adaptée à votre projet. Si cela ne répond pas à vos besoins, il existe d’autres méthodes pour prévenir le comportement par défaut des formulaires en javascript, comme event.preventDefault().

Je suis étonné qu’il ne m’ait pas proposé comme choix par défaut event.preventDefault() qui davantage utilisé de nos jours.

Peux tu ajouter un message d'erreur si le champ longueur du mot de passe n'est pas renseigné

Voici comment le code HTML pourrait être modifié pour afficher un message d’erreur si le champ de longueur de mot de passe n’est pas renseigné :

<form onsubmit="return generateAndDisplayPassword();">
  <label for="length">Entrez la longueur souhaitée pour le mot de passe :</label>
  <input type="number" id="length" name="length" min="1" required>
  <input type="submit" value="Générer le mot de passe">
</form>

<br>

<textarea id="password" readonly></textarea>
<button id="copy-button" onclick="copyPassword()">Copier le mot de passe</button>

<div id="error-message" style="color: red;"></div>

<script>
  function generateAndDisplayPassword() {
    var length = document.getElementById("length").value;
    if(!length) {
        document.getElementById("error-message").innerHTML = "Veuillez entrer une longueur pour le mot de passe";
        return false;
    }
    var password = generatePassword(length);
    document.getElementById("password").innerHTML = password;
    return true;
  }
  
  function generatePassword(length) {
  var password = "";
  var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789!#$%&()*+,-./:;<=>?@[]^_`{|}~";

  for (var i = 0; i < length; i++) {
    password += possible.charAt(Math.floor(Math.random() * possible.length));
  }
  return password;
  }
  
  function copyPassword() {
    var password = document.getElementById("password");
    password.select();
    document.execCommand("copy");
    alert("Mot de passe copié dans le presse-papiers!");
  }
</script>

Ce code ajoute une validation du champ de longueur du mot de passe dans la fonction « generateAndDisplayPassword » en utilisant l’opérateur ! pour vérifier si le champ de longueur de mot de passe est vide ou non (if(!length)). Si le champ de longueur de mot de passe est vide, un message d’erreur est affiché dans un élément de div avec l’ID « error-message » et la fonction retourne false pour empêcher la soumission du formulaire. Si le champ de longueur de mot de passe n’est pas vide, la fonction continue de générer et d’afficher le mot de passe, puis retourne true.

Note: Il est possible de utiliser l’attribut required sur l’input de type number pour vérifier que le champ est rempli lorsque le formulaire est soumis, cela évitera l’utilisation d’une fonction.

Peux-tu ajouter des checkboxes pour séparer les lettres minuscules, les lettres majuscules, les nombres, les caractères spéciaux. Afin que l'utilisateur puisse lui même choisir la complexité du mot de passe

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form onsubmit="return generateAndDisplayPassword();">
        <label for="length">Entrez la longueur souhaitée pour le mot de passe :</label>
        <input type="number" id="length" name="length" min="1" required>
        <br>
        <input type="checkbox" id="lowercase" name="lowercase" checked>
        <label for="lowercase">Inclure des minuscules</label>
        <br>
        <input type="checkbox" id="uppercase" name="uppercase" checked>
        <label for="uppercase">Inclure des majuscules</label>
        <br>
        <input type="checkbox" id="numbers" name="numbers" checked>
        <label for="numbers">Inclure des chiffres</label>
        <br>
        <input type="checkbox" id="special" name="special" checked>
        <label for="special">Inclure des caractères spéciaux</label>
        <br>
        <input type="submit" value="Générer le mot de passe">
      </form>
      
      <br>
      
      <textarea id="password" readonly></textarea>
      <button id="copy-button" onclick="copyPassword()">Copier le mot de passe</button>
      
      <div id="error-message" style="color: red;"></div>
      
      <script>
        function generateAndDisplayPassword(event) {
          event.preventDefault();
          var length = document.getElementById("length").value
       if(!length) {
              document.getElementById("error-message").innerHTML = "Veuillez entrer une longueur pour le mot de passe";
              return false;
          }
          var lowercase = "abcdefghijklmnopqrstuvwxyz";
          var uppercase = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
          var numbers = "0123456789";
          var special = "!#$%&()*+,-./:;<=>?@[]^_`{|}~";
          var possible = "";
          if(document.getElementById("lowercase").checked) {
              possible += lowercase;
          }
          if(document.getElementById("uppercase").checked) {
              possible += uppercase;
          }
          if(document.getElementById("numbers").checked) {
              possible += numbers;
          }
          if(document.getElementById("special").checked) {
              possible += special;
          }
          var password = "";
          for (var i = 0; i < length; i++) {
              password += possible.charAt(Math.floor(Math.random() * possible.length));
          }
          document.getElementById("password").innerHTML = password;
          return false;
        }
        
        function copyPassword() {
          var password = document.getElementById("password");
          password.select();
          document.execCommand("copy");
          alert("Mot de passe copié dans le presse-papiers!");
        }
      </script>
</body>
</html>

A ce moment précis, le code ci-dessus « ne fonctionne pas« . De plus, il utilise des fonctions obsolètes comme document.execCommand(). Il est préférable d’utiliser l’API Clipboard. En réalité, le code fonctionne, mais il n’a pas gardé en mémoire que je voulais qu’on prévienne le comportement par défaut des formulaire. De ce fait, lorsque j’exécute le formulaire, la page se recharge et je ne vois aucun mot de passe généré.

Le code ne fonctionne plus.

Le comportement du formulaire est resté par défaut, peux-tu corriger cela

Il y a plusieurs façons de prévenir le comportement par défaut d’un formulaire en JavaScript, mais l’une des façons les plus courantes consiste à utiliser l’événement submit de JavaScript pour écouter la soumission du formulaire, puis utiliser la méthode preventDefault() pour empêcher le comportement par défaut de soumission du formulaire.

Voici comment le code pourrait être modifié pour inclure cette fonctionnalité:

<form id="password-form">
  <label for="length">Entrez la longueur souhaitée pour le mot de passe :</label>
  <input type="number" id="length" name="length" min="1" required>
  <br>
  <input type="checkbox" id="lowercase" name="lowercase" checked>
  <label for="lowercase">Inclure des minuscules</label>
  <br>
  <input type="checkbox" id="uppercase" name="uppercase" checked>
  <label for="uppercase">Inclure des majuscules</label>
  <br>
  <input type="checkbox" id="numbers" name="numbers" checked>
  <label for="numbers">Inclure des chiffres</label>
  <br>
  <input type="checkbox" id="special" name="special" checked>
  <label for="special">Inclure des caractères spéciaux</label>
  <br>
  <input type="submit" value="Générer le mot de passe">
</form>

<br>

<textarea id="password" readonly></textarea>
<button id="copy-button" onclick="copyPassword()">Copier le mot de passe</button>

<div id="error-message" style="color: red;"></div>

<script>
  var form = document.getElementById("password-form");
  form.addEventListener("submit", function(event) {
    event.preventDefault();
    var length = document.getElementById("length").value;
    if(!length) {
        document.getElementById("error-message").innerHTML = "Veuillez entrer une longueur pour le mot de passe";
        return false;
    }
    var lowercase = "abcdefghijklmnopqrstuvwxyz";
    var uppercase = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
    var numbers = "0123456789";
    var special = "!#$%&()*+,-./:;<=>?@[]^_`{|}~";
    var possible = "";
    if(document.getElementById("lowercase").checked) {
        possible += lowercase;
    }
    if(document.getElementById("uppercase").checked) {
        possible += uppercase;
    }
    if(document.getElementById("numbers").checked) {
        possible += numbers;
    }
    if(document.getElementById("special").checked) {
        possible += special;
    }
    var password = "";
    for (var i = 0; i < length; i++) {
        password += possible.charAt(Math.floor(Math.random() * possible.length));
    }
    document.getElementById("password").innerHTML = password;
  });
  
  function copyPassword() {
    var password = document.getElementById("password");
    password.select();
    document.execCommand("copy");
    alert("Mot de passe copié dans le presse-papiers!");
  }
</script>

Ainsi, le code utilise la fonction preventDefault() pour prévenir le comportement par défaut des formulaires en javascript.

4. Lui faire remarquer l’obsolescence de son code

document.execCommand(« copy ») est dépréciée. Peux-tu me donner un code alternatif

Vous avez raison, la méthode document.execCommand("copy") pour copier le contenu dans le presse-papiers est dépréciée et n’est plus supportée par tous les navigateurs.

Une alternative courante pour copier le contenu dans le presse-papiers est d’utiliser l’API Clipboard API, qui est supportée par la plupart des navigateurs modernes. voici comment le code JavaScript pourrait être modifié pour utiliser l’API Clipboard API:

function copyPassword() {
    var password = document.getElementById("password");
    navigator.clipboard.writeText(password.value).then(function() {
      alert("Mot de passe copié dans le presse-papiers!");
    }, function(err) {
      alert("Erreur lors de la copie du mot de passe : " + err);
    });
  }

Ce code utilise la méthode navigator.clipboard.writeText() pour copier le contenu de la variable password dans le presse-papiers. La méthode renvoie une promesse, qui est résolue si la copie est réussie ou rejetée si une erreur se produit. Il est important de noter que l’API Clipboard API nécessite des autorisations spécifiques pour fonctionner.

5. Ajoutez un peu de style au générateur avec CSS

Peux m'ajouter un style css coloré avec des couleurs vives et des champs de formulaire arrondis

#password-form {
  padding: 20px;
}

#password-form input[type="text"], #password-form input[type="number"], #password-form input[type="checkbox"], #password-form input[type="submit"], #password, #copy-button {
  border-radius: 10px;
  padding: 10px;
  margin-bottom: 10px;
}

#password-form input[type="submit"] {
  background-color: #4CAF50;
  color: white;
  border: none;
  cursor: pointer;
}

#password {
  width: 100%;
  min-height: 50px;
  background-color: #f2f2f2;
}

#copy-button {
  background-color: #4CAF50;
  color: white;
  border: none;
  cursor: pointer;
}

#error-message {
  margin-top: 10px;
}

6. Code final généré par ChatGPT

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Générateur de mot passe</title>
    <style>
        #password-form {
            padding: 20px;
        }

        #password-form input[type="text"],
        #password-form input[type="number"],
        #password-form input[type="checkbox"],
        #password-form input[type="submit"],
        #password,
        #copy-button {
            border-radius: 10px;
            padding: 10px;
            margin-bottom: 10px;
        }

        #password-form input[type="submit"] {
            background-color: #4CAF50;
            color: white;
            border: none;
            cursor: pointer;
        }

        #password {
            width: 100%;
            min-height: 50px;
            background-color: #f2f2f2;
        }

        #copy-button {
            background-color: #4CAF50;
            color: white;
            border: none;
            cursor: pointer;
        }

        #error-message {
            margin-top: 10px;
        }
    </style>
</head>

<body>
    <form id="password-form">
        <label for="length">Entrez la longueur souhaitée pour le mot de passe :</label>
        <input type="number" id="length" name="length" min="1" required>
        <br>
        <input type="checkbox" id="lowercase" name="lowercase" checked>
        <label for="lowercase">Inclure des minuscules</label>
        <br>
        <input type="checkbox" id="uppercase" name="uppercase" checked>
        <label for="uppercase">Inclure des majuscules</label>
        <br>
        <input type="checkbox" id="numbers" name="numbers" checked>
        <label for="numbers">Inclure des chiffres</label>
        <br>
        <input type="checkbox" id="special" name="special" checked>
        <label for="special">Inclure des caractères spéciaux</label>
        <br>
        <input type="submit" value="Générer le mot de passe">
    </form>

    <br>

    <textarea id="password" readonly></textarea>
    <button id="copy-button" onclick="copyPassword()">Copier le mot de passe</button>

    <div id="error-message" style="color: red;"></div>

    <script>
        var form = document.getElementById("password-form");
        form.addEventListener("submit", function (event) {
            event.preventDefault();
            var length = document.getElementById("length").value;
            if (!length) {
                document.getElementById("error-message").innerHTML = "Veuillez entrer une longueur pour le mot de passe";
                return false;
            }
            var lowercase = "abcdefghijklmnopqrstuvwxyz";
            var uppercase = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
            var numbers = "0123456789";
            var special = "!#$%&()*+,-./:;<=>?@[]^_`{|}~";
            var possible = "";
            if (document.getElementById("lowercase").checked) {
                possible += lowercase;
            }
            if (document.getElementById("uppercase").checked) {
                possible += uppercase;
            }
            if (document.getElementById("numbers").checked) {
                possible += numbers;
            }
            if (document.getElementById("special").checked) {
                possible += special;
            }
            var password = "";
            for (var i = 0; i < length; i++) {
                password += possible.charAt(Math.floor(Math.random() * possible.length));
            }
            document.getElementById("password").innerHTML = password;
        });

        function copyPassword() {
            var password = document.getElementById("password");
            navigator.clipboard.writeText(password.value).then(function () {
                alert("Mot de passe copié dans le presse-papiers!");
            }, function (err) {
                alert("Erreur lors de la copie du mot de passe : " + err);
            });
        }

    </script>
</body>

</html>

7. Conclusion

Le code n’est pas parfait, mais il fonctionne. Il m’aura fallu 6 échanges avec l’IA et quelques tests en live, soit moins de 10 minutes pour « coder » et tester.

Beaucoup pensent que l’IA va en mettre plusieurs au chômage. Personnellement je vois cela comme un outil qui permet de gagner un temps considérable! Là, où il fallait 3 ou 4 heures de développement, il en faut moins de 10 minutes.

Cependant, il y a peut-être une corporation qui a du souci à se faire, c’est celle du e-learning. ChatGPT répond à mes attentes bien au-delà de n’importe quelle formation en ligne !

Un événement est la spécification (essentiellement un objet créé par le navigateur et JavaScript) de quelque chose d’important qui s’est produit. Des exemples d’événements sont le clic, l’envoi, le keyup, etc. En JavaScript, tous les noms d’événements sont spécifiés en minuscules. Un gestionnaire d’événement (essentiellement une fonction) est un ensemble d’instructions (code) qui gère l’événement.

Le tableau ci-dessous énumère les événements les plus couramment utilisés et les attributs de balises qui leur sont associés :

Le tableau ci-dessous énumère les attributs des événements et leurs balises correspondantes en HTML :

Le processus consistant à associer un gestionnaire d’événements à un événement est connu sous le nom d’enregistrement. Il existe trois façons d’enregistrer un gestionnaire d’événements dans le modèle d’événement DOM.

1. La première consiste à attribuer le script de gestion d’événements à un attribut de balise d’événement, comme indiqué ci-dessous :

// Au clic du bouton on exécutera la fonction func1()
<input type=”button” value=”Cliquez ici” onclick=”func1( );” />

Dans le code ci-dessus, le gestionnaire d’événement func1 est attribué à l’attribut d’événement onclick d’un bouton.

2. La deuxième façon consiste à affecter le gestionnaire d’événement à la propriété d’événement de l’élément, comme indiqué ci-dessous :

// Au clic de l'élément on exécutera la fonction func1()
document.getElementById(ID_de_Element).onclick = func1;

3. Enfin la troisième façon et la plus communément utilisée depuis ES6 et d’utiliser ce qu’on appelle un écouteur d’événement.

// Au clic de l'élément on exécutera la fonction func1()
const element = document.querySelector("ID_ou_Class_Element");
element.addEventListener('click', func1);

Les trois manières fonctionnent et selon le contexte vous pourrez être amené à rencontrer et utiliser l’une des trois. Mais gardez en mémoire que c’est la dernière façon qui est préconisée.