Pular para o conteúdo
murad.guide

As Três Camadas

Capítulo 13

JavaScript: variáveis e tipos

4 min de leitura 786 palavras 1 gravura

A oficina agora precisa de contas e de textos que o navegador execute. JavaScript é a linguagem que roda na página. Neste capítulo você declara valores, escreve no console e liga o arquivo no fim do body. O exemplo está em exemplos/13-variaveis/.

Código é instrução para o computador e recado para a pessoa que vai ler depois. Nomes claros poupam uma hora amanhã.

Trabalhe na cópia inicio desta etapa. Leia e digite o código indicado; mude apenas uma coisa. Antes de recarregar, escreva o resultado que espera. Depois compare com a referência completa ao lado. Se algo falhar, confira primeiro o arquivo salvo e o caminho aberto.

O que você vai aprender

Um arquivo JS no fim da página

HTML descreve a oficina. CSS pinta. JavaScript calcula e, mais tarde, reage ao clique.

Crie oficina.js na mesma pasta do HTML. No fim do body, antes de </body>, ligue o arquivo.

<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Contas da oficina — Oficina do Farol</title>
</head>
<body>
  <h1>Contas da oficina</h1>
  <p>Abra o console com F12 para ver os números.</p>
  <script src="oficina.js"></script>
</body>
</html>

script no final deixa o HTML nascer primeiro. Nas próximas capítulos isso evita procurar um botão que ainda não existe.

Abra o HTML, não o JS, no navegador. Depois abra o console: F12 ou botão direito → Inspecionar → Console.

Diagrama de variáveis, valores e tipos

O diagrama resume os valores. Os resultados do programa aparecem no console. Se a aba for Elements, mude para Console.

Pare e experimente. Tire o script do HTML, recarregue e olhe o console. Preveja silêncio. Recoloque a tag e confira.

Erro comum: abrir o .js direto no navegador. Sem a página, o script src não corre no contexto da oficina.

const, let, camelCase e ponto e vírgula

Variável é um nome que guarda um valor. const cria um nome que você não troca depois. let cria um nome que pode ganhar outro valor.

const vagasNaOficina = 12;
let inscritosNaXilo = 3;

inscritosNaXilo = 4;

Não use var. É o jeito antigo. Neste volume só const e let. Prefira const até precisar mudar o valor.

O nome não tem espaço. Juntamos as palavras e capitalizamos as do meio: vagasNaOficina. Isso se chama camelCase, porque as letras altas parecem humps.

; fecha o pensamento. Trate como o ponto final da frase. Coloque no fim de cada declaração neste volume.

Não chame uma variável de const. Palavras reservadas não viram nome.

Pare e experimente. Troque const vagasNaOficina = 12 por let e some 1 na linha seguinte. Preveja 13 no log. Recarregue e confira.

Erro comum: escrever const vagas na oficina. Espaço quebra o nome.

Número, texto, modelo e verdadeiro ou falso

Número em JavaScript é um só tipo. 12 e 12.5 são números. Nesta oficina as contas da calculadora serão inteiras; o tipo continua o mesmo.

String é texto. Vai entre aspas simples ou duplas.

const nomeDaVisitante = "Lia Mendes";
const oficinaDoDia = "xilogravura";

Template string usa crase. Dentro dela, ${nome} encaixa um valor.

const recado = `Olá, ${nomeDaVisitante}! A ${oficinaDoDia} tem ${vagasNaOficina} vagas.`;

O jeito antigo cola com +. A crase evita esquecer o espaço.

Boolean é true ou false. Serve para um estado simples: a visita confirmou ou não.

const visitaConfirmada = false;

Pare e experimente. Mude só o nome para Caio Nunes. Preveja o recado novo. Recarregue o HTML e leia o console.

Erro comum: usar aspas no template. "Olá, ${nome}" imprime o cifrão. Só a crase substitui.

console.log escreve no console

console.log mostra o que está entre parênteses. É o caderno de rascunho do programa.

const vagasNaOficina = 12;
const nomeDaVisitante = "Lia Mendes";
const oficinaDoDia = "xilogravura";
const visitaConfirmada = false;

const recado = `Olá, ${nomeDaVisitante}! A ${oficinaDoDia} tem ${vagasNaOficina} vagas.`;

console.log(vagasNaOficina);
console.log(recado);
console.log(visitaConfirmada);

Este bloco é o oficina.js completo do exemplo. Salve, recarregue o HTML e abra o console com F12.

Você deve ver 12, a frase da Lia e false. Se não vir nada, confira o nome do arquivo no src.

Pare e experimente. Acrescente console.log(2 + 2);. Preveja 4. Recarregue e confira.

Erro comum: procurar o texto na página. console.log não desenha no h1. Ele fala com o console.

Atividades

  1. Quando usar let em vez de const?
  2. O que camelCase resolve no nome vagasNaOficina?
  3. Qual a diferença entre aspas em “Lia” e a crase do template com ${nome}?
  4. Por que o script fica no fim do body neste volume?

Respostas comentadas

  1. Quando o valor precisa mudar depois, como o número de inscritos que sobe.
  2. Tira o espaço e mantém o nome legível. A letra alta marca o começo da palavra seguinte.
  3. A primeira é texto fixo. A segunda monta a frase com o valor da variável.
  4. O HTML já está na página. O hábito evita, nas próximas capítulos, procurar um botão que ainda não nasceu.

Referências

O arquivo completo

Referência do exemplo 13-variaveis, 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 content="width=device-width, initial-scale=1" name="viewport"/>
<title>Variáveis</title>
<link href="lab.css" rel="stylesheet"/>
<style>body{overflow-wrap:anywhere}img,input,textarea,select,iframe{max-width:100%}img{height:auto}fieldset,.cartao{min-width:0}pre{max-width:100%;overflow:auto}:focus-visible{outline:3px solid #005fcc;outline-offset:3px}.atalho-conteudo{position:absolute;left:.5rem;top:-6rem;background:white;color:#172f50;padding:.5rem;z-index:999}.atalho-conteudo:focus{top:.5rem}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}</style></head>
<body><a class="atalho-conteudo" href="#conteudo">Pular para o conteúdo</a><main id="conteudo" tabindex="-1">
<h1>Experimento de JavaScript</h1>
<p>Abra o console do navegador (F12). Você deve ver o valor 960.</p>
<p>A página só carrega o script. O resultado aparece no console, não no meio do texto — ainda.</p>

</main><script src="oficina.js"></script></body>
</html>

oficina.js

const vagasNaOficina = 12;
const nomeDaVisitante = "Lia Mendes";
const oficinaDoDia = "xilogravura";
const visitaConfirmada = false;

const recado = `Olá, ${nomeDaVisitante}! A ${oficinaDoDia} tem ${vagasNaOficina} vagas.`;

console.log(vagasNaOficina);
console.log(recado);
console.log(visitaConfirmada);