Skip to content
Synthèse JavaScript OpenClassrooms
ÉCRIVEZ DU JAVASCRIPT POUR LE WEB
🕒 durée annoncée du cours : 12h
Le DOM
Document Object Model = ramification des éléments HTML. Le document est la racine du DOM et cible la page entière.
Méthodes de modification du DOM
Par ID (identifiant unique d'un élément html).
document.getElementById()
const myAnchor = document.getElementById('my-anchor'); // l'élement avec l'id "my-anchor"
Par classe (identifiant d'un groupe d'éléments).
document.getElementsByClassName();
const myClass = document.getElementsByClassName("exemple"); // tous les éléments avec la classe exemple
Par tagname (nom de balisé précis).
document.getElementsByTagName()
const myClass = document.getElementsByTagName('a'); // tous les liens a
Par query selector (sélectionne le premier élément correspondant à la sélection).
document.querySelector(ul > li.example) // sélectionne le premier élément li de la liste ul avec la classe example
Par query selector all (sélectionne tous les éléments correspondant à la sélection).
document.querySelectorAll(ul > li.example) // sélectionne tous les éléments li de la liste ul avec la classe example
Modifier des classes
Ajouter une classe
elt.classList.add("nouvelleClasse");
Supprimer une classe
elt.classList.remove("nouvelleClasse");
Vérifier si une classe est présente
elt.classList.contains("nouvelleClasse");
Remplacer une classe par une autre
elt.classList.replace("oldClass", "newClass");
Modifier des éléments
Modifier le style d'un élément
elt.style.color = "#fff"; // Change la couleur du texte de l'élément à blanche
elt.style.backgroundColor = "#000"; // Change la couleur de fond de l'élément en noir
elt.style.fontWeight = "bold"; // Met le texte de l'élément en gras
Modifier un attribut d'un élément
elt.setAttribute("type", "password"); // Change le type de l'input en un type password
elt.setAttribute("name", "my-password"); // Change le nom de l'input en my-password
elt.getAttribute("name");
Créer un nouvel élément
const newElt = document.createElement("div");
Ajouter des enfants à un élément
const newElt = document.createElement("div");
let elt = document.getElementById("main");
elt.appendChild(newElt);
Supprimer ou modifier un enfant d’un élément
const newElt = document.createElement("div");
let elt = document.getElementById("main");
elt.appendChild(newElt);
elt.removeChild(newElt); // Supprime l'élément newElt de l'élément elt
elt.replaceChild(document.createElement("article"), newElt); // Remplace l'élément newElt par un nouvel élément de type article
Modifier le contenu d'un élément
Modifier le contenu html avec innerHTML
document.getElementById("demo").innerHTML = "<p>I have changed!</p>";
Modifier le contenu texte avec textContent
document.getElementById("demo").textContent = "I have changed!";
Ecouteurs d’évènements
Les événements sont des actions ou des occurrences qui se produisent dans le système que vous programmez et dont le système vous informe afin que vous puissiez y répondre d'une manière ou d'une autre si vous le souhaitez. Les écouteurs d’événements permettent d’exécuter du code lorsque l'événement se déclenche. Différentes méthodes peuvent être utilisée pour interagir avec un événement (l’écouter, le supprimer etc.).
Ajouter un écouteur d’événement
On utilise la méthode addEventListener(<event>, <callback>) de l’interface DOM pour écouter les événements (ex : mouvement de souris, clic, etc.).
element.addEventListener('click', onClick); // ici l'événement écouté est le clic, lorsqu'un utilisateur cliquera sur l'élement, il déclenchera l'exécution de la function onClick
Supprimer un écouteur d’événement
Pour supprimer un écouteur d’événement, on utilise cette fois méthode removeEventListener(<event>, <callback>) de l’interface DOM
Empêcher le comportement par défaut
La méthode preventDefault permet d'empêcher le comportement par défaut de s'exécuter lors du clic (ex : pas de renvoie sur une autre page lors du clic sur un hyperlien).
const elt = document.getElementById('mon-lien');
elt.addEventListener('click', function(event) {
event.preventDefault();
});
Empêcher la propagation de l’événement
La méthode stopPropagation empêche l'événement de se propager à ses parents.
elementInterieur.addEventListener('click', function(event) {
event.stopPropagation();
elementAvecMessage.innerHTML = "Message de l'élément intérieur";
});
Détecter les mouvements de la souris
On peut utiliser l’événement “mousemove” pour détecter les mouvements de la souris.
elt.addEventListener('mousemove', function(example) {
const x = example.offsetX; // Coordonnée X de la souris dans l'élément
const y = example.offsetY; // Coordonnée Y de la souris dans l'élément
});
Détecter un changement dans un formulaire
input.addEventListener('input', function(monevenement) {
output.innerHTML = monevenement.target.value;
});
Service web et API
Un service web est un programme s'exécutant sur un serveur accessible depuis Internet et fournissant un service. On peut communiquer avec ces services web via des API (pour interface de programmation d'applications).
Une API Web est une interface de programmation d'applications pour le Web. Une API permet d’interagir avec elle via l’exécution de requêtes afin de nous renvoyer des données pour pouvoir les ré-exploiter. C’est elle qui renvoie les données du service web que l’on souhaite exploiter.
Pour pouvoir fonctionner, ces requêtes utilisent des protocoles de communication standardisé.
En voici quelques uns :
Requêtes HTTP pour interagir avec une API
Les requêtes HTTP permettent de récupérer une ressource, la supprimer, etc… Voici les requêtes HTTP les plus courantes.
Suite à une requête, le serveur répond en renvoyant des données. Le serveur envoie également un code HTTP.
La programmation asynchrone
🚧 On considère que la bonne pratique est désormais de privilégier l’utilisation de async et await pour gérer le code asynchrone. Pour en savoir plus, .
De base JavaScript est synchrone et single thread : chaque ligne de code est exécutée l'une après l'autre. Cependant, JavaScript permet tout de même d'exécuter du code dit "asynchrone".
Le code s'exécute toujours ligne après ligne mais la ligne suivante n'attendra pas que la ligne asynchrone ait fini son exécution.
C'est possible grâce à ce qu'on appelle "l'event loop". On peut visualiser l'event loop comme une sorte de file d'attente. Ainsi, le code n'est pas réellement exécuté en parallèle car il est mis en file d'attente, mais il ne bloque pas l'exécution du code depuis lequel il a été appelé.
Il existe plusieurs façons d'exécuter du code asynchrone.
Avec des fonctions asynchrone
setTimeout
La fonction setTimeout permet d’exécuter du code asynchrone. Elle prends 2 paramètres : la fonction à effectuer et le délai (en milliseconde).
setTimeout(function() {
console.log("I'm here!") // s'affichera 5 secondes après "Where are you "
}, 5000);
La fonction setTimeout nous retourne une valeur permettant d'identifier le code asynchrone que l'on veut exécuter.
Il est possible de passer cet identifiant en paramètre à la fonction clearTimeout si vous souhaitez annuler l'exécution asynchrone de la fonction avant qu'elle ne soit exécutée.
setInterval
Cette fonction est similaire à setTimeout, à ceci près qu'elle exécute la fonction passée en paramètre en boucle à une fréquence déterminée par le temps en millisecondes passé en second paramètre.
Il suffira de passer la valeur de retour de setInterval à clearInterval pour stopper l'exécution en boucle de la fonction.
setImmediate
Cette fonction prend en seul paramètre : la fonction à exécuter de façon synchrone.
La fonction en question sera placée dans la file d'attente de l'event loop, mais va passer devant toutes les autres fonctions, sauf certaines spécifiques au Javascript : les événements.
nextTick
Cette fonction permet de court-circuiter tout le monde. À utiliser avec précaution.
Avec des callbacks
Les callbacks permettent de renvoyer le résultat que l'on souhaite à celui qui a lancé l’exécution du code. La fonction appelée lors du clic est une fonction asynchrone liée à un événement.
element.addEventListener('click', function(e) {
// Do something here ...
});
Le “Callback Hell” est une expression utilisées pour les situations où on va imbriquer plusieurs couches de callbacks , rendant le code difficile à lire et pouvant générer des erreurs.
// Callback hell = situations où on va imbriquer plusieurs couches de callbacks , rendant le code difficile à lire et pouvant générer des erreurs
elt.addEventListener('click', function(e) { // lors du clic
mysql.connect(function(err) { // on se connecte à un serveur mysql
mysql.query(sql, function(err, result) { // on récupère les données
fs.readFile(filePath, function(err, data) { // on lit une donnée dans un fichier
mysql.query(sql, function(err, result) { // on fait une nouvelle requête mysql
// etc ...
});
});
});
});
});
Pour gérer les erreurs avec les callbacks, la méthode la plus utilisée est de prendre 2 paramètres dans notre callback.
/*
Le 2e paramètre est notre donnée et le 1er est l'erreur
Si elle n'est pas null ou undefined, elle contiendra un message d'erreur indiquant qu'une erreur est intervenue
*/
fs.readFile(filePath, function(err, data) {
if (err) {
throw err;
}
// Do something with data
});
Avec des promesse (Promise)
📖 Plus de documentation sur les promesses en JavaScript disponible dans la documentation Mozilla. Pour en savoir plus, .
L'objet Promise (pour « promesse ») est utilisé pour réaliser des traitements de façon asynchrone. Une promesse représente une valeur qui peut être disponible maintenant, dans le futur voire jamais.
Les promise (promesses en français), sont un peu plus complexes mais plus puissantes et faciles à lire que les callbacks.
Lorsque l'on exécute du code asynchrone, celui-ci va immédiatement nous retourner une "promesse" qu'un résultat nous sera envoyé prochainement.
Cette promesse est en fait un objet "Promise" qui peut être "resolve" avec un résultat, ou "reject" avec une erreur.
Lorsque l'on récupère une Promise, on peut utiliser sa fonction then() pour exécuter du code dès que la promesse est résolue, et sa fonction catch() pour exécuter du code dès qu'une erreur est survenue.
functionThatReturnsAPromise()
.then(function(data) {
// Do something with data
})
.catch(function(err) {
// Do something with error
});
Il est possible de "chaîner" les promesses
returnAPromiseWithNumber2()
.then(function(data) { // Data is 2
return data + 1;
})
.then(function(data) { // Data is 3
throw new Error('error');
})
.then(function(data) {
// Not executed
})
.catch(function(err) {
return 5;
})
.then(function(data) { // Data is 5
// Do something
});
Voici un exemple de promesse utilisée dans le cadre d’une fonction se connectant à une API.
// on créé une fonction askHello
function askHello() {
// on se connecte à l'API Fetch en utilisant la méthode fetch()
fetch("https://mockbin.com/request?greetings=salut")
// on utilise la fonction then pour vérifier que la requête a bien été effectuée
.then(function(res) {
if (res.ok) {
return res.json(); // si tout est ok on récupère la value de la réponse en JSON
}
})
// puis on injecte la valeur de la réponse dans l'élement HMTL dont l'id est "hello-result"
.then(function(value) {
Want to print your doc?
This is not the way.
This is not the way.
Try clicking the ⋯ next to your doc name or using a keyboard shortcut (
CtrlP
) instead.