helene-nguyen / revision-JS

A. Variable

1. Affecter une valeur à une variable

• créer une variable
• affecter une valeur à cette variable

2. Incrémenter une variable

• créer une variable
• lui donner un nombre comme valeur
• ajouter 1

3. Utiliser une variable dans une chaine de caractère

• créer une variable avec une valeur
• créer une autre variable
• donner à cette deuxième variable une string contenant du texte entourant notre première variable

B. Tableau

1. Créer un tableau

• créer une variable
• créer un tableau et l'affecter à cette variable

2. Ajouter un élément dans un tableau

• créer un tableau
• cibler un élément
• push cet élément dans le tableau

3. Traiter chaque élément d'un tableau

• créer un tableau
• ajouter des éléments dans ce tableau
• créer une boucle for of
• utiliser chaque propriété pour en faire quelque chose

4. Cibler un élément d'un tableau

• créer un tableau
• ajouter des valeurs dedans
• cibler l'index d'un élément
• le stocker dans une variable

5. Modifier un élément d'un tableau

• créer une variable avec une valeur
• cibler un élément d'un tableau
• intégrer la valeur de notre variable à cet endroit

6. Récupérer la longueur d'un tableau

• créer un tableau
• définir une variable
• donner la longueur du tableau à cette variable

C. Objet

1. Créer un objet

• créer une variable
• créer un objet et l'affecter à cette variable

2. Définir des propriétés à un objet

• créer un objet
• définir des propriétés et leurs affecter une valeur

3. Modifier des propriétés d'un objet

• créer un objet
• définir des propriétés et leurs affecter une valeur
• définir une variable
• donner à une propriété de l'objet la valeur de cette variable

D. Fonctions

1. Utiliser une fonction

• déclarer une fonction
• exécuter cette fonction

2. Retourner le résultat d'une fonction

• déclarer une fonction
• intégrer le return
• exécuter la fonction
• stocker la valeur retournée dans une variable

3. Utiliser un paramètre dans une fonction

• déclarer une fonction
• ajouter un paramètre entre parenthèse
• utiliser ce paramètre dans le code à exécuter de la fonction
• exécuter cette fonction en lui passant un argument

4. Utiliser un paramètre et lui donner une valeur par défaut

• déclarer une fonction
• ajouter un paramètre entre parenthèse
• ajouter juste après le paramètre un égal avec la valeur par défaut
• utiliser ce paramètre dans le code à exécuter de la fonction
• exécuter cette fonction en lui passant un argument
• exécuter cette fonction sans lui passer d'argument

E. Comparaison

1. Comparer deux choses

• créer 2 variables
• donner une valeur à ces deux fonctions
• vérifier l'égalité stricte de ces deux variables

F. if

1. Appliquer du code si une condition est vrai

• utiliser la notation if
• dans les parenthèses, définir la condition à vérifier
• dans les accolades, écrire le code à réaliser si cette condition est vrai

2. Appliquer du code si une condition est vrai sinon faire autre chose

• utiliser la notation if/else
• dans les parenthèses, définir la condition à vérifier
• dans les accolades, écrire le code à réaliser si cette condition est vrai
• définir dans le else le code à exécuter dans les autres cas

3. Appliquer du code si une condition est vrai, autre chose si une autre condition est vrai, sinon faire autre chose

• utiliser la notation if/else
• dans les parenthèses, définir la condition à vérifier
• dans les accolades, écrire le code à réaliser si cette condition est vrai
• ajouter else if et répéter les étapes
• définir dans le else le code à exécuter dans les autres cas

G. Boucles

1. Répéter une action x fois

• définir une variable x
• affecter la valeur voulu à x
• créer une boucle for

2. Réaliser du code tant qu'une condition est respectée

• utiliser la notation while
• définir entre parenthèse une condition à vérifier
• ajouter dans les accolades le code à exécuter

3. Traiter chaque élément d'un tableau

• créer un tableau
• ajouter des éléments dans ce tableau
• créer une boucle for of avec une fonction
• déclarer la fonction en lui passant l'élément du tableau en paramètre si besoin

H. DOM

1. Ajouter un élément dans notre page

• créer l'élément qui va devenir l'enfant
• cibler l'élément qui va être le parent
• dire au parent d'adopter l'enfant

2. Appliquer un style à un élément

• cibler l'élément
• appliquer le style

3. Donner un id à un élément crée en JS

• créer l'élément
• lui donner un Id

4. Ajouter une classe à un élément crée en JS

• créer l'élément
• lui donner une classe

5. Supprimer une classe à un élément

• cibler un élément
• lui retirer la classe

I. Event

1. Ajouter un eventlistner qui n'utilise pas l'event

• cibler l'élément
• ajouter l'eventListener
• déclarer la fonction qui va être déclenchée

2. Ajouter un eventlistner qui utilise l'event

• cibler l'élément
• ajouter l'eventListener
• déclarer la fonction qui va être déclenchée en ajoutant le paramètre event

3. Arreter le comportement par défaut d'un évènement

• cibler l'élément
• ajouter l'eventListener
• déclarer la fonction qui va être déclenchée en ajoutant le paramètre event
• couper le comportement de base en première ligne de la fonction

4. Cibler un seul élément avec un Id

• cibler l'élément
• le stocker dans une variable

5. Cibler un seul élément avec une classe

• cibler l'élément
• le stocker dans une variable

6. Cibler tous les éléments avec leur classe

• cibler tous les éléments, ils se rangeront dans un tableau
• stocker ce tableau dans une variable

7. Ajouter du texte dans un élément

• cibler un élément
• le stocker dans une variable
• ajouter uniquement du texte dans cet élément

J. Divers

1. Récupérer la valeur d'un input

• cibler l'input
• le stocker dans une variable
• récupérer sa valeur

2. Transformer du texte en nombre

• créer une variable
• lui donner une valeur en string
• utiliser parseInt
• stocker le résultat dans une variable

3. Créer un nombre aléatoire entre 0 et 1

• utiliser MathRandom( )
• stocker le résultat dans une variable

4. Arrondir un nombre

• créer une variable
• lui donner une valeur non arrondie
• utiliser MathRound( )
• stocker le résultat dans une variable

5. Créer un nombre arrondi aléatoire entre 2 valeurs

• créer un nombre aléatoire entre 0 et 1
• calculer la différence entre le min et le max
• multiplier les deux
• ajouter le min
• arrondir le résultat
• stocker le résultat arrondi dans une variable
• créer une fonction avec deux arguments min et max
• utiliser la fonction pour stocker le résultat dans une variable

Z. Résultats attendus

A. Variables

• A1

let michel;
michel = 42;

const text = "Je ne crois pas qu'il y ait de bonnes ou de mauvaises situations";

• A2

let michel;
michel = 42;
michel++;
// michel est maintenant égal à 43

• A3

const michel = 42;

let text;
text = `la réponse est ${michel}`;

// text devient donc : "la réponse est 42"

B. Tableaux

• B1

let michel;
michel = []; // michel est un tableau vide
michel = ["calvitie", "fumeur", "riche"]; // michel est un tableau qui contient des éléments

• B2

const michel = ["calvitie", "fumeur", "riche"];
const verite = "pauvre";
michel.push(verite);
// michel est donc un tableau contenant calvitie, fumer, riche et pauvre

• B3

const michel = ["calvitie", "fumeur", "riche", "pauvre"];
const sosieMichel = [];
for (let propriete of michel) {
	sosieMichel.push(propriete);
}
// a chaque tour de boucle, on ajoute la propriete de michel au tableau du sosie

• B4

const michel = ["calvitie", "fumeur", "riche", "pauvre"];
let fausseInformation = michel[2];
// fausseInformation a donc la valeur de l'alément à l'index 2, soit "riche"

• B5

let caracteristique = "beau gosse";
const michel = ["calvitie", "fumeur", "riche", "pauvre"];
michel[2] = caracteristique;
// michel a maintenant calvitie, fumeur, beau gosse et pauvre

• B6

const michel = ["calvitie", "fumeur", "beau gosse", "pauvre"];
let longueur = michel.length;
// longueur est égal à 4

C. Objets

• C1

const doudou = {};
// doudou est un objet vide

• C2

const doudou = {
	surface : "douce",
	age : 2,
	couleurOrigine : "blanc",
	couleurActuelle : "marron",
	nombreYeux : 1,
};
// doudou est un objet avec des propriétés

• C3

const doudou = {
	surface : "douce",
	age : 2,
	couleurOrigine : "blanc",
	couleurActuelle : "marron",
	nombreYeux : 1,
};

doudou.nombreYeux = 2;
// doudou a 2 yeux maintenant

D. Fonctions

• D1

// déclarer la fonction
function lavage(){
	doudou.couleurActuelle = "blanc crème avec des taches";
}

// executer la fonction
lavage();

• D2

function anniversaireDoudou() {
	const ageActuel = doudou.age; // ageActuel est égal à 2
	const nouvelAge = ageActuel + 1 // nouvelAge est égal à 3
	return nouvelAge
	// lorsqu'on exécute la fonction, on retourne la valeur de nouvelAge, ici 3.
}

anniversaireDoudou(); // retourne 3 mais n'est stocké nul part
const age = anniversaireDoudou(); // age prend la valeur retournée par la fonction, du coup age = 3

• D3

function colorierDoudou(couleur){
	doudou.couleurActuelle = couleur;
}

colorierDoudou(rouge);
// remplace le paramètre couleur par rouge
// exécute doudou.couleurActuelle = rouge
// on vient de remplacer la valeur de la propriété couleurActuelle de Doudou

colorierDoudou(bleu);
// maintenant doudou est un schtroumpf

• D4

function reparerDoudou(nombreDeBoutons = 2) {
	doudou.nombreYeux = nombreDeBoutons;
}

reparerDoudou(1);
// on répare doudou, et on lui met un oeil. le paramètre nombreDeBoutons prend la valeur 1

reparerDoudou();
// on ne donne aucun paramètre, la fonction s'exécute avec la valeur de base définie dans la fonction, ici 2.

E. Comparaisons

• E1

const propre = "blanc";
const sale = "marron";

propre === sale; //renvoie false, mais n'est stocké nul part
let etatNeuf = propre === sale;
// etatNeuf récupère le "false"

F. if

• F1

let couleur = "marron";

if (couleur === "marron") {
	couleur = "blanc";
}

• F2

let couleur = "blanc";

if (couleur === "marron") {
	couleur = "blanc";
} else {
	couleur = "marron";
}

// icile code n'est exécuté qu'une fois, on est pas dans une boucle. Comme la couleur est blanc, on vérifie le if, il est faux, on passe dans le else et on execute le code

• F3

let couleur = "blanc";

if (couleur === "marron") {
	couleur = "blanc";
} else if (couleur === "blanc") {
	couleur = "jaune"
} else {
	couleur = "marron";
}

// ici on teste la première condition, puis la suivante, et si aucune des deux n'est vrai on applique le else.

G. Boucles

• G1

const nombreOeilActuel = 2;

for (let i = 0 ; i < nombreOeilActuel ; i++) {
	arracherOeil();
}

// ici, je n'ai pas détaillé la fonction arracherOeil parce que ce n'est pas le sujet. Mais on immagine que cette fonction permet de modifier l'objet doudou. On fera 2 tours de boucles, donc on appliquera 2x la fonction arracherOeil

• G2

const nombreOeilActuel = doudou.nombreOeil;
// on défini nombreOeilActuel comme étant égal à la propriété de 

• G3 Voir B3

H. DOM

• H1

//On a une div qui a l'ID "olivier"
// on veut mettre une div dedans

// ERREUR
document.createElement('div'); // ici je crée l'élément mais je le stock nul part...
document.getElementById('olivier'); // ici on cible bien l'élément mais on ne le stock nulle part
// du coup on ne peut pas dire au parent d'adopter l'enfant

// CORRIGE
const powerToys = document.createElement('div'); // ici notre div est bien stockée
const PColivier = document.getElementById('olivier'); // on stocke notre parent
PColivier.append(powerToys); // on peut maintenant utiliser nos noms de variable

• H2

const webcamOlivier = document.getElementById('olivier');
webcamOlivier.style.backgroundColor = "black";

// pour la voir, n'oubliez pas de l'ajouter dans la page

• H3

const whitneyDice = document.createElement('div');
whitneyDice.id = "dé-pipé";


// pour la voir, n'oubliez pas de l'ajouter dans la page

• H4

const whitneyDice = document.createElement('div');
whitneyDice.classList.add("dé-pipé");

// pour la voir, n'oubliez pas de l'ajouter dans la page

• H5

const target = document.queryselector('.dé-pipé');
target.classList.remove("dé-pipé");

I. Event

• I1

const dice = document.queryselector('.dé-pipé');

dice.addEventListener('click', handleAppelPolice);

function handleAppelPolice(){
	let numéroDeTéléphone = 17;
}

• I2

const dice = document.queryselector('.dé-pipé');

dice.addEventListener('click', handleControleHuissier);

function handleControleHuissier(event){
	let elementControlé = event.currentTarget;
	elementControlé.style.display = "none";
}

• I3

const submitButton = document.querySelector('button');
// on vient récupérer le premier bouton de la page

submitButton.addEventListener('click', handleRendreInactif);

function handleRendreInactif(event) {
	event.preventDefault();
	// ce n'est que le comportement par défaut du clic qui est annulé
	// on peut toujours ajouter du code qui sera ecécuté ici
}

• I4

document.getElementById('olivier');
// ici je cible l'élément mais je ne le stock pas

const webcamOlivier = document.getElementById('olivier');
// là c'est bon, on pourra le réutiliser

• I5

const dice = document.queryselector('.dé-pipé');
// on n'oublie pas le point pour indiquer que c'est une classe

• I6

const adrienIdee = document.queryselectorAll('.mauvaiseIdée');
// on en ressort un tableau
// adrienIdee = [element1, element2, etc.]
// vous pouvez le console.log pour vérifier

• I7

const catastrophe = document.queryselector('.superIdée');
// je cible l'élément qui a la classe superIdée

catastrophe.textContent = 'Je vais fabriquer une bibliothèque';

J. Divers

• J1

const inputImportant = document.querySelector('.pourcentageCacao');
inputImportant.value; // je récupère la value mais ne la stock nulle part

let pourcentageIdeal = inputImportant.value
// là c'est top

• J2

const string = "42"; // c'est bien une chaine de caractère composée d'un 4 et d'un 2
parseInt(string); //ça marche mais on ne stocke ça nulle part

const nombreTrouvé = parseInt(string);
// nombreTrouvé devient le nombre 42

• J3

MathRandom(); // c'est pas bon, on crée le nombre mais il disparait direct...

const random0et1 = MathRandom();

• J4

let virgule = 85.8;

const arrondi = MathRound(virgule);
// arrondi sera égal à 89

• J5

// créer un nombre aléatoire entre 0 et 1
MathRandon();

// Faire la différence entre min et max
(max - min);

// multiplier les deux
MathRandon() * (max - min);

// Ajouter le min
MathRandon() * (max - min) + min;

// Arrondir le résultat
MathRound(MathRandon() * (max - min) + min);

// stocker dans une variable
const randomNumber = MathRound(MathRandon() * (max - min) + min);

// créer une fonction
function getRandomNumber(min, max) {
	const randomNumber = MathRound(MathRandon() * (max - min) + min);
	return randomNumber;
}

// utiliser cette fonction
let nombreAléatoire = getRandomNumber(12, 42);
// on créer le nombre aléatoire entre 12 et 42, et on le stocke dans la variable