CodeWiki

📘 Documentação: O Poder do JavaScript

🧩 Objetivo

Demonstrar como o JavaScript pode interagir com elementos HTML para modificar conteúdo, estilo e comportamento de forma dinâmica.

🖼️ Estrutura HTML

<h2>O Poder do JavaScript</h2>
<p id="demo">JS pode mudar o conteúdo</p>

<h2>: Título da página.
<p id="demo">: Parágrafo com um identificador único (id="demo") que será manipulado via JavaScript.

🧪 Botões Interativos

Cada botão utiliza o evento onclick para executar uma ação JavaScript ao ser clicado.

🔹 Mudar a cor do texto para vermelho

<button type="button" onclick='document.getElementById("demo").style.color="red"'>
  Mudar o conteúdo para a cor Vermelho
</button>

document.getElementById("demo"): Seleciona o elemento com id="demo".
.style.color = "red": Altera a cor do texto para vermelho.

🔹 Mudar o conteúdo do parágrafo

<button type="button" onclick='document.getElementById("demo").innerHTML="Hello JS"'>
  Mudar o conteúdo para Hello JS
</button>

.innerHTML: Substitui o conteúdo interno do elemento por "Hello JS".

🔹 Aumentar o tamanho da fonte

<button type="button" onclick='document.getElementById("demo").style.fontSize="30px"'>
  Aumentar a fonte para 30px
</button>

.style.fontSize = "30px": Modifica o tamanho da fonte.
⚠ Nota: O uso de camelCase é necessário em JavaScript para propriedades CSS com hífen (ex: font-size → fontSize).

🔹 Botão Geral (múltiplas ações)

<button type="button" onclick='
  document.getElementById("demo").innerHTML="Hello World";
  document.getElementById("demo").style.color="red";
  document.getElementById("demo").style.fontSize="30px";
'>
  Botão Geral
</button>

Executa três ações:
- Muda o conteúdo para "Hello World".
- Altera a cor para vermelho.
- Aumenta a fonte para 30px.
Ponto e vírgula ;: Separa as instruções para que sejam executadas em sequência.

🧠 Conceitos Importantes

Conceito	Explicação
`onclick`	Evento que dispara uma função JavaScript ao clicar em um elemento.
`document.getElementById()`	Seleciona um elemento HTML pelo seu `id`.
`.style`	Permite modificar estilos CSS diretamente via JavaScript.
`.innerHTML`	Altera o conteúdo HTML interno de um elemento.
`camelCase`	Convenção usada em JavaScript para propriedades CSS com hífen.
`;` (ponto e vírgula)	Indica o fim de uma instrução JavaScript.

✅ Resultado Esperado

Ao clicar nos botões, o parágrafo com id="demo" será atualizado dinamicamente, mostrando o poder do JavaScript em manipular o DOM (Document Object Model).

A linguagem JavaScript pode mudar o conteúdo

📘 Documentação Ampliada: Código Inteligente e Reutilizável com JavaScript

🎯 Objetivo

Demonstrar como tornar o código JavaScript mais legível, reutilizável e eficiente ao interagir com elementos HTML.

🧠 Boas Práticas Aplicadas

Prática	Benefício
Separação de Preocupações	Mantém HTML e JavaScript organizados e independentes.
Uso de Funções	Permite reutilização e facilita manutenção do código.
Uso de Variáveis	Evita repetição de código e melhora a performance.
Estilo Centralizado	Facilita ajustes visuais e promove consistência.

💻 Exemplo Completo com Separação de Código

📄 HTML (estrutura)

<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="UTF-8">
  <title>O Poder do JavaScript</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>

  <h2>O Poder do JavaScript</h2>
  <p id="demo">JS pode mudar o conteúdo</p>
  <button type="button" onclick="mudarConteudo()">Trocar o conteúdo</button>

  <script src="script.js"></script>
</body>
</html>

⚙️ JavaScript (comportamento)

// script.js

function mudarConteudo() {
  const paragrafo = document.getElementById("demo");

  paragrafo.innerHTML = "Estou aprendendo JavaScript";
  paragrafo.style.color = "green";
  paragrafo.style.fontSize = "48px";
  paragrafo.style.backgroundColor = "limegreen";
}

🔍 Explicação da Função `mudarConteudo()`

document.getElementById("demo"): Busca o elemento com id="demo".
paragrafo.innerHTML: Altera o conteúdo textual.
paragrafo.style.color: Muda a cor do texto.
paragrafo.style.fontSize: Define o tamanho da fonte.
paragrafo.style.backgroundColor: Aplica cor de fundo.

Exemplo do código

JS pode mudar o conteúdo