Pular para o conteúdo
murad.guide

Introdução Completa à Web

Capítulo 14

JavaScript: tipos

6 min de leitura 1.088 palavras 2 gravuras

HTML estrutura. CSS pinta. JavaScript decide e calcula. Neste capítulo a Casa da Restinga começa a programar: guardar um valor, escrever no console, distinguir número, texto e sim/não.

O exemplo está em exemplos/14-js-tipos/. Natal, conteúdo fictício. Este volume tem 23 capítulos. Abra index.html no navegador, depois o console com F12. Os resultados aparecem lá, não no meio da página.

Trabalhe na cópia inicio da etapa. Leia e digite o código; mude uma coisa. Antes de recarregar, anote sua previsão. Depois confira com a referência completa. Se nada mudar, confira o arquivo salvo e o caminho aberto. Blocos adicionais do capítulo podem ser digitados no console; o exemplo completo mostra a aplicação daquela etapa.

O que você vai aprender

Código é comunicação

Código existe primeiro para quem vai reler amanhã. O computador só executa depois. Seja explícito. Um nome claro poupa dez linhas de comentário.

O JavaScript do navegador corre uma linha após a outra neste começo do volume. Linha 1, depois 2, depois 3.

Você não precisa ter programado antes. Se já programou outra linguagem, folheie os tipos e preste atenção na sintaxe: const, ;, console.log.

Mude uma coisa. Abra o exemplo e leia experimentos.js em voz alta, como se fosse um recado. Preveja entender o aluguel anual sem olhar o 6000. Confira no console.

Erro comum: encurtar o nome para x “porque é mais rápido”. Daqui a uma semana x não conta história nenhuma.

const nomeia um valor

const avisa: este nome guarda um valor que não vamos trocar depois.

const aluguelMensal = 500;
const aluguelAnual = aluguelMensal * 12;
console.log(aluguelAnual);

Nomes não têm espaço. Juntamos as palavras com a segunda letra maiúscula: camelCase. aluguelMensal lê “aluguel mensal”.

O ; fecha o pensamento, como um ponto. Neste volume, use ponto e vírgula no fim da instrução.

* multiplica. Você mistura nome e número. 500 sozinho, mil linhas abaixo, não explica o que é. O nome explica.

Poderia existir const mesesNoAno = 12 e então aluguelMensal * mesesNoAno. Os doze meses do ano são óbvios; o aluguel, não. Nomeie o que um colega não adivinha.

Não use palavra reservada como nome: const const = 15 quebra.

Mude uma coisa. Troque 500 por 650. Preveja 7800 no console. Recarregue a página HTML e confira.

Erro comum: abrir o arquivo .js direto no navegador. Sem a página, o script não entra. Abra o HTML.

O script entra no HTML

<!DOCTYPE html>
<html lang="pt-BR">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Tipos — Casa da Restinga</title>
  </head>
  <body>
    <h1>Experimentos de JavaScript</h1>
    <p>Abra o console com F12. Os textos desta etapa aparecem lá.</p>
    <script src="experimentos.js"></script>
  </body>
</html>

script src puxa o arquivo na mesma pasta. O nome no src tem de bater com o arquivo no disco.

Coloque o script no fim do body. Assim o HTML já existe se, mais adiante, o JS procurar um botão.

Arquivo no disco: index.html + experimentos.js. Página no navegador: o título. Console: o número. Teste em 127.0.0.1. Publicação não é pedida.

Mude uma coisa. No src, escreva experimento.js (sem s). Preveja o console vazio e um 404 na aba Rede. Recarregue. Restaure.

Erro comum: index.html.txt de novo. O Bloco de Notas às vezes esconde a extensão. O navegador não trata isso como HTML.

const, string e boolean no console ao lado da página da Restinga

console.log mostra o valor

console.log(...) escreve no console do navegador o que está entre os parênteses. Pode ser um nome ou um valor direto.

No Edge e no Chrome, F12 abre as ferramentas. Clique na aba Console. No Firefox, o atalho costuma ser o mesmo. Clique com o botão direito na página → Inspecionar também chega lá.

Se a aba estiver só em “Erros”, ligue “Informações” ou “Tudo”. Um console.log de número não é um erro: some do filtro estreito.

Uma linha que começa com // é comentário. O computador ignora. Serve para você, não para o café.

// aluguel da sala fictícia da Restinga, em reais
const aluguelMensal = 500;

console.log não desenha no body. A página pode parecer parada e o programa ter funcionado.

Mude uma coisa. Acrescente console.log("Casa da Restinga"); no fim. Preveja a frase abaixo do número. Recarregue e confira.

Erro comum: procurar o 6000 no meio da página. Ele não está no HTML.

Número

JavaScript tem um tipo Number. Inteiro e decimal usam o mesmo tipo: 12, 3.5, 0.

const xicaras = 12;
const preco = 8.5;
const total = xicaras * preco;
console.log(total);

+ - * / funcionam como na calculadora. Parênteses mudam a ordem: (2 + 3) * 4 é 20, não 14.

const extra = 3;
console.log((xicaras + extra) * preco);

Mude uma coisa. Divida total por xicaras e faça console.log do resultado. Preveja o preço de uma xícara. Recarregue e confira.

Erro comum: "8" entre aspas. Isso é texto. "8" * 2 pode dar 16 por conversão silenciosa; "8" + 2 vira "82". Prefira número sem aspas para conta.

String: texto entre aspas

String é uma sequência de caracteres. Nome do café, cidade, mensagem.

const nome = "Iara";
const sobrenome = "Costa";
const frase = "Olá, " + nome + " " + sobrenome + "!";
const fraseNova = `Olá, ${nome} ${sobrenome}!`;
console.log(frase);
console.log(fraseNova);

Aspas duplas ", simples ' ou crase ` delimitam. A crase permite template: ${nome} entra no meio do texto.

O computador não inventa espaço. Sem " " entre nome e sobrenome, vira IaraCosta.

Conteúdo fictício. Não coloque seu sobrenome real neste arquivo de estudo.

Mude uma coisa. Troque Iara por Tomás. Preveja as duas frases com Tomás. Recarregue e confira.

Erro comum: template com aspas duplas: "Olá, ${nome}". Sem crase, a interpolação não acontece: o texto sai literal.

Boolean: sim ou não

Boolean tem dois valores: true e false. A porta da Restinga está aberta ou não.

const portaAberta = true;
console.log(portaAberta);

Útil nas decisões da próximo capítulo. Não use a string "true" quando quiser o boolean: são tipos diferentes.

Mude uma coisa. Troque para false. Preveja false no console. Recarregue e confira.

Erro comum: const portaAberta = True. Em JavaScript é minúsculo: true e false.

Início da referência desta etapa no navegador local

Atividades

  1. Por que abrir o HTML e não o .js no navegador?
  2. O que const impede depois da primeira atribuição?
  3. Qual a diferença entre "8" + 2 e 8 + 2?
  4. O template Olá, ${nome} precisa de qual delimitador?

Respostas comentadas

  1. O script src é lido pela página. O arquivo JS sozinho não monta o documento nem o console da Restinga.
  2. Impede reatribuir aquele nome. O valor inicial permanece. (Objetos internos virão depois.)
  3. "8" + 2 concatena e vira "82". 8 + 2 soma e vira 10.
  4. Crase (`). Aspas simples ou duplas não interpolam ${}.

Referências

O arquivo completo

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

experiments.js

const aluguelMensal = 500;
const aluguelAnual = aluguelMensal * 12;
console.log(aluguelAnual);
const nome = "Tomás";
const frase = `Café coado para ${nome}.`;
console.log(frase);
const aberto = true;
console.log(aberto);

assets/stylesheets/main.css

*,
*::before,
*::after { box-sizing: border-box; }
html, body, h1, h2, h3, p, ul { margin: 0; padding: 0; }
img { max-width: 100%; height: auto; }
body {
  font-family: "Segoe UI", Tahoma, sans-serif;
  line-height: 1.5;
  color: #1a2a2c;
  background: #f7f3ea;
}
a { color: #0d5c63; }
a:focus-visible, button:focus-visible, input:focus-visible {
  outline: 3px solid #c45c26;
  outline-offset: 3px;
}
.skip { position: absolute; left: -999px; }
.skip:focus { left: 0.5rem; top: 0.5rem; background: #fff; padding: 0.4rem 0.7rem; z-index: 2; }
.wrap { width: min(44rem, calc(100% - 2rem)); margin-inline: auto; }
header { background: #0d5c63; color: #fff; padding: 1rem 0; }
header a { color: #fff; }
.brand { font-weight: 700; text-decoration: none; }
nav ul { list-style: none; display: flex; gap: 1rem; margin-top: 0.5rem; }
nav a[aria-current="page"] { text-decoration: underline; text-underline-offset: 0.2em; }
main { padding: 1.5rem 0 3rem; }
footer { border-top: 1px solid #ddd4c4; padding: 1rem 0; font-size: 0.95rem; }
article { margin: 1.25rem 0; padding-bottom: 1rem; border-bottom: 1px solid #ddd4c4; }