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

 

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 :

• https://stackoverflow.com/questions/9600969/access-child-window-elements-from-parent-window-using-javascript
• https://stackoverflow.com/questions/18890599/how-to-access-child-window-from-parent-window-through-javascript

 

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 });