đź§ľ 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);