O que é JavaScript e onde ele roda

A terceira camada

Linguagem	Trabalho	Exemplo
HTML	o que cada coisa é	isto é um formulário
CSS	como cada coisa aparece	o botão é verde e arredondado
JavaScript	o que acontece	ao enviar, calcular o frete

Sem JavaScript, uma página é um documento: você lê, clica em links, preenche e envia. Com ele, ela responde: calcula, valida antes de enviar, busca dados, muda o que está na tela sem recarregar.

Onde o código roda

No navegador de quem abriu a página. Você escreve o arquivo, ele viaja com o resto do site, e a execução acontece no aparelho da pessoa.

Duas consequências que importam desde já:

1. Qualquer pessoa pode ler o seu código. Ele chega inteiro ao navegador. Nada de senha ou chave dentro de JavaScript de página.
2. Qualquer pessoa pode desligá-lo ou mudá-lo. Por isso a validação de formulário no navegador é conforto, e a que protege o sistema é a do servidor.

O nome

JavaScript não tem relação com Java. São linguagens diferentes, de empresas diferentes. O nome foi decisão comercial dos anos 90, para pegar carona na fama do Java na época. A confusão sobrevive até hoje.

Ligar à página

Arquivo separado, no fim do body:

<body>
  <h1>Calculadora de frete</h1>
  <p id="resultado"></p>

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

Ou no <head> com defer:

<head>
  <script src="script.js" defer></script>
</head>

defer diz: baixe agora, mas execute depois que o HTML estiver pronto. É a forma preferida hoje: o download começa cedo e a execução acontece na hora certa.

O primeiro código

<body>
  <h1 id="titulo">Feira do produtor</h1>

  <script>
    console.log("A página carregou");
    document.getElementById("titulo").textContent = "Feira aberta hoje";
  </script>
</body>

Duas linhas: a primeira escreve uma mensagem no console; a segunda troca o texto do título depois de a página já estar na tela.

O console

Abra as ferramentas do navegador com F12 e vá na aba Console. É onde:

• aparecem as mensagens de console.log();
• aparecem os erros do seu código, com a linha;
• você pode digitar JavaScript e ver o resultado na hora.

Experimente digitar 2 + 2 e apertar Enter.

A ordem de construir

Uma prática que economiza tempo: construa nesta ordem, e teste em cada etapa.

1. HTML: a página funciona sem estilo e sem script? Dá para ler, navegar e enviar o formulário?
2. CSS: está legível e organizado?
3. JavaScript: agora acrescente o comportamento.

Assim, se o script falhar: e ele vai falhar, em algum aparelho, alguma hora -, o que sobra ainda serve.

Exercícios

1. Crie uma página com um <h1> e um <script> que troque o texto dele.
2. Abra o console e escreva console.log("olá").
3. Digite contas no console: 2 + 2, 10 / 3, "a" + "b".
4. Ponha um <script> no <head> sem defer tentando alterar um elemento. Leia o erro no console. Depois acrescente defer.
5. Desligue o JavaScript nas configurações do navegador e abra um site que você usa. O que deixou de funcionar?

Referências

• O que é JavaScript - MDN - a introdução oficial, em português
• Console do navegador - MDN - as ferramentas e o que cada aba faz
• JavaScript Tutorial - W3Schools - tutorial com editor ao lado