DS & II

Capítulo 02 - Protocolo JARVIS

Leitura de 4 min

🚀 Capítulo 02: Protocolo JARVIS (Tema: Homem de Ferro)

NOTE

Este capítulo utiliza a temática de Homem de Ferro para explicar o JavaScript e a manipulação do DOM. Vamos dar inteligência e comportamento à nossa interface!

1. 🎯 Objetivo da Aula

Compreender o que é o JavaScript, como ele adiciona comportamento e lógica às páginas web e aprender o conceito básico de manipulação do DOM (Document Object Model).

2. 🏢 O Cenário Prático (Seu Desafio)

O herói Homem de Ferro possui a armadura física e os painéis visuais holográficos (que seriam o nosso HTML e CSS). Mas o que realmente faz as coisas acontecerem e toma decisões é o JARVIS, o sistema de inteligência artificial. Ele calcula a energia restante, abre as armas quando o Tony Stark pede e avisa sobre perigos iminentes. Ele dá vida e inteligência à armadura!

No navegador web, o JavaScript é o nosso JARVIS!

  • Ele é a verdadeira linguagem de programação do frontend.
  • É ele quem faz cálculos, valida formulários, altera o HTML em tempo real e faz a página “pensar”. Seu desafio é programar os primeiros comandos do JARVIS!

🧠 Fundamentos: A Teoria Traduzida

🧠 1. O que é JavaScript (JS)?

É a linguagem que roda no navegador do usuário e permite criar páginas interativas. Com ele, você pode criar variáveis para guardar dados e funções para executar ações.

🌳 2. O que é o DOM?

DOM significa Document Object Model (Modelo de Objeto do Documento). Quando o navegador lê o seu arquivo HTML, ele cria uma árvore de objetos na memória.

  • O JavaScript usa o DOM como uma “ponte” para acessar e alterar o HTML e o CSS.
  • Se você quer mudar o texto de um parágrafo via JavaScript, você usa o DOM para achar aquele parágrafo e mudar o conteúdo dele!

4. 📖 Exemplo Guiado: Comando do JARVIS

Vamos fazer o JARVIS mudar o status da armadura na tela quando clicarmos em um botão:

<!-- HTML -->
<p id="status">Status: Desligado</p>
<button onclick="ligarArmadura()">Ativar Protocolo JARVIS</button>
// JavaScript
function ligarArmadura() {
    // 1. O JARVIS procura o elemento com o ID "status" no HTML
    let elementoStatus = document.getElementById("status");
    
    // 2. O JARVIS muda o texto daquele elemento!
    elementoStatus.innerText = "Status: ARMADURA ATIVADA! 🚀";
    
    // 3. O JARVIS muda a cor do texto para verde via CSS!
    elementoStatus.style.color = "#00ff00";
}

5. 🛠️ Prática Obrigatória 1: O que o JS faz?

Dentre as opções abaixo, qual é a única tarefa que exige o uso de JavaScript (o JARVIS) em vez de apenas HTML e CSS?

  1. Criar uma caixa de texto para o usuário digitar a senha.
  2. Deixar o fundo da página azul escuro.
  3. Verificar se a senha digitada tem mais de caracteres e mostrar um aviso se for muito curta.

6. 🛠️ Prática Obrigatória 2: Achando o Elemento

  1. No exemplo guiado, usamos o comando document.getElementById("status"). Para que serve a palavra document nesse comando?

7. 📤 Instruções de Entrega (GitHub Desktop + Microsoft Teams)

  1. Faça o Commit: No GitHub Desktop, digite a mensagem (ex: Finaliza Capítulo 02 FS_JARVIS) e clique em Commit to main.
  2. Envie para a Nuvem (Push): Clique em Push origin.

8. 📂 Estrutura de Pastas

proj_aplicacoes_full_stack/
├── capitulos/
│   ├── capitulo_02_jarvis.md
│   └── codigos/
│       └── cap02/
│           └── jarvis.js

💡 Checkpoint de Lógica

O JavaScript é uma linguagem “case-sensitive”, o que significa que ele diferencia letras maiúsculas de minúsculas. Escrever getElementById funciona, mas getelementbyid vai dar erro!

10. 🔥 Desafio de Fixação

Crie uma função em JavaScript que mude a cor de fundo da página para preto quando for chamada.

🔑 Gabarito de Código/Fórmulas

Gabarito da Prática 1:

  1. Opção 3 (Exige lógica de programação e validação em tempo real). Gabarito da Prática 2:
  2. A palavra document representa a página HTML inteira carregada no navegador. É através dela que o JavaScript consegue “entrar” no HTML e buscar os elementos usando o DOM!

← Capitulo Anterior | Proximo Capitulo →

Visão de gráfico

Backlinks