API JavaScript: Les API (Application Programming Interfaces) en
JavaScript sont des ensembles de fonctions et
Guide Complet
de méthodes qui perme ent aux développeurs
d'interagir avec le navigateur web ou d'autres
services externes. Elles étendent les capacités
Introduction aux API
du langage JavaScript, lui perme ant d'e ectuer
JavaScript des tâches complexes.
Web API
Les Web API sont des interfaces fournies par le navigateur web qui Exemple de code (DOM API)
perme ent aux scripts JavaScript d'interagir avec l'environnement du
navigateur et le contenu de la page web. Elles sont fondamentales pour le
développement web moderne.
// HTML:
Exemples courants de Web API
// <button id="myButton">Cliquez-moi</button>
DOM (Document Object Model) API : Manipule la structure, le contenu et
// <p id="message"></p>
le style des documents HTML et XML.
const myButton = [Link]('myButton');
Console API : Fournit des fonctions pour interagir avec la console du
const messageParagraph = [Link]('message');
navigateur, utile pour le débogage.
Timers API : Permet d'exécuter du code à des intervalles spéci és ou [Link]('click', () => {
après un certain délai.
[Link] = 'Bouton cliqué !';
[Link] = 'blue';
});
Exercice (Web API)
Créez une page HTML avec un champ de texte (<input type="text">) et un
bouton. Lorsque l'utilisateur tape du texte dans le champ et clique sur le
bouton, a chez le texte saisi dans un paragraphe (<p>) en dessous, en
changeant la couleur du texte à chaque clic.
Fetch API
La Fetch API fournit une interface moderne et puissante pour Exemple de code (Fetch API)
e ectuer des requêtes réseau (comme des requêtes HTTP) pour
récupérer des ressources. Elle est basée sur les Promises, ce qui rend
la gestion des requêtes asynchrones plus simple et plus propre que fetch('[Link]
les méthodes plus anciennes comme XMLHttpRequest. .then(response => {
if (![Link]) throw new Error(`HTTP status ${[Link]}`);
return [Link]();
Caractéristiques principales
})
Basée sur les Promises : Facilite la gestion des opérations .then(data => [Link]('Données récupérées :', data))
.catch(error => [Link]('Erreur :', error));
asynchrones avec .then() et .catch().
Interface exible : Permet de con gurer facilement les requêtes
(méthode, en-têtes, corps, etc.).
Support des ux : Peut gérer des ux de données pour des
téléchargements ou des envois importants.
Exercice (Fetch API)
Utilisez la Fetch API pour récupérer une liste de posts depuis l'API
JSONPlaceholder ( [Link] A chez
les titres des 5 premiers posts dans une liste non ordonnée ( <ul>) sur la page
web.
GEOLOCATION API
Permet aux applications web d'accéder à la
if ([Link]) {
position géographique de l'utilisateur (soumis à
[Link](
autorisation).
(pos) => {
const { latitude, longitude } = [Link];
[Link](`Lat: ${latitude}, Lon: ${longitude}`);
Méthodes Clés },
(err) => [Link](`Erreur: ${[Link]}`),
getCurrentPosition() { enableHighAccuracy: true, timeout: 5000 }
Récupère la position actuelle une seule fois.
);
}
watchPosition()
Surveille les changements de position en temps réel.
clearWatch()
Arrête la surveillance active. Exercice Pratique
Créez un bouton "Où suis-je ?". Au clic, demandez la permission et a chez les
coordonnées de l'utilisateur dans un élément HTML dédié. Gérez le cas où
l'utilisateur refuse l'accès.
WEB HISTORY API
La Web History API permet de manipuler l'historique de navigation. Elle est Exemple SPA
cruciale pour les Single Page Applications (SPA) a n de changer l'URL sans
recharger la page.
// Navigation sans rechargement
Méthodes Principales [Link] = () => {
const state = { page: 'produits' };
pushState(state, title, url) : Ajoute une entrée à l'historique.
[Link](state, '', '/produits');
renderPage('produits');
replaceState(state, title, url) : Modi e l'entrée actuelle. };
back() / forward() : Navigation relative. // Gérer le bouton "Retour"
[Link] = (e) => {
popstate : Événement déclenché lors de la navigation dans l'historique
if ([Link]) renderPage([Link]);
(boutons retour/avant). };
Exercice
Créez une navigation avec 3 liens ("Accueil", "Produits", "Contact"). Utilisez
pushState pour me re à jour l'URL et gérez l'événement popstate pour
assurer la cohérence du contenu lors de l'utilisation des boutons du
navigateur.
Web Pointer API (Pointer Lock)
La Pointer Lock API permet de verrouiller le curseur de la souris à
Implémentation
l'intérieur d'un élément spéci que. Elle est essentielle pour les
applications nécessitant un contrôle précis du mouvement sans les
const canvas = [Link]('canvas');
limites de l'écran.
[Link] = () => {
[Link]();
Concepts Clés
};
Immersion totale : Le curseur disparaît pour perme re une
[Link] = () => {
if ([Link] === canvas) {
interaction uide (ex: jeux 3D).
Mouvement relatif : Utilise movementX et movementY au lieu des [Link]("Pointeur verrouillé");
coordonnées absolues.
[Link]("mousemove", update, false);
} else {
Sécurité : Nécessite une interaction utilisateur (clic) pour être [Link]("mousemove", update, false);
activée. }
};
Exercice function update(e) {
// Déplacement relatif
Créez une zone de jeu qui verrouille le pointeur au clic. A chez
const x = [Link];
le cumul des déplacements X et Y dans la console pendant le const y = [Link];
verrouillage.
[Link](`Delta: ${x}, ${y}`);
}
Web Storage API
La Web Storage API permet de stocker des données clé/valeur dans le Exemple de code
navigateur de manière beaucoup plus intuitive et spacieuse que les
cookies. // Stockage persistant
[Link]("user", "Alice");
[Link]([Link]("user"));
localStorage sessionStorage
Persistant. Les données restent Temporaire. Les données sont // Stockage de session
après la fermeture du navigateur. e acées à la fermeture de l'onglet. [Link]("id", "123");
// Stocker des objets (JSON requis)
Méthodes principales const settings = { theme: "dark" };
[Link]("cfg", [Link](settings));
setItem(key, value) : Enregistrer const data = [Link]([Link]("cfg"));
getItem(key) : Récupérer
removeItem(key) : Supprimer
clear() : Tout e acer
Exercice
Créez un champ texte et un bouton "Enregistrer". Stockez la valeur dans
localStorage. Au rafraîchissement de la page, restaurez automatiquement
le texte depuis le stockage.
VALIDATION API
La Constraint Validation API permet de valider les formulaires côté
const email = [Link]("email");
client avant l'envoi, en utilisant les a ributs HTML5 et JavaScript.
[Link] = () => {
Propriétés et Méthodes if ([Link]) {
[Link]("Format email invalide !");
[Link] } else {
Objet contenant l'état de validation (ex: valueMissing). [Link]("");
}
checkValidity() };
Véri e si l'élément est valide (booléen).
[Link] = (e) => {
setCustomValidity(msg) if (![Link]()) {
Dé nit un message d'erreur personnalisé. [Link]();
[Link]();
}
};
Exercice
Créez un champ "Nom" (min 3 car.) et un champ "Mot de passe" (8 car. + 1
chi re). Utilisez l'API pour a cher des messages d'erreur personnalisés lors
de la saisie.
Web Workers API
MAIN SCRIPT ([Link])
La Web Workers API permet d'exécuter des scripts en arrière-plan dans
un thread séparé. Cela évite de bloquer l'interface utilisateur lors de
const worker = new Worker('[Link]');
calculs intensifs.
[Link](1000000); // Envoi
Multi-threading [Link] = (e) => {
Le thread principal gère l'a chage (DOM), tandis que le Worker gère la [Link]("Résultat : " + [Link]);
logique lourde sans ralentir la page. };
Communication
WORKER SCRIPT ([Link])
[Link] = (e) => {
postMessage() : Envoyer des données. const num = [Link];
onmessage : Recevoir des données. let result = heavyCalculation(num);
[Link](result); // Retour
};
Les Workers n'ont pas accès au DOM.
Exercice
Créez un Worker qui calcule la factorielle d'un nombre. Envoyez le
nombre depuis le script principal et a chez le résultat renvoyé par le
Worker.
Conclusion & Ressources
Les API JavaScript sont les piliers du Web
moderne. Elles perme ent de transformer des
Documentation MDN
pages statiques en applications riches, ● Index des Web APIs
interactives et performantes. ● Fetch API Guide
● Geolocation API
De la gestion du réseau avec Fetch au stockage
● History API
local avec Web Storage, la maîtrise de ces
● Web Storage API
interfaces est indispensable pour tout
● Web Workers API
développeur souhaitant exploiter pleinement le
potentiel du navigateur.
