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

LES EVENEMENTS EN JAVASCRIPT

Définition et découverte des événements

Les évènements correspondent à des actions effectuées soit par un utilisateur, soit par le navigateur lui-même.

Par exemple, lorsqu’un utilisateur clique sur un bouton HTML ou lorsque le navigateur va finir de charger une page web, on va parler d’événement.

Parfois, on va vouloir « attacher » une action spécifique à un évènement, comme par exemple modifier la taille des textes sur une page lorsque l’utilisateur clique sur un bouton.

Pour faire cela, nous allons utiliser des attributs HTML de « type » évènement, et ensuite en JavaScript créer le code correspondant à l’action que l’on souhaite attacher à notre évènement.

Les attributs HTML de type évènements sont nombreux. Nous allons passer en revue les plus utilisés d’entre eux dans cette partie.

Parmi ceux-ci, nous avons notamment :

  • L’attribut onclick : se déclenche lorsque l’utilisateur clique sur un élément ;
  • L’attribut onmouseover : se déclenche lorsque l’utilisateur passe le curseur de sa souris sur un élément ;
  • L’attribut onmouseout : se déclenche lorsque l’utilisateur sort son curseur d’un élément ;
  • L’attribut onkeydown : se déclenche lorsque l’utilisateur appuie sur une touche de son clavier sans la relâcher avec son curseur sur l’élément.

Voyons immédiatement un premier exemple. Imaginons que l’on souhaite afficher une boîte de dialogue de type alert() lorsqu’un utilisateur clique sur un paragraphe dans notre page web.

Pour faire cela, on va utiliser évidemment onclick en HTML sur notre paragraphe puis on va créer notre alert() en JavaScript.

Premier exemple sur les évènements

La gestion des évènements en HTML

Essayer ce code !

Comme on peut le remarquer, le HTML nous autorise à placer du code JavaScript directement en valeur de l’attribut onclick.

Ici, on procède de cette manière car l’exemple est très simple. Cependant, dans la suite, nous utiliserons le DOM qui nous offrira bien plus de possibilités.

L’utilisation du mot clef this dans la gestion d’évènements

Pour rappel, en JavaScript, le mot clef this nous sert de référence à différents objets selon le contexte.

Dans le contexte de la gestion d’événements, this va faire référence à l’objet (représentant l’élément HTML) qui est le sujet de l’événement.

Par exemple, si on reprend l’exemple de notre paragraphe, ce paragraphe est le sujet de l’événement car c’est lui qui possède l’attribut d’évènement et le code associé qui va déclencher une action lors du clic.

En utilisant this dans notre code JavaScript dans ce cas, on va donc travailler sur l’élément p en soi.

On peut ainsi par exemple très simplement changer le contenu de notre paragraphe lors du clic d’un utilisateur.

L’évènement onclick et le mot clef this

Notre paragraphe avant le déclenchement de l’évènement JavaScript

Ici, dès que vous cliquez sur le paragraphe, son contenu change et le texte « Merci ! » apparaît à la place du texte d’origine.

Après le déclenchement de l’évènement JavaScript onclick

Essayer ce code !

En pratique, cependant, nous utiliserons peu ce genre de code (car nous allons voir par la suite que nous sommes limités lorsque nous n’utilisons pas le DOM), mais il est bien de l’avoir vu au moins une fois pour bien le comprendre et comprendre ce qu’on va faire ensuite.

Les évènements et le DOM

La gestion des évènements va devenir véritablement intéressante lorsqu’on va réagir aux évènements via le DOM HTML.

Le DOM HTML va nous permettre d’assigner des gestionnaires d’évènements spécifiques à des éléments HTML en utilisant le JavaScript.

Cette fois-ci, nous n’allons donc plus utiliser des attributs HTML mais du code JavaScript à proprement parler pour construire nos évènements.

Nous avons deux manières de réagir aux évènements avec le JavaScript : on peut soit utiliser des propriétés qui vont assigner un gestionnaire d’événement à un élément spécifique en HTML, soit utiliser la méthode addEventListener().

La première méthode, à savoir l’’utilisation de propriétés est une ancienne méthode et vous ne devriez plus l’utiliser aujourd’hui car elle possède des limitations.

L’une des plus importantes d’entre elles est que l’on ne peut pas assigner plusieurs fois le même gestionnaire d’événement à un élément HTML.

Afin que vous voyiez tout de même comment on procède avec cette méthode, nous allons voir un exemple rapide avec la propriété onclick. Notez que les propriétés possèdent souvent des noms analogues aux attributs HTML (l’attribut HTML onclick devient la propriété JavaScript onclick par exemple).

Utilisation de la propriété onclick de l’objet event

Notre page web avant déclenchement de l’évènement

Une fois cliqué, notre évènement JavaScript se déclenche

Essayer ce code !

Comme vous pouvez le constater, on commence à réutiliser des outils que nous avons déjà vus précédemment, comme les fonctions anonymes par exemple.

C’est en effet maintenant que vous possédez de bonnes connaissances en JavaScript que celui-ci va se révéler véritablement intéressant, donc restez attentif !

Dans l’exemple ci-dessus, on commence par accéder à notre premier paragraphe puis on lui attache un évènement de type onclick.

Vous pouvez remarquer que nous attachons ensuite une fonction anonyme à notre évènement. Ici, nous utilisons une fonction anonyme afin que celle-ci ne s’exécute pas immédiatement.

En effet, rappelez vous que pour exécuter une fonction anonyme, nous devions jusqu’à présent soit la transformer en fonction auto invoquée, soit l’enfermer dans une variable puis appeler cette variable avec un couple de parenthèses.

Ici, nous voyons une troisième façon de faire : l’assigner à un évènement.

Dans l’exemple ci-dessus, notre fonction va en effet s’exécuter dès que l’évènement sera déclenché, c’est-à-dire dès que l’utilisateur cliquera sur notre paragraphe.

Si nous avions exécuté la fonction immédiatement, seule la valeur retournée par celle-ci aurait été attachée à notre évènement, ce qui n’est pas du tout le comportement souhaité.

Notez que nous aurions tout aussi bien pu créer une fonction avec un nom puis n’assigner que le nom de la fonction à notre évènement (sans les parenthèses qui feraient qu’elle s’exécuterait immédiatement).

Ainsi, le code ci-dessous est équivalent à celui ci-dessus :

Création d’un évènement onclick

Essayer ce code !

Une nouvelle fois, il est important que vous compreniez bien ces exemples et façons de faire car de nombreux développeurs codent encore comme cela.

Cependant, je vous déconseille d’utiliser vous même ce genre d’écriture. A la place, nous préférerons utiliser la méthode addEventListener() qui est beaucoup moins limité et que nous allons étudier dans la prochaine partie.

Chapitre précédent

Chapitre suivant