Saída em JavaScript
Já sabe pôr um script na página. A seguir: onde aparece o resultado? Na página para quem visita, num diálogo para fechar, ou só na Console para si. Uma linguagem, quatro sítios muito diferentes.
Como mostrar um resultado JavaScript?
Para visitantes, atualize um elemento que já existe — textContent para texto simples, innerHTML só quando precisa de marcação. Para uma mensagem que bloqueia, window.alert. Para si depurar, console.log. document.write é um fluxo antigo: aceitável enquanto o ficheiro é lido; depois do carregamento pode substituir o documento inteiro.
Onde se vê o resultado?
📊 Sítios habituais para ver o resultado
| Método | Quem vê | Predefinição para iniciantes |
|---|---|---|
textContent num elemento |
Visitantes, na página | Sim — saída do dia a dia |
innerHTML num elemento |
Visitantes, com etiquetas HTML | Só se a marcação for sua |
window.alert |
Visitantes, num diálogo | Pouco — a página espera o OK |
console.log |
Você, na Console do DevTools | Sim para depurar; visitantes não veem |
document.write |
O fluxo HTML | Evite depois de carregar |
Na página (predefinição para visitantes)
Deixe um título ou parágrafo real no HTML. Quando o script corre (fim do body, como na sessão anterior), mude esse nó. Quem visita vê o texto novo sem abrir DevTools.
<!DOCTYPE html>
<html>
<head>
<title>Output — Page</title>
</head>
<body>
<h1 id="msg">Waiting…</h1>
<script>
document.getElementById("msg").textContent =
"Hello from JavaScript";
</script>
</body>
</html>
Porque textContent primeiro
- Se o script falhar, «Waiting…» continua no HTML
- Aspas e
<ficam texto, não etiquetas - O mesmo hábito do script no fim do body
- O módulo DOM vem depois; aqui basta «pôr o resultado aqui»
innerHTML — quando o resultado é marcação
innerHTML lê uma cadeia como HTML. Use quando insere de propósito etiquetas que escreveu. Não deite entrada crua de utilizadores em innerHTML. Para um nome ou um preço, textContent.
<!DOCTYPE html>
<html>
<head>
<title>Output — innerHTML</title>
</head>
<body>
<p id="box">Empty</p>
<script>
document.getElementById("box").innerHTML =
"<strong>Ready</strong> — markup inside the paragraph";
</script>
</body>
</html>
document.write — conhecer e usar pouco
document.write envia texto para o fluxo HTML enquanto o ficheiro é analisado. Se o chamar depois de carregar (clique tardio), muitos browsers abrem um fluxo novo e apagam a página. Não use para atualizações. Mude um elemento.
<!DOCTYPE html>
<html>
<head>
<title>Output — write</title>
</head>
<body>
<p>This paragraph exists first.</p>
<button type="button" id="wipe">Call document.write after load</button>
<script>
document.getElementById("wipe").onclick = function () {
document.write("The previous page content is gone");
};
</script>
</body>
</html>
Abra a demo, clique, e veja: o primeiro parágrafo desaparece. Por isso este curso não usará document.write nos exemplos seguintes.
alert — um diálogo que pára a página
window.alert (quase sempre alert) abre um diálogo de sistema. A página espera o OK. Útil uma vez para provar que o script correu. Fraco como única interface: sem estilo, chato em série, interrompe leitores de ecrã e teclado. Mensagens a sério, na página.
<!DOCTYPE html>
<html>
<head>
<title>Output — Alert</title>
</head>
<body>
<p>The page pauses until you dismiss the dialog.</p>
<script>
alert("Script ran — click OK to continue");
</script>
</body>
</html>
console.log — para si, não para quem visita
A Console é uma ferramenta de desenvolvimento. console.log imprime lá. Quem compra no telemóvel não vê. Bom para inspecionar um número ou uma cadeia enquanto aprende. Um log bem-sucedido não significa «a app mostrou o resultado».
console.log("Visible in DevTools, not on the page");
console.log(2 + 2);
Abra DevTools (muitas vezes F12), separador Console, atualize, leia as linhas. Se só mudar console.log e o título ficar «Waiting…», quem visita continua a ver «Waiting…».
Experimente você
- Guarde a página
textContent, abra, mude a cadeia, atualize. - Passe a linha para
innerHTMLcom<strong>e confirme o negrito. - Abra a Console e execute o exemplo
console.log— nada de novo no corpo. - Execute o alert uma vez; depois substitua por uma atualização de título para a página não bloquear.
- Opcional: clique no botão
document.writepara sentir o apagar — depois retire esse padrão dos seus ficheiros.
Erros comuns
- Mostrar resultados só com
console.loge estranhar uma página vazia - Meter em
innerHTMLtexto que não escreveu (formulários, URLs, chat) em vez detextContent - Chamar
document.writedepois de carregar e perder o layout alerta cada tecla- Misturar com Where To: ali onde vive o script; aqui onde aparece o resultado
Resumo
- Predefinição visível: atualize um elemento com
textContent innerHTMLinsere marcação que controla — não cadeias não fiáveisalertbloqueia; use poucoconsole.logé para quem programa, no DevTools- Não use
document.writedepois de carregar; o documento pode desaparecer - Pratique passar a mesma mensagem Console → alert → título
🧠 Teste Seu Conhecimento
Teste Seu Conhecimento
Desafie-se com este questionário interativo e veja o quão bem você entende o tópico
📝 Instruções
- Leia cada pergunta cuidadosamente
- Selecione a melhor resposta para cada pergunta
- Você pode refazer o quiz quantas vezes quiser
- Seu progresso será mostrado no topo