Vous êtes sur la page 1sur 19

‫بهترین جایگزین سپرده‌های بانکی‬

‫باز کردن‬ ‫کارگزاری آگاه‬

 

Les tableaux en JavaScript et l’objet global Array


Les variables de type Array, ou variables tableaux, sont des variables
Cours particulières qu’on retrouve dans de nombreux langages de
complet programmation et qui permettent de stocker plusieurs valeurs à la fois
JavaScript avec un système de clef ou d’indice associé à chaque valeur.

INTRODUCTION AU
COURS JAVASCRIPT
En JavaScript, les tableaux sont avant tout des objets qui dépendent
de l’objet global Array.
1. Introduction au
JavaScript Dans cette nouvelle leçon, nous allons voir de que sont les tableaux et
comment définir des tableaux en JavaScript. Nous nous intéresserons
2. L’environnement de
ensuite aux propriétés et méthodes de l’objet Array.
travail pour ce cours
JavaScript

3. Où écrire le code
Privacy & Cookies Policy
JavaScript ?
Présentation et création de tableaux en
4. Commentaires, JavaScript
indentation et syntaxe
de base en JavaScript Les tableaux sont des éléments qui vont pouvoir contenir plusieurs
valeurs. En JavaScript, comme les tableaux sont avant tout des objets,
LES VARIABLES ET il peut paraitre évident qu’un tableau va pouvoir contenir plusieurs
TYPES DE VALEURS
JAVASCRIPT valeurs comme n’importe quel objet.

5. Présentation des Cependant, dans la plupart des langages, les tableaux ne sont pas des
variables JavaScript
objets mais simplement des éléments de langages spéciaux qui
peuvent tout de même contenir plusieurs valeurs.
6. Les types de
données en JavaScript
Le principe des tableaux est relativement simple : un indice ou clef va
7. Présentation des être associé à chaque valeur du tableau. Pour récupérer une valeur
opérateurs dans le tableau, on va utiliser les indices qui sont chacun unique dans
arithmétiques et
un tableau.
d’affectation
JavaScript
Les tableaux vont s’avérer très pratique lorsqu’on voudra stocker des
8. La concaténation et listes de valeurs dans une variable et pour pouvoir ensuite accéder à
les littéraux de certaines valeurs en particulier.
gabarits en JavaScript

9. Les constantes en
JavaScript

LES STRUCTURES DE
CONTRÔLE
JAVASCRIPT

10. Structures de
contrôle, conditions et
opérateurs de
comparaison
JavaScript

11. Les conditions if,


Notez que dans la majorité des langages de programmation, on
if…else et if…else if…
distingue deux types de tableaux : les tableaux dont les clefs ou
else en JavaScript
indices sont des chiffres et qu’on appelle tableaux numérotés et les
12. Opérateurs tableaux dont les clefs ou indices sont des chaines de caractères
logiques, précédence définies par le développeur et qu’on appelle tableaux associatifs.
Privacy & Cookies Policy
et règles Le JavaScript ne gère qu’un type de tableau : les tableaux numérotés.
d’associativité des
Les clefs numériques associées à chaque valeur vont être générées
opérateurs en
automatiquement. La première valeur d’un tableau va posséder la clef
JavaScript
0, la deuxième valeur possèdera la clef 1, et etc.
13. Utiliser l’opérateur
ternaire pour écrire des On va pouvoir stocker n’importe quel type de valeur en valeurs d’un
conditions JavaScript tableau.
condensées

14. L’instruction switch


en JavaScript
Création d’un tableau en JavaScript
15. Présentation des
boucles et des Les tableaux ne sont pas des valeurs primitives. Cependant, nous ne
opérateurs sommes pas obligés d’utiliser le constructeur Array() avec le mot clef
d’incrémentation et de new pour créer un tableau en JavaScript.
décrémentation en
JavaScript
En effet, une syntaxe alternative et plus performante (et qu’on
préfèrera donc toujours à la syntaxe new Array()) est disponible en
16. Les boucles while,
do… while, for et for…
JavaScript et nous permet des créer des tableaux qui vont tout de
in et les instructions même pouvoir utiliser les propriétés et méthodes du constructeur
break et continue en Array().
JavaScript
Cette syntaxe utilise les crochets […] comme ceci :
LES FONCTIONS EN
JAVASCRIPT

17. Présentation des


fonctions JavaScript

Ici, on crée 4 tableaux différents : notre premier tableau des stocké


18. Portée des
variables et valeurs de dans une variable let prenoms. Par simplification, on parlera du «
retour des fonctions en tableau prenoms ».
JavaScript
Notre premier tableau prenoms contient des chaines de caractères
19. Fonctions (type de valeur String). Notre deuxième tableau ages contient des
anonymes, auto-
chiffres. Notre troisième tableau produits contient des valeurs de type
invoquées et
chaine de caractères et de type nombre et même un autre tableau.
récursives en
JavaScript

L’ORIENTÉ OBJET EN
Privacy & Cookies Policy
JAVASCRIPT
Accéder à une valeur dans un tableau
20. Introduction à
l’orienté objet en Lorsqu’on crée un tableau, un indice est automatiquement associé à
JavaScript chaque valeur du tableau. Chaque indice dans un tableau est toujours
unique et permet d’identifier et d’accéder à la valeur qui lui est
21. Création d’un objet associée. Pour chaque tableau, l’indice 0 est automatiquement
JavaScript littéral et
associé à la première valeur, l’indice 1 à la deuxième et etc.
manipulation de ses
membres
Pour accéder à une valeur en particulier dans un tableau, il suffit de
22. Définition et préciser le nom du tableau puis l’indice associé à la valeur à laquelle
création d’un on souhaite accéder entre crochets.
constructeur d’objets
en JavaScript Dans le cas où un tableau stocke un autre tableau, il faudra utiliser
deux paires de crochets : la première paire va mentionner l’indice
23. Constructeur
relatif à la valeur à laquelle on souhaite accéder dans notre tableau de
Object, prototype et
base (c’est-à-dire l’indice lié au sous tableau en l’occurrence, tandis
héritage en JavaScript
que la deuxième parie de crochets va nous permettre de préciser
24. Les classes en l’indice lié à la valeur à laquelle on souhaite accéder dans notre sous
JavaScript tableau.

VALEURS
PRIMITIVES ET Regardez plutôt l’exemple ci-dessous pour bien comprendre. On
OBJETS GLOBAUX réutilise ici les tableaux crées précédemment.
JAVASCRIPT

25. Valeurs primitives


et objets prédéfinis en
JavaScript

26. L’objet global


JavaScript String,
propriétés et
méthodes

27. L’objet global


JavaScript Number,
propriétés et
méthodes

28. L’objet global


JavaScript Math,

Privacy & Cookies Policy


propriétés et
méthodes

29. Les tableaux en


JavaScript et l’objet
global Array

30. Les dates en


JavaScript et l’objet
global Date

MANIPULATION DU
BOM EN
JAVASCRIPT

31. JavaScript API,


Browser Object Model
et interface Window
EDIT ON
HTML JS Result
32. L’interface et l’objet
Navigator et la
let prenoms = ['Pierre', 'Mathilde', 'Florian', 'Camille'];
géolocalisation en let ages = [29, 27, 29, 30];
JavaScript let produits = ['Livre', 20, 'Ordinateur', 5, ['Magnets',
100]];

33. L’interface et l’objet


document.getElementById('p1').innerHTML = prenoms[0] + '
History en JavaScript possède 1 ' + produits[2];
document.getElementById('p2').innerHTML = prenoms[1] + ' a
34. L’interface et l’objet ' + ages[1] + ' ans';
document.getElementById('p3').innerHTML = produits[4][1] +
Location en JavaScript
' ' + produits[4][0];

35. L’interface et l’objet


Screen en JavaScript Resources

MANIPULATION DU
DOM EN
JAVASCRIPT

36. Présentation du
Utiliser une boucle for…of pour parcourir
DOM HTML et de ses toutes les valeurs d’un tableau
APIs accessibles en
JavaScript Pour parcourir un tableau élément par élément, on va pouvoir utiliser
une boucle spécialement créée dans ce but qui est la boucle for…of.
37. Accéder aux
éléments dans un
Regardons immédiatement comment utiliser ce type de boucle
document avec
pratique : Privacy & Cookies Policy
JavaScript et modifier
leur contenu

38. Naviguer ou se
déplacer dans le DOM
en JavaScript grâce
aux noeuds

39. Ajouter, modifier ou


supprimer des
éléments du DOM avec
JavaScript

40. Manipuler les


attributs et les styles
des éléments via le
DOM en JavaScript EDIT ON
HTML JS Result
41. La gestion let prenoms = [ Pierre , Mathilde , Florian ,
d’évènements en 'Camille'];
let ages = [29, 27, 29, 30];
JavaScript et la
let produits = ['Livre', 20, 'Ordinateur', 5, ['Magnets',
méthode 100]];
addEventListener
for(let valeur of prenoms){
document.getElementById('p1').innerHTML += valeur +
42. La propagation des
'<br>';
évènements en }
JavaScript
Resources

43. Empêcher un
évènement de se
Ici, on définit une variable let valeur (on peut lui donner le nom qu’on
propager et annuler
souhaite) qui va stocker les différentes valeurs de notre tableau une à
son comportement par
défaut en JavaScript une. La boucle for… of va en effet exécuter son code en boucle jusqu’à
ce qu’elle arrive à la fin du tableau.
UTILISATION DES
EXPRESSIONS
A chaque nouveau passage dans la boucle, on ajoute la valeur
RÉGULIÈRES EN
JAVASCRIPT courante de let valeur dans notre paragraphe p id='p1'.

44. Introduction aux


expressions régulières
ou expressions
rationnelles en Tableaux associatifs en JavaScript, objets
JavaScript littéraux et boucle for… in
Privacy & Cookies Policy
Dans nombre d’autres langages informatique (dont le PHP, par
45. Utiliser les
expressions régulières exemple), on peut créer des tableaux en choisissant d’attribuer une
pour effectuer des clef textuelle à chaque nouvelle valeur. On appelle ces tableaux des
recherches et tableaux associatifs.
remplacements en
JavaScript En JavaScript, ce type de tableau n’existe tout simplement pas. La
chose qui va le plus se rapprocher d’un tableau associatif en
46. Les classes de
caractères et classes
JavaScript est finalement un objet littéral.
abrégées des
expressions régulières Par ailleurs, notez qu’on va pouvoir utiliser une boucle for… in pour
JavaScript parcourir les propriétés d’un objet littéral une à une. La boucle for…in
est l’équivalent de la boucle for…of mais pour les objets.
47. Les
métacaractères point,
Illustrons immédiatement cela avec un exemple :
alternatives, ancres et
quantificateurs des
expressions régulières
JavaScript

48. Créer des sous


masques et des
assertions dans les
expressions régulières
JavaScript

49. Les drapeaux,


options ou marqueurs
des expressions
régulières JavaScript

NOTIONS AVANCÉES
SUR LES FONCTIONS
JAVASCRIPT

50. Paramètres du
reste et opérateur de
décomposition des
fonctions JavaScript

51. Les fonctions


fléchées JavaScript

Privacy & Cookies Policy


EDIT ON
52. Les closures en HTML JS Result
JavaScript

let pierre = {
53. Gestion du délai 'prenom' : 'Pierre',
d’exécution en 'age' : 29,
JavaScript avec 'sport' : 'trail',
'cours' : ['HTML', ' CSS', ' JavaScript']
setTimeout() et
};
setInterval()
for(let propriete in pierre){
GESTION DES document.getElementById('p1').innerHTML +=
ERREURS ET MODE pierre[propriete] + '<br>';
STRICT EN }
JAVASCRIPT
Resources

54. Gestion des erreurs


en JavaScript
On comment ici par initialiser une variable let propriete. A chaque
nouveau passage dans la boucle, cette variable reçoit le nom d’une
55. Le mode strict en
JavaScript
propriété de notre objet littéral let pierre. On accède à la valeur liée au
nom de la propriété en question avec la syntaxe pierre[propriete] et on
L’ASYNCHRONE EN l’ajoute au texte de notre paragraphe p id='p1' pour l’afficher.
JAVASCRIPT

56. Introduction à
l’asynchrone en
JavaScript Les propriétés et les méthodes du
57. Les promesses en
constructeur Array()
JavaScript
Le constructeur Array() ne possède que deux propriétés : la propriété
58. Utiliser async et length qui retourne le nombre d’éléments d’un tableau et la propriété
await pour créer des prototype qui est une propriété que possèdent tous les constructeurs
promesses plus en JavaScript.
lisibles en JavaScript

Array() possède également une trentaine de méthodes et certaines


59. Le chemin critique
du rendu et les
d’entre elles vont être très puissantes et vont pouvoir nous être très
attributs HTML async utiles. Nous allons ici étudier celles qu’il faut connaitre.
et defer
Les méthodes push() et pop()
SYMBOLES,
ITÉRATEURS ET
GÉNÉRATEURS EN La méthode push() va nous permettre d’ajouter des éléments en fin de
JAVASCRIPT tableau et va retourner la nouvelle taille du tableau. Nous allons
passer les éléments à ajouter en argument.
Privacy & Cookies Policy
La méthode pop() va elle nous permettre de supprimer le dernier
60. Les symboles et
l’objet Symbol en élément d’un tableau et va retourner l’élément supprimé.
JavaScript

61. Les protocoles et


objets Iterable et
Iterateur en JavaScript

62. Les générateurs en


Javascript

STOCKAGE DE
DONNÉES DANS LE
NAVIGATEUR EN
JAVASCRIPT

63. Les cookies en


JavaScript

64. L’API Web Storage :


localstorage et
sessionstorage en
JavaScript

EDIT ON
65. Utiliser l’API de HTML JS Result
stockage IndexedDB
en JavaScript let prenoms = ['Pierre', 'Mathilde'];
let ages = [29, 27, 32];
L’ÉLÉMENT HTML
CANVAS ET L’API /*On ajoute 2 éléments à "prenoms" et on récupère la
CANVAS nouvelle taille du tableau
*renvoyée par push() dans une variable "taille"*/
let taille = prenoms. push('Florian', 'Camille');
66. Présentation de
l’élément HTML //On supprime le dernier élément de ages et on récupère
canvas et de l’API l'élément supprimé dans del
Canvas let del = ages.pop();

67. Dessiner des document.getElementById('p1').innerHTML = taille + '


rectangles dans un éléments dans prenoms';
élément HTML canvas document.getElementById('p2').innerHTML = '"' + del + '"
supprimé de ages';
en Javascript

68. Définir des tracés


pour dessiner des Resources

Privacy & Cookies Policy


formes dans un
Les méthodes unshift() et shift()
canevas en JavaScript

La méthode unshift() va nous permettre d’ajouter des éléments en


69. Création de
dégradés ou de motifs
début de tableau et va retourner la nouvelle taille du tableau. Nous
dans un canevas en allons passer les éléments à ajouter en argument.
JavaScript
La méthode shift() va elle nous permettre de supprimer le premier
70. Ajout d’ombres et élément d’un tableau et va retourner l’élément supprimé.
utilisation de la
transparence dans un
Ces deux méthodes sont donc les équivalentes des méthodes push()
canevas en JavaScript
et pop() à la différence que les éléments vont être ajoutés ou
71. Ajouter du texte ou supprimés en début de tableau et non pas en fin.
une image dans un
canevas en JavaScript

72. Appliquer des


transformations sur un
canevas en JavaScript

LES MODULES
JAVASCRIPT

73. Les modules


JavaScript : import et
export

JSON, AJAX ET
FETCH EN
JAVASCRIPT

74. Présentation de
JSON et utilisation en
JavaScript

75. Introduction à
l’Ajax en JavaScript

76. Créer des requêtes


Ajax en utilisant l’objet
XMLHttpRequest en
JavaScript

Privacy & Cookies Policy


EDIT ON
77. Présentation et HTML JS Result
utilisation de l’API
Fetch en Javascript
let prenoms = ['Pierre', 'Mathilde'];
let ages = [29, 27, 32];
CONCLUSION DU
COURS COMPLET /*On ajoute 2 éléments au début de "prenoms" et on récupère
JAVASCRIPT la nouvelle taille
*du tableau renvoyée par push() dans une variable
78. Conclusion du "taille"*/
let taille = prenoms.unshift('Florian', 'Camille');
cours complet
//On supprime le premier élément de ages et on récupère
l'élément supprimé dans del
let del = ages.shift();

document.getElementById('p1').innerHTML = 'Tableau prenoms


: ' + prenoms;
document.getElementById('p2').innerHTML = taille + '
éléments dans prenoms';
document.getElementById('p3').innerHTML = '"' + del + '"
supprimé de ages';

Resources

Dans le code ci-dessus, vous pouvez noter qu’on arrive à afficher les
différentes valeurs de notre tableau prenoms dans notre paragraphe
simplement avec document.getElementById('p1').innerHTML = prenoms.

Cela est dû au fait que lorsqu’un tableau doit être représenté par une
valeur texte, JavaScript appelle automatiquement la méthode
toString() sur celui-ci qui concatène les éléments du tableau et renvoie
une chaîne de caractères contenant chacun des éléments, séparés
par des virgules.

En pratique, on n’utilisera pas ce genre d’écriture car nous n’avons


aucun contrôle sur ce qui est renvoyé. Pour un affichage rapide,
cependant, c’est la méthode la plus simple et c’est donc une méthode
que je vais utiliser dans cette leçon pour vous montrer les différents
résultats des opérations.

La méthode splice()
Privacy & Cookies Policy
Pour ajouter, supprimer ou remplacer des éléments dans un tableau,
on peut également utiliser splice().

L’avantage de cette méthode est qu’elle nous permet d’ajouter, de


supprimer ou de remplacer des éléments n’importe où dans un
tableau.

La méthode splice() va pouvoir prendre trois arguments : une position


de départ à partir d’où commencer le changement, le nombre
d’éléments à remplacer et finalement les éléments à ajouter au
tableau.

En précisant la position de départ 0, les changements seront


effectués à partir du début du tableau. En précisant la position 1, ils se
feront à partir du deuxième élément, etc. En précisant une position
négative, les changements seront faits en comptant à partir de la fin :
-1 pour commencer en partant du dernier élément, -2 pour commencer
en partant de l’avant dernier élément, etc.

Si on précise 0 en nombre d’éléments à remplacer, alors aucun


élément ne sera supprimé du tableau de base. Dans ce cas, il sera
nécessaire de préciser des éléments à rajouter.

Enfin, si on ne précise pas d’éléments à rajouter au tableau, le nombre


d’éléments à remplacer tel quel précisé en deuxième argument seront
supprimés du tableau à partir de la position indiquée en premier
argument.

Cette méthode va également retourner un tableau contenant les


éléments supprimés.

Privacy & Cookies Policy


EDIT ON
HTML JS Result

let prenoms = ['Pierre', 'Mathilde', 'Florian', 'Camille'];


let ages = [29, 27, 28, 30];

/*On insère 'Thomas' et 'Manon' dans le tableau prenoms,


après le deuxième élément
*(Mathilde) et sans supprimer d'éléments*/
prenoms.splice(2, 0, 'Thomas', 'Manon');

/*On supprime les deux éléments après le premier ( c'est à


dire 27 et 28) et on
*insère 35 après le premier élément (29)*/
let del = ages.splice(1, 2, 35);

document.getElementById('p1').innerHTML = prenoms;
document.getElementById('p2').innerHTML = ages;
document.getElementById('p3').innerHTML = '"' + del + '"
supprimé de ages';

Resources

Privacy & Cookies Policy


La méthode join()
La méthode join() retourne une chaine de caractères créée en
concaténant les différentes valeurs d’un tableau. Le séparateur utilisé
par défaut sera la virgule mais nous allons également pouvoir passer
le séparateur de notre choix en argument de join().

Privacy & Cookies Policy


EDIT ON
HTML JS Result

let prenoms = ['Pierre', 'Mathilde', 'Florian', 'Camille'];


let ages = [29, 27, 28, 30];

/*On insère 'Thomas' et 'Manon' dans le tableau prenoms,


après le deuxième élément
*(Mathilde) et sans supprimer d'éléments*/
prenoms.splice(2, 0, 'Thomas', 'Manon');

/*On supprime les deux éléments après le premier ( c'est à


dire 27 et 28) et on
*insère 35 après le premier élément (29)*/
let del = ages.splice(1, 2, 35);

document.getElementById('p1').innerHTML = prenoms.join(' -
');
document.getElementById('p2').innerHTML = ages.join(' / ');
document.getElementById('p3').innerHTML = '"' + del + '"
supprimé de ages';

Resources

La méthode slice()
La méthode slice() renvoie un tableau créé en découpant un tableau
de départ.

Cette méthode va prendre en premier argument facultatif la position


de départ où doit commencer la découpe de notre tableau de départ.
Si la position passée est un nombre négatif, alors le début de la
découpe sera calculé à partir de la fin du tableau de départ. Si aucune
position de départ n’est passée, la découpe commencera depuis le
début du tableau de départ.

On va également pouvoir lui passer en second argument facultatif la


position où doit s’arrêter la découpe du tableau de départ. Si la
position passée est un nombre négatif, alors la fin de la découpe sera
calculé à partir de la fin du tableau de départ. Si aucune position de fin
n’est passée, alors on récupèrera le tableau de départ jusqu’à la fin
pour créer notre nouveau tableau.
Privacy & Cookies Policy
EDIT ON
HTML JS Result

let prenoms = ['Pierre', 'Mathilde', 'Thomas', 'Manon',


'Florian', 'Camille'];
let ages = [29, 27, 28, 30];

let sliceprenoms = prenoms.slice(2, 4);


let sliceages = ages.slice(2);

document.getElementById('p1').innerHTML =
sliceprenoms.join(' - ');
document.getElementById('p2').innerHTML = sliceages.join('
/ ');

Resources

La méthode concat()
La méthode concat() va nous permettre de fusionner différents
tableaux entre eux pour en créer un nouveau qu’elle va renvoyer.

Cette méthode va prendre en arguments les tableaux que l’on souhaite


concaténer à un premier de départ qu’on va pouvoir choisir
arbitrairement.

Privacy & Cookies Policy


Notez que l’on peut fusionner autant de tableaux que l’on veut entre
eux. Les tableaux de départ ne sont pas modifiés.

EDIT ON
HTML JS Result

let prenoms = ['Pierre', 'Mathilde', 'Thomas', 'Manon',


'Florian', 'Camille'];
let ages = [29, 27, 28, 30];
let sports = ['Trail', 'Triathlon', 'Natation'];

let tbglobal = prenoms.concat(ages, sports);

document.getElementById('p1').innerHTML = tbglobal.join ('


- ');

Resources

La méthode includes()
La méthode includes() permet de déterminer si un tableau contient une
valeur qu’on va passer en argument. Si c’est le cas, includes() renvoie
true. Dans le cas contraire, cette méthode renvoie false.

Cette méthode est sensible à la casse (une majuscule est considérée


comme une entité différente d’une minuscule).

Privacy & Cookies Policy


EDIT ON
HTML JS Result

let prenoms = ['Pierre', 'Mathilde', 'Thomas', 'Manon',


'Florian', 'Camille'];

if(prenoms.includes('Mathilde')){
document.getElementById('p1').innerHTML = 'Mathilde est
dans le tableau';
}

if(prenoms.includes('mathilde')){
document.getElementById('p2').innerHTML = 'mathilde est
dans le tableau';
}

Resources

Précédent Suivant

Laisser un commentaire
Vous devez vous connecter pour publier un commentaire.

Connexion Confidentialité CGV Sitemap

Privacy & Cookies Policy


© Pierre Giraud - Toute reproduction interdite - Mentions légales

Privacy & Cookies Policy

Vous aimerez peut-être aussi