JavaScript/Variáveis

Definição da variável

As variáveis são representadas por nomes chamados de identificadores. Estes identificadores devem ser criados com certas regras:

1. Devem iniciar obrigatoriamente por letra ou pelo símbolo _ ou $.
2. A partir daí, além de letras, _ e $, podem conter algarismos (0 até 9).

var nome = "Sérgio"; //Variável com escopo "local".
livro = "JavaScript"; //Escopo global.

Uma variável ou matriz que não tenha sido inicializada possui o valor undefined (indefinido). Observe que o JavaScript diferencia letras maiúsculas de minúsculas (case-sensitive). Portanto, undefined e null devem ser escritos sempre em letras minúsculas caso queira colocar estes nomes como identificadores.

Se uma variável é declarada apenas com a instrução var (sem atribuir um valor), o seu conteúdo é undefined ou NaN (Not a Number, não é um número), caso esteja num contexto numérico.

Exemplo:

var x;
x = x * 2;

O resultado será NaN.

Ou se for utilizado:

x = x + "teste"

Ocorrerá um erro de execução, pois x não tem valor definido.

Escopo da variável

Analisando o escopo de variáveis em relação a programação orientada a objetos, podemos afirmar que: caso a variável seja declarada fora do corpo de uma função, ela será considerada como pública (global), ou seja, poderá ser alcançada por todas as funções. Caso ela seja declarada dentro de uma função, ela é considerada privada, pois somente pode ser vista pelo código da própria função.

Variável pública

Exemplo:

var x=10;
function fx() {
    /* será possível utilizar o valor de x */
}
function fy() {
    /* será possível utilizar o valor de x */
}

Variável privada

Exemplo:

function fx() {
    var x = 5;
    /* será possível utilizar o valor de x */
}
function fy() {
    /* x terá valor undefined, ou seja, não será visto por fy */
}

Constantes

São variáveis declaradas com a palavra chave const. Não podem sofrer alteração de seu conteúdo e nem de sua declaração no escopo da rotina.

Exemplo:

const fator = 1.34;
const nome = "Sérgio";

Se tentar efetuar uma redeclaração, ocorrerá um erro de execução.

Exemplo:

const fator = 1.34;
var fator = 22;

Também ocorrerá erro se já tiver sido declarada outra variável ou função com o mesmo nome:

function funcao() {}
const funcao = "teste";

Arranjos

Arrays, que incluem vetores e matrizes, são variáveis que contêm vários elementos em seu interior. A declaração de um vetor é feita utilizando ou elementos delimitados por colchetes “[]” ou pelo objeto Array.

Exemplo:

var frutas = ["laranja", "banana", "pera"];
var nomes = new Array("Sérgio", "Eduardo", "Rodrigues");
var valores = [1.34, 10, 50, 13e2];

Os elementos individuais são acessados colocando-se a posição do elemento entre colchetes após o nome do vetor. Lembre sempre que os vetores iniciam pelo elemento zero (0). Por exemplo, para acessar o primeiro elemento do vetor valores, escreveríamos valores[0]. Podemos tanto ler quanto alterar elementos do vetor.

Podem-se utilizar elementos vazios na declaração de um vetor, por exemplo:

var frutas = ["laranja","banana",,"pera",,,"abacaxi"];

O resultado seria:

• frutas[0] igual a "laranja"
• frutas[1] igual a "banana"
• frutas[2] igual a undefined
• frutas[3] igual a "pera"
• frutas[4] igual a undefined
• frutas[5] igual a undefined
• frutas[6] igual a "abacaxi"

length é um atributo especial que possui a quantidade de elementos do vetor. Não é uma função; ou seja, tentar utilizar frutas.length() causará um erro. A maneira correta de usar o atributo é frutas.length, sem os parênteses.

Outra forma de gerar erro é tentar acessar elementos fora do range; no exemplo acima, frutas[7] faria o script abortar.

Definição

O objeto Array (matriz ou vetor) pode ser tanto criado implicitamente:

var m = [1, 2, 3, 4];

Quanto explicitamente:

var m = new Array(1, 2, 3, 4);

Este objeto manipula uma coleção de outros objetos.

Atributos

O atributo length possui a quantidade de elementos que tem a matriz.

Métodos

O método concat retorna uma nova matriz, concatenando a primeira matriz (original) com os valores ou matrizes dados como argumentos.

Exemplo:

var m = ["sergio", "eduardo"];
var n = m.concat("rodrigues");
//n terá valor/["sergio", "eduardo", "rodrigues"]

O método join junta todos os elementos da matriz em uma string, colocando um separador entre os itens.

Exemplo:

var m = ["sergio", "eduardo", "rodrigues"];
var n = m.join("+ ");
//n terá valor/"sergio+ eduardo+ rodrigues"

O método pop remove o último elemento da matriz, retornando o elemento removido.

Exemplo:

var m = ["sergio", "eduardo", "rodrigues"];
var n = m.pop();
//n terá valor/"rodrigues"; e ''m''/["sergio", "eduardo"]

O método push adiciona elementos ao final da matriz. O valor de retorno depende da versão do JavaScript/até a 1.2, o método retorna o último elemento adicionado; a partir da 1.3, retorna o novo tamanho da matriz.

Exemplo:

 var m = ["sergio", "eduardo"];
 var n = m.push("rodrigues");
//n terá valor/"rodrigues" (JS < 1.3) ou 3 (JS ≥ 1.3) e m/["sergio", "eduardo", "rodrigues"]

O método reverse inverte a ordem dos elementos da matriz.

Exemplo:

var m = ["sergio", "eduardo", "rodrigues"];
var n = m.reverse();
//n e m terão valor/["rodrigues", "eduardo", "sergio"]

O método shift remove o primeiro elemento da matriz, retornando o elemento removido.

Exemplo:

var m = ["sergio", "eduardo", "rodrigues"];
var n = m.shift();
n terá valor/"sergio"
m terá valor/["eduardo", "rodrigues"]

O método slice(início, fim), ou slice(início), retorna uma faixa da matriz, extraindo elementos a partir de início e até (mas não inclusive) fim. Se fim for omitido, extrai-se até o fim da matriz. fim também pode ser negativo; -1 indica o último elemento (que não será extraído, nesse caso).

Exemplo:

var m = ["a", "b", "c", "d", "e", "f", "g", "h"];
var n = m.slice(0, 2);
\\n terá valor/["a", "b"]

O método splice(início), splice(início, número), splice(início, número, itens a inserir...), adiciona e/ou remove faixas dentro de uma matriz. O primeiro argumento é o índice a partir do qual devem ser feitas as mudanças? remover número itens e adicionar os itens a inserir.

Exemplo:

var m = ["a", "b", "c", "d", "e", "f", "g", "h"];
var n = m.splice(0, 2);
//n terá valor/["a", "b"]
//m terá valor/["c", "d", "e", "f", "g", "h"]

O método sort, sort (função_de_comparação(a, b)), ordena a matriz, opcionalmente com base em uma função de comparação personalizada.

Exemplo:

var m = ["sergio","eduardo","rodrigues"];
var n = m.sort()
//n terá valor/["eduardo","rodrigues","sergio"]

No caso de passar a função de comparação, ela deve retornar um valor menor que zero se a < b (a deve ser classificado antes de b), 0 se a = b e maior que zero se a > b.

O método unshift(item, ...) adiciona um ou mais elementos ao inicio da matriz.

Exemplo:

var m = ["sergio", "eduardo", "rodrigues"];
m.unshift("sr");
//m terá valor/["sr", "sergio", "eduardo", "rodrigues"]

Matrizes

Uma matriz é um vetor de vetores, ou seja, declara-se um vetor, cujos elementos são vetores.

Exemplo:

    var matriz = [["adao", "eva"], ["caim", "abel"]]

No caso acima, o elemento "caim" é o elemento [0] do vetor [1] da matriz, ou seja, "caim" é acessado via matriz[1][0].

É possível definir uma matriz de forma parcial

Exemplo:

    var genesis = [["adao", "eva"], ["caim", "abel", "sete"]]

Neste caso, os elementos necessários para completar a matriz são preenchidos com undefined (no exemplo acima, genesis[0][2]).

Numéricas

Existem duas categorias de números, os de notação de ponto flutuante e os inteiros. Os primeiros representam os valores fracionados, com valores decimais. Podem ser expressos de várias maneiras:

1e3 //é igual a 1 x 10<sup>3</sup>, que é 1000
-3.28e12 //é igual a -3.28 x 10<sup>12</sup>, que é -3280000000000
1e-12 //é igual a 1 x 10<sup>−12</sup>, que é 0.000000000001

Valores inteiros podem ser representados em base 10 (decimal), 16 (hexadecimal) ou 8 (octal).

Exemplos:

012 //é igual a 10 decimal. Sendo iniciado com 0, é assumido que o número é octal.
0x12 //é igual a 18 decimal. Números iniciados com 0x são assumidos como numero hexadecimais.
12 //representa 12 decimal.

Strings

São seqüências de caracteres delimitadas por (") aspas ou (') apóstrofe.

Exemplos:

'Sérgio Eduardo'
"um texto qualquer"
"várias linhas:\nSegunda Linha\tMesma linha com tabulação"

Ao inicializar uma string pode-se utilizar caracteres especiais, este tem uma barra inversa(\) para indicar que seu significado é especial, veja a seguinte tabela

\b	Representa o backspace (caractere ASCII 8)
\t	Tabulação (caractere ASCII 9)
\r	Retorno de carro (caractere ASCII 13)
\n	Nova linha (caractere ASCII 10)
\v	Tabulação vertical (caractere ASCII 11)
\uNNNN	Caractere Unicode (NNNN representa um valor hexadecimal de 0000 a FFFF)
\xNN	Caractere ASCII (NN representa um valor hexadecimal de 00 a FF)
\0NNN	Caractere ASCII (NN representa um valor octal de 000 a 0377)
\'	Apóstrofe
\"	Aspas
\\	Barra inversa

Atributos

Nome	Descrição
length	Tamanho da string

Métodos

Nome	Descrição
escape(string)	mesmo que encodeURI
unescape(string)	mesmo que decodeURI
encodeURI(string)	Codificação necessária para passar string como parametro de URI
decodeURI(string)	Decodificação necessária de string recebida por parametro URI
decodeURIComponent(string)	Decodifica toda a URI passada
encodeURIComponent(string)	Codifica toda a URI passada
anchor(nome)	new String(“sergio”).anchor(“n”); retorna /<a name=”n”>sergio</a>
big()	new String(“sergio”).big(); retorna /<big>sergio</big>
blink()	new String(“sergio”).blink(); retorna /<blink>sergio</blink>
bold()	new String(“sergio”).bold(); retorna /<b>sergio</b>
charAt(posicao)	o mesmo que substring(posicao, posicao+1), retorna um caractere da string.
charCodeAt(posicao)	Valor unicode do caracter da posição.
concat(item ...)	Concatena itens fornecidos a string.
fixed()	new String(“sergio”).fixed(); retorna /<tt>sergio</tt>
fontcolor(cor)	new String("teste").fontcolor("blue"), retorna/<font color="blue">teste</font>
fontsize(tamanho)	new String("teste").fontsize(16), retorna/<font size="16">teste</font>
indexOf(substring) indexOf(substring, posiçãoInicial)	Procura a ocorrencia da substring dentro da string
italics()	new String(“sergio”).italics(), retorna /<i>sergio</i>
lastIndexOf(substring) lastIndexOf(substring, posiçãoInicial)	Procura a ultima ocorrência da substring dentro da string.
localeCompare(outraString)	Compara outra string com a string e retorna : negativo se string < outraString 0 se for igual positivo se string > outraString
match(regexp)	retorna posição encontrada segundo expressão regular
replace(valorBusca, valorSubstituição)	troca onde localizar valorBusca por valorSubstituição, o valor de busca pode tanto ser uma string, como uma expressão regular, se for uma string somente a primeira ocorrência será substrituida.
search(valorBusca)	procura por valorBusca
slice(inicio) slice(inicio, fim)	substring do inicio até o fim, fim não é incluso,
small()	new String("teste").small(); retorna /<small>teste</small>
split()	new String("Sergio Eduardo Rodrigues").split(" "); retorna /[“Sergio”, “Eduardo”, “Rodrigues”]
strike()	new String("teste").strike(); retorna/<strike>teste</strike>
sub()	new String("teste").sub(); retorna/<sub>teste</sub>
substr(posicao, quantidade)	Retorna a substring da posição inicial, com tamanho fornecido pela quantidade. a posição pode ser negativo, indicando relativo ao final da string.
substring(posiçãoInicial) substring(posiçãoInicial, posiçãoFinal)	Substring da posição inicial até posição final, posição final não é inclusa. se a posição final não for fornecida, será retornado a string da posição inicial até fim da string
sup()	new String("teste").sup(); retorna/<sup>teste</sup>
toLocaleLowerCase()	Converte para minusculo
toLocaleUpperCase()	Converte para maiusculo
toLowerCase()	Converte para minusculo
toUpperCase()	Converte para maiusculo
<método estático> fromCharCode(numero)	retorna o caracter representado pelo indice unicode <numero>

Tipos de dados

O JavaScript possui poucos tipos de dados. Abaixo eles são apresentados.

Numéricos

Este tipo de dado armazena valores, tanto valores inteiros como ponto flutuante.

Exemplo:

1
84
2e10
3.141516
0.000001

Os valores numericos podem fazer parte de operações aritmética, como a soma, subtração, multiplicação e divisão.

Valores numéricos também podem fazer parte de operações aritiméticas de bits. Como por exemplo >> rotação de bits para direita, << rotação de bits para esquerda, >>> rotação de bits a direita sem levar em conta o sinal, ^ OU exclusivo (mesmo que XOR), (&) operação E binária (mesmo que AND), (|) operação OU binária (mesmo que OR), (~) negação binária (mesmo que NOT).

Existem várias funções para manipulação de valores numéricos, como funções trigonométricas, funções de arredondamento e exponenciação, funções de transformação de tipos, etc.

Existem alguns valores numéricos especiais, são eles :

NaN é a abreviação de (Not a Number), igual a "não é um Número", ele é o resultado geralmente de operações inválidas com números. Como por exemplo, o resultado da operação 0 / 0 , irá resultar no NaN. Ele também é uma constante, que pode ser atribuida a uma variável, como veremos mais adiante.

Infinity representa um valor infinito, podendo ser tanto positivo quanto negativo. Todas as operações com valores infinitos resultarão num valor infinito, exceto divisão e subtração que resultará no NaN.

Lógicos

Os valores lógicos podem assumir dois valores: true (verdadeiro) e false (falso).

Strings

São cadeias de caracteres, o maior número que uma String pode conter depende do navegador em uso.

Valores Strings são valores delimitados por apóstrofo ' ou por aspas " .

Exemplo:

"texto"// ou 'texto'

Uma barra inversa permite a inserção de caracteres especiais.

Exemplo:

"\b" //Representa o backspace (caracter ascii 8)
"\t" //Tabulação (caracter ascii 9)
"\r" //Retorno de carro (caracter ascii 13)
"\n" //Nova linha (caracter ascii 10)
"\v" //Tabulação vertical (caracter ascii 11)
"\uNNNN" //Caracter unicode (NNNN representa um valor hexadecimal de 0000 a FFFF)
"\xNN" //Caracter ascii (NN representa um valor hexadecimal de 00 a FF)
"\'" //Apóstrofo
"\"" //Aspas
"\\" //Barra inversa

O null

O null é um valor especial, representa um objeto nulo, não deve ser confundido com uma variável não inicializada, pois o valor null existe.

Portanto uma variável com o conteúdo null existe em memória, referenciando este objeto especial.

O undefined

O valor undefined significa que a variável não foi instanciada, inicialmente todas as variáveis se encontram neste estado.

Exercícios

Tente prever o que o script abaixo irá mostrar antes de copiar e colar seu conteúdo em um arquivo HTML e exibi-lo no browser. Adiantando um pouco, o que document.writeln(x, "
"); faz é exibir a variável x , seguida de uma quebra de linha. Esta função será detalhada mais adiante, mas para propósitos didáticos é importante saber como mostrar o que está sendo calculado.

document.writeln(1 << 3, "<br />");
document.writeln(0/0, "<br />");
document.writeln(5/2, "<br />");  /* esta é bem maliciosa. O resultado é inteiro ou ponto flutuante? */
document.writeln("Hello, world!", "<br />");
document.writeln("Hello, world!<br />");

Conversão de Tipos

Atribuindo valores

Diferente da maioria das linguagens o JavaScript define as variáveis dinamicamente, portanto ao atribuir uma variável ele escolhe o tipo conforme o valor passado para a variável, não sendo necessário especificar o mesmo.

var numero = 1; //Numerica inteira.
var texto = "Sérgio Eduardo Rodrigues"; //String.
var valor = 123.45; //Numerica com ponto flutuante.
var ativo = true; //Booleana.
var nascimento = new Date(1969,1,4); //Objeto date.

Esta forma de tratar variáveis tem o curioso nome, em inglês, de "duck typing" .

Convertendo

Uma variável pode ser atribuída para outro tipo, ou utilizando uma função de conversão ou então fazendo operações aritméticas.

Como por exemplo, quando atribuímos ao numero o valor 1, ele se encontra no tipo numérico inteiro, se o dividirmos por 2 ele irá para o tipo numérico ponto flutuante:

numero = 1; // inteiro 1 .
numero = numero / 2; // Vai para flutuante 0.5 .
numero = " " + numero; // ele é convertido para string, pois está sendo somado à outra string.
numero = parseFloat(numero); // Ele irá resultar no número 0.5 .
numero = parseInt(numero); // Vai para o inteiro 0.