Académique Documents
Professionnel Documents
Culture Documents
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
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
MANIPULATION DU
BOM EN
JAVASCRIPT
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
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'.
NOTIONS AVANCÉES
SUR LES FONCTIONS
JAVASCRIPT
50. Paramètres du
reste et opérateur de
décomposition des
fonctions 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
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
STOCKAGE DE
DONNÉES DANS LE
NAVIGATEUR 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();
LES MODULES
JAVASCRIPT
JSON, AJAX ET
FETCH EN
JAVASCRIPT
74. Présentation de
JSON et utilisation en
JavaScript
75. Introduction à
l’Ajax en JavaScript
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.
La méthode splice()
Privacy & Cookies Policy
Pour ajouter, supprimer ou remplacer des éléments dans un tableau,
on peut également utiliser splice().
document.getElementById('p1').innerHTML = prenoms;
document.getElementById('p2').innerHTML = ages;
document.getElementById('p3').innerHTML = '"' + del + '"
supprimé de ages';
Resources
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.
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.
EDIT ON
HTML JS Result
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.
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.