O que é JavaScript

Trabalhe numa cópia da pasta inicio/ desta etapa. Ela já abre ou executa com as instruções do README. Leia o código, mude uma coisa e anote sua previsão antes de recarregar. Compare com a referência na pasta da etapa. Se nada mudar, confira a extensão do arquivo, o arquivo salvo e o caminho aberto. Blocos adicionais do capítulo são experiências separadas; a pasta de referência contém o programa completo desta etapa.

A Biblioteca da Ribeira é um acervo comunitário fictício no bairro da Ribeira, Recife. Até agora o site descreve a casa. Com JavaScript a página reage: um clique, um chute, um aviso na tela.

O exemplo está em pacote de exemplos/12-o-que-e-javascript/. Abra index.html. Jogue. Depois abra jogo.js.

Ciclo: ler → copiar → mudar uma coisa → prever → recarregar → conferir.

O que você vai aprender

• Dizer o que JavaScript faz nesta página, sem misturar com HTML e CSS.
• Ligar um arquivo .js no final do body.
• Seguir o jogo “adivinhe o número da ficha”, que já existe em jogo.js.
• Abrir o console do navegador e ler mensagem de erro.
• Distinguir arquivo no disco, teste em 127.0.0.1 e publicação pública.

O que o JavaScript faz

HTML marca o conteúdo. CSS pinta. JavaScript decide e altera o que já está na página.

Você chuta um número. O script compara com o sorteio. O parágrafo #aviso ganha um texto novo. Nada disso precisa de outro computador.

Três peças: um evento (clique no botão), um código (a função) e a tela (o aviso). Sem o script, o botão existe e não responde.

Mude uma coisa. No index.html, apague só a linha <script src="jogo.js"></script>. Preveja o botão mudo. Recarregue. Confira. Depois devolva a linha.

Ligar o arquivo ao HTML

O jogo mora em jogo.js, na mesma pasta do HTML. No final do body:

<label for="chute">Seu chute</label>
<input id="chute" type="number" min="1" max="100">
<button type="button" id="enviar">Chutar</button>
<p id="aviso" role="status"></p>
<script src="jogo.js"></script>

src é o caminho do arquivo. id="enviar" precisa ser o mesmo nome que o script procura. type="button" evita envio de formulário.

O script fica depois dos elementos. Assim getElementById encontra o botão. Se o arquivo vier antes, o botão ainda não existe.

Erro comum: salvar jogo.js.txt. O Windows esconde a extensão. O HTML pede jogo.js e não acha. No editor, o nome precisa terminar em .js.

O jogo da ficha

O arquivo completo jogo.js já está na pasta. Não reescreva do zero. Leia. Depois altere um número.

const secreto = Math.floor(Math.random() * 100) + 1;
let tentativas = 10;
const aviso = document.getElementById("aviso");
document.getElementById("enviar").addEventListener("click", function () {
  const chute = Number(document.getElementById("chute").value);
  tentativas -= 1;
  if (chute === secreto) {
    aviso.textContent = "Acertou. A ficha era " + secreto + ".";
  } else if (tentativas <= 0) {
    aviso.textContent = "Acabaram as tentativas. Era " + secreto + ".";
  } else if (chute < secreto) {
    aviso.textContent = "Mais alto. Restam " + tentativas + ".";
  } else {
    aviso.textContent = "Mais baixo. Restam " + tentativas + ".";
  }
});

const guarda um valor que não será trocado. let guarda as tentativas, que diminuem. Math.random() gera um número entre 0 e 1. Math.floor corta a fração. Somar 1 dá o intervalo 1 a 100.

Number(...) transforma o texto do campo em número. Sem isso, "7" e 7 não são iguais.

Mude uma coisa. Troque 10 por 5. Preveja menos chances. Recarregue. Jogue. Confira.

O console

No navegador: F12 ou botão direito → Inspecionar → aba Console.

Erros de JavaScript aparecem em vermelho. Clique na linha. O arquivo e o número da linha abrem.

Para ver o sorteio enquanto estuda, acrescente uma linha no jogo.js:

console.log("ficha secreta", secreto);

Recarregue. O número sai no console, não na página. Tire a linha quando terminar o teste. Não publique a dica.

role="status" no aviso avisa tecnologias assistivas quando o texto muda. O console não substitui isso.

Quando nada acontece

Checklist curto, nesta ordem:

1. O arquivo chama-se jogo.js, não jogo.js.txt.
2. O src aponta para a mesma pasta.
3. Os id do HTML e do script são iguais (enviar, chute, aviso).
4. O <script> está depois dos elementos.
5. O console não mostra erro vermelho.

Se o console diz Cannot read properties of null, o getElementById devolveu vazio. O id não bate.

Se diz enviar is not defined, você misturou nome de variável com id. Use getElementById("enviar").

Disco, 127.0.0.1 e publicação

Disco: o arquivo jogo.js no Explorer. Dê dois cliques em index.html. O jogo roda no navegador desta máquina. O endereço começa com file://.

127.0.0.1: um servidor local na sua máquina. Exemplo, na pasta curso:

python -m http.server 8080 --bind 127.0.0.1

Abra http://127.0.0.1:8080/exemplos/12-o-que-e-javascript/. Só você vê. Não é a internet.

Publicação: copiar o site para um endereço público. Este exercício não pede publicação. Não coloque dados reais. A Biblioteca da Ribeira é fictícia.

O exemplo completo rejeita vazio, decimal e números fora de 1 a 100 sem gastar tentativa. Ao acertar ou gastar dez tentativas, os controles são desativados. Recarregue para começar outro jogo.

Atividades

1. Sem o arquivo jogo.js, o botão Chutar ainda aparece? O aviso muda?
2. Por que o <script src="jogo.js"> fica no final do body neste exemplo?
3. Você troca tentativas de 10 para 3, recarrega e joga. O que deve acontecer na terceira falha?

Respostas comentadas

1. O botão é HTML. Sem o script ele aparece e não responde. O aviso permanece vazio.
2. Para o botão, o campo e o parágrafo existirem quando o script pede os id. Se o script vier antes, getElementById pode devolver vazio.
3. Na terceira falha as tentativas chegam a zero. O aviso mostra que acabaram e revela o número. Confira no exemplo depois de mudar o 10.

O arquivo completo

Referência do exemplo 12-o-que-e-javascript, reproduzida aqui para que você possa conferir sem sair da página.

jogo.js

const secreto = Math.floor(Math.random() * 100) + 1;
let tentativas = 10;
let terminou = false;
const aviso = document.getElementById("aviso");
document.getElementById("enviar").addEventListener("click", function () {
  const chute = Number(document.getElementById("chute").value);
  if (terminou) return;
  const campo = document.getElementById("chute");
  if (!campo.value.trim() || !Number.isInteger(chute) || chute < 1 || chute > 100) { aviso.textContent = "Digite um inteiro de 1 a 100. Nenhuma tentativa foi gasta."; return; }
  tentativas -= 1;
  if (chute === secreto) {
    aviso.textContent = "Acertou. A ficha era " + secreto + ".";
    terminou = true;
  } else if (tentativas <= 0) {
    aviso.textContent = "Acabaram as tentativas. Era " + secreto + ".";
    terminou = true;
  } else if (chute < secreto) {
    aviso.textContent = "Mais alto. Restam " + tentativas + ".";
  } else {
    aviso.textContent = "Mais baixo. Restam " + tentativas + ".";
  }
  if (terminou) { campo.disabled = true; document.getElementById("enviar").disabled = true; }
});