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?

Cuidados com o notebook

Utilizar seu notebook em camas, sofás ou qualquer superfície macia pode obstruir as entradas e saídas de ar, elevando a temperatura e provocando danos a diversos componentes. Utilize-o sempre sobre uma superfície rígida. Saiba mais aqui.

Tetris

O título Tetris detém o recorde de jogo mais adaptado de todos os tempos. No total foram mais de 60 plataformas diferentes que receberam alguma versão do quebra-cabeças criado por Alexey Pajitnov. Conheça mais sobre este incrível jogo clicando aqui.

Civilization

A empresa Take-Two pagou à Infogrames mais de 22 milhões de dólares pelos direitos de Civilization, em novembro de 1994. Ainda sobre este título, Sid Meier, um dos seus fundadores, é o profissional da área dos games mais premiado em todo o mundo.

Mario em Donkey Kong

O personagem Mario surgiu pela primeira vez no mundo dos games em um jogo chamado Donkey Kong, lançado em 1981. Mario, que naquela época se chamava Jumpman, não era o personagem principal do jogo, mas ele se tornaria um dos mais famosos personagens do mundo dos games. Saiba mais.

PC com barulho?

Excesso de barulho dentro do seu gabinete, principalmente logo que você o liga, pode ser sintoma de problemas nas ventoinhas, que podem precisar ser limpas ou trocadas. Entre em contato com um técnico de sua confiança e verifique isso o quanto antes.