As variáveis no JavaScript são semelhantes a qualquer linguagem de programação, e servem para armazenar valores temporários, ou áreas da memória RAM, para uso em alguma ação.
Veja um exemplo de código contador:
var contador = 0;ao chamar a função contar(), haverá um incremento do valor na variável, e ao chamar a função mostraContador(), teremos o resultado em uma janela de alerta.
function contar() {
contador = contador + 1;
}
function mostraContador() {
alert( contador );
}
As variáveis existem apenas enquanto a página existir, se ocorrer uma atualização na página, como um F5 (atualizar), os valores retornam para o valor padrão.
No JavaScript pode declarar uma variável com o texto var no início de qualquer elemento que desejar tornar uma variável.
Funções também são variáveis contendo eventos.
Uma variável pode armazenar funções, textos, números, e vários outros itens, como objetos, elementos HTML, e etc.
E pode-se declarar várias variáveis de uma única vez da seguinte forma:
var contador = 0, repetir = 0, alertas = 10;
Você pode simplesmente criar uma variável que contém números e texto juntas, mas os números existentes serão convertidos para texto.
ano = 2020 + " é um ano do calendário.";
O resultado disto será o seguinte valor: "2020 é um ano do calendário.". Isto é diferente quando tem apenas números:
ano = 2020 + 1;
O valor ano será de 2021. Mas caso coloque alguma string, nem que seja em branco, ou vazia, o valor será apenas concatenado juntamente.
ano = 2020 + "" + 1;
Terá o valor de "20201".
ano = 2020 + 1 + "" + 1;Imagina qual será o resultado disto? Se você pensou em "20211", parabéns, acertou. O JavaScript tentará somar tudo o que ele conseguirá até a primeira string.
ano = 2020 + 1 + "" + 1 + 3;Aqui temos um erro bem clássico, que confunde muitos programadores e desenvolvedores Web. O resultado disto será o quê afinal? O valor 1 + 3 será somado? Não. Após qualquer string, mesmo que seja vazia, todo o restante da variável será concatenado, mesmo que haja alguma ação possível de ser calculada. O valor desta ação será "202113".
ano = 2020 + 1 + "" + ( 1 + 3 );Quando encapsulamos com parênteses, tudo muda radicalmente, pois isto permite ao JavaScript entender que deverá tratar isto em primeiro lugar. O valor disto será sempre calculado, e teremos o resultado "20214".
ano = 2020 + 1 + "" + ( 1 + 3 + "" + 3 );Aqui temos uma nova situação, e que expressa bem como um parênteses é como se fosse uma nova variável, em um escopo limpo. Aqui teremos a soma dentro do parênteses apenas dos dois primeiros elementos, e a concatenação do último valor. O resultado será "202143".
Veja outros 2 exemplos intrigantes, que podem causar erros de matemática sem ninguém perceber:
ano = 2020 + 1 + "" + ( 1 / 3 + "" + 3 );Perceba que houve um cálculo que gerou um número contendo casas decimais, e o último valor foi concatenado.
"20210.33333333333333333"
ano = 2020 + 1 + "" + ( 1 / 3 + "" + 9 );
"20210.33333333333333339"
Concatenando texto com aspas duplas
Caso o texto que você queira concatenar tenha aspas duplas no meio, perceba que isto irá quebrar o código JavaScript caso você também use aspas duplas para determinar este valor. Com isto, o JavaScript permite que você atribua os valores com aspas simples também.Exemplo:
var texto = "ol"á";Retorno:
Uncaught SyntaxError: Unexpected identifierExemplo com aspas simples:
var texto = 'ol"á';
Retorno:
"ol"á"Agora se precisar colocar aspas simples e aspas duplas no meio do texto? Há então os caracteres de evasão (escape), que pode ser adicionado usando uma barra invertida, e isto será interpretado automaticamente pelo JavaScript que deverá ser alterado pelo código que você precisa, sem quebrar a instrução da variável.
\' = Permite adicionar no meio do texto de uma variável uma aspas simples.
\" = Permite adicionar no meio do texto de uma variável uma aspas dupla.
\\ = Permite adicionar no meio do texto uma barra invertida.
var texto = "Olá mundo! Veja a fonte d\'água que pode lhe trazer \"a juventude\" novamente!";Resultado:
"Olá mundo! Veja a fonte d'água que pode lhe trazer "a juventude" novamente!"Há outros caracteres possíveis de serem adicionados usando o mesmo mecanismo como os a seguir, que não podem ser adicionados de forma direta, como os a seguir:
\r = Retorno de Carro, ou Carriage Return (CR) (ASCII = 10, ou 0x0A)
\n = Nova linha, ou Line Feed (LF) (ASCII = 13, ou 0x0D)
A tecla <ENTER>, não é só apenas uma nova linha como todos pensam. Ele é composto por 2 bytes, o CR + LF. Sempre que fazemos uma quebra de linha em um texto puro, usamos \r\n dentro de uma String de JavaScript.
Apesar do código HTML ignorar a tecla <ENTER>, necessitando da tag br ou p para definir as quebras e parágrafos, em alguns momentos necessitamos usar o texto puro para uso em alguns lugares, como elementos de texto, como textarea, ou mesmo para exibir mensagens em alertas JavaScript, que também não reconhecem tags html.
Exemplo:
alert("Olá\r\nmundo!");
Obs.: Linux e Mac OS X, podem usar outras formas para representar a tecla <ENTER>, como por exemplo, o Linux só precisa do <LF> e o Mac só precisa do <CR>, sem que haja necessidade dos dois caracteres ao mesmo tempo para saber que se trata de uma quebra de linha em um texto. No Windows, entretanto, documentos que tenham apenas um destes dois caracteres, todo o texto ficará unido como se não houvesse nada.
Operações matemáticas
As operações matemáticas que o JavaScript executa, são elas:
+ = Soma
- = Subtração
* = Multiplicação
/ = Divisão
% = Resto da divisão, ou módulo
** = Exponenciação (a partir do ECMAScript 6, que surgiu em 2015).
Facilitadores matemáticos:
++ = Soma em uma variável matemática mais 1, equivale a realizar " + 1 ".
-- = Reduz em uma variável matemática mais -1, equivale a realizar " + ( - 1 ) ", ou " - 1".
Exemplo:
valor = 1;
valor++;
valor será igual a 2.
Nas expressões matemáticas, há o parênteses, colchetes e chaves. No JavaScript, todos eles são alterados por parênteses, não se limitando em quantos forem necessários. Sempre terá prioridade o último valor de precedência.
valor = 10 + ( 10 + ( 10 + ( 12 + ( 13 + 15 ) ) ) );
O valor será 70, a começar pela soma de 13 + 15, 12, 10 e etc.
valor = 10 + ( 10 + ( 10 * ( 12 + ( 13 * 15 ) ) ) );
O valor neste caso será 2090.
Operadores de atribuição
Assim como existem os operadores matemáticos, existem operadores de atribuição, que como vimos até aqui, de forma simples, o sinal de igual "=", atribui o valor processado para uma determinada variável. Mas há outros operadores.
"=" = atribuição simples.
"+=" = atribuição somada pelo valor da variável com o novo valor.
"-=" = atribuição subtraída pelo valor da variável com o novo valor.
Exemplos:
valor = 1;
1
valorB = 2
2
valor += valorB;
3
valor -= valorB;
1
Com o operador +=, temos como exemplo o mesmo que:
valor = valor + valorB;
Com o operador -=, temos como exemplo o mesmo que:
valor = valor - valorB;
Então o que acha do seguinte valor?
valor %= valorB;
Sim, este tipo de operador também existe, e outros conforme a tecnologia evolui, poderão existir.
Tipos de variáveis
Veja alguns exemplos:
var numero = 1; // Number
var texto = "Texto"; // String
var colecao = ["texto",15]; // Arrays
var boleano = true; // Boolean
var objeto = { elementoX : "X", elementoY : "Y" }; // Object
A coleção de objetos do tipo Array, podem ser acessados com colchetes "[" e "]", diretamente ao chamar a variável, como exemplo: colecao[1] irá trazer o valor: 15, pois inicia-se em zero.
Para o objeto, é mais interessante, poderá obter o valor do elementoX usando assim: objeto.elementoX e pronto, teremos o texto "X" como valor acessível.
Também podemos armazenar funções dentro de uma varável, e chamá-los para executarem outras funções e ações ao usuário.
Funções dentro de objetos
Você pode utilizar os objetos de JavaScript para definir cenários reais, como por exemplo, uma casa mobilhada, com automação, onde existem recursos como trancar as portas, acionar o alarme, abrir ou fechar o portão. Dê uma olhada neste esquema de exemplo de um objeto casa com uma função de retornar o endereço completo com base nas informações de endereço do próprio objeto:
var casa = {
nome : "Casa XPTO",
endereco_rua : "Rua Exemplo",
endereco_numero : "56",
endereco_bairro : "Tatuão",
endereco_cidade : "Amandarindaua",
endereco_estado : "EX",
getEndereco : function(){ return this.endereco_rua + ", " + this.endereco_numero + ", " + this.endereco_bairro + ", " + this.endereco_cidade + "/" + this.endereco_estado }
}
Ao chamar o elemento, temos o seguinte valor:
casa.getEndereco()
"Rua Exemplo, 56, Tatuão, Amandarindaua/EX"
Observação: Você pode dentro do getEndereco, criar se quiser outro objeto para ter outras funções.
Conceitualmente, casa é um objeto, as variáveis são chamadas de propriedades, e as funções são chamadas de métodos. Um método é algo que interage com determinado objeto.
No caso do getEndereco(), nada mais é que uma simples função para concatenar o endereço de forma simples. Em contexto geral, considerando o objeto da vida real que é uma casa, não podemos denominar isto como um método, pois o método refere-se a algo que existe na vida real, como por exemplo: acionarAlarmeSeguranca(), abrirPortao() ou fecharRegistroDeAgua() e ter mecanismos para que esta ação se torne realmente um método.
Estamos falando que: um objeto consiste de métodos, mas isto significa que contextualmente, em questão teórica, um método pode ser um método, ou apenas uma função, mas para o JavaScript, tudo é apenas uma função e nada mais. Para a linguagem de programação, não há esta distinção, tudo é função, não importa se seja dentro de algum objeto, ou fora de algum objeto.
Conceitualmente, casa é um objeto, as variáveis são chamadas de propriedades, e as funções são chamadas de métodos. Um método é algo que interage com determinado objeto.
No caso do getEndereco(), nada mais é que uma simples função para concatenar o endereço de forma simples. Em contexto geral, considerando o objeto da vida real que é uma casa, não podemos denominar isto como um método, pois o método refere-se a algo que existe na vida real, como por exemplo: acionarAlarmeSeguranca(), abrirPortao() ou fecharRegistroDeAgua() e ter mecanismos para que esta ação se torne realmente um método.
Estamos falando que: um objeto consiste de métodos, mas isto significa que contextualmente, em questão teórica, um método pode ser um método, ou apenas uma função, mas para o JavaScript, tudo é apenas uma função e nada mais. Para a linguagem de programação, não há esta distinção, tudo é função, não importa se seja dentro de algum objeto, ou fora de algum objeto.
Métodos para funções
Alguns tipos de variáveis possuem métodos próprios que podem ser chamados para executar alguma formatação e/ou conversão, como por exemplo, converter número em texto e vice-versa.var numero = 123;Veja outro exemplo:
numero.toString() // Isto irá retornar um texto contendo "123", e não mais o número 123.
numero.toExponential(2) // Isto irá calcular automaticamente a exponencial do número.
(15.165).toFixed(0); // Isto fará retornar apenas o número 15.Outros métodos comuns em todas as variáveis javascript são: toString() e valueOf();
(15.165).toFixed(2); // Isto fará retornar 15.16.
(15.155000000000001).toFixed(2); // Isto irá retornar 15.16.
(15.155000000000000).toFixed(2); // Isto irá retornar 15.15.
Comentários
Postar um comentário