Introdução ao JavaScript

Prévia do material em texto

JavaScript
Conteúdo
0.1 Prefácio . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1
0.2 Introdução . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1
0.2.1 História . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1
0.2.2 Portabilidade e usos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1
0.2.3 Suporte a JavaScript no navegador . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1
0.2.4 Referências . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2
1 Conhecendo a linguagem 3
1.1 Variáveis . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
1.1.1 Definição da variável . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
1.1.2 Escopo da variável . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
1.1.3 Constantes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
1.1.4 Arranjos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4
1.1.5 Numéricas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5
1.1.6 Strings . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5
1.1.7 Tipos de dados . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5
1.1.8 Conversão de Tipos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6
1.1.9 Referências . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7
1.2 Operadores . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7
1.2.1 Mudança do conteúdo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7
1.2.2 Comparação . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7
1.2.3 Aritméticos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7
1.2.4 Lógicos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7
1.2.5 A nível de bit (bitwise) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7
1.2.6 Especiais . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7
1.3 Controle de fluxo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7
1.3.1 Bloco de comandos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7
1.3.2 Comando If . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7
1.3.3 Comando While . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7
1.3.4 Comando Switch . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8
1.3.5 Comando for . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8
1.3.6 Comando label . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8
1.3.7 Comando continue . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8
i
ii CONTEÚDO
1.3.8 Comando break . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8
1.3.9 Comando throw . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8
1.3.10 Comando try . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8
1.4 Funções . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8
1.4.1 Referências . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9
1.5 Objetos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9
1.5.1 Definição de Objeto . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9
1.5.2 Propriedades . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9
1.6 Expressões regulares . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9
1.6.1 Sintaxe . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9
1.6.2 Atributos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9
1.6.3 Métodos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9
1.6.4 Referências . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9
2 Avançado 10
2.1 Ajax . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10
2.1.1 Atributos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10
2.1.2 Métodos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10
2.1.3 Eventos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10
2.2 Funções e objetos predefinidos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11
2.2.1 Funções predefinidas segundo o padrão ECMA 262 . . . . . . . . . . . . . . . . . . . . . 11
2.2.2 Referências . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13
3 Anexo 14
3.1 Dicas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14
3.1.1 JavaScript Rotinas Diversas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14
3.2 Autores . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18
3.2.1 Após a fusão feita em 16/12/2013 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18
3.2.2 Após a fusão feita em 16/12/2013 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18
3.3 Ligações externas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18
3.3.1 Ferramentas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18
3.3.2 Outros recursos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19
3.3.3 Tópicos relacionados . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19
4 Fontes, contribuidores e licenças de texto e imagem 20
4.1 Texto . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20
4.2 Imagens . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20
4.3 Licença . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20
0.2. INTRODUÇÃO 1
0.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).
Os autores deste livro esperam ter dado uma pequena
contribuição para a disseminação desta linguagem script.
Que esse livro possa tornar a vida mais fácil para progra-
madores que necessitam tornar suas páginas mais inteli-
gentes.
0.2 Introdução
Muito se fala sobre JavaScript, porém existe muito
pouca documentação em português desta linguagem de
programação.
É comum a confusão que se faz entre a linguagem Java
e o JavaScript, embora sejam parecidas (são linguagens
de propósito geral), são linguagens distintas, tem focos
diferentes. Uma observação muito comum é notar que a
linguagem Java é fortemente tipada, enquanto que JavaS-
cript não.
A JavaScript é uma linguagem pequena, leve e portável
(está disponível em vários navegadores e plataformas).
0.2.1 História
Brendan Eich, criador da linguagem JavaScript [1]. Hoje,
desenvolvida com apoio de milhares de pessoas.
De “Mocha” para “LiveScript”, de “LiveScript” para “Ja-
vaScript” [1]. Mas por que?Bem, em 1995 a empresa Sun Microsystems trou-
xera uma nova linguagem de programação denominada
“Java”. Esta linguagem se tornou popular rapidamente.
Devido a esta popularidade a empresa Netscape (criadora
da linguagem JavaScript, e do atual Mozilla firefox) de-
cidiu nomear sua linguagem script para World Wide Web
(teia mundial) para algo semelhante, Java + Script →
JavaScript, tudo para que pudesse “aparecer na mídia”
[2]. Isso porque as duas linguagens compartilhavam sin-
taxes semelhantes, embora a aplicação de recursos mais
avançados (Orientação a Objetos) seja bem diferente en-
tre estas duas linguagens. [1]
A vontade de “acompanhar” a linguagem Java foi tão
grande que em 1997 a Netscape decidiu criar um nave-
gador inteiramente feito em Java, seu nome: Javagator.
O projeto foi descontinuado, no entanto o que foi produ-
zido acabou se tornando no interpretador feito em Java
chamado rhino (tradução para rinoceronte). [3]
Observações: Hoje a equipe que desenvolve o Mozilla
Firefox faz parte da Mozilla Foundation, uma funda-
ção sem fins lucrativos (fundação criada com a ajuda da
antiga Netscape, antes da aquisição pela AOL [4]).
Com o passar do tempo JavaScript se tornou um pa-
drão desenvolvido pela ECMA (European Computer
Manufactures Association) vide ECMA-262, também
reconhecida pela ISO ISO-16262. [1]
Embora haja um padrão, a implementação deste padrão
não tem sido bem sucedida. Muitas empresas acabaram
que criando seus próprios “padrões”, e várias vezes os
desenvolvedores tiveram que contornar estes problemas
através dos chamados hacks.
0.2.2 Portabilidade e usos
Embora o JavaScript tenha sido uma linguagem focada
na World Wide Web, principalmente para tornar as pá-
ginas dinâmicas (DHTML), ela não se limita a este am-
biente. JavaScript pode ser usado em diversos softwares
como linguagem script, assim como Lua é a linguagem
scripts em diversos softwares (por exemplo, no software
MediaWiki, o software usado para disponibilizar todo
conteúdo daWikipédia,Wikilivros, etc.).
As implementações abaixo não dependem de um navega-
dor.
• Rhino — uma implementação da Mozilla Foun-
dation de um interpretador de JavaScript feito em
Java.
• Nashorn — uma implementação da Oracle de um
interpretador de JavaScript também em Java.
• Node.js — uma plataforma para programação Ja-
vaScript através do motor V8 (JavaScript).
Para mais implementações veja a lista de motores que im-
plementam o padrão ECMAScript.
0.2.3 Suporte a JavaScript no navegador
Como este livro pretende se focar no uso mais comum
dessa linguagem, o foco será no uso do JavaScript como
linguagem script para web (propósito original).
Para verificar se o JavaScript está habilitado no seu na-
vegador (em inglês, browser), ou se ele suporta, copie e
cole o código abaixo em uma arquivo HTML qualquer, e
abra-o.
<script language="javascript"> alert(“Olá!"); </script>
O resultado esperado é uma pequena janela com a men-
sagem "Olá!".
Caso não apareça nada, ou apareça um erro, verifique
as configurações do seu navegador. Alguns navegadores
2 CONTEÚDO
deixam, por padrão, o JavaScript desabilitado, ou então
nem mesmo suportam (implementam) a linguagem Ja-
vaScript.
0.2.4 Referências
[1] Wikipédia: https://pt.wikipedia.org/wiki/Javascript .
[2] Mozillazine: http://kb.mozillazine.org/JavaScript_is_
not_Java .
[3] Wikipédia: https://en.wikipedia.org/wiki/Rhino_
%28JavaScript_engine%29 .
[4] Wikipédia: https://en.wikipedia.org/wiki/Netscape_
Communications_Corporation .
Capítulo 1
Conhecendo a linguagem
1.1 Variáveis
1.1.1 Definição da variável
As variáveis são representadas por nomes chamados de
identificadores. Estes identificadores devem ser criados
com certas regras:
1. Devem iniciar obrigatoriamente por letra ou pelo
símbolo _ ou $.
2. A partir daí, além de letras, _ e $, podem conter
algarismos (0 até 9).
var nome = “Sérgio"; //Variável com escopo “local”.
livro = “JavaScript"; //Escopo global.
Uma variável ou matriz que não tenha sido inicializada
possui o valor undefined (indefinido). Observe que o
JavaScript diferencia letras maiúsculas de minúsculas
(case-sensitive). Portanto, undefined e null devem ser es-
critos sempre em letras minúsculas caso queira colocar
estes nomes como identificadores.
Se uma variável é declarada apenas com a instrução var
(sem atribuir um valor), o seu conteúdo é undefined ou
NaN (Not a Number, não é um número), caso esteja num
contexto numérico.
Exemplo:
var x; x = x * 2;
O resultado será NaN.
Ou se for utilizado:
x = x + “teste”
Ocorrerá um erro de execução, pois x não tem valor de-
finido.
1.1.2 Escopo da variável
Analisando o escopo de variáveis em relação a progra-
mação orientada a objetos, podemos afirmar que: caso
a variável seja declarada fora do corpo de uma função,
ela será considerada como pública (global), ou seja, po-
derá ser alcançada por todas as funções. Caso ela seja
declarada dentro de uma função, ela é considerada pri-
vada, pois somente pode ser vista pelo código da própria
função.
Variável pública
Exemplo:
var x=10; function fx() { /* será possível utilizar o valor
de x */ } function fy() { /* será possível utilizar o valor
de x */ }
Variável privada
Exemplo:
function fx() { var x = 5; /* será possível utilizar o valor
de x */ } function fy() { /* x terá valor undefined, ou
seja, não será visto por fy */ }
1.1.3 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 de-
claraçã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 va-
riável ou função com o mesmo nome:
3
4 CAPÍTULO 1. CONHECENDO A LINGUAGEM
function funcao() {} const funcao = “teste";
1.1.4 Arranjos
Arrays, que incluem vetores e matrizes, são variáveis que
contêm vários elementos em seu interior. A declaração
de um vetor é feita utilizando ou elementos delimitados
por colchetes “[]” ou pelo objeto Array.
Exemplo:
var frutas = ["laranja”, “banana”, “pera"]; var nomes
= new Array(“Sérgio”, “Eduardo”, “Rodrigues”); var
valores = [1.34, 10, 50, 13e2];
Os elementos individuais são acessados colocando-se a
posição do elemento entre colchetes após o nome do ve-
tor. Lembre sempre que os vetores iniciam pelo ele-
mento zero (0). Por exemplo, para acessar o primeiro
elemento do vetor valores, escreveríamos valores[0]. Po-
demos tanto ler quanto alterar elementos do vetor.
Podem-se utilizar elementos vazios na declaração de um
vetor, por exemplo:
var frutas = ["laranja”,"banana”,,"pera”,,,"abacaxi"];
O resultado seria:
• frutas[0] igual a “laranja”
• frutas[1] igual a “banana”
• frutas[2] igual a undefined
• frutas[3] igual a “pera”
• frutas[4] igual a undefined
• frutas[5] igual a undefined
• frutas[6] igual a “abacaxi”
length é um atributo especial que possui a quantidade de
elementos do vetor. Não é uma função; ou seja, tentar
utilizar frutas.length() causará um erro. A maneira cor-
reta 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 abor-
tar.
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”, “edu-
ardo”, “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, re-
tornando 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"]
O método reverse inverte a ordem dos elementos da ma-
triz.
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 =
1.1. VARIÁVEIS 5
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)), or-
dena 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 re-
tornar um valor menor que zero se a < b (a deve ser clas-
sificado antes de b), 0 se a = b e maior que zero se a >
b.
O método unshift(item, ...) adiciona um ou mais elemen-
tos ao inicio da matriz.
Exemplo:
var m = ["sergio”, “eduardo”, “rodrigues"];
m.unshift(“sr”); //m terá valor/["sr”, “sergio”, “edu-
ardo”, “rodrigues"]
Matrizes
Uma matriz é um vetor de vetores, ou seja, declara-se um
vetor, cujos elementos são vetores.
Exemplo:
var matriz = [["adao”, “eva"], ["caim”, “abel"]]
No caso acima, o elemento “caim” é o elemento [0] do
vetor [1] da matriz, ou seja, “caim” é acessado via ma-
triz[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]).
1.1.5 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 (de-
cimal), 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.
1.1.6 Strings
São seqüências de caracteres delimitadas por (") aspas ou
(') apóstrofe.
Exemplos:
'Sérgio Eduardo' “um texto qualquer” “várias li-
nhas:\nSegunda Linha\tMesma linha com tabulação”
Ao inicializar uma string pode-se utilizar caracteres es-
peciais, este tem uma barra inversa(\) para indicar que
seu significado é especial, veja a seguinte tabela
Atributos
Métodos
1.1.7 Tipos de dados
O JavaScript possui poucos tipos de dados. Abaixo eles
são apresentados.
6 CAPÍTULO 1. CONHECENDO A LINGUAGEM
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 di-
visã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 nu-
méricos, como funções trigonométricas, funções de arre-
dondamento 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 noNaN. 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 valo-
res 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 valo-
res: 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 espe-
ciais.
Exemplo:
"\b” //Representa o backspace (caracter ascii 8) "\t”
//Tabulação (caracter ascii 9) "\r” //Retorno de carro
(caracter ascii 13) "\n” //Nova linha (caracter ascii 10)
"\v” //Tabulação vertical (caracter ascii 11) "\uNNNN”
//Caracter unicode (NNNN representa um valor he-
xadecimal 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 ob-
jeto 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 emme-
mó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 do-
cument.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 />"); docu-
ment.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 />");
1.1.8 Conversão de Tipos
Atribuindo valores Diferente da maioria das lingua-
gens o JavaScript define as variáveis dinamicamente, por-
tanto ao atribuiruma variável ele escolhe o tipo conforme
o valor passado para a variável, não sendo necessário es-
pecificar o mesmo.
var numero = 1; //Numerica inteira. var texto = “Sérgio
Eduardo Rodrigues"; //String. var valor = 123.45; //Nu-
merica 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 ou-
tro 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 va-
lor 1, ele se encontra no tipo numérico inteiro, se o divi-
dirmos 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 é
1.3. CONTROLE DE FLUXO 7
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.
1.1.9 Referências
[1] http://en.wikipedia.org/wiki/Duck_typing Duck typing,
na Wikipedia em inglês
1.2 Operadores
1.2.1 Mudança do conteúdo
1.2.2 Comparação
1.2.3 Aritméticos
1.2.4 Lógicos
1.2.5 A nível de bit (bitwise)
1.2.6 Especiais
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 operador:
if (a !== 0 && 1/a > 0.5) { //... }
Assim evita erros de divisão por zero.
1.3 Controle de fluxo
Controlando o que e quando é executado um comando,
faz parte de todas as linguagens, e o JavaScript não é di-
ferente.
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.
1.3.1 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ária-
mente 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; }
1.3.2 Comando If
Talvez um dos comandos mais utilizados em todas as lin-
guagens de programação, o if é um comando utilizado
para tomar a decisão de executar o próximo comando ba-
seado numa expressão lógica, se esta expressão for verda-
deira 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.
1.3.3 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.
8 CAPÍTULO 1. CONHECENDO A LINGUAGEM
do { bloco; } while (condição);
1.3.4 Comando Switch
Se o conteúdo da variável for igual a constante1 ou cons-
tante2 será executado o comando1; se for igual a cons-
tante3 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; }
1.3.5 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++; }
1.3.6 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:
1.3.7 Comando continue
Salta para loop ou para loop que está após label indicado.
continue; continue label;
1.3.8 Comando break
Sai fora do loop corrente ou do loop que esta após label
informado.
break; break label;
1.3.9 Comando throw
Lança exceção.
throw expressão;
1.3.10 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 == expressão1) { co-
mando3; } 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ções: 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.
1.4 Funções
As funções são declaradas pela palavra reservada func-
tion (palavra-chave, keyword), seguido:
1. Do Identificador (assim o nome de uma variável);
2. da lista de argumentos (list of arguments) — deli-
mitados 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, argu-
mento3 /*, ... */) { //Instruções; corpo da função. }
1.6. EXPRESSÕES REGULARES 9
Uma sintaxe alternativa é demonstrada abaixo.
var identificador = new function(argumento1, argu-
mento2, argumento3 /*, ... */) { //Instruções; corpo da
função. };
1.4.1 Referências
[1] MDN: https://developer.mozilla.org/en-US/docs/Web/
JavaScript/Guide/Functions — Funções.
1.5 Objetos
1.5.1 Definição de Objeto
Podem ser declarados com propriedades e valores deli-
mitados 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 se-
guinte forma:
function mostrePessoa() { alert(this.nome + "\n”
+ this.altura + "\n” + this.nascimento); } var pes-
soa = { nome: “Sergio”, altura: 1.72, nascimento:
new Date(1969,1,4), mostre: mostrePessoa }; pes-
soa.mostre(); pessoa.nome = “eduardo"; 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); } }; pes-
soa.mostre(); pessoa.nome = “eduardo"; pessoa.altura
= 1.78; pessoa.nascimento = new Date(1975, 6, 25);
pessoa.mostre();
1.5.2 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);
1.6 Expressões regulares
Expressões regulares são padrões de cadeias de caracteres
(strings) geralmente usadas para selecionar ou verificar a
presença de um determinado texto. [1]
1.6.1 Sintaxe
var er = new RegExp(expressão, opções); //Instanciando
um objeto do tipo RegExp. var er = /expressão lite-
ral/opções; //Usando uma expressão literal.
Opções
As flags (tradução para “um sinalizador”, bandeira)
abaixo funcionam como variáveis booleanas (a presença
delas conta como valor verdadeiro).
1.6.2 Atributos
[2]
1.6.3 Métodos
1.6.4 Referências
[1] MDN: https://developer.mozilla.org/pt-BR/docs/
JavaScript/Guide/Regular_Expressions .
[2] MDN: https://developer.mozilla.org/en-US/docs/Web/
JavaScript/Reference/Global_Objects/RegExp .
Capítulo 2
Avançado
2.1 Ajax
Com o advento do AJAX, este objeto se torna cada vez
mais importante. Ele, infelizmente, não é padronizado,
e portanto, até que saia uma resolução, devemos sempre
fazer checagem para criação deste objeto, a seguir apre-
sento a sua estrutura, e em seguida uma pequena rotina
para criação e manipulação do mesmo.
2.1.1 Atributos
2.1.2 Métodos
2.1.3 Eventos
Exemplo de Uso
Salve este codigo como request.js
var RequestObject; function initRe-
quest(newRequestFunc, noBody) { var _newRe-
quest = newRequestFunc; var _noBody = noBody;
var _id = 0; return function() { this.newRequest
= _newRequest; this.concatTimer = function(url,
id) { return url + (url.indexOf("?") < 0 ? "?"
/"&")+ “requestTime=" + new Date().getTime() +
"&requestId=" + id; } this.loadText = function(url,
method) { var req = _newRequest(); req.open(method
|| “GET”, this.concatTimer(url, _id++), false); if
(_noBody) req.send(); else req.send(null); return
req.responseText; } this.splitLines = function(text)
{ try { return text.split(/\r?\n|\r/); } catch(e) { re-
turn []; } } this.loadLines = function(url, method)
{ return this.splitLines(this.loadText(url, method ||
“GET”)); } this.loadXML = function(url, method) {
var req = _newRequest(); req.open(method || “GET”,
this.concatTimer(url, _id++), false); if (_noBody)
req.send(); else req.send(null); return req.responseXML;
} this.bind = function(object) { var url = object['url']; if
(typeof url == 'undefined') throw “necess?rio URL para
fazer bind"; var id = _id++; var req = _newRequest();
var method = object['method'] || “GET"; var headers
= object['header']; var body = object['body']; var user
= object['username']; var pass = object['password'];
var onload = object['onload']; var onerror = ob-
ject['onerror']; var onprocess = object['onprocess’];
var onstatechange = object['onstatechange'];
req.onreadystatechange=function() { if (onstatechange)
onstatechange(req, id); switch(req.readyState) { case
0/// UNINITIALIZED open() não foi chamado ainda
break; case 1/// LOADING send() não foi chamado
ainda case 2/// LOADED send() foi chamado, disponível
getResponseHeader e status case 3/// INTERACTIVE
carregando, responseText tem dados parciais if (onpro-
cess) onprocess(req, id); break; case 4/// COMPLETED,
todas as operações foram concluidas if (onprocess)
onprocess(req, id); if (req.status == 0 || req.status ==
200) { if (onload) onload(req, id); } else { if (onerror)
onerror(req, id, req.statusText); } break; } } if (user)
req.open(method, this.concatTimer(url, id), true, user,
password); else req.open(method, this.concatTimer(url,
id)); req.setRequestHeader('requestid', id); for(var
header in headers) { req.setRequestHeader(header,
headers[header]); } try { if (body && _noBody)
{ req.send(); } else { req.send(body); } } catch(e)
{ if (onerror) { onerror(req, id, e); } } } } } if
(window.ActiveXObject) { var objectNames = [
“Msxml2.XMLHTTP.5.0”, “Msxml2.XMLHTTP.4.0”,
“MSXML2.XMLHTTP.3.0”, “MSXML2.XMLHTTP”,
“Microsoft.XMLHTTP” ]; for(var i=0; i < object-
Names.length; i++) { try { var requestName = ob-
jectNames[i]; new ActiveXObject(requestName);
RequestObject = initRequest(function() { return new
ActiveXObject(requestName); }, true); } catch(e) { } }
} if (! RequestObject && window.XMLHttpRequest)
{ try { new XMLHttpRequest(); RequestObject = ini-
tRequest(function() { return new XMLHttpRequest(); },
false); } catch(e) { } } if (! RequestObject) { alert(“Seu
browser não esta preparado para o ajax”); }
Inclua na página, o seguinte comando para incluir este
arquivo :
<script type="text/javascript”
src="request.js"></script>
Em seguida, você pode utilizar o código, como por exem-
plo, carregando um texto de forma síncrona /
10
2.2. FUNÇÕES E OBJETOS PREDEFINIDOS 11
var req = new RequestObject();
alert(req.loadText(“textoqualer.txt”));
Podemos também carregar numamatriz e processar linha
a linha:
var req = new RequestObject(); var matriz =
req.loadLines(“textoqualer.txt”); for(var i=0; i <
matriz.length; i++) { alert(i + ":" + matriz[i]); }
Também é possível carregar de forma assincrona :
var req = new RequestObject(); req.bind({
url:"textoqualquer.txt”, onload:function(rq, id) {
alert(rq.responseText); } });
É possível também verificar se ocorreu algum erro, da
seguinte forma :
var req = new RequestObject(); req.bind({
url:"textoqualquer.txt”, onload:function(rq, id) {
alert(rq.responseText); }, onerror:function(rq, id, msg) {
alert('erro = ' + msg); } });
2.2 Funções e objetos predefinidos
Existem uma série 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.
2.2.1 Funções predefinidas segundo o pa-
drão ECMA 262
Versão consultada: 5.1 .
• 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
• Date.prototype.setDate
• Date.prototype.setFullYear
• Date.prototype.setHours
12 CAPÍTULO 2. AVANÇADO
• 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
• 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
2.2. FUNÇÕES E OBJETOS PREDEFINIDOS 13
• 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)
Matemática
Atributos
Métodos
Data e hora
2.2.2 Referências
Capítulo 3
Anexo
3.1 Dicas
3.1.1 JavaScript Rotinas Diversas
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 (docu-
ment.all){document.write(navigator.browserLanguage);}
else{document.write(navigator.language)} docu-
ment.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 scr-
size = jkit.getScreenSize();sixteenth = scr-
size.width;fifteenth = scrsize.height; } docu-
ment.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');} docu-
ment.writeln('</p>');
Adicionar aos favoritos
<a href="javascript:window.external.
AddFavorite(document.location,'');">Add to Favo-
rites!</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 (twenti-
eth.tagName=="INPUT"&&twentieth.type=="button”)twentieth.style.backgroundColor=nineteenth;}
function third2(fourth2){ if (fifte-
enth=="")window.location=fourth2; else if (fif-
teenth=="_new”)window.open(fourth2); else pa-
rent[fifteenth].location=fourth2;} </script> <ti-
tle></title> </head> <body> <form onMou-
seover="sixteenth(event, 'yellow')" onMouse-
out="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, sevente-
enth) {var eighteenth,nineteenth,twentieth;
if(!seventeenth) seventeenth=document;
14
3.1. DICAS 15
if((eighteenth=sixteenth.indexOf('?'))>0&&parent.frames.length)
{ seventeenth=parent.frames[sixteenth.substring(eighteenth+1)].document;
sixteenth=sixteenth.substring(0,eighteenth); }
if(!(twentieth=seventeenth[sixteenth])&&seventeenth.all)
twentieth=seventeenth.all[sixteenth]; for (ninete-
enth=0;!twentieth&&nineteenth<seventeenth.forms.length;nineteenth++)
twentieth=seventeenth.forms[nineteenth][sixteenth];
for(nineteenth=0;!twentieth&&seventeenth.layers&&nineteenth<seventeenth.layers.length;
nineteenth++) twenti-
eth=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\protect\char"007D\relax;SPAN {vertical-align:
bottom}; </style> <script language='JavaScript'> var
fifteenth = new Date();var sixteenth = 6;var seventeenth
= 3; function eighteenth() { with(document.all) { ninete-
enth.style.setExpression('width','fifteenth.getHours()
* sixteenth * seventeenth','jscript'); twenti-
eth.setExpression('innerHTML','fifteenth.getHours()','jscript');
first2.style.setExpression('width','fifteenth.getMinutes()
* sixteenth','jscript'); se-
cond2.setExpression('innerHTML','fifteenth.getMinutes()','jscript');
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; docu-
ment.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 CO-
LOR=\'#FF000f\'>'); }function second2(third2)
{this.length=third2; 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 CELLPAD-
DING=%3><TR>'); document.write('<TD COLS-
PAN=7 ALIGN=center><B>'+sixth2+' '+six-
teenth3+'</B><TR>'); fifteenth('Sun'); fifte-
enth('Mon'); fifteenth('Tue'); fifteenth('Wed'); fif-
teenth('Thu'); fifteenth('Fri'); fifteenth('Sat'); do-
cument.write('</TR><TR>'); for (var fourth2=1;
fourth2<seventeenth3; fourth2++) {docu-
ment.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++; }docu-
ment.write('<TR>'); while (eighteenth <= fifte-
enth3) {for (var fourth2=1; fourth2<=7 && eighte-
enth<=fifteenth3; fourth2++) {document.write('<TD
ALIGN=center>'); seventeenth(eighteenth,nineteenth);
document.write(eighteenth+"</TD><FONT
COLOR='#000000'>"); eighteenth++;
}document.write('</TR><TR>'); }docu-
ment.write('</TR></TABLE></center><BR>');
seventeenth3 = fourth2; }eighteenth3=new se-
cond2(12); eighteenth3[1]='January'; eighte-
enth3[2]='February'; eighteenth3[3]='March'; eigh-
teenth3[4]='April'; eighteenth3[5]='May'; eigh-
teenth3[6]='June'; eighteenth3[7]='July'; eighte-
enth3[8]='August'; eighteenth3[9]='September'; eigh-
teenth3[10]='October'; eighteenth3[11]='November';
eighteenth3[12]='December'; nineteenth3 = new se-
cond2(12); nineteenth3[1]=31; nineteenth3[2]=28;
nineteenth3[3]=31; nineteenth3[4]=30; ninete-
enth3[5]=31; nineteenth3[6]=30; nineteenth3[7]=31;
nineteenth3[8]=31; nineteenth3[9]=30; nine-
teenth3[10]=31; nineteenth3[11]=30; ninete-
enth3[12]=31; twentieth3 = new Date(); twentieth =
twentieth3.getDate(); first2 = twentieth3.getMonth()+1;
16 CAPÍTULO 3. ANEXO
sixteenth3 = twentieth3.getFullYear(); first4 = new
Date('January 1, 19'+sixteenth3); seventeenth3 =
first4.getDay()+1; if (seventeenth3 == 1){ sevente-
enth3 = 8; }for (var second4 = 1; second4<=12; se-
cond4++){fifth2(eighteenth3[second4],nineteenth3[second4],second4);
}
Habilitar Botão Submit
<script> var second2; function fifte-
enth(sixteenth){ second2=sixteenth; if (do-
cument.all||document.getElementById){
for (seventeenth=0; sevente-
enth<second2.form.length;seventeenth++){ var
eighteenth=second2.form.elements[seventeenth];
if(eighteenth.type.toLowerCase()=="submit”)eighteenth.disabled=!second2.checked;
} } } function first2(sixteenth){if (!docu-
ment.all&&!document.getElementById){ if (win-
dow.second2&&second2.checked)return true; else{
alert(“Please accept terms to submit form”);return
false; } } } </script> <title></title> </head>
<body> <form name="agrform” onSubmit="return
first2(this)">Remainder of your form here<br>
<input name="agrcheck” type="checkbox” on-
Click="fifteenth(this)"><b>I agree to these
terms</b><br> <input type="Submit” va-
lue="Submit” disabled> </form> <script> docu-
ment.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 (sevente-
enth == 13) { var eighteenth; for (eighteenth =
0; eighteenth < sixteenth.form.elements.length;
eighteenth++) if (sixteenth == sixte-
enth.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” on-
keypress="return fifteenth(this, event)"><br> <texta-
rea>Here is some text</textarea> </form> </body>
Background Color
<form method="POST” name="background">
<input type="button” value="green” on-
click="document.bgColor='green'"> <in-
put type="button” value="blue” on-
click="document.bgColor='blue'"> <in-
put type="button” value="orange” on-
click="document.bgColor='orange'"> <in-
put type="button” value="gray” on-
click="document.bgColor='gray'"> <in-
put type="button” value="red” on-
click="document.bgColor='red'"> <input type="button”
value="yellow” onclick="document.bgColor='yellow'">
<input type="button” value="black” on-
click="document.bgColor='black'"> <in-
put type="button” value="white” on-
click="document.bgColor='white'"> </form>
Acesso aos Drives
<form action='file:///a|/'> <input type='submit' va-
lue='A:\ drive'> </form><p> <form action='file:///c|/'>
<input type='submit' value='C:\ drive'> </form><p>
<form action='file:///d|/'> <input type='submit' va-
lue='D:\ drive'> </form><p>
Última modificação
document.write('Última Modificação ' + docu-
ment.lastModified);
Detectar Clique com botão Direito
var tenth=''; function ninth() { if (document.all)
{ (tenth); alert(“Enter Your Text Here”); re-
turn false; } } function twelfth(e) { if (docu-
ment.layers||(document.getElementById&&!document.all))
{ if (e.which==2||e.which==3) {(tenth);return
false;}}} if (document.layers) {docu-
ment.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
OnUnload - evento que ocorre ao fechar uma página
OnResize - evento que ocorre ao alterar o tamanho (redi-
mensionar) 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 com JavaScript
É 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 digita-
ram. 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 servi-
dor), pois o JavaScript pode estar desativado no navega-
3.1. DICAS 17
dor do usuário.
Veja uma boa coleção de funções para validação de for-
mulários pelo JavaScript do site:
http://www.webcheatsheet.com/javascript/
form_validation.php
function validateFormOnSubmit(theForm) { var reason
= ""; reason += validateUsername(theForm.username);
reason += validatePassword(theForm.pwd); rea-
son += validateEmail(theForm.email); reason +=
validatePhone(theForm.phone); reason += validate-
Empty(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; } function validateUsername(fld) {
var error = ""; var illegalChars = /\W/; // allow let-
ters, 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_]/; // al-
low 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 pas-
sword is the wrong length. \n"; fld.style.background
= 'Yellow'; } else if (illegalChars.test(fld.value))
{ error = “The password contains illegal charac-
ters.\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+$/, ''); }
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 cha-
racters 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 (!(strip-
ped.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> <h1>WebCheatSheet
- JavaScript Tutorial</h1> <form name="demo”
onsubmit="return validateFormOnSubmit(this)" ac-
tion="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 pas-
sword</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 :</la-
bel></td> <td><input name="from” size="35”
maxlength="50” type="text"></td> </tr> <tr>
<td>&nbsp;</td> <td><input name="Submit” va-
lue="Send” type="submit” ></td> <td>&nbsp;</td>
</tr> </tbody> </table> </form> </body> </html>
Outro site muito bom
http://www.tizag.com/javascriptT/
javascriptform.php
<script type='text/javascript'> function formVali-
dator(){ // 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'); 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 isNume-
ric(elem, helperMsg){ var numericExpression = /^[0-
9]+$/; if(elem.value.match(numericExpression)){ return
true; }else{ alert(helperMsg); elem.focus(); return false;
18 CAPÍTULO 3. ANEXO
} } function isAlphabet(elem, helperMsg){ 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; } } func-
tion 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(); re-
turn 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)){ 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> <op-
tion>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>
3.2 Autores
Os usuários citados abaixo contribuíram para o desenvol-
vimento deste trabalho. Estes dados foram obtidos em
16/12/2013.
Abacaxi, Albmont, Alguém, Belegurth, Guiwp,
Helder.wiki, Helder.wiki.bot, JackPotte,
KnowledgeSeeker017, LeonardoRob0t, Lightningspirit,
Makiyto, Marcos Antônio Nunes de Moura,
NunoAgostinho, Raylton P. Sousa, Seduardo.
3.2.1 Após a fusão feita em 16/12/2013
Os contribuidores abaixo foram adicionados ou destaca-
dos.
• Fonte Javascript/Tipos de dados (revisão), des-
tino Javascript/Variáveis (contribuidores: Guiwp,
Abacaxi, JackPotte, Helder.wiki.bot, Alguém,
Albmont, Raylton P. Sousa, Dante Cardoso
Pinto de Almeida, SallesNeto BR, Belegurth,
Marcos Antônio Nunes de Moura, LeonardoRob0t,
Seduardo).
3.2.2 Após a fusão feita em 16/12/2013
Os contribuidores abaixo foram adicionados ou destaca-
dos.
• Fonte Javascript/Conversão de Tipos (revisão),
destino Javascript/Variáveis (contribuidores:
Guiwp, Abacaxi, Helder.wiki.bot, Alguém, Raylton
P. Sousa, Jorge Morais, Albmont, Belegurth,
Marcos Antônio Nunes de Moura, LeonardoRob0t,
Seduardo).
3.3 Ligações externas
Página dedicada a apontar recursos úteis para quem está
aprendendo JavaScript.
Observações: Esta lista de recursos foi obtida a partir do
seguinte endereço: https://developer.mozilla.org/en-US/
docs/Web/JavaScript
3.3.1 Ferramentas
• Koding: Plataforma online.
• LearnStreet: Exercícios e tutoriais.
• Codecademy: Curso gratuito.
• Code School: Faça vários cursos.• Frontend Masters: Oficina de vídeos focada em de-
senvolvimento front-end.
• Let’s Code: Test-Driven JavaScript: Screencast en-
sinando a programar JavaScript de forma profissio-
nal.
• Idiomatic.js: Princípios para escrever JavaScript de
forma concistente.
• Firebug: Depuração.
• Liveweave: Uma interface para ajudar no desenvol-
vimento de HTML5, CSS3 e JavaScript.
• JSHint: Ferramenta que ajuda a detectar erros.
• JSLint: Checa a sintaxe, alerta práticas ruins.
• JSDoc: Gera documentação a partir de código.
• JavaScript Redirect: Redirecionamento avançado.
• Aptana Studio: IDE aberta baseada na IDE eclipse.
• Netbeans: IDE aberta na qual inclui suporte sofisti-
cado à JavaScript (ex.: refatoração).
• Eclipse: IDE aberta com recursos semelhantes à
IDE Netbeans para JavaScript.
3.3. LIGAÇÕES EXTERNAS 19
• Cloud9 IDE: IDE que é executada pelo navegador.
Suporta as recursos do “Node.js”.
• Pretty Diff: Ferramenta para comparação de có-
digo.
• Object Playground: Tutoriais em screencast para
entender JavaScript orientado a objeto.
• Extension Developer’s Extension: Disponibiliza
ambiente e uma shell.
• BoilerplateJS: Referência.
• JSFiddle: Plataforma para testes.
3.3.2 Outros recursos
• JavaScript Garden: Mostra partes esotéricas do Ja-
vaScript.
• JSWiki: Bibliotecas e outros recursos.
• Stack Overflow: Site de perguntas e respostas a res-
peito de programação.
• Pineapple JavaScript: Materiais de apoio.
• Life of JavaScript: Coleção de recursos sobre Ja-
vaScript.
3.3.3 Tópicos relacionados
• JQuery
Capítulo 4
Fontes, contribuidores e licenças de texto e
imagem
4.1 Texto
• JavaScript/Prefácio Fonte: http://pt.wikibooks.org/wiki/JavaScript/Pref%C3%A1cio?oldid=266295 Contribuidores: Guiwp e Torneira
• JavaScript/Introdução Fonte: http://pt.wikibooks.org/wiki/JavaScript/Introdu%C3%A7%C3%A3o?oldid=266261 Contribuidores:
Marcos Antônio Nunes de Moura, Seduardo, LeonardoRob0t, Belegurth, Albmont, Raylton P. Sousa, He7d3r.bot, JackPotte, Knowledge-
Seeker017, Abacaxi, Guiwp, Torneira e Anónimo: 3
• JavaScript/Variáveis Fonte: http://pt.wikibooks.org/wiki/JavaScript/Vari%C3%A1veis?oldid=267560 Contribuidores: Seduardo, Leo-
nardoRob0t, Raylton P. Sousa, He7d3r.bot, JackPotte, Abacaxi, Guiwp, Torneira e Anónimo: 1
• JavaScript/Operadores Fonte: http://pt.wikibooks.org/wiki/JavaScript/Operadores?oldid=266305 Contribuidores: Seduardo, Leonardo-
Rob0t, Albmont, Raylton P. Sousa, He7d3r.bot, Alguém, JackPotte, Abacaxi, Guiwp e Torneira
• JavaScript/Controle de fluxo Fonte: http://pt.wikibooks.org/wiki/JavaScript/Controle%20de%20fluxo?oldid=267561 Contribuidores:
Seduardo, LeonardoRob0t, Raylton P. Sousa, He7d3r.bot, JackPotte, Abacaxi, Guiwp e Torneira
• JavaScript/Funções Fonte: http://pt.wikibooks.org/wiki/JavaScript/Fun%C3%A7%C3%B5es?oldid=267556 Contribuidores: Seduardo,
LeonardoRob0t, NunoAgostinho, Makiyto, Raylton P. Sousa, He7d3r.bot, Alguém, JackPotte, Abacaxi, Guiwp, Torneira e Anónimo: 1
• JavaScript/Objetos Fonte: http://pt.wikibooks.org/wiki/JavaScript/Objetos?oldid=267559 Contribuidores: Seduardo, LeonardoRob0t,
Raylton P. Sousa, He7d3r.bot, JackPotte, Abacaxi, Guiwp, Torneira e Anónimo: 1
• JavaScript/Expressões regulares Fonte: http://pt.wikibooks.org/wiki/JavaScript/Express%C3%B5es%20regulares?oldid=266082 Con-
tribuidores: Seduardo, He7d3r.bot, Alguém, Guiwp e Torneira
• JavaScript/Ajax Fonte: http://pt.wikibooks.org/wiki/JavaScript/Ajax?oldid=267552 Contribuidores: Seduardo, LeonardoRob0t, Edudo-
bay, He7d3r.bot, Alguém, Abacaxi, Guiwp e Anónimo: 5
• JavaScript/Funções e objetos predefinidos Fonte: http://pt.wikibooks.org/wiki/JavaScript/Fun%C3%A7%C3%B5es%20e%
20objetos%20predefinidos?oldid=267557 Contribuidores: Abacaxi e Guiwp
• JavaScript/Dicas Fonte: http://pt.wikibooks.org/wiki/JavaScript/Dicas?oldid=267555 Contribuidores: Ribafs, Master, He7d3r.bot, Aba-
caxi, Guiwp e Torneira
• JavaScript/Autores Fonte: http://pt.wikibooks.org/wiki/JavaScript/Autores?oldid=267553 Contribuidores: Seduardo, LeonardoRob0t,
Lightningspirit, Raylton P. Sousa, He7d3r.bot, Abacaxi, Guiwp, Torneira e Anónimo: 1
• JavaScript/Ligações externas Fonte: http://pt.wikibooks.org/wiki/JavaScript/Liga%C3%A7%C3%B5es%20externas?oldid=267558
Contribuidores: Abacaxi, Guiwp e Torneira
4.2 Imagens
• Ficheiro:Crystal_Clear_app_kaddressbook.png Fonte: http://upload.wikimedia.org/wikipedia/commons/7/74/Crystal_Clear_app_
kaddressbook.png Licença: LGPL Contribuidores: All Crystal icons were posted by the author as LGPL on kde-look Artista original:
Everaldo Coelho and YellowIcon
4.3 Licença
• Creative Commons Attribution-Share Alike 3.0
20
	Prefácio
	Introdução
	História 
	Portabilidade e usos 
	Suporte a JavaScript no navegador 
	Referências 
	Conhecendo a linguagem
	Variáveis
	Definição da variável 
	Escopo da variável 
	Constantes 
	Arranjos 
	Numéricas 
	Strings 
	Tipos de dados 
	Conversão de Tipos 
	Referências 
	Operadores
	Mudança do conteúdo 
	Comparação 
	Aritméticos 
	Lógicos 
	A nível de bit (bitwise) 
	Especiais 
	Controle de fluxo
	Bloco de comandos 
	Comando If 
	Comando While 
	Comando Switch 
	Comando for 
	Comando label 
	Comando continue 
	Comando break 
	Comando throw 
	Comando try 
	Funções
	Referências 
	Objetos
	Definição de Objeto 
	Propriedades 
	Expressões regulares
	Sintaxe 
	Atributos 
	Métodos 
	Referências 
	Avançado
	Ajax
	Atributos 
	Métodos 
	Eventos 
	Funções e objetos predefinidos
	Funções predefinidas segundo o padrão ECMA 262 
	Referências 
	Anexo
	Dicas
	JavaScript Rotinas Diversas 
	Autores
	Após a fusão feita em 16/12/2013 
	Após a fusão feita em 16/12/2013 
	Ligações externas
	Ferramentas 
	Outros recursos 
	Tópicos relacionados 
	Fontes, contribuidores e licenças de texto e imagem
	Texto
	Imagens
	Licença