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?

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.

Mario e seu bigode

O personagem Mario só possui bigode porque quando ele foi criado, em 1981, a resolução de tela dos equipamentos disponíveis não permitia que fosse desenhada uma boca, então os desenvolvedores fizeram o grande bigode para contornar essa limitação tecnológica.

Space Invaders

A partida mais longa do clássico Space Invaders durou incríveis 38 horas e 32 minutos e esta façanha foi conseguida por um jogador de apenas 12 anos! O jogo, claro, podia ser pausado para alimentação e descanso, mas ainda assim o recorde, estabelecido no dia 02/09/1980, ainda não foi quebrado. Saiba mais.

Recorde de patentes

A IBM detém o recorde de patentes em um único ano, atingindo a marca de 4186 registros no ano de 2008. Clique aqui e saiba mais sobre esta gigante do mundo da tecnologia.

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.