Aula 03 - DOM.pdf

JavaScript
Ambiente do Navegador

❑ Introdução
• A linguagem JavaScript foi inicialmente criada para
navegadores da web. Desde então, evoluiu e se tornou uma
linguagem com muitos usos e plataformas.
• Uma plataforma pode ser um navegador, um servidor da web,
uma máquina de lavar roupa ou outro dispositivo. Cada um
deles fornece funcionalidades específicas da plataforma. A
especificação JavaScript chama esse ambiente de "host".

❑ Introdução
• Um ambiente "host" fornece objetos e funções específicos da
plataforma adicionais ao núcleo da linguagem. Os navegadores
da Web fornecem um meio de controlar as páginas da web. O
Node.JS fornece recursos do lado do servidor e assim por
diante.

❑ Introdução
• Há um objeto "raiz" chamado "window". Tem dois papéis:
1. Primeiro, é um objeto global para código JavaScript;
2. Em segundo lugar, representa a "janela do navegador" e
fornece métodos para controlá-lo.

❑ Introdução
function sayHi() {
alert("Olá");
}
// Funções globais são acessíveis através de propriedades
// do objeto window.
window.sayHi();
alert(window.innerHeight);

❑ Document Object Model (DOM)
O objeto "document" dá acesso ao conteúdo da página. Podemos
mudar ou criar qualquer coisa na página usando este objeto.
Por exemplo:
// para mudar a cor de fundo para vermelho
document.body.style.background = "red";
// mudar novamente após 1 segundo
setTimeout(() => document.body.style.background = "", 1000);

❑ Document Object Model (DOM)
Propriedades e métodos são descritos através de uma
especificação. Existem dois grupos de trabalho que a
desenvolvem:
• W3C - a documentação está em https://www.w3.org/TR/dom
• WhatWG, publicando em https://dom.spec.whatwg.org

❑ DOM não é apenas para navegadores
• A especificação DOM explica a estrutura de um documento e
fornece objetos para manipulá-lo. Existem instrumentos que
não são navegadores e que também a usam.
• Por exemplo, ferramentas do lado do servidor que baixam
páginas HTML e as processam usam o DOM. Elas podem
suportar apenas uma parte da especificação.

❑ BOM (parte da especificação do HTML)
• O Browser Object Model (BOM) é um objeto adicional fornecido pelo
navegador (ambiente host) para trabalhar com tudo, exceto o documento.
Por exemplo:
• O objeto do "navigator" fornece informações básicas sobre o navegador e o
sistema operacional. Existem muitas propriedades, mas as duas mais
conhecidas são: navigator.userAgent - sobre o navegador atual, e
navigator.platform - sobre a plataforma (pode ajudar a diferir entre Windows
/ Linux / Mac etc).
• O objeto "location" nos permite ler o URL atual e redirecionar o navegador
para um novo.

❑ BOM (parte da especificação do HTML)
// mostra a URL atual
alert(location.href);
if (confirm("Ir para wikipedia?")) {
// Redireciona o browser para outra URL
location.href = "https://wikipedia.org";
}

❑ A árvore do DOM
• A espinha dorsal de um documento HTML são tags.
• De acordo com o Document Object Model (DOM), cada tag HTML é um
objeto. As tags aninhadas são chamadas de "filhas" da que as está
envolvendo.
• O texto dentro de uma tag também é um objeto.
• Todos esses objetos são acessíveis usando JavaScript.

<!DOCTYPE HTML>
<html>
<head>
<title>About elks</title>
</head>
<body>
The truth about elks.
</body>
</html>

O texto dentro dos elementos forma os nós de texto, rotulados como #text. Um nó de texto
contém apenas uma string. Não pode ter filhos e é sempre uma folha da árvore.
• Por exemplo, a tag <title> tem o texto "About elks".
Em relação aos caracteres especiais nos nós de texto:
• uma nova linha: ↵ (em JavaScript conhecido como n)
• um espaço: ␣
Espaços e novas linhas - são caracteres totalmente válidos, formam nós de texto e se tornam
parte do DOM. Assim, por exemplo,a tag <head> contém alguns espaços antes de <title>, e esse
texto se torna um nó #text (contém uma nova linha e apenas alguns espaços).

❑ Autocorreção
• Se o navegador encontrar um HTML malformado, ele será corrigido automaticamente ao
montar o DOM.
• Por exemplo, a tag superior é sempre <html>. Mesmo que não exista no documento -
existirá no DOM, o navegador irá criá-la. O mesmo vale para o <body>.
• Por exemplo, se o arquivo HTML for uma única palavra "Hello", o navegador o incluirá em
<html> e <body>, adicionará o <head> necessário e o DOM será:

❑ Tudo em HTML, até mesmo comentários,
torna-se parte do DOM.
• Mesmo a diretiva <!DOCTYPE ...> no início do HTML também é um nó DOM. Está na árvore
DOM antes de <html>.
• O objeto de documento que representa o documento inteiro é, formalmente, um nó DOM
também.
Existem 12 tipos de nós. Na prática, geralmente trabalha-se com 4 deles:
1. documento - o “ponto de entrada” no DOM.
2. nós de elemento - tags HTML, os blocos de construção da árvore.
3. nós de texto - contêm texto.
4. comentários - às vezes, pode-se colocar as informações lá, elas não serão exibidas, mas o JS
pode lê-las no DOM.

Aula 03 - DOM.pdf

Mais conteúdo relacionado

Mais procurados

Semelhante a Aula 03 - DOM.pdf

Aula 03 - DOM.pdf