Synthèse - JavaScript OpenClassRooms

Explore

Synthèse JavaScript OpenClassrooms

ÉCRIVEZ DU JAVASCRIPT POUR LE WEB

🕒 durée annoncée du cours : 12h

⁠

Loading openclassrooms.com⁠

⁠

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

EventTarget⁠

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

EventTarget⁠

⁠

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 :

FMTP = File Transfer Protocol = protocole de transfert de fichiers ;

SMTP = Simple Mail Transfer Protocol = protocole de transfert de courriel ;

IMAP = Internet Message Access Protocol = protocole d'accès aux messages sur Internet ;

HTTP = Hypertext Transfer Protocol = protocole de transfert de texte.