Ambiente do Navegador JavaScript, Especificações
Entenda o ambiente do navegador JavaScript: o objeto global window, o DOM (document), o BOM (navigator, location, history, screen) e as especificações por trás deles, com exemplos executáveis.
JavaScript é uma ferramenta muito importante usada para tornar os sites interativos. Este guia vai ajudá-lo a entender como o JavaScript funciona em um navegador web, abordando tópicos importantes como o Document Object Model (DOM), o Browser Object Model (BOM) e como podemos manipulá-los via JavaScript. Também mostraremos alguns exemplos de código simples para ajudá-lo a começar.
O núcleo do JavaScript versus o ambiente hospedeiro
O próprio JavaScript — a parte definida pela especificação ECMAScript — só conhece coisas como números, strings, objects, arrays, funções, Math, JSON e assim por diante. Ele não tem conceito de página web, botão ou URL.
Essas capacidades vêm do ambiente hospedeiro: o programa que executa o seu código. Em um navegador web, esse ambiente fornece ao JavaScript um grande conjunto de objetos extras (o DOM e o BOM) para que seus scripts possam ler e modificar a página e interagir com o navegador. Um ambiente diferente, como o Node.js, fornece um conjunto completamente diferente (sistema de arquivos, servidores de rede) e não possui document ou window algum.
Portanto, um script de navegador é, na verdade, duas camadas trabalhando juntas:
- Núcleo ECMAScript — os recursos da linguagem que existem em todos os lugares.
- Objetos do host (navegador) —
window,document,navigator,locatione o restante, fornecidos pelo navegador, não pela linguagem.
window: o objeto global
No navegador, o objeto superior de tudo é window. Ele desempenha dois papéis ao mesmo tempo:
- Representa a janela do navegador (seu tamanho, as abas que abre, alertas, temporizadores).
- É o objeto global — toda variável global e função global se torna uma propriedade de
window.
É por isso que todos estes se referem à mesma coisa:
As duas grandes famílias de objetos pendurados em window são o DOM (a página) e o BOM (o navegador). O restante deste guia percorre ambos.
O que é o Document Object Model (DOM)?
O Document Object Model (DOM) é como um mapa do conteúdo de um site. O navegador analisa o HTML em uma árvore de objetos, e a raiz dessa árvore é o objeto document. Cada tag se torna um nó que você pode ler, modificar, adicionar ou remover via JavaScript — o que significa que você pode alterar o conteúdo, a estrutura e o design do site em tempo de execução.
Para um tour mais aprofundado e prático sobre como selecionar e alterar nós, consulte manipulação do DOM.
Exemplo: Adicionando e Alterando Elementos
Veja como adicionar uma nova parte a uma página web e alterar seu conteúdo. Como você pode ver no exemplo abaixo, não há parágrafo de texto no corpo. Mas o código JavaScript adiciona uma nova tag p ao objeto document.
<!-- snippet: html-result -->
<!DOCTYPE html>
<html>
<head>
<title>Simple DOM Example</title>
</head>
<body>
<script>
// Make a new part of the page
const paragraph = document.createElement("p");
paragraph.textContent = "Hello, JavaScript!";
// Add the new part to the page
document.body.appendChild(paragraph);
</script>
</body>
</html>O que é o Browser Object Model (BOM)?
O Browser Object Model (BOM) fornece ao JavaScript a capacidade de interagir com o navegador. Ele inclui vários objetos que permitem que os scripts realizem funções relacionadas ao próprio navegador, não apenas ao conteúdo da página web. O BOM também inclui objetos padrão como history para gerenciar a navegação do navegador e screen para acessar as dimensões da tela. Para esclarecer o limite desde o início: o DOM foca na estrutura e no conteúdo da página web, enquanto o BOM foca na janela do navegador em si.
Componentes do BOM
window
O objeto window representa a janela do navegador. Ele contém funções para controlar o navegador, incluindo leitura de seu tamanho e posição, rolagem, definição de temporizadores (setTimeout, setInterval) e exibição de diálogos (alert, confirm, prompt). Para medir e rolar o viewport especificamente, consulte tamanhos de janela e rolagem.
Veja como você pode abrir uma nova janela do navegador usando o objeto window:
<!-- snippet: html-result -->
<!DOCTYPE html>
<html>
<head>
<title>Open New Window Example</title>
</head>
<body>
<button onclick="openNewWindow()">Click to Open a New Window</button>
<script>
function openNewWindow() {
// Open a new window and specify its properties
var myWindow = window.open("", "MsgWindow", "width=400,height=200");
myWindow.document.body.innerHTML = "<p>Welcome to a new pop-up window! This is created using JavaScript.</p>";
}
</script>
</body>
</html>Nota: Os navegadores modernos geralmente bloqueiam
window.open()se não for acionado diretamente por um gesto do usuário, como um clique.
navigator
O objeto navigator contém informações sobre o navegador, como o nome, a versão e as capacidades do navegador, como suporte a cookies. Veja como usar o objeto navigator para verificar se os cookies estão habilitados:
Location
O objeto location fornece informações sobre a URL atual e pode ser usado para redirecionar o navegador para um endereço diferente. Este exemplo exibirá vários componentes da URL (como o protocolo, o hostname e o pathname) na página web.
history
O objeto history permite que você navegue pelo histórico de sessão do usuário — as páginas visitadas na aba atual — sem expor as URLs reais. É ele que aciona os botões Voltar e Avançar do navegador e é a base para o roteamento do lado do cliente em aplicações de página única.
screen
O objeto screen descreve toda a tela do usuário (monitor), não a janela do navegador. É útil para decidir quanto espaço está disponível antes de abrir ou posicionar uma janela.
Dica:
screenreporta a tela física. Para medir a área que sua página pode realmente usar, leia o viewport dewindowem vez disso.
As especificações por trás do ambiente do navegador
Esses objetos não são inventados por cada navegador — eles são definidos por padrões públicos para que o código se comporte da mesma forma em todos os lugares:
- ECMAScript (mantido pelo TC39) — o núcleo da linguagem JavaScript: sintaxe, tipos e built-ins como
Array,Object,Math,JSON. - DOM Living Standard (WHATWG) —
documente a árvore de nós de elementos. - HTML Living Standard (WHATWG) — define
window,navigator,location,historye como as páginas HTML executam scripts. - CSSOM (W3C) — o model de objeto para ler e alterar estilos via JavaScript.
Quando as pessoas dizem que um recurso é "padrão", significa que ele aparece em uma dessas especificações e os navegadores o implementaram de acordo.
Mais Formas de Usar o DOM
JavaScript também permite que você gerencie o conteúdo do site dinamicamente com eventos e atributos de dados.
Exemplo: Manipulando Cliques e Usando Dados
Veja como configurar eventos de clique e usar atributos de dados:
<!-- snippet: html-result -->
<!DOCTYPE html>
<html>
<head>
<title>Click Event Example</title>
<style>
#first {
background-color: red;
max-width: 100px;
}
</style>
</head>
<body>
<div id="first">Click me!</div>
<script>
document.getElementById('first').addEventListener('click', function () {
alert(`Item clicked.`);
});
</script>
</body>
</html>Este código configura um evento de clique para o elemento div e exibe uma mensagem quando ele é clicado. Alguns eventos também acionam comportamentos padrão do navegador (um link navega, um formulário envia) — para aprender como controlar ou cancelar isso, consulte ações padrão do navegador.
Conclusão
Entender como o JavaScript interage com o navegador permite que você crie sites responsivos e orientados ao usuário. Ao dominar o DOM e o BOM junto com as melhores práticas modernas, você pode criar aplicações web confiáveis e envolventes.