Meta tags:
description= JavaScript wird verwendet, um Websites interaktiv zu machen. Es kann Objekte auf dem Bildschirm bewegen oder auf Benutzeraktionen reagieren…;
Headings (most frequently used words):
koordinaten, die, lesen, position, element, mit, beispiel, javascript, zwei, koordinatensysteme, aus, einem, mausereignis, eines, elements, getboundingclientrect, das, an, einer, finden, elementfrompoint, elementpositionen, manipulieren, animieren, fazit, übungen, viewport, clientx, clienty, dokument, pagex, pagey, bildschirmkoordinaten, screenx, screeny, ziehbares, html, animiertes, sich, bewegendes, objekt,
Text of the page (most frequently used words):
und (67), die (41), event (27), html (25), #koordinaten (24), #javascript (21), dom (20), api (19), der (18), window (17), position (16), des (16), clientx (16), lernen (15), das (15), document (15), viewport (14), man (13), pagex (13), für (12), mit (12), getboundingclientrect (12), style (12), function (12), element (11), sich (11), const (11), zum (10), von (10), ist (10), scrollx (10), sind (10), height (10), container (10), kopieren (9), left (9), clienty (9), pagey (9), rect (9), methoden (9), web (8), elements (8), relativ (8), scroll (8), dokument (8), diese (8), animationen (8), body (8), script (8), addeventlistener (8), div (8), head (8), title (8), top (8), elem (8), color (8), auf (8), css (7), ein (7), events (7), oder (7), den (7), seite (7), tools (6), elementfrompoint (6), eines (6), lesen (6), koordinatensysteme (6), browser (6), scrollen (6), sie (6), wenn (6), click (6), width (6), 100 (6), w3docs (5), alle (5), probier (5), übungen (5), einer (5), zwei (5), page (5), einführung (5), was (5), dem (5), sichtbaren (5), scrolling (5), and (5), dass (5), pos (5), getelementbyid (5), coordinates (5), scrolly (5), methode (5), nicht (5), verwenden (5), the (5), side (5), beide (5), eigenschaften (5), string (5), formatter (5), json (4), generator (4), einem (4), this (4), ereignisse (4), oberen (4), linken (4), ecke (4), offset (4), gesamten (4), liefern (4), zwischen (4), performance (4), selbst (4), stopbtn (4), let (4), background (4), lang (4), doctype (4), snippet (4), result (4), beispiel (4), objekt (4), draggable (4), beim (4), kann (4), gibt (4), befindet (4), objekte (4), shadow (4), fetch (4), async (4), code (3), encoder (3), editor (3), quizze (3), php (3), elementpositionen (3), manipulieren (3), aus (3), mausereignis (3), browserfensters (3), einschließlich (3), basics (3), konvertierung (3), ihnen (3), werden (3), wie (3), animate (3), requestanimationframe (3), isrunning (3), currenttime (3), lasttime (3), return (3), animation (3), absolute (3), onmousedown (3), removeeventlistener (3), onmousemove (3), shifty (3), shiftx (3), cursor (3), example (3), sodass (3), zurück (3), werte (3), zeigerposition (3), bildschirm (3), arbeiten (3), grey (3), client (3), interaktive (3), flag (3), data (3), promise (3), funktionen (3), operatoren (3), italiano (2), português (2), español (2), français (2), русский (2), deutsch (2), english (2), über (2), beautifier (2), diff (2), password (2), python (2), java (2), git (2), bücher (2), snippets (2), fazit (2), animieren (2), finden (2), fenstergrößen (2), aktuell (2), teil (2), zur (2), mausereignisses (2), ohne (2), repräsentieren (2), clientseitige (2), verschieben (2), mouse (2), sizes (2), hat (2), übergänge (2), ressourcen (2), bewegungen (2), false (2), target (2), delta (2), animateme (2), button (2), 50px (2), lassen (2), unabhängig (2), bessere (2), sollte (2), ziehen (2), kompatibilität (2), neben (2), mousedown (2), stopdrag (2), mouseup (2), mousemove (2), moveat (2), bewegen (2), berechnen (2), springt (2), falsche (2), null (2), console (2), unter (2), stelle (2), punkt (2), wird (2), relative (2), popup (2), positionieren (2), fast (2), immer (2), screeny (2), screenx (2), showpagecoords (2), manualy (2), manualx (2), alert (2), anywhere (2), area (2), see (2), 2000px (2), min (2), folgende (2), damit (2), showcoords (2), langen (2), zahlen (2), bleiben (2), zeichnen (2), canvas (2), positionierung (2), systeme (2), gemessen (2), bereichs (2), fehler (2), eine (2), workers (2), file (2), suche (2), muster (2), quantoren (2), anker (2), flags (2), components (2), url (2), microtasks (2), formulare (2), benutzerdefinierte (2), styles (2), klassen (2), arrays (2), generatoren (2), advanced (2), await (2), fehlerbehandlung (2), promises (2), chaining (2), error (2), erweitern (2), handling (2), class (2), prototypes (2), elemente (2), property (2), object (2), arrow (2), new (2), syntax (2), variablen (2), functions (2), objects (2), hash (2), 2026, rechte, vorbehalten, entwickler, gemacht, sprache, datenschutzrichtlinie, kontakt, uns, unternehmen, üben, kostenlose, tutorials, beispiele, seit, 2014, next, previous, yes, helpful, prüfen, mausklicks, also, berücksichtigung, seitenscrolling, aller, scrollbewegungen, übung, als, nächsten, schritt, empfiehlt, blick, wichtigste, erkenntnis, erfolgt, durch, addition, subtraktion, hält, auseinander, verschwinden, meisten, positionierungsfehler, obwohl, leistungsstarke, möglichkeiten, erstellung, dynamischer, interaktiver, bietet, einfachere, oft, besser, geeignet, können, flüssigere, bieten, regel, performanter, direkt, rendering, engine, browsers, verarbeitet, weniger, cpu, verbrauchen, dadurch, ideal, effekte, einblendungen, einfache, insbesondere, hohe, geringer, ressourcenverbrauch, entscheidend, info, 350, normalize, 60fps, now, true, stop, blue, using, animiertes, bewegendes, auch, steuern, indem, bei, jedem, frame, aktualisiert, multiplikation, zeitdelta, sorgt, dafür, geschwindigkeit, bildwiederholrate, displays, konstant, bleibt, anstelle, betracht, dies, layout, neuberechnungen, vermeidet, mobilgeräte, außerdem, listener, mausereignissen, hinzufügen, touchend, touchmove, touchstart, transform, translate, hinweis, dragstart, pointer, red, ziehbares, bausteine, kombinieren, dinge, ermöglicht, versatz, zeiger, elementecke, starten, ziehens, hier, quadrat, herumschieben, häufiger, fallstrick, übergibt, gescrollten, weil, erwartet, keine, dokumentkoordinaten, tagname, you, clicked, log, umgekehrte, frage, diesen, beantwortet, nimmt, passend, oberste, dieser, außerhalb, liegt, kombination, addieren, seitenkoordinaten, benötigt, ständig, getdocumentcoords, ändert, erhalten, addiert, rendered, size, including, borders, padding, corner, herauszufinden, anstatt, maus, ruft, dessen, angegeben, demselben, system, bottom, right, domrect, messen, physischen, nur, browserfenster, nützlich, mehrere, monitore, hinweg, verfolgen, innerhalb, jedoch, wahl, open, bildschirmkoordinaten, already, include, manual, version, must, match, beinhalten, daher, bereits, standardisiert, weit, verbreitet, nötig, manuell, zeigt, manuellen, berechnung, überprüfen, übereinstimmen, vom, bestätigen, bereich, verankert, jedes, enthält, vollständige, ereignismodell, beschrieben, siehe, messung, größe, programmgesteuerte, scrollbaren, speichern, klickposition, späteren, wiederherstellen, treffertest, fixed, gescrollt, identische, genau, deshalb, bugs, unentdeckt, bis, jemand, scrollt, zusammenhang, ergibt, einfach, herausgescrollten, nehmen, nach, unten, dokuments, seiten, teils, ändern, fenster, bezugssysteme, auseinanderhalten, muss, problem, dabei, bereitstellt, deren, verwechslung, häufigste, ursache, mein, dieses, kapitel, erklärt, konvertiert, wichtigsten, denen, ausgelesen, verschiedene, numerische, beschreiben, jede, funktion, tooltips, menüs, trefferkennung, läuft, letztlich, darauf, hinaus, koordinate, etwas, vergleichen, verwendet, websites, interaktiv, machen, benutzeraktionen, reagieren, verstehen, intl, vibration, notifications, audio, webrtc, geolocation, websockets, service, midi, storage, validation, fullscreen, history, screen, orientation, push, webgl, battery, animations, apis, regexp, sticky, katastrophales, backtracking, lookahead, lookbehind, alternation, rückwärtsreferenzen, name, erfassungsgruppen, gierige, faule, sets, ranges, escaping, sonderzeichen, wortgrenze, mehrzeiliger, modus, anfang, ende, unicode, klasse, zeichenklassen, regex, regular, expressions, styling, slots, komposition, template, custom, indexeddb, localstorage, sessionstorage, cookies, cookie, storing, wiederaufnehmbarer, dateiupload, server, sent, xmlhttprequest, ursprungsübergreifende, anfragen, abbruch, download, fortschritt, formdata, network, requests, references, loop, macrotasks, selection, range, resizeobserver, intersectionobserver, mutation, observer, various, laden, onload, onerror, scripts, defer, domcontentloaded, load, beforeunload, unload, resource, loading, ereignis, submit, clipboard, change, input, cut, copy, paste, fokussierung, focus, blur, formulareigenschaften, forms, controls, tastatur, keydown, keyup, drag, drop, mausbewegungen, mausereignisse, grundlagen, auslösen, standard, browseraktionen, delegation, bubbling, capturing, introduction, verändern, attribute, knoteneigenschaften, typ, tag, inhalt, getelement, queryselector, browserumgebung, spezifikationen, streams, filereader, blob, textdecoder, textencoder, arraybuffer, binäre, binary, files, fensterübergreifende, kommunikation, popups, frames, windows, polyfills, transpiler, bigint, currying, eval, proxy, reflect, miscellaneous, dynamische, imports, export, import, module, modules, iteratoren, generators, iteration, promisification, callbacks, try, catch, mixins, checking, instanceof, eingebaute, private, geschützte, statische, klassenvererbung, grundsyntax, classes, prototyp, __proto__, native, prototypale, vererbung, inheritance, widgets, optimierung, debugging, barrierefreiheit, manipulationsbibliotheken, fortgeschrittene, techniken, manipulationstechniken, traversieren, auswählen, knoten, getter, setter, deskriptoren, properties, configuration, closures, vertieft, binding, debounce, throttle, dekoratoren, weiterleitung, call, apply, settimeout, setinterval, nfe, globales, alte, var, scope, rest, parameter, spread, rekursion, stack, tojson, datum, uhrzeit, destructuring, assignment, keys, values, entries, weakmap, weakset, map, set, iterables, array, strings, math, primitiven, types, optional, konstruktor, operator, primitiv, symbol, typen, garbage, collection, objektmethoden, es6, funktionsausdrücke, schleifen, switch, bedingte, nullish, coalescing, logische, vergleichsoperatoren, typkonvertierungen, datentypen, use, strict, kommentare, basic, anmelden, durchsuchen, formatters, reverse, sha256, md5, length, calculator, colors, hsl, hex, mixer, converter, picker, general, kurse,
Text of the page (random words):
ablen scope js das alte var js globales objekt js function objekt nfe js die new function syntax js settimeout und setinterval js dekoratoren und weiterleitung call apply js debounce throttle js function binding js arrow funktionen vertieft js closures object properties configuration js property flags und deskriptoren js property getter und setter javascript html dom dom einführung die dom knoten dom elemente auswählen den dom manipulieren arbeiten mit styles im dom event handling im dom dom traversieren dom manipulationstechniken formulare im dom verwenden fortgeschrittene dom techniken dom manipulationsbibliotheken dom browser kompatibilität dom barrierefreiheit debugging und tools performance optimierung interaktive elemente und widgets prototypes inheritance js prototypale vererbung js native prototypes js prototyp methoden objekte ohne __proto__ classes js class grundsyntax js klassenvererbung statische eigenschaften und methoden private und geschützte eigenschaften in js js eingebaute klassen erweitern js class checking instanceof js mixins error handling js fehlerbehandlung try catch js benutzerdefinierte fehler error erweitern promises async await js einführung callbacks js promise js promise chaining js fehlerbehandlung mit promises promise api promisification microtasks async await generators advanced iteration generatoren async iteratoren und generatoren modules module export und import dynamische imports miscellaneous proxy und reflect eval currying bigint js polyfills transpiler frames and windows popups und window methoden fensterübergreifende kommunikation binary data files arraybuffer binäre arrays textdecoder und textencoder blob file und filereader js streams api document browserumgebung spezifikationen suche getelement queryselector knoteneigenschaften typ tag und inhalt attribute und eigenschaften das dokument verändern styles und klassen fenstergrößen und scrollen koordinaten introduction to events javascript einführung in browser ereignisse bubbling und capturing event delegation standard browseraktionen benutzerdefinierte ereignisse auslösen ui events mausereignisse grundlagen mausbewegungen drag and drop tastatur keydown und keyup scrolling forms controls formulareigenschaften und methoden fokussierung focus blur events change input cut copy paste js clipboard api formulare ereignis und methode submit document and resource loading page domcontentloaded load beforeunload unload scripts async defer ressourcen laden onload und onerror various mutation observer js intersectionobserver js resizeobserver selection und range event loop microtasks und macrotasks javascript references canvas network requests fetch api formdata fetch download fortschritt fetch abbruch fetch ursprungsübergreifende anfragen url objekte xmlhttprequest js server sent events wiederaufnehmbarer dateiupload storing data in the browser cookies document cookie localstorage sessionstorage indexeddb animation css animationen javascript animationen web components web components custom elements shadow dom template element shadow dom slots komposition shadow dom styling shadow dom und events regular expressions js regex muster und flags zeichenklassen unicode flag u und klasse p anker string anfang und ende mehrzeiliger modus der anker flag m wortgrenze b escaping sonderzeichen sets und ranges quantoren und n gierige und faule quantoren erfassungsgruppen rückwärtsreferenzen im muster n und k name javascript alternation or lookahead und lookbehind katastrophales backtracking sticky flag y suche an position methoden von regexp und string javascript apis web animations api file api battery api webgl push api screen orientation api history api console api fullscreen api validation api web storage api web midi api js web workers service workers websockets geolocation webrtc web audio api notifications api die vibration api js intl api javascript koordinaten javascript wird verwendet um websites interaktiv zu machen es kann objekte auf dem bildschirm bewegen oder auf benutzeraktionen reagieren koordinatensysteme verstehen koordinaten sind numerische werte die eine position auf der seite beschreiben fast jede interaktive funktion ziehen zeichnen tooltips popup menüs trefferkennung läuft letztlich darauf hinaus eine koordinate zu lesen und etwas damit zu vergleichen oder zu positionieren das problem dabei ist dass der browser zwei verschiedene koordinatensysteme bereitstellt und deren verwechslung ist die häufigste ursache für den fehler mein element springt an die falsche stelle dieses kapitel erklärt beide systeme wie man zwischen ihnen konvertiert und die wichtigsten dom methoden getboundingclientrect und elementfrompoint mit denen elementpositionen ausgelesen werden die zwei koordinatensysteme es gibt zwei bezugssysteme die man auseinanderhalten muss viewport relative fenster koordinaten gemessen von der oberen linken ecke des sichtbaren teils der seite diese ändern sich beim scrollen nicht ein punkt an der oberen linken ecke des sichtbaren bereichs hat immer die koordinaten 0 0 eigenschaften clientx clienty dokument seiten koordinaten gemessen von der oberen linken ecke des gesamten dokuments einschließlich des herausgescrollten bereichs diese nehmen beim scrollen nach unten zu eigenschaften pagex pagey der zusammenhang zwischen ihnen ergibt sich einfach aus dem scroll offset pagex clientx window scrollx pagey clienty window scrolly kopieren wenn die seite nicht gescrollt ist sind window scrollx und window scrolly beide 0 sodass beide systeme identische werte liefern genau deshalb bleiben scroll bugs unentdeckt bis jemand die seite scrollt viewport verwenden clientx y wenn dokument verwenden pagex y wenn positionierung eines position fixed elements positionierung eines position absolute elements treffertest was aktuell auf dem bildschirm ist speichern einer klickposition zum späteren wiederherstellen arbeiten mit getboundingclientrect zeichnen auf einem langen scrollbaren canvas siehe javascript window sizes and scrolling für die messung von window scrollx y und der viewport größe und javascript scrolling für das programmgesteuerte verschieben der scroll position koordinaten aus einem mausereignis lesen jedes mausereignis enthält beide koordinatensysteme das vollständige ereignismodell ist unter mouse events basics beschrieben viewport koordinaten clientx clienty event clientx und event clienty liefern die zeigerposition relativ zum viewport unabhängig vom scroll das folgende beispiel befindet sich auf einer langen seite sodass man scrollen und bestätigen kann dass die zahlen im sichtbaren bereich verankert bleiben snippet html result doctype html html lang en head title client side coordinates example title style container width 100 height 100 background color grey min height 40 px 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 kopieren probier es selbst dokument koordinaten pagex pagey event pagex und event pagey liefern die zeigerposition relativ zum gesamten dokument und beinhalten daher bereits den scroll offset sie sind standardisiert und weit verbreitet es ist nicht nötig sie manuell zu berechnen das folgende beispiel zeigt sie neben der manuellen berechnung clientx window scrollx damit man überprüfen kann dass beide übereinstimmen snippet html result doctype html html lang en head title page side coordinates example title style container width 100 height 100 background color grey min height 40 px 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 already include scroll the manual version must match const manualx event clientx window scrollx const manualy event clienty window scrolly alert pagex y event pagex event pagey n clientx scrollx manualx manualy container addeventlistener click showpagecoords script body html kopieren probier es selbst bildschirmkoordinaten screenx screeny event screenx und event screeny messen die zeigerposition relativ zum gesamten physischen bildschirm nicht nur zum browserfenster sie sind nützlich um den cursor über mehrere monitore hinweg zu verfolgen oder ein window open popup zu positionieren für arbeiten innerhalb der seite sind jedoch fast immer clientx y oder pagex y die bessere wahl die position eines elements lesen getboundingclientrect um herauszufinden wo sich ein element befindet anstatt wo sich die maus befindet ruft man getboundingclientrect auf diese methode gibt ein domrect zurück dessen werte top right bottom left width und height alle in viewport koordinaten angegeben sind demselben system wie clientx y const rect element getboundingclientrect rect left rect top top left corner relative to the viewport rect width rect height rendered size including borders padding kopieren da das rect viewport relativ ist ändert es sich beim scrollen um die position des elements in dokument koordinaten zu erhalten addiert man den scroll offset function getdocumentcoords el const rect el getboundingclientrect return top rect top window scrolly left rect left window scrollx kopieren diese kombination mit getboundingclientrect lesen und scrollx y addieren wenn seitenkoordinaten benötigt werden ist die konvertierung die man ständig verwenden wird das element an einer position finden elementfrompoint die umgekehrte frage was befindet sich unter diesen koordinaten beantwortet document elementfrompoint x y diese methode nimmt viewport koordinaten passend zu clientx y und gibt das oberste element an dieser stelle zurück oder null wenn der punkt außerhalb des viewport liegt document addeventlistener click event const el document elementfrompoint event clientx event clienty console log you clicked on el tagname kopieren ein häufiger fallstrick übergibt man pagex pagey auf einer gescrollten seite gibt die methode das falsche element oder null zurück weil sie viewport koordinaten erwartet keine dokumentkoordinaten elementpositionen mit koordinaten manipulieren diese bausteine lassen sich kombinieren um dinge zu bewegen die methode getboundingclientrect ermöglicht es den versatz zwischen dem zeiger und der elementecke zu berechnen sodass das element beim starten des ziehens nicht zum cursor springt hier ist ein quadrat das man herumschieben kann beispiel ziehbares html element snippet html result doctype html html lang en head title draggable element example title style draggable width 100 px height 100 px 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 kopieren probier es selbst hinweis für bessere performance sollte man transform translate anstelle von left top für animationen in betracht ziehen da dies layout neuberechnungen vermeidet für die mobilgeräte kompatibilität sollte man außerdem touchstart touchmove und touchend event listener neben den mausereignissen hinzufügen mit koordinaten animieren bewegungen lassen sich auch steuern indem man die koordinaten eines elements bei jedem frame mit requestanimationframe aktualisiert die multiplikation mit einem zeitdelta sorgt dafür dass die geschwindigkeit unabhängig von der bildwiederholrate des displays konstant bleibt beispiel animiertes sich bewegendes objekt snippet html result 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 kopieren probier es selbst i info obwohl javascript leistungsstarke möglichkeiten zur erstellung dynamischer und interaktiver animationen bietet sind css animationen für einfachere animationen oft besser geeignet css animationen können flüssigere übergänge bieten und sind in der regel performanter da sie direkt von der rendering engine des browsers verarbeitet werden und weniger cpu ressourcen verbrauchen dadurch sind css animationen ideal für effekte wie übergänge einblendungen und einfache bewegungen insbesondere wenn hohe performance und geringer ressourcenverbrauch entscheidend sind fazit die wichtigste erkenntnis ist dass der browser zwei koordinatensysteme hat viewport clientx y getboundingclientrect elementfrompoint und dokument pagex y die konvertierung zwischen ihnen erfolgt durch addition oder subtraktion von window scrollx y hält man diese auseinander verschwinden die meisten positionierungsfehler als nächsten schritt empfiehlt sich ein blick in window sizes and scrolling scrolling zum verschieben des viewport und mouse events basics für die ereignisse die diese koordinaten liefern übungen übung was repräsentieren clientseitige koordinaten in javascript was repräsentieren clientseitige koordinaten in javascript die position des mausereignisses relativ zum gesamten dokument einschließlich aller scrollbewegungen die position des mausereignisses relativ zum sichtbaren teil des browserfensters ohne berücksichtigung von seitenscrolling die position eines elements relativ zur oberen linken ecke des browserfensters einschließlich scroll offset die position des mausklicks relativ zum viewport also dem aktuell sichtbaren teil des browserfensters prüfen was this page helpful yes no previous fenstergrößen und scrollen next javascript einführung in browser ereignisse on this page die zwei koordinatensysteme koordinaten aus einem mausereignis lesen die position eines elements lesen getboundingclientrect das element an einer position finden elementfrompoint elementpositionen mit koordinaten manipulieren mit koordinaten animieren fazit übun...
|
