Mémento : JavaScript

Des exemples et des scripts avec JavaScript et jQuery.

Liste des exemples :

Sélectionner un élement par son identifiant

Avec document.getElementById() en JavaScript.

1
2
3
4
5

// JavaScript
var myTable1 = document.getElementById("table1");

// jQuery
var myTable2 = $("#table2");

Ajouter un élément dans le DOM

Avec JavaScript, on peut utiliser les méthodes suivantes :

  • appendChild(node) (DOM) - Ajoute un nouvel élément enfant à l’élément sélectionné.
  • insertBefore(newNode, existingNode) (DOM) - Insère un nouvel élément avant un autre élément passé en paramètre.

Avec jQuery, on peut ajouter un élément en utilisant les méthodes suivantes :

  • append() - Insère le contenu à la fin de l’élément sélectionné.
  • prepend() - Insère le contenu au début de l’élément sélectionné.
  • after() - Insère le contenu après l’élément sélectionné.
  • before() - Insère le contenu avant l’élément sélectionné.

Exemple d’ajout multiple à la fin d’un élément :

1
2
3
4
5
6
7

var p1 = "<p>Ceci est un texte.</p>";               // Création en HTML
var p2 = $("<p></p>").text("Ceci est un texte.");   // Création avec jQuery
var p3 = document.createElement("p");               // Création avec DOM
var textNode = document.createTextNode("Ceci est un texte.");

p3.appendChild(textNode);       // Ajout du texte avec DOM
$("body").append(p1, p2, p3);   // Ajout des paragraphes avec jQuery

Exemple d’ajout avant et après un élément :

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

// jQuery
$("#myDiv1").after("Texte affiché après.");
$("#myDiv1").before("Texte affiché avant.");

// Javascript
var node = document.getElementById("myDiv2");
var p1 = document.createElement("p");
var p2 = document.createElement("p");

p1.appendChild(document.createTextNode("Texte affiché avant."));
p2.appendChild(document.createTextNode("Texte affiché après."));

node.parentNode.insertBefore(p1, node);
node.parentNode.insertBefore(p2, node.nextSibling);

Note : nextSibling renvoie le noeud suivant ou null si node est le dernier noeud de son parent.

Créer un élément

Avec document.createElement() en JavaScript.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16

// JavaScript
var newDiv1 = document.createElement("div");
var newContent1 = document.createTextNode("Ceci est un texte.");

newDiv1.appendChild(newContent1);

var currentDiv = document.getElementById("myCurrentDiv");

document.body.insertBefore(newDiv1, currentDiv);

// jQuery
var newDiv2 = $("<div></div>");

newDiv2.text("Ceci est un texte.");

$("#myCurrentDiv").before(newDiv2);

Afficher ou masquer un élément

Exemple de code disponible ici.

Code HTML :

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

<ul>
  <li id="item1">Elément 1</li>
  <li id="item2">Elément 2</li>
  <li>Elément 3</li>
  <li>Elément 4</li>
</ul>

<button id="buttonHide1">Hide item 1 (jQuery)</button>
<button id="buttonShow1">Show item 1 (jQuery)</button>
<button id="buttonHide2">Hide Item 2 (JS)</button>
<button id="buttonShow2">Show Item 2 (JS)</button>

Code JavaScript :

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19

// Affiche et cache avec jQuery
$("#buttonHide1").click(function () {
  $("#item1").hide();
});
$("#buttonShow1").click(function () {
  $("#item1").show();
});

// Affiche et cache avec JavaScript
var originalDisplayValue = document.getElementById("item2").style.display;

$("#buttonHide2").click(function () {
  document.getElementById("item2").style.display = "none";
});

$("#buttonShow2").click(function () {
  // Autres valeurs possibles : block, inline, etc.
  document.getElementById("item2").style.display = originalDisplayValue; 
});

Ajouter une classe

On peut utiliser la propriété classList ou la méthode jQuery addClass.

1
2
3
4
5
6
7
8
9

// JavaScript
var elt = document.getElementById("myList1");

elt.classList.add("my-style1");                 // ajout simple
elt.classList.add("my-style2", "my-style3");    // ajout multiple

// jQuery
$("#myList2").addClass("my-style1");            // ajout simple
$("#myList2").addClass("my-style2 my-style3");  // ajout multiple

Assigner la propriété ID d’un élément

Utilisation de la propriété id.

1
2
3
4
5
6

// JavaScript
document.getElementsByClassName("my-class")[0].id = "elt1"; // assignation d'un ID
document.getElementById("div1").id = "div2";                // changement d'ID

// jQuery
$("<div></div>").attr("id", "div1");

Lire et écrire un attribut

1
2
3
4
5
6
7
8

// JavaScript
var el = document.getElementById("div1");
el.setAttribute("class", "my-class1");
let value1 = el.getAttribute("class");

// jQuery
$("#div2").attr("class", "my-class2");
let value2 = $("#div2").attr("class");

Une démo est disponible ici.

Exécuter du code une fois le document chargé

Quand on doit être sûr que le document est entièrement chargé et que tous ses éléments sont disponibles, on peut utiliser la méthode ready() de jQuery.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18

// JavaScript
document.addEventListener("DOMContentLoaded", function(event) { 
    // Insérer du code ici
});

// Alternative, attention aux conflits
window.onload = function () {
    // Insérer le code ici
};

// jQuery
$(document).ready(function () {
    // Insérer le code ici
});

$(window).on("load", function () {
    // Insérer le code ici
});

Stopper la propagation d’un événement

Utiliser la méthode .preventDefault().

Sur un formulaire en jQuery :

1
2
3
4

$("#myForm").submit(function(event) {
    /* stop form from submitting normally */
    event.preventDefault();
});

En JavaScript, ici pour exécuter une action sur un lien et annuler la navigation :

1
2
3
4
5
6

var myLink = document.getElementById("myTargetLink");

myLink.addEventListener("click", function (event) {
    // Insérer du code ici
    event.preventDefault();
});

Rediriger sur une autre URL

1
2
3
4
5

// Equivalent à une redirection HTTP
window.location.replace(myUrl);

// Equivalent à un clic sur un lien
window.location.href = myUrl;

Vérifier le type d’un objet

D’après MDN :

L’opérateur instanceof permet de tester si un objet possède, dans sa chaîne de prototype, la propriété prototype d’un certain constructeur.

1
2
3
4
5
6
7
8
9

let simpleString = "Simple chaîne";
let myString = new String("Chaîne créée avec un constructeur");
let myDate = new Date();

var test1 = simpleString instanceof String; // false
var test2 = myString instanceof String;     // true
var test3 = myDate instanceof Date;         // true

console.log(test1, test2, test3);

On peut aussi utiliser l’opérateur typeof, qui renvoie une chaîne indiquant le type de son opérande :

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

console.log(typeof 42);
// expected output: "number"

console.log(typeof 'blubber');
// expected output: "string"

console.log(typeof true);
// expected output: "boolean"

console.log(typeof undeclaredVariable);
// expected output: "undefined";

Vérifier si une variable est déclarée

Pour vérifier si une variable existe, on peut utiliser l’opérateur typeof :

1
2
3

if (typeof myVariable !== 'undefined') {
    // the variable is defined
}

Sans l’opérateur typeof, si la variable testée n’a pas été déclarée, la comparaison lève une exception indiquant que cette variable n’existe pas.

Convertir un nombre en chaîne

Utiliser la méthode .toString().

1
2
3
4

var number = 42;
var converted = number.toString();

console.log(number, converted); // Sortie : 42, "42"

On peut aussi convertir directement un nombre, à condition de le mettre entre parenthèses :

1

console.log((42).toString()); // "42"

La méthode accepte en paramètre un entier compris entre 2 et 36 qui indique la base du système numérique à utiliser pour représenter la valeur :

1
2
3
4
5
6

var number = 42;

var b2 = number.toString(2);   // Conversion en binaire, ici : "101010"
var b16 = number.toString(16); // Conversion en hexadécimal, ici : "2a"

console.log(b2, b16); // "101010" "2a"

Convertir un tableau en chaîne

Utiliser la méthode .toString() :

1
2
3
4

var myArray = [ "Apple", "Orange" ];
var converted = myArray.toString();

console.log(converted); // "Apple,Orange"
JavaScript  jQuery