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

LES MÉTHODES DE L’OBJET JAVASCRIPT ARRAY

Les méthodes de Array

L’objet Array possède une bonne dizaine de méthodes. Ces méthodes sont pour la plupart très puissantes et vont nous permettre d’effectuer toutes sortes d’opérations sur nos tableaux.

Dans cette partie, nous allons voir la majorité des méthodes de Array, à savoir :

  • Les méthodes push() et pop() ;
  • Les méthodes shift() et unshift() ;
  • La méthode splice() ;
  • La méthode sort() ;
  • La méthode reverse() ;
  • La méthode join() ;
  • La méthode slice() ;
  • La méthode concat().

Ajouter et supprimer des éléments en fin de tableau en JavaScript

Pour ajouter des éléments en fin de tableau, on va utiliser la méthode push(). Pour supprimer des éléments en fin de tableau, on va utiliser pop().

Notez que les méthodes push() et pop(), en plus d’ajouter ou de supprimer de nouveaux éléments dans un tableau, vont également retourner des informations relatives à notre tableau.

Ainsi, la méthode push() va retourner la nouvelle taille du tableau tandis que pop() va retourner dans une chaîne de caractères la valeur relative à l’élément supprimé.

Voyons immédiatement quelques exemples d’utilisation de push() et pop().

Utilisation de la méthode push()

On utilise push() pour ajouter des éléments en fin de tableau

Essayer ce code !

Ici, notre variable taille nous sert à récupérer l'information renvoyée par la méthode push(), c’est-à-dire la taille du nouveau tableau.

Utilisation de la méthode pop() en JavaScript

La méthode pop() nous sert à supprimer le dernier élément d’un tableau

Essayer ce code !

Ici, notre variable suppr va récupérer l'information renvoyée par pop(), c’est-à-dire la valeur qui correspond à l’élément supprimé.

Ajouter et supprimer des éléments au début d’un tableau en JavaScript

Pour ajouter ou supprimer des éléments en début de tableau, on va respectivement utiliser les méthodes unshift() et shift().

La méthode unshift() va, comme push(), retourner la nouvelle taille du tableau tandis que shift(), comme pop(), va retourner la valeur supprimée sous forme de chaîne de caractères.

Utilisation de la méthode unshift() de l’objet JavaScript Array

On utilise unshift() pour ajouter des éléments en début de tableau

Essayer ce code !

Utilisation de la méthode shift() de l’objet JavaScript Array

On utilise shift() pour supprimer des éléments en début de tableau

Essayer ce code !

Ajouter ou supprimer des éléments choisis dans un tableau

Pour ajouter ou supprimer des éléments dans un tableau, on peut également utiliser splice().

L’avantage de cette méthode est qu’elle nous permet d’ajouter un élément n’importe où dans un tableau ou de supprimer n’importe quel élément.

Splice() va prendre au minimum deux arguments : la position à partir de laquelle les nouveaux éléments devront être ajoutés et combien d’éléments doivent être enlevés.

Plus précisément, les nouveaux éléments vont se placer juste avant l’élément correspondant à l’indice donné.

Après ces deux arguments obligatoires, on peut rajouter autant d’autres arguments qu’on veut insérer de valeurs :

Utilisation de la méthode splice() de l’objet JavaScript Array

On utilise splice() pour ajouter ou supprimer des éléments dans un tableau

Essayer ce code !

Ici, nous avons ajouté des éléments et n’en avons supprimé aucun. Pour faire l’inverse, il suffit de n’indiquer aucun élément à ajouter à splice().

Faites bien attention avec les arguments que vous passez à splice() : le premier correspond bien à une position et non pas à un nombre d’éléments à ajouter.

Suppression d’éléments avec splice()

On peut utiliser splice() pour supprimer n’importe quel élément dans un tableau

Essayer ce code !

Classer les éléments d’un tableau

La méthode sort() va nous permettre de trier les éléments d’un tableau dans l’ordre croissant ou alphabétique de leurs valeurs.

Attention cependant à la casse (majuscule / minuscule) : les valeurs commençant par des majuscules vont être classées avant celles commençant par des minuscules.

Utilisation de la méthode sort() de l’objet JavaScript Array

On utilise sort() pour classer les éléments d’un tableau dans l’ordre alphabétique de leurs valeurs

Essayer ce code !

Faîtes cependant attention à un point : la méthode sort() va classer les valeurs en les comparant caractère par caractère.

On va donc avoir des problèmes pour trier les nombres. Par exemple, « 25 » va être considéré comme supérieur à « 100 » car, en comparant chiffre par chiffre, « 2 » est supérieur à « 1 ».

Pour trier des nombres, on utilisera généralement en plus de sort() une fonction de comparaison. Comme ce besoin est très spécifique, nous n’allons pas l’étudier ensemble.

Inverser l’ordre des éléments d’un tableau

Pour inverser l’ordre des éléments d’un tableau, on va cette fois-ci utiliser la méthode reverse().

Il peut être particulièrement intéressant d’utiliser cette méthode avec la méthode sort() que nous venons de voir afin de classer des éléments dans l’ordre inverse de l’ordre alphabétique ou décroissant.

Utilisation de la méthode reverse() de Array

On utilise reverse() pour inverser l’ordre des éléments d’un tableau

Essayer ce code !

La méthode join()

La méthode join() va retourner les différentes valeurs d’un tableau sous forme de chaîne de caractères.

Outre cela, nous allons pouvoir choisir le type de séparateur voulu entre les différentes valeurs de notre tableau (un espace, une virgule, etc.).

Cette méthode va prendre le séparateur choisi en argument.

Attention : join() ne modifie pas notre tableau en soi, elle renvoie seulement une chaîne de caractères créée à partir de notre tableau.

Utilisation de la méthode join() de l’objet Array

join() retourne une chaine de caractères créée à partir des valeurs d’un tableau

Essayer ce code !

Créer un tableau à partir d’un autre

La méthode slice() va elle nous permettre de créer un nouveau tableau en extrayant des éléments d’un tableau de base.

Cette méthode va généralement avoir besoin de deux arguments : une position de départ et une positon de fin pour couper.

On peut toutefois ne préciser qu’un seul argument qui sera la position de départ. Dans ce cas là, slice() coupera jusqu’à la fin du tableau de départ.

Tout comme la précédente, cette méthode n’impacte pas le tableau de départ. Elle va servir à créer un nouveau tableau à partir de notre tableau de départ.

Utilisation de la méthode slice() de l’objet Array

Avec slice(), on peut extraire un nouveau tableau à partir d’un tableau de départ

Essayer ce code !

Comme vous pouvez le remarquer, nous n’avons cette fois-ci pas utilisé de boucle for pour afficher les valeurs des tableaux.

En effet, on peut le faire tout simplement avec un alert(). Cependant, dans ce cas, nous n’avons aucun contrôle sur le formatage en soi des données affichées. Ce n’est donc pas recommandé en pratique.

Créer un tableau à partir de plusieurs tableaux

La méthode concat() va nous permettre de « concaténer » différents tableaux entre eux ; c’est-à-dire de les fusionner pour en créer un nouveau.

Cette méthode va prendre en arguments les tableaux que l’on souhaite fusionner à un premier de départ choisi arbitrairement pour en former un nouveau.

Notez que l’on peut fusionner autant de tableaux que l’on veut entre eux. Les tableaux de base ne sont une nouvelle fois pas modifiés.

Utilisation de la méthode concat() de l’bjet Array

On utilise concat() pour concaténer plusieurs tableaux entre eux

Essayer ce code !

Comme vous pouvez le voir, on doit utiliser concat() sur l’un de nos tableaux de base (que l’on peut choisir arbitrairement, cela n’impactera que l’ordre des valeurs du tableau final).

Ensuite, nous allons placer tous les autres tableaux à fusionner avec ce premier tableau en arguments de concat(), en les séparant par des virgules.

On fusionne plusieurs tableaux ensemble avec concat()

On affiche notre tableau final créé avec concat()

Essayer ce code !

Chapitre précédent

Chapitre suivant