Nenhum produto encontrado nessa seleção.
Variáveis em Javascript são uma forma para se salvar dados que possam ser acessados e/ou manipulados posteriormente, independente do tipo desses dados, strings, números, booleanos, arrays, objetos ou funções.
Na aula anterior, você viu como criar arquivos .js, como utilizar a tag <script> e mais alguns dados extremamente importantes para sua introdução à linguagem. Hoje falaremos de outras duas partes que também são muito importantes e que você vai utilizar constantemente em todos os seus scripts, os tipos de dados e as variáveis em Javascript.
Por que usar variáveis?
Como eu descrevi no início desse artigo, variáveis servem para guardar dados de quaisquer tipos. Sua utilização faz seu código ficar mais limpo e fácil de ser mantido.
No modo grosso de dizer, poderíamos falar que criar uma variável é dar um apelido a algo para que fique mais fácil chamar este "algo" posteriormente.
Por exemplo, meu nome é Luiz Otávio Miranda Figueiredo, transformando isso em variável ficaria assim:
var meuNome = "Luiz Otávio Miranda Figueiredo";
Agora toda vez que eu precisar falar meu nome, ao invés de escrever todo o meu nome, eu posso escrever apenas o nome da variável "meuNome" e o Javascript saberá que estou me referindo ao valor dela, no caso "Luiz Otávio Miranda Figueiredo".
Criando variáveis em Javascript
Em Javascript utilizamos a palavra var para dar escopo a uma variável, tal escopo pode ser local ou global.
Uma variável local pode ser acessada apenas pela função na qual ela foi criada (você verá mais sobre funções posteriormente), uma variável global pode ser acessada em qualquer parte do seu arquivo Javascript, incluindo outros arquivos e bibliotecas que você possa vir a utilizar no futuro.
/* Variável local */ var minhaMensagem = "Oi";
/* Variável Global*/ minhaMensagem = "Oi";
Não é incorreto utilizar variáveis globais (sem a palavra var), contudo, como elas podem ser acessadas em quase todas as partes do seu arquivo, não é recomendável que você as utilize. Isso pode gerar conflitos com outras bibliotecas e/ou seus próprios arquivos Javascript que você adicionar posteriormente na sua página.
Isso acontece porque você pode precisar utilizar o nome daquela variável para salvar algo que seja necessário para seu código, porém, se alguma outra biblioteca, ou outra função que você criar, modificar o valor daquela variável acidentalmente, seu código terá problemas. Neste caso, pode acontecer de você perder horas tentando encontrar um problema que você mesmo gerou.
Para resumir, sempre utilize a palavra "var" antes do nome de suas variáveis, a não ser que saiba exatamente o que está fazendo.
var numeroUm = 1; // O número um :)
Nomenclatura de variáveis em Javascript
Os nomes das variáveis em Javascript são bastante flexíveis. Eles podem conter letras, números, sublinhados e cifrões:
var _variavel_1 = 'Oi'; // Começa com sublinhado "_" var variavel_1 = 'Oi'; // Começa com a letra "v" var Variável_1 = 'Oi'; // Começa com uma letra maiúscula "V" var $Variavel_1 = 'Oi'; // Começa com um cifrão "$"
A regra aqui é que uma variável só pode começar com um caractere, um cifrão ou um sublinhado, mas nunca com um número:
/* Incorreto */ var 1variavel = 'Oi'; // Começa com "1" e gera um erro
No entanto, é só no primeiro caractere, depois dele você pode utilizar o que quiser (letras, números, sublinhados ou cifrões):
/* Exemplo de nome de variável estranho */ var atenção_variável_com_acento = 'Oi';
O nome da variável acima contém acentos, cedilha e sublinhados e, por incrível que pareça, está correto por não iniciar com um caractere inválido (um número, por exemplo).
Observação: Por questões de boas práticas de desenvolvimento, não utilize caracteres especiais (como palavras acentuadas) em variáveis. Está correto mas não é recomendável, portanto, tente utilizar apenas letras (sem acento), números e sublinhados. Além disso, tente selecionar um nome que descreva exatamente o valor da sua variável, por exemplo:
// Taxa de juros var taxaDeJuros = 10;
É um nome bem mais expressivo do que:
// Tribunal de justiça? var tj = 10;
Dependendo do tamanho do seu código, pode se tornar impossível saber que "tj" significa "Taxa de Juros". Com isso você perde tempo tentando descobrir o que significa "tj". E o pior da história, se ela não estiver comentada detalhando o que significa, você provavelmente terá de reescrever o código mentalmente para descobrir.
Palavras reservadas pelo Javascript
Existem algumas palavras que não podem ser utilizadas como nomes de variáveis em Javascript por serem palavras reservadas da linguagem, veja a lista completa em Reserved Words – Mozilla Developer Network.
Um segredo aqui é tentar criar variáveis por palavras compostas de duas formas: ou utilizar "CamelCase", ou separar as duas palavras por um sublinhado, exemplo:
var meuNome = "Luiz"; // CamelCase var meu_nome = "Luiz"; // Espaço trocado por sublinhado
Variáveis são Case Sensitive
Isso quer dizer que o Javascript faz distinção entre letras maiúsculas e minúsculas, ou seja:
meuNome = 'Luiz';
É completamente diferente de:
meunome = 'Luiz';
Neste caso são duas variáveis diferentes, mesmo que tenham o mesmo valor.
Tipos de dados e variáveis em Javascript
Os tipos de dados que uma variável carrega é simplesmente o método de interpretação que o motor Javascript do navegador utilizou para detectar o tipo de tal valor. Por Javascript ser uma linguagem de tipagem fraca (ou tipagem dinâmica), dependendo do contexto é possível que uma mesma variável tenha diferentes tipos de dados para um mesmo valor. Por exemplo:
var a = 1; // Valor numérico 1 var b = 2; // Valor numérico 2 // Gera um alerta da soma entre a + b alert( a + b );
No trecho acima, o tipo de dado para a variável a e b são claramente valores numéricos (1 e 2), portanto, ao chamar a função "alert" (que gera um alerta) com o valor de a (1) somado (+) ao valor de b (2), teremos um resultado 3 ( 1 + 2 = 3 ). Porém, a função abaixo muda o contexto e consequentemente o tipo do valor de a de numérico para string.
var a = 1; // Valor numérico 1 // Concatenação entre a e c var c = "O valor de a é: " + a; // Exibe um alerta com o valor de c alert( c );
Criamos uma nova variável c do tipo "string" (que pode conter quase qualquer caractere) e tentamos somar seu valor com o valor de a. Como o valor de c não é um valor numérico e sim uma string, não existe a possibilidade de soma, portanto, o motor Javascript do navegador não faz tal soma, mas sim a concatenação dos valores (junta os valores), resultando em: O valor de a é: 1. Ou seja, o valor de a, mesmo sendo numérico, também foi tratado como uma string pelo contexto em que foi aplicado.
Os tipos de dados de uma variável Javascript podem ser:
- String: quase qualquer valor entre aspas simples ou aspas duplas;
- Numérico: números;
- Booleano: true (verdadeiro) ou false (falso);
- Array: veremos posteriormente;
- Objeto: veremos posteriormente;
- Função: veremos posteriormente.
Sendo os três primeiros da lista acima (string, numérico e booleano) valores primitivos.
Para esta aula, vamos tratar apenas os valores primitivos, posteriormente veremos arrays, objetos e funções.
Tipo String
Os tipo de dados "String" é uma cadeia de zero ou mais caracteres Unicode (letras, números e sinais de pontuação).
Normalmente utilizamos este tipo de dado para representar textos em geral.
Os caracteres de uma string devem ser envolvidos em aspas simples ou aspas duplas.
var emailCliente = '[email protected]/w';
Perceba que iniciei e terminei os valores da variável emailCliente com aspas simples. Não é permitido utilizar os dois tipos de aspas para envolver os valores de uma variável, ou seja, iniciou com aspas simples, termine com aspas simples, iniciou com aspas duplas, termine com aspas duplas.
Veja exemplos corretos da utilização das aspas:
/* Aspas simples */ var emailCliente = '[email protected]/w'; /* Aspas duplas */ var emailCliente = "[email protected]/w";
Agora exemplos incorretos:
/* Não funciona */ var emailCliente = '[email protected]/w"; var emailCliente = "[email protected]/w';
Aspas dentro de aspas
Pode ser necessário utilizar aspas dentro dos valores de uma string, aí geraríamos um problema com todo o nosso código. Se você abrir os valores de uma string com aspas duplas e tentar utilizar aspas duplas dentro dos valores dessa string, uma das suas aspas duplas irá fechar o valor da string e o restante irá sobrar como um erro no código. Confira abaixo:
var mensagem = "Olha só o "erro". Essa parte do texto vai sobrar";
Veja o erro na imagem abaixo:
Para corrigir este problema, você pode intercalar as aspas, por exemplo, se você abrir os valores de uma string com aspas simples, é permitido utilizar aspas duplas, se você abrir os valores de uma string com aspas duplas, é permitido utilizar aspas simples.
/** * Para utilizar aspas duplas dentro de uma string * é necessário utilizar aspas simples para envolver * os valores dessa string */ var mensagem = 'Texto com "aspas" duplas dentro de aspas simples.'; /** * Para utilizar aspas simples dentro de uma string * é necessário utilizar aspas duplas para envolver * os valores dessa string */ var mensagem = "Texto com 'aspas' duplas dentro de aspas simples.";
Barra invertida
Se você não quiser se limitar em utilizar as aspas, como descrevi anteriormente, você pode utilizar uma barra invertida () como caractere de escape para qualquer valor que possa gerar erro dentro da sua string.
/** * A barra invertida () serve como caractere de escape para sua * string. */ var mensagem = "Olha só o "erro". Mentira, agora está certo.";
Além disso, a barra invertida () serve como caractere de escape para várias outras coisas, por exemplo:
| Código | Saída |
|---|---|
| ' | Aspas simples |
| " | Aspas duplas |
| \ | Barra invertida |
| n | Nova linha (LF) |
| r | Carriage return (CR) |
| t | tab |
| b | backspace |
| f | Quebra de página |
Exemplo:
var mensagem = "Linha 1 nLinha 2";
A saída será:
Linha 1 Linha 2
Perceba que não existe quebra de linha no código, no entanto, n indica que o Javascript deve iniciar uma nova linha na string.
Acessar o valor de um caractere em um string
Você também pode acessar apenas uma letra do valor de uma string, para isso basta digitar o número da posição entre colchetes ( [0] ) na frente do nome da string.
// Um valor qualquer var mensagem = "Qualquer valor!"; /** * Pega o caractere na posição 3 * iniciando do 0. */ alert( mensagem[3] ); /** * * 0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 * Q u a l q u e r v a l o r ! * */
Se você digitar qualquer valor de 0 a 14, terá uma letra da posição correspondente, por exemplo:
alert( mensagem[14] );
Exibe um exclamação na tela do navegador do usuário.
Verificando quantos caracteres tem uma string
Muitas vezes, também é necessário saber o tamanho de uma string, porém, em Javascript isso é extremamente simples, basta utilizar .length.
Veja um exemplo:
// Um valor qualquer var mensagem = "Qualquer valor!"; // Mostra 15 na tela alert( mensagem.length );
Maiúsculo e minúsculo
Em Javascript, também é bastante simples converter os valores de uma string em maiúsculo ou minúsculo, veja abaixo:
// Um valor qualquer var mensagem = "Qualquer valor!"; // Mostra QUALQUER VALOR! alert( mensagem.toUpperCase() ); // Mostra qualquer valor! alert( mensagem.toLowerCase() );
Substituir o valor de uma string
Para substituir o valor de uma variável em Javascript, basta utilizar "replace".
// Um valor qualquer
var mensagem = "Qualquer valor!";
// Uma nova variável que substitui o ! por .
var mensagem_substituta = mensagem.replace("!", ".");
// Mostra "Qualquer valor." ao invés de "Qualquer valor!"
alert( mensagem_substituta ); Mais sobre strings
Caso queira brincar um pouco com as variáveis do tipo string em Javascript, basta acessar o link "Javascript Strings" da W3schools (em inglês), lá eles falam bastante sobre esse tipo de dados.
Tipo booleano
Variáveis com tipo booleano têm apenas duas possibilidades de valores, true (verdadeiro) ou false (falso). Estes valores não devem ser cercados por aspas, ou seja, "true" não é a mesma coisa que true.
var valorBooleano = true; // Verdadeiro
Normalmente utilizamos esses tipo de valores com condicionais para controlar o fluxo da nossa aplicação Javascript, por exemplo:
var valorBooleano = true; // Verdadeiro
// Verifica se valorBooleano é verdadeiro ou falso
if ( valorBooleano ) {
alert( 'Variável verdadeira' );
} else {
alert( 'Variável falsa' );
}
No trecho acima, verificamos se o valor da variável valorBooleano é verdadeiro ou falso, se verdadeiro exibe um alerta com a mensagem "Variável verdadeira", caso contrário, a mensagem será "Variável falsa". Como criamos a variável com o valor true, é claro que seu valor é verdadeiro, porém, em várias partes do seu código você não saberá se o valor é verdadeiro ou falso, por isso valores booleanos são tão úteis, dependendo do valor, o código faz alguma ação necessária, caso contrário faz outra (ou várias outras).
Posteriormente iremos utilizar mais valores booleanos para controlar nossas funções, aí você vai entender melhor o porquê dos valores verdadeiros e falsos serem tão úteis.
Tipo numérico
Variáveis com tipos de dados numéricos só podem conter um tipo de valor, números (óbvio). Tais números podem, ou não, ter o ponto flutuante, por exemplo:
/* Números inteiros */ var numeroNegativo = -1420; var zero = 0; var numeroComum = 35842;
/* Números válidos de ponto flutuante */ var numeroFloat = 0.3555 var outroNumero = 144.006; var negativoComDecimal = -2.3; var outroNumero = 19.5e-2 // .195 var decimalZero = 12.0;
Todas os números acima são válidos em Javascript.
Apesar de números maiores serem suportados, algumas funções podem apenas trabalhar com números entre -2.147.483.648 até 2147483648, por isso você deve limitar o uso de números nesta faixa.
Também existem dois números especiais: o infinito positivo e negativo. Em JavaScript, ambos são representados por infinity e -infinity, respectivamente . Um número infinito positivo é gerado quando um calculo passa do número máximo permitido em um aplicativo JavaScript. Um infinito negativo é retornado quando um número menor do que o valor mínimo suportado em JavaScript é atingido.
Tipo null e undefined
Null e undefined representam variáveis que não têm um valor ou estão incompletas. Para criar uma variável nula, você deve especificar seu valor como "null", como no exemplo abaixo:
var semValor = null; // null
No entanto, em Javascript você pode declarar uma variável mas não a inicializar, exemplo:
var indefinida; // undefined
Outro método que não está entre nulo (null) nem indefinida (undefined), é um método que alguns desenvolvedores costumam utilizar para inicializar variáveis:
var semValor = ""; // Nenhum valor
Ao contrário do que muitos imaginam, a variável acima não tem valor, mas não está indefinida (undefined) e nem tem valor nulo (null).
Uma maneira boa para checar uma variável quando você não tem certeza se ela está definida e tem valor, é utilizando uma expressão condicional (if) com o nome da variável, exemplo:
// Checa se a variável está definida (undefined)
// Se ela tem valor
// E se ela não é nula (null)
if ( variavel ) {
// Continua o código
}
Concluindo
Nessa aula você aprendeu como funcionam os tipos de dados e as variáveis em Javascript, espero que tenha sido completamente claro e esclarecido todas as suas dúvidas, porém, se ficou com dúvida em alguma parte, não hesite em perguntar nos comentários, estaremos aqui para ajudar.
Outras aulas
Caso tenha perdido a aula anterior, segue o link:
Já temos a aula posterior:
Caso queira visualizar todas as aulas dessa sessão em ordem cronológica invertida:
