first comit

.idea/.gitignore

@@ -0,0 +1,10 @@
+# Default ignored files
+/shelf/
+/workspace.xml
+# Ignored default folder with query files
+/queries/
+# Datasource local storage ignored files
+/dataSources/
+/dataSources.local.xml
+# Editor-based HTTP Client requests
+/httpRequests/

.idea/inspectionProfiles/profiles_settings.xml

@@ -0,0 +1,6 @@
+<component name="InspectionProjectProfileManager">
+  <settings>
+    <option name="USE_PROJECT_PROFILE" value="false" />
+    <version value="1.0" />
+  </settings>
+</component>

.idea/m00_tp02_rappels_js.iml

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<module type="PYTHON_MODULE" version="4">
+  <component name="NewModuleRootManager">
+    <content url="file://$MODULE_DIR$" />
+    <orderEntry type="jdk" jdkName="Python 3.13 (m00_tp02_rappels_js)" jdkType="Python SDK" />
+    <orderEntry type="sourceFolder" forTests="false" />
+  </component>
+</module>

.idea/misc.xml

@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="ProjectRootManager" version="2" project-jdk-name="Python 3.13 (m00_tp02_rappels_js)" project-jdk-type="Python SDK" />
+</project>

.idea/modules.xml

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="ProjectModuleManager">
+    <modules>
+      <module fileurl="file://$PROJECT_DIR$/.idea/m00_tp02_rappels_js.iml" filepath="$PROJECT_DIR$/.idea/m00_tp02_rappels_js.iml" />
+    </modules>
+  </component>
+</project>

.idea/vcs.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="VcsDirectoryMappings">
+    <mapping directory="$PROJECT_DIR$" vcs="Git" />
+  </component>
+</project>

README.md

@@ -0,0 +1,72 @@
+# TP Rappels JavaScript
+
+## Installation
+
+1. Assurez-vous que Node.js est installé sur votre machine.
+
+2. Décompressez l'archive ZIP du projet dans un répertoire de votre choix.
+
+3. Ouvrez WebStorm, puis sélectionnez "Open" et choisissez le dossier où vous avez décompressé le projet.
+
+## Démarrage
+
+L'arborescence du projet doit ressembler à ceci :
+
+```
+/tp-javascript-rappels
+├── README.md               // Ce fichier d'instructions générales, comment lancer les exercices.
+|
+├── exercices/
+│   ├── 01-variables-declaration.js
+│   ├── 02-constantes.js
+│   ├── ...
+│   └── 40-es6-modules-import.js
+|
+├── corrections/
+│   ├── 01-variables-declaration.js
+│   ├── 02-constantes.js
+│   ├── ...
+│   └── 40-es6-modules-import.js
+|
+└── index.html              // Un fichier HTML simple pour les exercices de manipulation du DOM
+```
+
+Chaque exercice est isolé afin que vous puissiez les exécuter indépendamment, et vous concentrez sur un seul concept à la fois.
+
+Une correction est fournie afin que vous puissiez vérifier votre travail.
+
+## Thème des exercices
+
+- Exercices 1 à 11 : partie 1, fondamentaux (variables, types, opérateurs)
+- Exercices 12 à 15 : partie 2, fonctions
+- Exercices 16 à 20 : partie 3, objets
+- Exercices 21 à 29 : partie 4, tableaux
+- Exercices 30 à 36 : partie 5, manipulation du DOM
+- Exercices 37 à 40 : partie 6, ES6+ (syntaxe moderne)
+
+## Exécution des exercices
+
+- Pour les exercices de logiques pures (calculs, tableaux, objets), vous pouvez utiliser la console intégrée de WebStorm (bouton vert Play `current file` en haut à droite) ou lancer `node exercices/xx-nom-exercice.js` directement depuis le terminal fourni par WebStorm.
+- Pour les exercices liés au DOM (30 à 36), lier votre script à `index.html`, puis ouvrez ce fichier HTML dans votre navigateur. Vous pouvez utiliser les outils de développement (typiquement F12 sous Google Chrome) pour voir les résultats dans la console.
+
+## Conseils
+
+Commencez svp par traiter uniquement les questions suivantes :
+- `01-variables-declaration.js`
+- `02-constantes.js`
+- `06-template-literals.js`
+- `09-boucle-for.js`
+- `12-fonction-declaration.js`
+- `13-fonction-flechee.js`
+- `16-objet-litteral.js`
+- `17-objet-acces-proprietes.js`
+- `18-objet-methode.js`
+- `21-tableau-creation-acces.js`
+- `22-tableau-methode-map.js`
+- `24-tableau-methode-filter.js`
+- `27-tableau-chainage-methodes.js`
+- `35-dom-interaction-input.js`
+
+Cette sélection a été pensée pour vous faire passer par les concepts clés dans un ordre cohérent. Une fois que vous aurez terminé cette sélection, prévenez-moi ! Nous discuterons des concepts restants. Si vous le souhaitez, vous pourrez terminer chez vous.
+
+Pour les plus curieux d'entre vous qui auraient terminé la sélection, sentez-vous libres de commencer à explorer la suite en toute autonomie.

corrections/01-variables-declaration.js

@@ -0,0 +1,6 @@
+let nom = "Alice";
+let age = 30;
+
+console.log(nom);
+console.log(age);
+console.log("Nom:", nom, "- Age:", age);

corrections/02-constantes.js

@@ -0,0 +1,5 @@
+const PI = 3.14159;
+console.log(PI);
+
+// PI = 3; // Décommenter cette ligne provoquera une TypeError.
+// Explication : On ne peut pas réassigner une nouvelle valeur à une constante (déclarée avec `const`).

corrections/03-types-primitifs.js

@@ -0,0 +1,11 @@
+let uneChaine = "Bonjour";
+let unNombre = 42;
+let unBooleen = true;
+let uneVariableNulle = null;
+let uneVariableNonDefinie;
+
+console.log("Type de uneChaine:", typeof uneChaine); // string
+console.log("Type de unNombre:", typeof unNombre); // number
+console.log("Type de unBooleen:", typeof unBooleen); // boolean
+console.log("Type de uneVariableNulle:", typeof uneVariableNulle); // object (bizarrerie de JS)
+console.log("Type de uneVariableNonDefinie:", typeof uneVariableNonDefinie); // undefined

corrections/04-operateurs-arithmetiques.js

@@ -0,0 +1,8 @@
+let a = 15;
+let b = 4;
+
+console.log("Addition:", a + b);
+console.log("Soustraction:", a - b);
+console.log("Multiplication:", a * b);
+console.log("Division:", a / b);
+console.log("Modulo (reste):", a % b);

corrections/05-concatenation-chaines.js

@@ -0,0 +1,5 @@
+let debut = "Bonjour, je m'appelle ";
+let nom = "Bob";
+let phrase = debut + nom + ".";
+
+console.log(phrase);

corrections/06-template-literals.js

@@ -0,0 +1,5 @@
+let animal = "chat";
+let cri = "miaou";
+
+let phrase = `Le ${animal} fait ${cri} !`;
+console.log(phrase);

corrections/07-condition-if-else.js

@@ -0,0 +1,11 @@
+let note = 15;
+
+if (note > 18) {
+    console.log("Excellent");
+} else if (note >= 14) { // Pas besoin de vérifier <= 18 car le cas > 18 est déjà traité
+    console.log("Bien");
+} else if (note >= 10) { // Pas besoin de vérifier <= 13
+    console.log("Passable");
+} else {
+    console.log("Échec");
+}

corrections/08-operateur-ternaire.js

@@ -0,0 +1,4 @@
+let age = 20;
+let message = age >= 18 ? "Vous êtes majeur" : "Vous êtes mineur";
+
+console.log(message);

corrections/09-boucle-for.js

@@ -0,0 +1,3 @@
+for (let i = 1; i <= 5; i++) {
+    console.log(i);
+}

corrections/10-boucle-while.js

@@ -0,0 +1,8 @@
+let compteur = 10;
+
+while (compteur >= 0) {
+    console.log(compteur);
+    compteur--;
+}
+
+console.log("Décollage !");

corrections/11-fizzbuzz.js

@@ -0,0 +1,11 @@
+for (let i = 1; i <= 100; i++) {
+    if (i % 3 === 0 && i % 5 === 0) {
+        console.log("FizzBuzz");
+    } else if (i % 3 === 0) {
+        console.log("Fizz");
+    } else if (i % 5 === 0) {
+        console.log("Buzz");
+    } else {
+        console.log(i);
+    }
+}

corrections/12-fonction-declaration.js

@@ -0,0 +1,6 @@
+function calculerSurface(largeur, hauteur) {
+    return largeur * hauteur;
+}
+
+let surface = calculerSurface(10, 20);
+console.log("La surface est de :", surface);

corrections/13-fonction-flechee.js

@@ -0,0 +1,9 @@
+const calculerSurface = (largeur, hauteur) => {
+    return largeur * hauteur;
+};
+
+// Version encore plus concise
+// const calculerSurface = (largeur, hauteur) => largeur * hauteur;
+
+let surface = calculerSurface(5, 8);
+console.log("La surface est de :", surface);

corrections/14-fonction-parametres-defaut.js

@@ -0,0 +1,6 @@
+const saluer = (nom, salutation = "Bonjour") => {
+    return `${salutation}, ${nom} !`;
+};
+
+console.log(saluer("Marie", "Bonsoir"));   // affiche "Bonsoir, Marie !"
+console.log(saluer("Jean"));                        // affiche "Bonjour, Jean !"

corrections/15-portee-variables.js

@@ -0,0 +1,12 @@
+let variableGlobale = "Je suis globale";
+
+function testerPortee() {
+    let variableLocale = "Je suis locale";
+    console.log(variableGlobale); // affiche "Je suis globale"
+    console.log(variableLocale); // affiche "Je suis locale"
+}
+
+testerPortee();
+// - console.log(variableLocale); // cette ligne cause une ReferenceError.
+// - explication : `variableLocale` est définie à l'intérieur de la fonction `testerPortee`.
+// - elle n'existe que dans la portée (le "scope") de cette fonction et n'est pas accessible de l'extérieur.

corrections/16-objet-litteral.js

@@ -0,0 +1,8 @@
+const voiture = {
+    marque: "Renault",
+    modele: "Clio",
+    annee: 2022,
+    enMarche: false
+};
+
+console.log(voiture);

corrections/17-objet-acces-proprietes.js

@@ -0,0 +1,13 @@
+const voiture = { marque: "Renault", modele: "Clio", annee: 2022, enMarche: false };
+
+// 1.
+console.log("Marque:", voiture.marque);
+
+// 2.
+console.log("Modèle:", voiture['modele']);
+
+// 3.
+voiture.enMarche = true;
+
+// 4.
+console.log("Voiture mise à jour:", voiture);

corrections/18-objet-methode.js

@@ -0,0 +1,13 @@
+const personne = {
+    nom: "Carole",
+    age: 35,
+    sePresenter: function() {
+        console.log(`Bonjour, je m'appelle ${this.nom} et j'ai ${this.age} ans.`);
+    }
+    // Syntaxe alternative plus courte :
+    // sePresenter() {
+    //   console.log(`Bonjour, je m'appelle ${this.nom} et j'ai ${this.age} ans.`);
+    // }
+};
+
+personne.sePresenter();

corrections/19-objet-destructuration.js

@@ -0,0 +1,6 @@
+const produit = { id: 123, nom: "Souris sans fil", prix: 29.99, stock: 150 };
+
+const { nom, prix } = produit;
+
+console.log("Nom du produit:", nom);
+console.log("Prix:", prix);

corrections/20-objet-spread-operator.js

@@ -0,0 +1,13 @@
+const parametresUtilisateur = {
+    theme: "sombre",
+    langue: "fr"
+};
+
+const detailsUtilisateur = {
+    nom: "David",
+    email: "david@example.com"
+};
+
+const utilisateurComplet = { ...parametresUtilisateur, ...detailsUtilisateur };
+
+console.log(utilisateurComplet);

corrections/21-tableau-creation-acces.js

@@ -0,0 +1,4 @@
+const jours = ["Lundi", "Mardi", "Mercredi", "Jeudi", "Vendredi", "Samedi", "Dimanche"];
+
+console.log("Premier jour:", jours[0]);
+console.log("Dernier jour:", jours[jours.length - 1]);

corrections/22-tableau-boucle-forEach.js

@@ -0,0 +1,5 @@
+const nombres = [10, 20, 30, 40, 50];
+
+nombres.forEach((nombre) => {
+    console.log(nombre * 2);
+});

corrections/23-tableau-methode-map.js

@@ -0,0 +1,5 @@
+const mots = ["javascript", "est", "vraiment", "puissant"];
+
+const longueurs = mots.map(mot => mot.length);
+
+console.log(longueurs); // Affiche [10, 3, 8, 8]

corrections/24-tableau-methode-filter.js

@@ -0,0 +1,5 @@
+const notes = [5, 12, 8, 15, 9, 19, 10];
+
+const bonnesNotes = notes.filter(note => note >= 10);
+
+console.log(bonnesNotes); // Affiche [12, 15, 19, 10]

corrections/25-tableau-methode-find.js

@@ -0,0 +1,9 @@
+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" }
+];
+
+const utilisateurTrouve = utilisateurs.find(user => user.email === "eve@example.com");
+
+console.log(utilisateurTrouve);

corrections/26-tableau-methode-reduce.js

@@ -0,0 +1,11 @@
+const panier = [
+    { nom: "Pommes", prix: 2.5 },
+    { nom: "Lait", prix: 1.2 },
+    { nom: "Pain", prix: 1.8 }
+];
+
+const total = panier.reduce((accumulateur, produit) => {
+    return accumulateur + produit.prix;
+}, 0); // 0 est la valeur initiale de l'accumulateur
+
+console.log("Prix total du panier:", total); // Affiche 5.5

corrections/27-tableau-chainage-methodes.js

@@ -0,0 +1,7 @@
+const nombres = [5, 12, 8, 20, 15, 9];
+
+const resultat = nombres
+    .filter(n => n > 10)     // Étape 1 : [12, 20, 15]
+    .map(n => n * 3);        // Étape 2 : [36, 60, 45]
+
+console.log(resultat);

corrections/28-tableau-spread-operator.js

@@ -0,0 +1,6 @@
+const europe = ["France", "Allemagne", "Espagne"];
+const asie = ["Chine", "Japon", "Inde"];
+
+const monde = [...europe, ...asie];
+
+console.log(monde);

corrections/29-tableau-destructuration.js

@@ -0,0 +1,7 @@
+const classement = ["Bolt", "Gatlin", "De Grasse", "Blake"];
+
+const [premier, deuxieme, troisieme] = classement;
+
+console.log("Premier:", premier);
+console.log("Deuxième:", deuxieme);
+console.log("Troisième:", troisieme);

corrections/30-dom-selection-id.js

@@ -0,0 +1,2 @@
+const titre = document.getElementById('titre-principal');
+console.log(titre);

corrections/31-dom-selection-querySelector.js

@@ -0,0 +1,2 @@
+const premierParagraphe = document.querySelector('.paragraphe');
+console.log(premierParagraphe);

corrections/32-dom-modification-contenu.js

@@ -0,0 +1,2 @@
+const titre = document.getElementById('titre-principal');
+titre.textContent = "Bienvenue sur ma page !";

corrections/33-dom-modification-style.js

@@ -0,0 +1,3 @@
+const titre = document.getElementById('titre-principal');
+titre.style.color = "blue";
+titre.style.fontSize = "48px";

corrections/34-dom-evenement-click.js

@@ -0,0 +1,5 @@
+const bouton = document.getElementById('mon-bouton');
+
+bouton.addEventListener('click', function() {
+    console.log("Vous avez cliqué sur le bouton !");
+});

corrections/35-dom-interaction-input.js

@@ -0,0 +1,7 @@
+const bouton = document.getElementById('mon-bouton');
+const champTexte = document.getElementById('champ-texte');
+
+bouton.addEventListener('click', () => {
+    const valeur = champTexte.value;
+    alert(`La valeur de l'input est : ${valeur}`);
+});

corrections/36-dom-creation-element.js

@@ -0,0 +1,11 @@
+// 1.
+const liste = document.getElementById('ma-liste');
+
+// 2.
+const nouvelElement = document.createElement('li');
+
+// 3.
+nouvelElement.textContent = "Nouvel élément ajouté";
+
+// 4.
+liste.appendChild(nouvelElement);

corrections/37-es6-rest-parameters.js

@@ -0,0 +1,7 @@
+const somme = (...nombres) => {
+    return nombres.reduce((total, nombre) => total + nombre, 0);
+};
+
+console.log(somme(1, 2, 3)); // Affiche 6
+console.log(somme(10, 20, 30, 40)); // Affiche 100
+console.log(somme(5)); // Affiche 5

corrections/38-es6-classes.js

@@ -0,0 +1,12 @@
+class Animal {
+    constructor(nom) {
+        this.nom = nom;
+    }
+
+    crier() {
+        console.log(`${this.nom} crie.`);
+    }
+}
+
+const monAnimal = new Animal("Lion");
+monAnimal.crier();

corrections/39-es6-modules-export.js

@@ -0,0 +1,7 @@
+export const additionner = (a, b) => {
+    return a + b;
+};
+
+export const multiplier = (a, b) => {
+    return a * b;
+};

corrections/40-es6-modules-import.js

@@ -0,0 +1,7 @@
+import { additionner, multiplier } from './39-es6-modules-export.js';
+
+const somme = additionner(10, 5);
+const produit = multiplier(10, 5);
+
+console.log("Somme:", somme); // 15
+console.log("Produit:", produit); // 50

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>
+*/

index.html

@@ -0,0 +1,63 @@
+<!DOCTYPE html>
+<html lang="fr">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>TP JavaScript - Partie 5 - Manipulation du DOM - Exercices 30 à 36</title>
+    <style>
+        body {
+            font-family: sans-serif;
+            background-color: #f4f4f4;
+            color: #333;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            min-height: 100vh;
+            margin: 0;
+        }
+        .container {
+            background-color: white;
+            padding: 2rem;
+            border-radius: 8px;
+            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
+            text-align: center;
+        }
+        button {
+            padding: 0.5rem 1rem;
+            font-size: 1rem;
+            cursor: pointer;
+            margin-top: 1rem;
+        }
+        input {
+            padding: 0.5rem;
+            font-size: 1rem;
+            margin-top: 1rem;
+            display: block;
+            width: calc(100% - 1rem);
+        }
+        ul {
+            list-style-position: inside;
+            text-align: left;
+            margin-top: 1rem;
+        }
+    </style>
+</head>
+<body>
+
+<main class="container">
+    <h1 id="titre-principal">Regardez la console !</h1>
+
+    <p class="paragraphe">Un paragraphe pour les exercices.</p>
+
+    <button id="mon-bouton">Cliquez-moi !</button>
+    <input type="text" id="champ-texte" placeholder="Écrivez quelque chose...">
+
+    <ul id="ma-liste">
+        <li>Premier élément</li>
+    </ul>
+</main>
+
+<script src="./exercices/30-dom-selection-id.js"></script>
+
+</body>
+</html>