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

GESTION DU DELAI D’EXECUTION EN JAVASCRIPT

Délai et animations

Le JavaScript nous permet d’exécuter des blocs de code à un certain moment donné ou à répétition avec un intervalle de temps fixe entre chaque répétition.

Cela peut être très utile pour créer des animations (horloge, slider, etc.) entre autres.

Pour gérer le délai d’exécution d’un code, nous allons utiliser les méthodes setInterval() et setTimeout().

La méthode setInterval()

La méthode setInterval() est une méthode de l’objet Window.

Elle va nous permettre d’exécuter un script en boucle en précisant un intervalle de temps entre chaque répétition.

Cette méthode va prendre en arguments le bloc de code à exécuter en boucle et l’intervalle entre chaque exécution exprimé en millisecondes.

On va par exemple simplement pouvoir créer un timer pour notre site avec l’heure qui va se mettre à jour automatiquement toutes les secondes :

On utilise setInterval() pour afficher l’heure actuelle

L’heure change dynamiquement grâce à setInterval() en JavaScript

Essayer ce code !

Dans l’exemple ci-dessus, on crée une fonction horloge qui va récupérer l’heure actuelle dans un objet de type Date et l’afficher en HTML.

La méthode toLocaleTimeString() nous permet de récupérer l’heure correspondant à notre faisceau horaire, c’est-à-dire l’heure française dans mon cas.

Ensuite, on utilise setInterval() pour exécuter notre fonction horloge toutes les secondes, et ainsi récupérer et afficher la date actuelle.

Notez que nous créons également une variable tempsReel qui ne nous sert pas pour le moment mais qui va nous être utile par la suite pour manipuler notre code.

Stopper une exécution avec clearInterval()

La méthode clearInterval() va nous permettre d’arrêter l’exécution d’une fonction passée à la méthode setInterval().

Pour que clearInterval() fonctionne, il va cependant falloir lui passer une variable contenant la méthode setInterval().

Cette variable doit être globale. C’est pour cela que nous avons créé la variable tempsReel dans l’exemple précédent dans l’espace global de notre script.

Utilisation de clearInterval()

On utilise la méthode JavaScript clearInterval() pour stopper setInterval()

Essayer ce code !

La méthode setTimeout()

La méthode setTimeout() va nous permettre d’exécuter un bloc de code après un certain moment donné.

Cette méthode appartient également à l’objet implicite Window.

Il va falloir passer deux arguments à cette méthode : une fonction à exécuter et un nombre en millisecondes précisant à quel moment exécuter la fonction à partir de l’exécution de setTimeout().

Utilisation de la méthode setTimeout() en JavaScript

Essayer ce code !

Ici, on utilise plusieurs fois setTimeout() pour modifier la couleur de l’arrière plan de notre page dès qu’un utilisateur clique sur notre bouton.

On passe une fonction anonyme à setTimeout() dont le rôle est simplement de changer la couleur de fond de l’élément body.

En deuxième argument, on précise quand notre fonction anonyme doit être exécutée à partir du clic sur le bouton.

Voici comment se déroule l’action dans son ensemble : un utilisateur arrive sur la page, et clique sur le bouton. Dès que le bouton est cliqué, notre fonction couleur() est exécutée et ainsi les différents appels à setTimeout() sont lancés à la suite selon le délai qu’on leur a attribué.

Pour stopper l’exécution de setTimeout(), on peut cette fois ci utiliser la méthode clearTimeout(). Cette méthode va également avoir besoin d’une variable globale si vous comptez l’utiliser.

Cependant, les cas où l’on va avoir besoin d’arrêter l’exécution de setTimeout() vont être très rares.

Chapitre précédent

Chapitre suivant