Entrada e Saída: Conversar com o Utilizador

O que vais aprender nesta aula:

  • Ler texto de caixas de entrada (input.value)
  • Escrever texto no ecrã (innerText vs innerHTML)
  • Mudar estilos CSS via JavaScript (style)

🧠 Teoria (com Analogia e Contexto Real)

Já sabemos "ouvir" o clique. Agora precisamos de saber "ler" o que foi escrito.

📝 Analogia do Formulário em Papel

O HTML é a folha de papel com os espaços em branco.

O Utilizador escreve nesses espaços.

O JavaScript é o funcionário que pega na folha e lê o que está escrito no campo "Nome" para processar o pedido.

💻 Prática (Orientada e Progressiva)

Vamos criar um saudador automático:

1. Ler o Valor (Input)

const caixaNome = document.querySelector("#nome");
let nomeEscrito = caixaNome.value; // .value é o segredo!

2. Escrever a Resposta (Output)

const sitioDaResposta = document.querySelector("#resposta");
sitioDaResposta.innerText = "Olá " + nomeEscrito;

🧪 Área de Testes

Escreve o teu nome e clica no botão:

...

✅ Verificação de Conhecimento

1. Para ler texto de um <p> uso `innerText`. E para ler de um <input>?

Também uso innerText.
Uso value.
Uso text().

2. Qual a diferença entre `innerText` e `innerHTML`?

São iguais.
O innerHTML permite colocar tags HTML (como <b>), o innerText coloca tudo como texto simples.
O innerHTML é mais lento.

🏠