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?

Ultima Online

Criar um jogo é muito mais complexo do que parece. São milhares, às vezes, milhões de linhas de código. Isso não é exagero! Apenas o jogo Ultima Online possui 6.006.313 linhas de programação, totalizando 25.103.295 palavras

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.

Asteroids

O título Asteroids, do Atari, possui recorde de pontuação há 30 anos. Em 1982 um americano chamado Scott Safran atingiu a marca de 41.336.440. Atualmente ele faz parte de um minúsculo grupo de jogadores que conseguiram manter seus recordes por mais de 30 anos.

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.

Senhas

Digitar senhas em computadores de uso coletivo é extremamente perigoso, pois além de softwares de monitoramento, existem dispositivos de hardware que podem capturar suas senhas. Evite ao máximo acessar sites de bancos a partir destes computadores. Veja mais aqui.