Material de estudo Javascript

Aprendendo JavaScript

Filipe Del Nero Grillo([email protected])

Renata Pontin de Mattos Fortes

So Carlos 14 de agosto de 2008

Sumrio

1 Introduo 3

2 Histrico de JavaScript 4

3 Conceitos 6

4 Ncleo da Linguagem JavaScript 9

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

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

4.1.2 Booleano . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9

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

4.6 Excees . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29

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

1 INTRODUO

1 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 Se-

arch1, 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.

1www.google.com2www.gmail.com3www.google.com/maps

3

2 HISTRICO DE JAVASCRIPT

2 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 sin-

taxe 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 Compu-

ter Manufacturers Association) que atualmente seguido por outros desenvol-

vedores 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 di-

nmica6 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 programa-

o estrutural e orientada a objeto; possui funes de ordem superior; entre

outros.

Mesmo com o alto potencial de recursos para desenvolvimento de progra-

mas oferecido pela linguagem, grande parte das pessoas que usam JavaScript

4Netscape foi uma companhia de servios de computao bastante conhecida em funo deseu web browser, e atualmente subsidiria da AOL.

5Latncia de rede a diferena de tempo do momento de envio de um pacote pela rede at omomento em que ele recebido no destino sendo normalmente este tempo o responsvel pelademora ao se receber dados durante uma navegao na web por exemplo.

6Tambm 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!".

4

2 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.

5

3 CONCEITOS

3 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, pode-

mos explicar esta diferena de linguagens, considerando-se os procedimen-

tos 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 correspon-

dente e compil-lo; durante a compilao, o cdigo-fonte lido pelo com-

pilador que gera ento um arquivo de sada com uma traduo daquele

cdigo-fonte para linguagem de mquina (o cdigo executvel); esse ar-

quivo em linguagem de mquina pode ser ento executado no computador

e no pode ser facilmente editado, pois no compreensvel por ns se-

res 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 interpre-

tada (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 interpre-

tador 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 ti-

6

3 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 com-

portar 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 compi-

lao. 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 progra-

mao 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

3 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

No entanto, essas limitaes interferem muito pouco no desenvolvimento

de aplicaes web srias com a linguagem.

8

4 NCLEO DA LINGUAGEM JAVASCRIPT

4 Ncleo da Linguagem JavaScript

Nesta seo esto descritos os conceitos bsicos para se programar em JavaS-

cript. Quem j possui algum conhecimento com outras linguagens de progra-

mao sabe que os comandos bsicos compem a "caixa de ferramentas" que

deve ser utilizada para criar qualquer aplicao, seja ela muito pequena ou gi-

gantesca.

A aplicao em JavaScript sempre ser composta desses comandos e elemen-

tos menores, e a lgica com que foram colocados juntos para se relacionarem

possibilita a criao de uma soluo visando o resultado esperado.

4.1 Tipos de dados

4.1.1 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 comumvar x = 0543; //notao octal que equivale a 357var x = 0xBF; //notao hexadecimal que equivale a 191

Ponto flutuantevar x = 12,3; //declarado na forma comumvar 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.

9


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 "un-

defined" (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 "==", JavaS-

cript 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 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 primitivasvar 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 criaovar 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


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 com-

pem o ncleo da linguagem JavaScript.

As tabelas a seguir mostram todos esses operadores.

4.2.1 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

4.2.2 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)


4.2.3 Bit a bit

Operador Operao Exemplo

& E (AND) (x & y)

| OU (OR) (x | y)

Ou Exclusivo (XOR) (x y)

Negao (NOT) x

>> Deslocamento direita (com propagao de sinal) (x >> 2)

> Deslocamento direita (preenchimento com zero) (x >>> 3)

4.2.4 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 = x y

>>= x >>= y x = x >>= y

= y x = x >>>= y

4.2.5 Lgicos

Operador Funo Exemplo

&& E Lgico (x && y)

|| OU Lgico (x || y)

! Negao Lgica !x

4.3 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


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


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 possibili-

dades 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


Exemplo:

var cont = [5,2];do{

cont[0]+=1;cont[1]+=2;document.write(cont0 = +cont[0]+cont1 = +cont[1]);

} while ((cont[0]+cont[1]) < 15)// Com o uso de do...while, no primeiro teste, cont[0]+cont[1]// j valer 10, e os contadores j terao sido impressos uma vez// pois o lao j foi executado a primeira vez antes do teste!

for

Na maioria das vezes, quando usamos um lao do tipo while tambm constru-

mos 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+"");}// 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


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 argumen-

tos para outras funes e por isso funes de JavaScript so chamadas funes

de alta ordem, elas podem tanto receber funes como argumento quanto retor-

nar 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


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 Func-

tion(). 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 cha-

mados 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


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 po-

demos 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 combustvelfunction 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 anteriorcar.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


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 pro-

priedades 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 copia-

dos 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 carrofunction 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 consumoif(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 atri-

20


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 con-

tendo 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


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 par-

tir 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 bus-

cado, 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 en-

contrado. 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 con-

tedo de velho e a substitui pelo contedo de novo e retona a string resul-

tante 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


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 fun-

o. 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 inde-

finido. 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


corresponder a uma posio direita de incio, caso contrrio ser retor-

nada uma string vazia.

Exemplo:

var str = "At mais e obrigado pelos peixes";var res1 = str.slice(11); // Armazena "obrigado pelos peixes"var res2 = str.slice(11,20); // Armazena "obrigado"var 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 mi-

nsculas. Se o objeto no for uma string, ento ele ser convertido auto-

maticamente para string antes da operao ser realizada.

Exemplo:

var str = "Pense em um NMERO entre um e um zilho";var res = str.toLowerCase();// Depois de executado o cdigo, a string res dever// conter a string "pense em um nmero entre um e um zilho".

24


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 re-

sultado

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 separa-

dor 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


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


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;

elsereturn 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 argumen-

tos "inicio" e "quantidade" so obrigatrios, mas os elementos posteriores

so opcionais.

Para apenas remover elementos do array devemos usar o mtodo com: ini-

cio 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 m-

todo 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 sub-

sequente.

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


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 n-

mero 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


A seguir, vamos dar uma olhada nas propriedades do objeto Arrays. As pro-

priedades 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 aborda-

dos e sim proporcionar as ferramentas para um bom uso inicial da linguagem.

Aqueles que se interessarem pelo assunto podero encontrar muitas informa-

es 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 apli-

cao em JavaScript capaz de tratar possveis erros em tempo de execuo, au-

mentando 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


// 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 par-

metro 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 cor-

retamente, no receberamos nenhuma mensagem dizendo que existe uma ex-

ceo 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 exceowindow.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, ha-

vendo 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 coman-

dos 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

5 WEB 2.0

5 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 na-

tureza 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 car-

regada 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 res-

ponsvel 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 fo-

ram 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 lingua-

gem 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

5 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 elementoresponsvel 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

5 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

5 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 = ""+conteudo+"";

/* 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--------------------------------------------------------------------------------

Exemplos de manipulao do DOM por JavaScript.

Quando executar o exemplo acima em seu browser a pgina ir conter ape-

nas 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 ape-

nas 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 WEB 2.0

5.3 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 not-

cias. Ele um XML muito simples que armazena cada notcia com sua data,

ttulo e contedo:

Arquivo: data.xml--------------------------------------------------------------------------------

05/06/2007

Produo industrial declina 0,1% em abril ante maro,informa IBGE

RIO - A produo industrial brasileira verificoudecrscimo de 0,1% em abril no confronto com um ms antes,levando em conta ajuste sazonal. Foi a primeira taxanegativa em seis meses, mostrou pesquisa do InstitutoBrasileiro de Geografia e Estatstica (IBGE) divulgada hpouco. Ante abril do ano passado, houve, no entanto,crescimento de 6%, marcando a 10a elevao na srie semajustes e o melhor resultado desde junho de 2005 (6,4%)...

05/06/2007Bovespa recua 0,13%, aos 53.175 pontos

SO PAULO - A Bolsa de Valores de So Paulo (Bovespa)comeou as operaes de hoje com pequena variao, aos53.244 pontos. Em mais de 30 minutos de atividades, porm,o Ibovespa diminua 0,13%, aos 53.175 pontos, e volumefinanceiro de R$ 290,025 milhes...

11/06/2007

Compadre de Lula declara PF que j sabia de grampo

Compadre do presidente Luiz Incio Lula da Silva, DarioMorelli Filho, preso na Operao Xeque-Mate, disse emdepoimento Polcia Federal que j sabia da existncia degrampo em seu telefone, segundo reportagem publicada nestasegunda-feira pela Folha...

35

5 WEB 2.0

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 se-

guir. 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--------------------------------------------------------------------------------

notcias 2.0

@import "news.css";

ltimas notcias

O arquivo CSS usado apenas para estilizar o documento. Com CSS pos-

svel 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 esti-

los 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

5 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 usadosvar 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 servidorsendRequest(data);

37

5 WEB 2.0

// Programa para ser executada novamente em 30 segundosvar 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 GETif (!HttpMethod){

HttpMethod = "GET";}

// Instncia o objeto XMLHttpRequestreq = initXMLHttpRequest();if (req){

// Seta a funo de callbackreq.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 Mozillaif (window.XMLHttpRequest){

xRequest = new XMLHttpRequest();}// cdigo para o IEelse if (window.ActiveXObject){

xRequest = new ActiveXObject("Microsoft.XMLHTTP");}

// Retorna o objeto instnciadoreturn 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 completaif (ready == READY_STATE_COMPLETE)

38

5 WEB 2.0

{// Retira mensagem de loadingloadingMsg(0)// Trata os dados recem chegadosparseNews();

}// Caso contrrio coloca a mensagem de loadingelse{

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 inseridasvar sitenews = document.getElementById(news);// Pega o primeiro filhovar oldnew = sitenews.firstChild;

if (oldnew == null){

// a div de notcias no possui filhos// logo no existe nenhuma notciareturn false;

}else{

// Busca em todas as notciaswhile (oldnew != null){

// Armazena o ttulo das notcias atualvar tit = oldnew.getElementsByTagName(h3);tit = tit[0].innerHTML;

// Se for igual ao ttulo que estamos testandoif (tit == titulo){

// Retorna que a notcias j existereturn true;

}oldnew = oldnew.nextSibling;

}// Se nenhuma notcias for igual// Retorna que no existereturn false;

}}

/*** Funo que recebe o XML carregado, separa as notcias e as

* insere na pgina caso ela no exista

*/function parseNews()

39

5 WEB 2.0

{var news = req.responseXML.getElementsByTagName(new);

for (var i=0 ; i

5 WEB 2.0

if (msg_div == null){

// Cria a div de loadingmsg_div = document.createElement(div);msg_div.setAttribute(id,loadDiv);

// Insere o texto na div criadavar txt = document.createTextNode(Loading...);msg_div.appendChild(txt);

// Agrega a div no corpo da pginavar corpo = document.getElementsByTagName(body);corpo[0].appendChild(msg_div);

}else{

// Altera o contedo da divmsg_div.innerHTML = "Loading...";

}}else{

// Busca a div de loading na pginavar msg_div = document.getElementById(loadDiv);

// Se encontrar removeif (msg_div != null){

var pai = msg_div.parentNode;pai.removeChild(msg_div);

}}

}

Agora vamos descrever cada uma das funes separadamente, para esclare-

cer quaisquer dvidas que tenham restado aps a leitura do cdigo todo.

timedNews(data) - esta a nica funo que chamada diretamente pela p-

gina 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 conti-

das 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 instan-

cia 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

5 WEB 2.0

onReadyState() - funo configurada como callback na sendRequest. Ela cha-

mada 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 p-

gina. Se set for 1 a mensagem colocada, para outro valor a mensagem de

loading removida, se existir.

42

6 FERRAMENTAS

6 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 indi-

cavam 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 lingua-

gem cresceu bastante e vem se tornando cada vez mais popular. Isso trouxe

diversos benefcios, pois comearam a surgir consoles melhores, debuggers, fer-

ramentas para auxiliar a documentao e at mesmo uma IDE (Integrated Deve-

lopment 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 va-

riveis 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 famili-

arizar 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

6 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 pro-

blema para usar o JSDoc, pois a maior parte da sintaxe utilizada para os co-

mentrios 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

6 FERRAMENTAS

Figura 4: Screenshot do JSDoc mostrando o pgina de documentao gerada a partir doarquivo 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

Documents

Material de estudo Javascript