CURSO LINGUAGEM JAVASCRIPT – MDN
Introdução – JavaScript | MDN (mozilla.org)
CAPÍTULO 2
Cortesia da Startup Valeon (https://valedoacoonline.com.br/)
Sintaxe e tipos
Este capítulo trata sobre a sintaxe básica do JavaScript, declarações de variáveis, tipos de dados e literais.
Sintaxe básica
JavaScript pega emprestado a maior parte de sua sintaxe do Java, mas também é influenciado por Awk, Perl e Python.
JavaScript é case-sensitive e usa o conjunto de caracteres Unicode. Por exemplo, a palavra Früh (que significa “cedo” em Alemão) pode ser usada como nome de variável.
varFrüh="foobar";
Mas a variável früh não é a mesma que Früh porque JavaScript é case sensitive.
No JavaScript, instruções são chamadas de declaração e são separadas por um ponto e vírgula (;). Espaços, tabulação e uma nova linha são chamados de espaços em branco. O código fonte dos scripts em JavaScript são lidos da esquerda para a direita e são convertidos em uma sequência de elementos de entrada como simbolos, caracteres de controle, terminadores de linha, comentários ou espaço em branco. ECMAScript também define determinadas palavras-chave e literais, e tem regras para inserção automática de ponto e vírgula (ASI) para terminar as declarações. No entanto, recomenda-se sempre adicionar ponto e vírgula no final de suas declarações; isso evitará alguns imprevistos. Para obter mais informações, consulte a referência detalhada sobre a gramática léxica do JavaScript.
Comentários
A sintaxe dos comentários em JavaScript é semelhante como em C++ e em muitas outras linguagens:
// comentário de uma linha /* isto é um comentário longo
de múltiplas linhas.
*/ /* Você não pode, porém, /* aninhar comentários */ SyntaxError */Declarações
Existem três tipos de declarações em JavaScript.
Declara uma variável, opcionalmente, inicializando-a com um valor.
Declara uma variável local de escopo do bloco, opcionalmente, inicializando-a com um valor.
Declara uma constante de escopo de bloco, apenas de leitura.
Variáveis
Você usa variáveis como nomes simbólicos para os valores em sua aplicação. O nome das variáveis, chamados de identificadores, obedecem determinadas regras.
Um identificador JavaScript deve começar com uma letra, underline (_), ou cifrão ($); os caracteres subsequentes podem também ser números (0-9). Devido JavaScript ser case-sensitive, letras incluem caracteres de “A” a “Z” (maiúsculos) e caracteres de “a” a “z” (minúsculos).
Você pode usar a ISO 8859-1 ou caracteres Unicode tal como os identificadores å e ü. Você pode também usar as sequências de escape Unicode como caracteres e identificadores.
Alguns exemplos de nomes legais são Numeros_visitas, temp99, e _nome.
Declarando variáveis
Você pode declarar uma variável de três formas:
- Com a palavra chave
var. Por exemplo, varx = 42. Esta sintaxe pode ser usada para declarar tanto variáveis locais como variáveis globais. - Por simples adição de valor. Por exemplo,
x = 42. Isso declara uma variável global. Essa declaração gera um aviso de advertência no JavaScript. Você não deve usar essa variante. - Com a palavra chave
let. Por exemplo,let y = 13. Essa sintaxe pode ser usada para declarar uma variável local de escopo de bloco. Veja escopo de variável abaixo.
Classificando variáveis
Uma variável declarada usando a declaração var ou let sem especificar o valor inicial tem o valor undefined.
Uma tentativa de acessar uma variável não declarada resultará no lançamento de uma exceção ReferenceError:
vara;
console.log("O valor de a é "+a);// saída "O valor de a é undefined"
console.log("O valor de b é "+b);// executa uma exception de erro de referência (ReferenceError)
Você pode usar undefined para determinar se uma variável tem um valor. No código a seguir, não é atribuído um valor de entrada na variável e a declaração if será avaliada como verdadeira (true).
varinput;
if(input===undefined){
facaIsto();
}else{
facaAquilo();
}O valor undefined se comporta como falso (false), quando usado em um contexto booleano. Por exemplo, o código a seguir executa a função myFunction devido o elemento myArray ser undefined:
varmyArray=[];
if(!myArray[0])myFunction();
O valor undefined converte-se para NaN quando usado no contexto numérico.
vara;
a+2;// Avaliado como NaN
Quando você avalia uma variável nula, o valor nulo se comporta como 0 em contextos numéricos e como falso em contextos booleanos. Por exemplo:
varn=null;
console.log(n*32);// a saída para o console será 0.
Escopo de variável
Quando você declara uma váriavel fora de qualquer função, ela é chamada de variável global, porque está disponível para qualquer outro código no documento atual. Quando você declara uma variável dentro de uma função, é chamada de variável local, pois ela está disponível somente dentro dessa função.
JavaScript antes do ECMAScript 6 não possuía escopo de declaração de bloco; pelo contrário, uma variável declarada dentro de um bloco de uma função é uma variável local (ou contexto global) do bloco que está inserido a função. Por exemplo o código a seguir exibirá 5, porque o escopo de x está na função (ou contexto global) no qual x é declarado, não o bloco, que neste caso é a declaração if.
if(true){
varx=5;
}console.log(x);// 5
Esse comportamento é alterado, quando usado a declaração let introduzida pelo ECMAScript 6.
if(true){
lety=5;
}console.log(y);// ReferenceError: y não está definido
Variável de elevação
Outra coisa incomum sobre variáveis em JavaScript é que você pode utilizar a variável e declará-la depois, sem obter uma exceção. Este conceito é conhecido como hoisting; variáveis em JavaScript são num sentido “hoisted” ou lançada para o topo da função ou declaração. No entanto, as variáveis que são “hoisted” retornarão um valor undefined. Então, mesmo se você usar ou referir a variável e depois declará-la e inicializá-la, ela ainda retornará undefined.
/**
* Exemplo 1
*/console.log(x===undefined);// exibe "true"
varx=3;
/**
* Exemplo 2
*/// retornará um valor undefinedvarmyvar="my value";
(function(){
console.log(myvar);// undefined
varmyvar="local value";
})();Os exemplos acima serão interpretados como:
/**
* Exemplo 1
*/varx;
console.log(x===undefined);// exibe "true"
x=3;
/**
* Exemplo 2
*/varmyvar="um valor";
(function(){
varmyvar;
console.log(myvar);// undefined
myvar="valor local";
})();Devido o hoisting, todas as declarações var em uma função devem ser colocadas no início da função. Essa recomendação de prática deixa o código mais legível.
Variáveis Globais
Variáveis globais são propriedades do objeto global. Em páginas web o objeto global é a window, assim você pode configurar e acessar variáveis globais utilizando a sintaxe window.variavel.
Consequentemente, você pode acessar variáveis globais declaradas em uma janela ou frame ou frame de outra janela. Por exemplo, se uma variável chamada phoneNumber é declarada em um documento, você pode consultar esta variável de um frame como parent.phoneNumber.
Constantes
Você pode criar uma constante apenas de leitura por meio da palavra-chave const. A sintaxe de um identificador de uma constante é semelhante ao identificador de uma variável: deve começar com uma letra, sublinhado ou cifrão e pode conter caractere alfabético, numérico ou sublinhado.
constPI=3.14;
Uma constante não pode alterar seu valor por meio de uma atribuição ou ser declarada novamente enquanto o script está em execução. Deve ser inicializada com um valor.
As regras de escopo para as constantes são as mesmas para as váriaveis let de escopo de bloco. Se a palavra-chave const for omitida, presume-se que o identificador represente uma variável.
Você não pode declarar uma constante com o mesmo nome de uma função ou variável que estão no mesmo escopo. Por exemplo:
// Isto irá causar um errofunctionf(){};
constf=5;
// Isto também irá causar um erro.functionf(){
constg=5;
varg;
//declarações
}Estrutura de dados e tipos
Tipos de dados
O mais recente padrão ECMAScript define sete tipos de dados:
- Seis tipos de dados são os chamados primitivos:
- Boolean.
trueefalse. - null. Uma palavra-chave que indica valor nulo. Devido JavaScript ser case-sensitive,
nullnão é o mesmo queNull,NULL, ou ainda outra variação. - undefined. Uma propriedade superior cujo valor é indefinido.
- Number.
42ou3.14159. - String. “Howdy”
- Symbol (novo em ECMAScript 6). Um tipo de dado cuja as instâncias são únicas e imutáveis.
- Boolean.
- e Object
Embora esses tipos de dados sejam uma quantidade relativamente pequena, eles permitem realizar funções úteis em suas aplicações. Objetos e funções são outros elementos fundamentais na linguagem. Você pode pensar em objetos como recipientes para os valores, e funções como métodos que suas aplicações podem executar.
Conversão de tipos de dados
JavaScript é uma linguagem dinamicamente tipada. Isso significa que você não precisa especificar o tipo de dado de uma variável quando declará-la, e tipos de dados são convertidos automaticamente conforme a necessidade durante a execução do script. Então, por exemplo, você pode definir uma variável da seguinte forma:
varanswer=42;
E depois, você pode atribuir uma string para a mesma variável, por exemplo:
answer="Obrigado pelos peixes...";
Devido JavaScript ser dinamicamente tipado, essa declaração não gera uma mensagem de erro.
Em expressões envolvendo valores numérico e string com o operador +, JavaScript converte valores numérico para strings. Por exemplo, considere a seguinte declaração:
x="A resposta é "+42// "A resposta é 42"
y=42+" é a resposta"// "42 é a resposta"
Nas declarações envolvendo outros operadores, JavaScript não converte valores numérico para strings. Por exemplo:
"37"-7// 30
"37"+7// "377"
Convertendo strings para números
No caso de um valor que representa um número está armazenado na memória como uma string, existem métodos para a conversão.
parseInt irá retornar apenas números inteiros, então seu uso é restrito para a casa dos decimais. Além disso, é uma boa prática ao usar parseInt incluir o parâmetro da base. O parâmetro da base é usado para especificar qual sistema númerico deve ser usado.
Uma método alternativo de conversão de um número em forma de string é com o operador + (operador soma):
"1.1"+"1.1"="1.11.1"
(+"1.1")+(+"1.1")=2.2
// Nota: Os parênteses foram usados para deixar mais legível o código, ele não é requirido.
Literais
Você usa literais para representar valores em JavaScript. Estes são valores fixados, não variáveis, que você literalmente insere em seu script. Esta seção descreve os seguintes tipos literais:
Array literal
Um array literal é uma lista de zero ou mais expressões, onde cada uma delas representam um elemento do array, inseridas entre colchetes ([]). Quando você cria um array usando um array literal, ele é inicializado com os valores especificados como seus elementos, e seu comprimento é definido com o número de elementos especificados.
O exemplo a seguir cria um array coffees com três elementos e um comprimento de três:
varcoffees=["French Roast","Colombian","Kona"];
Nota : Um array literal é um tipo de inicializador de objetos. Veja Usando inicializadores de Objetos.
Se um array é criado usando um literal no topo do script, JavaScript interpreta o array cada vez que avalia a expressão que contêm o array literal. Além disso, um literal usado em uma função é criado cada vez que a função é chamada.
Array literal são também um array de objetos. Veja Array e Coleções indexadas para detalhes sobre array de objetos.
Vírgulas extras em array literal
Você não precisa especificar todos os elementos em um array literal. Se você colocar duas vírgulas em uma linha, o array é criado com undefined para os elementos não especificados. O exemplo a seguir cria um array chamado fish:
varfish=["Lion",,"Angel"];
Esse array tem dois elementos com valores e um elemento vazio (fish[0] é “Lion”, fish[1] é undefined, e fish[2] é “Angel” ).
Se você incluir uma vírgula à direita no final da lista dos elementos, a vírgula é ignorada. No exemplo a seguir, o comprimento do array é três. Não há nenhum myList[3]. Todas as outras vírgulas na lista indicam um novo elemento.
Nota : Vírgulas à direita podem criar erros em algumas versões de navegadores web antigos, é recomendável removê-las.
varmyList=['home',,'school',];
No exemplo a seguir, o comprimento do array é quatro, e myList[0] e myList[2] são undefined.
varmyList=[,'home',,'school'];
No exemplo a seguir, o comprimento do array é quatro, e myList[1] e myList[3] são undefined. Apenas a última vírgula é ignorada.
varmyList=['home',,'school',,];
Entender o comportamento de vírgulas extras é importante para a compreensão da linguagem JavaScript, no entanto, quando você escrever seu próprio código: declarar explicitamente os elementos em falta como undefined vai aumentar a clareza do código, e consequentemente na sua manutenção.
Literais Boolean
O tipo Boolean tem dois valores literal: true e false.
Não confunda os valores primitivos Boolean true e false com os valores true e false do objeto Boolean. O objeto Boolean é um invólucro em torno do tipo de dado primitivo. Veja Boolean para mais informação.
Inteiros
Inteiros podem ser expressos em decimal (base 10), hexadecimal (base 16), octal (base 8) e binário (base 2).
- Decimal inteiro literal consiste em uma sequência de dígitos sem um 0 (zero).
- 0 (zero) em um inteiro literal indica que ele está em octal. Octal pode incluir somente os dígitos 0-7.
- 0x (ou 0X) indica um hexadecimal. Inteiros hexadecimais podem incluir dígitos (0-9) e as letras a-f e A-F.
- 0b (ou 0B) indica um binário. Inteiros binário podem incluir apenas os dígitos 0 e 1.
Alguns exemplos de inteiros literal são:
0, 117 and -345 (decimal, base 10)
015, 0001 and -077 (octal, base 8)
0x1123, 0x00111 and -0xF1A7 (hexadecimal, "hex" or base 16)
0b11, 0b0011 and -0b11 (binário, base 2)
Para maiores informações, veja Literais numérico na referência Léxica.
Literais de ponto flutuante
Um literal de ponto flutuante pode ter as seguintes partes:
- Um inteiro decimal que pode ter sinal (precedido por “
+” ou “-“), - Um ponto decimal (“
.“), - Uma fração (outro número decimal),
- Um expoente.
O expoente é um “e” ou “E” seguido por um inteiro, que pode ter sinal (precedido por “+” ou “-“). Um literal de ponto flutuante deve ter no mínimo um dígito e um ponto decimal ou “e” (ou “E”).
Mais sucintamente, a sintaxe é:
[(+|-)][digitos][.digitos][(E|e)[(+|-)]digitos]
Por exemplo:
3.1415926
-.123456789
-3.1E+12
.1e-23
Objeto literal
Um objeto literal é uma lista de zero ou mais pares de nomes de propriedades e valores associados de um objeto, colocado entre chaves ({}). Você não deve usar um objeto literal no início de uma declaração. Isso levará a um erro ou não se comportará conforme o esperado, porque o { será interpretado como início de um bloco.
Segue um exemplo de um objeto literal. O primeiro elemento do objeto carro define uma propriedade, meuCarro, e atribui para ele uma nova string, “Punto”; o segundo elemento, a propriedade getCarro, é imediatamente atribuído o resultado de chamar uma função (tipoCarro("Fiat")); o terceiro elemento, a propriedade especial, usa uma variável existente (vendas).
varvendas="Toyota";
functiontipoCarro(nome){
if(nome=="Fiat"){
returnnome;
}else{
return"Desculpa, não vendemos carros "+nome+".";
}
} varcarro={meuCarro:"Punto",getCarro:tipoCarro("Fiat"),especial:vendas};
console.log(carro.meuCarro);// Punto
console.log(carro.getCarro);// Fiat
console.log(carro.especial);// Toyota
Além disso, você pode usar um literal numérico ou string para o nome de uma propriedade ou aninhar um objeto dentro do outro. O exemplo a seguir usar essas opções.
varcarro={carros:{a:"Saab","b":"Jeep"},7:"Mazda"};
console.log(carro.carros.b);// Jeep
console.log(carro[7]);// Mazda
Nomes de propriedades de objeto podem ser qualquer string, incluindo uma string vazia. Caso o nome da propriedade não seja um identificador JavaScript ou número, ele deve ser colocado entre aspas. Nomes de propriedades que não possuem identificadores válido, também não podem ser acessadas pela propriedade de ponto (.), mas podem ser acessadas e definidas com a notação do tipo array (“[]“).
varunusualPropertyNames={
"":"Uma string vazia",
"!":"Bang!"
}console.log(unusualPropertyNames."");// SyntaxError: string inesperada
console.log(unusualPropertyNames[""]);// Um string vazia
console.log(unusualPropertyNames.!);// SyntaxError: símbolo ! inesperado
console.log(unusualPropertyNames["!"]);// Bang!
Observe:
varfoo={a:"alpha",2:"two"};
console.log(foo.a);// alpha
console.log(foo[2]);// two
//console.log(foo.2); // Error: missing ) after argument list//console.log(foo[a]); // Error: a não está definidoconsole.log(foo["a"]);// alpha
console.log(foo["2"]);// two
Expressão Regex Literal
Um regex literal é um padrão entre barras. A seguir um exemplo de regex literal.
var re = /ab+c/;
String Literal
Uma string literal são zero ou mais caracteres dispostos em aspas duplas (") ou aspas simples ('). Uma sequência de caracteres deve ser delimitada por aspas do mesmo tipo; ou seja, as duas aspas simples ou ambas aspas duplas. A seguir um exemplo de strings literais.
"foo"
'bar'
"1234"
"um linha \n outra linha"
"John's cat"
Você pode chamar qualquer um dos métodos do objeto string em uma string literal – JavaScript automaticamente converte a string literal para um objeto string temporário, chama o método, em seguida, descarta o objeto string temporário. Você também pode usar a propriedade String.length com uma string literal:
console.log("John's cat".length)
// Irá exibir a quantidade de caracteres na string incluindo o espaço em branco.// Nesse caso, 10 caracteres.Você deve usar string literal, a não ser que você precise usar um objeto string. Veja String para detalhes sobre objetos de strings.
Uso de caracteres especiais em string
Além dos caracteres comuns, você também pode incluir caracteres especiais em strings, como mostrado no exemplo a seguir.
"uma linha \n outra linha"A tabela a seguir lista os caracteres especiais que podem ser usados em strings no JavaScript.
| Tabela: Caracteres especiais no JavaScript | |
| Caracter | Descrição |
\0 | Byte nulo |
\b | Backspace |
\f | Alimentador de formulário |
\n | Nova linha |
\r | Retorno do carro |
\t | Tabulação |
\v | Tabulação vertical |
\' | Apóstrofo ou aspas simples |
\" | Aspas dupla |
\\ | Caractere de barra invertida |
\XXX | Caractere com a codificação Latin-1 especificada por três dígitos octal XXX entre 0 e 377. Por exemplo, \251 é sequência octal para o símbolo de direitos autorais. |
\xXX | Caractere com a codificação Latin-1 especificada por dois dígitos hexadecimal XX entre 00 e FF. Por exemplo, \xA9 é a sequência hexadecimal para o símbolo de direitos autorais. |
\uXXXX | Caractere Unicode especificado por quatro dígitos hexadecimal XXXX. Por exemplo, \u00A9 é a sequência Unicode para o símbolo de direitos autorais. Veja sequências de escape Unicode. |
Caracteres de escape
Para caracteres não listados na tabela, se precedidos de barra invertida ela é ignorada, seu uso está absoleto e deve ser ignorado.
Você pode inserir uma aspa dentro de uma string precendendo-a com uma barra invertida. Isso é conhecido como escaping das aspas. Por exemplo:
varquote="Ele lê \"The Cremation of Sam McGee\" de R.W. Service.";
console.log(quote);
O resultado disso seria:
Ele lê "The Cremation of Sam McGee" de R.W. Service.
Para incluir uma barra invertida dentro de uma string, você deve escapar o caractere de barra invertida. Por exemplo, para atribuir o caminho do arquivo c:\temp para uma string, utilize o seguinte:
varhome="c:\\temp";
Você também pode escapar quebras de linhas, precedendo-as com barra invertida. A barra invertida e a quebra de linha são ambas removidas da string.
varstr="esta string \
está quebrada \
em várias\
linhas."console.log(str);// esta string está quebrada em várias linhas.
Embora JavaScript não tenha sintaxe “heredoc”, você pode adicionar uma quebra de linha e um escape de quebra de linha no final de cada linha:
varpoema=
"Rosas são vermelhas\n\
Violetas são azuis,\n\
Esse seu sorriso\n\
é o que me seduz. (Lucas Pedrosa)"Mais informação
Este capítulo focou na sintaxe básica das declarações e tipos. Para saber mais sobre a linguagem JavaScript, veja também os seguintes capítulos deste guia:
No próximo capítulo, veremos a construção de controle de fluxos e manipulação de erro.
