Como criar um clássico “Hello world!” em JavaScript
Um guia prático para validar seu ambiente, entender onde o JavaScript roda e dar o primeiro passo com exemplos simples e erros comuns explicados.
Economize R$320 na compra do seu curso. Use o código e comece a aprender!
Conheça o mundo e as oportunidades de TI e suas tecnologias atuais. Aprenda o pensamento computacional e as principais linguagens de programação. Tenha sua primeira experiência com códigos e dados e descubra um novo caminho profissional.
Em poucos passos, você vai do zero ao resultado com três jeitos práticos de mostrar “Hello, World!” em JavaScript: consola, página e alerta. Os exemplos curtos ajudam a validar o ambiente, entender quando usar cada saída e preparar o terreno para evoluir para lógica real.
Começar é simples. Em poucos minutos, dá para escrever uma linha de código e ver “Hello, World!” na tela. Esse primeiro passo ajuda a entender onde o JavaScript roda, como conectar HTML e JS e qual é o fluxo básico: escrever, carregar e observar o resultado.
O que é o “Hello, World!” em JavaScript
“Hello, World!” é o primeiro teste em qualquer linguagem de programação. Em JavaScript, ele ajuda a entender três conceitos fundamentais:
- Texto (string):
"Hello, World!"é uma sequência de caracteres entre aspas. - Onde o resultado aparece: pode surgir na consola do navegador, dentro da página HTML (DOM) ou numa janela de alerta.
- Como o JavaScript é executado: o navegador ou o Node.js executa o script linha a linha e mostra o resultado conforme o comando.
Pense assim: o ficheiro é o roteiro, o JavaScript é o ator e a consola, a página ou o alerta são o palco onde a fala aparece.
Porque criar “Hello, World!” em JavaScript
Criar um “Hello, World!” parece simples, mas cumpre funções importantes:
- Testar o ambiente: confirmar se o navegador ou o Node.js está configurado corretamente.
- Entender o fluxo básico: escrever código, executar e ver o resultado.
- Comparar saídas: consola para programador, página para utilizador, alerta para demonstração rápida.
- Ganhar confiança: prova de que é possível ir do zero a algo visível em segundos.
Como criar “Hello, World!” em JS
Existem três caminhos principais. Use o que fizer mais sentido no momento.
1. Direto no navegador (consola)
Abra qualquer página, pressione F12 (ou clique em Inspecionar) e vá até a aba Consola. Escreva:
console.log(“Hello, World!”);
O texto aparece nas ferramentas de programador. É a forma mais rápida para testar código.
O texto surge nas ferramentas de programador. Ótimo para testes rápidos.
2. HTML + <script> (na página)
Crie um ficheiro
index.html
e escreva o código diretamente na página:
<!doctype html>
<html lang="pt-BR">
<head>
<meta charset="utf-8" />
<title>Hello JS</title>
</head>
<body>
<div id="app"></div>
<script>
const msg = "Hello, World!";
document.getElementById("app").textContent = msg;
</script>
</body>
</html>
Abra o ficheiro no navegador e o texto aparecerá no elemento #app.
3. Node.js (terminal)
Crie um ficheiro
hello.js
:
console.log(“Hello, World!”);
No terminal, execute:
node hello.js
O texto será exibido diretamente no terminal.
Exemplos de código
Usar uma função
A função torna o “Hello” reutilizável:
function hello(name = "World") {
return `Hello, ${name}!`;
}
// Consola
console.log(hello());
console.log(hello(“JS”));
// Página
document.getElementById(“app”).textContent = hello(“página”);
A função retorna a mensagem em vez de exibir diretamente. Assim, você decide onde mostrar o resultado.
Escrever diretamente no HTML
Esse exemplo escreve o texto na página após o carregamento do HTML:
<!doctype html>
<html lang="pt-BR">
<head>
<meta charset="utf-8" />
<title>Hello na página</title>
<script defer>
document.addEventListener("DOMContentLoaded", () => {
const el = document.getElementById("app");
el.textContent = "Hello, World! (DOM)";
});
</script>
</head>
<body>
<main>
<h1>Exemplo</h1>
<p id="app"></p>
</main>
</body>
</html>
Usar
DOMContentLoaded
garante que o elemento exista antes do JavaScript tentar acessá-lo.
Usar alert
O
alert
mostra uma janela modal simples:
<!doctype html>
<html lang="pt-BR">
<head>
<meta charset="utf-8" />
<title>Hello com alert</title>
<script>
alert("Hello, World!");
</script>
</head>
<body>
<p>Este texto só aparece depois de fechar o alerta.</p>
</body>
</html>
É útil para demonstrações rápidas, mas não recomendado para interfaces reais.
Erros comuns e como evitar
- Script antes do DOM: elementos retornam
null.
Como evitar: use<script defer>ouDOMContentLoaded. - ID ou seletor incorreto: o elemento não é encontrado.
Como evitar: confira oidno HTML e evite duplicatas. - Confundir
returncom exibir:returnapenas devolve o valor.
Como evitar: escolha onde mostrar: console.log, textContent ou alert. - Misturar navegador e Node: usar
documentno Node gera erro.
Como evitar: use APIs corretas para cada ambiente. - Caminho errado no
src: o ficheiro JS não carrega.
Como evitar: revise pastas e use caminhos relativos corretos. - Uso inseguro de
innerHTML: risco de XSS.
Como evitar: prefiratextContentpara texto puro. - Cache do navegador: mudanças não aparecem.
Como evitar: faça hard reload ou desative o cache nas DevTools.
Conclusão
“Hello, World!” em JavaScript é o menor experimento que fixa o essencial: onde o código roda, onde o resultado aparece e como conectar HTML e JS corretamente. Ao dominar esse passo inicial, você cria uma base sólida para avançar para variáveis, eventos, condições e chamadas de API, mantendo sempre a mesma lógica: o que mostrar, onde mostrar e por quê.
Desenvolvimento Front-end do Zero ao Pro
Economize R$320 na compra do seu curso. Use o código e comece a aprender!
Conheça o mundo e as oportunidades de TI e suas tecnologias atuais. Aprenda o pensamento computacional e as principais linguagens de programação. Tenha sua primeira experiência com códigos e dados e descubra um novo caminho profissional.
Receba artigos do blog, acompanhe as últimas notícias da EBAC e fique por dentro das novidades!
