Pular para o conteúdo
murad.guide

Introdução Completa à Web

Capítulo 17

Builtins e objetos

5 min de leitura 903 palavras 2 gravuras

O JavaScript já traz funções prontas. Ninguém precisa inventar “passar texto para minúsculas” do zero. Este capítulo 17 de 23 mostra essas peças nativas e, em seguida, o objeto: um pacote com nome e valor juntos. O cenário continua a Casa da Restinga, cafeteria fictícia em Natal.

O exemplo está em exemplos/17-builtins-objetos/. Abra index.html. O texto aparece na página e no console (F12).

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

Funções que já vêm no navegador

Builtin (nativo) é o que o JavaScript já traz. Você chama; não precisa escrever a lógica por baixo.

Sempre procure os parênteses (). Eles marcam a chamada. A documentação oficial da web é o MDN. Consultar o MDN não é cola. Ninguém decorá tudo.

const frase = "CaFé CoAdO na ReStInGa";
const minuscula = frase.toLowerCase();
console.log(minuscula);

toLowerCase vive no texto. O resultado é uma string nova. A original não muda se você a guardou em const e só leu.

Pare e experimente. Troque toLowerCase() por toUpperCase(). Preveja a frase em maiúsculas. Recarregue. Confira o console e o parágrafo #saida.

Erro comum: esquecer (). frase.toLowerCase sem parênteses não transforma: devolve a própria função.

Math, texto e objeto: três nativos do navegador

Math arredonda o número

Math é um objeto nativo de números. Math.round arredonda para o inteiro mais próximo.

const preco = 5.3;
const arredondado = Math.round(preco);
console.log(preco);
console.log(arredondado);

A primeira linha continua 5.3. A segunda vira 5. O nativo devolve um valor; não altera a variável original.

Há também Math.floor (chão, para baixo) e Math.ceil (teto, para cima). Nesta etapa o round basta.

Pare e experimente. Mude 5.3 para 5.6. Preveja 6. Recarregue. Confira.

Erro comum: escrever math.round com m minúsculo. O nome é Math, com M maiúsculo.

O texto contém? E que horas são?

includes pergunta se um texto está dentro de outro. Devolve true ou false.

const cardapio = "café coado, tapioca, suco de caju";
console.log(cardapio.includes("tapioca"));
console.log(cardapio.includes("pizza"));

A primeira chamada é verdadeira. A segunda é falsa. Maiúsculas e minúsculas importam: "Tapioca" não é "tapioca".

Date.now() devolve quantos milissegundos se passaram desde 1º de janeiro de 1970 (UTC). Serve para marcar tempo, não para mostrar “horas bonitas” na vitrine.

console.log(Date.now());

Pare e experimente. No includes, busque "caju". Preveja true. Recarregue. Confira.

Erro comum: comparar com == "tapioca" o cardápio inteiro. O cardápio é uma frase longa. includes olha um pedaço.

Um objeto agrupa o que pertence junto

Até aqui uma variável guardava uma coisa. Um item da Casa da Restinga tem nome, cidade e preço. O objeto junta isso.

const item = {
  nome: "Café coado",
  cidade: "Natal",
  preco: 8,
  quente: true
};
console.log(item);
console.log(item.nome);
console.log(item["nome"]);

À esquerda dos : está a chave. À direita, o valor. Prefira o ponto (item.nome) quando a chave é fixa. Colchetes servem quando o nome vem de uma variável.

const campo = "preco";
console.log(item[campo]);

Pare e experimente. No console, rode item.preco = 9 e depois item. Preveja 9. Recarregue: volta a 8, porque o arquivo não mudou.

Erro comum: item[nome] sem aspas e sem variável. O JavaScript procura uma variável nome. Se ela não existir, a página quebra.

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

Uma função recebe o pacote inteiro

Passar cinco variáveis soltas cansa. Passe o objeto. A função lê as chaves que precisa.

const mesa1 = { nome: "Lia", faixa: "manha" };
const mesa2 = { nome: "Duda", faixa: "noite" };

function sugerir(cliente) {
  if (cliente.faixa === "manha") {
    console.log("Café coado e tapioca.");
  } else if (cliente.faixa === "noite") {
    console.log("Suco de caju.");
  } else {
    console.log("Água e bolo de rolo.");
  }
}

sugerir(mesa1);
sugerir(mesa2);

cliente é o parâmetro. Lá dentro, cliente.nome é a chave nome daquele pacote. A mesma função serve para várias mesas.

O HTML do exemplo é completo e local:

<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Cardápio — Casa da Restinga</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <main>
    <h1>Casa da Restinga</h1>
    <p id="saida">Abrindo o cardápio…</p>
  </main>
  <script src="script.js"></script>
</body>
</html>

Pare e experimente. Troque a faixa de mesa1 para "tarde". Preveja a frase da água. Recarregue. Confira o console.

Erro comum: chamar sugerir(mesa1.nome). A função espera o objeto. Um texto solto não tem .faixa.

Método e objeto dentro de objeto

O objeto pode guardar uma função. Essa função é um método.

const copo = {
  nome: "copo da casa",
  soar() {
    console.log("tilint");
  }
};
copo.soar();

Objetos também aninham objetos. Um cliente tem nome composto e endereço em Natal.

const visita = {
  nome: { primeiro: "Nara", ultimo: "Costa" },
  local: { cidade: "Natal", bairro: "Ponta Negra" }
};
console.log(visita.nome.primeiro);
console.log(visita.local.bairro);

visita.nome é outro objeto. visita.nome.primeiro desce mais um nível.

Pare e experimente. Troque "Ponta Negra" por "Redinha". Preveja o bairro novo. Recarregue. Confira.

Erro comum: escrever visita.nome = "Nara" e apagar o objeto interno. Depois visita.nome.primeiro quebra.

Atividades

  1. O que toLowerCase() devolve se a string original era "Natal"? A original muda?
  2. Por que Math.round não altera a variável preco no exemplo do capítulo 2?
  3. Qual a diferença entre item.nome e item["nome"]?
  4. Se sugerir receber só uma string, o que costuma quebrar?

Respostas comentadas

  1. Devolve "natal". A original permanece "Natal": o método cria um texto novo.
  2. Ele devolve o inteiro. Quem quiser guardar o resultado precisa de outra variável (const arredondado = …).
  3. As duas leem a mesma chave. Ponto é o hábito quando o nome é fixo. Colchetes aceitam uma string ou uma variável com o nome da chave.
  4. A função lê cliente.faixa. Uma string não tem essa chave. O teste vira undefined e cai no else, ou a página quebra se você assumir que o objeto existe.

MDN

O arquivo completo

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

experiments.js

const frase = "CaFé CoAdO na ReStInGa";
const minuscula = frase.toLowerCase();
console.log(minuscula);
const preco = 5.3;
console.log(Math.round(preco));
const item = {
  nome: "Café coado",
  cidade: "Natal",
  preco: 8,
  quente: true
};
console.log(item.nome);
const saida = document.getElementById("saida");
if (saida) {
  saida.textContent = item.nome + " — " + item.preco;
}

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; }