Instalação e Primeiro Programa Hello World — JavaScript
O que é e para que serve?
Imagine que você está dando comandos a um robô. Você diz: "Robô, acenda a luz", e ele acende. Mas para que o robô entenda, você precisa falar em uma linguagem especial. Da mesma forma acontece com o computador: para que ele faça alguma coisa, você precisa dar um comando em uma linguagem de programação.
JavaScript (abreviado como JS) é uma dessas linguagens. Ele é muito popular porque permite "dar vida" às páginas da web. Quando você entra em um site e vê uma imagem que aumenta ao passar o mouse, ou um menu que desliza, ou janelas pop-up que aparecem — provavelmente, isso foi feito com JavaScript.
Vamos fazer uma analogia. Imagine que você é um professor de educação física. Você diz aos alunos: "Turma, levantem-se!", "Levantem a mão direita!", "Dêem um passo à frente!". Se você disser "Levantem-se" em chinês, ninguém vai entender. É preciso uma linguagem compreensível. JavaScript é exatamente essa linguagem compreensível para o navegador (o programa através do qual você vê os sites, como Chrome, Firefox, Safari).
Por que aprender JavaScript?
- Ele está em toda parte: quase todo site usa JavaScript.
- Ele é visual: você vê o resultado das suas ações imediatamente.
- Ele é simples para começar: para escrever seu primeiro programa, você não precisa instalar programas complicados — um bloco de notas comum e um navegador são suficientes.
- Ele é requisitado: programadores que sabem JavaScript são muito necessários para as empresas.
Neste artigo, vamos aprender a instalar as "ferramentas" para trabalhar com JavaScript e escrever nosso primeiro programa — "Hello, World!". É uma tradição de todos os programadores: o primeiro programa sempre exibe esta saudação. Considere isso como o "primeiro passo" no mundo da programação.
Se você já conhece Python: Em Python, você escrevia print("Hello, World!"). Em JavaScript, será um pouco diferente, mas o sentido é o mesmo — mostrar um texto na tela.
Exemplos de código com explicação
Antes de escrever código, vamos preparar o "local de trabalho". Você vai precisar de duas coisas:
- Um navegador (Chrome, Firefox, Edge, Safari — qualquer um serve).
- Um editor de texto — o programa onde você escreverá o código. A opção mais simples é o "Bloco de Notas" (Windows) ou "TextEdit" (Mac) no modo de texto simples. Mas é melhor baixar um editor especial, como o VS Code (Visual Studio Code) — ele é gratuito e muito prático.
Como verificar se tudo está funcionando? Existem duas maneiras de executar JavaScript:
- Diretamente no navegador (console): Pressione F12 (ou Ctrl+Shift+I) no teclado, abra a aba "Console" e escreva o código lá. É rápido, mas não é prático para programas grandes.
- Através de um arquivo HTML: Vamos criar um arquivo com a extensão
.html, dentro do qual estará nosso código JavaScript. Esta é a maneira correta.
Vamos começar com a segunda maneira. Crie uma nova pasta no computador, nomeie-a, por exemplo, "aulas_JS". Dentro dela, crie um arquivo com o nome index.html (é importante que a extensão seja .html, e não .txt). Abra este arquivo no editor de texto.
Insira nele o seguinte modelo básico:
Meu primeiro programa
Agora salve o arquivo e abra-o no navegador (apenas dê um duplo clique nele). Você verá uma página vazia. Ainda não aconteceu nada, porque não escrevemos o código. Vamos corrigir isso!
Exemplo 1: O clássico "Hello, World!"
A maneira mais simples de mostrar um texto é usar o comando alert(). Ele exibe uma janela pop-up com uma mensagem. Insira o seguinte código entre as tags <script> e </script>:
// Isto é um comentário. O computador o ignora.
// Ele serve para explicar o código para as pessoas.
// alert() é uma função embutida (como um comando).
// Ela mostra uma janela com uma mensagem.
alert('Hello, World!'); // O texto que queremos mostrar, escrevemos entre aspas.
O que vai acontecer? Quando você abrir (ou atualizar) a página, aparecerá uma janela com o texto "Hello, World!". Para fechá-la, você precisa clicar em "OK".
Análise:
alert— é o nome do comando. Ele diz ao navegador: "Mostre uma janela".- Parênteses
()— dentro deles, passamos o que queremos dizer. Neste caso, o texto. - Aspas simples
' '— são necessárias para que o computador entenda que é exatamente um texto, e não um comando. Também podemos usar aspas duplas" ". - Ponto e vírgula
;— é como um ponto final em uma frase. Ele diz: "O comando terminou". Deve ser colocado após cada comando.
Comparação com Python: Em Python, você escreveria print("Hello, World!"). A diferença é que print exibe o texto no console, enquanto alert exibe em uma janela pop-up.
Exemplo 2: Exibição no console do desenvolvedor
Janelas pop-up não são muito práticas se você precisa exibir muitas informações. Os programadores usam com mais frequência o console — um local especial para depuração. Para exibir texto lá, usa-se o comando console.log().
Substitua o código anterior dentro de <script> por este:
// console é um objeto (uma estrutura complexa) que gerencia o console.
// .log() é um método (uma ação) que registra uma mensagem no console.
console.log('Esta é uma mensagem no console!');
console.log('Podemos exibir um número:', 42);
console.log('Podemos exibir não