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

DECOUVERTE DES OBJETS EN JAVASCRIPT

Le JavaScript, un langage orienté objet

Au tout début de ce cours, nous avons défini le JavaScript comme étant un langage orienté objet.

Cela signifie que ce langage a été construit autour du concept d’objets, et que son fonctionnement même se base sur l’utilisation d’objets.

En effet, en JavaScript, quasiment tout est avant tout objet :

  • Les chaînes de caractères, nombres et booléens peuvent être des objets (ou des valeurs primitives traitées comme des objets) ;
  • Les fonctions sont des objets ;
  • Les tableaux sont des objets ;
  • Les dates sont des objets ;
  • Les expressions régulières sont des objets.

En bref, vous devez absolument comprendre ce que sont les objets et comment ils fonctionnent afin de bien comprendre le JavaScript.

Qu’est-ce qu’un objet ?

Dans la « vraie » vie, par exemple, un crayon est un objet.

Il existe des crayons de différentes couleurs et de différentes tailles ou formes. La couleur, taille ou forme d’un crayon vont être des propriétés.

Tous les crayons vont posséder les mêmes propriétés (tous les crayons possèdent une taille) mais les valeurs associées à ces propriétés vont être différentes (chaque crayon peut avoir une taille différente des autres).

De plus, un crayon sert à écrire. "Ecrire" est donc ici une fonction de l'objet crayon ou encore ce que nous allons désormais appeler une méthode.

Les objets en JavaScript

En JavaScript, tout comme dans la vraie vie, un objet va contenir un ensemble de propriétés et de méthodes.

Dans ce cours, nous avons déjà vu ce qu’étaient les variables et avons appris à les manipuler.

Nous avons découvert que les variables pouvaient stocker différents types de valeurs comme une chaîne de caractères, un nombre, un booléen, etc.

Cependant, jusqu’à présent, nous n’avons fait stocker qu’une seule valeur à la fois à nos variables. Plus précisément, nous avons fait stocker ce que l’on appelle des valeurs primitives à nos variables.

En réalité, les variables en JavaScript vont toujours stocker soit des valeurs primitives, soit des objets.

Comme un objet peut contenir différentes propriétés (et méthodes) et leurs valeurs associées, nos variables vont également de fait pouvoir stocker plusieurs valeurs lorsqu’elles vont stocker un objet.

Propriétés et méthodes des objets

Les objets en JavaScript vont contenir des propriétés et méthodes.

Les « propriétés » d’un objet peuvent être assimilées à des variables telles que nous les avons vues précédemment. Elles sont constituées d’un nom et d’une valeur séparés par deux points (« : »).

Les « méthodes » d’un objet peuvent être assimilées à des fonctions qui vont elles mêmes être stockées dans des propriétés.

Si cela semble abstrait pour le moment, pas d’inquiétude : c’est tout à fait normal. Tout devrait très vite se clarifier lorsque nous allons voir des exemples ensemble.

Premier exemple d’un objet JavaScript

Dans l’exemple ci-dessus, j’ai créé un premier objet moi qui est en l’occurrence un objet littéral (nous reparlerons de ce concept).

Nous n’allons pas apprendre à créer des objets immédiatement donc pour le moment concentrez vous seulement sur les concepts de propriétés et de méthodes.

Comme je l’ai indiqué, vous pouvez voir que notre objet moi contient des propriétés et une méthode.

Par exemple, la paire prenom : "Pierre" est une première propriété avec sa valeur.

Pour les méthodes, la nuance est plus complexe à percevoir. En effet, vous remarquez qu’on assigne non pas une valeur simple mais une fonction qui ne possède pas de nom à notre propriété identite.

Pour accéder aux valeurs retournées par cette fonction sans nom, nous allons devoir utiliser la propriété identite sous forme de méthode en ajoutant un couple de parenthèses comme ceci : identite(). Cela va avoir pour effet de déclencher l'exécution de notre méthode.

Cependant identite reste avant tout une propriété de moi.

Cet exemple est un peu complexe, et utilise des notions que nous n'avons pas encore étudiées, donc pas de panique si vous ne comprenez pas tout tout de suite. Pour le moment, encore une fois, contentez vous d’observer ce que sont les propriétés et les méthodes.

Dans les parties à venir, nous allons nous familiariser petit à petit avec tout ce vocabulaire nouveau.

Chapitre précédent

Chapitre suivant