commit 9db552c24fc7f2bb85510485efc3ae21ddbad165 Author: Johan Date: Mon Dec 15 14:53:51 2025 +0100 first comit diff --git a/.idea/.gitignore b/.idea/.gitignore new file mode 100644 index 0000000..ab1f416 --- /dev/null +++ b/.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/ diff --git a/.idea/inspectionProfiles/profiles_settings.xml b/.idea/inspectionProfiles/profiles_settings.xml new file mode 100644 index 0000000..105ce2d --- /dev/null +++ b/.idea/inspectionProfiles/profiles_settings.xml @@ -0,0 +1,6 @@ + + + + \ No newline at end of file diff --git a/.idea/m00_tp02_rappels_js.iml b/.idea/m00_tp02_rappels_js.iml new file mode 100644 index 0000000..ebb037c --- /dev/null +++ b/.idea/m00_tp02_rappels_js.iml @@ -0,0 +1,8 @@ + + + + + + + + \ No newline at end of file diff --git a/.idea/misc.xml b/.idea/misc.xml new file mode 100644 index 0000000..5922c7d --- /dev/null +++ b/.idea/misc.xml @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/.idea/modules.xml b/.idea/modules.xml new file mode 100644 index 0000000..78d88bf --- /dev/null +++ b/.idea/modules.xml @@ -0,0 +1,8 @@ + + + + + + + + \ No newline at end of file diff --git a/.idea/vcs.xml b/.idea/vcs.xml new file mode 100644 index 0000000..94a25f7 --- /dev/null +++ b/.idea/vcs.xml @@ -0,0 +1,6 @@ + + + + + + \ No newline at end of file diff --git a/README.md b/README.md new file mode 100644 index 0000000..078eaa7 --- /dev/null +++ b/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. \ No newline at end of file diff --git a/corrections/01-variables-declaration.js b/corrections/01-variables-declaration.js new file mode 100644 index 0000000..68f8ec3 --- /dev/null +++ b/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); \ No newline at end of file diff --git a/corrections/02-constantes.js b/corrections/02-constantes.js new file mode 100644 index 0000000..76ee3bf --- /dev/null +++ b/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`). \ No newline at end of file diff --git a/corrections/03-types-primitifs.js b/corrections/03-types-primitifs.js new file mode 100644 index 0000000..57d2525 --- /dev/null +++ b/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 \ No newline at end of file diff --git a/corrections/04-operateurs-arithmetiques.js b/corrections/04-operateurs-arithmetiques.js new file mode 100644 index 0000000..a623cc8 --- /dev/null +++ b/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); \ No newline at end of file diff --git a/corrections/05-concatenation-chaines.js b/corrections/05-concatenation-chaines.js new file mode 100644 index 0000000..5287f4a --- /dev/null +++ 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); \ No newline at end of file diff --git a/corrections/06-template-literals.js b/corrections/06-template-literals.js new file mode 100644 index 0000000..246f395 --- /dev/null +++ b/corrections/06-template-literals.js @@ -0,0 +1,5 @@ +let animal = "chat"; +let cri = "miaou"; + +let phrase = `Le ${animal} fait ${cri} !`; +console.log(phrase); \ No newline at end of file diff --git a/corrections/07-condition-if-else.js b/corrections/07-condition-if-else.js new file mode 100644 index 0000000..6d975cb --- /dev/null +++ b/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"); +} \ No newline at end of file diff --git a/corrections/08-operateur-ternaire.js b/corrections/08-operateur-ternaire.js new file mode 100644 index 0000000..614c91c --- /dev/null +++ b/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); \ No newline at end of file diff --git a/corrections/09-boucle-for.js b/corrections/09-boucle-for.js new file mode 100644 index 0000000..b865df7 --- /dev/null +++ b/corrections/09-boucle-for.js @@ -0,0 +1,3 @@ +for (let i = 1; i <= 5; i++) { + console.log(i); +} \ No newline at end of file diff --git a/corrections/10-boucle-while.js b/corrections/10-boucle-while.js new file mode 100644 index 0000000..999589a --- /dev/null +++ b/corrections/10-boucle-while.js @@ -0,0 +1,8 @@ +let compteur = 10; + +while (compteur >= 0) { + console.log(compteur); + compteur--; +} + +console.log("Décollage !"); \ No newline at end of file diff --git a/corrections/11-fizzbuzz.js b/corrections/11-fizzbuzz.js new file mode 100644 index 0000000..bb01316 --- /dev/null +++ b/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); + } +} \ No newline at end of file diff --git a/corrections/12-fonction-declaration.js b/corrections/12-fonction-declaration.js new file mode 100644 index 0000000..7f8aa9a --- /dev/null +++ b/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); \ No newline at end of file diff --git a/corrections/13-fonction-flechee.js b/corrections/13-fonction-flechee.js new file mode 100644 index 0000000..850bf09 --- /dev/null +++ b/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); \ No newline at end of file diff --git a/corrections/14-fonction-parametres-defaut.js b/corrections/14-fonction-parametres-defaut.js new file mode 100644 index 0000000..261c143 --- /dev/null +++ b/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 !" \ No newline at end of file diff --git a/corrections/15-portee-variables.js b/corrections/15-portee-variables.js new file mode 100644 index 0000000..499d658 --- /dev/null +++ b/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. \ No newline at end of file diff --git a/corrections/16-objet-litteral.js b/corrections/16-objet-litteral.js new file mode 100644 index 0000000..2da6792 --- /dev/null +++ b/corrections/16-objet-litteral.js @@ -0,0 +1,8 @@ +const voiture = { + marque: "Renault", + modele: "Clio", + annee: 2022, + enMarche: false +}; + +console.log(voiture); \ No newline at end of file diff --git a/corrections/17-objet-acces-proprietes.js b/corrections/17-objet-acces-proprietes.js new file mode 100644 index 0000000..506fce5 --- /dev/null +++ b/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); \ No newline at end of file diff --git a/corrections/18-objet-methode.js b/corrections/18-objet-methode.js new file mode 100644 index 0000000..4548246 --- /dev/null +++ b/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(); \ No newline at end of file diff --git a/corrections/19-objet-destructuration.js b/corrections/19-objet-destructuration.js new file mode 100644 index 0000000..0e844b8 --- /dev/null +++ b/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); \ No newline at end of file diff --git a/corrections/20-objet-spread-operator.js b/corrections/20-objet-spread-operator.js new file mode 100644 index 0000000..8e71c55 --- /dev/null +++ b/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); \ No newline at end of file diff --git a/corrections/21-tableau-creation-acces.js b/corrections/21-tableau-creation-acces.js new file mode 100644 index 0000000..31014d2 --- /dev/null +++ b/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]); \ No newline at end of file diff --git a/corrections/22-tableau-boucle-forEach.js b/corrections/22-tableau-boucle-forEach.js new file mode 100644 index 0000000..8d7693e --- /dev/null +++ b/corrections/22-tableau-boucle-forEach.js @@ -0,0 +1,5 @@ +const nombres = [10, 20, 30, 40, 50]; + +nombres.forEach((nombre) => { + console.log(nombre * 2); +}); \ No newline at end of file diff --git a/corrections/23-tableau-methode-map.js b/corrections/23-tableau-methode-map.js new file mode 100644 index 0000000..bfc7899 --- /dev/null +++ b/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] \ No newline at end of file diff --git a/corrections/24-tableau-methode-filter.js b/corrections/24-tableau-methode-filter.js new file mode 100644 index 0000000..b313b1e --- /dev/null +++ b/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] \ No newline at end of file diff --git a/corrections/25-tableau-methode-find.js b/corrections/25-tableau-methode-find.js new file mode 100644 index 0000000..90f46c1 --- /dev/null +++ b/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); \ No newline at end of file diff --git a/corrections/26-tableau-methode-reduce.js b/corrections/26-tableau-methode-reduce.js new file mode 100644 index 0000000..530be81 --- /dev/null +++ b/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 \ No newline at end of file diff --git a/corrections/27-tableau-chainage-methodes.js b/corrections/27-tableau-chainage-methodes.js new file mode 100644 index 0000000..b20a255 --- /dev/null +++ b/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); \ No newline at end of file diff --git a/corrections/28-tableau-spread-operator.js b/corrections/28-tableau-spread-operator.js new file mode 100644 index 0000000..6f8075c --- /dev/null +++ b/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); \ No newline at end of file diff --git a/corrections/29-tableau-destructuration.js b/corrections/29-tableau-destructuration.js new file mode 100644 index 0000000..4899942 --- /dev/null +++ b/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); \ No newline at end of file diff --git a/corrections/30-dom-selection-id.js b/corrections/30-dom-selection-id.js new file mode 100644 index 0000000..20cca16 --- /dev/null +++ b/corrections/30-dom-selection-id.js @@ -0,0 +1,2 @@ +const titre = document.getElementById('titre-principal'); +console.log(titre); \ No newline at end of file diff --git a/corrections/31-dom-selection-querySelector.js b/corrections/31-dom-selection-querySelector.js new file mode 100644 index 0000000..53867c6 --- /dev/null +++ b/corrections/31-dom-selection-querySelector.js @@ -0,0 +1,2 @@ +const premierParagraphe = document.querySelector('.paragraphe'); +console.log(premierParagraphe); \ No newline at end of file diff --git a/corrections/32-dom-modification-contenu.js b/corrections/32-dom-modification-contenu.js new file mode 100644 index 0000000..7dcd49e --- /dev/null +++ b/corrections/32-dom-modification-contenu.js @@ -0,0 +1,2 @@ +const titre = document.getElementById('titre-principal'); +titre.textContent = "Bienvenue sur ma page !"; \ No newline at end of file diff --git a/corrections/33-dom-modification-style.js b/corrections/33-dom-modification-style.js new file mode 100644 index 0000000..cc61a73 --- /dev/null +++ b/corrections/33-dom-modification-style.js @@ -0,0 +1,3 @@ +const titre = document.getElementById('titre-principal'); +titre.style.color = "blue"; +titre.style.fontSize = "48px"; \ No newline at end of file diff --git a/corrections/34-dom-evenement-click.js b/corrections/34-dom-evenement-click.js new file mode 100644 index 0000000..0878b04 --- /dev/null +++ b/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 !"); +}); \ No newline at end of file diff --git a/corrections/35-dom-interaction-input.js b/corrections/35-dom-interaction-input.js new file mode 100644 index 0000000..25a284a --- /dev/null +++ b/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}`); +}); \ No newline at end of file diff --git a/corrections/36-dom-creation-element.js b/corrections/36-dom-creation-element.js new file mode 100644 index 0000000..2e313ef --- /dev/null +++ b/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); \ No newline at end of file diff --git a/corrections/37-es6-rest-parameters.js b/corrections/37-es6-rest-parameters.js new file mode 100644 index 0000000..596380f --- /dev/null +++ b/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 \ No newline at end of file diff --git a/corrections/38-es6-classes.js b/corrections/38-es6-classes.js new file mode 100644 index 0000000..e20845a --- /dev/null +++ b/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(); \ No newline at end of file diff --git a/corrections/39-es6-modules-export.js b/corrections/39-es6-modules-export.js new file mode 100644 index 0000000..843c802 --- /dev/null +++ b/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; +}; \ No newline at end of file diff --git a/corrections/40-es6-modules-import.js b/corrections/40-es6-modules-import.js new file mode 100644 index 0000000..0dd0f2c --- /dev/null +++ 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 \ No newline at end of file diff --git a/exercices/01-variables-declaration.js b/exercices/01-variables-declaration.js new file mode 100644 index 0000000..65a9b10 --- /dev/null +++ b/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); \ No newline at end of file diff --git a/exercices/02-constantes.js b/exercices/02-constantes.js new file mode 100644 index 0000000..07bfc66 --- /dev/null +++ b/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 \ No newline at end of file diff --git a/exercices/03-types-primitifs.js b/exercices/03-types-primitifs.js new file mode 100644 index 0000000..5416fb0 --- /dev/null +++ b/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) \ No newline at end of file diff --git a/exercices/04-operateurs-arithmetiques.js b/exercices/04-operateurs-arithmetiques.js new file mode 100644 index 0000000..58a47a0 --- /dev/null +++ b/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) \ No newline at end of file diff --git a/exercices/05-concatenation-chaines.js b/exercices/05-concatenation-chaines.js new file mode 100644 index 0000000..e003045 --- /dev/null +++ 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) \ No newline at end of file diff --git a/exercices/06-template-literals.js b/exercices/06-template-literals.js new file mode 100644 index 0000000..3f88c3b --- /dev/null +++ b/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} !`); \ No newline at end of file diff --git a/exercices/07-condition-if-else.js b/exercices/07-condition-if-else.js new file mode 100644 index 0000000..2db9dbd --- /dev/null +++ b/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"); +} diff --git a/exercices/08-operateur-ternaire.js b/exercices/08-operateur-ternaire.js new file mode 100644 index 0000000..bf77ce1 --- /dev/null +++ b/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`. +*/ \ No newline at end of file diff --git a/exercices/09-boucle-for.js b/exercices/09-boucle-for.js new file mode 100644 index 0000000..95e232f --- /dev/null +++ b/exercices/09-boucle-for.js @@ -0,0 +1,4 @@ +/* +Énoncé : +- en utilisant une boucle `for`, affichez les nombres de 1 à 5 dans la console. +*/ \ No newline at end of file diff --git a/exercices/10-boucle-while.js b/exercices/10-boucle-while.js new file mode 100644 index 0000000..354a837 --- /dev/null +++ b/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 !". +*/ \ No newline at end of file diff --git a/exercices/11-fizzbuzz.js b/exercices/11-fizzbuzz.js new file mode 100644 index 0000000..c1e637d --- /dev/null +++ b/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. +*/ \ No newline at end of file diff --git a/exercices/12-fonction-declaration.js b/exercices/12-fonction-declaration.js new file mode 100644 index 0000000..2541329 --- /dev/null +++ b/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); \ No newline at end of file diff --git a/exercices/13-fonction-flechee.js b/exercices/13-fonction-flechee.js new file mode 100644 index 0000000..ef3e727 --- /dev/null +++ b/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); \ No newline at end of file diff --git a/exercices/14-fonction-parametres-defaut.js b/exercices/14-fonction-parametres-defaut.js new file mode 100644 index 0000000..43327b9 --- /dev/null +++ b/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. +*/ \ No newline at end of file diff --git a/exercices/15-portee-variables.js b/exercices/15-portee-variables.js new file mode 100644 index 0000000..0f9c190 --- /dev/null +++ b/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); \ No newline at end of file diff --git a/exercices/16-objet-litteral.js b/exercices/16-objet-litteral.js new file mode 100644 index 0000000..ab52c01 --- /dev/null +++ b/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); \ No newline at end of file diff --git a/exercices/17-objet-acces-proprietes.js b/exercices/17-objet-acces-proprietes.js new file mode 100644 index 0000000..037bb00 --- /dev/null +++ b/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 }; + diff --git a/exercices/18-objet-methode.js b/exercices/18-objet-methode.js new file mode 100644 index 0000000..0281f31 --- /dev/null +++ b/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`. +*/ \ No newline at end of file diff --git a/exercices/19-objet-destructuration.js b/exercices/19-objet-destructuration.js new file mode 100644 index 0000000..f53a0b3 --- /dev/null +++ b/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 }; \ No newline at end of file diff --git a/exercices/20-objet-spread-operator.js b/exercices/20-objet-spread-operator.js new file mode 100644 index 0000000..a171bd8 --- /dev/null +++ b/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. +*/ \ No newline at end of file diff --git a/exercices/21-tableau-creation-acces.js b/exercices/21-tableau-creation-acces.js new file mode 100644 index 0000000..53e2628 --- /dev/null +++ b/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`. +*/ \ No newline at end of file diff --git a/exercices/22-tableau-boucle-forEach.js b/exercices/22-tableau-boucle-forEach.js new file mode 100644 index 0000000..7cfcec2 --- /dev/null +++ b/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]; \ No newline at end of file diff --git a/exercices/23-tableau-methode-map.js b/exercices/23-tableau-methode-map.js new file mode 100644 index 0000000..27a8a1d --- /dev/null +++ b/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"]; \ No newline at end of file diff --git a/exercices/24-tableau-methode-filter.js b/exercices/24-tableau-methode-filter.js new file mode 100644 index 0000000..18b53ac --- /dev/null +++ b/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]; \ No newline at end of file diff --git a/exercices/25-tableau-methode-find.js b/exercices/25-tableau-methode-find.js new file mode 100644 index 0000000..5c03c47 --- /dev/null +++ b/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" } +]; \ No newline at end of file diff --git a/exercices/26-tableau-methode-reduce.js b/exercices/26-tableau-methode-reduce.js new file mode 100644 index 0000000..887e2a8 --- /dev/null +++ b/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 } +]; \ No newline at end of file diff --git a/exercices/27-tableau-chainage-methodes.js b/exercices/27-tableau-chainage-methodes.js new file mode 100644 index 0000000..d7bdcc9 --- /dev/null +++ b/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]; \ No newline at end of file diff --git a/exercices/28-tableau-spread-operator.js b/exercices/28-tableau-spread-operator.js new file mode 100644 index 0000000..2c166b0 --- /dev/null +++ b/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"]; \ No newline at end of file diff --git a/exercices/29-tableau-destructuration.js b/exercices/29-tableau-destructuration.js new file mode 100644 index 0000000..1fcf0c2 --- /dev/null +++ b/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"]; \ No newline at end of file diff --git a/exercices/30-dom-selection-id.js b/exercices/30-dom-selection-id.js new file mode 100644 index 0000000..94d3749 --- /dev/null +++ b/exercices/30-dom-selection-id.js @@ -0,0 +1,5 @@ +/* +Énoncé : +sélectionnez l'élément `

` qui a l'ID `titre-principal` et stockez-le dans une variable `titre`. +affichez cette variable dans la console. +*/ \ No newline at end of file diff --git a/exercices/31-dom-selection-querySelector.js b/exercices/31-dom-selection-querySelector.js new file mode 100644 index 0000000..384acac --- /dev/null +++ b/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. +*/ \ No newline at end of file diff --git a/exercices/32-dom-modification-contenu.js b/exercices/32-dom-modification-contenu.js new file mode 100644 index 0000000..0563af8 --- /dev/null +++ b/exercices/32-dom-modification-contenu.js @@ -0,0 +1,4 @@ +/* +Énoncé : +- sélectionnez le `

` par son ID et modifiez son contenu textuel pour qu'il affiche "Bienvenue sur ma page !". +*/ \ No newline at end of file diff --git a/exercices/33-dom-modification-style.js b/exercices/33-dom-modification-style.js new file mode 100644 index 0000000..e06626f --- /dev/null +++ b/exercices/33-dom-modification-style.js @@ -0,0 +1,4 @@ +/* +Énoncé : +sélectionnez le `

` et changez sa couleur de texte en bleu et sa taille de police à `48px`. +*/ \ No newline at end of file diff --git a/exercices/34-dom-evenement-click.js b/exercices/34-dom-evenement-click.js new file mode 100644 index 0000000..b9045f1 --- /dev/null +++ b/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. +*/ \ No newline at end of file diff --git a/exercices/35-dom-interaction-input.js b/exercices/35-dom-interaction-input.js new file mode 100644 index 0000000..60312a1 --- /dev/null +++ b/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. +*/ \ No newline at end of file diff --git a/exercices/36-dom-creation-element.js b/exercices/36-dom-creation-element.js new file mode 100644 index 0000000..abc86da --- /dev/null +++ b/exercices/36-dom-creation-element.js @@ -0,0 +1,7 @@ +/* +Énoncé : +1. sélectionnez la liste `