René's URL Explorer Experiment


Title: Coordenadas em JavaScript | W3docs

Open Graph Title: Coordenadas em JavaScript

X Title: Coordenadas em JavaScript

Description: Aprenda os dois sistemas de coordenadas do navegador, clientX/pageX, getBoundingClientRect() e elementFromPoint() para posicionar elementos.

Open Graph Description: Aprenda os dois sistemas de coordenadas do navegador, clientX/pageX, getBoundingClientRect() e elementFromPoint() para posicionar elementos.

X Description: Aprenda os dois sistemas de coordenadas do navegador, clientX/pageX, getBoundingClientRect() e elementFromPoint() para posicionar elementos.

Opengraph URL: https://pt.w3docs.com/learn-javascript/javascript-coordinates

X: @w3docs

direct link

Domain: pt.w3docs.com

Hey, it has json ld scripts: 
{"@context":"https://schema.org","@type":"Article","@id":"https://pt.w3docs.com/learn-javascript/javascript-coordinates#article","headline":"Coordenadas em JavaScript","description":"Aprenda os dois sistemas de coordenadas do navegador, clientX/pageX, getBoundingClientRect() e elementFromPoint() para posicionar elementos.","inLanguage":"pt","url":"https://pt.w3docs.com/learn-javascript/javascript-coordinates","isPartOf":{"@id":"https://pt.w3docs.com/#website"},"publisher":{"@id":"https://pt.w3docs.com/#organization"}}
 
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://pt.w3docs.com/"},{"@type":"ListItem","position":2,"name":"Aprender JavaScript","item":"https://pt.w3docs.com/learn-javascript"},{"@type":"ListItem","position":3,"name":"Coordenadas","item":"https://pt.w3docs.com/learn-javascript/javascript-coordinates"}]}
 
{"@context":"https://schema.org","@type":"Organization","@id":"https://pt.w3docs.com/#organization","name":"W3docs","url":"https://pt.w3docs.com/","logo":"https://www.w3docs.com/build/images/logo-amp.png","sameAs":["https://x.com/w3docs","https://www.facebook.com/w3docs","https://github.com/w3docs","https://linkedin.com/company/w3docs"]}
 
{"@context":"https://schema.org","@type":"WebSite","@id":"https://pt.w3docs.com/#website","name":"W3docs","url":"https://pt.w3docs.com/","inLanguage":"pt","publisher":{"@id":"https://pt.w3docs.com/#organization"}}
og:site_nameW3docs
og:localept_PT
og:imagehttps://www.w3docs.com/build/images/logo-amp.png
og:typearticle
twitter:cardsummary_large_image
twitter:imagehttps://www.w3docs.com/build/images/logo-amp.png

Links:

W3docshttps://pt.w3docs.com/
Aprender HTMLhttps://pt.w3docs.com/learn-html
Aprender CSShttps://pt.w3docs.com/learn-css
Aprender JavaScripthttps://pt.w3docs.com/learn-javascript
Aprender Githttps://pt.w3docs.com/learn-git
Aprender Javahttps://pt.w3docs.com/learn-java
Aprender PHPhttps://pt.w3docs.com/learn-php
Aprender Pythonhttps://pt.w3docs.com/learn-python
Cursoshttps://pt.w3docs.com/course
Quizzeshttps://pt.w3docs.com/quiz
Exercícioshttps://pt.w3docs.com/exercise
HTML Editorhttps://pt.w3docs.com/tools/editor
Password Generatorhttps://pt.w3docs.com/tools/password-generator
HTML Encoderhttps://pt.w3docs.com/tools/html-encoder
Code Diffhttps://pt.w3docs.com/tools/code-diff
JSON Beautifierhttps://pt.w3docs.com/tools/json-beautify
Todos os 13 →https://pt.w3docs.com/tool
Color Pickerhttps://pt.w3docs.com/color/color-picker
Color Converterhttps://pt.w3docs.com/color/color-converter
Color mixerhttps://pt.w3docs.com/color/color-mixer
Color Hexhttps://pt.w3docs.com/color/color-hex
Colors HSLhttps://pt.w3docs.com/color/color-hsl
Todos os 10 →https://pt.w3docs.com/tool
String Length Calculatorhttps://pt.w3docs.com/tools/string-length-calculator
MD5 Hash Generatorhttps://pt.w3docs.com/tools/string-md5-generator
Sha256 Hash Generatorhttps://pt.w3docs.com/tools/string-sha256-generator
String Reversehttps://pt.w3docs.com/tools/string-revers
URL Encoderhttps://pt.w3docs.com/tools/string-url-encoder
Todos os 19 →https://pt.w3docs.com/tool
Javascript Formatterhttps://pt.w3docs.com/tools/formatter/javascript
CSS Formatterhttps://pt.w3docs.com/tools/formatter/css
HTML Formatterhttps://pt.w3docs.com/tools/formatter/html
Json Formatterhttps://pt.w3docs.com/tools/formatter/json
PHP Formatterhttps://pt.w3docs.com/tools/formatter/php
Englishenhttps://www.w3docs.com/learn-javascript/javascript-coordinates
Deutschdehttps://de.w3docs.com/learn-javascript/javascript-coordinates
Русскийruhttps://ru.w3docs.com/learn-javascript/javascript-coordinates
Françaisfrhttps://fr.w3docs.com/learn-javascript/javascript-coordinates
Españoleshttps://es.w3docs.com/learn-javascript/javascript-coordinates
Portuguêspthttps://pt.w3docs.com/learn-javascript/javascript-coordinates
Italianoithttps://it.w3docs.com/learn-javascript/javascript-coordinates
Entrarhttps://pt.w3docs.com/api/auth/login
Aprender JavaScripthttps://pt.w3docs.com/learn-javascript
Introduçãohttps://pt.w3docs.com/learn-javascript/javascript-intro
Começando a usar JavaScripthttps://pt.w3docs.com/learn-javascript/start-using-javascript
Comentários JShttps://pt.w3docs.com/learn-javascript/javascript-comments
JS com DOMhttps://pt.w3docs.com/learn-javascript/javascript-with-dom
JS Use Stricthttps://pt.w3docs.com/learn-javascript/javascript-use-strict
Variáveis JShttps://pt.w3docs.com/learn-javascript/javascript-variables
Tipos de Dados JShttps://pt.w3docs.com/learn-javascript/javascript-data-types
Conversões de Tipo JShttps://pt.w3docs.com/learn-javascript/type-conversions
Funções Interativas JShttps://pt.w3docs.com/learn-javascript/interactive-functions
Operadores JShttps://pt.w3docs.com/learn-javascript/operators
Operadores de comparação JShttps://pt.w3docs.com/learn-javascript/comparison-operators
Operadores Lógicos JShttps://pt.w3docs.com/learn-javascript/logical-operators
Coalescência Nula em JS (??)https://pt.w3docs.com/learn-javascript/nullish-coalescing-operator
Operadores condicionais em JShttps://pt.w3docs.com/learn-javascript/conditional-operators
JS Switchhttps://pt.w3docs.com/learn-javascript/javascript-switch
Loops em JShttps://pt.w3docs.com/learn-javascript/javascript-loops
Funções JShttps://pt.w3docs.com/learn-javascript/javascript-functions
Expressões de Função JShttps://pt.w3docs.com/learn-javascript/function-expressions
Arrow Functions em JShttps://pt.w3docs.com/learn-javascript/arrow-functions-the-basics
JS ES6https://pt.w3docs.com/learn-javascript/javascript-es6
Objetos JShttps://pt.w3docs.com/learn-javascript/javascript-objects
Cópia de Objetos em JShttps://pt.w3docs.com/learn-javascript/object-references-and-copying
Métodos de object em JS, "this"https://pt.w3docs.com/learn-javascript/object-methods-this
Coleta de lixo em JShttps://pt.w3docs.com/learn-javascript/garbage-collection
Tipos Symbol no JShttps://pt.w3docs.com/learn-javascript/symbol-types
Conversão de Object para Primitivo em JShttps://pt.w3docs.com/learn-javascript/object-to-primitive-conversion
Construtor JS, operador "new"https://pt.w3docs.com/learn-javascript/constructor-operator-new
Encadeamento Opcional em JS (?.)https://pt.w3docs.com/learn-javascript/optional-chaining
Métodos de primitivos em JShttps://pt.w3docs.com/learn-javascript/methods-of-primitives
Números JShttps://pt.w3docs.com/learn-javascript/numbers
JS Mathhttps://pt.w3docs.com/learn-javascript/javascript-math
Strings em JShttps://pt.w3docs.com/learn-javascript/strings
Arrays em JShttps://pt.w3docs.com/learn-javascript/javascript-array
Métodos de array em JShttps://pt.w3docs.com/learn-javascript/array-methods
Iteráveis em JShttps://pt.w3docs.com/learn-javascript/iterables
JS Map e Sethttps://pt.w3docs.com/learn-javascript/map-and-set
JS WeakMap e WeakSethttps://pt.w3docs.com/learn-javascript/weakmap-and-weakset
JS Object.keys, Values, Entrieshttps://pt.w3docs.com/learn-javascript/object-keys-values-entries
Desestruturação em JShttps://pt.w3docs.com/learn-javascript/destructuring-assignment
Data e hora em JShttps://pt.w3docs.com/learn-javascript/javascript-date
Métodos JSON do JS, toJSONhttps://pt.w3docs.com/learn-javascript/working-with-json
Recursão e pilha em JShttps://pt.w3docs.com/learn-javascript/recursion-and-stack
Parâmetros Rest e Spread Syntax em JShttps://pt.w3docs.com/learn-javascript/rest-parameters-and-spread-syntax
Escopo de variáveis em JShttps://pt.w3docs.com/learn-javascript/variable-scope
JS O Antigo "var"https://pt.w3docs.com/learn-javascript/the-old-var
Objeto Global JShttps://pt.w3docs.com/learn-javascript/global-object
Objeto Function em JS, NFEhttps://pt.w3docs.com/learn-javascript/function-object-nfe
JS Sintaxe "new Function"https://pt.w3docs.com/learn-javascript/the-new-function-syntax
JS setTimeout e setIntervalhttps://pt.w3docs.com/learn-javascript/scheduling-settimeout-and-setinterval
Decoradores e encaminhamento, call/applyhttps://pt.w3docs.com/learn-javascript/decorators-and-forwarding-call-apply
JS Debounce & Throttlehttps://pt.w3docs.com/learn-javascript/debounce-and-throttle
Vinculação de Funções em JShttps://pt.w3docs.com/learn-javascript/function-binding
Arrow functions revisitadashttps://pt.w3docs.com/learn-javascript/arrow-functions-revisited
JS Closureshttps://pt.w3docs.com/learn-javascript/javascript-closures
Flags e Descritores de Propriedades JShttps://pt.w3docs.com/learn-javascript/property-flags-and-descriptors
Getters e Setters de Propriedades em JShttps://pt.w3docs.com/learn-javascript/property-getters-and-setters
Introdução ao DOMhttps://pt.w3docs.com/learn-javascript/javascript-html-dom
Os Nós do DOMhttps://pt.w3docs.com/learn-javascript/understanding-the-dom-nodes
Selecionando Elementos do DOMhttps://pt.w3docs.com/learn-javascript/selecting-dom-elements
Manipulando o DOMhttps://pt.w3docs.com/learn-javascript/dom-manipulation
Trabalhando com Estilos no DOMhttps://pt.w3docs.com/learn-javascript/working-with-styles-in-dom
Tratamento de Eventos no DOMhttps://pt.w3docs.com/learn-javascript/event-handling-in-dom
Percorrendo o DOMhttps://pt.w3docs.com/learn-javascript/traversing-the-dom
Técnicas de Manipulação do DOMhttps://pt.w3docs.com/learn-javascript/dom-manipulation-techniques
Trabalhando com Formulários no DOMhttps://pt.w3docs.com/learn-javascript/working-with-forms-in-dom
Técnicas Avançadas de DOMhttps://pt.w3docs.com/learn-javascript/advanced-dom-techniques
Bibliotecas de Manipulação do DOMhttps://pt.w3docs.com/learn-javascript/dom-manipulation-libraries
Compatibilidade DOM entre Navegadoreshttps://pt.w3docs.com/learn-javascript/dom-browser-compatibility
Acessibilidade no DOMhttps://pt.w3docs.com/learn-javascript/dom-accessibility-considerations
Depuração e Ferramentashttps://pt.w3docs.com/learn-javascript/dom-debugging-and-tools
Otimização de Performancehttps://pt.w3docs.com/learn-javascript/dom-performance-optimization
Elementos Interativos e Widgetshttps://pt.w3docs.com/learn-javascript/dom-nteractive-elements-and-widgets
Herança prototípica em JShttps://pt.w3docs.com/learn-javascript/prototypal-inheritance
Protótipos Nativos JShttps://pt.w3docs.com/learn-javascript/native-prototypes
Métodos de Prototype em JS, Objects Sem `__proto__`https://pt.w3docs.com/learn-javascript/prototype-methods-objects-without-proto
Sintaxe Básica de Classes JShttps://pt.w3docs.com/learn-javascript/class-basic-syntax
Herança de classes em JShttps://pt.w3docs.com/learn-javascript/class-inheritance
Propriedades e métodos estáticos em JShttps://pt.w3docs.com/learn-javascript/static-properties-and-methods
Propriedades Privadas e Protegidas em JShttps://pt.w3docs.com/learn-javascript/private-and-protected-properties-and-methods
JS Estendendo Classes Embutidashttps://pt.w3docs.com/learn-javascript/extending-built-in-classes
JS Class Checking: "instanceof"https://pt.w3docs.com/learn-javascript/class-checking-instanceof
JS Mixinshttps://pt.w3docs.com/learn-javascript/mixins
Tratamento de erros em JS, "try..catch"https://pt.w3docs.com/learn-javascript/error-handling-try-catch
Erros Personalizados em JS, Estendendo Errorhttps://pt.w3docs.com/learn-javascript/custom-errors-extending-error
JS Introdução: callbackshttps://pt.w3docs.com/learn-javascript/introduction-callbacks
JS Promisehttps://pt.w3docs.com/learn-javascript/promise
Encadeamento de Promiseshttps://pt.w3docs.com/learn-javascript/promises-chaining
Tratamento de erros com promises em JShttps://pt.w3docs.com/learn-javascript/error-handling-with-promises
Promise APIhttps://pt.w3docs.com/learn-javascript/promise-api
Promisificaçãohttps://pt.w3docs.com/learn-javascript/promisification
Microtarefashttps://pt.w3docs.com/learn-javascript/microtasks
async/awaithttps://pt.w3docs.com/learn-javascript/async-await
Generatorshttps://pt.w3docs.com/learn-javascript/generators
Iteradores e Geradores Assíncronoshttps://pt.w3docs.com/learn-javascript/async-iterators-and-generators
Móduloshttps://pt.w3docs.com/learn-javascript/modules-introduction
Export e Importhttps://pt.w3docs.com/learn-javascript/export-and-import
Importações Dinâmicashttps://pt.w3docs.com/learn-javascript/dynamic-imports
Proxy e Reflecthttps://pt.w3docs.com/learn-javascript/proxy-and-reflect
Evalhttps://pt.w3docs.com/learn-javascript/eval-run-a-code-string
Curryinghttps://pt.w3docs.com/learn-javascript/currying
BigInthttps://pt.w3docs.com/learn-javascript/bigint
Polyfills & Transpilers JShttps://pt.w3docs.com/learn-javascript/polyfills-and-transpilers
Popups e Métodos de Janelahttps://pt.w3docs.com/learn-javascript/popups-and-window-methods
Comunicação Entre Janelashttps://pt.w3docs.com/learn-javascript/cross-window-communication
ArrayBuffer, Arrays Binárioshttps://pt.w3docs.com/learn-javascript/arraybuffer-binary-arrays
TextDecoder e TextEncoderhttps://pt.w3docs.com/learn-javascript/textdecoder-and-textencoder
Blobhttps://pt.w3docs.com/learn-javascript/javascript-blob
File e FileReaderhttps://pt.w3docs.com/learn-javascript/file-and-filereader
JS Streams APIhttps://pt.w3docs.com/learn-javascript/streams-api
Ambiente do Navegador, Especificaçõeshttps://pt.w3docs.com/learn-javascript/browser-environment-specs
Buscando: getElement*, querySelector*https://pt.w3docs.com/learn-javascript/searching-getelement-queryselector
Propriedades de Nós: Tipo, Tag e Conteúdohttps://pt.w3docs.com/learn-javascript/node-properties-type-tag-and-contents
Atributos e Propriedadeshttps://pt.w3docs.com/learn-javascript/attributes-and-properties
Modificando o documentohttps://pt.w3docs.com/learn-javascript/modifying-the-document
Estilos e Classeshttps://pt.w3docs.com/learn-javascript/styles-and-classes
Tamanhos de Janela e Rolagemhttps://pt.w3docs.com/learn-javascript/javascript-window-sizes-and-scrolling
Coordenadashttps://pt.w3docs.com/learn-javascript/javascript-coordinates
Introdução aos Eventos de Browser em JavaScripthttps://pt.w3docs.com/learn-javascript/introduction-to-browser-events
Bubbling e Capturinghttps://pt.w3docs.com/learn-javascript/bubbling-and-capturing
Delegação de Eventoshttps://pt.w3docs.com/learn-javascript/javascript-events
Ações Padrão do Navegadorhttps://pt.w3docs.com/learn-javascript/browser-default-actions
Disparando Eventos Personalizadoshttps://pt.w3docs.com/learn-javascript/dispatching-custom-events
Fundamentos de Eventos de Mousehttps://pt.w3docs.com/learn-javascript/mouse-events-basics
Movendo o mousehttps://pt.w3docs.com/learn-javascript/moving-the-mouse-mouseover-out-mouseenter-leave
Drag and Drophttps://pt.w3docs.com/learn-javascript/drag-and-drop-with-javascript
Teclado: keydown e keyuphttps://pt.w3docs.com/learn-javascript/keyboard-keydown-and-keyup
Rolagemhttps://pt.w3docs.com/learn-javascript/javascript-scrolling
Propriedades e Métodos de Formulárioshttps://pt.w3docs.com/learn-javascript/form-properties-and-methods
Foco: focus/blurhttps://pt.w3docs.com/learn-javascript/focusing-focus-blur
Eventos: change, input, cut, copy, pastehttps://pt.w3docs.com/learn-javascript/events-change-input-cut-copy-paste
JS Clipboard APIhttps://pt.w3docs.com/learn-javascript/clipboard-api
Formulários: evento e método submithttps://pt.w3docs.com/learn-javascript/forms-event-and-method-submit
Page:DOMContentLoaded, load, beforeunload, unloadhttps://pt.w3docs.com/learn-javascript/page-domcontentloaded-load-beforeunload-unload
Scripts: async, deferhttps://pt.w3docs.com/learn-javascript/scripts-async-defer
Carregamento de Recursos: onload e onerrorhttps://pt.w3docs.com/learn-javascript/resource-loading-onload-and-onerror
Mutation Observerhttps://pt.w3docs.com/learn-javascript/mutation-observer
JS IntersectionObserverhttps://pt.w3docs.com/learn-javascript/intersection-observer
JS ResizeObserverhttps://pt.w3docs.com/learn-javascript/resize-observer
Selection e Rangehttps://pt.w3docs.com/learn-javascript/selection-and-range
Event Loop: microtarefas e macrotarefashttps://pt.w3docs.com/learn-javascript/event-loop-microtasks-and-macrotasks
Canvashttps://pt.w3docs.com/learn-javascript/canvas
Fetch APIhttps://pt.w3docs.com/learn-javascript/fetch-api
FormDatahttps://pt.w3docs.com/learn-javascript/javascript-formdata
Fetch: progresso de downloadhttps://pt.w3docs.com/learn-javascript/fetch-download-progress
Fetch: aborthttps://pt.w3docs.com/learn-javascript/fetch-abort
Fetch: requisições cross-originhttps://pt.w3docs.com/learn-javascript/javascript-fetch-cross-origin-requests
Objetos URLhttps://pt.w3docs.com/learn-javascript/url-objects
XMLHttpRequesthttps://pt.w3docs.com/learn-javascript/xmlhttprequest
Server-Sent Events em JShttps://pt.w3docs.com/learn-javascript/server-sent-events
Upload de Arquivo Retomávelhttps://pt.w3docs.com/learn-javascript/resumable-file-upload
Cookies: document.cookiehttps://pt.w3docs.com/learn-javascript/cookies-document-cookie
LocalStorage, SessionStoragehttps://pt.w3docs.com/learn-javascript/localstorage-sessionstorage
IndexedDBhttps://pt.w3docs.com/learn-javascript/javascript-indexeddb
Animações CSShttps://pt.w3docs.com/learn-javascript/css-animations
Animações em JavaScripthttps://pt.w3docs.com/learn-javascript/javascript-animations
Web Componentshttps://pt.w3docs.com/learn-javascript/web-components
Custom Elementshttps://pt.w3docs.com/learn-javascript/custom-elements
Shadow DOMhttps://pt.w3docs.com/learn-javascript/javascript-shadow-dom
Elemento Templatehttps://pt.w3docs.com/learn-javascript/template-element
Slots e Composição no Shadow DOMhttps://pt.w3docs.com/learn-javascript/shadow-dom-slots-composition
Estilização do Shadow DOMhttps://pt.w3docs.com/learn-javascript/shadow-dom-styling
Shadow DOM e Eventoshttps://pt.w3docs.com/learn-javascript/shadow-dom-and-events
Regex em JShttps://pt.w3docs.com/learn-javascript/regex
Padrões e Flagshttps://pt.w3docs.com/learn-javascript/patterns-and-flags
Classes de Caractereshttps://pt.w3docs.com/learn-javascript/character-classes
Unicode: flag "u" e a classe \p{...}https://pt.w3docs.com/learn-javascript/unicode-flag-u-and-class-p
Âncoras: início ^ e fim $ de stringhttps://pt.w3docs.com/learn-javascript/anchors-string-start-and-end
Modo Multilinha de Âncoras ^ $, Flag "m"https://pt.w3docs.com/learn-javascript/multiline-mode-of-anchors-flag-m
Limite de Palavra: \bhttps://pt.w3docs.com/learn-javascript/word-boundary-b
Escapando, Caracteres Especiaishttps://pt.w3docs.com/learn-javascript/escaping-special-characters
Conjuntos e intervalos [...]https://pt.w3docs.com/learn-javascript/javascript-sets-and-ranges
Quantificadores +, *, ? e {n}https://pt.w3docs.com/learn-javascript/quantifiers-and-n
Quantificadores Gulosos e Preguiçososhttps://pt.w3docs.com/learn-javascript/greedy-and-lazy-quantifiers
Grupos de Capturahttps://pt.w3docs.com/learn-javascript/capturing-groups
Referências retrospectivas: \n e \khttps://pt.w3docs.com/learn-javascript/backreferences-in-pattern-n-and-k-name
Alternação (OR) em JavaScripthttps://pt.w3docs.com/learn-javascript/javascript-alternation-or
Lookahead e Lookbehindhttps://pt.w3docs.com/learn-javascript/lookahead-and-lookbehind
Backtracking Catastróficohttps://pt.w3docs.com/learn-javascript/catastrophic-backtracking
Flag sticky "y", busca em posição específicahttps://pt.w3docs.com/learn-javascript/sticky-flag-y-searching-at-position
Métodos de RegExp e Stringhttps://pt.w3docs.com/learn-javascript/javascript-regexp
Web Animations APIhttps://pt.w3docs.com/learn-javascript/animations-api
File APIhttps://pt.w3docs.com/learn-javascript/file-api
Battery APIhttps://pt.w3docs.com/learn-javascript/battery-api
WebGLhttps://pt.w3docs.com/learn-javascript/webgl
Push APIhttps://pt.w3docs.com/learn-javascript/push-api
Screen Orientation APIhttps://pt.w3docs.com/learn-javascript/screen-orientation-api
History APIhttps://pt.w3docs.com/learn-javascript/history-api
Console APIhttps://pt.w3docs.com/learn-javascript/console-api
Fullscreen APIhttps://pt.w3docs.com/learn-javascript/fullscreen-api
API de Validaçãohttps://pt.w3docs.com/learn-javascript/validation-api
Web Storage APIhttps://pt.w3docs.com/learn-javascript/storage-api
Web MIDI APIhttps://pt.w3docs.com/learn-javascript/web-midi-api
JS Web Workershttps://pt.w3docs.com/learn-javascript/web-workers
Service Workershttps://pt.w3docs.com/learn-javascript/service-workers
WebSocketshttps://pt.w3docs.com/learn-javascript/websockets
Geolocalizaçãohttps://pt.w3docs.com/learn-javascript/geolocation
WebRTChttps://pt.w3docs.com/learn-javascript/webrtc
Web Audio APIhttps://pt.w3docs.com/learn-javascript/web-audio-api
Notifications APIhttps://pt.w3docs.com/learn-javascript/notifications-api
A API de Vibraçãohttps://pt.w3docs.com/learn-javascript/the-vibration-api
JS Intl APIhttps://pt.w3docs.com/learn-javascript/intl-api
Tamanhos da janela e rolagem em JavaScripthttps://pt.w3docs.com/learn-javascript/javascript-window-sizes-and-scrolling
Rolagem em JavaScripthttps://pt.w3docs.com/learn-javascript/javascript-scrolling
Fundamentos dos eventos do mousehttps://pt.w3docs.com/learn-javascript/mouse-events-basics
Experimente Você Mesmo »https://pt.w3docs.com/tools/editor#code=PCFET0NUWVBFIGh0bWw-CjxodG1sIGxhbmc9ImVuIj4KPGhlYWQ-CiAgICA8dGl0bGU-Q2xpZW50LVNpZGUgQ29vcmRpbmF0ZXMgRXhhbXBsZTwvdGl0bGU-CiAgICA8c3R5bGU-CiNjb250YWluZXIgewogIHdpZHRoOiAxMDAlOwogIGhlaWdodDogMTAwJTsKICBiYWNrZ3JvdW5kLWNvbG9yOiBncmV5OwogIG1pbi1oZWlnaHQ6IDQwcHg7Cn0KICAgIDwvc3R5bGU-CjwvaGVhZD4KPGJvZHkgc3R5bGU9ImhlaWdodDogMjAwMHB4OyI-CiAgICA8ZGl2IGlkPSJjb250YWluZXIiPkNsaWNrIGFueXdoZXJlIGluIHRoZSBncmV5IGFyZWEgdG8gc2VlIENsaWVudC1TaWRlIGNvb3JkaW5hdGVzITwvZGl2PgogICAgPHNjcmlwdD4KICAgICAgICBjb25zdCBjb250YWluZXIgPSBkb2N1bWVudC5nZXRFbGVtZW50QnlJZCgnY29udGFpbmVyJyk7CiAgICAgICAgZnVuY3Rpb24gc2hvd0Nvb3JkcyhldmVudCkgewogICAgICAgICAgICBhbGVydCgiQ2xpZW50LVNpZGUgWDogIiArIGV2ZW50LmNsaWVudFggKyAiLCBZOiAiICsgZXZlbnQuY2xpZW50WSk7CiAgICAgICAgfQogICAgICAgIGNvbnRhaW5lci5hZGRFdmVudExpc3RlbmVyKCdjbGljaycsIHNob3dDb29yZHMpOwogICAgPC9zY3JpcHQ-CjwvYm9keT4KPC9odG1sPg&lang=html
Experimente Você Mesmo »https://pt.w3docs.com/tools/editor#code=PCFET0NUWVBFIGh0bWw-CjxodG1sIGxhbmc9ImVuIj4KPGhlYWQ-CiAgICA8dGl0bGU-UGFnZS1TaWRlIENvb3JkaW5hdGVzIEV4YW1wbGU8L3RpdGxlPgogICAgPHN0eWxlPgojY29udGFpbmVyIHsKICB3aWR0aDogMTAwJTsKICBoZWlnaHQ6IDEwMCU7CiAgYmFja2dyb3VuZC1jb2xvcjogZ3JleTsKICBtaW4taGVpZ2h0OiA0MHB4Owp9CiAgICA8L3N0eWxlPgo8L2hlYWQ-Cjxib2R5IHN0eWxlPSJoZWlnaHQ6IDIwMDBweDsiPgogICAgPGRpdiBpZD0iY29udGFpbmVyIj5DbGljayBhbnl3aGVyZSBpbiB0aGlzIGFyZWEgdG8gc2VlIFBhZ2UtU2lkZSBjb29yZGluYXRlcyE8L2Rpdj4KICAgIDxzY3JpcHQ-CiAgICAgICAgY29uc3QgY29udGFpbmVyID0gZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoJ2NvbnRhaW5lcicpOwogICAgICAgIGZ1bmN0aW9uIHNob3dQYWdlQ29vcmRzKGV2ZW50KSB7CiAgICAgICAgICAgIC8vIHBhZ2VYL3BhZ2VZIGFscmVhZHkgaW5jbHVkZSBzY3JvbGw7IHRoZSBtYW51YWwgdmVyc2lvbiBtdXN0IG1hdGNoCiAgICAgICAgICAgIGNvbnN0IG1hbnVhbFggPSBldmVudC5jbGllbnRYICsgd2luZG93LnNjcm9sbFg7CiAgICAgICAgICAgIGNvbnN0IG1hbnVhbFkgPSBldmVudC5jbGllbnRZICsgd2luZG93LnNjcm9sbFk7CiAgICAgICAgICAgIGFsZXJ0KCJwYWdlWC9ZOiAiICsgZXZlbnQucGFnZVggKyAiLCAiICsgZXZlbnQucGFnZVkgKwogICAgICAgICAgICAgICAgICAiXG5jbGllbnRYK3Njcm9sbFg6ICIgKyBtYW51YWxYICsgIiwgIiArIG1hbnVhbFkpOwogICAgICAgIH0KICAgICAgICBjb250YWluZXIuYWRkRXZlbnRMaXN0ZW5lcignY2xpY2snLCBzaG93UGFnZUNvb3Jkcyk7CiAgICA8L3NjcmlwdD4KPC9ib2R5Pgo8L2h0bWw-&lang=html
Experimente Você Mesmo »https://pt.w3docs.com/tools/editor#code=PCFET0NUWVBFIGh0bWw-CjxodG1sIGxhbmc9ImVuIj4KPGhlYWQ-CiAgICA8dGl0bGU-RHJhZ2dhYmxlIEVsZW1lbnQgRXhhbXBsZTwvdGl0bGU-CiAgICA8c3R5bGU-CiAgICAgICAgI2RyYWdnYWJsZSB7CiAgICAgICAgICAgIHdpZHRoOiAxMDBweDsKICAgICAgICAgICAgaGVpZ2h0OiAxMDBweDsKICAgICAgICAgICAgYmFja2dyb3VuZC1jb2xvcjogcmVkOwogICAgICAgICAgICBwb3NpdGlvbjogYWJzb2x1dGU7CiAgICAgICAgICAgIGN1cnNvcjogcG9pbnRlcjsKICAgICAgICB9CiAgICA8L3N0eWxlPgo8L2hlYWQ-Cjxib2R5PgogICAgPGRpdiBpZD0iZHJhZ2dhYmxlIj48L2Rpdj4KICAgIDxzY3JpcHQ-CiAgICAgICAgY29uc3QgZWxlbSA9IGRvY3VtZW50LmdldEVsZW1lbnRCeUlkKCdkcmFnZ2FibGUnKTsKICAgICAgICBsZXQgc2hpZnRYLCBzaGlmdFk7CgogICAgICAgIGZ1bmN0aW9uIG9uTW91c2VEb3duKGV2ZW50KSB7CiAgICAgICAgICAgIHNoaWZ0WCA9IGV2ZW50LmNsaWVudFggLSBlbGVtLmdldEJvdW5kaW5nQ2xpZW50UmVjdCgpLmxlZnQ7CiAgICAgICAgICAgIHNoaWZ0WSA9IGV2ZW50LmNsaWVudFkgLSBlbGVtLmdldEJvdW5kaW5nQ2xpZW50UmVjdCgpLnRvcDsKCiAgICAgICAgICAgIGZ1bmN0aW9uIG1vdmVBdChwYWdlWCwgcGFnZVkpIHsKICAgICAgICAgICAgICAgIGVsZW0uc3R5bGUubGVmdCA9IHBhZ2VYIC0gc2hpZnRYICsgJ3B4JzsKICAgICAgICAgICAgICAgIGVsZW0uc3R5bGUudG9wID0gcGFnZVkgLSBzaGlmdFkgKyAncHgnOwogICAgICAgICAgICB9CgogICAgICAgICAgICBmdW5jdGlvbiBvbk1vdXNlTW92ZShldmVudCkgewogICAgICAgICAgICAgICAgbW92ZUF0KGV2ZW50LmNsaWVudFggKyB3aW5kb3cuc2Nyb2xsWCwgZXZlbnQuY2xpZW50WSArIHdpbmRvdy5zY3JvbGxZKTsKICAgICAgICAgICAgfQoKICAgICAgICAgICAgZG9jdW1lbnQuYWRkRXZlbnRMaXN0ZW5lcignbW91c2Vtb3ZlJywgb25Nb3VzZU1vdmUpOwogICAgICAgICAgICBkb2N1bWVudC5hZGRFdmVudExpc3RlbmVyKCdtb3VzZXVwJywgZnVuY3Rpb24gc3RvcERyYWcoKSB7CiAgICAgICAgICAgICAgICBkb2N1bWVudC5yZW1vdmVFdmVudExpc3RlbmVyKCdtb3VzZW1vdmUnLCBvbk1vdXNlTW92ZSk7CiAgICAgICAgICAgICAgICBkb2N1bWVudC5yZW1vdmVFdmVudExpc3RlbmVyKCdtb3VzZXVwJywgc3RvcERyYWcpOwogICAgICAgICAgICAgICAgZWxlbS5yZW1vdmVFdmVudExpc3RlbmVyKCdtb3VzZWRvd24nLCBvbk1vdXNlRG93bik7CiAgICAgICAgICAgIH0pOwogICAgICAgIH0KCiAgICAgICAgZWxlbS5hZGRFdmVudExpc3RlbmVyKCdtb3VzZWRvd24nLCBvbk1vdXNlRG93bik7CiAgICAgICAgZWxlbS5hZGRFdmVudExpc3RlbmVyKCdkcmFnc3RhcnQnLCBmdW5jdGlvbigpIHsgcmV0dXJuIGZhbHNlOyB9KTsKICAgIDwvc2NyaXB0Pgo8L2JvZHk-CjwvaHRtbD4&lang=html
Experimente Você Mesmo »https://pt.w3docs.com/tools/editor#code=PCFET0NUWVBFIGh0bWw-CjxodG1sIGxhbmc9ImVuIj4KPGhlYWQ-CiAgICA8dGl0bGU-QW5pbWF0aW9uIFVzaW5nIENvb3JkaW5hdGVzPC90aXRsZT4KPC9oZWFkPgo8Ym9keT4KICAgIDxkaXYgaWQ9ImFuaW1hdGVNZSIgc3R5bGU9IndpZHRoOiA1MHB4OyBoZWlnaHQ6IDUwcHg7IGJhY2tncm91bmQ6IGJsdWU7IHBvc2l0aW9uOiBhYnNvbHV0ZTsiPjwvZGl2PgogICAgPGJ1dHRvbiBpZD0ic3RvcEJ0biI-U3RvcCBBbmltYXRpb248L2J1dHRvbj4KICAgIDxzY3JpcHQ-CiAgICAgICAgY29uc3QgdGFyZ2V0ID0gZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoJ2FuaW1hdGVNZScpOwogICAgICAgIGNvbnN0IHN0b3BCdG4gPSBkb2N1bWVudC5nZXRFbGVtZW50QnlJZCgnc3RvcEJ0bicpOwogICAgICAgIGxldCBwb3MgPSAwOwogICAgICAgIGxldCBpc1J1bm5pbmcgPSB0cnVlOwogICAgICAgIGxldCBsYXN0VGltZSA9IHBlcmZvcm1hbmNlLm5vdygpOwoKICAgICAgICBmdW5jdGlvbiBhbmltYXRlKGN1cnJlbnRUaW1lKSB7CiAgICAgICAgICAgIGlmICghaXNSdW5uaW5nKSByZXR1cm47CiAgICAgICAgICAgIGNvbnN0IGRlbHRhID0gKGN1cnJlbnRUaW1lIC0gbGFzdFRpbWUpIC8gMTY7IC8vIE5vcm1hbGl6ZSB0byB-NjBmcHMKICAgICAgICAgICAgbGFzdFRpbWUgPSBjdXJyZW50VGltZTsKICAgICAgICAgICAgaWYgKHBvcyA-PSAzNTApIHsKICAgICAgICAgICAgICAgIHBvcyA9IDA7CiAgICAgICAgICAgIH0KICAgICAgICAgICAgcG9zICs9IGRlbHRhOwogICAgICAgICAgICB0YXJnZXQuc3R5bGUubGVmdCA9IHBvcyArICdweCc7CiAgICAgICAgICAgIHJlcXVlc3RBbmltYXRpb25GcmFtZShhbmltYXRlKTsKICAgICAgICB9CgogICAgICAgIHN0b3BCdG4uYWRkRXZlbnRMaXN0ZW5lcignY2xpY2snLCAoKSA9PiB7IGlzUnVubmluZyA9IGZhbHNlOyB9KTsKICAgICAgICByZXF1ZXN0QW5pbWF0aW9uRnJhbWUoYW5pbWF0ZSk7CiAgICA8L3NjcmlwdD4KPC9ib2R5Pgo8L2h0bWw-&lang=html
animações CSShttps://pt.w3docs.com/learn-css/animation
Tamanhos da janela e rolagemhttps://pt.w3docs.com/learn-javascript/javascript-window-sizes-and-scrolling
Rolagemhttps://pt.w3docs.com/learn-javascript/javascript-scrolling
Fundamentos dos eventos do mousehttps://pt.w3docs.com/learn-javascript/mouse-events-basics
← PreviousTamanhos de Janela e Rolagemhttps://pt.w3docs.com/learn-javascript/javascript-window-sizes-and-scrolling
Next →Introdução aos Eventos de Browser em JavaScripthttps://pt.w3docs.com/learn-javascript/introduction-to-browser-events
Os dois sistemas de coordenadashttps://pt.w3docs.com/learn-javascript/javascript-coordinates#os-dois-sistemas-de-coordenadas
Lendo coordenadas de um evento do mousehttps://pt.w3docs.com/learn-javascript/javascript-coordinates#lendo-coordenadas-de-um-evento-do-mouse
Lendo a posição de um elemento: getBoundingClientRect()https://pt.w3docs.com/learn-javascript/javascript-coordinates#lendo-a-posição-de-um-elemento-getboundingclientrect
Encontrando o elemento em um ponto: elementFromPoint()https://pt.w3docs.com/learn-javascript/javascript-coordinates#encontrando-o-elemento-em-um-ponto-elementfrompoint
Manipulando posições de elementos com coordenadashttps://pt.w3docs.com/learn-javascript/javascript-coordinates#manipulando-posições-de-elementos-com-coordenadas
Animando com coordenadashttps://pt.w3docs.com/learn-javascript/javascript-coordinates#animando-com-coordenadas
Conclusãohttps://pt.w3docs.com/learn-javascript/javascript-coordinates#conclusão
Practicehttps://pt.w3docs.com/learn-javascript/javascript-coordinates#practice
https://x.com/w3docs
https://github.com/w3docs
https://linkedin.com/company/w3docs
Aprender HTMLhttps://pt.w3docs.com/learn-html
Aprender CSShttps://pt.w3docs.com/learn-css
Aprender JavaScripthttps://pt.w3docs.com/learn-javascript
Aprender Githttps://pt.w3docs.com/learn-git
Aprender Javahttps://pt.w3docs.com/learn-java
Aprender PHPhttps://pt.w3docs.com/learn-php
Aprender Pythonhttps://pt.w3docs.com/learn-python
Exercícioshttps://pt.w3docs.com/exercise
Quizzeshttps://pt.w3docs.com/quiz
Editor Try-ithttps://pt.w3docs.com/tools/editor
HTML Editorhttps://pt.w3docs.com/tools/editor
Password Generatorhttps://pt.w3docs.com/tools/password-generator
HTML Encoderhttps://pt.w3docs.com/tools/html-encoder
Code Diffhttps://pt.w3docs.com/tools/code-diff
JSON Beautifierhttps://pt.w3docs.com/tools/json-beautify
Sobrehttps://pt.w3docs.com/about
Contatohttps://pt.w3docs.com/contact
Política de Privacidadehttps://pt.w3docs.com/privacy
Englishhttps://www.w3docs.com/learn-javascript/javascript-coordinates
Deutschhttps://de.w3docs.com/learn-javascript/javascript-coordinates
Русскийhttps://ru.w3docs.com/learn-javascript/javascript-coordinates
Françaishttps://fr.w3docs.com/learn-javascript/javascript-coordinates
Españolhttps://es.w3docs.com/learn-javascript/javascript-coordinates
Portuguêshttps://pt.w3docs.com/learn-javascript/javascript-coordinates
Italianohttps://it.w3docs.com/learn-javascript/javascript-coordinates

Viewport: width=device-width, initial-scale=1

URLs of crawlers that visited me.