Computação & Engenharia de Software

⚡ Capítulo 01: JavaScript ES6+ Vanilla e a Árvore do DOM

Leitura de 4 min

⚡ Capítulo 01: JavaScript ES6+ Vanilla e a Árvore do DOM

🎯 Objetivos da Aula

Ao final desta aula, você será capaz de:

  1. Compreender o papel do JavaScript (ES6+) como linguagem de programação dinâmica e interpretada no navegador.
  2. Entender a estrutura hierárquica do DOM (Document Object Model) gerada pelo navegador a partir do HTML.
  3. Inspecionar o objeto global window e a propriedade document via DevTools.
  4. Conectar arquivos JavaScript externos (.js) a páginas HTML5 usando a tag <script src="...">.

🧠 1. O que é o DOM (Document Object Model)?

O DOM não é a linguagem JavaScript em si, mas uma API de programação mantida pelos navegadores que representa a página HTML como uma árvore de objetos encadeados.

flowchart TD
    Window["window (Objeto Global do Navegador)"] --> Document["document (Página HTML)"]
    Document --> RootHTML["<html> (Elemento Raiz)"]
    
    RootHTML --> HeadNode["<head>"]
    RootHTML --> BodyNode["<body>"]
    
    HeadNode --> TitleNode["<title> Portal Acadêmico"]
    BodyNode --> HeaderNode["<header>"]
    BodyNode --> MainNode["<main>"]
    
    MainNode --> H1Node["<h1 id='titulo'> Alunos"]
    MainNode --> PNode["<p class='desc'> Lista de Cadastro"]

O Poder do JavaScript Vanilla no DOM:

O JavaScript atua como um “manipulador” dessa árvore. Através de métodos nativos, podemos:

  • Alterar textos, atributos e estilos CSS em tempo real sem recarregar a página.
  • Adicionar ou remover nós (Element) dinamicamente.
  • Escutar interações do usuário (cliques, digitação, submissão de formulários).

💻 2. Vinculando o JavaScript ao HTML

A boa prática de engenharia frontend exige a separação de responsabilidades, mantendo o código JS em um arquivo externo .js carregado antes do fechamento da tag </body> ou com o atributo defer.

Arquivo HTML: index.html

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <title>Introdução ao JavaScript Vanilla</title>
</head>
<body>
 
    <h1 id="titulo-pagina">Aguardando inicialização...</h1>
    <p id="mensagem-status">Status do sistema offline.</p>
 
    <!-- Carregamento do script no final do body -->
    <script src="app.js"></script>
</body>
</html>

Arquivo JavaScript: app.js

// Exibe mensagem no Console do Desenvolvedor (F12)
console.log(">> Script app.js carregado com sucesso!");
 
// Inspeciona a arvore do DOM no console
console.log(document);
 
// Seleciona um elemento pelo ID e altera seu texto no DOM
const titulo = document.getElementById("titulo-pagina");
const status = document.getElementById("mensagem-status");
 
titulo.innerText = "Sistema de Gestão de Alunos (JS Vanilla)";
status.innerText = "Status: Conectado e Operacional em tempo real!";
status.style.color = "#2e7d32"; // Altera o CSS via JS

⚔️ 3. Desafios Práticos (Exercícios 30/50/20)

🥉 Nível Bronze (Fixação)

  1. O que significa a sigla DOM e qual a sua função em uma aplicação web?
  2. Por que é recomendado colocar a tag <script src="app.js"></script> no final do <body> ou utilizar o atributo defer?

🥈 Nível Prata (Aplicação)

  1. Crie um arquivo HTML e um arquivo script.js. Utilize o método document.querySelector('h1') para selecionar o título da página e alterar sua cor de fundo para amarelo (#fff59d) assim que a página carregar.

🥇 Nível Ouro (Desafio)

  1. Escreva um script em JavaScript que acesse a propriedade document.body e altere a cor de fundo da página de forma dinâmica dependendo da hora atual (ex.: fundo claro entre 06h e 18h e fundo escuro à noite).

💡 Gabaritos Sanfonados de Resposta

💡 Ver Gabarito do Nível Bronze
  1. DOM significa Document Object Model. É a representação em memória da estrutura HTML em forma de árvore de objetos que permite que linguagens como o JavaScript modifiquem a página dinamicamente.
  2. Porque se o script for executado no início do <head> antes do HTML ser lido, o elemento procurado no DOM ainda não existirá na memória RAM, retornando null ou gerando erro.
💡 Ver Gabarito do Nível Prata & Ouro (Código JS) 
// Gabarito Nível Ouro: Fundo dinamico baseado na hora
const horaAtual = new Date().getHours();
 
if (horaAtual >= 6 && horaAtual < 18) {
    document.body.style.backgroundColor = "#ffffff";
    document.body.style.color = "#333333";
    console.log(">> Modo Diurno Ativo");
} else {
    document.body.style.backgroundColor = "#1e1e1e";
    document.body.style.color = "#ffffff";
    console.log(">> Modo Noturno Ativo");
}

📚 Referências Teóricas Oficiais

  • ECMA INTERNATIONAL. ECMAScript 2023 Language Specification (ECMA-262).
  • W3C / WHATWG. DOM Living Standard — Document Object Model (https://dom.spec.whatwg.org/).

⬅️ Voltar ao Sumário da Fase 04 | Próximo Capítulo (Seleção e Manipulação de Elementos) ➡️

Visão de gráfico

Backlinks