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

Chapitre précédent

Chapitre suivant

Question n°1 :

Quel est le rôle de l'élément canvas ?

L'élément HTML canvas va nous permettre de créer une zone de dessin dans une page.



Question n°2 :

Lorsqu'on utilise l'élément canvas, que doit-on absolument préciser ?

Il faut préciser une largeur et une hauteur définissant la taille de notre canvas.



Question n°3 :

Pour dessiner à l'intérieur d'un canvas en JavaScript, il faut respecter trois étapes qui sont...

On commence par accéder à notre élément HTML canvas via le DOM, ensuite on définit le contexte avec la méthode getContext() et ensuite seulement on peut dessiner dans notre canvas.



Question n°4 :

Quelles propriété et méthode va t-on utiliser pour créer un rectangle plein dans le canvas ?

  1. style et rect() ;
  2. fillStyle et fillRect() ;
  3. strokeStyle et strokeRect().

Réponse 2. Pour créer un rectangle plein, on utilisera la propriété fillRect et la méthode fillRect().



Question n°5 :

Quelles sont les précautions à prendre lorsqu'on utilise les méthodes qui servent à créer les dessins dans le canvas ?

Il faut faire attention à ce que notre dessin ne dépasse pas du canvas pour avoir le résultat attendu.



Question n°6 :

Quelles méthodes va-t-on utiliser pour dessiner une ligne dans le canvas ?

Il va déjà falloir commencer par définir le premier et le dernier point de notre ligne grâce aux méthodes moveTo() et lineTo(). Ensuite, nous allons tracer notre ligne en soi avec la méthode stroke().



Question n°7 :

Dans notre canvas, les mesures d'angles s'expriment :

  1. En degrés ;
  2. En radians.

Réponse 2. On utilise les notations en radians pour préciser des angles dans un canvas.



Question n°8 :

Quelle méthode nous permet de définir un dégradé linéaire dans notre canvas ?

  1. createLinearGradient() ;
  2. addColorStop() ;
  3. fillStyle().

Réponse 1. La méthode createLinearGradient() nous permet de créer un nouveau dégradé linéaire, tandis que addColorStop() nous permet de préciser les différentes couleurs composant notre dégradé ainsi que les points de transition entre ces couleurs.



Question n°9 :

On peut écrire du texte dans notre canvas.

  1. Vrai ;
  2. Faux.

Réponse 1. On peut créer des textes vides ou pleins dans notre canvas.



Question n°10 :

Si j'utilise deux fois la méthode rotate() d'affilée avant de créer une figure géométrique...

  1. Seule la première utilisation de rotate() sera prise en compte ;
  2. Seule la deuxième utilisation de rotate() sera prise en compte ;
  3. Les deux rotations vont s'additionner.

Réponse 3. Si on utilise rotate() plusieurs fois avant de créer un dessin, toutes les utilisations vont s'appliquer à celui-ci.

Chapitre précédent

Chapitre suivant