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

L’OBJET JAVASCRIPT ARRAY

Présentation de Array et des tableaux

Un tableau (« array » en anglais) est un type de variable spécial qui peut contenir plusieurs valeurs.

Les tableaux vont être gérés par l’objet Array, un objet natif en JavaScript qui possède ses propres propriétés et méthodes.

Lorsque l’on crée un tableau, un indice (ou une clef) numérique unique est automatiquement affectée à chaque valeur de notre tableau.

Ainsi, la première valeur de notre tableau va être associée à l’index 0 (et non pas 1, faites bien attention !), la deuxième valeur va recevoir la clef 1, etc.

L’association automatique d’une clef numérique unique et d’une valeur va s’avérer très pratique pour cibler et travailler précisément sur chaque valeur du tableau par la suite.

Création et syntaxe d’un tableau

Comme pour String et Number, on va pouvoir créer un nouveau tableau en utilisant la syntaxe new Array. Cependant, là encore, il est fortement déconseillé d'utiliser cette syntaxe et on préférera donc la méthode que je vais vous présenter ci-dessous.

Créons donc immédiatement un premier tableau prenoms ensemble afin de voir la syntaxe des tableaux.

Cette variable tableau va tout simplement contenir quatre prénoms :

Création d’un premier tableau en JavaScript

On affiche la valeur correspondante à la clef 0 de notre tableau

Essayer ce code !

Observez bien la syntaxe de notre tableau : on utilise des crochets pour créer notre tableau et on sépare chaque valeur par une virgule.

Dans notre exemple ci-dessus, notre tableau contient quatre valeurs, ou quatre éléments. Le premier élément est composé de la valeur Pierre et possède l’indice 0. Le dernier, contenant la valeur Claire, possède l’indice 3.

Vous pouvez comme d’habitude utiliser des guillemets ou des apostrophes pour entourer les différentes valeurs textuelles de notre tableau.

Si vous souhaitez rentrer des nombres dans un tableau, en revanche, vous n'utiliserez ni guillemet ni apostrophe.

Pour récupérer ensuite une valeur dans un tableau, nous allons nous servir de la clef associée à cette valeur.

Il suffit ainsi de préciser le nom du tableau avec la clef associée à la valeur voulue entre crochets, comme on l’a fait dans l’exemple ci-dessus.

On peut ensuite travailler sur cette valeur ou l’afficher avec un alert par exemple.

Si maintenant on souhaite modifier une valeur dans un tableau, on va une nouvelle fois utiliser l’index correspondant à la valeur à modifier et tout simplement préciser une nouvelle valeur :

On modifie la valeur d’un tableau

On change une valeur de notre tableau et on affiche le changement

Essayer ce code !

Connaître le nombre d’éléments dans un tableau

La propriété length va nous permettre de connaître le nombre d’éléments contenus dans un tableau. Voici comment on va l’utiliser, en reprenant notre exemple précédent :

On veut connaître le nombre d’éléments d’un tableau

On peut utiliser length pour afficher le nombre d’éléments d’un tableau

Essayer ce code !

Une petite astuce : comme length retourne le nombre d’éléments d’un tableau, et comme la première valeur d’un tableau possède toujours la clef 0, on peut utiliser cette propriété pour rajouter des éléments à la fin de notre tableau.

Voici comment on va s’y prendre en pratique :

On peut facilement ajouter des éléments à un tableau avec length

On a ajouté des éléments à notre tableau sans préciser  d’indice

Essayer ce code !

Comme vous pouvez l’observer, cette propriété est très pratique car on n’a pas à préciser explicitement d’indice pour chaque nouvelle valeur ajoutée : prenoms.length va à chaque fois renvoyer le dernier nombre d’éléments connus de notre tableau.

Ainsi, avant d’ajouter Florian à notre tableau, celui-ci contient quatre éléments. Une fois Florian ajouté, notre tableau contient cinq éléments, et ainsi prenoms.length va renvoyer 5 et non plus 4.

Parcourir un tableau et afficher toutes ses valeurs

Pour parcourir et afficher les valeurs d’un tableau, nous utiliserons généralement une boucle for, qui va nous permettre de passer en revue notre tableau valeur par valeur.

Nous allons également pouvoir utiliser notre propriété length à l’intérieur de cette boucle afin de sortir de la boucle toujours au bon moment.

Voici ce que ça va donner en pratique :

On affiche toutes les valeurs d’un tableau JavaScript avec for

On utilise une boucle for pour afficher les valeurs de notre tableau

Essayer ce code !

Ici, on va bien entendu utiliser notre boucle for sur les indices de notre tableau. On commence à 0 en initialisant une variable i = 0 puis on pose i < prenoms.length en condition puisqu’on sait que prenoms.length est égal au plus grand indice de notre tableau + 1.

Ensuite, dans notre boucle for en soi, on parcourt notre tableau élément par élément et on stocke chaque nouvelle valeur trouvée avec une phrase de texte dans une variable p qu’on a initialisée en dehors de la boucle.

Au début, notre variable p est vide puis elle va stocker les prénoms de notre tableau un par un. A chaque nouveau passage dans la boucle, un nouveau prénom avec notre petite ligne de texte est ajouté dans notre variable grâce à l’opérateur +=.

Finalement, on affiche le contenu de notre variable à l’aide d’un alert().

Des tableaux avec des index textuels ?

Dans nombre d’autres langages informatique (dont le PhP, par exemple), on peut créer des tableaux en choisissant d’attribuer une clef textuelle à chaque nouvelle valeur. On appelle ces tableaux des tableaux associatifs.

En JavaScript, ce type de tableau n’existe tout simplement pas. Pour créer quelque chose qui ressemble à un tableau associatif, nous allons créer un objet littéral en JavaScript.

Création d’un objet littéral

Attention : les objets littéraux ne sont pas des tableaux

Essayer ce code !

Encore une fois attention : un objet littéral n’est pas un objet de type array. Ainsi, les propriétés et méthodes de l’objet Array ne fonctionneront pas avec les objets littéraux.

Pour parcourir un objet littéral et afficher ses éléments, nous allons utiliser une nouvelle boucle spécifiquement créée pour cela : la boucle for…in.

Cette boucle va parcourir notre objet littéral selon ses clefs, en utilisant un alias (un mot choisi qui va ensuite être remplacé par les différentes clefs de notre objet).

Voyons immédiatement comment cela va fonctionner en pratique :

On utilise une boucle for..in pour parcourir un objet littéral

On affiche les valeurs de notre objet littéral grâce à for in

Essayer ce code !

Dans l’exemple précédent, nous utilisons le mot clefs comme alias. Vous devez bien comprendre que ce mot va être remplacé par les différentes clefs effectives de notre tableau à chaque nouveau passage dans la boucle (c’est-à-dire prenom1, prenom2, etc.).

Notez également qu’on utilise, comme pour les tableaux, des crochets pour entourer les clefs de notre objet littéral pour aller récupérer ses valeurs. Cela peut sembler étrange mais c’est la façon normale de procéder.

Chapitre précédent

Chapitre suivant