Coordonnées JavaScript
JavaScript est un langage de programmation utilisé pour rendre les sites web interactifs. Il peut déplacer des objets à l'écran ou répondre aux actions de l'utilisateur. Comprendre les coordonnées, qui sont des valeurs numériques définissant une position sur un écran, est essentiel pour créer des pages web interactives.
Qu'est-ce que les coordonnées en JavaScript ?
Les coordonnées vous aident à savoir où se trouvent les éléments sur une page web. C'est très utile lorsque vous souhaitez déplacer des éléments ou les faire réagir aux clics de la souris.
Types de coordonnées
Coordonnées côté client
Les coordonnées côté client (event.clientX et event.clientY) mesurent la position de la souris par rapport à la zone d'affichage (la partie visible de la fenêtre du navigateur), indépendamment du défilement. Voici un exemple simple :
<!DOCTYPE html>
<html lang="en">
<head>
<title>Client-Side Coordinates Example</title>
<style>
#container {
width: 100%;
height: 100%;
background-color: grey;
min-height: 40px;
}
</style>
</head>
<body style="height: 2000px;">
<div id="container">Click anywhere in the grey area to see Client-Side coordinates!</div>
<script>
const container = document.getElementById('container');
function showCoords(event) {
alert("Client-Side X: " + event.clientX + ", Y: " + event.clientY);
}
container.addEventListener('click', showCoords);
</script>
</body>
</html>Result
Coordonnées côté page
Les coordonnées côté page mesurent la position de la souris par rapport au document entier, y compris les zones défilées. Notez que event.pageX et event.pageY sont dépréciés ; l'approche moderne utilise clientX/Y plus window.scrollX/Y. Voici comment cela fonctionne :
<!DOCTYPE html>
<html lang="en">
<head>
<title>Page-Side Coordinates Example</title>
<style>
#container {
width: 100%;
height: 100%;
background-color: grey;
min-height: 40px;
}
</style>
</head>
<body style="height: 2000px;">
<div id="container">Click anywhere in this area to see Page-Side coordinates!</div>
<script>
const container = document.getElementById('container');
function showPageCoords(event) {
// pageX/pageY are deprecated; use clientX/Y + scroll offsets
const x = event.clientX + window.scrollX;
const y = event.clientY + window.scrollY;
alert("Page-Side X: " + x + ", Y: " + y);
}
container.addEventListener('click', showPageCoords);
</script>
</body>
</html>Result
Coordonnées écran
Les coordonnées écran (event.screenX et event.screenY) mesurent la position de la souris par rapport à l'écran entier, et non pas seulement à la fenêtre du navigateur. Cela est utile pour suivre la position du curseur sur plusieurs moniteurs ou applications.
Manipulation des positions d'éléments à l'aide de coordonnées
Vous pouvez utiliser les coordonnées pour déplacer des éléments sur une page web. La méthode getBoundingClientRect() renvoie la taille et la position de l'élément par rapport à la zone d'affichage, ce qui nous permet de calculer le décalage correct pour le glisser-déposer. Voici comment créer un carré que vous pouvez déplacer :
Exemple : Élément HTML déplaçable
<!DOCTYPE html>
<html lang="en">
<head>
<title>Draggable Element Example</title>
<style>
#draggable {
width: 100px;
height: 100px;
background-color: red;
position: absolute;
cursor: pointer;
}
</style>
</head>
<body>
<div id="draggable"></div>
<script>
const elem = document.getElementById('draggable');
let shiftX, shiftY;
function onMouseDown(event) {
shiftX = event.clientX - elem.getBoundingClientRect().left;
shiftY = event.clientY - elem.getBoundingClientRect().top;
function moveAt(pageX, pageY) {
elem.style.left = pageX - shiftX + 'px';
elem.style.top = pageY - shiftY + 'px';
}
function onMouseMove(event) {
moveAt(event.clientX + window.scrollX, event.clientY + window.scrollY);
}
document.addEventListener('mousemove', onMouseMove);
document.addEventListener('mouseup', function stopDrag() {
document.removeEventListener('mousemove', onMouseMove);
document.removeEventListener('mouseup', stopDrag);
elem.removeEventListener('mousedown', onMouseDown);
});
}
elem.addEventListener('mousedown', onMouseDown);
elem.addEventListener('dragstart', function() { return false; });
</script>
</body>
</html>Result
note
Pour de meilleures performances, envisagez d'utiliser
transform: translate()au lieu deleft/toppour les animations, car cela évite les recalculs de mise en page. De plus, pour la compatibilité mobile, ajoutez les écouteurs d'événementstouchstart,touchmoveettouchenden plus des événements de souris.
Applications avancées : Utilisation des coordonnées pour l'animation
Vous pouvez également faire bouger des éléments automatiquement sur une page web. C'est idéal pour les animations. Voici un exemple :
Exemple : Objet animé en mouvement
<!DOCTYPE html>
<html lang="en">
<head>
<title>Animation Using Coordinates</title>
</head>
<body>
<div id="animateMe" style="width: 50px; height: 50px; background: blue; position: absolute;"></div>
<button id="stopBtn">Stop Animation</button>
<script>
const target = document.getElementById('animateMe');
const stopBtn = document.getElementById('stopBtn');
let pos = 0;
let isRunning = true;
let lastTime = performance.now();
function animate(currentTime) {
if (!isRunning) return;
const delta = (currentTime - lastTime) / 16; // Normalize to ~60fps
lastTime = currentTime;
if (pos >= 350) {
pos = 0;
}
pos += delta;
target.style.left = pos + 'px';
requestAnimationFrame(animate);
}
stopBtn.addEventListener('click', () => { isRunning = false; });
requestAnimationFrame(animate);
</script>
</body>
</html>Result
INFO
Bien que JavaScript offre des capacités puissantes pour créer des animations dynamiques et interactives, les animations CSS sont souvent mieux adaptées aux animations simples. Les animations CSS peuvent offrir des transitions plus fluides et sont généralement plus efficaces en termes de performances, car elles sont gérées directement par le moteur de rendu du navigateur, en utilisant moins de CPU. Cela rend les animations CSS idéales pour des effets comme les transitions, les fondués et les mouvements de base, surtout lorsque des performances élevées et une faible consommation de ressources sont critiques.
Conclusion
Apprendre à utiliser les coordonnées en JavaScript vous permet de réaliser de nombreuses choses amusantes et utiles sur les sites web, comme déplacer des éléments ou les faire réagir aux utilisateurs. Ce guide vous a montré comment travailler avec différents types de coordonnées et comment les utiliser pour déplacer des éléments sur une page web. Continuez à vous entraîner et à essayer de nouvelles choses pour vous améliorer !
Pratique
Que représentent les coordonnées côté client en JavaScript ?