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 CLASSES DE CARACTERES DES REGEX

Présentation des classes de caractères

Les classes de caractères vont nous permettre de mentionner des plages de caractères pour effectuer nos recherches.

Pour déclarer une classe de caractères, nous allons devoir utiliser une paire de crochets ouvrant et fermant, sauf dans un cas particulier où nous utiliserons des parenthèses.

Observez plutôt l’exemple ci-dessous :

Premier exemple utilisant les classes de caractères

On utilise les classes de caractères pour performer des recherches sur pluiseurs caractères en même temps

Essayer ce code !

Comme vous pouvez l’observer, l’intérêt des classes de caractères va être de pouvoir rechercher plusieurs caractères ou plusieurs séquences de caractères différents d’un seul coup.

Dans l’exemple ci-dessus, en utilisant la classe de caractères [aeiouy], match() va trouver chaque voyelle présente dans notre paragraphe.

Si l’on mentionne aeiouy dans notre regex sans utiliser de classe, c’est bien la séquence aeiouy qui va être recherchée dans son ensemble.

Ecrire une classe de caractères

Nous allons pouvoir écrire nos classes de caractères de différentes façons, afin de performer de puissantes recherches.

Voici ci-dessous quelques exemples d’écriture de classes de caractères :

CLASSE SENS
[abcde] Trouve tous les caractères à l’intérieur des crochets
[^abcde] Trouve tout caractère ne se situant pas entre les crochets
[a-z] Trouve n’importe quelle lettre entre a et z
[^a-z] Trouve n’importe quel caractère qui n’est pas une lettre minuscule de l’alphabet
[0-9] Trouve n’importe quel nombre entre 0 et 9
[^0-9] Trouve n’importe quel caractère qui n’est pas un nombre compris entre 0 et 9
(jour|soir) Trouve jour et soir

Faites bien attention à l’utilisation du symbole ^ à l’intérieur des classes de caractères : comme vous pouvez le voir, celui-ci ne possède pas la même signification que dans nos regex classiques (habituellement, on l’utilise pour préciser que l'on souhaite rechercher une séquence située en début de chaîne).

Voyons immédiatement quelques exemples utilisant les classes de caractères afin de nous habituer à les utiliser.

Utilisation des classes de caractères  des regex en JavaScript

On utilise les classes de caractères pour effectuer des recherches sur des intervalles

Essayer ce code !

Ici, les trois premiers exemples sont plutôt simples à comprendre.

Dans notre première regex, on recherche toutes les lettres majuscules situées dans l’intervalle C-X. Evidemment, les déclinaisons françaises de certaines lettres (c cédille, e accentué, etc.) ne vont pas être recherchées.

La méthode match() va donc trouver les trois majuscules présentes dans notre paragraphe : O, J et S.

Dans notre deuxième regex, on utilise le signe ^ à l’intérieur de notre classe pour signifier qu’on veut rechercher tout sauf ce qui se trouve dans notre classe.

Le résultat renvoyé est donc un texte sans les voyelles minuscules.

Notre troisième regex recherche tous les chiffres entre 0 et 9. Chacun des chiffres dans 2015 est donc trouvé.

Nos deux dernières regex sont plus intéressantes. Dans la quatrième, on utilise ^ en dehors de la classe : on cherche donc une lettre majuscule en début de notre chaîne de caractères.

Notre dernière regex va elle utiliser les classes et les quantifieurs et rechercher toute succession de quatre chiffres. Cela va être trouvé dans 2015, qui va donc être renvoyé par match().

Pour construire des regex vraiment utiles, nous allons souvent devoir utiliser différentes notions (options, quantifieurs, classes) ensemble, c’est pour cela qu’il est essentiel de bien tout maitriser.

Recherche dans plusieurs intervalles

Nous allons encore pouvoir préciser plusieurs intervalles de recherche à l’intérieur de nos classes de caractères, ou un intervalle plus certains caractères par exemple.

Pour faire cela, il suffit d’écrire l’intervalle et les caractères ou les différents intervalles côte-à-côte.

On peut faire nos recherches à travers plusieurs intervalles

On recherche à travers plusieurs intervalles pour de meilleurs résultats

Essayer ce code !

Mise en garde : la recherche de caractères spéciaux

Faites cependant bien attention si vous souhaitez rechercher des caractères spéciaux (parenthèses, crochets, slashs, symbole dollar ou tréma, etc.) car beaucoup d’entre eux sont déjà utilisés par les regex et possèdent une signification précise.

Pour rechercher ce genre de caractères, vous devrez les échapper avec un antislash. Notez que cela est valable même en dehors des classes de caractères pour nombre de caractères spéciaux.

On échappe les caractères spéciaux dans nos regex avec un antislash

On peut rechercher des caractères spéciaux avec nos regex si on les a bien échapppés au préalable

Essayer ce code !

Retenez également que si vous souhaitez rechercher un antislash il faudra lui même l’échapper avec un autre antislash.

Les méta-caractères, ou classes abrégées

Les méta-caractères vont être des caractères possédant une signification spéciale.

La spécificité des méta-caractères est qu’ils vont toujours commencer par un antislash (sauf le point).

Les méta-caractères vont très souvent correspondre à des classes couramment utilisées et vont donc nous servir à écrire ces classes plus rapidement.

Voici la liste des méta-caractères les plus utilisés :

META CARACTERE SENS
. Seul méta-caractère ne possédant pas d’antislash. Trouve tout caractère, sauf un retour à la ligne
\w Trouve toute lettre. Equivalent à [a-zA-Z]
\W Trouve tout ce qui n’est pas une lettre. Equivalent à [^a-zA-Z]
\d Trouve n’importe quel chiffre. Equivalent à [0-9]
\D Trouve tout sauf un chiffre. Equivalent à [^0-9]
\s Trouve un espace
\S Trouve tout sauf un espace
\ba Trouve tout « a » situé en début ou en fin d’un mot
\Ba Trouve tout « a » non situé en début ou en fin de mot
\n Trouve un retour à la ligne (le « \n » en JavaScript)

Prenons ensemble quelques exemples simples afin de voir comment les classes abrégées fonctionnent.

Utilisation des méta-caractères des regex ou classes abrégées en JavaScript

On peut écrire certaines classes de regex plus rapidement en utilisant les méta caractères

Essayer ce code !

Chapitre précédent

Chapitre suivant