Console e primeiros valores

O Ateliê do Marco Zero começa no console do navegador. Antes de botões e páginas cheias, você precisa ver um valor aparecer. JavaScript calcula e responde; o console é o caderno onde isso fica visível.

Trabalhe sobre uma cópia da pasta inicio do exemplo correspondente. Leia, digite, mude uma coisa, preveja o resultado, recarregue e confira. A referência completa fica na raiz da pasta do exemplo, no pacote anexo.

O que você pratica

• Qual atalho abre as ferramentas do navegador na maioria dos desktops?
• O que typeof "xilo" devolve?
• Por que abrir só o arquivo .js no navegador atrapalha o estudo desta etapa?

Abrir o console

No Chrome ou no Edge, pressione F12 (ou clique com o botão direito → Inspecionar). Abra a aba Console.

Digite 2 + 3 e Enter. Deve aparecer 5. Digite "Recife" e Enter. O texto volta entre aspas.

Pare e experimente. Digite typeof 12 e depois typeof "12". Preveja number e string. Confira.

Erro comum: ficar na aba Elements e achar que o console “não funciona”. Mude para Console.

Valores simples

Número: 12, 3.5. Texto (string): "serigrafia". Verdadeiro ou falso: true, false.

console.log(2 + 3);
console.log("Olá, " + "ateliê");
console.log(typeof true);

O arquivo app.js do exemplo já imprime uma saudação ao carregar. Abra index.html e olhe o console.

Pare e experimente. Troque a saudação por outra frase. Preveja o texto novo. Recarregue.

Por que isso importa

Mais tarde o ateliê terá botões, listas e pedidos a arquivos JSON. Tudo isso ainda passa por valores e por console.log quando algo falha.

Não publique exercícios com dados reais. Aqui o conteúdo é fictício.

Ler o exemplo completo

A referência desta etapa usa app.js, index.html, styles.css. Abra primeiro o resultado pronto e identifique onde acontece abrir o console. Depois compare o mesmo ponto com a pasta inicio. Essa comparação mostra exatamente o que você precisa escrever, sem esconder partes indispensáveis do programa.

Diagnóstico guiado

Se o resultado não aparecer, confirme o arquivo aberto, salve a alteração e recarregue. Em seguida, abra o Console: leia a primeira mensagem de erro, confira o nome do arquivo e a linha indicada. Quando houver fetch, sirva a pasta apenas em 127.0.0.1; abrir por file:// não reproduz o pedido HTTP.

Critério de avanço

Avance quando conseguir explicar o papel de inicio, realizar uma mudança pequena e restaurar o exemplo sem copiar a resposta comentada.

Atividades

1. Qual atalho abre as ferramentas do navegador na maioria dos desktops?
2. O que typeof "xilo" devolve?
3. Por que abrir só o arquivo .js no navegador atrapalha o estudo desta etapa?

Respostas comentadas

Só abra depois de tentar.

Atividade 1. F12 (ou o menu Inspecionar). Depois escolha a aba Console.

Atividade 2. string. Aspas marcam texto.

Atividade 3. O exemplo liga o script pela página HTML. Sem a página, você perde o contexto do exercício.

Exemplo deste capítulo: pacote de exemplos/01-console/.

O arquivo completo

Referência do exemplo 01-console, reproduzida aqui para que você possa conferir sem sair da página.

index.html

<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Console e primeiros valores — Ateliê do Marco Zero</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <a class="skip" href="#conteudo">Ir para o conteúdo</a>
  <header>
    <p class="tag">Ateliê do Marco Zero · Recife</p>
    <h1>Console e primeiros valores</h1>
  </header>
  <main id="conteudo">
    <p>Abra o console do navegador (F12) e digite os valores desta etapa. A página só orienta.</p>
    <div class="painel">
      <p>Experimente no console:</p>
      <pre class="saida" id="dica">2 + 3
"Olá, " + "Recife"
typeof 12
typeof "xilo"</pre>
    </div>
    <p>Quando o arquivo <code>app.js</code> carregar, ele imprime um recado de boas-vindas.</p>

  </main>
  <footer>
    <p>Material de estudo. Conteúdo fictício. Servidor só em 127.0.0.1.</p>
  </footer>
  <script src="app.js"></script>
</body>
</html>

app.js

console.log("Bem-vinda ao Ateliê do Marco Zero");
console.log(2 + 3);
console.log(typeof "serigrafia");