first comit

exercices/01-variables-declaration.js

@@ -0,0 +1,10 @@
+/*
+Énoncé :
+1. déclarez une variable `nom` en utilisant `let` et assignez-lui votre nom.
+2. déclarez une variable `age` en utilisant `let` et assignez-lui votre âge.
+3. affichez ces deux variables dans la console.
+*/
+let nom = "Johan";
+let age = 22;
+console.log(nom);
+console.log(age);

exercices/02-constantes.js

@@ -0,0 +1,9 @@
+/*
+Énoncé :
+1. déclarez une constante `PI` avec la valeur `3.14159`.
+2. essayez de réassigner une nouvelle valeur à `PI`.
+3. commentez la ligne qui provoque l'erreur et expliquez pourquoi dans un commentaire.
+*/
+const PI = 3.14159
+// PI = 52
+// On ne peux pas modifier une variable const car il s'agit d'une variable constante non modifiable afin de protéger la valeur

exercices/03-types-primitifs.js

@@ -0,0 +1,16 @@
+/*
+Énoncé :
+- affichez le type de chaque variable ci-dessous en utilisant `typeof`.
+*/
+
+let uneChaine = "Bonjour";
+let unNombre = 42;
+let unBooleen = true;
+let uneVariableNulle = null;
+let uneVariableNonDefinie;
+
+console.log(typeof uneChaine)
+console.log(typeof unNombre)
+console.log(typeof unBooleen)
+console.log(typeof uneVariableNulle)
+console.log(typeof uneVariableNonDefinie)

exercices/04-operateurs-arithmetiques.js

@@ -0,0 +1,14 @@
+/*
+Énoncé :
+1. créez deux variables `a` et `b` avec des valeurs numériques.
+2. affichez le résultat de leur addition, soustraction, multiplication, division et le modulo (reste de la division).
+*/
+
+let a = 4
+let b = 2
+
+console.log(a + b)
+console.log(a - b)
+console.log(a * b)
+console.log(a / b);
+console.log(a % b)

exercices/05-concatenation-chaines.js

@@ -0,0 +1,10 @@
+/*
+Énoncé :
+1. créez une variable `debut` avec la valeur "Bonjour, je m'appelle ".
+2. créez une variable `nom` avec votre nom.
+3. concaténez ces deux chaînes en utilisant l'opérateur `+` pour former une phrase complète et affichez-la.
+*/
+
+let debut = "Bonjour, je m'appelle "
+let name = "Johan"
+console.log(debut + name)

exercices/06-template-literals.js

@@ -0,0 +1,9 @@
+/*
+Énoncé :
+1. créez deux variables `animal` et `cri`.
+2. en utilisant les template literals (backticks), construisez une phrase comme "Le [animal] fait [cri] !" et affichez-la.
+*/
+
+let animal = "chien"
+let cri = "woaf"
+console.log(`Le ${animal} fait ${cri} !`);

exercices/07-condition-if-else.js

@@ -0,0 +1,20 @@
+/*
+Énoncé :
+1. créez une variable `note` avec une valeur entre 0 et 20.
+2. écrivez une structure conditionnelle qui affiche :
+   - "Excellent" si la note est supérieure à 18.
+   - "Bien" si la note est entre 14 et 18 (inclus).
+   - "Passable" si la note est entre 10 et 13 (inclus).
+   - "Échec" si la note est inférieure à 10.
+*/
+
+let note = 15;
+if (note > 18) {
+    console.log("Excellent");
+} else if (note >= 14 && note <= 18) {
+    console.log("Bien");
+} else if (note >= 10 && note <= 13) {
+    console.log("Passable");
+} else {
+    console.log("Échec");
+}

exercices/08-operateur-ternaire.js

@@ -0,0 +1,7 @@
+/*
+Énoncé :
+1. créez une variable `age`.
+2. en utilisant l'opérateur ternaire, créez une variable `message` qui contient "Vous êtes majeur" si l'âge est de 18 ou plus,
+   et "Vous êtes mineur" sinon.
+3. affichez le `message`.
+*/

exercices/09-boucle-for.js

@@ -0,0 +1,4 @@
+/*
+Énoncé :
+- en utilisant une boucle `for`, affichez les nombres de 1 à 5 dans la console.
+*/

exercices/10-boucle-while.js

@@ -0,0 +1,4 @@
+/*
+Énoncé :
+- en utilisant une boucle `while`, faites un compte à rebours de 10 à 0, puis affichez "Décollage !".
+*/

exercices/11-fizzbuzz.js

@@ -0,0 +1,8 @@
+/*
+Énoncé :
+écrivez une boucle qui affiche les nombres de 1 à 100.
+- pour les multiples de 3, affichez "Fizz" à la place du nombre.
+- pour les multiples de 5, affichez "Buzz".
+- pour les nombres qui sont des multiples de 3 et de 5, affichez "FizzBuzz".
+- sinon, affichez le nombre.
+*/

exercices/12-fonction-declaration.js

@@ -0,0 +1,12 @@
+/*
+Énoncé :
+1. créez une fonction nommée `calculerSurface` qui prend une `largeur` et une `hauteur` en paramètres.
+2. la fonction doit retourner la surface (largeur * hauteur).
+3. appelez cette fonction avec des valeurs de votre choix et affichez le résultat.
+*/
+
+function calculerSurface(largeur, hauteur) {
+    return largeur * hauteur;
+}
+let surface = calculerSurface(10, 20);
+console.log("La surface est de :", surface);

exercices/13-fonction-flechee.js

@@ -0,0 +1,10 @@
+/*
+Énoncé :
+- réécrivez la fonction de l'exercice précédent `calculerSurface` en utilisant la syntaxe des fonctions fléchées.
+*/
+
+const calculerSurface = (largeur, hauteur) => {
+    return largeur * hauteur;
+};
+let surface = calculerSurface(5, 8);
+console.log("La surface est de :", surface);

exercices/14-fonction-parametres-defaut.js

@@ -0,0 +1,7 @@
+/*
+Énoncé :
+1. créez une fonction `saluer` qui prend un `nom` et une `salutation` en paramètres.
+2. la `salutation` doit avoir "Bonjour" comme valeur par défaut.
+3. la fonction doit retourner une chaîne comme "[Salutation], [nom] !".
+4. appelez la fonction une fois avec les deux arguments, et une fois seulement avec le nom.
+*/

exercices/15-portee-variables.js

@@ -0,0 +1,16 @@
+/*
+Énoncé :
+1. prédisez ce que le code ci-dessous va afficher.
+2. décommentez la dernière ligne et expliquez l'erreur dans un commentaire.
+*/
+
+let variableGlobale = "Je suis globale";
+
+function testerPortee() {
+    let variableLocale = "Je suis locale";
+    console.log(variableGlobale);
+    console.log(variableLocale);
+}
+
+testerPortee();
+// console.log(variableLocale);

exercices/16-objet-litteral.js

@@ -0,0 +1,14 @@
+/*
+Énoncé :
+1. créez un objet `voiture` en utilisant la syntaxe littérale.
+2. cet objet doit avoir les propriétés suivantes : `marque` (chaîne), `modele` (chaîne), `annee` (nombre), `enMarche` (booléen).
+3. affichez l'objet `voiture` dans la console.
+*/
+const voiture = {
+    marque: "Renault",
+    modele: "Clio",
+    annee: 2022,
+    enMarche: false
+};
+
+console.log(voiture);

exercices/17-objet-acces-proprietes.js

@@ -0,0 +1,10 @@
+/*
+Énoncé :
+En reprenant l'objet `voiture` de l'exercice précédent :
+1. affichez la `marque` en utilisant la notation point (`.`).
+2. affichez le `modele` en utilisant la notation crochet (`[]`).
+3. modifiez la valeur de `enMarche` à `true`.
+4. affichez l'objet complet pour vérifier le changement.
+*/
+const voiture = { marque: "Renault", modele: "Clio", annee: 2022, enMarche: false };
+

exercices/18-objet-methode.js

@@ -0,0 +1,7 @@
+/*
+Énoncé :
+1. créez un objet `personne` avec les propriétés `nom` et `age`.
+2. ajoutez une méthode `sePresenter` à cet objet.
+3. cette méthode doit afficher une phrase comme "Bonjour, je m'appelle [nom] et j'ai [age] ans." en utilisant `this`.
+4. appelez la méthode `sePresenter`.
+*/

exercices/19-objet-destructuration.js

@@ -0,0 +1,6 @@
+/*
+Énoncé :
+- soit l'objet `produit` ci-dessous.
+- en utilisant la déstructuration d'objet, extrayez les propriétés `nom` et `prix` dans des variables distinctes et affichez-les.
+*/
+const produit = { id: 123, nom: "Souris sans fil", prix: 29.99, stock: 150 };

exercices/20-objet-spread-operator.js

@@ -0,0 +1,7 @@
+/*
+Énoncé :
+1. créez un objet `parametresUtilisateur` avec des propriétés comme `theme` et `langue`.
+2. créez un autre objet `detailsUtilisateur` avec `nom` et `email`.
+3. en utilisant l'opérateur de propagation (spread operator), fusionnez ces deux objets en un seul objet `utilisateurComplet`.
+4. affichez le nouvel objet.
+*/

exercices/21-tableau-creation-acces.js

@@ -0,0 +1,6 @@
+/*
+Énoncé :
+1. créez un tableau `jours` contenant les jours de la semaine.
+2. affichez le premier jour de la semaine.
+3. affichez le dernier jour de la semaine en utilisant la propriété `length`.
+*/

exercices/22-tableau-boucle-forEach.js

@@ -0,0 +1,6 @@
+/*
+Énoncé :
+- soit le tableau `nombres`.
+- utilisez la méthode `forEach` pour afficher chaque nombre du tableau multiplié par 2.
+*/
+const nombres = [10, 20, 30, 40, 50];

exercices/23-tableau-methode-map.js

@@ -0,0 +1,7 @@
+/*
+Énoncé :
+- soit le tableau `mots`.
+- utilisez la méthode `map` pour créer un nouveau tableau `longueurs` contenant la longueur de chaque mot.
+- affichez le nouveau tableau.
+*/
+const mots = ["javascript", "est", "vraiment", "puissant"];

exercices/24-tableau-methode-filter.js

@@ -0,0 +1,7 @@
+/*
+Énoncé :
+- soit le tableau `notes`.
+- utilisez la méthode `filter` pour créer un nouveau tableau `bonnesNotes` contenant
+- uniquement les notes supérieures ou égales à 10.
+*/
+const notes = [5, 12, 8, 15, 9, 19, 10];

exercices/25-tableau-methode-find.js

@@ -0,0 +1,10 @@
+/*
+Énoncé :
+- soit le tableau d'utilisateurs.
+- utilisez la méthode `find` pour trouver l'utilisateur qui a l'email "eve@example.com" et affichez son objet.
+*/
+const utilisateurs = [
+    { id: 1, nom: "Frank", email: "frank@example.com" },
+    { id: 2, nom: "Grace", email: "grace@example.com" },
+    { id: 3, nom: "Eve", email: "eve@example.com" }
+];

exercices/26-tableau-methode-reduce.js

@@ -0,0 +1,10 @@
+/*
+Énoncé :
+- soit le tableau `panier`.
+- utilisez la méthode `reduce` pour calculer le prix total du panier.
+*/
+const panier = [
+    { nom: "Pommes", prix: 2.5 },
+    { nom: "Lait", prix: 1.2 },
+    { nom: "Pain", prix: 1.8 }
+];

exercices/27-tableau-chainage-methodes.js

@@ -0,0 +1,8 @@
+/*
+Énoncé :
+soit le tableau `nombres`. en une seule instruction (en chaînant les méthodes), faites les opérations suivantes :
+1. Gardez uniquement les nombres supérieurs à 10 (`filter`).
+2. Multipliez chaque nombre restant par 3 (`map`).
+3. Affichez le résultat final.
+*/
+const nombres = [5, 12, 8, 20, 15, 9];

exercices/28-tableau-spread-operator.js

@@ -0,0 +1,7 @@
+/*
+Énoncé :
+1. créez deux tableaux `europe` et `asie`.
+2. en utilisant l'opérateur de propagation, créez un troisième tableau `monde` qui contient tous les pays des deux premiers.
+*/
+const europe = ["France", "Allemagne", "Espagne"];
+const asie = ["Chine", "Japon", "Inde"];

exercices/29-tableau-destructuration.js

@@ -0,0 +1,7 @@
+/*
+Énoncé :
+- soit le tableau `classement`.
+- en utilisant la déstructuration de tableau, extrayez les trois premiers dans des variables `premier`, `deuxieme`, et `troisieme`.
+- affichez ces trois variables.
+*/
+const classement = ["Bolt", "Gatlin", "De Grasse", "Blake"];

exercices/30-dom-selection-id.js

@@ -0,0 +1,5 @@
+/*
+Énoncé :
+sélectionnez l'élément `<h1>` qui a l'ID `titre-principal` et stockez-le dans une variable `titre`.
+affichez cette variable dans la console.
+*/

exercices/31-dom-selection-querySelector.js

@@ -0,0 +1,5 @@
+/*
+Énoncé :
+1. sélectionnez le premier paragraphe qui a la classe `paragraphe` en utilisant `querySelector`.
+2. affichez-le dans la console.
+*/

exercices/32-dom-modification-contenu.js

@@ -0,0 +1,4 @@
+/*
+Énoncé :
+- sélectionnez le `<h1>` par son ID et modifiez son contenu textuel pour qu'il affiche "Bienvenue sur ma page !".
+*/

exercices/33-dom-modification-style.js

@@ -0,0 +1,4 @@
+/*
+Énoncé :
+sélectionnez le `<h1>` et changez sa couleur de texte en bleu et sa taille de police à `48px`.
+*/

exercices/34-dom-evenement-click.js

@@ -0,0 +1,6 @@
+/*
+Énoncé :
+1. sélectionnez le bouton par son ID `mon-bouton`.
+2. ajoutez un écouteur d'événement pour le 'click'.
+3. quand le bouton est cliqué, affichez "Vous avez cliqué sur le bouton !" dans la console.
+*/

exercices/35-dom-interaction-input.js

@@ -0,0 +1,6 @@
+/*
+Énoncé :
+1. sélectionnez le bouton et l'input par leurs IDs.
+2. ajoutez un écouteur d'événement 'click' au bouton.
+3. quand on clique sur le bouton, récupérez la valeur de l'input et affichez-la dans une alerte.
+*/

exercices/36-dom-creation-element.js

@@ -0,0 +1,7 @@
+/*
+Énoncé :
+1. sélectionnez la liste `<ul>` par son ID `ma-liste`.
+2. créez un nouvel élément `<li>` en utilisant `document.createElement`.
+3. donnez-lui le contenu textuel "Nouvel élément ajouté".
+4. ajoutez ce nouvel élément à la fin de la liste `<ul>`.
+*/

exercices/37-es6-rest-parameters.js

@@ -0,0 +1,6 @@
+/*
+Énoncé :
+- créez une fonction fléchée `somme` qui peut prendre un nombre indéfini d'arguments numériques en utilisant les "rest parameters".
+- la fonction doit retourner la somme de tous les arguments.
+- testez-la avec différents nombres d'arguments.
+*/

exercices/38-es6-classes.js

@@ -0,0 +1,6 @@
+/*
+Énoncé :
+1. créez une classe `Animal` avec un `constructor` qui initialise un `nom`.
+2. ajoutez une méthode `crier` à cette classe qui affiche "L'animal crie.".
+3. créez une instance de cette classe et appelez la méthode `crier`.
+*/

exercices/39-es6-modules-export.js

@@ -0,0 +1,7 @@
+/*
+Énoncé :
+- dans ce fichier, créez deux fonctions :
+1. `additionner(a, b)` qui retourne la somme des deux nombres.
+2. `multiplier(a, b)` qui retourne le produit des deux nombres.
+- exportez ces deux fonctions pour qu'elles puissent être utilisées dans un autre fichier.
+*/

exercices/40-es6-modules-import.js

@@ -0,0 +1,9 @@
+/*
+Énoncé :
+1. importez les fonctions `additionner` et `multiplier` depuis le fichier `./39-es6-modules-export.js`.
+2. utilisez-les pour calculer 10 + 5 et 10 * 5.
+3. affichez les résultats.
+
+Note : pour que cela fonctionne dans le navigateur, votre balise script dans index.html doit avoir l'attribut type="module".
+<script type="module" src="exercices/40-es6-modules-import.js"></script>
+*/