Agora que você já sabe selecionar elementos e reagir a eventos, chegou o momento de fazer algo poderoso: alterar o conteúdo e o visual da página usando JavaScript.

Essa é a base de toda interatividade moderna na web.

🎯 Objetivo da aula

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

  • Alterar textos de elementos
  • Modificar conteúdo HTML
  • Mudar estilos com JavaScript
  • Combinar eventos com manipulação do DOM

📝 Alterando texto com textContent

A forma mais simples de alterar o texto de um elemento é usando textContent. 

 <p id="mensagem">Texto original</p> 
 
  let msg = document.querySelector("#mensagem"); 
  msg.textContent = "Texto alterado pelo JavaScript!";

O conteúdo do parágrafo é atualizado imediatamente.

⚠️ Diferença entre textContent e innerHTML

Também podemos usar innerHTML, mas é preciso cuidado. 

 msg.innerHTML = "Texto com HTML";
Evite innerHTML com dados do usuário. Isso pode causar problemas de segurança.

🎨 Alterando estilos com style

O JavaScript pode alterar estilos CSS diretamente: 

 
  msg.style.color = "blue"; 
  msg.style.fontSize = "20px"; 
  msg.style.backgroundColor = "#f0f0f0";

Propriedades CSS com hífen usam camelCase no JavaScript.

🎯 Usando classes CSS (forma recomendada)

A melhor prática é adicionar ou remover classes CSS, em vez de alterar estilos diretamente. 

 .destaque { color: white; background-color: #428bca; padding: 10px; } 
 msg.classList.add("destaque");

🔁 Removendo e alternando classes

 
  msg.classList.remove("destaque"); 
  msg.classList.toggle("destaque");

O método toggle adiciona ou remove a classe automaticamente.

🖱️ Exemplo completo com evento

Vamos unir tudo o que aprendemos: 

 <button id="btn">Alterar</button> <p id="texto">Olá!</p> 
 
  let botao = document.querySelector("#btn"); 
  let texto = document.querySelector("#texto"); 
  botao.addEventListener("click", function() 
  { 
    texto.textContent = "Texto alterado!"; 
    texto.classList.toggle("destaque"); 
  });
Esse padrão é a base de interatividade em páginas web.

🧠 Boas práticas finais

  • Prefira textContent para texto
  • Use classList para estilos
  • Evite misturar lógica e visual
  • Escreva código claro e organizado

Resumo da aula para nunca mais esquecer

  • textContent altera textos com segurança.
  • innerHTML permite HTML, mas exige cuidado.
  • Estilos podem ser alterados com classList.
  • Eventos + DOM = interatividade.

🎓 FIM DO MÓDULO BÁSICO — PARABÉNS!

Você concluiu o Módulo Básico de JavaScript 🎉 Agora você já entende como o JavaScript:

  • funciona
  • interage com a página
  • responde ao usuário

No próximo módulo, vamos entrar em conceitos mais avançados e construir funcionalidades ainda mais poderosas 🚀

HARDWARE

Entendendo o seu computador

O que há dentro do meu computador?

Existem alguns componentes fundamentais presentes dentro do seu computador e é muito importante que você conheça um pouco sobre eles, seja para argumentar com algum vendedor durante a compra de um novo PC ou para identificar alguma atitude desleal de algum técnico que esteja te passando um orçamento para reparo. Na seção Raio-X aqui do Contém Bits você pode conhecer e entender mais detalhadamente sobre cada componente, ou também pode clicar abaixo no componente que deseja, para conhecê-lo melhor.

  • Gabinetes

  • Placas-Mãe

  • Processadores

  • Memória

  • Fontes

  • Drives Ópticos

  • Discos Rígidos

  • SSD

  • Placas de Som

  • Placas de Vídeo

Você Sabia?

Computadores de 1,5 tonelada

Em 1949 a revista Popular Mechanics fez uma previsão para o futuro, dizendo: "Um dia os computadores pesarão menos do que 1,5 tonelada". E pensar que temos smartphones capazes de realizar milhões de vezes mais operações do que os computadores daquela época.

Duck Hunt

Ao completar o nível 99 do jogo Duck Hunt, para Nintendo, o jogo retorna ao primeiro nível, mas um bug impede que se acerte os patos neste recomeço. Este é um exemplo do que é chamado no mundo dos games de "Kill Screen".

Tetris

Desde o seu lançamento, em 1985, o fantástico jogo Tetris vende pelo menos 70 milhões de unidades por ano em todo o mundo! Os dados são oficiais e fornecidos pela THQ, uma das distribuidoras do título.

Street Fighter 2

Street Fighter 2, lançado para o Super Nintendo no início dos anos 90, foi o principal responsável pelo aumento nas vendas deste console. Graças ao sucesso do título nos Arcades e à perfeita adaptação ao console, muitos consumidores adquiriram o SNES para jogarem o título em casa. Saiba mais.

PDP-1

O primeiro computador a conseguir rodar o jogo Spacewar era o PDP-1, que custava 120 mil dólares e pertencia ao Massachusetts Institute of Technology. O jogo demorou 200 horas para ser desenvolvido, em 1962, e seu criador foi um cientista da computação chamado Steve Russel.