Aprendendo JavaScript

Filipe Del Nero Grillo

Renata Pontin de Mattos Fortes

So Carlos 21 de fevereiro de 2008

Sumrio
1 Introduo

2 Histrico de JavaScript

3 Conceitos

4 Ncleo da Linguagem JavaScript

4.1 Tipos de dados . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

4.1.1 Tipos numricos . . . . . . . . . . . . . . . . . . . . . . . . . .

4.1.2 Booleano

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

4.1.3 Indefinido . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

10

4.1.4 null . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

10

4.1.5 Strings . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

11

4.1.6 Arrays . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

11

4.2 Operadores . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

12

4.2.1 Aritmticos . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

12

4.2.2 Comparao

. . . . . . . . . . . . . . . . . . . . . . . . . . . .

12

4.2.3 Bit a bit . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

13

4.2.4 Atribuio . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

13

4.2.5 Lgicos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

13

4.3 Estruturas de controle . . . . . . . . . . . . . . . . . . . . . . . . . .

13

4.4 Funes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

16

4.5 Objetos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

18

4.5.1 Objeto String . . . . . . . . . . . . . . . . . . . . . . . . . . . .

21

4.5.2 Objeto Array

. . . . . . . . . . . . . . . . . . . . . . . . . . . .

25

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

29

4.6 Excees
5 Web 2.0

31

5.1 O que Ajax? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

31

5.2 O papel do JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . .

31

5.3 Exemplo de aplicao Ajax . . . . . . . . . . . . . . . . . . . . . . . .

35

6 Ferramentas

43

INTRODUO

Introduo

Por que aprender JavaScript?

Se buscarmos na internet por respostas a esta pergunta, encontramos:
"JavaScript a ferramenta que d acesso a um grande nmero de truques e
de funcionalidades avanadas que esto ao alcance de todos".
"JavaScript usada em milhes de pginas Web com intuito de melhorar
todo projeto"
"Com JavaScript voc pode deixar a sua pgina muito mais legal!"
De fato, concordamos que essas respostas falam verdade! Mas essa fama de
ser uma linguagem leve, para fazer truques em pginas, faz com que muitas
pessoas pensem que JavaScript no uma linguagem de programao sria.
Muitos lembram dela como se fosse apenas uma extenso do HTML. A sigla
DHTML (Dynamic HTML) uma das causadoras dessa impresso, porque sugere
que um novo tipo de HTML e no que usado JavaScript e HTML juntos.
Na verdade, JavaScript uma linguagem de programao de propsito geral,
dinmica e possui caractersticas do paradigma de orientao a objetos. Ela
capaz de realizar virtualmente qualquer tipo de aplicao, e rodar no browser
do cliente.
Atualmente, uma empresa que utiliza JavaScript em praticamente todos os
seus aplicativos a Google Inc., como por exemplo: no site de busca Google Search1 , no GMail2 , no Google Maps3 , entre outros. O que torna esses aplicativos
to populares a forma como so interativos, e isso se deve em maior parte ao
JavaScript.
A linguagem JavaScript foi objeto de estudo do projeto de iniciao cientfica
deste autor, e foi utilizada no desenvolvimento de um editor de diagramas online,
via Web, utilizando SVG (Scalable Vector Graphics) e JavaScript.
Como resultado do estudo realizado, foi elaborado este documento visando
servir de base inicial para que outros interessados possam ter um roteiro prtico
para prosseguir e se aprofundar em seus estudos.

www.google.com
www.gmail.com
3
www.google.com/maps
2

HISTRICO DE JAVASCRIPT

Histrico de JavaScript

A linguagem JavaScript foi criada pela Netscape Communications Corporation4

e foi desenvolvida com o nome de Mocha, depois passou a se chamar LiveScript
e foi finalmente lanada como JavaScript em 1995 integrando a verso 2.0B3
do navegador Netscape e visava implementar uma tecnologia de processamento
modo cliente.
A denominao da linguagem, JavaScript, se deve a similaridades com a sintaxe do Java e embora as duas linguagens no tenham nenhuma outra relao
alm desta, os nomes ainda causam confuso para alguns usurios.
Mais tarde, a linguagem tornou-se um padro da ECMA (European Computer Manufacturers Association) que atualmente seguido por outros desenvolvedores como os da Adobe com a linguagem ActionScript. A implementao da
Microsoft do ECMAScript chamada de JScript ou ActiveScript, popularmente
conhecido como ActiveX, usada nos navegadores Internet Explorer.
JavaScript permite criar pequenos programas embutidos no prprio cdigo
de uma pgina HTML e capazes de gerar nmeros, processar alguns dados,
verificar formulrios, alterar valor de elementos HTML e criar elementos HTML.
Tudo isso diretamente no computador cliente, evitando a troca de informaes
com o servidor e o tempo passa a depender somente do processamento local do
cliente, no mais da latncia da rede5 .
A verso mais recente da linguagem a 1.7, at o momento de redao deste
documento. Esta verso 1.7 suportada pela verso 2.0 do Mozilla Firefox, mas
verses anteriores continuam funcionando. Alm disso, outras verses de testes
j esto sendo desenvolvidas, por exemplo, a verso, chamada de JavaScript
2.0, desenvolvida pela Mozilla que pode vir a se tornar padro.
JavaScript uma linguagem completa e poderosa que possui muitas das
qualidades de diversas outras linguagens, como: listas associativas, tipagem dinmica6 e expresses regulares de Perl e a sintaxe similar a C/C++, linguagens
de grande reconhecimento tanto no mundo acadmico quanto comercialmente.
Alm disso, JavaScript multiparadigma e entre eles destacam-se a programao estrutural e orientada a objeto; possui funes de ordem superior; entre
outros.
Mesmo com o alto potencial de recursos para desenvolvimento de programas oferecido pela linguagem, grande parte das pessoas que usam JavaScript
4
Netscape foi uma companhia de servios de computao bastante conhecida em funo de
seu web browser, e atualmente subsidiria da AOL.
5
Latncia de rede a diferena de tempo do momento de envio de um pacote pela rede at o
momento em que ele recebido no destino sendo normalmente este tempo o responsvel pela
demora ao se receber dados durante uma navegao na web por exemplo.
6
Tambm conhecida de forma bem humorada como Duck Typing em referncia ao Duck test "Se se move como um pato e faz barulho de pato, ento deve ser um pato!".

HISTRICO DE JAVASCRIPT

no so programadores e isso lhe deu a reputao de ser uma linguagem para

amadores, o que no verdade, como pode ser observado com o surgimento de
tcnicas Ajax, que ser explicado neste documento, e poderosas aplicaes web.
Alm disso, JavaScript se tornou o carro chefe da chamada Web 2.0 que tambm
ser explicada mais adiante.

CONCEITOS

Conceitos

Nesta seo, so descritos alguns conceitos que esto bastante relacionados

com a linguagem JavaScript. Esses conceitos possibilitam caracterizar melhor a
linguagem e seu potencial de utilizao.
Linguagem compilada vs. Linguagem script - de maneira simplificada, podemos explicar esta diferena de linguagens, considerando-se os procedimentos necessrios para que os programas codificados nas mesmas possam ser
preparados para que se tornem executveis em mquinas.
Assim, primeiro, observamos que para se executar um programa em uma
linguagem compilada necessrio escrever o seu cdigo-fonte correspondente e compil-lo; durante a compilao, o cdigo-fonte lido pelo compilador que gera ento um arquivo de sada com uma traduo daquele
cdigo-fonte para linguagem de mquina (o cdigo executvel); esse arquivo em linguagem de mquina pode ser ento executado no computador
e no pode ser facilmente editado, pois no compreensvel por ns seres humanos. Assim, se desejarmos alterar alguma parte desse programa,
precisaremos alterar seu cdigo-fonte e compil-lo novamente para que o
executvel novo seja gerado.
Diferente disso, para executar um programa em uma linguagem interpretada (script) precisamos apenas digitar o cdigo-fonte e o interpretador ir
ler esse cdigo e executar as instrues, comando por comando, a partir do
prprio texto do cdigo-fonte, cada vez que o script for rodado; assim, no
necessrio a criao de um arquivo esttico, para alterar o programa basta
alterar o cdigo e ele j estar pronto para rodar novamente. Podemos
ilustrar isso com um script de cinema, que de forma anloga, diz passo a
passo as aes que os atores devem realizar em um filme. Assim, o roteiro
descrito no script de cinema possui uma dinmica que deve se adaptar a
cada necessidade das cenas.
A partir dessa noo, uma vantagem bvia do script a agilidade para se
alterar o programa, eliminando a sequncia editar-compilar-linkar-rodar
comum em softwares compilados. Como preo dessa flexibilidade, perde-se
um pouco em desempenho e ser sempre necessrio possuir um interpretador no computador onde ser rodado o script, enquanto o arquivo binrio
resultante de compilao no necessita do compilador em seu ambiente de
uso.
JavaScript uma linguagem de script.
Tipagem Dinmica - tambm conhecida como Duck Typing, indica como os ti6

CONCEITOS

pos das variveis so definidos. Nesse modo de tipagem, as variveis podem

assumir qualquer tipo ou objeto definido pela linguagem, por exemplo, se
uma varivel X receber um valor inteiro ela ir se comportar como uma
varivel inteira, e se mais tarde X receber uma string passar a se comportar como uma string daquele ponto em diante. Assim, no preciso
definir o tipo da varivel no momento da sua declarao. O tipo da varivel
definido implicitamente pelo seu valor.
O contrrio disso ocorre na tipagem esttica, em que o tipo da varivel
precisa ser definido antes de us-la e isso verificado em tempo de compilao. Aps declarada com seu tipo, nenhum valor de outro tipo pode ser
atribudo a ela, pois geraria um erro de compilao.
JavaScript uma linguagem de programao de tipagem dinmica.
Funes de ordem superior - so funes que recebem uma ou mais funes
como argumentos ou que tm uma funo como sada. Com isso, possvel
criar o que so chamadas function factories que so funes que a partir de
outras funes simples so capazes de realizar aes mais complexas.
JavaScript uma linguagem de programao que possibilita a definio de
funes de ordem superior.
Programao Client-side vs. Server-side - JavaScript uma linguagem que
nasceu como Client-side (que roda no computador cliente) e tem sido muito
mais usada essa forma atualmente. Quando o programa criado com esta
caracterstica ele enviado para o computador cliente ainda na forma de
cdigo-fonte, que s ento interpretado e executado, dependendo assim
unicamente da capacidade de processamento do cliente.
J o programa em uma linguagem Server-side, executado no computador
Servidor e somente enviado para o cliente o resultado da execuo, sejam
dados puros ou uma pgina HTML.
Neste estudo, tratamos JavaScript apenas como uma linguagem de programao Client-side.
Segurana - por ser uma linguagem que executada no computador do cliente,
o JavaScript precisa ter severas restries para evitar que se faam cdigos
maliciosos que possam causar danos ao usurio.
As principais limitaes do JavaScript para garantia de segurana so a
proibio de:
Abrir e ler arquivos diretamente da mquina do usuario
Criar arquivos no computador do usurio (exceto cookies)
7

CONCEITOS

Ler configuraes do sistema do usuario

Acessar o hardware do cliente
Iniciar outros programas
Modificar o valor de um campo de formulrio do tipo <input>
No entanto, essas limitaes interferem muito pouco no desenvolvimento
de aplicaes web srias com a linguagem.

NCLEO DA LINGUAGEM JAVASCRIPT

Ncleo da Linguagem JavaScript

Nesta seo esto descritos os conceitos bsicos para se programar em JavaScript. Quem j possui algum conhecimento com outras linguagens de programao sabe que os comandos bsicos compem a "caixa de ferramentas" que
deve ser utilizada para criar qualquer aplicao, seja ela muito pequena ou gigantesca.
A aplicao em JavaScript sempre ser composta desses comandos e elementos menores, e a lgica com que foram colocados juntos para se relacionarem
possibilita a criao de uma soluo visando o resultado esperado.

4.1
4.1.1

Tipos de dados
Tipos numricos

Em JavaScript os nmeros so representados pelo padro IEEE 754. Todos os

valores numricos so "declarados" pela simples atribuio dos valores a uma
varivel.
Exemplos:
Inteiros
var x = 35; //atribuio na forma comum
var x = 0543; //notao octal que equivale a 357
var x = 0xBF; //notao hexadecimal que equivale a 191

Ponto flutuante
var x = 12,3; //declarado na forma comum
var x = 4,238e2; //declarado como potncia de 10 que equivale a 423,8

4.1.2

Booleano

Uma varivel do tipo booleano pode assumir apenas dois valores: true e false.
Os valores deste tipo so em geral usados pela linguagem como resultado de
comparaes e podem ser usados pelo usurio para valores de teste ou para
atributos que possuam apenas dois estados. Equivale ao uso de um inteiro com
valores 0 ou 1 na linguagem C.
O JavaScript converte automaticamente true para 1 e false para 0 quando
isso for necessrio.

NCLEO DA LINGUAGEM JAVASCRIPT

Exemplo:
var a = 14;
var b = 42;
var tr = (a == 14);
var fl = (a == b);
// Neste caso tr ir conter o valor true e fl o valor false.
var int1 = tr+1;
var int2 = fl+1;
// A varivel int1 ir conter o valor 2 (true + 1), pois true
// automaticamente convertido para 1 e int2 ir conter o valor 1
// (false + 1), pois false convertido para 0.

4.1.3

Indefinido

Uma varivel indefinida quando ela foi declarada de alguma forma mas no
possui nenhum valor concreto armazenado. Quando tentamos acessar uma
varivel que no teve nenhum valor associado a ela teremos como retorno "undefined" (indefinido).
Exemplo:
var marvin;
window.alert(marvin);
// Quando tentamos imprimir a varivel marvin na janela de alerta
// ser impresso "undefined" pois no h nenhum valor associado a ela.
var text = "";
// O mesmo no ocorre com o caso acima, pois essa varivel contm uma
// sequncia de caractres nula e nada ser impresso.

4.1.4

null

O null a ausncia de valor; quando atribuimos null a um objeto ou varivel

significa que essa varivel ou objeto no possui valor vlido.
Para efeito de comparao, se usarmos o operador de igualdade "==", JavaScript ir considerar iguais os valores null e undefined. E isso no afeta o uso
da comparao (var.metodo == null) quando queremos descobrir se um objeto
possui determinado mtodo. No entanto, se for necessrio diferenciar os dois
valores recomendvel o uso do operador "===" de identicidade. Assim, para
efeito de comparao, undefined e null so iguais, mas no idnticos.
Exemplo:
var vazio = null;
var ind;
var res = (vazio == ind);
var res1 = (vazio === ind);
// Quando executado a varivel res ter o valor true
// e res1 ter o valor false. E se tentarmos imprimir
// a varivel vazio, teremos null impresso.

10

4.1.5

NCLEO DA LINGUAGEM JAVASCRIPT

Strings

Strings so sequncias de caractres. Em JavaScript a string pode ser tanto

um tipo primitivo de dado como um objeto; no entanto, ao manipul-la temos a
impresso de que sejam objetos pois as strings em JavaScript possuem mtodos
que podemos invocar para realizar determinadas operaes sobre elas. Essa
confuso ocorre porque quando criamos uma string primitiva, o JavaScript cria
tambm um objeto string e converte automaticamente entre esses tipos quando
necessrio.
Este conceito ser explicado melhor adiante, quando tratarmos de objetos.
Para se declarar uma string, basta colocar uma sequncia de caractres entre
aspas simples ou duplas.
Exemplo:
var str = "Eu sou uma string!";
var str2 = Eu tambm sou uma string;
// Declarao de strings primitivas
var str3 = new String("Outra string");
// Acima um objeto string declarado de forma explcita
// no h diferena nenhuma entre esses dois tipos no que se refere
// a seu uso.

4.1.6

Arrays

Os Arrays so pares do tipo inteiro-valor para se mapear valores a partir de um

ndice numrico. Em JavaScript os Arrays so objetos com mtodos prprios.
Um objeto do tipo Array serve para se guardar uma coleo de tens em uma
nica varivel.
Exemplo:
var arr = new Array();
// Por ser um objeto podemos usar o "new" em sua criao
var arr = new Array(elem1,elem2, ... ,elemN);
// Dessa forma criamos um array j iniciado com elementos.
var arr = [1,2,3,4];
// outra forma iniciar um array com elementos sem usar o "new".
var arr = new Array(4);
// Dessa forma criamos um array vazio de 4 posies.

Para acessar as variveis dentro de um array basta usar o nome do array e o

ndice da varivel que se deseja acessar.
Exemplo:
arr[0] = "At mais e obrigado pelos peixes";
arr[1] = 42;
document.write(arr[1]);
//imprime o contedo de arr[1]

11

NCLEO DA LINGUAGEM JAVASCRIPT

Do mesmo modo, pode-se fazer atribuies ou simplesmente ler o contedo

da posio.
Em JavaScript os arrays podem conter valores de tipos diferentes sem
nenhum problema; podemos colocar em um mesmo array inteiros, strings,
booleanos e qualquer objeto que se desejar.

4.2

Operadores

Nesta seo listaremos, de forma sucinta, os principais operadores que compem o ncleo da linguagem JavaScript.
As tabelas a seguir mostram todos esses operadores.

4.2.1

4.2.2

Aritmticos
Operador

Operao

Exemplo

Adio

x+y

Subtrao

x-y

Multiplicao

x*y

Diviso

x/y

Mdulo (resto da diviso inteira)

x%y

Inverso de sinal

-x

++

Incremento

x++ ou ++x

--

Decremento

x-- ou --x

Comparao
Operador

Funo

Exemplo

==

Igual a

(x == y)

!=

Diferente de

(x != y)

===

Idntico a (igual e do mesmo tipo)

(x === y)

!==

No Idntico a

(x !== y)

>

Maior que

(x > y)

>=

Maior ou igual a

(x >= y)

<

Menor que

(x < y)

<=

Menor ou igual a

(x <= y)

12

4.2.3

NCLEO DA LINGUAGEM JAVASCRIPT

Bit a bit

Operador

Operao

Exemplo

&

E (AND)

(x & y)

OU (OR)

(x | y)

Ou Exclusivo (XOR)

(x y)

Negao (NOT)

>>

Deslocamento direita (com propagao de sinal)

(x >> 2)

<<

Deslocamento esquerda (preenchimento com zero)

(x << 1)

>>>

Deslocamento direita (preenchimento com zero)

(x >>> 3)

4.2.4

4.2.5

4.3

Atribuio
Operador

Exemplo

Equivalente

x=2

No possui

+=

x += y

x=x+y

-=

x -= y

x=x-y

*=

x *= y

x=x*y

/=

x /= y

x=x/y

%=

x %= y

x=x%y

&=

x &= y

x=x&y

|=

x |= y

x=x|y

x = y

x=xy

>>=

x >>= y

x = x >>= y

<<=

x <<= y

x = x <<= y

>>>=

x >>>= y

x = x >>>= y

Lgicos
Operador

Funo

Exemplo

&&

E Lgico

(x && y)

||

OU Lgico

(x || y)

Negao Lgica

!x

Estruturas de controle

if ... else
A estrutura if usada quando se deseja verificar se determinada expresso
verdadeira ou no, e executar comandos especficos para cada caso.

13

NCLEO DA LINGUAGEM JAVASCRIPT

Exemplo 1:
var a = 12;
var b = 5;
if (a == b) {
window.alert("12 igual a 5?!?!");
} else {
window.alert("a diferente de b");
}
// No caso acima a frase escrita seria "a diferente de b"

Assim, se a expresso for avaliada como verdadeira, o primeiro bloco de

comandos executado. Caso seja avaliada como falsa, o bloco de comandos que
segue o else ser executado.
Tambm possvel aglomerar mais testes, utilizando-se o comando else if.
Exemplo 2:
var a = 10;
if (a < 6) {
window.alert("a menor que 6");
} else if (a > 6) {
window.alert("a maior que 6");
} else {
window.alert("se a no maior nem menor que 6, a 6!");
}

Outra forma possvel de se utilizar o if com sua forma abreviada como

na linguagem C, usando o operador ternrio ?. Ele pode criar estruturas de
deciso simples em apenas uma linha de comando, porm, muitas vezes isso
pode prejudicar a clareza do seu cdigo, tornando-o complicado de entender
para algum que no esteja familiarizado com o uso desde operador condicional.
Exemplo:
var a = 8;
(a >= 5 ? window.alert("yes") : window.alert("no"));
// Isso equivale ao cdigo:
var a = 5;
if (a >= 5) {
window.alert("yes");
} else {
window.alert("no");
}

switch ... case

As estruturas do tipo switch so usadas quando queremos selecionar uma
opo dentre vrias disponveis.

14

NCLEO DA LINGUAGEM JAVASCRIPT

Exemplo:
var marvin = "robot";
switch (marvin) {
case "human":
document.write("hello carbon unit!");
break;
case "alien":
document.write("brrr I hate aliens!");
break;
case "robot":
document.write("emergency, to the rescue!");
break;
default:
document.write("what are you?");
break;
}

Ao contrrio de outras linguagens, os valores de comparao podem ser

strings alm de valores numricos.
O comando break faz com que o switch pare de verificar as outras possibilidades abaixo e pode ser omitido caso se deseje uma estrutura que tornar mais
de uma opo como verdadeira. Por fim, default opcional e corresponde a uma
sequncia de comandos que ser executada quando nenhum dos outros case o
forem.
while
Os laos do tipo while so usados quando se deseja que uma sequncia de aes
seja executada apenas no caso da expresso de condio ser vlida. Assim,
primeiro a expresso testada, para depois o contedo do lao ser executado ou
no.
Exemplo:
var cont = [5,2];
while ((cont[0]+cont[1]) < 15) {
cont[0]+=1;
cont[1]+=2;
document.write(cont0 = +cont[0]+cont1 = +cont[1]);
}
// Com o uso de while, no primeiro teste, cont[0]+cont[1] vale 7;

do ... while
Diferentemente do while, o do ... while primeiro executa o contedo do lao
uma vez e, depois disso, realiza o teste da expresso pare decidir se continuar
executando o lao ou ir seguir o resto do programa.

15

NCLEO DA LINGUAGEM JAVASCRIPT

Exemplo:
var cont = [5,2];
do{
cont[0]+=1;
cont[1]+=2;
document.write(cont0 = +cont[0]+cont1 =
} while ((cont[0]+cont[1]) < 15)
// Com o uso de do...while, no primeiro teste,
// j valer 10, e os contadores j terao sido
// pois o lao j foi executado a primeira vez

+cont[1]);
cont[0]+cont[1]
impressos uma vez
antes do teste!

for
Na maioria das vezes, quando usamos um lao do tipo while tambm construmos uma estrutura com um contador que incrementado a cada passo para
controle do lao e manipulao interna de objetos, arrays como nos exemplos
anteriores. Os laos for oferecem a vantagem de j possurem em sua estrutura
essa varivel de contador e increment-la de maneira implcita.
Exemplo:
var cont = [5,2,3];
for(var i=0 ; i < 3 ; i++) {
cont[i]++;
}
// Ao final do lao cada elemento do vetor cont foi incrementado em 1

O significado do comando for(varivel de contador inicializada ; condio de

parada ; incremento da varivel de contador).
for ... in
Existe uma segunda forma de se utilizar os laos for para percorrer propriedades
de um objeto.
Exemplo:
var doc = document;
for(var prop in doc) {
document.write(prop+"<br />");
}
// Esse lao automaticamente itera pelas propriedades do objeto,
// No caso ele listara todas as propriedades do objeto Document
// responsavel pelo controle do documento exibido na tela.
// Se olhar com cuidado encontrar nessa lista o proprio mtodo
// Write que usamos para imprimir no documento com document.write.

4.4

Funes

Funes possuem um papel muito importante na programao estrutural pelo

fato de ajudar muito na modularizao no programa, ou seja, viabiliza a diviso
do programa em partes menores e logicamente relacionadas. Em JavaScript,
16

NCLEO DA LINGUAGEM JAVASCRIPT

existem diversas maneiras de se declarar uma funo; mostraremos todas elas

aqui com exemplos.
Um ponto importante que em JavaScript as funes so consideradas como
dados, ou seja, podemos atribuir uma funo a uma varivel ou propriedade de
um objeto e a partir desde momento usar a varivel ou a propriedade da mesma
forma que se usaria a funo. Elas tambm podem ser passadas como argumentos para outras funes e por isso funes de JavaScript so chamadas funes
de alta ordem, elas podem tanto receber funes como argumento quanto retornar uma funo.
Expresso function
A primeira maneira de se declarar uma funo atravs do uso da palavra
chave function de maneira similar a como elas so declaradas na linguagem
C, com as diferenas de que em JavaScript no definimos o tipo de retorno
e nem mesmo o tipo dos argumentos. Uma funo complexa pode ser capaz
de tratar argumentos diferentes e retornar argumentos diferentes dependendo
das circunstncias nas quais foi invocada. Deve-se definir seu nome e seus
argumentos conforme mostra o exemplo a seguir.
Exemplo:
function incArray(array,valor) {
for(item in array) {
array[item]+=valor;
}
return array;
}
// Para invocar essa funo depois basta usar incArray(arg1,arg2)

O construtor Function()
A segunda forma de se declarar uma funo utilizando o construtor Function()
e o operador new, pois em JavaScript funes e objetos so interligados.
Exemplo:
var areaTri = new Function("b","h","return (b*h)/2;");
// a funo acima calcula a rea de um tringulo dadas sua base
// altura. Para invoc-la basta usar areaTri(arg1,arg2)

Esse construtor aceita um nmero qualquer de strings como argumentos. O

ultimo argumento ser sempre o corpo da funo contendo comandos separados
por ponto-e-virgula normalmente e todos os outros argumentos do construtor
sero considerados argumentos da funo que se est criando. Devido a sua

17

NCLEO DA LINGUAGEM JAVASCRIPT

estrutura, essa forma de se declarar funes costuma ser mais usada quando
precisamos declarar um funo pequena, ocupando apenas uma linha.
Funes como literais
Uma terceira e ltima forma de se declarar uma funo em JavaScript atravs
de literais.
Exemplo:
var areaTri = function(b,h) { return (b*h)/2; };
// Para invocar a funo basta usar areaTri(arg1,arg2) como
// na declarao pelo construtor

Essa forma basicamente a mesma que declarar atravs do construtor Function(). No entanto, ela melhor porque os comandos podem ser declarados com
a sintaxe normal de JavaScript ao invs de ser uma string como o caso do
construtor. Com literais no h necessidade de manter a funo em uma linha,
dentro das chaves podemos construir a funo usando um comando por linha
normalmente.

4.5

Objetos

Ao contrrio de uma varivel, um objeto pode conter diversos valores e de tipos

diferentes armazenados nele (atributos) e tambm possuir funes que operem
sobre esses valores (mtodos). Tanto os atributos, quanto os mtodos, so chamados de propriedades do objeto.
Para criar um objeto muito simples, basta invocar seu construtor atravs
do operador new.
Exemplo:
var objeto = new Object();
// Quando usamos o construtor Object() criamos um objeto
// genrico

Outra forma de criar um objeto atravs de literais.

Exemplo:
var nave = {
nome: "corao de ouro",
propulsao: "Gerador de improbabilidade infinita",
dono: "Zaphod Bebblebrox"
}
// Dessa forma, o objeto nave foi criado possuindo os atributos
// nome, propulso e dono com seus respectivos valores

18

NCLEO DA LINGUAGEM JAVASCRIPT

Para acessar uma propriedade de um objeto, basta usar objeto.propriedade e

no caso de mtodos adicionar o operador ().
Podemos definir, como j foi dito, um construtor para um objeto, assim podemos inicializar atributos logo no momento da instanciao do objeto. Para
que um construtor inicialize um atributo, ele precisa ser referenciado atravs da
palavra-chave this.
Exemplo:
function Carro(modelo, marca, ano, motor) {
this.modelo = modelo;
this.marca = marca;
this.ano = ano;
this.motor = motor;
}
// Depois para instanciar um objeto, basta usar:
var car = new Carro("G800" , "Gurgel" , 1976 , 1.0);
// Agora car j possui todos os atributos com dados:
document.write("Carro: "+car.modelo);
// o comando acima ir imprimir "Carro: G800"

Mtodos
No paradigma de orientao a objetos, os mtodos so simplesmente funes
que so invocadas por meio de um objeto! E em JavaScript isso levado to a
srio que a maneira de se criar mtodos para seus objetos leva isso ao p da
letra. Basta criarmos uma funo e atribu-la a uma propriedade do objeto.
Exemplo:
// Uma funo fictcia para clculo de um consumo de combustvel
function calc_consumo(distancia) {
return distancia/(15/this.motor);
}
// Agora atribuimos a funo, sem os argumentos, para a
// propriedade consumo. Considerando o objeto j instnciado
// do exemplo anterior
car.consumo = calc_consumo;
// Pronto! j podemos invoc-la fazendo:
var gas = car.consumo(200);
// calculando quanto o carro gastaria de
// combustvel em 200 kilmetros

Tambm podemos definir os mtodos dentro do prprio construtor de uma

funo, tanto definindo a funo fora e atribuindo no construtor, como definindo
a prpria funo dentro do prprio construtor uma vez que JavaScript suporta
o aninhamento de funes.

19

NCLEO DA LINGUAGEM JAVASCRIPT

Prototypes
Quando declaramos ou atribumos um mtodo no construtor de um objeto ele
ficar disponvel para todas as instncias criadas a partir desse construtor. No
entanto, existe um modo muito mais eficiente de se fazer isso, que com o uso
da propriedade prototype. Tudo o que for definido no prototype de um objeto
poder ser referenciado por todas as instncias desse objeto. Mesmo as propriedades do prototype que forem definidas ou alteradas depois da instanciao
sero acessveis aos objetos declarados anteriormente. Alm disso, importante
ter em mente que os atributos e funes declarados no prototype no so copiados para os objetos, portanto h uma economia significativa de memria quando
usamos muitas propriedades compartilhadas e instncias.
Exemplo:
// Vamos elaborar mais o exemplo do carro, mas dessa
// vez usando prototype
function calc_consumo(distancia) {
return distancia/(15/this.motor);
}
// Classe que representa um carro
function Carro(modelo, marca, ano, motor) {
this.modelo = modelo;
this.marca = marca;
this.ano = ano;
this.motor = motor;
}
Carro.prototype.rodas = 4;
Carro.prototype.consumo = calc_consumo;
// Agora a classe possui uma constante que informa
// o nmero de rodas e o mtodo consumo em seu
// prototype
var car1 = new Carro("G800" , "Gurgel" , 1976 , 1.0);
var car2 = new Carro("147" , "Fiat" , 1984 , 2.0);
// Podemos acessar agora tanto a constante rodas
// quanto o mtodo consumo
if(car1.rodas == 4) window.alert("ainda bem!");
var gas = car2.consumo(180);
// e o mais importante que ambas esto acessando
// apenas uma nica constante e um nico mtodo
// na memria

Arrays Associativos
Para finalizar nossa discusso sobre objetos, vamos mostrar como eles podem
ser usados como arrays associativos, ou seja, um array com objetos indexados
por valores no numricos. Isso s pode ser feito porque possvel acessarmos
atributos de um objeto usando MeuObjeto["atributo"]. Assim podemos simular
o comportamento de um array associativo armazenando cada item em um atri20

NCLEO DA LINGUAGEM JAVASCRIPT

buto.
Exemplo:
var arr = new Object();
arr["nome"] = "Zaphod Beeblebrox";
arr["cargo"] = "Presidente do Universo";
window.alert(arr["nome"]);
// Ir mostrar uma mensagem contendo:
// "Zaphod Beeblebrox"
// Note que no h nenhuma diferena se fizermos:
window.alert(arr.nome)
// Exceto que a string usada como ndice no modo []
// pode ser manipulada em tempo de execuo

A seguir, vamos dedicar ateno aos exemplos de mtodos e propriedades de

dois importantes objetos nativos do JavaScript: os Arrays e Strings.
4.5.1

Objeto String

Vamos nos ater agora aos mtodos das Strings, e embora existam outros, aqui
sero relacionados apenas os que fazem parte da ECMA 262-3 que equivale
ao JavaScript 1.6, pois estes mtodos so comuns a uma grande variedade de
browsers como FireFox, Netscape e Internet Explorer.
valueOf() - retona o valor primitivo do objeto string. til quando desejamos
atribuir o valor de um objeto string para uma varivel que seja do tipo
primitivo string.
Exemplo:
var stob = new String("Gerador de campos POP");
var str = stob.valueOf();
// Dessa forma stob ser um objeto do tipo Object e
// str ser uma varivel primitiva do tipo string.

charAt(pos) - retorna uma string contendo o caractere de posio pos da string.

Se no existir nenhum caractere nessa posio, o resultado uma string
vazia.
Exemplo:
var str = "Milliways";
var carac = str.charAt(5);
// A varivel carac dever conter o caractre w aps a execuo.
// pois a contagem comea em zero

concat(string1,string2, ... ,stringN) - este mtodo retorma uma string contendo a prpria string da qual o mtodo foi chamado e todos os caracteres
das strings que lhe foram passadas como argumentos, na ordem em que

21

NCLEO DA LINGUAGEM JAVASCRIPT

foram fornecidos.
Exemplo:
var str1 = "Praticamente ",str2 = "Inofensiva";
var result = str1.concat(str2);
// A varivel result dever conter a string
// "Praticamente Inofensiva" apos a execuo do cdigo.

indexOf(padrao,pos) - procura a ocorrncia da string contida em padrao a partir da posio pos dentro da string sobre a qual se invocou este mtodo e
retorna o ndice da primeira ocorrncia. Caso no encontre o padro buscado, retorna -1. O atributo pos no obrigatrio, se ele estiver indefinido,
o valor 0 (zero) ser assumido como padro e a busca nesse caso afetar a
string inteira.
Exemplo:
var cachalote = "Vou chamar isso de cauda, cauda um bom nome!";
var ind1 = cachalote.indexOf("cauda");
var ind2 = cachalote.indexOf("cauda",25);
var ind3 = cachalote.indexOf("improbabilidade");
// Aps executado a varivel ind1 dever ter o valor 19
// ind2 dever conter 26, que o valor da ocorrncia de cauda
// aps a posio 25, como foi especificado no parmetro
// e ind3 ir conter -1 pois o padro no encontrado.

lastIndexOf(padrao,pos) - como o mtodo anterior, no entanto, este retorna o

ndice da ltima ocorrncia de padrao na string sobre a qual se utilizou
o mtodo. Do mesmo modo, ser retornado -1 se o padro no for encontrado. No entanto, a posio de pos afeta a busca como um limitante
superior, ou seja, a busca ocorrer do ndice zero at o ndice contido em
pos. Essa uma diferena sutil, mas pode causar problemas se no for
levada em considerao.
Exemplo:
var cachalote = "Vou chamar isso de cauda, cauda um bom nome!";
var ind1 = cachalote.lastIndexOf("cauda");
var ind2 = cachalote.lastIndexOf("cauda",25);
var ind3 = cachalote.lastIndexOf("improbabilidade");
// Aps executado a varivel ind1 dever ter o valor 26
// ind2 dever conter 19, que o valor da ocorrncia de cauda
// at a posio 25, como foi especificado no parmetro
// e ind3 ir conter -1 pois o padro no encontrado.

replace(velho,novo) - busca na string uma substring que seja igual ao contedo de velho e a substitui pelo contedo de novo e retona a string resultante da substituio. Alm disso, o argumento novo pode ser uma funo.
Dessa maneira, para cada ocorrncia da substring a funo ser chamada
com 3 argumentos: a substring encontrada; o deslocamento do incio da
22

NCLEO DA LINGUAGEM JAVASCRIPT

string at a ocorrncia da substring; e por fim a prpria string; finalmente,

a substring encontrada ser substituda pelo retorno da funo chamada.
Exemplo 1:
var a = "No se esquea de sua toalha!";
var res1 = a.replace("toalha","mochila");
var res2 = a.replace("bicicleta","mochila");
// No primeiro caso a substring toalha foi encontrada e ser
// substituda por mochila. No segundo caso, como o padro no
// encontrado, no ocorre substituio nenhuma.

Exemplo 2:
// Uma funo que chama o mtodo toUpperCase para transformar
// a substring em caractres maisculos e retorn-la.
function up(sub,pos,str) {
return sub.toUpperCase();
}
\
var a = "No se esquea de sua toalha!";
var res = a.replace("toalha",up);
// Neste caso quando o padro encontrado a funo up
// chamada e seu valor de retorno substitui o padro.
// no caso "toalha" ser substitudo por "TOALHA".

Note que o exemplo acima ilustra apenas um uso muito simples do que
pode ser realmente feito com o uso do mtodo replace chamando uma funo. Essa funo pode ser to complexa quanto necessrio, desde que
receba os mesmos trs parmetros. O mtodo toUpperCase ser explicado
adiante.
search(padrao) - busca o contedo de padrao e retorna o ndice de incio desse
padro ou -1 caso ele no seja encontrado. Tambm possvel utilizar esse
mtodo com uma expresso regular em padrao.
Exemplo:
var str = "A vida, o universo e tudo mais";
var res1 = str.search("tudo");
var res2 = str.search("cachalote");
// O cdigo acima aps executado resultaria no valor 21 na
// varivel res1 e -1 na varivel res2, porque cachalote
// no foi encontrado na string.

slice(inicio,fim) - retona a substring contendo os caractres da posio inicio

at a posio fim, mas sem a incluir, ou at o final da string se fim for indefinido. No caso de inicio e fim serem valores negativos, eles sero tratados
como se estivssemos acessando o array na direo inversa (do fim para
o incio). Dessa forma, -1 equivale a posio do ltimo caractre, -2 a do
penltimo e assim por diante. No entanto, a posio de fim deve sempre

23

NCLEO DA LINGUAGEM JAVASCRIPT

corresponder a uma posio direita de incio, caso contrrio ser retornada uma string vazia.
Exemplo:
var
var
var
var

str = "At mais e obrigado pelos peixes";

res1 = str.slice(11); // Armazena "obrigado pelos peixes"
res2 = str.slice(11,20); // Armazena "obrigado"
res3 = str.slice(-7,-1); // Armazena "peixe".

split(separador,limite) - retorna um objeto Array contendo as substrings que

resultaram da separao da string original pelo contedo de separador,
sem inclu-lo. Se separador for indefinido, o Array resultante ter como
elemento apenas a string original. O argumento limite define o nmero
mximo de elementos que o array pode ter, excedido esse valor o Array ser
truncado. Caso o limite seja indefinido, no haver um limite no nmero
de elementos do array resultante.
Exemplo:
var dados = "Terra, Marte, Jupiter";
var arr1 = dados.split(", ");
var arr2 = dados.split(", ",2);
// Em arr1 ser armazenado um objeto array contendo na posio 1
// "Terra", na posio 2 "Marte" e na posio 3 "Jupiter".
// J em arr2 ser armazenado um array da mesma forma que descrito
// acima, no entanto apenas com as duas primeiras posies, ou seja,
// sem Jupiter.

substring(inicio,fim) - este mtodo funciona da mesma maneira e para os

mesmos fins que slice(inicio,fim). Retorna o resultado da converso do
objeto que chamou este mtodo para uma string, desde o caractre da
posio inicio, at o caractre anterior posio fim ou at o final da string,
caso fim no seja definido. Se o argumento foi invlido ou negativo, ele
ser automaticamente substitudo por zero e se o comprimento foi maior
do que a string, ser limitado pelo prprio tamanho da string.

toLowerCase() - os caractres da string so todos convertidos para letras minsculas. Se o objeto no for uma string, ento ele ser convertido automaticamente para string antes da operao ser realizada.
Exemplo:
var str =
var res =
// Depois
// conter

"Pense em um NMERO entre um e um zilho";

str.toLowerCase();
de executado o cdigo, a string res dever
a string "pense em um nmero entre um e um zilho".

24

NCLEO DA LINGUAGEM JAVASCRIPT

toUpperCase() - semelhante ao mtodo toLowerCase(), no entanto, ele converte

todas as letras da string para letras maisculas.
Exemplo:
var str = "Esta frase ser convertida";
var res = str.toUpperCase();
// Aps executado a varivel res ir conter a string
// "ESTA FRASE SER CONVERTIDA".

Quanto a propriedades, os objetos do tipo string s possuem uma:

length - valor inteiro que contm o nmero de caractres que compem a string.
4.5.2

Objeto Array

Agora faremos uma breve descrio dos mtodos que o objeto Array traz consigo.
concat(item1,item2, ... ,itemN) - agrupa dois ou mais arrays e retorna o resultado
Exemplo:
var x = ["a vida","o universo"];
var y = ["e tudo mais"];
var resultado = x.concat(y);
// Isso geraria o array resultado contendo
// ["a vida","o universo","e tudo mais"]

join(separador) - agrupa todos os elementos contidos no array em uma string

separados pelo que estiver na varivel separador, se um caractere separador no for fornecido a vrgula ser usada como padro. Para tal operao,
os elementos do array so convertidos para strings caso j no o sejam.
Exemplo:
var x = ["a vida","o universo","e tudo mais"];
var str = x.join("\ ");
// Aps a execuo do cdigo str ter "a vida o universo
// e tudo mais" pois os valores foram agrupados com
// espao como separador

pop() - o ltimo elemento do array removido e retornado.

Exemplo:
var vetor = [4,8,15,16,23,42];
var resposta = vetor.pop();
// Assim resposta ir conter o valor 42.

push(item1,item2, ... ,itemN) - insere os N itens no final do array, na ordem

que eles foram passados e retorna o novo tamanho (length) do array.
Exemplo:
25

NCLEO DA LINGUAGEM JAVASCRIPT

var vetor = ["Arthur","Ford",];

var retorno = vetor.push("Marvin");
// Agora o vetor possui ["Arthur","Ford","Marvin"]
// e o valor de retorno 3.

reverse() - retorna o array com os elementos na ordem inversa.

Exemplo:
var vetor = [1,2,3,4];
var inverso = vetor.reverse();
// Agora tanto inverso quanto vetor possuem [4,3,2,1]

shift() - o primeiro elemento do array removido e retornado.

Exemplo:
var vetor = [4,8,15,16,23,42];
var elemento = vetor.shift();
// Depois de executado elemento ter o valor 4
// e o vetor ser [8,15,16,23,42];

slice(inicio,fim) - retorna um array contendo os elementos de inicio at fim,

mas sem incluir o elemento da posio fim. Caso fim no seja declarado,
retorna um array de inicio at o final do array. Se inicio for negativo, o
valor ser contado a partir do final do array, por exemplo, -2 para indicar a
penltima posio, o mesmo acontece com fim caso seja negativo. Podemos
imaginar o sinal de negativo apenas como um inversor no sentido que os
elementos so considerados (inicio-fim para valores positivos e fim-inicio
para valores negativos).
Exemplo:
var meuarray = [1,2,3,4];
var meio = meuarray.slice(1,3);
var meio = meuarray.slice(-3,-1);
// nas duas atribuies acima a varivel meio receberia
// o array [2,3] pois -3 equivale a posio do elementos 2
// e a -1 equivale a posio do elemento 4. preciso lembrar
// que elemento fim no incluido no array de retorno.

sort(comparador) - mtodo que ordena os elementos objeto do Array por ordem

alfabtica. Isto significa que ele no funcionar para nmeros; para ele o
nmero 33 vir antes do nmero 7 pois o primeiro algarismo de 33 menor.
Para comparar nmeros ou outros tipos de elementos voc pode fornecer
ao mtodo um comparador.
Este deve ser uma funo com as seguintes caractersticas:
receber dois argumentos: x e y.

26

NCLEO DA LINGUAGEM JAVASCRIPT

retornar um valor negativo se x < y.

retornar zero se x == y.
retornar um valor positivo se x > y.
Caso contrrio, o mtodo ter o comportamento padro descrito acima.
Exemplo 1:
var vetor = ["d","y","a","n","m"];
vetor.sort();
// Aps a execuo vetor conter o array
["a","d","m","n","y"].

Exemplo 2:
// Uma funo simples para comparar valores numricos
// os detalhes sobre a utilizao de funes sero abordadas
// mais adiante.
function compara(x,y) {
if (x < y)
return -1;
else if (x == y)
return 0;
else
return 1;
}
var vetor = [5,45,1,4,16];
var errado = vetor.sort();
var certo = vetor.sort(compara);
// O array errado ir conter [1,16,4,45,5]
// e o array certo ir conter [1,4,5,16,45]

splice(inicio, quantidade, elem1, ... , elemN) - este mtodo pode ser usado
para remover, inserir ou substituir elementos em um Array. Os argumentos "inicio" e "quantidade" so obrigatrios, mas os elementos posteriores
so opcionais.
Para apenas remover elementos do array devemos usar o mtodo com: inicio sendo o ndice do primeiro elemento a ser removido, quantidade sendo
o numero de elementos a remover e nenhum outro argumento.
Para inserir um elemento sem remover nenhum outro, basta utilizar o mtodo com parmetro inicio sendo o ndice da posio onde sero inseridos
os elementos, quantidade deve ser 0 pois no desejamos remover nenhum
elemento e cada elemento a ser inserido deve ser um novo argumento subsequente.
Para substituir elementos do array, precisamos que inicio contenha o ndice
a partir do qual os elementos sero substitudos, quantidade deve conter
o nmero de elementos que sero substitudos e mais um argumento para
cada elemento quer ser inserido substituindo os elementos originais. Note
que se houver menos elementos do que o valor em quantidade, o excedente
27

NCLEO DA LINGUAGEM JAVASCRIPT

ser apenas removido sem substituio e se houver mais elementos do que

posies deletadas o excedente ser apenas inserido aps as substituies.
Exemplo 1:
var array = [1,2,3,4,5,6];
array.splice(2,2);
// Como resultado teremos em array o vetor [1,2,5,6]
// apenas deletamos dois elementos partindo do ndice 2.

Exemplo 2:
var array = [1,2,5,6];
array.splice(2,0,3,4);
// Como resultado teremos em array o vetor [1,2,3,4,5,6]
// Isso significa que a partir do ndice 2 deletamos 0 elementos
// e inserimos os valores 3 e 4

Exemplo 3:
var array = [1,2,3,4,5,6];
array.splice(2,2,7,8);
// Como resultado teremos em array o vetor [1,2,7,8,5,6]
// Ou seja, a partir do ndice 2 deletamos 2 elementos e inserimos
// os elementos 7 e 8 no lugar deles

Em todos os casos, o mtodo retorna um array contendo os elementos que

foram removidos se houve algum.
unshift(item1,item2, ... ,itemN) - adiciona um ou mais elementos ao incio do
array na ordem que os argumentos foram fornecidos e retorna o novo nmero de tens.
Exemplo:
var vetor = [4,2,6,1];
var tamanho = vetor.unshift(5,3);
// Aps a execuo a varivel tamanho ir conter o valor 6
// e vetor ser [5,3,4,2,6,1];

toString() - este mtodo se comporta da mesma maneira que o mtodo join

quando chamado sem nenhum parmetro, ou seja, ele separa os elementos
por vrgula.
Exemplo:
var vetor = ["Hiro","Peter","Claire"];
var result = vetor.toString();
// result ir conter a string "Hiro,Peter,Claire"

28

NCLEO DA LINGUAGEM JAVASCRIPT

A seguir, vamos dar uma olhada nas propriedades do objeto Arrays. As propriedades so acessadas de modo similar aos mtodos, basta usar o nome do
objeto.propriedade e depois disso teremos um exemplo simples.
constructor - esta propriedade uma referncia funo que criou este objeto
array.
length - propriedade que contm o tamanho do array, ou seja, a quantidade de
elementos contidos nele.
prototype - permite se adicionar propriedades e mtodos a este objeto array.
Este usado na orientao a objetos para que um objeto herde elementos
do prototype do outro.
Exemplo:
var vetor = ["a","b","c","d"];
var tam = vetor.length;
// A varivel tam ir conter o valor 4 porque existem quatro
// elementos no array

Encerramos nossa discusso sobre objetos aqui. Embora haja mais detalhes
que podem ser apresentados e caracterizem o potencial de uso sobre sobre eles,
no objetivo deste documento nos aprofundarmos muito nos tpicos abordados e sim proporcionar as ferramentas para um bom uso inicial da linguagem.
Aqueles que se interessarem pelo assunto podero encontrar muitas informaes nos materiais referenciados na Bibliografia.

4.6

Excees

Nas verses atuais, comandos para manipulao de excees foram includos

em JavaScript, de forma similar aos que a linguagem Java oferece. Temos os
comandos throw, try, catch e finally. Com eles possvel desenvolver uma aplicao em JavaScript capaz de tratar possveis erros em tempo de execuo, aumentando de maneira considervel sua robustez. Vamos mostrar com exemplos
o seu funcionamento.
Exemplo 1:
var arr = ["oi","ola"];
/* Funo para ler uma posio de um array e
* mostra-la na tela
*/
function lerarr(indice) {
window.alert(arr[indice]);
}
lerarr();
// Essa chamada resulta em um erro de lgica

29

NCLEO DA LINGUAGEM JAVASCRIPT

// pois como no passamos o argumento ndice

// ele pode conter lixo ou no ser definido.

Agora vamos introduzir o comando Throw para fazer com que essa funo
gere uma exceo que possa ser tratada pela prpria aplicao.
Exemplo 2:
/* Funo para ler uma posio de um array e
* mostra-la na tela
*/
function lerarr(indice) {
if (!indice) throw Error;
else window.alert(array[indice]);
}
lerarr();
// Ao executar essa chamada agora temos a mensagem:
// "uncaught exception: function Error() { [native code] }"

Agora temos uma funo que capaz de verificar a existncia do seu parmetro e caso ele no tenha sido passado, gera uma exceo.
JavaScript no nos obriga a tratar essas excees enquanto elas no forem
lanadas, por exemplo, no caso acima se tivssemos passado o argumento corretamente, no receberamos nenhuma mensagem dizendo que existe uma exceo no tratada. O interpretador ir apenas "reclamar" quando essa exceo
for lanada e no estiver sendo tratada, como no caso acima. Agora vejamos
como podemos trat-la.
Exemplo:
/* Considerando a funo do exemplo anterior j declarada */
try {
lerarr(); //funo que pode lanar exceo
} catch (e) {
// comandos a serem executados em caso de exceo
window.alert("Oops! No soup for you!");
} finally {
document.write("ocorreu um erro");
}

No cdigo acima, a chamada da funo est protegida pelos comandos try

... catch. O interpretador tenta executar os comandos que esto dentro do lao
try; se houver uma execeo lanada, ele pra a execuo imediatamente e pula
para o lao catch onde ele tentar tratar essa exceo.
O bloco finally pode ser utilizado para executar um bloco de comandos, havendo exceo ou no. Pode ser usado, por exemplo, para liberar alguma varavel
ou fechar um arquivo que esteja sendo editado. Em geral, esse bloco de comandos serve para garantir a chamada graceful degradation que consiste em uma
tolerncia a falhas de modo que o usurio possa continuar utilizando o sistema,
mesmo que haja uma queda na qualidade em funo do erro.
30

WEB 2.0

Web 2.0

5.1

O que Ajax?

O nome Ajax foi cunhado por Jesse James Garrett em 2005 para se referir a
um conjunto de tecnologias que j existiam, mas que passaram a ser usadas
de forma inovadora, enriquecendo as possibilidades de interao na web para
torn-las o mais prximo de aplicaes desktop quanto possvel.
As pginas web sempre sofreram com falta de interao devido a prpria natureza catica da internet, de possuir uma latncia alta e ser pouco confivel.
Assim, muito comum clicarmos em um link e termos que esperar as vezes at
alguns segundos, dependendo da conexo, at que a prxima pgina seja carregada do servidor para sua mquina. claro que as conexes tm melhorado
dia a dia, mas ainda assim o simples fato de que a cada mudana de pgina
precisamos exibir um documento totalmente novo que contm, alm dos dados
que requisitamos, todas as informaes de layout novamente, representa um
gasto de banda considervel.
Uma grande diferena do Ajax que as pginas apresentadas no browser
passam a ser aplicaes, ou seja, a primeira vez que entramos em uma pgina,
a aplicao carregada para nossa mquina e depois essa aplicao fica responsvel por requisitar ou enviar os dados para o servidor de forma assncrona.
Como a aplicao est o tempo todo no browser do cliente, este no perde a
interao e pode realizar aes mesmo enquanto espera a requisio de algum
dado do servidor. Por exemplo, continuar trabalhando com os dados que j foram carregados no passado. A Figura 1 ilustra essa diferena, nela podemos
observar que as aplicaes Ajax possuem uma camada a mais entre a interface
com o usurio e o servidor, essa camada a aplicao propriamente dita.

5.2

O papel do JavaScript

As quatro principais tecnologias utilizadas para o desenvolvimento de aplicaes

Ajax so esquematizadas na Figura 2. Elas desempenham as seguintes funes:
JavaScript responsvel por interligar todas as outras tecnologias, a linguagem de programao e portanto com ela desenvolvida a aplicao que ir
ser executada na mquina do cliente.
CSS (Cascade Style Sheets) um padro da W3C para estilizar elementos em
uma pgina web. Ele utilizado para dar uma boa aparncia s pginas,
podendo ser acessado e editado pelo JavaScript.
DOM (Document Object Model) permite que uma linguagem como o JavaScript
possa manipular e alterar a estrutura de documentos, por exemplo, uma
31

WEB 2.0

Figura 1: As diferenas entre uma pgina web comum e uma aplicao Ajax [2]

Figura 2: Arquitetura de uma aplicao Ajax. Observe como o cdigo JavaScript o elemento
responsvel por organizar todos os outros no cliente e trocar dados com o servidor

pgina durante seu tempo de vida no browser do cliente.

XMLHttpRequest um objeto existente em JavaScript que permite a troca de
dados com o servidor de forma assncrona.

32

WEB 2.0

Aqui daremos ateno especial ao JavaScript e como ele utilizado para

manipular os elementos listados anteriormente, CSS, DOM e XMLHttpRequest.
Sugerimos fortemente que procure entender melhor o uso do DOM e CSS pois
so ferramentas essenciais a um bom desenvolvedor web.
Com o cdigo JavaScript, podemos acessar todos os elementos da rvore
DOM de um documento e podemos alter-los, remov-los ou mesmo inserir um
novo elemento. Isso nos ajuda a exibir os dados novos que foram requisitados
do servidor pelo XMLHttpRequest. A seguir, vamos mostrar um exemplo simples
de como acessar a rvore DOM com JavaScript.

33

WEB 2.0

dom.js - Arquivo JavaScript

-----------------------------------------------------------------------------function divEdit() {
/* busca na rvore DOM o elemento com ID "header" */
var header = document.getElementById("header");
/* guarda o cdigo HTML de dentro do elemento */
var conteudo = header.innerHTML;
/* reescreve o contedo adicionando outras tags */
header.innerHTML = "<strong>"+conteudo+"</strong>";
/* cria um novo elemento DOM */
var paragrafo = document.createElement(p);
/* configura a propriedade title do elemento */
paragrafo.setAttribute(title,Novo pargrafo);
/* cria um n de texto */
var txt = document.createTextNode(Pargrafo adicionado a rvore DOM);
/* insere o texto ao paragrfo */
paragrafo.appendChild(txt);
/* insere o paragrfo na pgina */
header.appendChild(paragrafo);
}
index.html - Arquivo HTML
-----------------------------------------------------------------------------<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type="text/javascript" src="dom.js"></script>
</head>
<body>
<div id="header">
Exemplos de manipulao do DOM por JavaScript.
</div>
<hr />
<br />
<input type="button" value="Altera rvore DOM" onclick="divEdit()" />
</body>
</html>

Quando executar o exemplo acima em seu browser a pgina ir conter apenas uma frase no incio e um boto com o nome "Altera rvore DOM". Quando
for clicado esse boto, a funo divEdit() chamada e insere um novo pargrafo
na pgina sem necessidade de recarreg-la. Este exemplo simples mostra apenas como usar JavaScript para manipular a rvore DOM, no entramos na rea
do Ajax ainda, mas essa a base para o tratamento dos dados obtidos atravs
da tcnica.
34

5.3

WEB 2.0

Exemplo de aplicao Ajax

Nessa seo mostraremos um exemplo mais completo de uma aplicao Ajax

separada em 4 arquivos, um XML com dados, um CSS com o estilo da pgina,
um JS com a aplicao e o HTML que ir conter a aplicao.
A aplicao consiste em um pgina que fica constantemente requisitando
um arquivo de dados com notcias do servidor e atualizando a pgina caso haja
notcias novas nesse arquivo.
Vamos iniciar esse estudo com o arquivo de dados que armazenar as notcias. Ele um XML muito simples que armazena cada notcia com sua data,
ttulo e contedo:
Arquivo: data.xml
-----------------------------------------------------------------------------<?xml version="1.0" ?>
<news>
<new>
<date>05/06/2007</date>
<title>
Produo industrial declina 0,1% em abril ante maro,
informa IBGE
</title>
<content>
RIO - A produo industrial brasileira verificou
decrscimo de 0,1% em abril no confronto com um ms antes,
levando em conta ajuste sazonal. Foi a primeira taxa
negativa em seis meses, mostrou pesquisa do Instituto
Brasileiro de Geografia e Estatstica (IBGE) divulgada h
pouco. Ante abril do ano passado, houve, no entanto,
crescimento de 6%, marcando a 10a elevao na srie sem
ajustes e o melhor resultado desde junho de 2005 (6,4%)...
</content>
</new>
<new>
<date>05/06/2007</date>
<title>Bovespa recua 0,13%, aos 53.175 pontos</title>
<content>
SO PAULO - A Bolsa de Valores de So Paulo (Bovespa)
comeou as operaes de hoje com pequena variao, aos
53.244 pontos. Em mais de 30 minutos de atividades, porm,
o Ibovespa diminua 0,13%, aos 53.175 pontos, e volume
financeiro de R$ 290,025 milhes...
</content>
</new>
<new>
<date>11/06/2007</date>
<title>
Compadre de Lula declara PF que j sabia de grampo
</title>
<content>
Compadre do presidente Luiz Incio Lula da Silva, Dario
Morelli Filho, preso na Operao Xeque-Mate, disse em
depoimento Polcia Federal que j sabia da existncia de
grampo em seu telefone, segundo reportagem publicada nesta
segunda-feira pela Folha...
</content>

35

WEB 2.0

</new>
</news>

Agora vejamos o arquivo HTML. Devemos notar que o arquivo news.css

importado e o arquivo ajax.js includo na pgina, ambos sero listados a seguir. Alm disso, quando a pgina termina de carregar, a funo timedNews
chamada do arquivo de JavasScript com o nome do arquivo de dados como
argumento. Tambm temos algumas divs que sero utilizadas pela aplicao
como pontos de entrada de dados.
Arquivo: news.html
-----------------------------------------------------------------------------<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pt" >
<head>
<title>notcias 2.0</title>
<style type="text/css" media="all">
@import "news.css";
</style>
<script type="text/javascript" src="ajax.js"></script>
</head>
<body onload="timedNews(data.xml);">
<div id=loadDiv></div>
<div id=lastnews>
<h2>ltimas notcias</h2>
<div id=news></div>
</div>
</body>
</html>

O arquivo CSS usado apenas para estilizar o documento. Com CSS possvel tornar vrios textos aparentemente sem formatao em uma pgina muito
atraente!
No nosso caso, por se tratar de um pgina pequena e com o propsito de
mostrar apenas o funcionamento do Ajax, no precisamos de uma folha de estilos muito complexa. Assim, os comandos CSS trabalham mais com as margens,
cores e posicionamento das divs vistas no documento HTML anteriormente.
Arquivo: news.css
-----------------------------------------------------------------------------/* ---------------------- TAGS -------------------*/
body {
margin: 0;
text-align: center;
}
h2 {
font-size: 12pt;

36

WEB 2.0

font-weight: bold;
}
h3 {
font-size: 10pt;
font-weight: bold;
color: #8B0000;
padding-top: 10px;
border-top: 1px dashed #000000;
}

/* ---------------------- IDS -------------------*/

#loadDiv {
position: relative;
float: right;
top: 0;
background-color: #8B0000;
padding: 2px 2px 2px 2px;
font-size: 8pt;
color: #FFFFFF;
}
#lastnews {
padding: 4px 4px 4px 4px;
position: relative;
width: 192px;
margin: 0 auto;
text-align: left;
background-color: #BEBEBE
}

/* ---------------------- CLASSES -------------------*/

.corpo {
font-size: 8pt;
font-family: Verdana,Georgia;
}

Agora finalmente o arquivo JavaScript com a aplicao. Seu funcionamento

ser explicado a seguir.
Arquivo: ajax.js
-----------------------------------------------------------------------------var req=null;
// Constante para teste de quando os dados esto prontos para serem usados
var READY_STATE_COMPLETE = 4;

/**
* Funo que fica verificando as notcias no servidor em perodos
* de tempo
* @param data Endereco dos dados no servidor
*/
function timedNews(data)
{
// Busca os dados no servidor
sendRequest(data);

37

WEB 2.0

// Programa para ser executada novamente em 30 segundos

var t = setTimeout("timedNews("+data+")",30000);
}
/**
* Funo para requisitar uma pgina com dados
* @param url URL do dado a ser buscado
* @param params Parmetos (querystring) para pginas dinmicas
* @param HttpMethod Mtodo do protocolo HTTP, se omitido ser usado GET
*/
function sendRequest(url,params,HttpMethod)
{
// Verifica se o metodo foi setado, caso contrrio seta para GET
if (!HttpMethod)
{
HttpMethod = "GET";
}
// Instncia o objeto XMLHttpRequest
req = initXMLHttpRequest();
if (req)
{
// Seta a funo de callback
req.onreadystatechange = onReadyState;
req.open(HttpMethod,url,true);
req.setRequestHeader
("Content-Type","text/xml");
req.send(params);
}
}
/**
* Funo que inicia o objeto XMLHttpRequest de acordo com o browser cliente.
* @return objeto do tipo XMLHttpRequest.
*/
function initXMLHttpRequest()
{
var xRequest = null;
// cdigo para o Mozilla
if (window.XMLHttpRequest)
{
xRequest = new XMLHttpRequest();
}
// cdigo para o IE
else if (window.ActiveXObject)
{
xRequest = new ActiveXObject("Microsoft.XMLHTTP");
}
// Retorna o objeto instnciado
return xRequest;
}
/**
* Funo de callback que verifica se o dado j esta pronto para uso.
* Caso posistivo, chama um funo para trata-lo
*/
function onReadyState()
{
var ready = req.readyState;
// Se a requisio estiver completa
if (ready == READY_STATE_COMPLETE)

38

WEB 2.0

{
// Retira mensagem de loading
loadingMsg(0)
// Trata os dados recem chegados
parseNews();
}
// Caso contrrio coloca a mensagem de loading
else
{
loadingMsg(1);
}
}

/**
* Funo que dado a data e ttulo de uma notcia verifica se ela j
* esta sendo exibida na pgina.
* @param titulo O ttulo da notcia que se deseja buscar
* @return True se a notcia j existir e False caso contrrio
*/
function newDetect(titulo)
{
// Recupera a div onde as notcias sero inseridas
var sitenews = document.getElementById(news);
// Pega o primeiro filho
var oldnew = sitenews.firstChild;
if (oldnew == null)
{
// a div de notcias no possui filhos
// logo no existe nenhuma notcia
return false;
}
else
{
// Busca em todas as notcias
while (oldnew != null)
{
// Armazena o ttulo das notcias atual
var tit = oldnew.getElementsByTagName(h3);
tit = tit[0].innerHTML;
// Se for igual ao ttulo que estamos testando
if (tit == titulo)
{
// Retorna que a notcias j existe
return true;
}
oldnew = oldnew.nextSibling;
}
// Se nenhuma notcias for igual
// Retorna que no existe
return false;
}
}
/**
* Funo que recebe o XML carregado, separa as notcias e as
* insere na pgina caso ela no exista
*/
function parseNews()

39

WEB 2.0

{
var news = req.responseXML.getElementsByTagName(new);
for (var i=0 ; i<news.length ; i++)
{
var date = getNodeValue(news[i],date);
var title = getNodeValue(news[i],title);
var titcont = date+" - "+title;
// Veririca se a notcias j esta na pgina
if (newDetect(titcont) == false)
{
// Cria a div que ira conter a notcia
divnew = document.createElement(div);
divnew.setAttribute(id,new+i);
// Cria o ttulo das notcias
var titulo = document.createElement(h3);
titulo.appendChild(document.createTextNode(titcont));
// Cria o corpo das notcia
var corpo = document.createElement(p);
corpo.setAttribute(class,corpo);
// Agrega o contedo obtido ao corpo criado anteriormente
var txt = document.createTextNode(getNodeValue(news[i],content));
corpo.appendChild(txt);
// Agrega o ttulo e o corpo a div criada no inicio
divnew.appendChild(titulo);
divnew.appendChild(corpo);
// Busca onde a notcias ser inserida na pgina
var base = document.getElementById(news);
// Insere a notcia como primeira da pgina
base.insertBefore(divnew,base.firstChild);
}
}
}
/**
* Funo para pegar o valor de uma propriedade de um objeto
* @param obj
* @param tag Nome da propriedade que se deseja saber o valor
* @return retorna uma string contendo o valor da propriedade
*/
function getNodeValue(obj,tag)
{
return obj.getElementsByTagName(tag)[0].firstChild.nodeValue;
}

/**
* Funo que indica indica ao usurio quando dados estam sendo carregados
* @param set Valor 1 para colocar a mensagem, qualquer outro para remover
*/
function loadingMsg(set)
{
if (set == 1)
{
var msg_div = document.getElementById(loadDiv);

40

WEB 2.0

if (msg_div == null)
{
// Cria a div de loading
msg_div = document.createElement(div);
msg_div.setAttribute(id,loadDiv);
// Insere o texto na div criada
var txt = document.createTextNode(Loading...);
msg_div.appendChild(txt);
// Agrega a div no corpo da pgina
var corpo = document.getElementsByTagName(body);
corpo[0].appendChild(msg_div);
}
else
{
// Altera o contedo da div
msg_div.innerHTML = "Loading...";
}
}
else
{
// Busca a div de loading na pgina
var msg_div = document.getElementById(loadDiv);
// Se encontrar remove
if (msg_div != null)
{
var pai = msg_div.parentNode;
pai.removeChild(msg_div);
}
}
}

Agora vamos descrever cada uma das funes separadamente, para esclarecer quaisquer dvidas que tenham restado aps a leitura do cdigo todo.
timedNews(data) - esta a nica funo que chamada diretamente pela pgina HTML da nossa aplicao; ela a funo que chama a sendRequest
para requisitar os dados do servidor e em seguida se programa para ser
executada novamente a cada 30 segundos, por isso, a cada perodo de 30
segundos o arquivo de dados requisitado novamente e as notcias contidas nele so verificadas pela funo parseNews.
sendRequest(url,params,HttpMethod) - funo responsvel por requisitar os
dados do servidor de forma assncrona ao servidor; para isso, ela instancia um objeto XMLHttpRequest utilizando a funo initXMLHttpRequest e
depois configura a funco onReadyState como callback da chamada.
initXMLHttpRequest() - esta funo existe apenas devido a incompatibilidade
entre os browsers. Como nos dois mais usados o objeto XMLHttpRequest
possui diferenas na implementao, essa funo testa a existncia desses
objetos e retorna qual foi encontrado para funo sendRequest utiliz-lo.

41

WEB 2.0

onReadyState() - funo configurada como callback na sendRequest. Ela chamada a cada mudana no estado da requisio e enquanto este estado no
for igual a READY_STATE_COMPLETE ele configura uma mensagem escrito
"loading..."na pgina. Quando a requisio estiver completa, a mensagem
de loading retirada e chama-se a funo parseNews() para tratar os dados
recm chegados.
newDetect(titulo) - dado um ttulo, esta funo verifica se j existe alguma
notcia com este ttulo inserida na pgina. Se houver retorna true, caso
contrrio retornar false.
parseNews() - chamada para tratar os dados quando eles chegam do servidor.
Essa funo primeiro recupera a data e o ttulo das notcias e os junta
formando assim o ttulo que ser colocado na pgina, aps isso ela chama
a funo newDetect para verificar se esse ttulo j se encontra na pgina,
se for retornado false o notcia inserida na pgina, caso contrrio nada
ser feito, pois se trata de uma notcia antiga.
getNodeValue(obj,tag) - esta funo serve apenas para recuperar o valor de um
atributo de um n DOM, ela foi implementada apenas para facilitar esse
processo e evitar linhas de comando muito grandes na funo parseNews.
loadingMsg(set) - controla a exibio/remoo da mensagem de loading na pgina. Se set for 1 a mensagem colocada, para outro valor a mensagem de
loading removida, se existir.

42

FERRAMENTAS

Ferramentas

Inicialmente, quando as tecnologias para web surgiram, programar para web

utilizando JavaScript era extremamente penoso, pois no haviam ferramentas
para auxlio de debugging e os prprios interpretadores muitas vezes no indicavam qualquer tipo de erro para o usurio. O resultado de um erro era muitas
vezes uma tela branca no browser e nenhuma dica de onde o erro poderia ter
ocorrido!
Com o surgimento das tcnicas Ajax e a chamada Web 2.0, o uso da linguagem cresceu bastante e vem se tornando cada vez mais popular. Isso trouxe
diversos benefcios, pois comearam a surgir consoles melhores, debuggers, ferramentas para auxiliar a documentao e at mesmo uma IDE (Integrated Development Environment) para desenvolvimento de aplicaes JavaScript.
Nas prximas sees, vamos indicar apenas algumas das ferramentas muito
utilizadas quando se trabalha com JavaScript.

Firebug
Firebug uma extenso para o browser Firefox que mostra um console muito
completo. Ele capaz de mostrar erros de JavaScript, XML e CSS. Alm disso,
ele guarda um registro das chamadas ao XMLHttpRequest, o que o torna uma
boa ferramenta para debugging de aplicaes AJAX.
Com Firebug possvel colocar breakpoints ao longo do cdigo, observar variveis especficas, alterar tanto o JavaScript quanto CSS e XML em tempo de
execuo e ver o resultado naquele momento. Tambm pode ser usado para
mostrar a rvore DOM de uma pgina.
Na Figura 3 pode-se observar as abas que contm o Console, o cdigo HTML,
CSS, o script em JavaScript, a rvore DOM e por ltimo, a guia Net, que mede
quanto tempo foi necessrio para carregar cada uma das requisies de dados
feitas pela pgina.
Os aspectos que chamam ateno sobre o aplicativo Firebug que ele muito
simples de usar, so necessrios apenas alguns poucos minutos para se familiarizar com sua interface e com algum tempo de uso, podemos descobrir que ele
uma ferramenta realmente completa e poderosa.
Para usurios de outros browsers, o Firebug possui uma verso lite que pode
ser usada em qualquer browser. Essa verso consiste em um arquivo na prpria
linguagem JavaScript que deve ser includo na pgina que se deseja utiliz-lo.
A extenso Firebug se encontra na verso 1.05 e pode ser encontrada em
www.getfirebug.com. Recentemente, tivemos a notcia de que a Yahoo! dedicar
um de seus engenheiros para auxiliar o autor da ferramenta a desenvolv-la.

43

FERRAMENTAS

Figura 3: Screenshot do FireBug detectando uma exceo no tratada no Google Images

JSDoc
JSDoc uma ferramenta implementada em Perl que faz busca por comentrios
em arquivos JavaScript e gera documentos HTML com toda a documentao.
Ela baseada nos mesmos comandos da ferramenta javadoc, utilizada para
gerar documentao para Java.
Usurios que j esto familiarizados com javadoc no tero nenhum problema para usar o JSDoc, pois a maior parte da sintaxe utilizada para os comentrios a mesma e ela serve tanto para documentar arquivos JavaScript
estruturais quanto orientados a objeto. Na Figura 4 vemos uma amostra de
como so as pginas geradas pelo aplicativo.
A pgina da ferramenta pode ser encontrada em http://jsdoc.sourceforge.net

44

FERRAMENTAS

Figura 4:

Screenshot do JSDoc mostrando o pgina de documentao gerada a partir do

arquivo ajax.js mostrado no nosso exemplo de aplicao Ajax

Spket IDE
Spket uma IDE para desenvolvimento de JavaScript, SVG, XUL/XBL e Yahoo!
Widget. Ele oferece recursos como completar o cdigo enquanto digitamos e
destaque visual da sintaxe da linguagem. Podemos encontr-lo em duas verses,
como plugin para o editor Eclipse ou como uma plataforma independente (RCP).
A verso atual 1.5.9 e pode ser encontrada em http://www.spket.com. Na
Figura 5 podemos ver sua tela de edio.

45

REFERNCIAS

Figura 5: Screenshot da IDE Spket mostrando a edio de um arquivo do tipo xbl

Referncias
[1] Douglas Crockford. Javascript: The worlds most misunderstood
programming language, 2001. Disponvel em
http://javascript.crockford.com/javascript.html , ltimo acesso em
10/01/2007.
[2] Jesse J. Garrett. Ajax: A new approach to web applications, 2005.
Disponvel em
http://www.adaptivepath.com/publications/essays/archives/000385.php ,
ltimo acesso em 04/06/2007.
[3] Gavin Kistner. Object-oriented programming in javascript, 2003. Disponvel
em http://phrogz.net/JS/Classes/OOPinJS.html , ltimo acesso em
10/01/2007.
[4] Mozilla Development Center MDC. Core javascript 1.5 guide. Disponvel em
http://developer.mozilla.org/en/docs/Core_JavaScript_1.5_Guide , ltimo
acesso em 10/01/2007.
[5] Wikipedia the free encyclopedia. Javascript. Disponvel em
http://en.wikipedia.org/wiki/Js , ltimo acesso em 13/01/2007.
46

REFERNCIAS

[6] w3 schools. Javascript tutorial. Disponvel em

http://www.w3schools.com/js/default.asp , ltimo acesso em
16/01/2007.

47