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

CREATION D’OBJETS EN JAVASCRIPT ET IDENTITE DES OBJETS

Création d’objets en JavaScript

Outre les objets natifs, nous pouvons également créer nos propres objets en JavaScript.

Nous disposons de trois façons pour créer de nouveaux objets :

  • On peut utiliser le mot clef new et créer un objet à partir de Object() ;
  • On peut créer un objet littéral ;
  • On peut définir un constructeur puis créer des objets à partir de celui-ci.

Créer des objets en utilisant new Object()

Nous avons déjà vu comment créer un nouvel objet de type string dans la partie précédente en utilisant le mot clef new.

Nous allons faire exactement pareil ici en utilisant cette fois-ci le constructeur Object() et en définissant par exemple plusieurs propriétés pour notre objet.

Notez qu’il est aujourd’hui généralement déconseillé de créer un objet de cette façon pour des raisons de performance du code. Cette méthode ne vous est donc présentée qu’à titre d’exemple.

Création d’un objet avec new

On affiche la valeur relative au prenom de notre objet

Essayer ce code !

Comme vous pouvez le remarquer, pour ajouter de nouvelles propriétés (ou méthodes) à notre objet, il faut une nouvelle fois utiliser le point et ensuite définir le nom de la propriété et lui attribuer une valeur avec le signe égal.

Créer un objet littéral

Créer un objet littéral est la manière généralement recommandée de créer un objet, et c’est également la manière la plus simple de procéder.

Pour créer un objet littéral, nous n’avons qu’à déclarer une nouvelle variable et à utiliser une paire d’accolades en définissant les propriétés et méthodes de notre objet à l’intérieur de celles-ci.

On crée un objet littéral

On utilise la méthode de notre objet

Essayer ce code !

Ici, on crée un objet littéral moi possédant trois propriétés et une méthode. On utilise cette fois-ci les deux points pour assigner les valeurs à nos marqueurs.

Notez l’utilisation du mot clef this qui fait ici référence à l’objet couramment utilisé.

Cela signifie que this.prenom va aller rechercher la valeur liée au prenom de l’objet moi, c’est-à-dire Pierre.

This est un mot clef récurrent dans les langages orientés objets et il est très important de bien en comprendre les différents sens selon les utilisations qui sont faites de celui-ci.

Notez également qu’il nous faut ajouter une paire de parenthèses afin de bien accéder au résultat retourné par notre méthode id().

Sans l’utilisation de ces parenthèses, cela retournerait la valeur de la propriété id, c’est-à-dire tout le script de notre fonction.

Créer des objets à partir d’un constructeur

La dernière méthode pour créer des objets en JavaScript est de créer un constructeur puis ensuite de créer des objets à partir de celui-ci.

Notre constructeur va lui même contenir des méthodes et des propriétés et les objets que nous allons créer à partir de celui-ci vont en hériter.

Nous utiliserons cette façon de faire pour des gros projets pour lesquels nous aurons à créer beaucoup d’objets similaires.

Parmi les constructeurs natifs du JavaScript, nous avons déjà vu le constructeur String() à partir duquel nous avons créé des objets de type string.

Nous avons ensuite pu observer que l’on pouvait toujours accéder aux propriétés et aux méthodes définies dans le constructeur String() à travers nos objets de type string et même à travers les valeurs primitives.

Voici ci-dessous une liste des constructeurs natifs les plus connus et utilisés en JavaScript :

  • Object() ;
  • String() ;
  • Number() ;
  • Boolean() ;
  • Array() ;
  • RegExp() ;
  • Function() ;
  • Date() ;

Essayons de créer un nouveau constructeur ensemble. Tout d’abord, vous devez savoir qu’un constructeur est avant tout une fonction et doit donc être déclaré avec le mot clef function.

Ensuite, dans cette fonction constructeur, nous allons définir des propriétés et des méthodes.

On crée une fonction constructeur

On affiche le contenu des objets créés en JavaScript

Essayer ce code !

Ici, nous avons créé un constructeur très simple. Dans ce cas là, le mot clef this va une nouvelle fois faire référence à l’objet sur lequel on travaille actuellement.

Par exemple, lorsque l’on crée l’objet pierre à partir de notre constructeur, pierre va prendre la place de this.

Ainsi, pour ensuite récupérer le prénom de l’objet pierre, nous n’avons qu’à y accéder via pierre.prenom.

Notez que lorsqu’on crée un constructeur, nous sommes ensuite obligés d’utiliser le mot clef new pour créer de nouveaux objets à partir de celui-ci et de procéder comme je l’ai fait ci-dessus.

L’identité des objets

Faites bien attention à un point avec les objets : au contraire des valeurs primitives, on y accède par référence et non pas par valeur.

Ainsi, on ne peut pas ni « comparer » ni « copier » un objet car cela n’a tout simplement pas de sens.

Prenons un exemple concret afin de bien comprendre. Pour cela, nous allons comparer le comportement des valeurs primitives et des objets.

On peut très bien copier des variables contenant des valeurs primitives

Changer le contenu d’une variable n’impacte pas les autres

Essayer ce code !

Lorsque l’on travaille avec des variables qui contiennent des valeurs primitives, on peut tout à fait créer des « copies » de ces variables puis ensuite modifier les copies sans que cela impacte la valeur contenue dans la variable originale.

Avec les objets, cela va être complètement différent puisqu’on ne va pas pouvoir créer directement de « copie » d’un objet. En fait, on ne va créer qu’une autre référence pointant vers le même objet.

Ainsi, si l’on modifie par la suite l’une des valeurs d’une des références, on modifie également celle des autres. Regardez plutôt l’exemple suivant pour vous en convaincre :

On accède aux objets par référence et non pas par valeur

Si l’on modifie la valeur d’un paramètre d’une référence d’un objet, on modifie l’objet

Essayer ce code !

Faîtes bien attention à ce point car beaucoup de développeurs, même expérimentés, font l’erreur.

Chapitre précédent

Chapitre suivant