do javascript

8/8/2019 do Javascript

1/47

Aprendendo JavaScript

Filipe Del Nero Grillo([email protected])

Renata Pontin de Mattos Fortes

So Carlos 14 de agosto de 2008


2/47

Sumrio

1 Introduo 3

2 Histrico de JavaScript 4

3 Conceitos 6

4 Ncleo da Linguagem JavaScript 94.1 Tipos de dados . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9

4.1.1 Tipos numricos . . . . . . . . . . . . . . . . . . . . . . . . . . 94.1.2 Booleano . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 94.1.3 Indenido . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 104.1.4 null . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10

4.1.5 Strings . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 114.1.6 Arrays . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11

4.2 Operadores . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 124.2.1 Aritmticos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 124.2.2 Comparao . . . . . . . . . . . . . . . . . . . . . . . . . . . . 124.2.3 Bit a bit . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 134.2.4 Atribuio . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 134.2.5 Lgicos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13

4.3 Estruturas de controle . . . . . . . . . . . . . . . . . . . . . . . . . . 134.4 Funes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 164.5 Objetos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18

4.5.1 Objeto String . . . . . . . . . . . . . . . . . . . . . . . . . . . . 214.5.2 Objeto Array . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25

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

5 Web 2.0 315.1 O que Ajax? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31

5.2 O papel do JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . 315.3 Exemplo de aplicao Ajax . . . . . . . . . . . . . . . . . . . . . . . . 35

6 Ferramentas 43


3/47

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 ede 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 deser uma linguagem leve, para fazer truques em pginas, faz com que muitaspessoas 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 sugereque 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 osseus aplicativos a Google Inc., como por exemplo: no site de busca Google Se-arch 1 , no GMail2 , no Google Maps 3 , entre outros. O que torna esses aplicativosto 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 cientca

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 visandoservir de base inicial para que outros interessados possam ter um roteiro prticopara prosseguir e se aprofundar em seus estudos.

1 www.google.com2 www.gmail.com3 www.google.com/maps

3


4/47

2 HISTRICO DE JAVASCRIPT

2 Histrico de JavaScript

A linguagem JavaScript foi criada pela Netscape Communications Corporation 4

e foi desenvolvida com o nome de Mocha , depois passou a se chamar LiveScript

e foi nalmente lanada como JavaScript em 1995 integrando a verso 2.0B3do navegador Netscape e visava implementar uma tecnologia de processamentomodo 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 relaoalm 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, popularmenteconhecido como ActiveX, usada nos navegadores Internet Explorer.

JavaScript permite criar pequenos programas embutidos no prprio cdigode uma pgina HTML e capazes de gerar nmeros, processar alguns dados, vericar formulrios, alterar valor de elementos HTML e criar elementos HTML. Tudo isso diretamente no computador cliente, evitando a troca de informaescom o servidor e o tempo passa a depender somente do processamento local docliente, no mais da latncia da rede 5 .

A verso mais recente da linguagem a 1.7, at o momento de redao destedocumento. 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 dasqualidades de diversas outras linguagens, como: listas associativas, tipagem di-nmica 6 e expresses regulares de Perl e a sintaxe similar a C/C++, linguagensde 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; entreoutros.

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

4


5/47

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


6/47

3 CONCEITOS

3 Conceitos

Nesta seo, so descritos alguns conceitos que esto bastante relacionadoscom a linguagem JavaScript. Esses conceitos possibilitam caracterizar melhor a

linguagem e seu potencial de utilizao.Linguagem compilada vs. Linguagem script - de maneira simplicada, pode-

mos explicar esta diferena de linguagens, considerando-se os procedimen-tos necessrios para que os programas codicados 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 daquelecdigo-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 oexecutvel 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 doprprio 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. Podemosilustrar isso com um script de cinema, que de forma anloga, diz passo a passo as aes que os atores devem realizar em um lme. Assim, o roteirodescrito 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 sealterar o programa, eliminando a sequncia editar-compilar-linkar-rodar comum em softwares compilados. Como preo dessa exibilidade, perde-seum pouco em desempenho e ser sempre necessrio possuir um interpre-tador no computador onde ser rodado o script, enquanto o arquivo binrioresultante de compilao no necessita do compilador em seu ambiente deuso.

JavaScript uma linguagem de script.

Tipagem Dinmica - tambm conhecida como Duck Typing , indica como os ti-

6


7/47

3 CONCEITOS

pos das variveis so denidos. Nesse modo de tipagem, as variveis podemassumir qualquer tipo ou objeto denido pela linguagem, por exemplo, seuma 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 precisodenir o tipo da varivel no momento da sua declarao. O tipo da varivel denido implicitamente pelo seu valor.

O contrrio disso ocorre na tipagem esttica, em que o tipo da varivelprecisa ser denido antes de us-la e isso vericado 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 funescomo argumentos ou que tm uma funo como sada. Com isso, possvelcriar o que so chamadas function factories que so funes que a partir deoutras funes simples so capazes de realizar aes mais complexas.

JavaScript uma linguagem de programao que possibilita a denio defunes 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 muitomais usada essa forma atualmente. Quando o programa criado com esta caracterstica ele enviado para o computador cliente ainda na forma decdigo-fonte, que s ento interpretado e executado, dependendo assimunicamente 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, sejamdados 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 cdigosmaliciosos 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


8/47

3 CONCEITOS

Ler conguraes do sistema do usuario

Acessar o hardware do cliente

Iniciar outros programas

Modicar o valor de um campo de formulrio do tipo

No entanto, essas limitaes interferem muito pouco no desenvolvimentode aplicaes web srias com a linguagem.

8


9/47

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" quedeve 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 relacionarempossibilita a criao de uma soluo visando o resultado esperado.

4.1 Tipos de dados

4.1.1 Tipos numricosEm JavaScript os nmeros so representados pelo padro IEEE 754. Todos os valores numricos so "declarados" pela simples atribuio dos valores a uma varivel.Exemplos:Inteirosvar x = 35; //atribuio na forma comumvar x = 0543; //notao octal que equivale a 357var x = 0xBF; //notao hexadecimal que equivale a 191

Ponto utuantevar 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 decomparaes 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 quandoisso for necessrio.

9


10/47


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 Indenido

Uma varivel indenida quando ela foi declarada de alguma forma mas nopossui nenhum valor concreto armazenado. Quando tentamos acessar uma

varivel que no teve nenhum valor associado a ela teremos como retorno " undened " (indenido).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 varivelsignica 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 undened . E isso no afeta o usoda comparao (var.metodo == null) quando queremos descobrir se um objetopossui determinado mtodo. No entanto, se for necessrio diferenciar os dois

valores recomendvel o uso do operador "===" de identicidade. Assim, para efeito de comparao, undened 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


11/47


4.1.5 Strings

Strings so sequncias de caractres. Em JavaScript a string pode ser tantoum 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 mtodosque 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 quandonecessrio.

Este conceito ser explicado melhor adiante, quando tratarmos de objetos.Para se declarar uma string, basta colocar uma sequncia de caractres entreaspas 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 umndice 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 ondice 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


12/47


Do mesmo modo, pode-se fazer atribuies ou simplesmente ler o contedoda posio.

Em JavaScript os arrays podem conter valores de tipos diferentes semnenhum 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)


13/47


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 vericar se determinada expresso verdadeira ou no, e executar comandos especcos para cada caso.

13


14/47


Exemplo 1:

var a = 12;var b = 5;i f (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 decomandos executado. Caso seja avaliada como falsa, o bloco de comandos quesegue o else ser executado.

Tambm possvel aglomerar mais testes, utilizando-se o comando else if .

Exemplo 2:var a = 10;i f ( a < 6 ) {

window.alert("a menor que 6");} e lse i f (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 comona linguagem C, usando o operador ternrio ? . Ele pode criar estruturas dedeciso simples em apenas uma linha de comando, porm, muitas vezes issopode 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;i f (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


15/47


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 vericar as outras possibili-dades abaixo e pode ser omitido caso se deseje uma estrutura que tornar maisde uma opo como verdadeira. Por m, default opcional e corresponde a uma sequncia de comandos que ser executada quando nenhum dos outros case oforem.

while

Os laos do tipo while so usados quando se deseja que uma sequncia de aesseja executada apenas no caso da expresso de condio ser vlida. Assim,primeiro a expresso testada, para depois o contedo do lao ser executado ouno.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 laouma vez e, depois disso, realiza o teste da expresso pare decidir se continuar executando o lao ou ir seguir o resto do programa.

15


16/47


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 exemplosanteriores. 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 signicado do comando for(varivel de contador inicializada ; condio deparada ; incremento da varivel de contador).

for ... in

Existe uma segunda forma de se utilizar os laos for para percorrer propriedadesde 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 divisodo programa em partes menores e logicamente relacionadas. Em JavaScript,

16


17/47


existem diversas maneiras de se declarar uma funo; mostraremos todas elasaqui com exemplos.

Um ponto importante que em JavaScript as funes so consideradas comodados, 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 funesde 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 linguagemC, com as diferenas de que em JavaScript no denimos o tipo de retornoe nem mesmo o tipo dos argumentos. Uma funo complexa pode ser capazde tratar argumentos diferentes e retornar argumentos diferentes dependendodas circunstncias nas quais foi invocada. Deve-se denir seu nome e seusargumentos 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. Oultimo argumento ser sempre o corpo da funo contendo comandos separadospor ponto-e-virgula normalmente e todos os outros argumentos do construtor sero considerados argumentos da funo que se est criando. Devido a sua

17


18/47


estrutura, essa forma de se declarar funes costuma ser mais usada quandoprecisamos declarar um funo pequena, ocupando apenas uma linha.

Funes como literais

Uma terceira e ltima forma de se declarar uma funo em JavaScript atravsde 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 coma sintaxe normal de JavaScript ao invs de ser uma string como o caso doconstrutor. 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 operemsobre 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 atravsdo 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


19/47


Para acessar uma propriedade de um objeto, basta usar objeto.propriedade eno caso de mtodos adicionar o operador ().

Podemos denir, 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 funesque 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 denir os mtodos dentro do prprio construtor de uma funo, tanto denindo a funo fora e atribuindo no construtor, como denindoa prpria funo dentro do prprio construtor uma vez que JavaScript suporta o aninhamento de funes.

19


20/47


Prototypes

Quando declaramos ou atribumos um mtodo no construtor de um objeto elecar disponvel para todas as instncias criadas a partir desse construtor. Noentanto, existe um modo muito mais eciente de se fazer isso, que com o usoda propriedade prototype . Tudo o que for denido no prototype de um objetopoder ser referenciado por todas as instncias desse objeto. Mesmo as pro-priedades do prototype que forem denidas ou alteradas depois da instanciaosero acessveis aos objetos declarados anteriormente. Alm disso, importanteter em mente que os atributos e funes declarados no prototype no so copia-dos para os objetos, portanto h uma economia signicativa de memria quandousamos 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 nalizar nossa discusso sobre objetos, vamos mostrar como eles podemser usados como arrays associativos, ou seja, um array com objetos indexadospor valores no numricos. Isso s pode ser feito porque possvel acessarmosatributos de um objeto usando MeuObjeto["atributo"] . Assim podemos simular o comportamento de um array associativo armazenando cada item em um atri-

20


21/47


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 dedois 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, aquisero relacionados apenas os que fazem parte da ECMA 262-3 que equivaleao JavaScript 1.6, pois estes mtodos so comuns a uma grande variedade debrowsers 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 tipoprimitivo 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 caracteresdas strings que lhe foram passadas como argumentos, na ordem em que

21


22/47


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 eretorna o ndice da primeira ocorrncia. Caso no encontre o padro bus-cado, retorna -1. O atributo pos no obrigatrio, se ele estiver indenido,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 ondice da ltima ocorrncia de padrao na string sobre a qual se utilizouo 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 limitantesuperior, 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


23/47


string at a ocorrncia da substring; e por m a prpria string; nalmente,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 quepode ser realmente feito com o uso do mtodo replace chamando uma fun-o. Essa funo pode ser to complexa quanto necessrio, desde quereceba os mesmos trs parmetros. O mtodo toUpperCase ser explicadoadiante.

search(padrao) - busca o contedo de padrao e retorna o ndice de incio dessepadro ou -1 caso ele no seja encontrado. Tambm possvel utilizar essemtodo 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,m) - retona a substring contendo os caractres da posio inicio at a posio m , mas sem a incluir, ou at o nal da string se m for inde-nido. No caso de inicio e m serem valores negativos, eles sero tratadoscomo se estivssemos acessando o array na direo inversa (do m para

o incio). Dessa forma, -1 equivale a posio do ltimo caractre, -2 a dopenltimo e assim por diante. No entanto, a posio de m deve sempre

23


24/47


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 queresultaram da separao da string original pelo contedo de separador ,sem inclu-lo. Se separador for indenido, o Array resultante ter comoelemento apenas a string original. O argumento limite dene o nmeromximo de elementos que o array pode ter, excedido esse valor o Array ser

truncado. Caso o limite seja indenido, no haver um limite no nmerode 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,m) - este mtodo funciona da mesma maneira e para osmesmos ns que slice(inicio,m). Retorna o resultado da converso doobjeto que chamou este mtodo para uma string, desde o caractre da posio inicio , at o caractre anterior posio m ou at o nal da string,caso m no seja denido. Se o argumento foi invlido ou negativo, eleser 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


25/47


toUpperCase() - semelhante ao mtodo toLowerCase(), no entanto, ele convertetodas 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-

sultadoExemplo:

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 stringseparados 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 nal do array, na ordemque eles foram passados e retorna o novo tamanho ( length ) do array.Exemplo:

25


26/47


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,m) - retorna um array contendo os elementos de inicio at m,mas sem incluir o elemento da posio m. Caso m no seja declarado,retorna um array de inicio at o nal do array. Se inicio for negativo, o valor ser contado a partir do nal do array, por exemplo, -2 para indicar a

penltima posio, o mesmo acontece com m caso seja negativo. Podemosimaginar o sinal de negativo apenas como um inversor no sentido que oselementos so considerados (inicio-m para valores positivos e m-iniciopara 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 ordemalfabtica. Isto signica que ele no funcionar para nmeros; para ele onmero 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


27/47


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

i f (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 usadopara remover, inserir ou substituir elementos em um Array. Os argumen-tos "inicio" e "quantidade" so obrigatrios, mas os elementos posterioresso opcionais.

Para apenas remover elementos do array devemos usar o mtodo com: ini-cio sendo o ndice do primeiro elemento a ser removido, quantidade sendoo 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 inseridosos elementos, quantidade deve ser 0 pois no desejamos remover nenhumelemento e cada elemento a ser inserido deve ser um novo argumento sub-sequente.

Para substituir elementos do array, precisamos que inicio contenha o ndicea 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. Noteque se houver menos elementos do que o valor em quantidade, o excedente

27


28/47


ser apenas removido sem substituio e se houver mais elementos do queposies 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 joinquando chamado sem nenhum parmetro, ou seja, ele separa os elementospor vrgula.Exemplo:

var vetor = ["Hiro","Peter","Claire"];var result = vetor.toString();// result ir conter a string "Hiro,Peter,Claire"

28


29/47


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 doobjeto.propriedade e depois disso teremos um exemplo simples.

constructor - esta propriedade uma referncia funo que criou este objetoarray.

length - propriedade que contm o tamanho do array, ou seja, a quantidade deelementos contidos nele.

prototype - permite se adicionar propriedades e mtodos a este objeto array.Este usado na orientao a objetos para que um objeto herde elementosdo 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 detalhesque 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 Bibliograa.

4.6 Excees

Nas verses atuais, comandos para manipulao de excees foram includosem JavaScript, de forma similar aos que a linguagem Java oferece. Temos oscomandos throw, try, catch e nally . 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 exemploso 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


30/47


// 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 funogere 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 vericar 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 foremlanadas, 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 exceofor lanada e no estiver sendo tratada, como no caso acima. Agora vejamoscomo 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 laotry ; se houver uma execeo lanada, ele pra a execuo imediatamente e pula para o lao catch onde ele tentar tratar essa exceo.

O bloco nally pode ser utilizado para executar um bloco de comandos, ha- vendo exceo ou no. Pode ser usado, por exemplo, para liberar alguma varavelou 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


31/47

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 usadasde 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 convel. Assim, muito comum clicarmos em um link e termos que esperar as vezes atalguns 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 dadosque requisitamos, todas as informaes de layout novamente, representa umgasto 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 ca 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 algumdado do servidor. Por exemplo, continuar trabalhando com os dados que j fo-ram carregados no passado. A Figura 1 ilustra essa diferena, nela podemosobservar que as aplicaes Ajax possuem uma camada a mais entre a interfacecom 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 emuma 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


32/47

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 dedados com o servidor de forma assncrona.

32


33/47

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 poisso ferramentas essenciais a um bom desenvolvedor web.

Com o cdigo JavaScript, podemos acessar todos os elementos da rvoreDOM de um documento e podemos alter-los, remov-los ou mesmo inserir umnovo elemento. Isso nos ajuda a exibir os dados novos que foram requisitadosdo servidor pelo XMLHttpRequest. A seguir, vamos mostrar um exemplo simplesde como acessar a rvore DOM com JavaScript.

33


34/47

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". Quandofor clicado esse boto, a funo divEdit() chamada e insere um novo pargrafona 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 atravsda tcnica.

34


35/47

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 ca constantemente requisitandoum 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 10 a 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


36/47


37/47

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 nalmente o arquivo JavaScript com a aplicao. Seu funcionamentoser 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


38/47

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 XMLHttpRequest

req = 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


39/47

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


40/47

5 WEB 2.0

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

for (var i=0 ; i


41/47

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 30segundos o arquivo de dados requisitado novamente e as notcias conti-

das nele so vericadas pela funo parseNews.

sendRequest(url,params,HttpMethod) - funo responsvel por requisitar osdados do servidor de forma assncrona ao servidor; para isso, ela instan-cia um objeto XMLHttpRequest utilizando a funo initXMLHttpRequest edepois congura a funco onReadyState como callback da chamada.

initXMLHttpRequest() - esta funo existe apenas devido a incompatibilidadeentre os browsers. Como nos dois mais usados o objeto XMLHttpRequest possui diferenas na implementao, essa funo testa a existncia dessesobjetos e retorna qual foi encontrado para funo sendRequest utiliz-lo.

41


42/47

5 WEB 2.0

onReadyState() - funo congurada como callback na sendRequest. Ela cha-mada a cada mudana no estado da requisio e enquanto este estado nofor igual a READY_STATE_COMPLETE ele congura 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 dadosrecm chegados.

newDetect(titulo) - dado um ttulo, esta funo verica se j existe alguma notcia com este ttulo inserida na pgina. Se houver retorna true, casocontrrio 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 vericar 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 umatributo de um n DOM, ela foi implementada apenas para facilitar esseprocesso 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 deloading removida, se existir.

42


43/47

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 trouxediversos 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 muitoutilizadas quando se trabalha com JavaScript.

Firebug

Firebug uma extenso para o browser Firefox que mostra um console muitocompleto. 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 especcas, alterar tanto o JavaScript quanto CSS e XML em tempo deexecuo 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 medequanto tempo foi necessrio para carregar cada uma das requisies de dadosfeitas pela pgina.

Os aspectos que chamam ateno sobre o aplicativo Firebug que ele muitosimples 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 podeser 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.getrebug.com. Recentemente, tivemos a notcia de que a Yahoo! dedicar um de seus engenheiros para auxiliar o autor da ferramenta a desenvolv-la.

43


44/47

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 comentriosem 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 co-mentrios a mesma e ela serve tanto para documentar arquivos JavaScript estruturais quanto orientados a objeto. Na Figura 4 vemos uma amostra decomo so as pginas geradas pelo aplicativo.

A pgina da ferramenta pode ser encontrada em http://jsdoc.sourceforge.net

44


45/47

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


46/47

REFERNCIAS

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

Referncias

[1] Douglas Crockford. Javascript: The worlds most misunderstoodprogramming language, 2001. Disponvel emhttp://javascript.crockford.com/javascript.html , ltimo acesso em10/01/2007.

[2] Jesse J. Garrett. Ajax: A new approach to web applications, 2005.Disponvel emhttp://www.adaptivepath.com/publications/essays/archives/000385.php ,ltimo acesso em 04/06/2007.

[3] Gavin Kistner. Object-oriented programming in javascript, 2003. Disponvelem http://phrogz.net/JS/Classes/OOPinJS.html , ltimo acesso em10/01/2007.

[4] Mozilla Development Center MDC. Core javascript 1.5 guide. Disponvel emhttp://developer.mozilla.org/en/docs/Core_JavaScript_1.5_Guide , ltimoacesso em 10/01/2007.

[5] Wikipedia the free encyclopedia. Javascript. Disponvel emhttp://en.wikipedia.org/wiki/Js , ltimo acesso em 13/01/2007.

46


47/47

REFERNCIAS

[6] w3 schools. Javascript tutorial. Disponvel emhttp://www.w3schools.com/js/default.asp , ltimo acesso em16/01/2007.

do javascript

Documents