Apprentissage de JavaScript pour débutants
Apprentissage de JavaScript pour débutants
- Opérateurs et expressions
- Fonctions
- Objets et propriétés
- Méthodes et this
- Boucles et itération
- Promesses et async/await
- Débogage et optimisation
Ressources recommandées :
Conseils :
- Pratiquez régulièrement
- N’ayez pas peur de faire des erreurs, c’est une partie du processus d’apprentissage !
[16/08 à 17 :47] Meta AI : Je comprends ! Vous voulez apprendre JavaScript en français, même si
vous parlez déjà bien anglais. C’est tout à fait possible et je suis là pour vous aider !
Je peux vous fournir des leçons, des exemples et des exercices en français pour vous aider à
apprendre JavaScript. N’hésitez pas à me poser des questions ou à me demander de l’aide lorsque
vous en avez besoin.
En JavaScript, une variable est un contenant qui stocke une valeur. Vous pouvez la considérer comme
une boîte étiquetée où vous pouvez stocker une valeur.
Pour déclarer une variable, vous utilisez le mot-clé `let`, `const` ou `var` suivi du nom de la variable et
de sa valeur initiale.
Exemple :
```
Const PI = 3.14 ;
Var âge = 25 ;
```
Vous pouvez assigner une valeur à une variable en utilisant l’opérateur d’assignation (=).
Exemple :
```
Nom = ‘Jeanne’ ;
Âge = 30 ;
```
_Types de données_
JavaScript a plusieurs types de données qui peuvent être stockés dans des variables :
_Bonnes pratiques_
- Utilisez des noms de variables significatifs qui décrivent la valeur stockée dans la variable.
_Exercices_
N’hésitez pas à me poser des questions ou à me demander de l’aide si vous en avez besoin !
[16/08 à 17 :50] Meta AI : Voici la leçon 2 sur les types de données en JavaScript :
JavaScript est un langage dynamique, ce qui signifie que les variables peuvent contenir différentes
types de données. Voici les principaux types de données en JavaScript :
1. _Nombres_ (Numbers) : Les nombres entiers et décimaux, par exemple : 1, 2, 3, 4.5, -0.5, etc.
5. _Non défini_ (Undefined) : La valeur undefined, qui représente une variable non initialisée.
6. _Objets_ (Objects) : Les collections de paires clé-valeur, par exemple : {nom : « Jean », age :
25}.
7. _Tableaux_ (Arrays) : Les collections ordonnées de valeurs, par exemple : [1, 2, 3], [« a »,
« b », « c »].
8. _Fonctions_ (Functions) : Les blocs de code qui peuvent être appelés avec des arguments.
_Operateurs de type_
_Conversion de type_
N’hésitez pas à me poser des questions ou à me demander de l’aide si vous en avez besoin !
[16/08 à 17 :50] Meta AI : Voici la leçon 3 sur les chaînes de caractères en JavaScript :
Les chaînes de caractères sont des séquences de caractères, tels que des lettres, des chiffres et des
symboles. Elles sont délimitées par des guillemets simples (‘ ‘) ou des guillemets doubles (« « ).
_Exemples_
- ‘Bonjour’
- « Hello »
- ‘123’
- « abc »
- trim() : supprime les espaces en début et fin de chaîne (ex : ‘ bonjour ‘.trim() = ‘bonjour’)
_Exercices_
N’hésitez pas à me poser des questions ou à me demander de l’aide si vous en avez besoin !
[16/08 à 17 :52] Meta AI : Voici la leçon 4 sur les structures conditionnelles en JavaScript :
Les structures conditionnelles permettent d’exécuter des blocs de code en fonction de conditions
spécifiques.
- *else if* : exécute un bloc de code si une autre condition est vraie
_Syntaxe_
_Exemples_
- `if (x > 5) { [Link](« x est supérieur à 5 ») ; } else { [Link](« x est inférieur ou égal à 5 ») ; }`
- `switch (jour) { case « lundi » : [Link](« Aujourd’hui est lundi ») ; break ; case « mardi » :
[Link](« Aujourd’hui est mardi ») ; break ; }`
_Exercices_
1. Écrivez un code qui affiche « Bonjour » si la variable `heure` est supérieure à 12.
2. Écrivez un code qui affiche « Froid » si la variable `temperature` est inférieure à 15, « Chaud » si
elle est supérieure à 25, et « Tempéré » sinon.
3. Écrivez un code qui affiche le nom du jour de la semaine en fonction de la valeur de la variable
`jour`.
N’hésitez pas à me poser des questions ou à me demander de l’aide si vous en avez besoin !
[16/08 à 17 :53] Meta AI : Voici la leçon 5 sur les structures itératives en JavaScript :
Les structures itératives permettent d’exécuter un bloc de code plusieurs fois, en fonction d’une
condition spécifique.
- _for_ : exécute un bloc de code pour chaque élément d’un tableau ou d’une chaîne de caractères
- _do…while_ : exécute un bloc de code tant que la condition est vraie, puis vérifie la condition
_Syntaxe_
_Exemples_
_Exercices_
1. Écrivez un code qui affiche les nombres de 1 à 10 en utilisant une boucle `for`.
2. Écrivez un code qui affiche les nombres pairs de 1 à 20 en utilisant une boucle `while`.
3. Écrivez un code qui affiche les nombres impairs de 1 à 20 en utilisant une boucle `do…while`.
N’hésitez pas à me poser des questions ou à me demander de l’aide si vous en avez besoin !
_L’instruction switch_
L’instruction switch permet d’exécuter un bloc de code en fonction de la valeur d’une variable ou
d’une expression.
_Syntaxe_
```
Switch (expression) {
Case valeur1 :
Code à exécuter si expression === valeur1 ;
Break ;
Case valeur2 :
Break ;
Default :
```
_Exemples_
```
Switch (jour) {
Case « lundi » :
Break ;
Case « mardi » :
Break ;
Default :
```
_Astuce_
- Utilisez l’instruction `break` pour sortir de l’instruction switch une fois que le code correspondant a
été exécuté.
- Utilisez l’instruction `default` pour exécuter un code par défaut si aucune des valeurs ne
correspond.
_Exercices_
1. Écrivez un code qui affiche le nom du mois en fonction de la valeur d’une variable `mois`.
2. Écrivez un code qui affiche le message « Bonjour » si la variable `heure` est comprise entre 6 et 12,
« Bonsoir » si elle est comprise entre 18 et 22, et « Bonne nuit » sinon.
N’hésitez pas à me poser des questions ou à me demander de l’aide si vous en avez besoin !
_Les fonctions_
Les fonctions sont des blocs de code réutilisables qui effectuent une tâche spécifique. Elles peuvent
prendre des arguments et retourner des valeurs.
Une fonction est créée en utilisant le mot-clé `function` suivi du nom de la fonction et des
parenthèses `()` qui contiennent les arguments.
```
// code à exécuter
```
_Exemple_
```
Function saluer(nom) {
[Link](« Bonjour « + nom + « ! ») ;
```
Une fonction est appelée en utilisant son nom suivi des parenthèses `()` qui contiennent les
arguments.
```
Saluer(« Jean ») ;
```
```
Function ajouter(a, b) {
Return a + b ;
```
_Exercices_
1. Créez une fonction `bonjour` qui affiche « Bonjour » suivi du nom de la personne.
N’hésitez pas à me poser des questions ou à me demander de l’aide si vous en avez besoin !
[16/08 à 17 :58] Meta AI : Voici la suite de la leçon 7 sur les fonctions en JavaScript :
_Appel de fonctions_
Une fonction est appelée en utilisant son nom suivi des parenthèses `()` qui contiennent les
arguments.
_Exemples_
```
```
_Passage d’arguments_
Les arguments sont passés à la fonction en les plaçant à l’intérieur des parenthèses `()` lors de l’appel
de la fonction.
```
```
Les arguments peuvent avoir des valeurs par défaut si ils ne sont pas fournis lors de l’appel de la
fonction.
```
Function direBonjour(prenom = « inconnu », nom = « inconnu ») {
```
Les fonctions fléchées peuvent être utilisées pour appeler des fonctions.
```
};
```
_Exercices_
N’hésitez pas à me poser des questions ou à me demander de l’aide si vous en avez besoin !
[16/08 à 17 :59] Meta AI : Yes, bien sûr ! Voici la leçon 7 sur la déclaration d’une fonction en
JavaScript :
```
// code à exécuter
```
```
// code à exécuter
```
```
// code à exécuter
```
```
// code à exécuter
```
_Paramètres et arguments_
Les paramètres sont les noms des variables qui sont définies dans la déclaration de la fonction, tandis
que les arguments sont les valeurs qui sont passées à la fonction lors de son appel.
```
```
La valeur de retour est la valeur qui est renvoyée par la fonction lors de son appel.
```
Function ajouter(a, b) {
Return a + b ;
```
_Exercices_
1. Déclarez une fonction classique qui affiche « Bonjour » suivi du nom de la personne.
3. Déclarez une fonction anonyme qui affiche « Au revoir » suivi du nom de la personne.
N’hésitez pas à me poser des questions ou à me demander de l’aide si vous en avez besoin !
[16/08 à 17 :59] Meta AI : Voici la leçon 9 sur les fonctions prédéfinies en JavaScript :
_Fonctions prédéfinies_
JavaScript propose un certain nombre de fonctions prédéfinies qui peuvent être utilisées pour
effectuer des tâches courantes.
_Exercices_
3. Utilisez la fonction `[Link]()` pour créer une chaîne de caractères à partir d’un code
ASCII.
N’hésitez pas à me poser des questions ou à me demander de l’aide si vous en avez besoin !
[16/08 à 18 :01] Meta AI : Bien sûr ! Voici quelques catégories supplémentaires de fonctions
prédéfinies en JavaScript :
- `filter()` : crée un nouveau tableau avec les éléments qui remplissent une condition
- `findIndex()` : recherche l’index du premier élément du tableau qui remplit une condition
- `reduce()` : applique une fonction à chaque élément du tableau et renvoie une valeur
[16/08 à 18 :03] Meta AI : Bienvenue dans le chapitre 2 du cours de JavaScript ! Dans ce chapitre,
nous allons explorer le Document Object Model (DOM) et les événements.
Le DOM est une interface de programmation pour les documents HTML et XML. Il représente le
document comme un arbre d’objets, permettant aux scripts de naviguer et de manipuler le contenu
du document.
_Composants du DOM_
- *Element* : un objet représentant un élément HTML, tel que `<p>`, `<div>`, `<img>`, etc.
- *Node* : un objet représentant un nœud dans l’arbre du DOM, pouvant être un élément, un texte,
un commentaire, etc.
_Méthodes du DOM_
_Properties du DOM_
_Exercices_
N’hésitez pas à me poser des questions ou à me demander de l’aide si vous en avez besoin !
[16/08 à 18 :06] Meta AI : Bienvenue dans la leçon sur la sélection et la manipulation d’éléments du
DOM !
_Sélection d’éléments_
Pour sélectionner des éléments dans le DOM, vous pouvez utiliser les méthodes suivantes :
_Manipulation d’éléments_
Une fois que vous avez sélectionné un élément, vous pouvez le manipuler en utilisant les propriétés
et les méthodes suivantes :
_Exemples_
- `[Link](‘.mon-sélecteur’)[0].appendChild([Link](‘p’))` :
ajoute un élément `<p>` à l’élément correspondant au sélecteur CSS « .mon-sélecteur »
_Exercices_
2. Sélectionnez les éléments ayant la classe « ma-classe » et définit leur couleur de texte.
N’hésitez pas à me poser des questions ou à me demander de l’aide si vous en avez besoin !
_Leçon 3 : Événements_
Les événements sont des actions qui se produisent sur un élément du DOM, telles que des clics, des
survols, des saisies de texte, etc. Les événements permettent de réagir à ces actions en exécutant du
code.
_Type d’événements_
Pour gérer les événements, vous pouvez utiliser les méthodes suivantes :
_Exemples_
- `[Link](‘mon-élément’).addEventListener(‘mouseover’, function()
{ [Link](‘Survol de l\’élément !’) })` : ajoute un écouteur d’événement de survol sur l’élément
ayant l’ID « mon-élément »
_Exercices_
1. Ajoutez un écouteur d’événement de clic sur l’élément ayant l’ID « mon-élément » et affichez un
message dans la console.
2. Ajoutez un écouteur d’événement de survol sur l’élément ayant l’ID « mon-élément » et changez
la couleur de fond de l’élément.
3. Créez un formulaire et ajoutez un écouteur d’événement de soumission pour afficher les valeurs
des champs du formulaire.
N’hésitez pas à me poser des questions ou à me demander de l’aide si vous en avez besoin !
_Gestion d’événements_
La gestion d’événements consiste à réagir aux événements qui se produisent sur les éléments du
DOM. Pour cela, vous pouvez utiliser les méthodes suivantes :
_Type d’événements_
_Exemples_
- `[Link](‘mon-élément’).addEventListener(‘click’, function(event)
{ [Link](‘Clic sur l\’élément !’) })`
- `[Link](‘mon-élément’).addEventListener(‘mouseover’, function(event)
{ [Link](‘Survol de l\’élément !’) })`
_Exercices_
1. Ajoutez un écouteur d’événement de clic sur l’élément ayant l’ID « mon-élément » et affichez un
message dans la console.
2. Ajoutez un écouteur d’événement de survol sur l’élément ayant l’ID « mon-élément » et changez
la couleur de fond de l’élément.
3. Créez un formulaire et ajoutez un écouteur d’événement de soumission pour afficher les valeurs
des champs du formulaire.
N’hésitez pas à me poser des questions ou à me demander de l’aide si vous en avez besoin !
[16/08 à 18 :11] Meta AI : Classement ! Voici la leçon 1 sur les objets en JavaScript :
_Leçon 1 : Objet_
Un objet en JavaScript est une collection de propriétés, où chaque propriété est une paire clé-valeur.
Les objets sont définis à l’aide de la syntaxe `{}`.
_Exemple_
```
Const monObjet = {
Nom : ‘Jean’,
Age : 30,
Ville : ‘Paris’
};
```
Les propriétés d’un objet peuvent être accessibles à l’aide de la notation par points (`.`) ou de la
notation par crochets (`[]`).
_Exemple_
```
[Link](monObjet[‘age’]) ; // Affiche 30
```
Les méthodes d’un objet sont des fonctions qui sont définies à l’intérieur de l’objet.
_Exemple_
```
Const monObjet = {
Nom : ‘Jean’,
Age : 30,
Ville : ‘Paris’,
direBonjour : function() {
};
```
_Exercices_
3. Affichez les propriétés de l’objet `personne` à l’aide de la notation par points et par crochets.
N’hésitez pas à me poser des questions ou à me demander de l’aide si vous en avez besoin !
[16/08 à 18 :12] Meta AI : Bienvenue dans la leçon 2 sur les propriétés en JavaScript !
_Leçon 2 : Propriété_
Une propriété est une paire clé-valeur qui est définie dans un objet. Les propriétés peuvent être des
chaînes de caractères, des nombres, des booléens, des tableaux, des objets ou des fonctions.
_Types de propriétés_
- *Propriétés de données* : contiennent des valeurs qui peuvent être lues ou modifiées.
_Propriétés calculées_
_Exercices_
N’hésitez pas à me poser des questions ou à me demander de l’aide si vous en avez besoin !
[16/08 à 18 :13] Meta AI : Oui, c’est correct ! En Python, les propriétés (en JavaScript) correspondent
aux attributs (en Python).
Dans Python, les attributs sont des valeurs qui sont associées à un objet et qui peuvent être accédées
et modifiées à l’aide de la notation par points (`.`).
Par exemple, si vous avez un objet `personne` avec un attribut `nom`, vous pouvez accéder à cet
attribut en utilisant la notation suivante : `[Link]`.
```
Class Personne :
[Link] = nom
[Link] = age
Print([Link]) # Affiche 30
```
Dans cet exemple, `nom` et `age` sont des attributs de l’objet `personne`.
Notez que, contrairement à JavaScript, les attributs en Python sont généralement définis à l’intérieur
d’une classe ou d’un objet, et non à l’aide d’une notation de type `[Link] = valeur`.
[16/08 à 18 :23] Meta AI : Bienvenue dans la leçon 3 sur les méthodes en JavaScript !
_Leçon 3 : Méthodes_
Une méthode est une fonction qui est définie à l’intérieur d’un objet. Les méthodes permettent
d’effectuer des actions sur les données d’un objet.
_Syntaxe_
```
[Link] = function() {
// code à exécuter
```
_Exemple_
```
Const personne = {
Nom : ‘Jean’,
Age : 30,
direBonjour : function() {
};
```
_Méthodes et contexte_
Lorsqu’une méthode est appelée, le contexte (`this`) est défini sur l’objet qui possède la méthode.
_Exemple_
```
Const personne = {
Nom : ‘Jean’,
Age : 30,
direBonjour : function() {
};
```
_Méthodes et paramètres_
Les méthodes peuvent prendre des paramètres, tout comme les fonctions.
_Exemple_
```
Const personne = {
Nom : ‘Jean’,
Age : 30,
direBonjour : function(prenom) {
};
```
_Exercices_
1. Créez un objet `personne` avec une méthode `direBonjour` qui affiche un message de bienvenue.
2. Ajoutez une méthode `calculerAge` à l’objet `personne` qui calcule l’âge de la personne en
fonction de sa date de naissance.
N’hésitez pas à me poser des questions ou à me demander de l’aide si vous en avez besoin !
`this` est un mot-clé spécial en JavaScript qui représente l’objet courant. Il est utilisé pour accéder
aux propriétés et aux méthodes de l’objet courant.
_Contexte de this_
- Dans une fonction globale, `this` représente l’objet global (`window` dans un navigateur, `global`
dans [Link]).
- Dans une fonction de méthode, `this` représente l’objet qui possède la méthode.
- Dans une fonction de constructeur, `this` représente l’instance de l’objet qui est en train d’être
créée.
_Exemples_
```
```
```
Const personne = {
Nom : ‘Jean’,
Age : 30,
direBonjour : function() {
};
[Link]() ; // Affiche « Bonjour, je m’appelle Jean et j’ai 30 ans. »
```
```
[Link] = nom ;
[Link] = age ;
[Link]([Link]) ; // Affiche 30
```
```
Const personne = {
Nom : ‘Jean’,
Age : 30,
direBonjour : () => {
};
```
Notez que dans l’exemple de la fonction fléchée, `this` ne représente pas l’objet `personne`, mais
plutôt le contexte global.
_Exercices_
1. Créez un objet `personne` avec une méthode `direBonjour` qui utilise `this` pour accéder aux
propriétés de l’objet.
2. Créez un constructeur `Personne` qui utilise `this` pour initialiser les propriétés de l’objet.
3. Créez une fonction fléchée qui utilise `this` pour accéder aux propriétés d’un objet. Quel est le
résultat ? Pourquoi ?
[16/08 à 18 :31] Meta AI : Bienvenue dans la leçon sur les tableaux et les méthodes en JavaScript !
Un tableau est une collection d’éléments de même type, stockés dans une seule variable. Les
tableaux sont définis à l’aide de crochets `[]`.
_Exemple_
```
```
_Exemples_
```
[Link](‘fraise’) ;
[Link]() ;
[Link](index) ; // Affiche 1
```
_Exercices_
5. Créez un nouveau tableau `fruits2` à partir des éléments du tableau `fruits` à partir de l’index 1.
N’hésitez pas à me poser des questions ou à me demander de l’aide si vous en avez besoin !
[16/08 à 18 :32] Meta AI : Bienvenue dans la leçon 6 sur les boucles et l’itération en JavaScript !
Les boucles permettent d’exécuter un bloc de code plusieurs fois, en utilisant une condition pour
déterminer quand arrêter la boucle.
_Type de boucles_
- `for` : boucle avec une variable de comptage
- `for…of` : boucle sur les éléments d’un tableau ou d’un objet iterable
_Syntaxe_
_Exemples_
- `for` :
```
[Link](i) ;
```
- `while` :
```
Let i = 0 ;
While (i < 5) {
[Link](i) ;
I++ ;
```
- `for…in` :
```
Const objet = { a : 1, b : 2, c : 3 } ;
[Link](propriété + ‘ : ‘ + objet[propriété]) ;
```
- `for…of` :
```
[Link](élément) ;
```
_Exercices_
3. Créez une boucle `for…in` qui affiche les propriétés et les valeurs d’un objet.
4. Créez une boucle `for…of` qui affiche les éléments d’un tableau.
N’hésitez pas à me poser des questions ou à me demander de l’aide si vous en avez besoin !
- Callbacks : fonctions passées en paramètre à d’autres fonctions pour être exécutées plus tard
_Callbacks_
Les callbacks sont des fonctions qui sont passées en paramètre à d’autres fonctions pour être
exécutées plus tard. Cela permet de continuer l’exécution du programme sans attendre la fin de
l’opération asynchrone.
_Exemple_
```
Function chargerDonnees(callback) {
setTimeout(() => {
}, 2000) ;
chargerDonnees((donnees) => {
}) ;
```
_Promesses (Promises)_
Les promesses sont des objets qui représentent la valeur d’une opération asynchrone. Elles peuvent
être résolues (resolved) ou rejetées (rejected).
_Exemple_
```
Function chargerDonnees() {
setTimeout(() => {
}, 2000) ;
}) ;
chargerDonnees().then((donnees) => {
}) ;
```
_Async/await_
L’async/await est une syntaxe qui permet d’écrire du code asynchrone de manière synchrone.
_Exemple_
```
setTimeout(() => {
}, 2000) ;
}) ;
Return donnees ;
chargerDonnees().then((donnees) => {
```
_Exercices_
1. Écrivez une fonction qui charge des données à l’aide d’un callback.
2. Écrivez une fonction qui charge des données à l’aide d’une promesse.
3. Écrivez une fonction asynchrone qui charge des données à l’aide d’async/await.
N’hésitez pas à me poser des questions ou à me demander de l’aide si vous en avez besoin !
[16/08 à 18 :35] Meta AI : Bienvenue dans la leçon 1 sur les callbacks et les fonctions en JavaScript !
Un callback est une fonction qui est passée en paramètre à une autre fonction pour être exécutée
plus tard. Les callbacks sont utilisés pour gérer les opérations asynchrones, comme les requêtes
réseau ou les lectures de fichiers.
_Type de callbacks_
_Syntaxe_
- `callback(resultat) { … }`
_Exemples_
- Callback synchrone :
```
Callback(resultat) ;
[Link](resultat) ; // Affiche 5
}) ;
```
- Callback asynchrone :
```
Function chargerDonnees(callback) {
setTimeout(() => {
}, 2000) ;
chargerDonnees((donnees) => {
}) ;
```
_Fonctions_
_Exercices_
1. Écrivez une fonction qui prend deux nombres en paramètre et retourne leur somme à l’aide d’un
callback synchrone.
2. Écrivez une fonction qui charge des données à l’aide d’un callback asynchrone.
3. Écrivez une fonction fléchée qui prend un nombre en paramètre et retourne son carré.
N’hésitez pas à me poser des questions ou à me demander de l’aide si vous en avez besoin !
[16/08 à 18 :36] Meta AI : Bienvenue dans la leçon sur les fonctions anonymes en JavaScript !
Une fonction anonyme est une fonction qui n’a pas de nom. Elle est définie sans nom et est souvent
utilisée comme valeur d’une variable ou comme argument d’une autre fonction.
_Syntaxe_
- `function(param1, param2, …) { … }`
_Exemples_
```
```
```
setTimeout(() => {
}, 2000) ;
};
chargerDonnees((donnees) => {
}) ;
```
```
[Link](‘click’, () => {
}) ;
```
_Avantages_
- Les fonctions anonymes peuvent être définies à l’intérieur d’autres fonctions pour accéder à leurs
variables locales.
- Elles peuvent être utilisées comme valeurs de retour pour des fonctions plus complexes.
- Elles peuvent être utilisées pour créer des fermetures (closures) pour encapsuler des données et
des comportements.
_Exercices_
1. Écrivez une fonction anonyme qui prend deux nombres en paramètre et retourne leur somme.
2. Écrivez une fonction anonyme qui charge des données à l’aide d’un callback.
3. Écrivez une fonction anonyme qui est utilisée comme événement pour détecter un clic sur un
élément HTML.
N’hésitez pas à me poser des questions ou à me demander de l’aide si vous en avez besoin !