JavaScript-Koordinaten
JavaScript ist eine Programmiersprache, mit der Websites interaktiv gemacht werden. Sie kann Objekte auf einem Bildschirm bewegen oder auf Benutzeraktionen reagieren. Das Verständnis von Koordinaten, also numerischen Werten, die eine Position auf einem Bildschirm definieren, ist für die Erstellung interaktiver Webseiten unerlässlich.
Was sind Koordinaten in JavaScript?
Koordinaten helfen dir zu wissen, wo sich Dinge auf einer Webseite befinden. Das ist sehr hilfreich, wenn du Dinge verschieben oder auf Mausklicks reagieren lassen möchtest.
Arten von Koordinaten
Clientseitige Koordinaten
Clientseitige Koordinaten (event.clientX und event.clientY) messen die Mausposition relativ zum Viewport (dem sichtbaren Bereich des Browserfensters), unabhängig vom Scrollversatz. Hier ist ein einfaches Beispiel:
<!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
Seitenkoordinaten
Seitenkoordinaten messen die Mausposition relativ zum gesamten Dokument, einschließlich der gescrollten Bereiche. Beachte, dass event.pageX und event.pageY veraltet sind; der moderne Ansatz verwendet clientX/Y plus window.scrollX/Y. So funktioniert es:
<!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
Bildschirmkoordinaten
Bildschirmkoordinaten (event.screenX und event.screenY) messen die Mausposition relativ zum gesamten Bildschirm, nicht nur zum Browserfenster. Das ist nützlich, um die Cursorposition über mehrere Monitore oder Anwendungen hinweg zu verfolgen.
Elementpositionen mit Koordinaten manipulieren
Du kannst Koordinaten verwenden, um Dinge auf einer Webseite zu verschieben. Die Methode getBoundingClientRect() gibt Größe und Position des Elements relativ zum Viewport zurück, wodurch wir den korrekten Versatz für das Ziehen berechnen können. So kannst du ein Quadrat erstellen, das du verschieben kannst:
Beispiel: Ziehbares HTML-Element
<!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
Hinweis
Für bessere Leistung solltest du für Animationen
transform: translate()stattleft/topverwenden, da dadurch keine Neuberechnungen des Layouts erforderlich sind. Für die mobile Kompatibilität füge außerdem neben den Mausereignissen die Ereignislistenertouchstart,touchmoveundtouchendhinzu.
Erweiterte Anwendungen: Koordinaten für Animationen nutzen
Du kannst Dinge auf einer Webseite auch von selbst bewegen lassen. Das ist großartig für Animationen. Hier ist ein Beispiel:
Beispiel: Animiertes bewegtes Objekt
<!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
Während JavaScript leistungsstarke Möglichkeiten zum Erstellen dynamischer und interaktiver Animationen bietet, eignen sich CSS-Animationen oft besser für einfachere Animationen. CSS-Animationen können flüssigere Übergänge ermöglichen und sind in der Regel performanter, da sie direkt von der Rendering-Engine des Browsers verarbeitet werden und weniger CPU verbrauchen. Dadurch sind CSS-Animationen ideal für Effekte wie Übergänge, Einblendungen und grundlegende Bewegungen, insbesondere wenn hohe Leistung und geringer Ressourcenverbrauch wichtig sind.
Fazit
Wenn du etwas über Koordinaten in JavaScript lernst, kannst du auf Websites viele unterhaltsame und nützliche Dinge tun, etwa Dinge bewegen oder auf Benutzer reagieren lassen. Dieser Leitfaden hat dir gezeigt, wie du mit verschiedenen Arten von Koordinaten arbeitest und wie du sie verwendest, um Elemente auf einer Webseite zu bewegen. Übe weiter und probiere neue Dinge aus, um noch besser zu werden!
Practice
What do client-side coordinates in JavaScript represent?