đź§ľ MEMO đź§ľ

Sélecteurs

Mémo

console.log("Coucou"); // Afficher une string dans la console


console.log("Coucou" + " " + "cc sava? Koi de 9 ?"); // Afficher dans la console plusieurs strings mises bout-à-bout (concaténation)

Variables

Mémo

// Un nom de variable ne peut pas commencer par un chiffre et ne peut pas contenir de tirets ou des caractères spéciaux. Évitez également les accents. Pour mettre un espace, utilisez un underscore.
Une variable ne peut être déclarée qu'une seule fois avec "let".

let goyave; // Déclarer une variable (vide)


let mangue = 5; // Déclarer une variable en lui assignant une valeur


goyave = 25; // Réassigner la valeur d'une variable existante


// Il y a plusieurs types de variables

const laConstante = 25; // Quelque soit sa valeur, elle ne pourra pas être réassignée.

let unNombre = 25.1; // Chiffre ou nombre, entier ou décimal, négatif, positif, ou nul

let uneChaineDeCaracteres = "Coucou"; // Tout ce qui entre les guillemets est une chaine de caractères

let unBoulet1 = true; // True ou false

let leTableau = [5, goyave, false, "Waw"]; // Un tableau peut contenir tous les types ci-dessus, ainsi que des variables


console.log("Goyave = " + goyave); // Afficher la valeur de la variable goyave dans la console précédée d'une string

console.log("Goyave", goyave); // Afficher la valeur de la variable goyave ainsi que son type dans la console à la suite d'une string (pas de concaténation)

Arithmétique

Mémo

let addition = 5 + 5; // Faire une addition et stocker son résultat dans une variable

let soustraction = 10 - 2; // Faire une soustraction et stocker son résultat dans une variable

let multiplication = 4 * 4; // Faire une multiplication et stocker son résultat dans une variable

let division = 16 / 2; // Faire une division et stocker son résultat dans une variable

let brique = (16 / 2) - (10 * 3) // Faire un calcul avec des ordres de priorité


brique++; // Incrémente la variable "brique" : prend sa valeur actuelle et lui rajoute 1

brique--; // Incrémente la variable "brique" : prend sa valeur actuelle et lui enlève 1


console.log(5 + 5); // Faire un calcul et afficher son résultat dans la console

Conditions

Mémo

if(5 > 10){} // Vérifie si 5 est supérieur à 10
if(5 >= 10){} // Vérifie si 5 est supérieur ou égal à 10
if(5 <= 10){} // Vérifie si 5 est inférieur ou égal à 10
if(5 == 10){} // Vérifie si 5 est égal à 10
if(5 === 10){} // Vérifie si 5 est égal à 10 ET qu'ils sont du même type
if(5 != 10){} // Vérifie si 5 est différent de 10


// Si 5 est supérieur à 10, affiche un message dans la console
if(5 > 10){
 console.log("5 est supĂ©rieur Ă  10");
}
else if(5 < 10){
 console.log("5 est infĂ©rieur Ă  10");
}
else{
 console.log("Ni supĂ©rieur, ni infĂ©rieur");
}

Tableaux

Mémo

let fruits = []; // Créer un tableau vide

let fruits = ["Goyave", "Mangue", "Papaye"]; // Créer un tableau en le remplissant


fruits.length; // Connaître la longueur du tableau

fruits.push("Litchi"); // Ajouter un élément dans un tableau

fruits.sort(); // Ranger un tableau


fruits[2]; // Accéder au 3ème élément du tableau

Boucles

Mémo

// La boucle FOR (pour)

let fruits = ["goyave", "mangue", "papaye"]; // Créer un tableau avec 3 éléments


for(i = 0; i < fruits.length; i++){ // Tant que i n'est pas égal à la longueur du tableau "fruits", le for va boucler et incrémenter i à chaque tour
 console.log(fruits[i]); // Affiche dans la console le contenu de chaque Ă©lĂ©ment du tableau
}


// La boucle WHILE (tant que)
let goyaves = 0; // Création d'une variable initialisée à 0

while(goyaves < 100){ // Tant que la variable "goyaves" est inférieure à 100, la boucle va faire des tours
 goyaves++; // IncrĂ©mente "goyaves" Ă  chaque tour de boucle
 console.log("goyaves = " + goyaves); // Affiche la valeur de "goyaves" Ă  chaque tour de boucle
}

Fonctions

Mémo

function HelloThere() {
  console.log('Hello there !');
}

HelloThere(); // La fonction est appelée



function DisplayMessage(message) {
  console.log(message); // Le contenu du paramètre passĂ© lors de l'appel est affichĂ© dans la console
}

DisplayMessage('Hello there'); // La fonction est appelée en lui passant un paramètre

Sélecteurs

Mémo

document.getElementById("monId"); // Récupérer un élément par son ID

document.getElementsByClassName("maClasse"); // Récupérer un ou plusieurs éléments par une classe

document.getElementsByName("leName"); // Récupérer un ou plusieurs éléments par l'attribut name

document.getElementsByTagName("p"); // Récupérer un ou plusieurs éléments par la balise

Valeur d'un champ

Mémo

document.getElementById("champ1").value; // Récupérer la valeur d'un champ

document.getElementById("champ1").value = "Goyave"; // Définir la valeur d'un champ


monElement.length; // Connaître la longueur d'un élément (variable, sélécteur...)

monTableau.push("Mangue"); // Ajouter un élément dans un tableau

monTableau.sort(); // Ranger un tableau

Contenu HTML

Mémo

document.getElementById("monTexte").innerHTML; // Récupérer le contenu d'un élément HTML

document.getElementById("monTexte").innerHTML = "Mangue"; // Définir le contenu HTML d'un élément

Manipuler les classes

Mémo

document.getElementById("box").classList.add('banana'); // Ajoute la classe "banana" sur l'élément qui a l'ID "box"


document.getElementById("box").classList.remove('banana'); // Enlève la classe "banana" sur l'élément qui a l'ID "box"


document.getElementById("box").classList.contains('banana'); // Vérifie si la classe banana est sur l'élément qui a l'ID "box". Retourne un booléan


document.getElementById("box").classList.toggle('banana'); // Si la classe "banana" n'est pas sur l'élément, elle est ajoutée, si elle est sur l'élément, elle est retirée

Manipuler les attributs

Mémo

document.getElementById("monImage").setAttribute("src", "chaton-mignon.png"); // Ajoute l'attribut "src" avec comme valeur "chaton-mignon.png" sur l'élément sélectionné

document.getElementById("monImage").removeAttribute("src"); // Enlève l'attribut "src" de l'élément sélectionné

Évènements

Mémo

document.getElementById("coolButton").addEventListener("click", myFunction); // Surveille l'évènement "click" sur l'élément sélectionné, et lance la fonction "myFunction" si l'évènement se produit

Vidéo et audio (média)

Mémo

document.getElementById("theVideo").play(); // Lancer la lecture d'un média

document.getElementById("theAudio").pause(); // Mettre en pause un média


document.getElementById("theAudio").volume; // Récupérer le volume d'un média

document.getElementById("theAudio").volume = 0.5; // Définir le volume d'un média

Manipuler le CSS

Mémo

document.getElementById('box').style.marginRight = "1rem"; // Change/défini la valeur de la propriété "margin-right" sur l'élément sélectionné

Générer un nombre aléatoire

Mémo

Math.floor(Math.random() * (10 - 1)) + 1; // Générer un nombre entier compris entre 1 et 10 aléatoirement

Interval et délai

Mémo

// Envoi un message dans la console toutes les 1000 millisecondes (1s)
setInterval(function(){
 console.log("coucou");
}, 1000);


// Envoi un message dans la console après 5000 millisecondes (5s)
setTimeout(function(){
 console.log("coucou");
}, 1000);

Une nouvelle version est disponible !

Mettez votre support à jour pour bénéficier des dernières corrections, améliorations, et nouveaux challenges !

Version locale

Publication 

Dernière version

Publication