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: Tue, 01 Oct 2013 18:34:33 UTC
Javascript
Conteúdo
Páginas
Prefácio 1
Introdução 1
Capítulo 1 - Tipos de dados 3
Tipos de dados 3
Capítulo 2 - Conversão de Tipos 5
Conversão de Tipos 5
Capítulo 3 - Variáveis 6
Variáveis 6
Capítulo 4 - Operadores 10
Operadores 10
Capítulo 5 - Fluxo de Controle 12
Fluxo de Controle 12
Capítulo 6 - Funções 16
Funções 16
Capítulo 7 - Objetos 32
Objetos 32
Outras informações 36
Autores 36
Referências 36
Ligações externas 37
Referências
Fontes e Editores da Página 38
Fontes, Licenças e Editores da Imagem 39
Licenças das páginas
Licença 40
Prefácio 1
Prefácio
alert("Olá JavaScript!");
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.
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");
</script>
O resultado esperado são duas linhas:
Hello, world!
Introdução 2
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
Capítulo 1 - Tipos de dados
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 />");
5
Capítulo 2 - Conversão de Tipos
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 pontoflutuante:
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
6
Capítulo 3 - Variáveis
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, 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.
Exemplo 1 (variável pública):
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
Exemplo 2 (variável privada):
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
• frutas[3] igual a "pera"
Variáveis 8
• 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 (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)
\0NNN Caracter ASCII (NN representa um valor octal de 000 a 0377)
\' Apóstrofe
\" Aspas
\\ Barra inversa
10
Capítulo 4 - Operadores
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.
Operadores 11
• propriedade 'in objeto: retorna true caso a propriedade esteja contida no objeto.
• objeto instanceof TipoDoObjeto: retorna true caso o objetoseja de determinado tipo.
• typeof(objeto): retorna string contendo o tipo do objeto.
• new TipoDoObjeto(p1, ...): cria uma instância do objeto.
• 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.
12
Capítulo 5 - Fluxo de Controle
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:
{
 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)
Fluxo de Controle 13
 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.
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;
Fluxo de Controle 14
 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;
 }
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;
Fluxo de Controle 15
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;
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.
16
Capítulo 6 - Funções
Funções
As funções são declaradas pela palavra reservada function seguido pelo identificador seguido por parâmetros
delimitados por ( abre parêntesis e ) fecha parêntesis, e do corpo dela que é delimitado por { abre chave e }
fecha chave.
Exemplo:
function quadrado(x) {
 return x*x;
}
Além desse método convencional para a declaração de uma função em JavaScript, poderiam ser usados outros
métodos não triviais mas não menos importantes e úteis no dia a dia do programador web. Por exemplo, seguem
algumas sintaxes para declaração da mesma função.
quadrado = new function(x) {
 return x*x;
}
Funções predefinidas
Função Descrição
atob(base64) Converte um texto codificado em base64 para binário. Função inversa ao btoa(texto).
btoa(texto) Converte um texto para base64. Função inversa ao atob(base64).
decodeURI(url) Função inversa ao encodeURI
decodeURIComponent(url) Função inversa ao encodeURIComponent
isFinite(valor) Identifica se o numero é finito.
isNaN(valor) Identifica se o valor não é um numero.
encodeURI(url) Como o escape ele faz substituições no texto para compatibilizar transferência em links, mas não faz
conversão para os caracteres !*()'.
encodeURIComponent(url) Como o escape ele faz substituições no texto para compatibilizar transferência em links, mas não
faz conversão para os caracteres !@#$&*()=:/;?+'.
escape(url) Ajusta URL para que possa ser passada em chamadas e links, convertendo os caracteres especiais
para formato hexadecimal e espaço para o sinal de +, não faz mudança nos caracteres @*/+ que
ficam inalterados.
eval(expressao) Interpreta expressão de JavaScript (ex.: eval("1+2"), resultado igual a 3).
parseInt(String) ou
parseInt(String, base)
Converte a String num valor inteiro, ou converteuma String na base passada para inteiro.
Number(objeto) Converte a string num valor ponto flutuante.
parseFloat(String) Converte a string num valor ponto flutuante.
String(objeto) Retorna a representação String do objeto.
unescape(url) Função inversa ao escape(url).
Funções 17
Exemplos práticos
Retirados do Editor de JavaScript 1st JavaScript Editor.
Browser code name
<script language='JavaScript' type='text/JavaScript'>
//Made by 1st JavaScript Editor
//http://www.yaldex.com
document.write('<p align=\'center\'><B>'+navigator.appCodeName+'</B></P>');
</script>
Browser language
document.write("<p align='center'><b>");
if (document.all){document.write(navigator.browserLanguage);}
else{document.write(navigator.language)}
document.write("</b></p>");
Browser Name
document.write('<p align=\'center\'><B>'+navigator.appName+'</B><P>');
Browser versão
document.write('<p align=\'center\'><B>'+navigator.appVersion+'</B></P>');
Color Depth
function twentieth() {return (screen.colorDepth);}document.write('<b>Your 
screen is currently using ' +
twentieth() + 'bit colour.</b>');
Screen Resolução
var fifteenth=0; var sixteenth=0;
if (self.screen) { sixteenth = screen.width;fifteenth = 
screen.height}
else if (self.java) { var jkit = 
java.awt.Toolkit.getDefaultToolkit();
var scrsize = jkit.getScreenSize();sixteenth = scrsize.width;fifteenth 
= scrsize.height; }
document.writeln('<p align=\'center\'>');
if (sixteenth > 0 && fifteenth > 0) {document.writeln('Screen Resolution:
 ',sixteenth,' x ',fifteenth); }
else {document.writeln('Your screen resolution cannot be determined');}
document.writeln('</p>');
Funções 18
Adicionar aos favoritos
<a href="javascript:window.external.AddFavorite(document.location,'');">Add to Favorites!</a>
Botões coloridos'
<head>
<style type="text/css">
.initial2{
 font-weight:bold;
 background-color:red;
 font-family: Verdana, Arial, Helvetica, sans-serif;
}
</style>
<script type="text/javascript">
var fifteenth="";
function sixteenth(seventeenth, nineteenth){var twentieth=window.event?
 event.srcElement: seventeenth.target;
if 
(twentieth.tagName="INPUT"&&twentieth.type="button")twentieth.style.backgroundColor=nineteenth;}
function third2(fourth2){
if (fifteenth="")window.location=fourth2;
else if (fifteenth="_new")window.open(fourth2);
else parent[fifteenth].location=fourth2;}
</script>
 <title></title>
</head>
<body>
<form onMouseover="sixteenth(event, 'yellow')" onMouseout="sixteenth(event, 'red')">
 <input type="button" value="Get More Products!" class="initial2" onClick="third2('http://yaldex.com')">
</form>
</body>
Link para e-mail
<a href ='mailto:support@yaldex.com?subject=enter subject here &cc=another@youremail.com'>Email Me!</a>
Tornar sua Página Inicial
<a href="#" onClick="this.style.behavior='url(#default#homepage)';
this.setHomePage(document.location);">Click here to make this page your 
starting page.</a>
Link Descrição on MouseOver
function fifteenth(sixteenth, seventeenth) {var 
eighteenth,nineteenth,twentieth;
if(!seventeenth) seventeenth=document;
if((eighteenth=sixteenth.indexOf('?'))>0&&parent.frames.length) {
seventeenth=parent.frames[sixteenth.substring(eighteenth+1)].document;
Funções 19
sixteenth=sixteenth.substring(0,eighteenth);
}
if(!(twentieth=seventeenth[sixteenth])&&seventeenth.all) 
twentieth=seventeenth.all[sixteenth];
 for (nineteenth=0;!twentieth&&nineteenth<seventeenth.forms.length;nineteenth++)
twentieth=seventeenth.forms[nineteenth][sixteenth];
for(nineteenth=0;!twentieth&&seventeenth.layers&&nineteenth<seventeenth.layers.length;
nineteenth++) 
twentieth=fifteenth(sixteenth,seventeenth.layers[nineteenth].document);
if(!twentieth && seventeenth.getElementById) 
twentieth=seventeenth.getElementById(sixteenth);
return twentieth;}
function first2(second2,twentieth,third2,fourth2) { var fifth2 = 
fifteenth(second2);
if (fifth2 && (third2.indexOf('style.')=-1 || fifth2.style)){
if (fourth2 = true || fourth2 = 
false)eval('fifth2.'+third2+'='+fourth2);
else eval("fifth2."+third2+"='"+fourth2+"'");}}
Botão Imprimir
<form>
 <input type=button value='Imprimir' onClick='javascript:window.print()'>
</form>
Reload Página
<a href='JavaScript:window.location.reload()'>Click to Reload!</a>
Relógio com Barras Coloridas
<head>
<style type='text/css'>
TH {text-align:right};SPAN {vertical-align:bottom};
</style>
<script language='JavaScript'>
var fifteenth = new Date();var sixteenth = 6;var seventeenth = 3;
function eighteenth() {
 with(document.all) {
 
nineteenth.style.setExpression('width','fifteenth.getHours() * 
sixteenth * seventeenth','jscript');
 
twentieth.setExpression('innerHTML','fifteenth.getHours()','jscript');
 
first2.style.setExpression('width','fifteenth.getMinutes() * 
sixteenth','jscript');
 
second2.setExpression('innerHTML','fifteenth.getMinutes()','jscript');
Funções 20
 
third2.style.setExpression('width','fifteenth.getSeconds() * 
sixteenth','jscript');
 
fourth2.setExpression('innerHTML','fifteenth.getSeconds()','jscript')
 }
 fifth2();
}
function fifth2() {
 fifteenth = new Date();
 document.recalc();
 setTimeout('fifth2()',1000);
}
window.onload=eighteenth;
</script>
<title></title>
</head>
<body>
<TABLE BORDER=0><TR> <TH>Hours:</TH> <TD>
<SPAN ID='nineteenth' STYLE='background-color:red'></SPAN>&nbsp;
<SPAN ID='twentieth'></SPAN></TD></TR><TR>
<TH>Minutes:</TH> <TD>
<SPAN ID='first2' STYLE='background-color:yellow'></SPAN>&nbsp;
<SPAN ID='second2'></SPAN></TD></TR><TR>
<TH>Seconds:</TH> <TD>
<SPAN ID='third2' STYLE='background-color:#00FF40'></SPAN>&nbsp;
<SPAN ID='fourth2'></SPAN></TD></TR></TABLE>
</body>
Data Atual
var data=new Date();
var ano=data.getFullYear();
var dia=data.getDay();
var mes=data.getMonth()+1;
if (mes<10)mes='0'+mes;var hoje=data.getDate();
if (hoje<10)hoje='0'+hoje;
document.write('<code>'+hoje+'/'+mes+'/'+ano+'</code>');
Calendário do ano
function fifteenth(sixteenth) {document.write('<TD ALIGN=center WIDTH=36>'+sixteenth+'</TD>');
}function seventeenth(eighteenth,nineteenth) {
if ((twentieth = eighteenth) && (first2 = 
nineteenth))document.write('<FONT COLOR=\'#FF000f\'>');
}function second2(third2) {this.length=third2;
Funções 21
for (var fourth2 = 1;
fourth2 <= third2; fourth2++)this[fourth2] = 0;
return this;
}function fifth2(sixth2,fifteenth3,nineteenth) {eighteenth=1;
document.write('<center><TABLE BORDER=3 CELLSPACING=3 CELLPADDING=%3><TR>');
document.write('<TD COLSPAN=7 ALIGN=center><B>'+sixth2+' '+sixteenth3+'</B><TR>');
fifteenth('Sun');
fifteenth('Mon');
fifteenth('Tue');
fifteenth('Wed');
fifteenth('Thu');
fifteenth('Fri');
fifteenth('Sat');
document.write('</TR><TR>');
for (var fourth2=1;
fourth2<seventeenth3;
fourth2++) {document.write('<TD>');
}for (var fourth2=seventeenth3;
fourth2<8;
fourth2++) {document.write('<TD ALIGN=center>');
seventeenth(eighteenth,nineteenth);
document.write(eighteenth+"</TD><FONT COLOR='#000000'>");
eighteenth++;
}document.write('<TR>');
while (eighteenth <= fifteenth3) {for (var fourth2=1;
fourth2<=7 && eighteenth<=fifteenth3;
fourth2++) {document.write('<TD ALIGN=center>');
seventeenth(eighteenth,nineteenth);
document.write(eighteenth+"</TD><FONT COLOR='#000000'>");
eighteenth++;
}document.write('</TR><TR>');
}document.write('</TR></TABLE></center><BR>');
seventeenth3 = fourth2;
}eighteenth3=new second2(12);
eighteenth3[1]='January';eighteenth3[2]='February';
eighteenth3[3]='March';
eighteenth3[4]='April';
eighteenth3[5]='May';
eighteenth3[6]='June';
eighteenth3[7]='July';
eighteenth3[8]='August';
eighteenth3[9]='September';
eighteenth3[10]='October';
eighteenth3[11]='November';
eighteenth3[12]='December';
nineteenth3 = new second2(12);
Funções 22
nineteenth3[1]=31;
nineteenth3[2]=28;
nineteenth3[3]=31;
nineteenth3[4]=30;
nineteenth3[5]=31;
nineteenth3[6]=30;
nineteenth3[7]=31;
nineteenth3[8]=31;
nineteenth3[9]=30;
nineteenth3[10]=31;
nineteenth3[11]=30;
nineteenth3[12]=31;
twentieth3 = new Date();
twentieth = twentieth3.getDate();
first2 = twentieth3.getMonth()+1;
sixteenth3 = twentieth3.getFullYear();
first4 = new Date('January 1, 19'+sixteenth3);
seventeenth3 = first4.getDay()+1;
if (seventeenth3 = 1){ seventeenth3 = 8;
}for (var second4 = 1;
second4<=12;
second4++){fifth2(eighteenth3[second4],nineteenth3[second4],second4);
}
Habilitar Botão Submit
<script>
var second2;
function fifteenth(sixteenth){
 second2=sixteenth;
 if (document.all||document.getElementById){
 for (seventeenth=0;
 seventeenth<second2.form.length;seventeenth++){
 var eighteenth=second2.form.elements[seventeenth];
 
if(eighteenth.type.toLowerCase()="submit")eighteenth.disabled=!second2.checked;
 }
 }
}
function first2(sixteenth){if 
(!document.all&&!document.getElementById){
 if (window.second2&&second2.checked)return true;
 else{
 alert("Please accept terms to submit form");return 
false;
 }
 }
Funções 23
}
</script>
<title></title>
</head>
<body>
<form name="agrform" onSubmit="return first2(this)">Remainder of your form here<br>
 <input name="agrcheck" type="checkbox" onClick="fifteenth(this)"><b>I agree to these terms</b><br>
 <input type="Submit" value="Submit" disabled>
</form>
<script>
document.forms.agrform.agrcheck.checked=false;
</script>
Desabilitar Enter
<script language="javascript" type="text/javascript">
function fifteenth (sixteenth, event) {
 var seventeenth = event.keyCode ? event.keyCode : event.which ? 
event.which : event.charCode;
 if (seventeenth = 13) { var eighteenth;
 for (eighteenth = 0; eighteenth < sixteenth.form.elements.length; eighteenth++)
 if (sixteenth = sixteenth.form.elements[eighteenth])
 break;
 eighteenth = (eighteenth + 1) % 
sixteenth.form.elements.length;
 sixteenth.form.elements[eighteenth].focus();
 return false;
 }
 else
 return true;
}
</script>
<title></title>
</head>
<body>
<form>
 <input type="text" onkeypress="return fifteenth(this, event)"><br>
 <input type="text" onkeypress="return fifteenth(this, event)"><br>
 <textarea>Here is some text</textarea>
</form>
</body>
Funções 24
Background Color
<form method="POST" name="background">
 <input type="button" value="green" onclick="document.bgColor='green'">
 <input type="button" value="blue" onclick="document.bgColor='blue'">
 <input type="button" value="orange" onclick="document.bgColor='orange'">
 <input type="button" value="gray" onclick="document.bgColor='gray'">
 <input type="button" value="red" onclick="document.bgColor='red'">
 <input type="button" value="yellow" onclick="document.bgColor='yellow'">
 <input type="button" value="black" onclick="document.bgColor='black'">
 <input type="button" value="white" onclick="document.bgColor='white'">
</form>
Acesso aos Drives
<form action='file:///a|/'>
 <input type='submit' value='A:\ drive'>
</form><p>
<form action='file:///c|/'>
 <input type='submit' value='C:\ drive'>
</form><p>
<form action='file:///d|/'>
 <input type='submit' value='D:\ drive'>
</form><p>
Última modificação
document.write('Última Modificação ' + document.lastModified);
Detectar Clique com botão Direito
var tenth='';
function ninth() {
 if (document.all) {
 (tenth);
 alert("Enter Your Text Here");
 return false;
 }
}
function twelfth(e) {
 if (document.layers||(document.getElementById&&!document.all)) {
 if (e.which=2||e.which=3) {(tenth);return false;}}}
 if (document.layers) 
{document.captureEvents(Event.MOUSEDOWN);document.onmousedown=twelfth;}
 else{document.onmouseup=twelfth;document.oncontextmenu=ninth;}
 document.oncontextmenu=new Function('alert("Clicou com o 
botão direito"); return false')
</script>
OnLoad - evento que ocorre ao abrir uma página
Funções 25
OnUnload - evento que ocorre ao fechar uma página
OnResize - evento que ocorre ao alterar o tamanho (redimensionar) de uma página
Maximizar ao Abrir
window.moveTo(0,0);
if (document.all) 
{top.window.resizeTo(screen.availWidth,screen.availHeight);}
else if (document.layers||document.getElementById) {
if (top.window.outerHeight<screen.availHeight||top.window.outerWidth<screen.availWidth){
top.window.outerHeight = screen.availHeight;
top.window.outerWidth = screen.availWidth;}}
Validando Formulários
É muito importante a validação de dados entrados pelos usuários com JavaScript, pois torna-se útil aos usuários no
caso de erro, quando não perdem os dados que digitaram. Dependendo de como foi elaborado, a página nem é
submetida e todos os dados são preservador, precisando apenas corrigir o campo errado e submeter novamente.
Também temos de lembrar de validar os mesmos dados em PHP (se for essa a nossa linguagem do lado do servidor),
pois o JavaScript pode estar desativado no navegador do usuário.
function validateFormOnSubmit(theForm) {
var reason = "";
 reason += validateUsername(theForm.username);
 reason += validatePassword(theForm.pwd);
 reason += validateEmail(theForm.email);
 reason += validatePhone(theForm.phone);
 reason += validateEmpty(theForm.from);
 if (reason != "") {
 alert("Some fields need correction:\n" + reason);
 return false;
 }
 return true;
}
function validateEmpty(fld) {
 var error = "";
 if (fld.value.length = 0) {
 fld.style.background = 'Yellow';
 error = "The required field has not been filled in.\n"
 } else {
 fld.style.background = 'White';
 }
 return error;
}
Funções 26
function validateUsername(fld) {
 var error = "";
 var illegalChars = /\W/; // allow letters, numbers, and underscores
 if (fld.value = "") {
 fld.style.background = 'Yellow';
 error = "You didn't enter a username.\n";
 } else if ((fld.value.length < 5) || (fld.value.length > 15)) {
 fld.style.background = 'Yellow';
 error = "The username is the wrong length.\n";
 } else if (illegalChars.test(fld.value)) {
 fld.style.background = 'Yellow';
 error = "The username contains illegal characters.\n";
 } else {
 fld.style.background = 'White';
 }
 return error;
}
function validatePassword(fld) {
 var error = "";
 var illegalChars = /[\W_]/; // allow only letters and numbers
 if (fld.value = "") {
 fld.style.background = 'Yellow';
 error = "You didn't enter a password.\n";
 } else if ((fld.value.length < 7) || (fld.value.length > 15)) {
 error = "The password is the wrong length. \n";
 fld.style.background = 'Yellow';
 } else if (illegalChars.test(fld.value)) {
 error = "The password contains illegal characters.\n";
 fld.style.background= 'Yellow';
 } else if (!((fld.value.search(/(a-z)+/)) && 
(fld.value.search(/(0-9)+/)))) {
 error = "The password must contain at least one numeral.\n";
 fld.style.background = 'Yellow';
 } else {
 fld.style.background = 'White';
 }
 return error;
}
function trim(s)
{
 return s.replace(/^\s+|\s+$/, '');
}
Funções 27
function validateEmail(fld) {
 var error="";
 var tfld = trim(fld.value); // value of 
field with whitespace trimmed off
 var emailFilter = /^[^@]+@[^@.]+\.[^@]*\w\w$/ ;
 var illegalChars= /[\(\)\<\>\,\;\:\\\"\[\]]/ ;
 if (fld.value = "") {
 fld.style.background = 'Yellow';
 error = "You didn't enter an email address.\n";
 } else if (!emailFilter.test(tfld)) { //test email for
 illegal characters
 fld.style.background = 'Yellow';
 error = "Please enter a valid email address.\n";
 } else if (fld.value.match(illegalChars)) {
 fld.style.background = 'Yellow';
 error = "The email address contains illegal characters.\n";
 } else {
 fld.style.background = 'White';
 }
 return error;
}
function validatePhone(fld) {
 var error = "";
 var stripped = fld.value.replace(/[\(\)\.\-\ ]/g, '');
 if (fld.value = "") {
 error = "You didn't enter a phone number.\n";
 fld.style.background = 'Yellow';
 } else if (isNaN(parseInt(stripped))) {
 error = "The phone number contains illegal characters.\n";
 fld.style.background = 'Yellow';
 } else if (!(stripped.length = 10)) {
 error = "The phone number is the wrong length. Make sure you 
included an area code.\n";
 fld.style.background = 'Yellow';
 }
 return error;
}
<html>
<head>
<title>WebCheatSheet - JavaScript Tutorial</title>
</head>
<body>
Funções 28
<h1>WebCheatSheet - JavaScript Tutorial</h1>
<form name="demo" onsubmit="return validateFormOnSubmit(this)" action="test.htm">
<table summary="Demonstration form">
 <tbody>
 <tr>
 <td><label for="username">Your user name:</label></td>
 <td><input name="username" size="35" maxlength="50" type="text"></td>
 </tr>
 <tr>
 <td><label for="pwd">Your password</label></td>
 <td><input name="pwd" size="35" maxlength="25" type="password"></td>
 </tr>
 <tr>
 <td><label for="email">Your email:</label></td>
 <td><input name="email" size="35" maxlength="30" type="text"></td>
 </tr>
 <tr>
 <td><label for="phone">Your telephone number:</label></td>
 <td><input name="phone" size="35" maxlength="25" type="text"></td>
 </tr>
 <tr>
 <td>
 <label for="from">Where are you :</label></td>
 <td><input name="from" size="35" maxlength="50" type="text"></td>
 </tr>
 <tr>
 <td>&nbsp;</td>
 <td><input name="Submit" value="Send" type="submit" ></td>
 <td>&nbsp;</td>
 </tr>
 </tbody>
</table>
</form>
</body>
</html>
Outro exemplo:
<script type='text/javascript'>
function formValidator(){
 // Make quick references to our fields
 var firstname = document.getElementById('firstname');
 var addr = document.getElementById('addr');
 var zip = document.getElementById('zip');
 var state = document.getElementById('state');
Funções 29
 var username = document.getElementById('username');
 var email = document.getElementById('email');
 // Check each input in the order that it appears in the form!
 if(isAlphabet(firstname, "Please enter only letters for your 
name")){
 if(isAlphanumeric(addr, "Numbers and Letters Only for 
Address")){
 if(isNumeric(zip, "Please enter a valid zip code")){
 if(madeSelection(state, "Please Choose a 
State")){
 if(lengthRestriction(username, 6, 8)){
 if(emailValidator(email, "Please 
enter a valid email address")){
 return true;
 }
 }
 }
 }
 }
 }
 return false;
}
function isEmpty(elem, helperMsg){
 if(elem.value.length = 0){
 alert(helperMsg);
 elem.focus(); // set the focus to this input
 return true;
 }
 return false;
}
function isNumeric(elem, helperMsg){
 var numericExpression = /^[0-9]+$/;
 if(elem.value.match(numericExpression)){
 return true;
 }else{
 alert(helperMsg);
 elem.focus();
 return false;
 }
}
function isAlphabet(elem, helperMsg){
Funções 30
 var alphaExp = /^[a-zA-Z]+$/;
 if(elem.value.match(alphaExp)){
 return true;
 }else{
 alert(helperMsg);
 elem.focus();
 return false;
 }
}
function isAlphanumeric(elem, helperMsg){
 var alphaExp = /^[0-9a-zA-Z]+$/;
 if(elem.value.match(alphaExp)){
 return true;
 }else{
 alert(helperMsg);
 elem.focus();
 return false;
 }
}
function lengthRestriction(elem, min, max){
 var uInput = elem.value;
 if(uInput.length >= min && uInput.length <= max){
 return true;
 }else{
 alert("Please enter between " +min+ " and " +max+ " 
characters");
 elem.focus();
 return false;
 }
}
function madeSelection(elem, helperMsg){
 if(elem.value = "Please Choose"){
 alert(helperMsg);
 elem.focus();
 return false;
 }else{
 return true;
 }
}
function emailValidator(elem, helperMsg){
 var emailExp = 
/^[\w\-\.\+]+\@[a-zA-Z0-9\.\-]+\.[a-zA-z0-9]{2,4}$/;
 if(elem.value.match(emailExp)){
Funções 31
 return true;
 }else{
 alert(helperMsg);
 elem.focus();
 return false;
 }
}
</script>
<form onsubmit='return formValidator()' >
First Name: <input type='text' id='firstname' /><br />
Address: <input type='text' id='addr' /><br />
Zip Code: <input type='text' id='zip' /><br />
State: <select id='state'>
 <option>Please Choose</option>
 <option>AL</option>
 <option>CA</option>
 <option>TX</option>
 <option>WI</option>
</select><br />
Username(6-8 characters): <input type='text' id='username' /><br />
Email: <input type='text' id='email' /><br />
<input type='submit' value='Check Form' />
</form>
Ligações externas
• http:/ / www. tizag. com/ javascriptT/ javascriptform. php
• http:/ / www. webcheatsheet. com/ javascript/ form_validation. php
32
Capítulo 7 - Objetos
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ção: 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étodosa 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 33
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 34
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 35
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"]
36
Outras informações
Autores
Esta obra é o resultado da experiência de várias pessoas, que acreditam que a melhor forma do conhecimento é o
conhecimento compartilhado. Arqui temos uma pequena referência a estas pessoas:
•• Sérgio Eduardo Rodrigues
•• Lightningpirit
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
Referências 37
[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
• 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 38
Fontes e Editores da Página
Prefácio  Fonte: http://pt.wikibooks.org/w/index.php?oldid=262269  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=261994  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=261984  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=261939  Contribuidores: Abacaxi, Guiwp, JackPotte, LeonardoRob0t, Raylton P. Sousa, Seduardo, 2 edições anónimas
Operadores  Fonte: http://pt.wikibooks.org/w/index.php?oldid=261991  Contribuidores: Abacaxi, Albmont, Alguém, Guiwp, JackPotte, LeonardoRob0t, Raylton P. Sousa, Seduardo
Fluxo de Controle  Fonte: http://pt.wikibooks.org/w/index.php?oldid=261944  Contribuidores: Abacaxi, Guiwp, JackPotte, LeonardoRob0t, Raylton P. Sousa, Seduardo
Funções  Fonte: http://pt.wikibooks.org/w/index.php?oldid=262100  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=261974  Contribuidores: Abacaxi, Guiwp, JackPotte, LeonardoRob0t, Raylton P. Sousa, Seduardo, 1 edições anónimas
Autores  Fonte: http://pt.wikibooks.org/w/index.php?oldid=262397  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 39
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 40
Licença
Creative Commons Attribution-Share Alike 3.0
//creativecommons.org/licenses/by-sa/3.0/