Introdução ao JavaScript

Prévia do material em texto

PDF gerado usando o pacote de ferramentas em código aberto mwlib. Veja http://code.pediapress.com/ para mais informações.
PDF generated at: Fri, 06 Dec 2013 10:33:36 UTC
Javascript
Conteúdo
Páginas
Prefácio 1
Introdução 1
Conhecendo a linguagem 3
Tipos de dados 3
Conversão de Tipos 5
Variáveis 6
Operadores 10
Fluxo de Controle 11
Funções 15
Objetos 19
Outras informações 23
Autores 23
Referências 25
Ligações externas 26
Referências
Fontes e Editores da Página 27
Fontes, Licenças e Editores da Imagem 28
Licenças das páginas
Licença 29
Prefácio 1
Prefácio
alert("Olá JavaScript!");
Este livro cobre as especificações técnicas da versão do padrão ECMAScript 262, da versão 5.1 em diante (Ecma-262
Edition 5.1 [1]).
Os autores deste livro esperam ter dado uma pequena contribuição para a disseminação desta linguagem script, e
possa tornar a vida mais fácil para programadores que necessitam tornar suas páginas mais inteligentes.
Referências
[1] http:/ / www. ecma-international. org/ ecma-262/ 5. 1/ ECMA-262. pdf
Introdução
Muito se fala sobre JavaScript, porém existe muito pouca documentação em português desta linguagem de
programação.
O maior problema é a confusão que se faz entre a linguagem Java e o JavaScript com relação a semelhança no
nome, na mesma linha de raciocínio fazem a relação de C++ com Java pela semelhança de comandos e sintaxes,
embora a implementação de algumas sintaxes e construções sejam parecidas são linguagens distintas, criadas para
resolver problemas diferentes, e que por isto possuem capacidades diferentes, o mesmo ocorre com Java e
JavaScript.
Enquanto a Linguagem Java é fortemente tipada e possui tipos estáticos a JavaScript oferece uma reduzida
quantidade de tipos, isto é, o necessário para criação de telas dinâmicas e certa lógica as páginas HTML.
A JavaScript é pequena, leve, portável (está presente em quase todos os navegadores e em todas as plataformas que
estes navegadores rodam). Ela não é uma linguagem para rodar sozinha, precisando de um navegador para tal.
A JavaScript segue uma linha de quanto menor melhor, ou seja, ela é pequena na sua escrita, e criação de objetos. Os
tipos de variáveis são dinâmicos, e possui objetos globais já predefinidos conforme o ambiente que se encontra.
Inicialmente ela foi criada pela Netscape para ser a linguagem padrão no navegador, para produzir certa verificação
aos dados. Porém com o passar do tempo, ela foi padronizada pela ECMA [1] (European Computer Manufactures
Association) vide ECMA-262, também reconhecida pela ISO ISO-16262.
Porém, esta padronização não avançou sobre os objetos públicos e seus respectivos métodos, o que torna difícil a
padronização de programas entre navegadores.
Conteúdo do livro
Aqui será abordada a a especificação JavaScript 1.5 que segue a ECMA-262 edição 3.
Os autores deste livro esperam ter dado uma pequena contribuição para a disseminação desta linguagem script, e
possa tornar a vida mais fácil para programadores que necessitam tornar suas páginas mais inteligentes.
Verificando o JavaScript
Para verificar se o JavaScript está habilitado no seu browser, copie e cole o código abaixo em uma arquivo HTML
qualquer e tente abri-lo.
<script language="javascript">
document.writeln("Hello, world!\n");
Introdução 2
</script>
O resultado esperado são duas linhas:
Hello, world!
Caso não apareça nada, ou apareça um erro, verifique as configurações do browser. Alguns browsers deixam, por
padrão, o JavaScript desabilitado.
Referências
[1] http:/ / www. ecma-international. org
3
Conhecendo a linguagem
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:
Tipos de dados 4
"\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 5
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" [1] .
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.
Referências
[1] http:/ / en. wikipedia. org/ wiki/ Duck_typing Duck typing, na Wikipedia em inglês
Variáveis 6
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).
A forma correta de se declarar uma variável é a seguinte:
1. Utilizando a palavra reservada var seguido do nome da variável.
var nome = "Sérgio Eduardo Rodrigues";
Uma variável ou matriz que não tenha sido inicializada possui o valor undefined (indefinido). Observe que o
JavaScript é case-sensitive, ou seja, letras minúsculas e maiúsculas são coisas diferentes. Portanto, undefined
e null devem ser escritos sempre em letras minúsculas.
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
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áveis 7
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";
Matrizes
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
Variáveis 8
• 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.
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.
Variáveis 9
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
Operadores 10
Operadores
Operadores para efetuar mudança do conteúdo de uma variável.
• =: atribui valor a uma variável.
• ++: incrementa valor de uma variável, x++ é o mesmo que x=x+1.
• --: decrementa valor de uma variável, x-- é o mesmo que x=x-1.
Operadores para comparação de valores.
• ==: igual.
• !=: diferente.
• ===: estritamente igual(verifica conteúdo e tipo da variável).
• !==: estritamente diferente(verifica conteúdo e tipo da variável);
• <: menor que.
• <=: menor ou igual a.
• >: maior que.
• >=: maior ou igual a.
Operadores aritiméticos.
• %: módulo.
• +: soma.
• -: subtração.
• *: multiplicação.
• /: divisão.
Operadores lógicos.
• &&: módulo.
• ||: ou.
• !: não.
Operadores de bits.
• &: operação E.
• |: operação OU.
• ^: operação OU EXCLUSIVO.
• ~: operação NÃO.
• >>: rotação de bits para direita.
• <<: rotação de bits para esquerda.
• >>>: rotação de bits para direita sem levar em consideração o sinal.
Operadores especiais.
• ?: efetua operação condicionada, exemplo x = (a > 1) ? 3 : 4; ou seja se o valor da variável a for
maior que 1, será atribuído a x o valor 3 caso contrario 4.
• ,: a vírgula efetua operação da esquerda para a direita sendo que o último elemento é retornado. Ex.: z=(x=1,
y=2); faz com que x passe a valer 1, e y e z passem a valer 2.
• delete variavel : elimina um objeto que esteja sendo referenciada pela variável, se a variavel for uma
propriedade de um objeto, limpa esta referência do objeto.
• propriedade 'in objeto: retorna true caso a propriedade esteja contida no objeto.
• objeto instanceof TipoDoObjeto: retorna true caso o objeto seja de determinado tipo.
• typeof(objeto): retorna string contendo o tipo do objeto.
• new TipoDoObjeto(p1,...): cria uma instância do objeto.
Operadores 11
• this: representa a instância do objeto corrente.
• void (expressao): resolve expressão, porém ignora valor retornado.
Short Circuit
Operações lógicas utilizam short circuit da seguinte forma:
true || qualquer coisa = true
false && qualquer coisa = false
Assim é possível por exemplo fazer a seguinte operação:
if (a != 0 && 1/a > 0.5) {
 //...
}
Assim evita erros de divisão por zero.
Outro exemplo da utilização, é para contornar a diferença dos eventos do Internet Explorer e do Firefox.
function listener(event) {
 event = event || window.event;
 //...
}
Assim se esta função estiver rodando no IE (Internet Explorer) ou num navegador utilizando Gecko irá rodar da
mesma forma.
Fluxo de Controle
Controlando o que e quando é executado um comando, faz parte de todas as linguagens, e o JavaScript não é
diferente.
Existem vários comandos, que por isto são tratados como palavras reservadas e portanto não devem ser utilizados
como identificadores de variáveis ou constantes.
Bloco de comandos
No JavaScript, o bloco de comandos é uma estrutura para agrupar outros comandos.
O bloco de comando começa pelo abre chave { e finaliza com o fecha chave }, o ultimo elemento não
necessáriamente necessita de finalizar com ponto e virgula ;, mas se terminar não terá problemas, este ultimo ponto
e virgula é opcional.
{
 comando;
 comando;
 ...
 comando
}
Ou então:
Fluxo de Controle 12
{
 comando;
 comando;
 ...
 comando;
}
Comando If
Talvez um dos comandos mais utilizados em todas as linguagens de programação, o if é um comando utilizado
para tomar a decisão de executar o próximo comando baseado numa expressão lógica, se esta expressão for
verdadeira o próximo comando é executado, caso contrário ele é ignorado.
Por exemplo, se for necessário dar um alerta ao usuário, conforme a hora, podemos fazer o seguinte:
var hora = new Date().getHours();
if (hora < 12)
 alert("bom dia");
if (hora >= 12 && hora < 18)
 alert("boa tarde");
if (hora >= 18)
 alert("boa noite");
Note que as três comparações serão feitas, independente da execução, isto é uma perda de tempo, pois se é de dia não
pode ser tarde, neste caso anexamos a estrutura do if o comando else que executa o comando a seguir caso o
resultado da expressão lógica seja false, ficando o nosso código assim.
var hora = new Date().getHours();
if (hora < 12)
 alert("bom dia");
else if (hora >= 12 && hora < 18)
 alert("boa tarde");
else
 alert("boa noite");
Para tornar mais legível podemos escrever da seguinte forma:
var hora = new Date().getHours();
if (hora < 12) {
 alert("bom dia");
} else {
if (hora >= 12 && hora < 18) {
 alert("boa tarde");
} else {
 alert("boa noite");
}
}
Assim torna mais legível a o comando executado, sem falar que usando blocos de comandos podemos agrupar mais
de um comando.
Fluxo de Controle 13
Comando While
Executa bloco enquanto condição resultar em verdadeiro.
while (condição) { bloco; }
Igual ao anterior, porém o bloco é executado pelo menos uma vez, mesmo que a condição seja falsa.
do { bloco; } while (condição);
Comando Switch
Se o conteúdo da variável for igual a constante1 ou constante2 será executado o comando1; se for igual a
constante3 será executado o comando2; caso contrário será executado o comando3; note que o comando
break força o fluxo sair fora do comando switch.
switch(variável) {
case constante1:
case constante2:
 comando1;
 break;
case constante3:
 comando2;
 break;
default:
 comando3;
}
Comando for
Efetua uma inicialização em seguida executa o comando enquanto a condição for verdadeira, após a execução do
comando executa a expressão de incremento, ex:
 /*
 * for(inicialização; condição; incremento)
 * comando;
 */
 for (var i = 0; i < 3; i++)
 alert(i);
 //É equivalente a:
 var i = 0;
 while (i < 3) {
 alert(i);
 i = i + 1;
 }
Fluxo de Controle 14
Comando label
O label permite que a indicação de uma posição que pode ser utilizado com continue e break para salto dentro
de um loop (laço).
label:
Comando continue
Salta para loop ou para loop que está após label indicado.
continue;
continue label;
Comando break
Sai fora do loop corrente ou do loop que esta após label informado.
break;
break label;
Comando throw
Lança exceção.
throw expressão;
Comando try
Captura qualquer erro que um comando lance e captura exceções conforme expressão.
Abaixo o comando2 será executado caso comando1 lance uma exceção.
try {
 comando1;
} catch(e) {
 comando2;
}
Abaixo o comando3 será executado caso a exceção lançada pelo comando1 seja igual a expressão1, se for
igual a expressão2 o comando4 será executado, se for lançado uma exceção que não seja igual nem a
expressão1 e nem a expressão2 será executado o comando2;
try {
 comando1;
} catch(e if e == expressao1) {
 comando3;
} catch(e if e == expressão2) {
 comando4;
} catch(e) {
 comando2;
}
Executa comando1 se este lançar uma exceção executa comando2 em seguida comando3, se comando1 não
lançar nenhuma exceção executa comando3;
Fluxo de Controle 15
try {
 comando1;
} catch(e) {
 comando2;
} finally {
 comando3;
}
Exemplo:
var x = [["adao"], ["eva"], ["caim"], ["abel"]];
for (i = 0; i < 100; i++) {
 try {
 document.writeln("x[", i, "][0] = ", x[i][0], "<br />");
 } catch (e) {
 document.writeln(e, "<br />");
 break;
 }
}
Observação: no exemplo acima, caso x fosse um vetor (Array de uma dimensão), não haveria erro, mas o loop
continuaria, apresentando x[4] = undefined, x[5] = undefined, e assim por
diante.
Funções
As funções são declaradas pela palavra reservada function (palavra-chave, keyword), seguido:
1. Do Identificador (assim o nome de uma variável);
2. da lista de argumentos (list of arguments) — delimitados por parênteses e separados por vírgula: (/*
argumentos */);
3. das instruções (bloco de instruções, ou código; corpo da função), delimitado por chaves: {/* instruções
*/}.
Referências: [1] .
Exemplo:
function identificador (argumento1, argumento2, argumento3 /*, ... */) {
 //Instruções; corpo da função.
}
Uma sintaxe alternativa é demonstrada abaixo.
var identificador = new function(argumento1, argumento2, argumento3 /*,
 ... */) {
 //Instruções; corpo da função.
};
Funções 16
Funções predefinidas segundo o padrão ECMA 262
Versão consultada: 5.1 [2] .
•• Array.prototype.concat
•• Array.prototype.constructor
•• Array.prototype.every
•• Array.prototype.filter
•• Array.prototype.forEach
•• Array.prototype.indexOf
•• Array.prototype.join
•• Array.prototype.lastIndexOf
•• Array.prototype.map
•• Array.prototype.pop
•• Array.prototype.push
•• Array.prototype.reduce
•• Array.prototype.reduceRight
•• Array.prototype.reverse
•• Array.prototype.shift
•• Array.prototype.slice
•• Array.prototype.some
•• Array.prototype.sort
•• Array.prototype.splice
•• Array.prototype.toLocaleString
•• Array.prototype.toString
•• Array.prototype.unshift
•• Boolean.prototype.constructor
•• Boolean.prototype.toString
•• Boolean.prototype.valueOf
•• Date.prototype.constructor
•• Date.prototype.getDate
•• Date.prototype.getDay
•• Date.prototype.getFullYear
•• Date.prototype.getHours
•• Date.prototype.getMilliseconds
•• Date.prototype.getMinutes
•• Date.prototype.getMonth
•• Date.prototype.getSeconds
•• Date.prototype.getTime
•• Date.prototype.getTimezoneOffset
•• Date.prototype.getUTCDate
•• Date.prototype.getUTCDay
•• Date.prototype.getUTCFullYear
••Date.prototype.getUTCHours
•• Date.prototype.getUTCMilliseconds
•• Date.prototype.getUTCMinutes
•• Date.prototype.getUTCMonth
•• Date.prototype.getUTCSeconds
•• Date.prototype.getYear
Funções 17
•• Date.prototype.setDate
•• Date.prototype.setFullYear
•• Date.prototype.setHours
•• Date.prototype.setMilliseconds
•• Date.prototype.setMinutes
•• Date.prototype.setMonth
•• Date.prototype.setSeconds
•• Date.prototype.setTime
•• Date.prototype.setUTCDate
•• Date.prototype.setUTCFullYear
•• Date.prototype.setUTCHours
•• Date.prototype.setUTCMilliseconds
•• Date.prototype.setUTCMinutes
•• Date.prototype.setUTCMonth
•• Date.prototype.setUTCSeconds
•• Date.prototype.setYear
•• Date.prototype.toDateString
•• Date.prototype.toGMTString
•• Date.prototype.toISOString
•• Date.prototype.toJSON
•• Date.prototype.toLocaleDateString
•• Date.prototype.toLocaleString
•• Date.prototype.toLocaleTimeString
•• Date.prototype.toString
•• Date.prototype.toTimeString
•• Date.prototype.toUTCString
•• Date.prototype.valueOf
•• Error.prototype.constructor
•• Error.prototype.message
•• Error.prototype.name
•• Error.prototype.toString
•• Function.prototype.apply
•• Function.prototype.bind
•• Function.prototype.call
•• Function.prototype.constructor
•• Function.prototype.toString
•• NativeError.prototype.constructor
•• NativeError.prototype.message
•• NativeError.prototype.name
•• Number.prototype.constructor
•• Number.prototype.toExponential
•• Number.prototype.toFixed
•• Number.prototype.toLocaleString
•• Number.prototype.toPrecision
•• Number.prototype.toString
•• Number.prototype.valueOf
•• Object.prototype.constructor
Funções 18
•• Object.prototype.hasOwnProperty
•• Object.prototype.isPrototypeOf
•• Object.prototype.propertyIsEnumerable
•• Object.prototype.toLocaleString
•• Object.prototype.toString
•• Object.prototype.valueOf
•• RegExp.prototype.constructor
•• RegExp.prototype.exec
•• RegExp.prototype.test
•• RegExp.prototype.toString
•• String.prototype.charAt
•• String.prototype.charCodeAt
•• String.prototype.concat
•• String.prototype.constructor
•• String.prototype.indexOf
•• String.prototype.lastIndexOf
•• String.prototype.localeCompare
•• String.prototype.match
•• String.prototype.replace
•• String.prototype.search
•• String.prototype.slice
•• String.prototype.split
•• String.prototype.substr
•• String.prototype.substring
•• String.prototype.toLocaleLowerCase
•• String.prototype.toLocaleUpperCase
•• String.prototype.toLowerCase
•• String.prototype.toString
•• String.prototype.toUpperCase
•• String.prototype.trim
•• String.prototype.valueOf
•• (Objeto global) eval (x)
•• (Objeto global) parseInt (string , radix)
•• (Objeto global) parseFloat (string)
•• (Objeto global) isNaN (number)
•• (Objeto global) isFinite (number)
Tarefa: Completar a lista (faltam objetos como Math...) e melhorar o script que pega objetos e suas funções...
Observações: Para conseguir esta lista, visite a versão em HTML da documentação do padrão ECMA 262, e execute
o seguinte script.
//... fazer o script ;)
Funções 19
Referências
[1] MDN: https:/ / developer. mozilla. org/ en-US/ docs/ Web/ JavaScript/ Guide/ Functions — Funções.
[2] http:/ / www. ecma-international. org/ ecma-262/ 5. 1/
Objetos
Definição de Objeto
Podem ser declarados com propriedades e valores delimitados por chaves {}, ou através de funções.
Exemplo:
var pessoa = {
 nome: "Sérgio",
 altura: 1.72,
 nascimento: new Date(1969,1,4)
};
Ou então:
function objetoPessoa() {
 this.nome = "Sérgio";
 this.altura = 1.72;
 this.nascimento = new Date(1969,1,4)
}
var pessoa = new objetoPessoa();
Observações: O parâmetro de mês na criação do objeto Date inicia com 0; ou seja, 1 significa Fevereiro.
Para acessar qualquer atributo do objeto, basta informar o nome do objeto seguido por seu atributo após um ponto
(.).
Exemplo:
alert(pessoa.nome);
alert(pessoa.altura);
alert(pessoa.nascimento);
Também podem-se atribuir métodos a objetos, da seguinte forma:
function mostrePessoa() {
 alert(this.nome + "\n" + this.altura + "\n" + this.nascimento);
}
var pessoa = {
 nome: "Sergio",
 altura: 1.72,
 nascimento: new Date(1969,1,4),
 mostre: mostrePessoa
};
pessoa.mostre();
pessoa.nome = "eduardo";
Objetos 20
pessoa.altura = 1.78;
pessoa.nascimento = new Date(1975, 6, 25);
pessoa.mostre();
Métodos também podem ser atribuídos diretamente no objeto, sem a necessidade de especificar primeiro a função.
var pessoa = {
 nome: "Sergio",
 altura: 1.72,
 nascimento: new Date(1969,1,4),
 mostre: function(){
 alert(this.nome + "\n" + this.altura + "\n" + this.nascimento);
 }
};
pessoa.mostre();
pessoa.nome = "eduardo";
pessoa.altura = 1.78;
pessoa.nascimento = new Date(1975, 6, 25);
pessoa.mostre();
Propriedades
Pode-se acrescentar métodos especiais para tratamento das operações de get e de set, exemplo :
 var conta={
 valor:0,
 set deposito(x) {
 this.valor += x;
 },
 set saque(x) {
 this.valor -= x;
 },
 get provisao() {
 return this.valor/4;
 }
 };
 conta.deposito = 100;
 conta.saque = 50;
 alert("provisão = " + conta.provisao + "\n saldo = " + conta.valor);
Objetos 21
Objetos predefinidos
Existem uma serie de objetos que já estão definidos para o desenvolvedor, este objetos são largamente utilizados na
linguagem, e são fundamentais para interação com os sistemas.
Array
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 &lt; 1.3) ou 3 (JS ≥ 1.3) e m/["sergio",
 "eduardo", "rodrigues"]
Objetos 22
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"]
23
Outras informações
Autores
Os usuários citados abaixo contribuiram para o desenvolvimento deste trabalho. Estes dados foram obtidos em
29/11/2013.
•• 139.82.111.103
•• 143.54.47.6
•• 186.252.179.139
•• 187.102.105.169
•• 187.79.72.233
•• 187.90.91.1
•• 189.24.181.228
•• 189.30.26.114
•• 189.99.126.115
•• 200.129.179.179
•• 200.136.214.104
•• 200.139.136.105
•• 200.152.197.2
•• 200.158.142.22
•• 200.160.248.50
•• 200.168.66.254
•• 200.177.104.99
•• 200.193.47.193
•• 200.194.101.18
•• 200.196.241.66
•• 200.251.177.107
•• 201.0.243.63
•• 201.1.1.79
•• 201.18.17.50
•• 201.19.116.102
•• 201.21.20.227
•• 201.22.140.203
•• 201.31.99.130
•• 201.35.64.150
•• 201.44.226.130
•• 201.68.231.104
•• 79.27.228.190
•• 83.132.93.100
•• 89.155.31.122
•• Abacaxi
•• Albmont
•• Alguém
•• Atoj
Autores 24
•• Belegurth
•• Dante Cardoso Pinto de Almeida
•• Edudobay
•• Guiwp
•• Helder.wiki
•• Helder.wiki.bot
•• JackPotte
•• Jml3
•• Jorge Morais
•• KnowledgeSeeker017
•• LeonardoG
•• LeonardoRob0t
•• Lightningspirit
•• Luís Felipe Braga
•• Makiyto
•• Marcos Antônio Nunes de Moura
•• MGFE Júnior
•• NunoAgostinho
•• PatiBot
•• Raylton P. Sousa
•• SallesNeto BR
•• Seduardo
•• Treas25
•• Wikimi-dhiann
Referências 25
Referências
Este módulo tem a seguinte tarefa pendente: Talvez deva ser renomeado para Ligações externas.
• Codecademy [1] — curso de JavaScript.
• Tutorial de JavaScript [2] — em Português e Inglês.
• The JavaScript Programming Language [3] — uma série de apresentações produzidas por Douglas Crockford do
Yahoo (Em Inglês).
• JavaScript Tutorial [4] — curso online de JavaScript (W3Schools - Em Inglês).
• JScript [5] — versão da Microsoft do JavaScript, usado no Internet Explorer (Em Inglês).
• JavaScript [6] — página de JavaScript da fundação Mozilla (Em Inglês).
• Standard ECMA-262 [7] — especificação oficial do JavaScript (Em Inglês).
• Exemplos do Javascript [8] — diversos códigos de exemplo (em espanhol).
• Guia Javascript da fundação Mozilla [9] — um bom guia de javascript em Inglês.
• Programação baseada em classe vs. Programação baseada em protótipo [10] — essencial para quem está
acostumado com o paradigma da programação orientada a objeto, o texto está em Inglês.
• Uma Re-Introdução ao Javascript (inglês) [11].
• Definição do Javascript [7] — definição do javascript pela ecma, orgão europeu de padronização.
• Javascript projeto Mozilla [12] — referência a tecnologia javascript pelo projeto mozilla.
• Definição XMLHttpRequest [13] — definição de XMLHttpRequest pelo mozilla.
• Javascript Microsoft [14] — página inicial de javascript na MSDN.
Referências
[1] http:/ / www. codecademy. com/ pt/ tracks/ javascript
[2] http:/ / www. javascript-tutorial. com. br
[3] http:/ / 101out. com/ js. php
[4] http:/ / www. w3schools. com/ js/ default. asp
[5] http:/ / msdn. microsoft. com/ library/ default. asp?url=/ library/ en-us/ script56/ html/ js56jsoriJScript. asp
[6] http:/ / www. mozilla. org/ js/
[7] http:/ / www. ecma-international. org/ publications/ standards/ Ecma-262. htm
[8] http:/ / www. mis-algoritmos. com/ ejemplos/ javascript. ejemplos. html
[9] http:/ / developer. mozilla. org/ en/ docs/ Core_JavaScript_1. 5_Guide
[10] http:/ / developer. mozilla. org/ en/ docs/ Core_JavaScript_1. 5_Guide:Class-Based_vs. _Prototype-Based_Languages
[11] https:/ / developer. mozilla. org/ en/ a_re-introduction_to_javascript
[12] http:/ / www. mozilla. org/ js
[13] http:/ / kb. mozillazine. org/ XMLHttpRequest
[14] http:/ / msdn. microsoft. com/ library/ default. asp?url=/ library/ en-us/ dninvbs/ html/ scriptinglanguages. asp
Ligações externas 26
Ligações externas
• http:/ / en. wikipedia. org/ wiki/ Duck_typing
• http:/ / www. w3. org/ DOM
• http:/ / www. tizag. com/ javascriptT/ javascriptform. php
• http:/ / www. webcheatsheet. com/ javascript/ form_validation. php
• http:/ / 101out. com/ js. php
• http:/ / developer. mozilla. org/ en/ docs/ Core_JavaScript_1. 5_Guide
• http:/ / developer. mozilla. org/ en/ docs/ Core_JavaScript_1. 5_Guide:Class-Based_vs.
_Prototype-Based_Languages
• http:/ / kb. mozillazine. org/ XMLHttpRequest
• http:/ / msdn. microsoft. com/ library/ default. asp?url=/ library/ en-us/ script56/ html/ js56jsoriJScript. asp
• http:/ / msdn. microsoft. com/ library/ default. asp?url=/ library/ en-us/ dninvbs/ html/ scriptinglanguages. asp
• http:/ / www. codecademy. com/ pt/ tracks/ javascript
• http:/ / www. ecma-international. org
• http:/ / www. ecma-international. org/ publications/ standards/ Ecma-262. htm
• http:/ / www. javascript-tutorial. com. br
• http:/ / www. mis-algoritmos. com/ ejemplos/ javascript. ejemplos. html
• http:/ / www. mozilla. org/ js
• http:/ / www. mozilla. org/ js/
• http:/ / www. w3schools. com/ js/ default. asp
• https:/ / developer. mozilla. org/ en/ a_re-introduction_to_javascript
Fontes e Editores da Página 27
Fontes e Editores da Página
Prefácio  Fonte: http://pt.wikibooks.org/w/index.php?oldid=265143  Contribuidores: Guiwp
Introdução  Fonte: http://pt.wikibooks.org/w/index.php?oldid=261998  Contribuidores: Abacaxi, Albmont, Belegurth, Guiwp, JackPotte, KnowledgeSeeker017, LeonardoRob0t, Marcos Antônio
Nunes de Moura, Raylton P. Sousa, Seduardo, 4 edições anónimas
Tipos de dados  Fonte: http://pt.wikibooks.org/w/index.php?oldid=264676  Contribuidores: Abacaxi, Albmont, Alguém, Belegurth, Dante Cardoso Pinto de Almeida, Guiwp, JackPotte,
LeonardoRob0t, Marcos Antônio Nunes de Moura, Raylton P. Sousa, SallesNeto BR, Seduardo, 11 edições anónimas
Conversão de Tipos  Fonte: http://pt.wikibooks.org/w/index.php?oldid=264632  Contribuidores: Abacaxi, Albmont, Alguém, Belegurth, Guiwp, Jorge Morais, LeonardoRob0t, Marcos Antônio
Nunes de Moura, Raylton P. Sousa, Seduardo, 9 edições anónimas
Variáveis  Fonte: http://pt.wikibooks.org/w/index.php?oldid=265128  Contribuidores: Abacaxi, Guiwp, JackPotte, LeonardoRob0t, Raylton P. Sousa, Seduardo, 2 edições anónimas
Operadores  Fonte: http://pt.wikibooks.org/w/index.php?oldid=264672  Contribuidores: Abacaxi, Albmont, Alguém, Guiwp, JackPotte, LeonardoRob0t, Raylton P. Sousa, Seduardo
Fluxo de Controle  Fonte: http://pt.wikibooks.org/w/index.php?oldid=264642  Contribuidores: Abacaxi, Guiwp, JackPotte, LeonardoRob0t, Raylton P. Sousa, Seduardo
Funções  Fonte: http://pt.wikibooks.org/w/index.php?oldid=265141  Contribuidores: Abacaxi, Alguém, Guiwp, JackPotte, LeonardoRob0t, Makiyto, NunoAgostinho, Raylton P. Sousa,
Seduardo, 1 edições anónimas
Objetos  Fonte: http://pt.wikibooks.org/w/index.php?oldid=264684  Contribuidores:Abacaxi, Guiwp, JackPotte, LeonardoRob0t, Raylton P. Sousa, Seduardo, 1 edições anónimas
Autores  Fonte: http://pt.wikibooks.org/w/index.php?oldid=264901  Contribuidores: Abacaxi, Guiwp, LeonardoRob0t, Lightningspirit, Raylton P. Sousa, Seduardo, 1 edições anónimas
Referências  Fonte: http://pt.wikibooks.org/w/index.php?oldid=261993  Contribuidores: Abacaxi, Alguém, Guiwp, Helder.wiki, LeonardoRob0t, Raylton P. Sousa, Seduardo
Ligações externas  Fonte: http://pt.wikibooks.org/w/index.php?oldid=262399  Contribuidores: Guiwp
Fontes, Licenças e Editores da Imagem 28
Fontes, Licenças e Editores da Imagem
Imagem:Crystal_Clear_app_kaddressbook.png  Fonte: http://pt.wikibooks.org/w/index.php?title=Ficheiro:Crystal_Clear_app_kaddressbook.png  Licença: GNU Free Documentation License
 Contribuidores: CyberSkull, It Is Me Here, Rocket000
Licença 29
Licença
Creative Commons Attribution-Share Alike 3.0
//creativecommons.org/licenses/by-sa/3.0/