O que é JavaScript e o teu primeiro script

Conhece a terceira linguagem da web e escreve o teu primeiro script que fala com a consola do browser.

As três linguagens da web

Do Nível 1 já conheces duas linguagens:

HTML – o esqueleto da página (o que está nela),
CSS – o aspeto (como aparece).

A terceira e última linguagem é JavaScript – o comportamento (o que acontece quando…). Quando clicas ▶ no YouTube e o vídeo começa, quando uma loja online calcula um preço, quando um jogo conta pontos – tudo isso é JavaScript.

Onde vive o JavaScript

O JavaScript vive no seu próprio ficheiro, como o CSS. Dizes à página onde está com uma etiqueta <script> – coloca-a no fim do <body>, mesmo antes de </body>:

  ...page content...

  <script src="script.js"></script>
</body>

💡

Porquê no fim? O browser lê a página de cima para baixo. Quando o script está no fim, a página inteira já existe e o script pode trabalhar com ela de imediato.

Vou mostrar-te: o teu primeiro script

Na pasta my-web, cria um ficheiro chamado script.js e escreve nele:
```
console.log("Hi, this is your website!");
```
Em index.html, adiciona a linha <script src="script.js"></script> mesmo antes de </body> e guarda os dois ficheiros.
Abre a página no browser e prime F12 (no Mac, Cmd+Alt+I). Abre-se um painel de programador – clica no separador Console.

Vês «Hi, this is your website!»? O teu primeiro JavaScript está a correr! 🎉

A consola é uma sala secreta no browser onde os programadores conversam com a página. Os visitantes nunca a veem – é só para ti. console.log(...) significa «imprime isto na consola.» Vais usá-la sempre: é a melhor forma de descobrir o que se passa dentro do teu script.

A consola também faz contas

Tenta escrever isto diretamente na consola (prime Enter depois de cada linha):

5 + 3
"Jake" + " is " + "awesome"
10 * 365

O JavaScript é também uma calculadora – soma números e cola textos (chamados strings, reconheces-os pelas aspas) uns aos outros.

Agora és tu 💪

Adiciona script.js a cada página do teu site (como uma vez adicionaste style.css).
Faz o script imprimir o nome do teu site na consola e calcular quantas horas faltam para as férias de verão – por exemplo, console.log("Hours left until vacation:", 48 * 24);.
Faz de propósito um erro – apaga uma aspas e guarda. Olha para o aspeto do erro na consola (texto vermelho com número de linha). Depois corrige. Este é um hábito importante: a consola diz-te sempre onde está o problema.

✅

Verifica tu: Quando abres qualquer página do teu site, a tua mensagem aparece na consola. Sabes abrir a consola e como é um erro. Esta é toda a base – a partir da próxima lição, começamos a fazer magia na página.

O que ficas a saber desta lição

JavaScript = a terceira linguagem da web: comportamento. Escreve-se num ficheiro script.js e liga-se com uma etiqueta <script src="..."> antes de </body>.
A consola (F12) é a tua janela para o script: console.log() imprime coisas, os erros aparecem a vermelho com número de linha.
Texto entre aspas é uma string, e strings podem ser coladas com +. Números podem ser calculados.