Dernière modification : 23/08/2022

JavaScript - Mémo

JavaScript est un langage de programmation de scripts principalement employé dans les pages web interactives et à ce titre est une partie essentielle des applications web. Avec les langages HTML et CSS, JavaScript est au cœur des langages utilisés par les développeurs web.

Nous allons aborder dans cet article la plupart des commandes les plus populaires du langage JavaScript.

 

1. Les Variables

1.1 L’instruction let

L'instruction "let" permet de déclarer une variable :

let maVariable1;
maVariable1 = 10;
let maVariable2 = 20;

Sa portée est limitée à celle du bloc courant :

if( a === b ){
  let maVariable = 10;
  console.log(maVariable); // Retourne 10
}
console.log(maVariable); // Erreur, let n'existe pas hors du bloc "if"

 

1.2 L'instruction const

L'instruction "const" permet de déclarer une constante, uniquement disponible en lecture.

const maVariable1; // Erreur, manque l'initialisation
const maVariable2 = 20;
maVariable2 = 21; // Erreur, on ne peut pas changer la valeur d'une constante

Sa portée est limitée à celle du bloc courant comme pour l'instruction "let" :

if( a === b ){
  const maVariable = 10;
  console.log(maVariable); // Retourne 10
}
console.log(maVariable); // Erreur, let n'existe pas hors du bloc "if"

 

1.3 L'instruction var

L'instruction "var" permet de déclarer une variable :

var maVariable1;
maVariable1 = 10;
var maVariable2 = 20;
maVariable 3 = 30; //revient à écrire "var maVariable3 = 30;"

Sa portée est limitée à celle de la fonction si elle est déclarée dans une fonction, sinon sa portée sera celle du contexte global :

if( a === b ){
  var maVariable = 10;
  console.log(maVariable); // Retourne 10
}
console.log(maVariable); // Retourne 10

function test(){
  var maVariable2 = 10;
}
console.log(maVariable2); // Erreur

 

2. Concaténation

La concaténation de deux chaînes de caractères est réalisé à l'aide du "+" :

var maChaine1 = "Bonjour ";
var maChaine2 = "tout le monde";
maChaine1 += maChaine2; // maChaine1 vaut Bonjour tout le monde


var maChaine3 = "Bonjour ";
var maChaine4 = "tout le monde";
var resultat = maChaine3 + maChaine4; // resultat vaut Bonjour tout le monde

 

3. Les boucles

3.1 Boucle "while"

var i = 0;
while (i < 10) {
  console.log("Ligne : "+i);
  i++;
}

 

3.2 Boucle "do ... while"

var i = 0;
do {
  console.log("Ligne : "+i);
  i++;
} while (i < 10)

 

3.3 Boucle "for"

for (i = 0; i < 10; i++) {
  console.log("Ligne : "+i);
}

 

4. L'instruction break

L'instruction "break" permet de sortir de la boucle courante :

for (i = 0; i < 10; i++) {
  console.log("Ligne : "+i);
  if (i == 5) {
    break;
  }
}

 

5. Les tableaux

5.1 Déclaration

// Première méthode :
var monTableau1 = new Array('Alex', 'Angel');

// Seconde méthode :
var monTableau2 = [''Alex', 'Angel'];

// Premier tableau vide :
var monTableau3 = [];

// Second tableau vide :
var monTableau4 = new Array();

 

5.2 Accès aux valeurs

monTableau[0] = 'Alex'; // Affectation de la première case du tableau avec la valeur "Alex"
console.log(monTableau[0]);

for (i = 0 ; i < monTableau.length ; i++) {
  console.log(i + ' => ' + monTableau[i]);
}

monTableau.forEach(element => console.log(element));

monTableau.forEach((element, index) => console.log(index + ' => ' + element));

 

5.3 Outils pratiques

méthode Description
concat Retourne la jointure de plusieurs tableaux
copyWithin Copie des éléments du tableau à partir  d'une position et le nombre d'éléments copiés
entries Renvoie un tableau contenant les clés/valeurs
every Vérifie si chaque élément du tableau valide le test
fill Remplit les éléments d'un tableau avec une valeur
filter Filtre les données
find Renvoie la valeur du premier élément validant un test
findIndex Renvoie l'index du premier élément validant un test
forEach Appelle une fonction pour chaque élément du tableau
from Crée un tableau à partir d'un objet
includes Vérifie si un tableau contient l'élément spécifié
indexOf Recherche dans le tableau un élément et renvoie sa position
isArray Vérifie si un objet est un tableau
join Joint tous les éléments d'un tableau dans une chaîne
keys

Renvoie un itérateur contenant les clés du tableau d'origine

lastIndexOf Recherche dans le tableau un élément, en commençant par la fin, et renvoie sa position
map Map tous les objets contenus dans le tableau
pop Supprime le dernier élément d'un tableau et renvoie cet élément
push Ajoute de nouveaux éléments à la fin d'un tableau et renvoie la nouvelle longueur
reduce Réduit les valeurs d'un tableau à une seule valeur (de gauche à droite)
reduceRight Réduit les valeurs d'un tableau à une seule valeur (de droite à gauche)
reverse Inverse l'ordre des éléments dans un tableau
shift Supprime le premier élément d'un tableau et renvoie cet élément
slice Sélectionne une partie d'un tableau et renvoie le nouveau tableau
some Vérifie si l'un des éléments d'un tableau réussit un test
sort Trie les éléments
splice Ajoute/Supprime des éléments d'un tableau
toString Convertit le tableau en chaîne et renvoie le résultat
unshift Ajoute de nouveaux éléments au début d'un tableau et renvoie la nouvelle longueur
valueOf Renvoie la valeur primitive d'un tableau

 

6. Les Maps

6.1 Déclaration

var maMap1 = new Object();
// ou : var maMap1 = {};

maMap1['prenom_0'] = 'Alex';
maMap1['prenom_1'] = 'Angel';

var maMap2 = {
        "prenom_0": 'Alex',
        'prenom_1': 'Angel'
};

 

6.2 Accès aux valeurs

maMap['prenom_0'] = 'Alex';
console.log(maMap['prenom_0']);

for (var cle in maMap) {
  console.log(maMap[cle]);
}

maMap.forEach((value, key) => console.log(value + ' : ' + key));

 

7. Popup

7.1 Boîte d'alerte

alert('Bonjour');

 

7.2 Boîte de confirmation

var choix = confirm('Valider ?');

if (choix) {
  alert('Vous avez cliqué sur OK');
} else {
  alert('Vous avez cliqué sur ANNULER ou vous avez fermé');
}

 

7.3 Boîte de saisie

do {
  choix = prompt('Veuillez entrer un nombre supérieur à zéro :', 0);
} while (isNaN(choix) || !choix || Number(choix) < 0);

console.log('Le nombre que vous avez entré est : ' + choix);

 

Pour plus de popup :

 

8. Les fonctions

function maFonction (a, b) { // On déclare la fonction
  alert(a + b);
  return a + b;
}

 

9. Les classes

class Rectangle {
  constructor(hauteur, largeur) {
    this.hauteur = hauteur;
    this.largeur = largeur;
  }

  function air() {
    return this.hauteur * this.largeur;
  }

  static air(hauteur, largeur) {
    return hauteur * largeur;
  }
}

class Carre extends Rectangle {
  constructor(cote) {
    super(cote, cote);
  }
}

let monRectangle = new Rectangle(5, 5);
console.log(monRectangle.air()); // Affiche 25
console.log(Rectangle.air(5, 5)); // Affiche 25

 

Pour plus d'information : https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Classes

 

9. L'interface Document

9.1 Récupération du Node by ID

Utiliser la méthode "getElementById".

Pour plus d'information : https://developer.mozilla.org/fr/docs/Web/API/Document/getElementById

 

9.2 Récupération du Node by Class

Utiliser la méthode "getElementsByClassName".

Pour plus d'information : https://developer.mozilla.org/fr/docs/Web/API/Document/getElementsByClassName

 

10. La classe Element

La classe Element hérite de la classe Node.

10.1 Récupération de la syntaxe HTML

Utiliser la variable "innerHTML".

Pour plus d'information : https://developer.mozilla.org/fr/docs/Web/API/Element/innerHTML

 

10.2 Récupération du texte

Utiliser la variable "textContent".

Pour plus d'information : https://developer.mozilla.org/fr/docs/Web/API/Node/textContent

 

11. Définition de la position

La fonction scroll permet de définir la position de la fenêtre dans la page.

Exemple d'utilisation :

// Position : haut de la page avec effet
window.scrollTo({ top: 0, behavior: 'smooth' });

// Position : haut de la page sans effet
window.scrollTo({ top: 0 });

Pour plus d'information : https://developer.mozilla.org/fr/docs/Web/API/Window/scroll

 

12. Les dates

// Timestamp actuel
Date.now(); // 1653413943361

// Object Date avec la date actuelle
new Date(Date.now()); // Date Tue May 24 2022 19:39:46 GMT+0200 (heure d’été d’Europe centrale)

// Date UTC
new Date(Date.now()).toUTCString(); // Tue, 24 May 2022 17:42:13 GMT

Pour plus d'information : https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Global_Objects/Date

 

13. Évènement de modification du DOM

Il est possible de capturer l'évènement de modification du DOM.

// Fonction appelée lors de la mise à jour du DOM
function notification () {
    // ...
    observer.disconnect(); // Si besoin d'arrêter la capture
};

// Exécution de la fonction "notification" lors de la modification / insertion / suppression des données dans le premier élément de la classe myClass
const observer = new MutationObserver(function(mutationsList, observer) { notification (); });
observer.observe(document.getElementsByClassName("myClass")[0], { childList: true, subtree: true });

 

LauLem.com - Conditions Générales d'Utilisation - Informations Légales - Charte relative aux cookies - Charte sur la protection des données personnelles - A propos