Apprendre à coder sur pierre-giraud.com

DES COURS COMPLETS ET GRATUITS POUR TOUS

SOMMAIRE

Introduction

  1. Présentation du cours
  2. Introduction au JavaScript
  3. Environnement de travail

Les bases en JavaScript

  1. Où écrire le JavaScript
  2. Syntaxe et commentaires
  3. Découverte des variables
  4. Les types de valeurs
  5. Opérations sur les variables
  6. La concaténation
  7. Présentation des conditions
  8. Les conditions if, if...else, if...else if...else
  9. Opérateurs logiques
  10. Evaluation / Simplification des conditions
  11. Conditions ternaires
  12. Switch
  13. Les boucles
  14. Découverte des fonctions
  15. Test n°1

Les objets en JavaScript

  1. Définition et découverte
  2. Valeurs primitives et objets
  3. Créer des objets
  4. Les méthodes de l’objet String
  5. Les méthodes de l’objet Number
  6. Découverte de l’objet Array
  7. Les méthodes de l’objet Array
  8. Découverte de l’objet Date
  9. Les méthodes de l’objet Date
  10. L’objet Math et ses méthodes
  11. Test n°2

Notions avancées sur les fonctions

  1. La portée en JavaScript
  2. Les fonctions anonymes
  3. Les fonctions auto-invoquées
  4. Les closures JavaScript
  5. Test n°3

Le DOM HTML

  1. Découverte du DOM HTML
  2. Accéder à un élément HTML
  3. Modifier du contenu HTML
  4. Ajouter et insérer des éléments HTML
  5. Modifier ou supprimer des éléments HTML
  6. Naviguer dans le DOM
  7. Les évènements en JavaScript
  8. AddEventListener()
  9. Propagation des évènements
  10. L'objet Event
  11. Test n°4

Le BOM - Browser Object Model

  1. Le BOM et l'objet Window
  2. L'objet Screen
  3. L'objet Navigator
  4. L'objet Location
  5. L'objet History
  6. Test n°5

Les expressions régulières

  1. Découverte des regex en JavaScript
  2. Recherches et remplacements
  3. Les quantifieurs et les options
  4. Les classes de caractères et les méta-caractères
  5. Test n°6

JavaScript et formulaires

  1. Rappels sur les formulaires en HTML
  2. Validation HTML des formulaires
  3. Validation JavaScript des formulaires
  4. Test n°7

L'élément HTML canvas

  1. Découverte de l'élément canvas
  2. Dessiner des rectangles
  3. Dessiner des lignes
  4. Dessiner des arcs de cercle
  5. Créer des dégradés
  6. Insérer du texte et des images
  7. Incliner un dessin
  8. Test n°8

Notions avancées

  1. Gestion du délai d'exécution
  2. La gestion des erreurs
  3. Le mode strict
  4. Test n°9

Conclusion

  1. Conclusion - Aller plus loin

LA METHODE JAVASCRIPT ADDEVENTLISTENER()

Présentation de la méthode JavaScript addEventListener()

La méthode addEventListener() va nous permettre de lier du code à un évènement. On parlera alors de gestionnaire d’évènements.

Le code sera alors exécuté dès le déclenchement de l’évènement.

Cette méthode appartient à l’objet Element et va avoir besoin de deux arguments pour fonctionner : le nom de l’évènement déclencheur de l'action et le code relatif à l’action à effectuer.

Les événements vont une nouvelle fois avoir des noms similaires aux attributs HTML mais ne vont plus être précédés du « on » (par exemple, onclick devient click).

Voyons immédiatement comment fonctionne cette nouvelle méthode à travers des exemples simples.

Un premier exemple d’utilisation de la méthode JavaScript addEventListener()

Essayer ce code !

Rien de bien compliqué ici, on se contente de faire la même chose que dans la partie précédente mais en utilisant cette fois-ci addEventListener().

On passe donc un nom d'évènement en premier argument de la méthode addEventListener() puis le nom d’une fonction à exécuter en second argument.

J’attire ici votre attention sur le fait qu’on ne précise pas l’habituel couple de parenthèses après notre fonction ici afin que celle-ci ne s’exécute pas immédiatement mais seulement après le déclenchement de l’évènement (le clic sur notre paragraphe).

Finalement, on crée notre fonction en soi qui ici modifie le contenu et la couleur du texte à l’intérieur de notre paragraphe après qu’un utilisateur ait cliqué dessus.

On aurait également tout à fait pu utiliser une fonction anonyme en second argument de notre méthode addEventListener(), cependant cela aurait été beaucoup moins clair et lisible.

Regardez plutôt l’exemple ci-dessous qui produit exactement le même résultat que précédemment pour vous en convaincre.

Utilisation de addEventListener() avec une fonction anonyme en JavaScript

Essayer ce code !

Pourquoi utiliser la méthode addEventListener() ?

L’un des grands avantages de la méthode addEventListener() est de pouvoir lier plusieurs gestionnaires d’évènements de même type sur un élément HTML.

Par exemple, on va pouvoir afficher différents messages suite à un clic, ce qui aurait été impossible sans addEventListener().

On peut lier plusieurs évènements à un élément avec addEventListener()

Dans l’exemple ci-dessus, dès qu’un utilisateur clique sur notre paragraphe, les deux fonctions liées à notre évènement vont être exécutées à la suite et donc deux boîtes de dialogue vont apparaître l’une après l’autre.

Premier évènement géré par addEventListener() en JavaScript

Deuxième évènement géré par addEventListener() en JavaScript

Essayer ce code !

La méthode addEventListener() va également nous permettre de lier plusieurs évènements différents à un même élément HTML.

Par exemple, on va pouvoir exécuter un code lorsqu’un utilisateur déplace le curseur de sa souris sur un élément et un autre code lorsqu’il reste cliqué dessus.

Pour faire cela, nous allons utiliser respectivement les deux évènements mouseover et mousedown.

Utilisation de addEventListener() et des évènements mousedown et mouseover

Notre paragraphe change suite à l’évènement JavaScript mouseover

Notre élément HTML est modifié par l’évènement JavaScript mousedown

Essayer ce code !

Rien de nouveau ici : on crée nos deux gestionnaires d'évènements avec une fonction pour chacun qui ne s’exécutera que lors du déclenchement de l’évènement choisi.

Si vous avez essayé ce code, cependant, vous remarquez qu’une fois qu’on a passé notre souris sur le paragraphe ou une fois celui-ci cliqué, il garde les propriétés liées à l’évènement en question même lorsqu’on relâche le clic de la souris ou qu’on fait sortir le curseur de la souris.

Vous remarquez également que si vous rentrez à nouveau dans l’élément ensuite le texte change à nouveau.

Cela est tout à fait normal puisque vous déclenchez à nouveau l’évènement mouseover.

Si vous souhaitez rendre son comportement d’origine à notre paragraphe une fois les évènements déclenchés, dans cette situation, vous devrez utiliser également les évènements mouseout et mouseup.

L'évènement mouseout correpond à l’évènement « l’utilisateur déplace le curseur de sa souris en dehors d’un élément » tandis que mouseup se déclenche lorsque « l’utilisateur relâche le clic ».

Voyons en pratique comment on va s’y prendre :

On utilise les évènements mouseout et mouseup pour créer un reset des effets de mouseover et mousedowwn en JavaScript

Essayer ce code !

Dans cet exemple, nous avons attaché des fonctions « reset » dont le rôle est de rendre les valeurs et l’aspect d’origine à notre paragraphe lorsque les évènements mouseout et mouseup se produisent.

Comme les évènements mouseout et mouseup sont les évènements inverses de mouseover et mousedown, au final, le paragraphe reprend sa forme initiale dès qu'on relâche le clic de souris ou dès que l’on déplace notre curseur en dehors.

Chapitre précédent

Chapitre suivant