Escolar Documentos
Profissional Documentos
Cultura Documentos
statements
As instruções são construções de sintaxe e comandos que executam ações.
Podemos ter quantas instruções em nosso código quisermos. As instruções podem ser separadas
por ponto e vírgula.
Normalmente, as instruções são escritas em linhas separadas para tornar o código mais legível:
alert('Alô');
alert('Mundo');
Ponto e vírgula
Um ponto e vírgula pode ser omitido na maioria dos casos quando existe uma quebra de linha.
Na maioria dos casos, uma nova linha implica um ponto e vírgula. Mas “na maioria dos
casos” não significa “sempre”!
Há casos em que uma nova linha não significa um ponto e vírgula. Por exemplo:
alert(3 +
1
+ 2);
O código é gerado porque o JavaScript não insere ponto e vírgula aqui. É intuitivamente óbvio que
se a linha terminar com um sinal de mais "+", então é uma “expressão incompleta”, então um
ponto e vírgula ali seria incorreto. E neste caso, isso funciona como pretendido.
Mas há situações em que o JavaScript “falha” em assumir um ponto e vírgula onde ele é
realmente necessário.
Erros que ocorrem em tais casos são muito difíceis de encontrar e corrigir.
Um exemplo de erro
Se você está curioso para ver um exemplo concreto de tal erro, confira este código:
alert("Alô");
[1, 2].forEach(alert);
Não há necessidade de pensar sobre o significado dos colchetes e ainda. Vamos estudá-los mais
tarde. Por enquanto, lembre-se apenas do resultado da execução do código: ele mostra Alô,
then 1, then 2.
alert("Alô")
[1, 2].forEach(alert);
Se executarmos esse código, apenas o primeiro será exibido (e há um erro, talvez seja necessário
abrir o console para vê-lo). Não há mais números.
Isso ocorre porque o JavaScript não assume um ponto e vírgula antes dos
colchetes [...]. Portanto, o código no último exemplo é tratado como uma única instrução.
Recomendamos colocar ponto e vírgula entre as instruções, mesmo que sejam separadas por
novas linhas. Esta regra é amplamente adotada pela comunidade. Vamos notar mais uma vez
– deixar de fora o ponto e vírgula na maioria das vezes. Mas é mais seguro – especialmente para
um iniciante – usá-los.
Comentá rios
Com o passar do tempo, os programas tornam-se cada vez mais complexos. Torna-se necessário
adicionar que descrevam o que o código faz e por quê.
Os comentários podem ser colocados em qualquer lugar de um script. Eles não afetam sua
execução porque o mecanismo simplesmente os ignora.
O resto da linha é um comentário. Pode ocupar uma linha inteira própria ou seguir uma
declaração.
Como aqui:
// Este comentário ocupa sua própria linha
alert('Alô');
alert('Mundo'); // Este comentário segue a uma declaração
Comentários de várias linhas começam com uma barra e um asterisco /*e terminam com um
asterisco e uma barra */.
Assim:
/* Um exemplo de comentário com duas mensagens.
Este é um comentário de múltiplas linhas.
*/
alert('Alô');
alert('Escola!');
O conteúdo dos comentários é ignorado, portanto, se colocarmos código dentro /* … */de , ele
não será executado.
Isso tinha o benefício de nunca quebrar o código existente. Mas a desvantagem era que qualquer
erro ou uma decisão imperfeita feita pelos criadores do JavaScript ficava presa na linguagem para
sempre.
Este foi o caso até 2009, quando o ECMAScript 5 (ES5) apareceu. Ele adicionou novos recursos à
linguagem e modificou alguns dos existentes. Para manter o código antigo funcionando, a
maioria dessas modificações está desativada por padrão. Você precisa habilitá-los
explicitamente com uma diretiva especial: "use strict".
“use strict”
A diretiva se parece com uma string: ou . Quando está localizado no topo de um script, todo o
script funciona da maneira “moderna”.
Por exemplo:
"use strict";
Muito em breve vamos aprender funções (uma forma de agrupar comandos), então vamos
adiantar que pode ser colocado no início de uma função. Fazer isso habilita o modo estrito
apenas nessa função. Mas geralmente as pessoas o usam para todo o script.
"use strict";
Uma vez que entramos no modo estrito, não há como voltar atrás.
Console do navegador
Quando você usa um console de desenvolvedor para executar código, observe que ele não
funciona use strict por padrão.
Se isso não acontecer, por exemplo, em um navegador antigo, há uma maneira feia, mas confiável,
de garantir use strict. Coloque-o dentro deste tipo de wrapper:
(function() {
'use strict';
Pode-se recomendar iniciar scripts com "use strict"… Mas sabe o que é legal?
Variáveis
Na maioria das vezes, um aplicativo JavaScript precisa trabalhar com informações. Aqui estão dois
exemplos:
1. Uma loja online – as informações podem incluir mercadorias sendo vendidas e um carrinho de compras.
2. Um aplicativo de bate-papo – as informações podem incluir usuários, mensagens e muito mais.
Uma variável
Uma variável é um “armazenamento identificado” para dados. Podemos usar variáveis para
armazenar guloseimas, visitantes e outros dados.
Para ser conciso, podemos combinar a declaração e atribuição da variável em uma única linha:
let message = 'Alô!'; // define the variable and assign the value
alert(message); // Alô!
A variante de várias linhas é um pouco mais longa, mas mais fácil de ler:
let user = 'John';
let age = 25;
let message = 'Alô';
Em scripts mais antigos, você também pode encontrar outra palavra-chave: var em vez de let:
A var palavra-chave é a mesma que let. Ele também declara uma variável, mas de uma maneira
um pouco diferente, tipo “velha escola”.
Existem diferenças sutis entre let e var, mas elas ainda não importam para nós. Vamos abordá-
los em detalhes no capítulo O velho "var" .
Por exemplo, a variável message pode ser imaginada como uma caixa rotulada "message"com o
valor "Alô!"nela:
Também podemos declarar duas variáveis e copiar dados de uma para a outra.
let Alô = 'Alô Mundo!';
let message;
// copia 'Alô Mundo' de Alô para dentro de message
message = Alô;
Portanto, devemos declarar uma variável uma vez e depois nos referir a ela sem let.
Nomenclatura de variável
Existem duas limitações em nomes de variáveis em JavaScript:
1. O nome deve conter apenas letras, dígitos ou os símbolos $ e _.
2. O primeiro caractere não deve ser um dígito.
Exemplos de nomes válidos:
let userName;
let test123;
Quando o nome contém várias palavras, camelCase é comumente usado. Ou seja: as palavras vão
uma após a outra, cada palavra exceto a primeira começando com uma letra maiúscula:
minhaVariávelDeNomeMuitoLongo.
alert($ + _); // 3
JavaScript é case-sensitive
É possível usar qualquer idioma, incluindo letras cirílicas ou até hieróglifos, assim:
let имя = '...';
let 我 = '...';
Tecnicamente, não há nenhum erro aqui. Esses nomes são permitidos, mas existe uma
convenção internacional para usar o inglês em nomes de variáveis. Mesmo se estivermos
escrevendo um roteiro pequeno, ele pode ter uma longa vida pela frente. Pessoas de outros países
podem precisar lê-lo algum tempo.
Palavras reservadas
Existe uma lista de palavras reservadas , que não podem ser usadas como nomes de variáveis
porque são usadas pela própria linguagem.
Normalmente, precisamos definir uma variável antes de usá-la. Mas antigamente era tecnicamente
possível criar uma variável por uma mera atribuição do valor sem usar let. Isso ainda funciona
agora se não colocarmos use strict nossos scripts para manter a compatibilidade com scripts
antigos.
// nota: não defina "use strict" neste exemplo
num = 5; // a variável num é criada se ainda não existe
alert(num); // 5
Constantes
Para declarar uma variável constante (imutável), use const em vez de let:
Quando um programador tem certeza de que uma variável nunca mudará, ele pode declará-
la constpara garantir e comunicar claramente esse fato a todos.
Constantes maiúsculas
Existe uma prática generalizada de usar constantes como aliases para valores difíceis de lembrar
que são conhecidos antes da execução.
Por exemplo, vamos fazer constantes para cores no chamado formato “web” (hexadecimal):
const COLOR_RED = "#F00";
const COLOR_GREEN = "#0F0";
const COLOR_BLUE = "#00F";
const COLOR_ORANGE = "#FF7F00";
Benefícios:
COLOR_ORANGE é muito mais fácil de lembrar do que "#FF7F00".
É muito mais fácil digitar errado "#FF7F00" do que COLOR_ORANGE.
Ao ler o código, COLOR_ORANGE é muito mais significativo do que #FF7F00.
Quando devemos usar maiúsculas para uma constante e quando devemos nomeá-la
normalmente? Vamos deixar isso claro.
Ser uma “constante” significa apenas que o valor de uma variável nunca muda. Mas há constantes
que são conhecidas antes da execução (como um valor hexadecimal para vermelho) e há
constantes que são em tempo de execução, durante a execução, mas não mudam após sua
atribuição inicial.
Por exemplo:
const pageLoadTime = /* tempo que uma pagina leva pra carregar */;
Um nome de variável deve ter um significado claro e óbvio, descrevendo os dados que ela
armazena.
Em um projeto real, a maior parte do tempo é gasto modificando e estendendo uma base de
código existente, em vez de escrever algo completamente separado do zero. Quando voltamos a
algum código depois de fazer outra coisa por um tempo, é muito mais fácil encontrar informações
bem rotuladas. Ou, em outras palavras, quando as variáveis têm bons nomes.
Por favor, gaste algum tempo pensando no nome correto para uma variável antes de declará-
la. Fazer isso irá recompensá-lo generosamente.
Como resultado, suas variáveis são como caixas nas quais as pessoas jogam coisas diferentes sem
trocar seus adesivos. O que há dentro da caixa agora? Quem sabe? Precisamos nos aproximar e
verificar.
Esses programadores economizam um pouco na declaração de variáveis, mas perdem dez vezes
mais na depuração.
Resumo
Podemos declarar variáveis para armazenar dados usando as palavras-chave var, let ou const.
As variáveis devem ser nomeadas de uma maneira que nos permita entender facilmente o que
está dentro delas.
Tarefas
Trabalhando com variáveis
Tipos de dados
Um valor em JavaScript é sempre de um determinado tipo. Por exemplo, uma string ou um
número.
Existem oito tipos de dados básicos em JavaScript. Aqui, vamos abordá-los em geral e nos
próximos capítulos vamos falar sobre cada um deles em detalhes.
Podemos colocar qualquer tipo em uma variável. Por exemplo, uma variável pode em um
momento ser uma string e então armazenar um número:
// no error
let message = "Alô";
message = 123456;
As linguagens de programação que permitem tais coisas, como JavaScript, são chamadas de
“tipadas dinamicamente”, o que significa que existem tipos de dados, mas as variáveis não estão
vinculadas a nenhum deles.
Number
let n = 123;
n = 12.345;
O tipo de representa números inteiros e de ponto flutuante.
Existem muitas operações para números, por exemplo, multiplicação *, divisão /, adição +,
subtração - e assim por diante.
Além dos números regulares, existem os chamados “valores numéricos especiais” que também
pertencem a este tipo de dados: Infinity, -Infinity e NaN.
Infinity representa o infinito matemático ∞. É um valor especial que é maior que qualquer
número.
Fazer matemática é “seguro” em JavaScript. Podemos fazer qualquer coisa: dividir por zero, tratar
strings não numéricas como números, etc.
O script nunca irá parar com um erro fatal (“morrer”). Na pior das hipóteses, teremos NaN
como resultado.
Valores numéricos especiais pertencem formalmente ao tipo “número”. Claro que não são
números no sentido comum desta palavra.
BigInt
Em JavaScript, o tipo “number” não pode representar valores inteiros maiores que (253-1) (isto
é 9007199254740991), ou menores que -(253-1)para negativos. É uma limitação técnica
causada por sua representação interna.
Para a maioria dos propósitos, isso é suficiente, mas às vezes precisamos de números realmente
grandes, por exemplo, para criptografia ou carimbos de data e hora com precisão de
microssegundos.
String
Uma string em JavaScript deve estar entre aspas.
let str = "Alô";
let str2 = 'Single quotes are ok too';
let phrase = `can embed another ${str}`;
Aspas simples e duplas são aspas “simples”. Praticamente não há diferença entre eles em
JavaScript.
// incorporado à variavel
alert( `Alô, ${nome}!` ); // Alô, João!
// incorporado na expressão
alert( `o resultado é ${1 + 2}` ); // o resultado é 3
Observe que isso só pode ser feito em crases. Outras cotações não têm essa funcionalidade de
incorporação!
alert( "o resultado é ${1 + 2}" ); // o resultado é ${1 + 2} (aspas
duplas não dá resultado)
Em JavaScript, não existe esse tipo. Só existe um tipo: string. Uma string pode consistir em zero
caracteres (estar vazio), um caractere ou muitos deles.
Este tipo é comumente usado para armazenar valores sim/não: true significa “sim, correto”
e false significa “não, incorreto”.
Por exemplo:
let campoNomeChecado = true; // sim, o campo nome está checado
let campoIdadeChecado = false; // não, o campo nome não esta checado
O valor “nulo”
O valor null especial não pertence a nenhum dos tipos descritos acima.
O valor “indefinido”
O valor especial undefined também se destaca. Faz um tipo próprio, assim como null.
let idade;
alert(idade); // mostra "undefined"
…Mas não recomendamos fazer isso. Normalmente, null costuma-se atribuir um valor “vazio” ou
“desconhecido” a uma variável, enquanto undefined é reservado como valor inicial padrão para
coisas não atribuídas.
Objetos e Símbolos
O tipo object é especial.
Todos os outros tipos são chamados de “primitivos” porque seus valores podem conter apenas
uma única coisa (seja uma string ou um número ou qualquer outra coisa). Em contraste, os objetos
são usados para armazenar coleções de dados e entidades mais complexas.
Sendo tão importante, os objetos merecem um tratamento especial. Nós vamos lidar com eles
mais tarde no capítulo Objetos , depois que aprendermos mais sobre primitivas.
O tipo symbol é usado para criar identificadores exclusivos para objetos. Temos que mencioná-lo
aqui por uma questão de completude, mas também adiar os detalhes até conhecermos os objetos.
O tipo de operador
O operador typeof retorna o tipo do argumento. É útil quando queremos processar valores de
tipos diferentes de forma diferente ou apenas queremos fazer uma verificação rápida.
A sintaxe typeof(x)
Você também pode encontrar outra sintaxe: typeof(x). É o mesmo que typeof x.
Para deixar claro: typeof é um operador, não uma função. Os parênteses aqui não fazem parte
de typeof. É o tipo de parênteses usado para agrupamento matemático.
Normalmente, esses parênteses contêm uma expressão matemática, como (2 + 2), mas aqui
eles contêm apenas um argumento (x). Sintaticamente, eles permitem evitar um espaço entre
o typeofoperador e seu argumento, e algumas pessoas gostam disso.
Algumas pessoas preferem typeof(x), embora a sintaxe typeof x seja muito mais comum.
Resumo
Existem 8 tipos de dados básicos em JavaScript.
Number para números de qualquer tipo: inteiro ou ponto flutuante, os inteiros são limitados por
±(253-1)
Bigint é para números inteiros de comprimento arbitrário.
String para cordas. Uma string pode ter zero ou mais caracteres, não há um tipo de caractere único
separado.
Boolean para true/ false.
Null para valores desconhecidos – um tipo autônomo que tem um único valor null.
Undefined para valores não atribuídos – um tipo autônomo que tem um único valor undefined.
Object para estruturas de dados mais complexas.
Symbol para identificadores exclusivos.
O operador typeof nos permite ver qual tipo está armazenado em uma variável.
Nos próximos capítulos, vamos nos concentrar nos valores primitivos e, quando estivermos
familiarizados com eles, passaremos para os objetos.
Tarefas
Aspas de string
importância: 5
alerta
Esse nós já vimos. Ele mostra uma mensagem e espera que o usuário pressione “OK”.
Por exemplo:
alert("Alô");
Uma mini-janela com uma mensagem é chamada de janela modal. A palavra “modal” significa
que o visitante não pode interagir com o resto da página, pressionar outros botões, etc, até que
tenha lidado com a janela. Neste caso – até que eles pressionem “OK”.
prompt
A função prompt aceita dois argumentos:
default
Os colchetes na sintaxe[...]
Os colchetes default na sintaxe acima indicam que o parâmetro é opcional, não obrigatório.
O visitante pode digitar algo no campo de entrada de prompt e pressionar OK. Em seguida,
obtemos esse texto no arquivo result. Ou eles podem cancelar a entrada pressionando
Cancelar ou pressionando a tecla Esc , então obtemos null como o result.
Por exemplo:
let idade = prompt(Quanto anos você tem?', 100);
alert(`Você tem ${idade} anos!`); // Você tem 100 anos!
O segundo parâmetro é opcional, mas se não for fornecido, o Internet Explorer inserirá o
texto "undefined" no prompt.
confirm
A sintaxe: result = confirm (question);
A função confirm mostra uma janela modal com um question e dois botões: OK e Cancelar.
Por exemplo:
let ehChefe = confirm("Você é o chefe?");
alert(ehChefe); // true se OK for pressionado.
Resumo
Cobrimos 3 funções específicas do navegador para interagir com os visitantes:
alert
prompt
mostra uma mensagem pedindo ao usuário para inserir texto. Retorna o texto ou, se o botão Cancelar
ou Esc for clicado, null.
confirm
mostra uma mensagem e espera que o usuário pressione “OK” ou “Cancelar”. Retorna true para
OK e false para Cancel/ Esc.
Todos esses métodos são modais: eles pausam a execução do script e não permitem que o
visitante interaja com o restante da página até que a janela seja descartada.
Tarefas
Uma página simples
importância: 4
Execute a demonstração
Conversõ es de tipo
Na maioria das vezes, operadores e funções convertem automaticamente os valores dados a eles
para o tipo correto.
Há também casos em que precisamos converter explicitamente um valor para o tipo esperado.
Conversão de String
A conversão de string acontece quando precisamos da forma de string de um valor.
A conversão explícita geralmente é necessária quando lemos um valor de uma fonte baseada em
string, como um formulário de texto, mas esperamos que um número seja inserido.
Se a string não for um número válido, o resultado dessa conversão será NaN. Por exemplo:
A maioria dos operadores matemáticos também realiza essa conversão, veremos isso no próximo
capítulo.
Conversão booleana
A conversão booleana é a mais simples.
Isso acontece em operações lógicas (mais tarde conheceremos testes de condição e outras coisas
semelhantes), mas também pode ser executado explicitamente com uma chamada
para Boolean(value).
A regra de conversão:
Valores que são intuitivamente “vazios”, como 0, uma string vazia, null, undefined, e NaN,
tornam-se false.
Outros valores se tornam true.
Por exemplo:
alert( Boolean(1) ); // true
alert( Boolean(0) ); // false
Resumo
As três conversões de tipo mais usadas são para string, para número e para booleano.
String Conversion
Ocorre quando produzimos algo. Pode ser realizado com String(value). A conversão para
string geralmente é óbvia para valores primitivos.
Numeric Conversion
Ocorre em operações matemáticas. Pode ser realizado com Number(value).
Segue as regras:
Valor Torna-se…
0, null, undefined, NaN,"" false
qualquer outro valor true
A maioria dessas regras são fáceis de entender e memorizar. As exceções notáveis em que as
pessoas geralmente cometem erros são: