Evènements avec HTML

1 . Introduction

<!-- blank line --> <figure class="video_container"> <iframe width="560" height="315" src="https://www.youtube.com/embed/TYK-6Zlrag8" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> </figure> <!-- blank line --> Vous savez déjà peut-être que Javascript est un langage utilisé pour gérer les évènements sur une page web. Nous avons donc d’un côté notre page HTML avec laquelle on veut interagir et de l’autre côté, notre fichier .js. Dans ce tuto, nous allons voir comment lier nos événements programmés en JS, avec les éléments de notre page HTML. En JS, il a un objet appelé `document`. Lorsqu’une page HTML est chargée sur un navigateur, la page devient un document. L’objet document à des méthodes (fonctions) prédéfinies permettant plein de choses. La première chose qui va nous intéresser est le getElementById.

2 . Les id HTML

Lorsque l’ont créer une balise HTML, on a la possibilité de spécifier l’attribut id. Cet attribut va nous permettre de déterminer à quel élément de la page souhaitons-nous associer la page. Pour spécifier un id dans une balise, on procède de la manière suivante : ```html <h1 id="Titre1">Titre 1 :</h1> ``` Nous venons d’ajouter l’id Titre1 à notre titre.

3 . getElementById

Comme dit précédemment, la méthode getElementById va être clef. Comme son nom l’indique, elle va permettre de sélectionner l’élément sur lequel s’applique notre code. Si l’on veut interagir avec le titre de la section d’avant, on devra alors commencer notre code par : ```html document.getElementById("Titre1") ```

4 . Quelques interactions

Maintenant que l’on arrive à sélectionner ce avec quoi on veut pouvoir interagir, il faut maintenant déterminer l’action que l’on veut effectuer. On utilise pour ça des gestionnaires d’événements. Ce sont ce qui vont définir quelle action doit être effectuer sur l’élément sélectionner pour déclencher le code. Il en existe une grande quantité et se placent à la suite de notre code précédent. ```html document.getElementById("Titre1").gestionnaire ``` Voyons maintenant quelques-uns des plus importants d’entre eux. .onclick : déclenche le code lorsque l’élément est cliqué. .ondblclick : déclenche le code lorsque l’élément est double-cliqué. .onscroll : déclenche le code lorsque l’élément est scrollé. .onfocus : déclenche le code lorsque l’utilisateur donne le focus clavier à l’élément. .onkeypress : déclenche le code lorsqu’une touche du clavier est pressée.

5 . Script de l'évenement

Maintenant que nous avons défini ce qui doit déclencher notre script, il faut créer ce script. Pour cela il vous suffit de créer la fonction que vous souhaitez exécuter et de l’associer à votre événement. Voyons avec un exemple. On veut qu’un pop-up s’affiche lorsque l’on clique sur le titre de la page : ```html function monScript() { alert("Bonjour"); } document.getElementById("Titre1").onclick = function() {monScript()} ``` Et voilà, c’est aussi simple que ça !