Seu primeiro 'Olá, Mundo!' em JavaScript

Chegou a hora de colocar a mão na massa e ver o JavaScript em ação! O "Olá, Mundo!" é a tradição em programação: é o primeiro programa que todo mundo escreve para ver se a linguagem está funcionando e para ter aquela sensação gostosa de "consegui!".

Vamos aprender três formas de fazer o JavaScript dizer "Olá, Mundo!" e como ver o resultado.

1. Onde escrever o JavaScript?

Para que o navegador entenda que você quer executar JavaScript, precisamos incluí-lo em um arquivo HTML. Lembra que o HTML é o esqueleto? O JavaScript é o cérebro que se conecta a esse esqueleto.

Vamos criar um arquivo HTML simples. No seu editor de código (VS Code, por exemplo), crie um novo arquivo e salve-o como index.html.

<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Meu Primeiro Olá, Mundo!</title>
</head>
<body>
    <h1>Bem-vindo ao JavaScript!</h1>

    <!-- Aqui vamos incluir nosso código JavaScript -->
    <script>
        // Nosso código JavaScript virá aqui
    </script>
</body>
</html>

A tag <script> é a porta de entrada para o JavaScript no seu HTML. Tudo o que estiver dentro dela será interpretado como código JavaScript pelo navegador.

2. Olá, Mundo! no Console (o mais comum para desenvolvedores)

A forma mais comum e útil para nós, desenvolvedores, de ver mensagens do JavaScript é usando o Console do navegador. Lembra dele da lição anterior?

Dentro da tag <script> no seu index.html, adicione a seguinte linha:

<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Meu Primeiro Olá, Mundo!</title>
</head>
<body>
    <h1>Bem-vindo ao JavaScript!</h1>

    <script>
        // Nosso código JavaScript virá aqui
        console.log("Olá, Mundo! (no Console)");
    </script>
</body>
</html>

Como ver o resultado:

1. Salve o arquivo index.html.
2. Se você instalou a extensão Live Server no VS Code, clique com o botão direito no index.html e selecione "Open with Live Server". Se não, abra o arquivo index.html diretamente no seu navegador.
3. Com a página aberta no navegador, clique com o botão direito em qualquer lugar e selecione "Inspecionar" ou "Inspecionar Elemento".
4. Vá para a aba Console. Você deverá ver a mensagem: Olá, Mundo! (no Console).

O console.log() é como um bilhetinho que o JavaScript escreve para você, o desenvolvedor, dentro do console. É super útil para verificar valores, ver se uma parte do código foi executada, e encontrar erros.

3. Olá, Mundo! com um Alerta (o jeito mais "antigo" e chamativo)

Outra forma de exibir uma mensagem é usando a função alert(). Ela faz aparecer uma pequena caixa de diálogo na tela do usuário.

Vamos adicionar essa linha também no seu <script>:

<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Meu Primeiro Olá, Mundo!</title>
</head>
<body>
    <h1>Bem-vindo ao JavaScript!</h1>

    <script>
        console.log("Olá, Mundo! (no Console)");
        alert("Olá, Mundo! (com Alerta)"); // Adicione esta linha
    </script>
</body>
</html>

Como ver o resultado:

1. Salve o arquivo index.html.
2. Recarregue a página no navegador (se estiver usando Live Server, ele já deve ter recarregado).
3. Uma pequena caixa de diálogo com a mensagem "Olá, Mundo! (com Alerta)" aparecerá na sua tela. Você precisará clicar em "OK" para continuar.

Observação: Embora alert() seja fácil de usar, ele é pouco utilizado em sites modernos. Isso porque ele interrompe a interação do usuário com a página e pode ser irritante. Usamos mais para testes rápidos ou em situações muito específicas.

4. Olá, Mundo! Escrevendo na Página (diretamente no HTML)

O JavaScript também pode escrever conteúdo diretamente no corpo do seu HTML. Para isso, usamos document.write().

Adicione esta linha no seu <script>:

<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Meu Primeiro Olá, Mundo!</title>
</head>
<body>
    <h1>Bem-vindo ao JavaScript!</h1>

    <script>
        console.log("Olá, Mundo! (no Console)");
        alert("Olá, Mundo! (com Alerta)");
        document.write("<h2>Olá, Mundo! (na Página)</h2>"); // Adicione esta linha
    </script>
</body>
</html>

Como ver o resultado:

1. Salve o arquivo index.html.
2. Recarregue a página (clique em "OK" no alerta).
3. Você verá a mensagem "Olá, Mundo! (na Página)" aparecer diretamente no corpo da sua página, abaixo do título <h1>.

Observação: Assim como alert(), o document.write() também é pouco usado em desenvolvimento web moderno, especialmente depois que a página já foi carregada. Ele pode sobrescrever o conteúdo existente da página de forma inesperada. Para manipular o conteúdo da página de forma controlada, usamos outras técnicas que você aprenderá mais adiante (manipulação do DOM).

Qual usar?

Para os seus estudos e para depurar seu código, o console.log() será seu melhor amigo. Ele é discreto, não interrompe o usuário e é feito para você, o desenvolvedor.

Parabéns! Você acabou de escrever e executar seu primeiro código JavaScript. A partir daqui, as possibilidades são infinitas!