17/10/2025 06:05 [Link]/[Link]/45032/mod_resource/content/2/Les fonctions avancées de HTML et de CSS.

html#h5pbo…

 Les API de HTML 3 / 12   

Les fonctions avanc…

L'API de Géolocalisation de HTML
Structurer un …  L'API de géolocalisation de HTML est une API JavaScript
intégrée aux navigateurs web modernes qui permet aux sites
 La structure d… 
web d'accéder aux informations de géolocalisation de l'utilisateur.
Cette API permet aux développeurs web de récupérer la latitude
 Les API de HT… 
et la longitude de l'utilisateur, ce qui peut être utilisé pour afficher
sa position sur une carte, fournir des informations localisées ou
L'API de Géolocalis…
personnaliser l'expérience utilisateur en fonction de sa
L'API de glisser-dép…
localisation.
L'API de stockage w…

L’API Web Workers … Activation de la géolocalisation :

L’API SSE de HTML

 Sans titre Ensemble…

Pour accéder à la géolocalisation de l'utilisateur, le site web doit
obtenir l'autorisation de l'utilisateur.
 Les graphique…  Cela signifie que le navigateur affiche généralement une boîte de
dialogue demandant à l'utilisateur s'il autorise le site à accéder à
 Les pseudo-el…  sa géolocalisation.
L'autorisation peut être révoquée à tout moment par l'utilisateur.
 Les pseudo-cl… 

// Exemple d'utilisation de getCurrentPosition

 Les concepts … 
if ([Link]) {
[Link](functio
[Link]("Latitude : " + [Link].
 Le Grid Layout 
[Link]("Longitude : " + [Link]
});
Propriétés CS…  } else {
[Link]("La géolocalisation n'est pas prise
}
 Propriétés CS… 

Les média qu…  Méthodes principales :

Les méthodes principales de l'API de géolocalisation sont

Résumé et
 transmission getCurrentPosition(), watchPosition(), et clearWatch().

// Exemple d'utilisation de watchPosition

let watchId = [Link](fu
[Link]("Nouvelle position : ");
[Link]("Latitude : " + [Link]
[Link]("Longitude : " + [Link]
});

[Link] fonctions avancées de HTML et de [Link]#h5pbookid=146145… 1/8

17/10/2025 06:05 [Link]/[Link]/45032/mod_resource/content/2/Les fonctions avancées de HTML et de [Link]#h5pbo…

// Pour arrêter la surveillance

[Link](watchId);

Objet Position :

Les données de géolocalisation sont renvoyées sous la forme

d'un objet Position.

// Exemple d'accès aux données de position

function onSuccess(position) {
let latitude = [Link];
let longitude = [Link];
[Link](`Latitude : ${latitude}, Longitude :
}

Vous pouvez spécifier des options pour personnaliser la

demande de géolocalisation.

// Exemple d'utilisation d'options

let options = {
enableHighAccuracy: true, // Demande une haute p
timeout: 5000, // Temps maximal d'attente en mil
maximumAge: 0 // Cache invalide, récupère toujou
};
[Link](successCall

Utilisations courantes :

Les utilisations courantes de l'API de géolocalisation incluent la

création d'applications de cartographie, la recherche de
magasins à proximité, la personnalisation du contenu en fonction
de la localisation de l'utilisateur, et la fourniture d'indications
routières.

// Exemple d'utilisation pour afficher une carte cen

function showMap(latitude, longitude) {
let mapUrl = `[Link]
[Link](mapUrl, "_blank");
}

Sécurité et respect de la vie privée :

La géolocalisation est sensible du point de vue de la vie privée.

Les navigateurs garantissent généralement que l'utilisateur doit
donner son consentement explicite pour que le site web puisse
accéder à sa géolocalisation.

[Link] fonctions avancées de HTML et de [Link]#h5pbookid=146145… 2/8

17/10/2025 06:05 [Link]/[Link]/45032/mod_resource/content/2/Les fonctions avancées de HTML et de [Link]#h5pbo…

Il est essentiel de respecter la vie privée de l'utilisateur et de ne

pas abuser de ces données.

Compatibilité des navigateurs :

L'API de géolocalisation de HTML est largement pris en charge

par les navigateurs modernes, mais il est important de vérifier la
compatibilité avec les navigateurs que vous ciblez.
Dans de rares cas, l'accès à la géolocalisation peut être
désactivé par les utilisateurs ou limité par les politiques de
sécurité du navigateur.

L'API de glisser-déposer de HTML

L'API de glisser-déposer de HTML (HTML Drag and Drop API)
est une API JavaScript intégrée aux navigateurs web modernes
qui permet aux utilisateurs de faire glisser et déposer des
éléments HTML d'un endroit à un autre dans une page web.
Cette API offre aux développeurs web la possibilité de créer des
fonctionnalités interactives telles que le tri d'éléments, le
déplacement d'images ou le téléchargement de fichiers en
utilisant une interface utilisateur intuitive de glisser-déposer.

Activation de la fonctionnalité de glisser-déposer :

Pour activer la fonctionnalité de glisser-déposer, vous devez

d'abord définir les éléments que vous souhaitez faire glisser
(draggable) et les zones où vous souhaitez déposer ces
éléments (droppable).
Vous pouvez activer la fonctionnalité de glisser-déposer en
définissant l'attribut draggable sur true pour les éléments que
vous souhaitez faire glisser.

<!-- Exemple d'élément draggable -->

<div id="draggableElement" draggable="true">
Faites glisser-moi !
</div>

Événements de glisser-déposer :

L'API de glisser-déposer définit plusieurs événements qui

peuvent être utilisés pour contrôler le comportement du glisser-
déposer. Les événements les plus couramment utilisés sont :

dragstart : Cet événement est déclenché lorsque vous

commencez à faire glisser un élément. Vous pouvez définir
[Link] fonctions avancées de HTML et de [Link]#h5pbookid=146145… 3/8
17/10/2025 06:05 [Link]/[Link]/45032/mod_resource/content/2/Les fonctions avancées de HTML et de [Link]#h5pbo…

des données associées à l'élément en utilisant l'objet

dataTransfer lors de cet événement.

dragover : Cet événement est déclenché lorsque vous faites

glisser un élément sur une zone de dépôt. Il est utilisé pour
indiquer que l'élément peut être déposé à cet endroit.

drop : Cet événement est déclenché lorsque vous relâchez

un élément dans une zone de dépôt.

// Exemple d'ajout d'écouteurs d'événements

const draggableElement = [Link]("dr
[Link]("dragstart", handl

function handleDragStart(event) {
[Link]("text/plain", event.t
}

Zones de dépôt :

Pour permettre le dépôt d'éléments, vous devez également

définir des éléments comme des zones de dépôt en écoutant les
événements dragover et drop.

<!-- Exemple de zone de dépôt -->

<div id="droppableArea" ondragover="allowDrop(event)
Déposez ici !
</div>

// Exemple de fonctions pour gérer le dépôt

function allowDrop(event) {
[Link]();
}

function handleDrop(event) {
[Link]();
const data = [Link]("text/pl
const draggableElement = [Link]
[Link](draggableElement);
}

Utilisations courantes :

L'HTML Drag and Drop API est utilisée dans de nombreuses

applications web pour améliorer l'expérience utilisateur. Voici
quelques exemples d'utilisation courants :

[Link] fonctions avancées de HTML et de [Link]#h5pbookid=146145… 4/8

17/10/2025 06:05 [Link]/[Link]/45032/mod_resource/content/2/Les fonctions avancées de HTML et de [Link]#h5pbo…

Réorganiser des éléments dans une liste en les faisant glisser

et déposer pour changer l'ordre.

Implémenter une interface de téléchargement de fichiers où

les utilisateurs peuvent glisser et déposer des fichiers depuis
leur ordinateur.

Créer des tableaux de bord personnalisés où les widgets

peuvent être déplacés et redimensionnés à l'aide du glisser-
déposer.

Mettre en œuvre des fonctionnalités de tri ou de filtrage

interactif pour les données tabulaires.

L'API de stockage web de HTML

L'API de stockage web HTML (HTML Web Storage API),
également connue sous le nom de Web Storage, est une API
JavaScript intégrée dans les navigateurs web modernes. Elle
permet aux développeurs web de stocker des données en paire
clé-valeur localement dans le navigateur de l'utilisateur. Cela
permet de stocker des informations de manière persistante dans
le navigateur, même après la fermeture de la page ou du
navigateur. Il existe deux types de stockage web : localStorage et
sessionStorage.

localStorage :

localStorage est un objet qui permet de stocker des données en

paire clé-valeur de manière persistante dans le navigateur. Les
données stockées dans localStorage ne sont pas effacées
lorsque le navigateur est fermé et peuvent être récupérées même
après un redémarrage du navigateur ou de l'ordinateur. Par
exemple :

// Stockage de données dans localStorage

[Link]("nom", "John");

// Récupération de données depuis localStorage

const nom = [Link]("nom");

SessionStorage :

sessionStorage est similaire à localStorage, mais il stocke des

données pour la durée d'une session de navigation. Cela signifie

[Link] fonctions avancées de HTML et de [Link]#h5pbookid=146145… 5/8

17/10/2025 06:05 [Link]/[Link]/45032/mod_resource/content/2/Les fonctions avancées de HTML et de [Link]#h5pbo…

que les données stockées dans sessionStorage sont effacées

lorsque l'utilisateur ferme le navigateur ou l'onglet. Par exemple :

// Stockage de données dans sessionStorage

[Link]("ville", "Paris");

// Récupération de données depuis sessionStorage

const ville = [Link]("ville");

Stockage en paire clé-valeur :

Les données sont stockées sous forme de paires clé-valeur, où

chaque valeur est associée à une clé unique. Les clés et les
valeurs sont des chaînes de caractères. Vous pouvez stocker et
récupérer des données en utilisant les méthodes setItem(),
getItem(), removeItem(), et clear().

Limites :

Les données stockées dans le stockage web sont limitées à une

certaine capacité, qui varie d'un navigateur à l'autre
(généralement entre 2,5 Mo et 10 Mo par domaine). Les données
stockées dans le stockage web sont accessibles uniquement via
JavaScript du même domaine (en raison de la politique du même
origine).

Utilisations courantes :

L'API de stockage web de HTMLest couramment utilisée pour

stocker des préférences utilisateur, des données de
configuration, des scores de jeu, des paniers d'achats
temporaires, des jetons d'authentification, etc. Elle est également
utile pour stocker des données temporaires sans avoir besoin de
les envoyer au serveur.

Sécurité :

Bien que le stockage web soit généralement considéré comme

sûr, il ne doit pas être utilisé pour stocker des données sensibles
ou confidentielles, car il est accessible côté client et peut être
consulté et modifié par des utilisateurs malveillants.

L’API Web Workers de HTML

L'API des travailleurs Web HTML (HTML Web Workers API)
permet aux développeurs web de créer des threads

[Link] fonctions avancées de HTML et de [Link]#h5pbookid=146145… 6/8

17/10/2025 06:05 [Link]/[Link]/45032/mod_resource/content/2/Les fonctions avancées de HTML et de [Link]#h5pbo…

supplémentaires (ou "travailleurs") en JavaScript, ce qui permet

d'exécuter du code en parallèle sur les navigateurs modernes.
Cela permet d'effectuer des opérations intensives sans bloquer
l'interface utilisateur principale, améliorant ainsi la réactivité des
applications web.

Création d'un travailleur Web :

Pour créer un travailleur Web, vous devez instancier un objet

Worker en fournissant le chemin vers le fichier JavaScript que
vous souhaitez exécuter en tant que travailleur. Le code du
travailleur est exécuté dans un contexte distinct, isolé de
l'interface utilisateur principale. Par exemple :

const monTravailleur = new Worker('[Link]');

Communication avec le travailleur Web :

La communication entre l'interface utilisateur principale et le

travailleur Web se fait via un mécanisme de messagerie. Vous
pouvez envoyer des données du thread principal au travailleur à
l'aide de la méthode postMessage(), et vice versa. Les messages
doivent être sérialisables, car ils sont clonés lors de la
communication. Un exemple d'envoi d'un message au travailleur
Web :

[Link]({ action: 'calculer', val

Le travailleur peut recevoir ce message en écoutant l'événement

message. Un exemple de réception d'un message dans le
travailleur Web ([Link]) :

[Link]('message', function(event) {
const data = [Link];
if ([Link] === 'calculer') {
const resultat = effectuerCalcul([Link]
[Link]({ action: 'resultat', valeu
}
});

Événements de travailleur Web :

Les travailleurs Web disposent de leur propre ensemble

d'événements, tels que message, error, close, etc., pour gérer la
communication, les erreurs et la terminaison du travailleur.

[Link] fonctions avancées de HTML et de [Link]#h5pbookid=146145… 7/8

17/10/2025 06:05 [Link]/[Link]/45032/mod_resource/content/2/Les fonctions avancées de HTML et de [Link]#h5pbo…

Importation de scripts :

Les travailleurs Web peuvent également importer des scripts

supplémentaires pour effectuer des tâches spécifiques. Ces
scripts sont chargés de manière asynchrone et exécutés dans le
contexte du travailleur. Un exemple d'importation d'un script dans
un travailleur Web :

importScripts('[Link]');

Limitations :

Les travailleurs Web ont certaines limitations, notamment le fait

qu'ils ne peuvent pas accéder directement au DOM ni interagir
avec l'interface utilisateur. Ils fonctionnent en isolation et
partagent des données uniquement via la messagerie.

 Les API de HTML 3 / 12  

[Link] fonctions avancées de HTML et de [Link]#h5pbookid=146145… 8/8