Web Sites Com AJAX - Objetos de Metodos Do DHTML (DOM)

8/16/2019 Web Sites Com AJAX - Objetos de Metodos Do DHTML (DOM)

1/102

IntroduçãoWeb Sites com AjaxMuito se tem falado sobre Ajax nos últimos meses e, de fato, não é por menos.Com ele temos outros níveis de interfaces e interaç es com o usu!rio.Com essa metodolo"ia, pode#se levar $ %eb possibilidades &ue antes erampossíveis somente no 'mbito des(top. Muita coisa boa ainda est! por vir e,inicialmente, a mel)or delas é &ue voc* ser! capa+ de trabal)ar com os recursosdo Ajax em seus aplicativos.

oc* aprender! além do Ajax, as tecnolo"ias utili+adas para trabal)ar com ele ea pensar nos usu!rios como um todo, ou seja, desenvolver um aplicativo apto aatender a todos os usu!rios, &ue possuam ou não o suporte ao -ava cript.

Como dito anteriormente, o curso abordar! a metodolo"ia Ajax / sim,metodologia, pois Ajax não é uma tecnologia. Acalme-se, você entenderá) e aslin"ua"ens utili+adas por tal recurso0 -ava cript, 12M,134M5 entre outrosassuntos.Ao término dos estudos reali+aremos um projeto final com o intuito depraticarmos o &ue aprendemos no decorrer do curso. 6ssa ser! a )ora decolocarmos tudo em pr!tica e con)ecermos as inúmeras possibilidades &ue esterecurso ir! nos proporcionar.7espire fundo, relaxe, e si"a em frente. 3! muito conteúdo bacana adiante $ suaespera.2 entendimento de todos os passos ser! primordial para uma boa compreensão eaproveitamento de todo o processo.

Capítulo 8 # 9ref!cio

:este primeiro capítulo abordaremos uma lin"ua"em fant!stica, capa+ de tornar

o seu site mais din'mico e interativo. 2 mel)or de tudo é &ue aprend*#laé super fácil e divertido. Abordaremos o JavaScript .

9ara início de conversa, o -avascript é uma lin"ua"em client#side, ou seja, elatrabal)a / roda, funciona ; do lado do cliente, o &ue si"nifica di+er, &ue ela não éexecutada no servidor e sim no bro%ser, ao contr!rio de al"umas lin"ua"enscomo o 939, A 9, - 9, .:64, dentre outras.

2 cliente tem total controle sobre o suporte a essa lin"ua"em no bro%serutili+ado, então l)e afirmo &ue ele pode desabilitar o funcionamento desserecurso. Assim, o &ue desenvolvemos fica obsoleto e inútil. 9or issotrabal)aremos com o JavaScript não-obstrutivo , ou seja, se o cliente

Página 1 de 102

http://www.cin.ufpe.br/~ejgcs/ajax/1.htmhttp://www.cin.ufpe.br/~ejgcs/ajax/3.htm?pg=1.htmhttp://www.cin.ufpe.br/~ejgcs/ajax/3.htm?pg=1.htmhttp://www.cin.ufpe.br/~ejgcs/ajax/1.htm


2/102

desabilitar o funcionamento dessa lin"ua"em ou se ele não tiver suporte a ela,ele utili+ar! nosso sistema normalmente, mas sem os recursos desenvolvidoscom a referida lin"ua"em.

9ara &uem "osta de )ist


3/102

Ao iniciarmos a ta" "script# , di+emos o tipo de scriptutili+adot%pe&'text$javascript' e assim o bro%ser entender! &ue no conteúdodessa ta" )! comandos -ava cript para serem executados e os recon)ecerão.

9ara finali+ar a execução dos c


4/102

2 ar&uivo externo separa a camada de comportamento /-ava cript; da camada deconteúdo /34M5;.

Script no head da página

2 script é inserido desta forma0

...

< ead>

//códigos JavaScript

...

2s c

//códigos JavaScript

...

Página # de 102

http://www.cin.ufpe.br/~ejgcs/ajax/1.8.htm?pg=1.1.htmhttp://www.cin.ufpe.br/~ejgcs/ajax/1.8.htm?pg=1.1.htm


5/102

2s c


6/102

A ta" "noscript# é muito importante &uando se trata de acessibilidade, poisoferece um conteúdo alternativo para os usu!rios sem suporte $ lin"ua"em em&uestão.

Coment!rios em -ava cript2s coment!rios na lin"ua"em -ava cript tem função similar $s demaislin"ua"ens, ou seja, de explicar o &ue determinado comando fa+, nota de al"umautor, lembretes, dentre outras.

4udo &ue estiver en"lobado pelos coment!rios é i"norado pelo interpretador do-ava cript.

3! dois tipos de coment!rios, são eles0 $$ e $0 0$ . 2 primeiro é o coment!rio

de uma lin)a somente, en&uanto o se"undo suporta v!rias.2bserve os exemplos0

// ,sto & - co entário de - a $in a.

/ ,sto & - co entário de várias $in as' e o interpretador ignora

todo esse conte do. -e nos per ite a cria34o de notas e

$e retes e nossos códigos. /

Fm detal)e importante &ue não podemos es&uecer, é a utili+ação do coment!rioem 34M5 ao utili+ar c

Página 7 de 102


7/102

...

A"ora vamos compreender isso mel)or. 2s bro%sers &ue não suportam o-ava cript irão exibi#lo como se fosse parte do conteúdo da p!"ina. 9ara preveniressa pr!tica, utili+amos o coment!rio em 34M5.

9orém, voc* pode se per"untar0 9ara &ue serve as duas barras /JJ; antes dofec)amento do coment!rioK ?om, elas previnem &ue o interpretador do-ava cript as interpretem.

Al"uns detal)es para finali+ar"Case sensitive"

-ava cript é case sensitive , o &ue si"nifica di+er, &ue o interpretador diferenciaminúsculas de maiúsculas. eja um exemplo0

:o exemplo acima, "ostaríamos de exibir através do alert./ a mensa"em

arma+enada na vari!vel txtMs, / não se preocupe, você aprenderá so"revariáveis ainda ;, mas como c)amamos a vari!vel por txtms,1 o -ava cript não aencontrou no c


8/102

ejamos o exemplo abaixo0

a$ert%" stes deta$ es...")* a$ert%"... s4o i portantes")*

a$ert%" oto-...")

a$ert%"? di:eren3a@")

6u sempre utili+o o 2 / ponto e v%rgula ; no final de min)as declaraç es.

2utro detal)e0 se voc* utili+ar al"um compressor de -ava cript # para redu&ir otaman#o do arquivo # e os seus c


9/102

var no e9ariave$ = "va$or9ariave$"*

o-

no e9ariave$ = "va$or9ariave$"*

oc* pode criar uma vari!vel com ou sem a declaração var , mas é aconsel)!velutili+!#la.

A"ora, vamos con)ecer al"umas re"rin)as necess!rias ao criar as vari!veis0

• Como dito no Capítulo 8, -ava cript é case#sensitive , o &ue si"nifica di+er &ueuma vari!vel com o nome iMasters é diferente de imasters .

• 1eve#se iniciar o nome de uma vari!vel com uma letra ou com um sublin)ado /O;.

Atribuindo valor a u#a variável

amos atribuir o valor JavaScript $ vari!vel assunto. 2bserve0

var ass-nto = "JavaScript"*

$ariáveis globais e locais

2s nomes ,lobal e local são bem explicativos. amos compreend*#los bem, poissão de "rande import'ncia.

Luando criamos uma vari!vel dentro de uma função, a tornamos local , ou seja,acessível somente dentro da função em &ue foi criada. 9odemos até criar outrasvari!veis com o mesmo nome e com valores diferentes, porém elas terãovalidade somente dentro da função em &ue foi declarada.

-! as vari!veis "lobais, são declaradas fora das funç es e ficam acessíveis a todae &ual&uer função na p!"ina em &ue a vari!vel esteja.

2peradores

2peradores são símbolos utili+ados para atuar sobre valores. Con)eceremos osdiferentes operadores utili+ados no -ava cript.

2peradores aritméticos

Página B de 102


10/102

Operador Descrição

Exemplo

Resultado

+ Adição

x=2

y=8x+y

10

- Subtraçãox=10y=3x-y

7

* Multiplicação x=4

x*5 20

/ i!i"ão 15/5 3

# M$dulo &r'"ta(t' da di!i"ão)5#210#810#2

120

++ (cr' '(to" x=5

x++ x=,

-- 'cr' '(to" x=5

x-- x=4

2peradores de comparação

Operador Descrição Exemplo

Resultado

== i.ual a 5==8 al"o

=== i.ual a &co para o !alor ' o

tipo)

x=5 'y= 5x==5x===5

!'rdad'iro

al"o

= (ão i.ual 5 =8 !'rdad'ir

o

Página 10 de 102


11/102

Operador Descrição Exemplo

Resultado

aior u' 5 8 al"o

'(or u' 5 8 !'rdad'ir

o

= aior u' ou i.ual a 5 =8 al"o

'(or u' ou i.ual a 5 =8 !'rdad'ir

o

2peradores l


12/102

Operador Exemplo É o mesmo que

*= x*=y x=x*y

/= x/=y x=x/y

#= x#= x=x#y

2perador condicional

2perador condicional é a&uele &ue atribui um valor a uma determinada vari!velcom base em uma condição, ou seja, se a condição for verdadeira, teremos um

valor x, caso contr!rio um valor E.Con)eça a sintaxe desse tipo de condição0

no eCa9ariáve$ = %condi34o) @ va$orSe9erdadeiro D va$orSeEa$so*

A"ora observe um exemplo para uma mel)or compreensão0

var :r-ta = "8a34"*

var resposta = %:r-ta == "8a34") @ "? :r-ta & a 8a34." D " 4o sei

-a$ & a :r-ta."*

:o exemplo acima fi+emos o se"uinte processo0 inicialmente temos uma vari!veldenominada fruta com o valor MaçãP em se"uida, a vari!vel resposta com umvalor condicional, ou seja, se o valor da vari!vel fruta for i"ual a Maçã, teremos ovalor A fruta 3 a Ma*ã , caso contr!rio, teremos Não sei 4ual 3 a fruta .

Condiç es

1eclaraç es condicionais no -ava cript, assim como em outras lin"ua"ens, sãoutili+adas para executar diferentes aç es baseadas em determinadas condiç es.

1eclaraç es condicionais

Página 12 de 102


13/102

1urante o desenvolvimento dos nossos scripts, sentimos a necessidade deexecutar determinadas aç es baseados em uma determinada condição, ou seja,se uma condição for verdadeira /true; ser! executada a ação , caso contr!rio,se for falsa /false;, a ação N.

6m -ava cript temos as se"uintes declaraç es condicionais0

5eclara*ão if

Ftili+amos essa declaração &uando necessitamos &ue somente uma parte doc


14/102

if %pais == "Hrasi$") F

a$ert%" $á ra;-ca5")*

G

:o exemplo acima, a declaração if /se; verifica se a vari!vel pais é i"ual a ?rasil.Como a condição é verdadeira, ou seja, a vari!vel pais tem o valor ?rasil, ser!exibido o texto Olá brazuca8 via alert./ .

1eclaração if...else

Sintaxe

if %condi34o) F // código a ser exec-tado -ando a condi34o :or verdadeira.

G else F

//código a ser exec-tado -ando a condi34o :or :a$sa.

G

%xe#plo

2 exemplo abaixo exibir! o texto 9oc: não 3 um brazuca8 se a vari!vel pais nãofor i"ual a ?rasil.

var pais = "I ina"*


a$ert%" $á ra;-ca5")*G else F

a$ert%"9oc( n4o & - ra;-ca5")*

G

:o exemplo acima, a declaração if /se; verifica se a vari!vel pais é i"ual a ?rasil.Como a condição é falsa, ou seja, a vari!vel pais não tem o valor ?rasil e sim

C)ina, ser! exibido o texto 9oc: não 3 um brazuca8 via alert./ .

Página 1# de 102

http://www.cin.ufpe.br/~ejgcs/ajax/1.5.htm?pg=1.4.htmhttp://www.cin.ufpe.br/~ejgcs/ajax/1.5.htm?pg=1.4.htmhttp://www.cin.ufpe.br/~ejgcs/ajax/1.5.htm?pg=1.4.htmhttp://www.cin.ufpe.br/~ejgcs/ajax/1.5.htm?pg=1.4.htm


15/102

1eclaração if...else if...else

Sintaxe

if %condi34o) F

// código a ser exec-tado -ando a condi34o :or verdadeira.

G else if %2 condi34o) F

//código a ser exec-tado -ando a 2 condi34o :or verdadeira.

G else F

//código a ser exec-tado -ando a pri eira e a seg-nda condi34o

:ore :a$sas.

G

%xe#plo

var pais = "I ina"*


a$ert%" $á ra;-ca5")*

G else if %pais == "I ina") F

a$ert%" $á c in(s5")*

G else F

a$ert%"9oc( n4o & - ra;-ca e ne c in(s5")*

G

:o exemplo acima, reali+amos duas verificaç es0 per"untamos se avari!vel pais tem o valor ?rasil /a primeira;. Caso verdadeiro, exibiremos otexto Olá brazuca8 P ou per"untamos se a mesma vari!vel tem o valor C)ina /ase"unda;. :este caso, exibiremos o texto Olá c7in:s8 .

Caso a vari!vel não ten)a nen)um dos dois valores # ?rasil ou C)ina # exibir! otexto 9oc: não 3 um brazuca e nem c7in:s8

1eclaração s%itc)Página 1+ de 102


16/102

Sintaxe

switch %express4o) F

case va$or 1D

// código a ser exec-tado se a express4o = va$or 1*

break

case va$or 2D

// código a ser exec-tado se a express4o = va$or 2*

break

default:

//código a ser exec-tado se a express4o :or di:erente do va$or 1

e va$or 2*

G

%xe#plo

2 exemplo abaixo dir! ao usu!rio o estado em &ue ele reside. 2bserve0

var estado = "8K"*

switch %estado) F

case "8K"D

a$ert%"9oc( ora e 8inas Kerais.")*

break

case "SP"D

a$ert%"9oc( ora e S4o Pa-$o.")*

break

case " S"D

a$ert%"9oc( ora no spLrito Santo.")*

break

Página 17 de 102


17/102

default:

a$ert%" nde oras@")*

G

9eja a )emonstra*ão )esse exemplo(

amos compreender o exemplo. 4emos a vari!vel estado com o valor M; . 5o"oap


18/102

Sintaxe

a$ert%"I-rso i8asters 6 Me Sites co ?jax")*

ejamos o resultado abaixo na ima"em de exemplo0

6sse tipo de popup box tem o objetivo de alertar o usu!rio sobre al"o &ue

ocorreu durante al"uma ação por ele executada.Fm botão de 2R é exibido junto a ela. 9ara prosse"uir com a nave"ação énecess!rio &ue o usu!rio cli&ue nesse botão.

Confirm box

Sintaxe

con:ir %"9oc( está c-rsando o c-rsoD Me Sites co ?jax")*

ejamos uma ima"em de exemplo desse tipo de popup box0

Com o Confirm ?ox, podemos ter a certe+a se o usu!rio deseja ou não executardeterminada ação, uma ve+ &ue esse box exibe dois bot es0 O= e +ancel .

Ao clicar em 2R o box retorna true e ao clicar em Cancel o box retorna false.

9rompt ?ox

Página 1A de 102


19/102

Sintaxe

// Se s-gest4o de resposta.

pro pt%"N-a$ o c-rso voc( está :a;endo no o ento@"'"")*

// Io s-gest4o de resposta.

pro pt%"N-a$ o c-rso voc( está :a;endo no o ento@"'"Me Sites co

?jax")*

ejamos os respectivos resultados nas ima"ens abaixo0

Ambos possuem a mesma característica e função0 solicitar uma informação dousu!rio.

9orém, eles se diferenciam por um único detal)e0 o se"undo prompt box exibeuma su"estão de resposta, j! o primeiro não.

ejamos um exemplo inte"rando vari!vel, condição, operadores, confirm box,alert box e prompt box0

var -er8sg = con:ir %"Kostaria de rece er - a ensage de oas

vindas@")*

Página 1B de 102


20/102

i:% -er8sg) F

var no e = pro pt%"Por :avor' -a$ o se- no e@"'"")*

i:%no e 5= n-$$ OO no e 5= "") F

a$ert%" $á " no e "' seja e vindo.")*

G

G

9ejamos a )emonstra*ão )esse exemplo(

amos compreender esse exemplo. 1efinimos a vari!vel 4uerMs, com um valorproveniente de um confirm box, ou seja, essa vari!vel poder! ter o valor true oufalse. 2 primeiro valor é obtido &uando o usu!rio clica no botão O= , j! o se"undovalor &uando acioona o botão +ancel .

6m se"uida, utili+amos a condição if /se; para verificar se avari!vel 4uerMs, ter! o valor true, o &ue si"nifica di+er &ue o usu!rio clicou nobotão O= , concordando em receber uma mensa"em de boas vindas.

5o"o ap


21/102

5oopin" &ue percorre determinado bloco de c


22/102

:o exemplo acima temos a vari!vel numero &ue inicia com 8 e em se"uidaum loop for &ue funciona da se"uinte maneira0 temos o valor inicial /8; e o valorfinal / ; para a vari!vel numero , se"uido de um incremento /SS;. Isso si"nificadi+er &ue o loop iniciar! com a vari!vel numero com o valor 8 e finali+ar! &uando

ela alcançar um valor menor ou i"ual a .2 c


23/102

Sintaxe

do F

//código a ser exec-tado.

G Q i$e %var


24/102

a$ert%" eroD " n- ero)*

G

:este exemplo, o loop for deveria ocorrer até o número 8D@ / numero G 8 ;.9orém, utili+amos $ condição if para detectar &uando a vari!vel numero estiver nonúmero 8 .

Luando isto ocorrer, utili+amos o comando "rea( para interromper o loop, assim,c)e"aremos somente até o número 8 .

9eja a )emonstra*ão )o @rea> .

%xe#plo & continue

var idade = 20*

:or %idade = 20* idade unç es

As funç es são blocos de c


25/102


26/102

%xe#plo & co# par #etros

:-nction oas9indas%no e) F

a$ert%" $á " no e "' seja e vindo.Tn spero -e goste do

nosso site.")*

QindoQ.$ocation. re: = " ttpD//QQQ.i asters.co . r"*

G

// U exe p$o para -ti$i;á6$a.

Acima temos o exemplo de uma função com par'metro.

6sta mensa"em pode ser personali+ada uma ve+ &ue o par'metro passado a elaé o nome de al"um usu!rio. Ap


27/102

Luando &ueremos &ue uma função retorne al"um valor, utili+amos adeclaração return , a &ual tem o papel de especificar o valor retornado pelafunção.

%xe#plo

:-nction ca$c-$o%va$or1'va$or2) F

tota$ = va$or1 va$or2*

ret-rn tota$*

G

// I a ando a :-n34o atrav&s do a$ert%).

a$ert%ca$c-$o%+A'10))*

:o exemplo acima, c)amamos a função calculo fornecendo a ela dois par'metros# valor8 / T; e valorB /8 ;.

:essa função temos a vari!vel total &ue multiplica os dois par'metrosinformados.

5emonstra*ão )a fun*ão com return(

Al"umas importantes consideraç es sobre as funç es0

• A palavra function sempre deve ser escrita com letras minúsculasP• 2 nome da função pode conter letras minúsculas eJou maiúsculasP• As c)aves U V indicam o início e o término da funçãoP• Mesmo &ue uma função não conten)a par'metros, os parent*ses / ; devem ser

incluídos ap


28/102

4odos esses eventos podem ser detectados pelo -ava cript e conse&Wentementereali+ar al"uma ação mediante tal acontecimento.

6m muitos dos casos, os eventos são utili+ados em combinação com as funç es.Isso si"nifica di+er &ue a função não ser! executada até &ue o evento ocorra, porexemplo0 a abertura de uma janela popup &uando um lin( for clicado /onclic(;.

amos con)ecer os eventos mais importantes e mais utili+ados em nosso dia#a#dia.

onclic(

2 evento onclic> ocorre &uando o usu!rio clica sobre al"um elemento da p!"ina,por exemplo0 um lin(, uma ima"em, um botão, dentre outros.

onclic( na realidade &uer di+er0 pressionar o mouse /mousedo%n; e liber!#lo/mouseup; sobre um mesmo elemento.

6xemplo

... onc$icR="javascriptDno eCaE-ncao%a$g- Para etroSeVo-ver)*" ...

onload e onunload

2 evento onloa) é executado &uando uma p!"ina 34M5 é carre"ada porcompleta, incluindo as ima"ens. -! o evento onunloa) ocorre &uando o usu!riosai de uma p!"ina.

6les são opostos entre si, en&uanto um é utili+ado na entrada o outro trabal)a nasaída.

6xemplo

< ody on$oad="no eCaE-ncao%)*" on-n$oad="no eCa2 E-ncao%)*">

onmouseover e onmouseout

6sses eventos trabal)am de forma oposta, porém são utili+ados em conjunto namaioria das ve+es.

6n&uanto o evento onmouseover é acionado &uando o mouse se locali+a na!rea de um elemento, o onmouseout é executado &uando ele /mouse; sai dessa!rea.

Página 2A de 102


29/102

6xemplo

on o-seover=":-ncaoPara8o-se ver%)*"

on o-seo-t=":-ncaoPara8o-se -t%)*"

onsubmit

9ara reali+armos a validação de um formul!rio utili+amos o evento onsubmit , o&ue si"nifica di+er0 ao enviar os dados do formul!rio.

6sse evento trabal)a em conjunto com uma função da se"uinte forma0associamos ao formul!rio a c)amada de uma função e esta tem por objetivovalidar os dados submetidos e retornar um valor verdadeiro /true; ou falso/false;.

e o valor retornado for verdadeiro, o formul!rio é enviado, caso contr!rio, oenvio é blo&ueado até &ue os dados sejam preenc)idos como desejamos.

6xemplo

... ons- it="ret-rn con:ereEor -$ario%)*" ...

2 evento onclic( também pode c)amar uma função para validar um formul!rio,assim como outros eventos, citei o onsubmit por ser o mais utili+ado.

onfocus, onblur e onc)an"e

6sses tr*s eventos são utili+ados na maioria das ve+es em associação com al"umelemento de formul!rio, sendo o onfocus eonblur anta"=nicos.

2 evento onfocus ocorre &uando o usu!rio clica em um lin( ou em um campo detexto e o foco é mantido até &ue outro elemento o "an)e. -! o onblur éexecutado &uando o elemento perde o foco.

2 exemplo mais cl!ssico para o evento onc7an,e /ao trocarJmudar; é &uandoalteramos uma opção na lista de um combobox. :essa ação, ocorre o onc7an,e .

Página 2B de 102


30/102

6xemplos

... on:oc-s=":-ncaoParaEoc-s%)*" on $-r=":-ncaoParaH$-r%)*" ...

on(eEdo%n, on(eEpress e on(eEup

6sses tr*s eventos são utili+ados em associação com o teclado. Com elespodemos por exemplo0 contar os caracteres de uma textarea, reali+ar o previe%de al"um texto, efetuar uma busca instant'nea, dentre outras opç es.

2s eventos on>e%)o6n e on>e%press são semel)antes e ocorrem &uando umatecla é pressionada pelo usu!rio em seu teclado.

-! o on>e%up é executado &uando a tecla é liberada, ou seja, ela foi pressionadae em se"uida liberada.

6xemplos

... onReydoQn=":-ncaoParaWeyCoQn%)*" ...

... onReypress=":-ncaoParaWeyPress%)*" ...

... onRey-p=":-ncaoParaWeyUp%)*" ...

ptArra%

oc* certamente j! deve ter ouvido falar neste nome0 ArraE.e formos tradu+ir esse nome ao pé#da#letra, teríamos0 p=r em ordem, fileira,

arranjo e por aí vai.6ntretanto, o &ue ele realmente si"nifica para n


31/102

var diasCaSe ana = neQ ?rray%)*

var diasCaSe ana = neQ ?rray% )*

Ambos os exemplos acima estão corretos. A diferença entre eles é &ue o se"undoinforma o taman)o /valor total; &ue o ArraE ter! através do número inteiro/inte"er; X /sete;.A"ora, vamos con)ecer duas formas para criarmos um ArraE contendo os dias dasemana.

var diasCaSe ana = neQ ?rray%)*

diasCaSe anaX0Y = "Co ingo"*

diasCaSe anaX1Y = "Seg-nda"*

diasCaSe anaX2Y = "Zer3a"*diasCaSe anaX!Y = "N-arta"*

diasCaSe anaX#Y = "N-inta"*

diasCaSe anaX+Y = "Sexta"*

diasCaSe anaX7Y = "Sá ado"*

var diasCaSe ana = neQ ?rray%"Co ingo"' "Seg-nda"' "Zer3a"'

"N-arta"' "N-inta"' "Sexta"' "Sá ado")*

4anto os valores contidos na primeira forma &uanto na se"unda, são acessadosassim0

a$ert%diasCaSe anaX7Y)* // xi iráD Sá ado.

9ortanto, para referenciarmos a um valor dentro de um ArraE, basta indicarmos onome do ArraE e o índice númerico do valor.Q importante lembrar &ue o índice númerico se inicia com /+ero;.

e voc* especificar al"um número ou os valores trueJfalse /verdadeiroJfalso;como o valor de um ArraE, o tipo da vari!vel ser! númerica e ?ooleanarespectivamente, ao invés de strin".

2s métodos do objeto ArraE/;Relação dos métodos mais utilizados.

Método Descrição

join()Coloca todos os elementos de um Array em uma string e osseparam por um delimitador especificado.

Página !1 de 102


32/102

shift() Retorna o primeiro valor de um Array e remove os demais.

pop() Retorna o ltimo elemento de um Array e remove os demais.

reverse(

)!nverte a ordem dos elementos de um Array.

slice() Retorna os elementos selecionados de um Array.

sort() "rdena os elementos de um Array.

pt

5ata9ara trabal)armos com datas e )or!rios em -ava cript fa+emos uso doobjeto 5ate./ e, para o instanciarmos /criarmos objetos;, utili+amos a palavra#c)ave ne' .

ejamos um exemplo0

var data?t-a$ = neQ Cate%)*

a$ert%data?t-a$)*

:o exemplo acima teremos a data e o )or!rio atual, ou seja, o exato momentoem &ue o script foi executado. 2 resultado aparecer! no formato abaixo0

8on J-n 27 2007 1+D2BD1! K8Z60!00 %Vora o:icia$ do Hrasi$)

2bservando o resultado acima voc* deve se per"untar0 3ummm, le"alY Masmoro no ?rasil e esse formato de data é diferente do utili+ado a&ui. :ão seitrabal)ar com ele .9ara resolver esse problema, existem pr!ticas eficientes &ue nos possibilitam amanipulação desse formato para podermos exibí#lo como desejarmos.

eja um novo exemplo adaptado ao nosso formato dd mm aaaa .var data = neQ Cate%)*

var es = neQ ?rray%12)

esX0Y = "Janeiro"*

esX1Y = "Eevereiro"*

esX2Y = "8ar3o"*

esX!Y = "? ri$"*

Página !2 de 102


33/102

esX#Y = "..."*

a$ert%data.getCate%) "/" esXdata.get8ont %)Y "/"

data.getE-$$[ear%))*:o exemplo acima utili+amos o objeto 5ate e tr*s de seusmétodos0,et5ate./ , ,etMont7./ , ,etFull ear./ .2 primeiro retorna o dia do m*s /de 8 a Z8;, o se"undo o m*s /de a 88; e oúltimo o ano com &uatro di"ítos.2 diferencial acima est! na utili+ação do ArraE para o m*s, uma ve+ &ue ométodo ,etMont7./ retorna números de /+ero; a 88 /on+e; e, assim, onúmero D /&uatro; representaria o m*s de maio. 1iferentemente de nossarepresentação usual, onde esse m*s é representado pelo al"arismo /cinco;.Assim, utili+amos um ArraE para setarmos o nome do m*s /pode ser al"arismostambém; de acordo com o número retornado pelo método.

2s métodos do objeto 1ate/;Relação dos métodos mais utilizados.

Método Descrição

#ate() Retorna a data e o hor$rio atual.

get#ate() Retorna o dia do m%s (&' &).

get#ay() Retorna o dia da semana ( '*).

get+onth() Retorna o m%s ( '&&)

get,ull-ear() Retorna o ano com uatro d/gitos.

get0ours() Retorna a hora ( '1 ).

get+inutes() Retorna os minutos ( '23).

get4econds() Retorna os segundos ( '23).get+illiseconds() Retorna os milisegundos ( '333).

get5imezone"ffset()Retorna a diferença em minutos entre o tempolocal e o do +eridiano de 6reen7ich (6+5)

2s métodos acima precisam atuar em conjunto com o objeto 5ate./ por&ue &ueeles são métodos desse objeto.

ua utili+ação é da se"uinte forma0

// U a :or a

neQ Cate%).no eCo8etodo%)*

Página !! de 102


34/102

// -tra :or a

var data = neQ Cate%)*

data.no eCo8etodo%)*

ptStrin,2 objeto strin" é utili+ado para manipular um texto arma+enado em uma vari!ve

e, para essa manipulação, ele nos disponibili+a diversos métodos.Q importante ressaltar &ue, além do objeto strin", )! a strin" literal. Luandoutili+amos al"uns dos métodos do objeto strin" na strin" literal, essa última éconvertida automatica e temporariamente em um objeto strin". 9or exemplo, ométodo lengt# retorna a &uantidade de caracteres em uma strin".

eja a utili+ação desse método abaixo em ambos os casos0

var porta$1 = "i8asters"*

var porta$2 = neQ String%"i8asters")*

a$ert%"? variáve$ porta$1 cont& D " porta$1.$engt "

caracteres.")*

a$ert%"? variáve$ porta$2 cont& D " porta$2.$engt "

caracteres.")*

:o exemplo acima, teremos o valor T /oito; nos dois casos /strin" literal #portal8P objeto strin" # portalB; por&ue T /oito; é o total de caracteres contido nonome iMasters.2s métodos do objeto trin"/;

Relação dos métodos mais utilizados.

Método Descrição

inde8"f()Retorna a posição da primeira ocorr%ncia de um valorespecificado em uma string.

last!nde8"f() Retorna a posição da ltima ocorr%ncia de um valorespecificado em uma string.

Página !# de 102


35/102

match()9rocura por um valor espec/fico em uma string. 4eencontrado: ele (valor) é retornado: caso contr$rio:retorna null .

replace()4u;stitue alguns caracteres por outros caracteres em umastring.

topperCase() =8i;e os caracteres da string em mai sculos.

su;str()=8trai uma uantidade espec/fica de caracteres de umastring a partir de um /ndice inicial.

su;string() =8trai os caracteres de uma string entre dois /ndices.

pt

Mat)

2 objeto Mat) é utili+ado para reali+ar tarefas matem!ticas fornecendo#nosdiversos valores e funç es.

9ara se trabal)ar com o objeto Mat) não é necess!rio definí#lo, ao contr!rio dosoutros objetos &ue con)ecemos.

alores matem!ticos

'lação do" !alor'" at' 9tico" u' pod' "'r ac'""ado"p'lo ob:'to Mat;<

Math Nome Valor

Mat;< 2045

Mat;


36/102

'lação do" !alor'" at' 9tico" u' pod' "'r ac'""ado"p'lo ob:'to Mat;<

Math Nome Valor

Mat;>453

Mat;>404,

Mat;


37/102

var n- ero1 = 7. *

var n- ero2 = !.A*

a$ert%8at . ax%n- ero1'n- ero2))*

// xi irá o va$or 7.

#in()

7etorna o número de menor valor entre dois números especificados.

var n- ero1 = 7. *

var n- ero2 = !.A*

a$ert%8at . in%n- ero1'n- ero2))*

// xi irá o va$or !.A

rando#()

7etorna um número entre e 8.

a$ert%8at .rando %))*

// xi irá n eros a$eatórios entre 0 e 1 6 x.D 0.A!!+ ! #7!A+B!A#

a$ert%8at .rando %) +B)*

// xi irá n eros a$eatórios entre 0 e +B 6 x.D +A.B2 B27+++702BA

round()

Arredonda o valor informado para o número inteiro mais pr


38/102

a$ert%8at .ro-nd%n- ero2))*

// xi irá o va$or 6#

pt

alidação de formul!rio

2s elementos de formul!rio são utili+ados ao extremo em %ebsites e aplicaç es%eb. 6 não é por menos. ão com eles &ue conse"uimos capturar informaç es dousu!rio &ue nos permitem saber de seus "ostos, vontades e atitudes em umambiente como a internet.

9orém, infeli+mente nem todo usu!rio é fiel ao informar os dados &uesolicitamos, ou, $s ve+es, preenc)em#os sem dar muita import'ncia e atenção.6sse tipo de atitude "era informaç es erradas &ue não serão úteis para nossossistemas.

9ara ameni+ar essa pr!tica, podemos validar os dados &ue o usu!rio est! nosenviando para recebermos as informaç es com uma parcela de certe+a maiorsobre a sua veracidade.

A lin"ua"em -ava cript é capa+ de acessar &ual&uer objeto em uma p!"ina da%eb, então podemos acessar os elementos do formul!rio &ue desejamos e validaro seu conteúdo.

eja esta p!"ina0 9ali)a*ão )e Formulário . :ela estão contidos os principaiselementos de um formul!rio # text, radio, select, textarea, c#ec("ox # e o nossoobjetivo é aprender a validar cada um desses tipos de objeto.

4odo o processo de validação est! no c


39/102

Al"umas informaç es sobre formul!rio

9articularmente prefiro trabal)ar com o 5OM e o -ava cript em conjunto paravalidar meus formul!rios mas, como estamos falando especificamente sobre

-ava cript, falaremos sobre o 12M depois.Cha#ando a un! o que veri ica os dados

Certamente voc* ter! uma função &ue verificar! os dados submetidos peloformul!rio e, essa, é invocada mediante a um evento &ue pode ser por exemplo,o evento onsubmit . 6, juntamente com ela pode )aver a declaração return .

ejamos um exemplo0

Sobre o return

Luando declaramos o return false na função, si"nifica &ue não &ueremos &ue oformul!rio seja processado, ou seja, al"uns dos dados não estão de acordo com o&ue esper!vamos, então o blo&ueamos. Luando tudo estiver devidamentepreenc)ido, setamos o return true , o &ue si"nifica &ue o formul!rio pode serenviado.

Sobre a palavra&chave this

6la fa+ uma refer*ncia "enérica a um objeto, além de ser uma forma pr!tica derefereciar a um formul!rio ou aos objetos deste.

6la pode ser utili+ada dentro da ta" do form ou de seus objetos. e precisarmosutili+!#la dentro da ta" de al"um objeto mas para referenciar ao formul!rio em&uestão, a utili+amos juntamente com a palavra form , assim0 t7is(form( 2 &ueseria a mesma coisa &ue )ocument(nomeForm .

Luando a utili+amos em um elemento de formul!rio, estamos referenciando aesse elemento da mesma forma como se estivéssemosutili+ando )ocument(nomeForm(nome!lemento .

Luando desejamos apenas extrair o valor contido no elemento, bastaacrescentarmos $ palavra value , assim0 t7is(value( 2 &ue teria a mesma forma&ue )ocument(nomeForm(nome!lemento(value

>aça a an!lise do script nesta p!"ina 9ali)a*ão )e Formulário e bonsestudos. P;

Página !B de 102

http://www.cin.ufpe.br/~ejgcs/ajax/2.htm?pg=1.13.htmhttp://www.cin.ufpe.br/~ejgcs/ajax/exe_scripts/cap1/ex_validacao_form.htmhttp://www.cin.ufpe.br/~ejgcs/ajax/2.htm?pg=1.13.htmhttp://www.cin.ufpe.br/~ejgcs/ajax/exe_scripts/cap1/ex_validacao_form.htm


40/102

Página #0 de 102


41/102

pt

Capítulo B # 9ref!cio

Ap


42/102

Introdução ao 12M

2 5OM nos fornece a representação estrutural de documentos 34M5 e M5,definindo a forma como a estrutura &ue pode ser acessada por pro"ramas escripts, possibilitando#nos a modificação na estrutura do documento, do estilo edo conteúdo. 6m nosso caso, utili+aremos $ lin"ua"em -ava cript para tal fim.

A representação do documento ocorre através de uma !rvore de n


43/102

6ntão, como mel)or forma de trabal)armos, utili+aremos o 12M e o -ava criptem conjunto. Assim teremos acesso $ estrutura, estilo e conteúdo de umdocumento através do 12M e com o -ava cript poderemos manipul!#los.

2 12M foi desenvolvido para ser independente de &ual&uer lin"ua"em depro"ramação, e isto é importante por&ue diversas lin"ua"ens o utili+am para teracesso a determinado documento. :o nossos estudos, utili+aremos o -ava criptpara tal finalidade.

:as unidades se"uintes con)eceremos os recursos necess!rios paramanipularmos um documento %eb através do 12M e do -ava cript.

1ivirta#seY

ptntro)u*ão ao 5BCM?

Como dito no pref!cio deste capítulo, 134M5 é uma combinação de tecnolo"ias #34M5, C , -ava cript # utili+adas em conjunto para criar %eb sites din'micos.

2 termo 134M5 é uma estraté"ia de mar(etin" de duas empresas # :etscape eMicrosoft # &ue tin)am o objetivo de descreverem a nova tecnolo"ia suportadapela &uarta "eração /D.x; de seus bro%sers, :etscape :avi"ator e Internet6xplorer, respectivamente.Q preciso ressaltar &ue essa tecnolo"ia não é um padrão do [ZC. Assim, comonão temos a intenção &ue nossos scripts funcionem apenas nos bro%sers acimacitados, precisamos desenvolver um 134M5 crossbro%ser, ou seja, um 134M5&ue funcione em diversos bro%sers.1essa forma, utili+aremos o 12M do [ZC &ue tem o suporte em todos osnave"adores atuais.

Fm exemplo pr!tico do 134M52bserve o exemplo abaixo0

JavaScript

:-nction c angeI$ass%no eI$asse) F

var o j = doc- ent.get $e entHy,d%" ox")*

o j.c$ass a e = no eI$asse*

G

Página #! de 102


44/102

HT !

< 1>8a -ande $ing-es coa$esce

\ore ips- do$or sit a et' consectet-er ...

?$tere in a apar(ncia

SS

^conte-do F

Qidt D +00px*

paddingD 1+px*

$ine6 eig tD 1.+e *

G

.desta -e F

acRgro-nd6co$orD ̂ ::c*

orderD 1px so$id ^:c7*

G

.nodesta -e F

acRgro-nd6co$orD ̂ :::*

orderD 1px so$id ^000*G

9eja a )emonstra*ão )esse exemplo prático )e 5BCM? .A"ora, vamos compreend*#lo.Ftili+amos tr*s tecnolo"ias /34M5, C e -ava cript; para o recurso demonstradono exemplo e o 12M para acessarmos um elemento da p!"ina.:a marcação 34M5, fi+emos o se"uinte0 criamos uma GdivH e adicionamos a eladois atributos # id 2conteudo) e class 2destaque) . Anin)ado a essa ta" temos um

título de primeiro nível 2#3) , um para"r!fo 2p) e um lin( 2a) .

Página ## de 102

http://www.cin.ufpe.br/~ejgcs/ajax/exe_scripts/cap2/exemplo_pratico_dhtml.htmhttp://www.cin.ufpe.br/~ejgcs/ajax/exe_scripts/cap2/exemplo_pratico_dhtml.htm


45/102

:o lin( Altere min7a apar:ncia , adicionamos o evento onclic> &ue c)ama afunção c#ange+lass , passando a ela o nome da nova classe, 2nodestaque), &ue"ostaríamos de colocar na 4div5 .A função -ava cript c#ange+lass recebe o par'metro 2nodestaque) passado a ela

e o utili+a para adicionar ao objeto desejado 2conteudo) uma nova classe C .Luanto ao ,et!lement@% ) e className , não se preocupe, n


46/102

iptM3to)o ,et!lements@%Ca,NameAo contr!rio do método &ue con)ecemos anteriormente,oget6lements7$/ag9ame retorna diversos objetos com a ta" específicada nométodo. 9ortanto, ao invés de informarmos um atributo e termos como retornoum único objeto, informarmos uma ta" e temos todas a&uelas &ue constam nap!"ina em &uestão.Considere a se"uinte situação0 temos uma p!"ina em &ue todos os lin(s nãocontém sublin)ados para destac!#los e precisamos alterar, via script, a formacomo esses lin(s são apresentados, ou seja, precisamos &ue esses lin(s ten)amo estilo sublin)ado.9ara resolvermos essa &uestão devemos proceder assim0 identificar todos oslin(s contidos na p!"ina e acrescentar#l)es um estilo como text-decoration underline . Mas, como fa+er istoK

amos com calmaY abemos &ue o método get6lements7$/ag9ame selecionatodas as ta"s de uma determinada p!"ina, ou seja, ele seria a solução paraselecionarmos todos os lin(s / tag a ;. Com eles /lin(s; em mãos , bastaadicionarmos um estilo &ue l)es conceda o sublin)ado desejado.

ejamos o exemplo acima em ação na p!"ina M3to)oD,et!lements@%Ca,Name .A"ora vamos observar o script &ue solucionou nosso problema0

:-nction c angeSty$e\inR%) F

var $inRs = doc- ent.get $e entsHyZag a e%]a])*

:or%var x = 1* x < $inRs.$engt * x ) F

var _$inR = $inRsXxY*

_$inR.sty$e.textCecoration = ]-nder$ine]*

G

G

amos entend*#lo.9rimeiramente criamos uma função c)amada c#ange!t$le1in(2) , a &ual éinvocada através do evento onclic( no lin( !u"lin#ar os lin(s contidos nesta

página. amos entend*#la0A vari!vel lin(s arma+ena todos os lin(s contidos na p!"ina através dométodo get6lements7$/ag9ame P a esse método foi informada a ta" a.Ap


47/102

Criamos a vari!vel Olin( &ue ter! como valor todos os lin(s contidos na p!"ina,ou mel)or, com a exceção do primeiro lin( &ue é o respons!vel por c)amar afunção. Isto ocorre por&ue informamos $ vari!vel o valor inicial de 8 no loop eo lin( &ue invoca a função é representado pelo número /+ero;, exatamente por

ser o primeiro a aparecer na p!"ina. 1essa forma, a vari!vel Olin(, durante oloop, ter! os se"uintes valores0 lin(s\8], lin(s\B], lin(s\Z], lin(s\D], ...9ara finali+ar, utli+amos o m3to)o st%le /falaremos sobre ele adiante; paraadicionar aos lin(s o sublin)ado desejado. 9or fim, di+emos &ue underline ser! ovalor da propriedade text1ecoration por&ue é esse valor &ue adiciona osublin)ado &ue desej!vamos.2bserve &ue a propriedade text#decoration das C é representado portext1ecoration. 9ortanto, se"ue uma dica0 sempre &ue desejar utili+ar umapropriedade C e esta conter esta estrutura nome-outronome , basta retirar o)ífen e colocar em maiúsculo a primeira letra do se"undo nome.

ptM3to)o st%le2 método st%le tem por objetivo alterar o estilo de um objeto. Q al"o id*ntico aoatributo stEle do 34M5, a diferença é &ue o estilo ao objeto ser! acrescido ou

alterado via script e não na marcação 34M5.9or exemplo, vamos supor &ue &ueremos ocultar um objeto &uando esse estivervisível e torn!#lo visível novamente &uando estiver oculto. 9ara isso podemosutili+ar a propridade displaE das C com o valor none e bloc( respectivamente,em conjunto com o método stEle.

ejamos o referido exemplo na p!"ina M3to)o st%le .A"ora vamos observar o script utili+ado0

:-nction s oQVide%id) F

var o j = doc- ent.get $e entHy,d%id)* i:%o j.sty$e.disp$ay == "") F

o j.sty$e.disp$ay = "none" *

G e$se F

o j.sty$e.disp$ay = ""*

G

G

Página # de 102

http://www.cin.ufpe.br/~ejgcs/ajax/2.5.htm?pg=2.4.htmhttp://www.cin.ufpe.br/~ejgcs/ajax/exe_scripts/cap2/style.htmhttp://www.cin.ufpe.br/~ejgcs/ajax/2.5.htm?pg=2.4.htmhttp://www.cin.ufpe.br/~ejgcs/ajax/exe_scripts/cap2/style.htm


48/102

A função s#o' ide2id) recebe o id do objeto &ue ser! o alvo do script. 6sse id éatribuido ao método ,et!lement@% ) &ue, por sua ve+, é utili+ado na vari!velobj.6m se"uinda, verificamos se o valor da propriedade displaE est! como padrão

/bloc(;. e realmente estiver, a alteramos para o valor none, o &ue ocultar! oobjeto. Caso o objeto esteja oculto, ou seja, com o valor none, ele volta para ovalor padrão bloc(. 1essa forma, ocultamos e exibimos o objeto como desejado.6ssa função pode ser utili+ada de forma contr!ria, ou seja, voc* pode ocultar oobjeto via C e utili+ar esse script para exibir e ocultar.:esse caso o script ficaria assim0


var o j = doc- ent.get $e entHy,d%id)*

i:%o j.sty$e.disp$ay == "") F

o j.sty$e.disp$ay = "block" *

G e$se F

o j.sty$e.disp$ay = ""*

G

G

ptM3to)o className

emel)ante ao m3to)o st%le , o método className tem a função de alterar oestilo de um objeto definido por uma classe C .A vanta"em do método class:ame é &ue podemos alterar as propriedades do

estilo na fol)a de estilo vinculada $ p!"ina, ou seja, não precisamos alterar oscript &uando desejarmos alterar o estilo e sim as propriedades da classe C .ejamos o mesmo exemplo de ocultar e exibir um objeto na p!"ina M3to)oD

className .2bserve o script0


var o j = doc- ent.get $e entHy,d%id)*

i:%o j.c$ass a e == "") F

o j.c$ass a e = "oc-$ta j"*

Página #A de 102

http://www.cin.ufpe.br/~ejgcs/ajax/2.3.htm?pg=2.5.htmhttp://www.cin.ufpe.br/~ejgcs/ajax/2.5.htm?pg=2.6.htmhttp://www.cin.ufpe.br/~ejgcs/ajax/exe_scripts/cap2/className.htmhttp://www.cin.ufpe.br/~ejgcs/ajax/exe_scripts/cap2/className.htmhttp://www.cin.ufpe.br/~ejgcs/ajax/2.3.htm?pg=2.5.htmhttp://www.cin.ufpe.br/~ejgcs/ajax/2.5.htm?pg=2.6.htmhttp://www.cin.ufpe.br/~ejgcs/ajax/exe_scripts/cap2/className.htmhttp://www.cin.ufpe.br/~ejgcs/ajax/exe_scripts/cap2/className.htm


49/102

G e$se F

o j.c$ass a e = ""*

G

G

2 script acima tem a mesma característica e função do script apresentado nométodo stEle, diferenciando#se apenas pela troca de método, ou seja, ao invésde utili+armos o método stEle, utili+amos class:ame.A classe utili+ada 2oculta:"j) é tão simples &uanto o script. ejamos0.oc-$ta j F

disp$ayD none*

G

Como dito no início desta unidade, o método class:ame é mais vantajoso do &ueo stEle por&ue nos possibilita alterar o estilo sem alterar o script, ou seja, bastamodificarmos as propriedades da classe utili+ada.Assim, supon)amos &ue ao invés de ocultar e exibir o objeto utili+ando apropriedade displaE, &ueremos utili+ar a propriedade visibilitE. 9ara isso iremosalterar o scriptK :ão, simplesmente alteramos a propriedade da classe oculta2bjassim0

.oc-$ta j F

visi i$ityD idden*

G

ejamos o exemplo novamente com a propriedade da classe alterada nap!"ina M3to)oD className .E / .

iptM3to)o innerBCM?Interno é o e&uivalente de inner em in"l*s. 6ntão inner34M5 &uer di+er o 34M5interno de al"o, sendo esse último um objeto, ou seja, uma ta".Assim, para alterarmos ou inserirmos conteúdo ou uma marcação 34M5 em umobjeto, utili+amos o método inner34M5.Ima"inemos uma ta" div /ou &ual&uer outra; em sua marcação 34M5 e &ue essata" esteja com o atributo I1 definido como box. 6ntão, podemos utili+ar o

método ,et!lement@% ) para acess!#la e usufruir do método inner34M5 paramanipular seu conteúdo ou marcação 34M5.

Página #B de 102

http://www.cin.ufpe.br/~ejgcs/ajax/exe_scripts/cap2/className2.htmhttp://www.cin.ufpe.br/~ejgcs/ajax/2.3.htm?pg=2.7.htmhttp://www.cin.ufpe.br/~ejgcs/ajax/exe_scripts/cap2/className2.htmhttp://www.cin.ufpe.br/~ejgcs/ajax/2.3.htm?pg=2.7.htm


50/102

ejamos um exemplo de como alterar o conteúdo de uma ta"0


o j.innerVZ8\ = " ste será o novo conte do."*

ejamos o exemplo acima em ação neste lin( Alterar o conteG)o )e umata, .ejamos um exemplo de como alterar a marcação 34M5 de uma ta"0


o j.innerVZ8\ = "< 1> sta & a nova arca34o VZ8\ desta tag."*

ejamos o exemplo acima em ação neste lin( Alterar marca*ão BCM? )euma ta, .Ftili+ando o operador de atribuição ;< podemos acrescentar conteúdo aoconteúdo j! existente de uma ta" como marcação 34M5.2bserve esta marcação 34M50

\ore ips- do$or sit a et' consectet-er adipiscing e$it' sed dia non- y

ni e-is od tincid-nt.

amos supor &ue &ueremos inserir um título de primeiro nível /)8; acima dopar!"rafo existente na marcação acima. 9ara tal procedimento faremos assim0


var nova8arcacao = "< 1>ZLt-$o deste parágra:o."*

o j.innerVZ8\ = nova8arcacao = o j.innerVZ8\*

ejamos esse exemplo na p!"ina A)icionar marca*ão BCM? e conteG)o auma ta, .

pt

M3to)o appen)+7il)Ao tradu+irmos os nomes &ue comp=e o elemento appendC)ild, teremos0 append^ acrescentarJanexar e c)ild ^ fil)oJcriança. ?aseando#se nisso, podemosentender esse método como o acréscimo de um novo fil)o.6le funciona exatamente dessa maneira, adiciona um n< /node, _fil)o_; ao final dalista de fil)os /c)ildren; de um elemento pai /parent node;.9ara ficar mais claro a compreensão, vamos observar este exemplo0

Página +0 de 102

http://www.cin.ufpe.br/~ejgcs/ajax/exe_scripts/cap2/innerHTMLalterConteudo.htmhttp://www.cin.ufpe.br/~ejgcs/ajax/exe_scripts/cap2/innerHTMLalterConteudo.htmhttp://www.cin.ufpe.br/~ejgcs/ajax/exe_scripts/cap2/innerHTMLalterHTML.htmhttp://www.cin.ufpe.br/~ejgcs/ajax/exe_scripts/cap2/innerHTMLalterHTML.htmhttp://www.cin.ufpe.br/~ejgcs/ajax/exe_scripts/cap2/innerHTMLadicHTML.htmhttp://www.cin.ufpe.br/~ejgcs/ajax/exe_scripts/cap2/innerHTMLadicHTML.htmhttp://www.cin.ufpe.br/~ejgcs/ajax/exe_scripts/cap2/innerHTMLalterConteudo.htmhttp://www.cin.ufpe.br/~ejgcs/ajax/exe_scripts/cap2/innerHTMLalterConteudo.htmhttp://www.cin.ufpe.br/~ejgcs/ajax/exe_scripts/cap2/innerHTMLalterHTML.htmhttp://www.cin.ufpe.br/~ejgcs/ajax/exe_scripts/cap2/innerHTMLalterHTML.htmhttp://www.cin.ufpe.br/~ejgcs/ajax/exe_scripts/cap2/innerHTMLadicHTML.htmhttp://www.cin.ufpe.br/~ejgcs/ajax/exe_scripts/cap2/innerHTMLadicHTML.htm


51/102

// 1

var neQ $e ent = doc- ent.create $e ent%" r")*

// 2

doc- ent.get $e entHy,d%" ox").appendI i$d%neQ $e ent)*6m primeiro lu"ar, definimos &ual ser! o novo elemento ou a nova ta" a sercriada, nesse caso, a ta" )r. 6ntretanto, ela precisa ser fil)o /c)ild; de al"um pai/parent;.:a se"unda lin)a fi+emos refer*ncia ao atributo I1 de uma ta" e essa ser! o paido novo elemento &ue ser! adicionado. 6m se"uida utili+amos ométodo append+#ild informando a ele a ta" &ue criamos na vari!vel ne%6lement.9ara concluir, a ta" )r criada pelo método create!lement /veremos maisdetal)es a se"uir; foi adicionada como fil)o do elemento cujo atributo I1 é i"uala box.

ejamos este exemplo a&ui M3to)oD appen)+7il)(7tm .

ptM3to)o create!lement

Mesmo a&ueles &ue não dominam a lín"ua in"lesa conse"uem compreender afunção deste método, ou seja, criar um elemento, ou mel)or di+endo, uma ta".Ima"ine &ue voc* necessita criar um novo elemento em sua marcação 34M5 masnão )! possibilidades de alterar a marcação j! existente e o novo elemento deveser inserido mediante al"um evento ocorrido na p!"ina ou ocasionado pelousu!rio.2 método create6lement é a solução para esse problema.

ejamos como utili+!#lo0

// 1

var conte-do = doc- ent.get $e entHy,d%" ox")*

// 2

var neQ $e ent = doc- ent.create $e ent%Q at)*

// !

neQ $e ent.appendI i$d%doc- ent.createZext ode%"I-rso i8asters 6

Me Sites co ?jax"))*

Página +1 de 102

http://www.cin.ufpe.br/~ejgcs/ajax/2.9.htm?pg=2.8.htmhttp://www.cin.ufpe.br/~ejgcs/ajax/exe_scripts/cap2/appendChild.htmhttp://www.cin.ufpe.br/~ejgcs/ajax/2.9.htm?pg=2.8.htmhttp://www.cin.ufpe.br/~ejgcs/ajax/exe_scripts/cap2/appendChild.htm


52/102

// #

conte-do.appendI i$d%neQ $e ent)*

ejamos o exemplo em ação0 método create!lement .?om, no primeiro passo, referenciamos ao atributo I1 de uma ta" para &uepossamos utili+!#la como refer*ncia.:o se"undo passo, definimos &ual ser! a nova ta" a ser criada. 2bserve &ue essainformação é oriunda de um par'metro /%)at; da função em &uestão.Ao novo elemento criado decidimos l)e fornecer um conteúdo utli+ando para talo appen)+7il) e o create4ext:ode.>inali+amos inserindo o novo elemento criado através do appenc7il) .Assim, esse novo elemento foi criado como um novo fil)o do elementoreferenciado na vari!vel conteudo.

ptM3to)o insert@efore6m unidades anteriores, vimos os métodos utili+ados para criar/create!lement ; e inserir / appen)+7il) ; um elemento no documento.

oc* deve ter notado &ue o método appendC)ild insere o objeto sempre como oúltimo fil)o /c)ild; de um elemeto pai /parent;.6m certas ocasi es isto pode ser inconveniente, pois, em determinadosmomentos, precisamos inserir al"um elemento em um local específico e nãocomo o último fil)o de um pai.9ortanto, pensando nessa necessidade, utili+amos o método insert@efore aoinvés do appendC)ild, pois assim inserimos a ta" onde desejamos.

amos observar um exemplo utili+ando o método insert@efore 0// 1


// 2

neQ $e ent.appendI i$d%doc- ent.createZext ode%"ZLt-$o do parágra:o"))*

// !

var re:erencia = doc- ent.get $e entHy,d%"paragra:o")*

// #

var parentZag = re:erencia.parent ode*

// +

parentZag.insertHe:ore%neQ $e ent' re:erencia)*

Página +2 de 102

http://www.cin.ufpe.br/~ejgcs/ajax/exe_scripts/cap2/createElement.htmhttp://www.cin.ufpe.br/~ejgcs/ajax/2.8.htm?pg=2.9.htmhttp://www.cin.ufpe.br/~ejgcs/ajax/2.8.htm?pg=2.9.htmhttp://www.cin.ufpe.br/~ejgcs/ajax/2.9.htm?pg=2.10.htmhttp://www.cin.ufpe.br/~ejgcs/ajax/2.8.htm?pg=2.10.htmhttp://www.cin.ufpe.br/~ejgcs/ajax/exe_scripts/cap2/createElement.htmhttp://www.cin.ufpe.br/~ejgcs/ajax/2.8.htm?pg=2.9.htmhttp://www.cin.ufpe.br/~ejgcs/ajax/2.8.htm?pg=2.9.htmhttp://www.cin.ufpe.br/~ejgcs/ajax/2.9.htm?pg=2.10.htmhttp://www.cin.ufpe.br/~ejgcs/ajax/2.8.htm?pg=2.10.htm


53/102

ejamos o exemplo neste lin( M3to)oD insert@efore .A"ora vamos compreender o exemplo acima09rimeiramente, informarmos &ual elemento ser! criado. 6sse elemento éinformado através do par'metro /%)at; da função. 6m se"uida, inserimosconteúdo ao elemento criado.:o terceiro passo, fa+emos refer*ncia a um elemento atravésdoget6lement7$8d na vari!vel referencia.:o &uarto passo, criamos a vari!vel parent4a", concedendo a ela ovalor referencia(parentNo)e , ou seja, o nosso elemento como refer*ncia eespecificando &ue ele ser! um n< pai /parent:ode;.9ara concluir, utili+amos o método insert?efore anexado a vari!vel parent4a". 2satributos desse método são os se"uintes0 ne%6lement /o elemento &ue ser!criado; e referencia /para sabermos onde inserir o novo elemento, ou seja,anterior a &ual elemento;.

pt'M3to)o' insertAfter9ara início de conversa, preciso l)e informar &ue não existe o método insertAfter.9orém, se em certos momentos precisamos inserir al"um elemento

anteriormente a um outro, em outros também precisaremos inserir al"oposteriormente a um elemento específico.Assim, para atin"irmos ambos os objetivos /inserir um elemento anteriormente eposteriormente; utili+amos o método insert@efore , uma ve+ &ue somente eleexiste.9ara conse"uirmos o recurso de inserir posteriormente procedemos assim0Marcação 34M50

< 1 id="tit">\ore ips- do$or sit a et

cript utili+ado0

// 1


// 2

neQ $e ent.appendI i$d%doc- ent.createZext ode%"8a -ande $ing-es coa$esce' $i

gra atica de$ res-$tant $ing-e es."))*

Página +! de 102

http://www.cin.ufpe.br/~ejgcs/ajax/exe_scripts/cap2/insertBefore.htmhttp://www.cin.ufpe.br/~ejgcs/ajax/2.10.htm?pg=2.11.htmhttp://www.cin.ufpe.br/~ejgcs/ajax/exe_scripts/cap2/insertBefore.htmhttp://www.cin.ufpe.br/~ejgcs/ajax/2.10.htm?pg=2.11.htm


54/102

// !

var re:erencia = doc- ent.get $e entHy,d%"tit")*

// #

var parentZag = re:erencia.parent ode* // +

parentZag.insertHe:ore%neQ $e ent' re:erencia. nextSiblin# )*

ejamos a demostração desse exemplo neste lin( M3to)oD insertAfterA"ora vamos compreend*#lo09rimeiramente, informarmos &ual elemento ser! criado. 6sse elemento éinformado através do par'metro /%)at; da função. 6m se"uida, inserimosconteúdo ao elemento criado.:o terceiro passo, fa+emos refer*ncia a um elemento através do "et6lement?EIdna vari!vel referencia.:o &uarto passo, criamos a vari!vel parent4a", concedendo a ela ovalor referencia(parentNo)e , ou seja, o nosso elemento como refer*ncia eespecificando &ue ele ser! um n< pai /parent:ode;.9ara concluir, utili+amos o método insert?efore anexado a vari!vel parent4a". 2satributos desse método são os se"uintes0 ne%6lement /o elemento &ue ser!criado; e referencia.next iblin" /next ^ pr


55/102

neQ $e ent.appendI i$d%doc- ent.createZext ode%"I-rso i8asters 6

Me Sites co ?jax"))*

// !

neQ $e ent.set?ttri -te%]id]']tit-$o])*

// #

neQ $e ent.set?ttri -te%]c$ass]']desta -e])*

// #


4odo o processo reali+ado no script acima j! é de nosso con)ecimento, comexceção do método setAttribute, &ue l)e explicarei a"ora.

Como dito anteriormente, esse método tem o prop


56/102

neQ $e ent.set?ttri -te%]id]'] $a])*

neQ $e ent.set?ttri -te%]c$ass]']desta -e])*


G

//66>

M3to)o ,etAttributeAo tradu+irmos o termo "et, obtemos0 ad&uirir, pe"ar, receber, obter, dentreoutros. 9ortanto, lo"o entedemos &ue "etAttribute pe"a o atributo de umdeterminado elemento.Assim como precisamos criar atributos, precisamos também obt*#los afim demanipularmos ou utili+!#los para certos objetivos.

A sintaxe dele é simples, observe0get?ttri -te%]no eCo?tri -to])*

Com o c


57/102

Página + de 102


58/102

pt+apHtulo I -


59/102

oc* provavelmente j! trabal)a com duas camadas0 conteúdo e apresentação.Isso é um bom começo, uma ve+ &ue voc* j! usufruiu das vanta"ens de setrabal)ar com camadas separadas.Mas, por &ue ainda não trabal)a com a camada de comportamento como asoutrasK

e voc* respondeu por &ue não sabe, ou por &ue não teve a oportunidade deaprender, essa é a c)ance.

oc* ver!, na unidade se"uinte e no desenvolvimento do nosso projeto final, o&uanto é produtivo, interessante, acessível e ele"ante a interação entre essastr*s camadas.

ptntro)u*ão ao JavaScript não-obstrutivo

Assim como separamos os elementos de apresentação dos elementos deconteúdo através de uma fol)a de estilo externa /C ;, iremos separar oselementos de comportamento dos elementos de conteúdo através de um ar&uivoexterno de -ava cript.1essa forma, trabal)aremos com as tr*s camadas e as deixaremosindependentes uma das outras. 9ortanto, para acrescentar, alterar ou removerconteúdo trabal)aremos com a marcação 34M5, precisamente na camada deconteúdo.

e precisarmos alterar o laEout, cores e outros elementos de apresentação,trabal)aremos com as C , alterando a camada de apresentação.9ara concluir, trabal)aremos com a camada de comportamento, &uando )ouvernecessidade de acrescentar, editar ou remover tais comportamentos na p!"ina.A não utili+ação correta das tr*s camadas da %eb não é tão desele"ante einacessível &uanto o desenvolvimento de um -ava cript obstrutivo, ou seja,scripts &ue impedem &ue al"uém utili+e um %ebsite caso não ten)a suporte ao-ava cript ou por estar desativado.Fm site precisa satisfa+er o usu!rio ou o usu!rio precisa satisfa+er o siteK 9ensenisso.

ejamos um exemplo de -ava cript obstrutivo, se"uido por dois não#obstrutivos.

texto do $inR

text do

$inRtexto do $inR

Página +B de 102


60/102

2 primeiro exemplo ilustra um -ava cript obstrutivo, o &ual deve ser evitado,uma ve+ &ue, se al"uém tentar acessar o lin( do exemplo sem ter suporte ao-ava cript não c)e"ar! )! lu"ar al"um. Afinal, o &ue temos definido no atributo)ref é simplesmente uma tral)a / ;.

2 se"undo exemplo é bom, mas não é o ideal. 6le abre uma popup comodesejamos para a&ueles &ue possuem suporte ao -ava cript, assim como noprimeiro exemplo. Caso o usu!rio não ten)a suporte ao -ava cript ele ser!encamin)ado para a mesma p!"ina exibida no popup, neste caso0 pa"ina.)tm.9ara finali+ar, temos um exemplo perfeito e ideal. Fma marcação &ue prepara olin( a ser recon)ecido por um -ava cript não#obstrutivo e o torna ativador deuma popup, como desejamos.6 como isto é feitoK imples, adicionamos ao lin( uma classe c)amada popup e o&ue precisamos fa+er é criar um script para recon)ecer os lin(s &ue possuem talclasse e através deles, abriremos uma popup com a p!"ina definida no atributo)ref deste lin(.

amos obseravar o script para exemplificar essa facilidade0

:-nction doPop-ps%) F

i: %5doc- ent.get $e entsHyZag a e) ret-rn :a$se*

var $inRs = doc- ent.get $e entsHyZag a e%"a")*

:or %var i=0* i < $inRs.$engt * i ) F

i: %$inRsXiY.c$ass a e. atc %"pop-p")) F

$inRsXiY.onc$icR = :-nction%) F

QindoQ.open%t is. re:)*

ret-rn :a$se*

G

G

G

G

QindoQ.on$oad = doPop-ps*

ejamos o exemplo nesta pá,ina )e )emonstra*ão .amos analisar e compreender o &ue esse script fa+.

Iniciando pela última lin)a 'indo'.onload < do?opups . 6la simplesmente inicia afunção # do?opups # &uando a p!"ina a &ual o ar&uivo -ava cript est! vinculado

for carre"ada.

Página 70 de 102

http://www.cin.ufpe.br/~ejgcs/ajax/exe_scripts/cap3/ex-js-nao-obstrutivo.htmhttp://www.cin.ufpe.br/~ejgcs/ajax/exe_scripts/cap3/ex-js-nao-obstrutivo.htm


61/102

A função em &uestão inicia#se reali+ando uma verificação, if [email protected]$/ag9ame) return false , a &ual impede &ue o bro%ser&ue não recon)ece o método get6lements7$/ag9ame aborte o script, ou seja,não o execute. Caso isso não seja feito, causar! um erro pelo fato dele /bro%ser;

não recon)ecer um método &ue ser! utili+ando no script.6m se"uida, temos a vari!vel lin(s , a &ual utili+a ométodo get6lements7$/ag9ame para selecionar todos os lin(s contidos nap!"ina.Ap


62/102

ao mundo e aos desenvolvedores as inúmeras possibilidades &ue essametodolo"ia pode oferecer aos aplicativos e ao usu!rio &uando intera"em comtais aplicativos. 6ssas demonstraç es vieram em produtoscomo0 ;mail , ;oo,le Su,,est , ;oo,le Maps , dentre outros.

Luando intera"imos com aplicativos baseados no Ajax, não precisamos esperar&ue a p!"ina se recarre"ue a cada interação &ue fa+emos com ela. medida &uevamos utili+ando seus recursos, a interface vai se moldando $s nossasnecessidades, baseando#se em nossas aç es e re&uisiç es perante a ela.

:as unidades se"uintes deste capítulo falaremos de forma mais pr!tica para &uevoc* compreenda e recon)eça o Ajax.

Introdução ao Ajax

Ima"ine o se"uinte cen!rio0 voc* ir! reali+ar um cadastro e, para se cadastrar,voc* precisar! escol)er um lo"in para utili+ação do sistema em &uestão. 6ntão,voc* escol)e o lo"in, preenc)e o restante dos dados e envia o formul!rio. Comoresposta voc* ter! provavelmente a se"uinte mensa"em0 o login informado jáestá em uso por outro usuário, por favor, escol#a outro . 6 l! vai voc* mais umave+, tendo em al"uns casos &ue ver a mesma mensa"em diversas ve+es, o &uepode até fa+er voc* desistir do cansativo processo de escol)a de lo"in.

e tal processo fosse baseado em Ajax poderia conter duas ou maispossibilidades, por exemplo0 informar ao usu!rio &ue tal lo"in j! existe &uandoele terminar de inform!#lo e sair do campo eJou disponibili+ar um botão para &uetal consulta seja feita sem &ue a p!"ina se recarre"ue e sem tornar o processocansativo e demorado.

ejamos esse exemplo utili+ado no `mail0

Mas, como tudo isso ocorreK Como desenvolver tais recursosK

Página 72 de 102

http://www.google.com/gmailhttp://www.google.com/webhp?hl=enhttp://www.google.com/mapshttp://www.google.com/gmailhttp://www.google.com/webhp?hl=enhttp://www.google.com/maps


63/102

?om, vamos ver como acontece essa recuperação de dados de forma assíncronae posteriormente aprenderemos como desenvolv*#la baseado no Ajax.

2 método cl!ssico de interação com uma interface ocorre da se"uinte maneira0ocasionamos uma ação através de al"um evento /com o mouse, o teclado,dentre outros; e tal ação é enviada ao servidor &ue ir! interpret!#la e retornar!al"um dado referente a tal ação.

amos compreender isto mel)or baseando#se no exemplo do lo"in &ue citamosanteriormente.

2 usu!rio efetua uma ação escol)e o lo"in, preenc)e o restante dos dados eenvia o formul!rio tal ação é enviada ao servidor &ue retornar! uma mensa"emao usu!rio baseando#se nos dados por ele informados, ou seja, ser! informado

se o cadastro foi reali+ado, ou se ocorreu al"um erro &ue dever! ser corri"idopara conclusão do mesmo.

2 método de interação com uma interface baseado no Ajax ocorre da se"uintemaneira0 al"uma ação é ocasionada através de al"um evento /com o mouse, oteclado, dentre outros; e uma função é associada a tal ação. 6ssa função ir!comunicar#se com o servidor sem &ue o formul!rio seja enviado e informar! aousu!rio a mensa"em &ue foi retornada referente $ ação &ue ele ocasionou.

7esumindo, voc* não precisa submeter o formul!rio para comunicar#se com oservidor, basta utili+ar o método M53ttp7e&uest /falaremos mel)or sobre ele ase"uir; para se comunicar e intera"ir com o servidor através de al"um eventosem &ue a p!"ina seja recarre"ada.

A ima"em abaixo ilustra os modelos apresentados nos par!"rafos acima.

Página 7! de 102


64/102

pt

2 objeto M53ttp7e&uest

2 objeto M53ttp7e&uest foi primeiramente implementado pela Microsoft noInternet 6xplorer como um objeto Active c)amado M53449. 5o"o ap


65/102

Con)eceremos a"ora as propriedades, métodos e eventos do objetoM53ttp7e&uest e, no capítulo se"uinte /onde desenvolveremos o projeto final;,

veremos como instanciar tal objeto para trabal)armos com ele.

Propriedades do objeto XM !ttpRequest

read"#tate

A re uisição se apresenta em ? ( uatro) est$gios@ am;osrepresentando por um n mero.

• 0 - (ão i(icialiGadoH• 1 - carr'.a '(toH• 2 - carr'.adoH• 3 - i(t'rati!oH• 4 - co pl'to<

status I$di.o (J 'rico do "tatu" K ? r'tor(ado p'lo"'r!idor L'b<

status$ext

'xto a""ociado ao c$di.o (J 'rico do "tatu"K ?< ?or 'x' plo 200 "i.(iNca EO ' 404"i.(iNca ?9.i(a (ão '(co(trada <

respo%se$ext

Stri(. u' co(t o" dado" r'tor(ado" p'lo"'r!idor L'b<

respo%seXM

S' o "'r!idor L'b r'tor(ar u docu '(to PMCQ l;'p'r iti(do ac'""9-lo atra! " d' u(çR'" a!aScriptutiliGa(do o EM<

M&todos do objeto XM !ttpRequest

ope%'m&todo( url(s)%cro%o( usu*rio(se%ha+

!nicia uma nova re uisição: onde

• todo - ' ui"ição K ?Q(a aiorida da" !'G'" F Qou ?ES H

• url - '(d'r'ço da T C u'"'r9 r' ui"itada (o "'r!idorL'bH

• "U(cro(o - "' o todo

trabal;ar9 d' or a "U(cro(a oua""U(cro(aH o !alor padrão

Página 7+ de 102


66/102

tru' - a""U(cro(aH• u"u9rio ' "'(;a - "' o

"'r!idor L'b ('c'""itar d' u aaut'(ticação<

setRequest!eader'%ome( ,alor+

( or a u cab'çal;o &;'ad'r)para a r' ui"ição<

se%d'dados+ (!ia a r' ui"ição< (!ia(doopcio(al '(t' o" dado"<

abort'+ Aborta u a r' ui"ição 'ati!idad'<

-etRespo%se!eader'%ome+

'tor(a o !alor do cab'çal;o&;'ad'r) i( or ado<

-et.llRespo%se!eaders'+

'tor(a u a "tri(. co(t'(do todo"o" cab'çal;o" &;'ad'r)<

E,e%tos do objeto XM !ttpRequest

o%read"statecha%-e

l'!a(do a cada uda(ça da propri'dad'r'adyStat'<

pt

9és no c)ão

2 "rande /e sério; problema de al"uns desenvolvedores é a necessidade dedesenvolver al"o para satisfa+er o seu e"o ou impressionar seus ami"os,deixando de lado ou i"norando totalmente o usu!rio.

im, o usu!rio0 a&uele pobre coitado &ue deseja utili+ar a interface &ue voc*criou mas se v* impossibilitado por tantas fírulas &ue não ajudam em nada, pelocontr!rio, atrapal)am muito.

6ntão, pés no c)ão ao desenvolver baseado no Ajax ou em &ual&uer outratecnolo"ia. e voc* se lembra da era em &ue o >las) /da Macromedia; era o

bam#bam#bam em matérias de fírulas, sabe bem o &ue estou falando.

Página 77 de 102


67/102

6m cada projeto )! um objetivo. 9ortanto, pense primeiramente no objetivo doseu projeto e posteriormente na mel)or de forma de alcanç!#lo, assim todossaem "an)ando.

1essa forma, voc* pode ser recon)ecido por ter reali+ado um bom trabal)o e ousu!rio ficar! satisfeito ao utili+ar o &ue voc* criou. 9ense nissoY

A"ora vamos tirar o pé do c)ão e coloc!#lo sobre o capítulo se"uinte. 6le ser!bem interessante e totalmente pr!tico. :ele desenvolveremos nosso projeto final.

pt

Capítulo # 9ref!cio6ste capítulo sem dúvida é muito bacana e esperamos &ue seja ao mesmo tempomuito produtivo.

Colocaremos em pr!tica, de forma simples, clara e objetiva, tudo &ue abordamosno curso para &ue a compreensão seja privile"iada.

:este capítulo abordaremos0

•

eparação de camadas da %eb # conteúdo, apresentação, comportamentoP• -ava cript e -ava cript não#obstrutivoP• 12MP• AjaxP• Inserção de re"istros em banco de dados via AjaxP• 6dição de re"istros em banco de dados via AjaxP• 7emoção de re"istros em banco de dados via AjaxP• Atuali+ação de contéudo via AjaxP• 6 muito mais.

:os veremos mais a frente.

pt

Introdução ao 9rojeto >inal

:osso projeto final ser! uma a"enda de contatos. Aplicativo &ue nos possibilitar!aprender tudo &ue relatamos na unidade anterior.

Página 7 de 102


68/102

2 projeto ser! desenvolvido em


69/102

endo assim, listamos abaixo os dados &ue irão compor o cadastro dos contatosde nossa a"enda de contatos.

• :ome• 2bservaç es• 111• 4elefone• Celular• 6#mail• ?lo" J site• M :• "4al(• (Epe

A"ora iremos criar nossa tabela e nela os campos &ue precisaremos /listadosacima;.

ejamos a estrutura final da tabela na ima"em abaixo0

Al"umas observaç es0

2 prefixo contL inserido em cada campo na tabela si"nifica contato . 6le é muitoútil &uando trabal)amos com li"aç es entre tabelas /esse não ser! o nossocaso;, evitando uma confusão entre um campo e outro das tabelas interli"adas.

6ssa dica é uma pr!tica pessoal &ue utili+o &uando crio min)as tabelas.Como podemos observar, )! dois campos a mais na tabela do &ue os listadosacima, são eles0 contLi) e o contL)ataLca) .

2 primeiro é a c)ave#prim!ria da tabela, uma identificação única de cada re"istro/contato;. 2 se"undo, ser! a data em &ue o cadastro foi reali+ado. Com esse doiscampos, totali+amos 88 campos na tabela.

6ntão, iniciaremos criando a tabela como o nome a,en)aLcontato(

ejamos o exemplo0

Página 7B de 102


70/102

6m se"uida, criaremos os campos necess!rios para tal tabela. 2bserve0

1etal)es sobre os campos0

• contLi) # c)ave#prim!ria e definido como autoOincrement . Ftili+amos também oatributo NS ;N!5 para evitar &ue a conta"em dos re"istros inicie com númerone"ativoP

• contLi)1 contLnome1 contL)))1 contLtelefone1 contLemail e

contL)ataLca) # foram definidos como not null , ou seja, eles não podem ficar embranco, devem ser preenc)idosP

• 9ara o campo contL)ataLca) utili+amos um campo do tipo 5AC!C M! , &uearma+ena a data e o )or!rio no se"uinte formato0 -MM-55 BBDMMDSS .

• 9ara o restante dos campos foram utili+ados os tipos 9A +BA e+BA . ão osmais utili+ados. 2 primeiro, é utili+ado &uando não sabemos ao certo a &uantidade decaracteres &ue ser! informada, ou seja, pode conter de $ &uantidade m!ximainformada. 2 se"undo, é utili+ado &uando sabemos ao certo a &uantidade de

caracteres &ue ser! inserido no campo.9or exemplo, o campo contL))) foi definido como +BA e informado &ue ter! umtotal m!ximo de B /dois; caracteres. -! o campo contLemail foi definidocomo 9A +BA e informado &ue poder! ter no m!ximo hD caracteres.

9ara mais detal)es sobre os tipos )e campos acesse o Manual )eefer:ncia )o M%SK?(

oc* poder! utili+ar a se"uinte instru*ão SK? para criar a tabela referenciadaacima.

6666 Za $e str-ct-re :or ta $e `agenda_contatos`

Página 0 de 102

http://dev.mysql.com/doc/refman/4.1/pt/column-types.htmlhttp://dev.mysql.com/doc/refman/4.1/pt/index.htmlhttp://dev.mysql.com/doc/refman/4.1/pt/index.htmlhttp://www.cin.ufpe.br/~ejgcs/ajax/projeto-final-concluido/estrutura-da-tabela-agenda-contatos.sqlhttp://dev.mysql.com/doc/refman/4.1/pt/column-types.htmlhttp://dev.mysql.com/doc/refman/4.1/pt/index.htmlhttp://dev.mysql.com/doc/refman/4.1/pt/index.htmlhttp://www.cin.ufpe.br/~ejgcs/ajax/projeto-final-concluido/estrutura-da-tabela-agenda-contatos.sql


71/102

66

I ?Z Z?H\ `agenda_contatos` % `cont_id` int%11) -nsigned Z U\\ a-to_incre ent' `cont_no e` varc ar%1+0) Z U\\ de:a-$t ]]' `cont_o s` text'

`cont_ddd` c ar%2) Z U\\ de:a-$t ]]' `cont_te$` varc ar%B) Z U\\ de:a-$t ]]' `cont_ce$` varc ar%B) de:a-$t U\\' `cont_e ai$` varc ar%7#) Z U\\ de:a-$t ]]' `cont_ $og` varc ar%2++) de:a-$t U\\' `cont_ sn` varc ar%7#) de:a-$t U\\' `cont_gta$R` varc ar%7#) de:a-$t U\\' `cont_sRype` varc ar%!2) de:a-$t U\\' `cont_data_cad` dateti e Z U\\ de:a-$t ]0000600600 00D00D00]' P ,8? [ W [ %`cont_id`)' W [ `cont_no e` %`cont_no e`)) Z[P =8y,S?8 I 88 Z=]Iadastros da in a agenda de contatos.]*

pt9isão ,eral sobre o


72/102

Formulário )e ca)astro sem

Ajax

Formulário )e e)i*ão )os )a)os com

Ajax Formulário )e e)i*ão )os )a)os sem

Ajax

+onfirma*ão )e exclusão )e contato via Ajax

ptisão "eral sobre as p!"inas

Ao se trabal)ar com Ajax, temos duas opç es0 desenvolver as p!"inas para&uem utili+ar! o sistema com e sem o Ajax separadamente ou, desenvoler umaúnica p!"ina &ue atenda as duas vertentes /com e sem Ajax;.

A se"unda é mais interessante, não éK 6ntão, ser! com ela &ue iremos trabal)arneste curso.

Página 2 de 102


73/102

Antes de l)e explicar a finalidade de cada p!"ina e o por&u* de cada uma delas,vamos observar a estrutura do nosso diret


74/102

A p!"ina actions(p7p reali+ar! as tr*s principais funç es do projeto0 inserir,editar e excluir re"istros do banco de dados.

-! a p!"ina formulario(p7p contém o formul!rio &ue ser! utili+ado para ocadastro e edição dos contatos da a"enda.

A p!"ina in)ex(p7p é a p!"ina principal, a &ual ser! a respons!vel pela camadade conteúdo e onde ocorrer! todo o trabal)o em nossa a"enda de contato.

6, finali+ando, a p!"ina relatorio(p7p exibe o relat


75/102

7epare &ue definimos um atributo 5 ao lin( e demos a ele o se"uintevalor0 btnNovo+a)astro . 6, no atributo 7ref , criamos avari!vel exibirFormulario .

A"ora compreenda o se"uinte0 se o usu!rio &ue estiver utili+ando o aplicativonão tiver suporte ao -ava cript e clicar no referido lin(Jbotão, ele ser!redirecionado para a mesma p!"ina em &ue est!, ou seja, in)ex(p7p , mas a"oracom a vari!vel # exibirFormulario # existente na F75.

ejamos o exemplo0

Mas, se esse não for esse caso, e sim outro usu!rio &ue tiver suporte ao-ava cript, exibiremos a ele o formul!rio sobre a p!"ina através do Ajax sem &uea p!"ina se carre"ue.

amos observar o exemplo0

7esumindo, se o usu!rio tiver suporte ao -ava cript, exibiremos o formul!riosobre a p!"ina através do Ajax e, se não, incluiremos o formul!rio na p!"ina.

2 mesmo conceito ser! aplicado em outras partes da p!"ina.

amos observar este0

2 exemplo acima diferece#se um pouco do tru&ue explicado anteriormentepor&ue a p!"ina relatorio(p7p ser! incluida na p!"ina in)ex(p7p sem açãoal"uma do usu!rio. ?asta acessar a p!"ina &ue ela j! ter! o relat


76/102

iremos inserir a p!"ina relatorio(p7p com as respectivas modificaç esna )iv denominada como conteu)o1 em seu atributo 5 .

ipt

Compreendendo a p!"ina index.p)p

A partir de a"ora, trabal)aremos em cada parte do projeto, iniciandopela in)ex(p7p .

amos observar o )ead da p!"ina e o &ue temos antes dele0

Iniciamos a p!"ina incluindo tr*sp!"inas0 class(M%SK?(p7p ,functions(p7p e actions(p7p .

As duas primeiras locali+adas no diret


77/102

:en)uma novidade não éK -! fi+emos uma aborda"em sobre tais marcaç es efunç es presentes no bodE dessa p!"ina na unidade +ompreen)en)o oespHrito )a 'coisa' .

endo assim, se"uiremos para a pr


78/102

Mas, por &ue issoK 9ense comi"o0 a p!"ina in)ex(p7p também reali+a estemesmo processo, ou seja, incluir as referidas p!"inas. 2(, mas se ela/index.p)p; j! inseriu por &ue iremos inserir novamenteK

:ão iremos inserir novamente, simplesmente iremos utili+ar ap!"ina actions(p7p também através do Ajax e para isso, ela precisa &ue taisp!"inas estejam inclusas.

6ntão, verificamos através de uma condição se a p!"ina est! sendo acessada viaAjax, caso esteja, incluímos as p!"inas necess!rias#class(M%SK?(p7p e functions(p7p .

6m se"uinda temos outra condição, vejamos0

endo simplista, ela verifica se o formul!rio foi submetido. 2nde action é i"ual aonome de um campo do formul!rio.

5o"o ap


79/102

Atente#se ao se"uinte, elas são utili+adas somente &uando os dados são inseridosvia Ajax.

2 pr


80/102

- na p!"ina class(M%SK?(p7p . 2 redirecionamento para ap!"ina in)ex(p7p ser! feito somente se não tivermos trabal)ando com o Ajax.

A p!"ina actions(p7p é finali+ada com o se"uinte c


81/102

6sta p!"ina também utili+a o mesmo recurso &ue a actions(p7p , &ue é o deincluir as p!"inas class(M%SK?(p7p e functions(p7p somente se estivermostrabal)ando via Ajax.

Como j! dito antes, a p!"ina in)ex(p7p j! incluiu essas p!"inas. Mas como ap!"ina formulario(p7p ser! acessada via Ajax e não

pelain)ex(p7p precisamos incluir as referidas p!"inas.6m se"uinda, verificamos se ocorrer! uma edição de dados#isset. L;!CPQe)itarQR/( e )ouver, criamos um recordset filtrado pelo I1 docontato, de forma &ue teremos os dados do cadastrado e o exibiremos noatributo value dos campos do formul!rio.

Com essas condiç es reali+adas, podemos criar nosso formul!rio.

ejamos0

6ste formul!rio possui uma peculiaridade &ue é a atribuição davari!vel exibirFormulario na action do form e os c


82/102

p!"ina formulario(p7p e ela é exibida somente se )ouver a tal vari!vel naF75, a colocamos juntamente da p!"ina para o &ual enviaremos oformulario in)ex(p7p exibirFormulario&true no atributo action dele. 6sseprocedimento é para &ue a p!"ina permaneça em exibição e conse&Wentemente

indi&ue os erros ocorridos ao usu!rio.A"ora, observe na ima"em abaixo como o atributo value dos campos foramdefinidos0

2u seja, verificamos se o processo ser! de edição de dados#isset. L;!CPQe)itarQR/ . e for, exibiremos o referido dado arma+enado nobanco de dados em seu respectivo campo no formul!rio.

>inali+ando a p!"ina, temos si"nificantes pecularidades &ue valem uma boaobservação.

ejamos os c


83/102


84/102

Assim, contLnome é o nome do campo na tabela a,en)aLcontatos &uearma+ena o nome do nosso contato.A característica determinante para o Ajax &ue citei no início desta unidade, se

refere aos lin(s para edição e exclusão de dados. amos observar a marcação34M5 de cada um deles e saber o &ue )! de determinante nesses lin(s.Começaremos pelo atributo 7ref do lin( para edição. 2bserve0

re:="index.p p@ exibirFormulario=true Oa p* editar=true Oa p* ID=


85/102

A p!"ina comportamentos.js, &ue abordaremos nesta unidade, é a nossa camadade comportamento e ser! a respons!vel por toda interatividade do aplicativo einterpretação da marcação 34M5 &ue desenvolvemos nas p!"inas anteriores.6ntão, vamos l!Y

A p!"ina é composta por 8h funç es. eremos cada uma delas para voc*compreender suas respectivas funcionalidades.

ejamos a lista com o nome das funç es contidas na p!"ina0

8. openAjax./B. loa)Functions./Z. ,!./D. ,!s./

. ativar@tn+a)astro./h. exibir@,@o)%./X. box+a)./T. loa)in,./@. btnO>@tn+ancelar./8 . focusNome./88. vali)arForm./8B. vali)a!mail./8Z. atualiza elatorio./8D. ativar@tn!)itar@tn!xcluir./8 . remover5ivs./8h. ,et


86/102

6ssa função nomeada como openAjax./ é a respons!vel em instanciar oobjeto M?Bttp e4uest e essa inst'ncia do objeto ser! atribuída avari!vel ajax .

7epare &ue através do tr% $ catc7 estamos verificando &ual o método suportadopelo bro%ser0 M?Bttp e4uest , presente no Mo+ila, >irefox, afari, entreoutrosP ou M?BCC< , utili+ado no Internet 6xplorer como um objeto Active .

2bserve &ue nossa marcação 34M5 est! limpa e separada do -ava cript de forma&ue não temos atribuiç es de eventos em objetos como o exemplo se"uinte0

... onc$icR=":-ncao %]para etro[])*" ...

7espons!vel em c)amar as funç es -ava cript, precisamos c)amar essas funç esde outra forma, e uma delas é &uando a p!"ina é carre"ada.

2bservemos0

Ao carre"ar a p!"ina # 6in)o6(onloa) # ser! c)amada a função loa)Functions ,&ue por sua ve+ c)ama outras funç es # focus:ome/;, ativar?tnCadastro/;,ativar?tn6ditar?tn6xcluir/;.

oc* pode se per"untar0 se temos de+esseis funç es, por &u* somente Z dessassão c)amadasK imples, por&ue inicialmente ao carre"ar a p!"ina precisamossomente dessas tr*s.>alaremos sobre cada uma especificamente para uma mel)or compreensão.

As funç es "6/; e "6s/; além de facilitar o nosso trabal)o, são benéficas para asaúde, ajudando#nos a evitar a 567 e a tendinite, acredite.

2bserve#as para &ue eu possa l)e explicar mel)or0

Página A7 de 102

http://www.cin.ufpe.br/~ejgcs/ajax/4.2.htm?pg=5.10.htmhttp://www.cin.ufpe.br/~ejgcs/ajax/4.2.htm?pg=5.10.htmhttp://www.cin.ufpe.br/~ejgcs/ajax/4.2.htm?pg=5.10.htmhttp://www.cin.ufpe.br/~ejgcs/ajax/4.2.htm?pg=5.10.htmhttp://www.cin.ufpe.br/~ejgcs/ajax/4.2.htm?pg=5.10.htmhttp://www.cin.ufpe.br/~ejgcs/ajax/4.2.htm?pg=5.10.htm


87/102

Luando precisamos acessar um objeto através do valor atribuído em seu atributoI1, procedemos assim0

doc- ent.get $e entHy,d%]va$orCo?tri -to,C])*

A"ora, ima"ine acessar inúmeros elementos. Ima"inouK 6ntão, é cansativo,c)ato e não )! mãos &ue a"uente.

A função "6/; foi criada para solucionar este problema, de forma &ue bastac)am!#la assim0

g %]va$orCo?tri -to,C])*

2 &ue seria o e&uivalente ao &ue fi+emos no exemplo anterior.

A função "6s/; tem o mesmo pr


88/102

6la inicia verificando se )! al"um objeto cujo atributo 5 tem ovalorbtnNovo+a)astro . 5embra#se deleK Q a&uele lin( &ue di+emos &ue &uandoclicarmos nele seria c)amado o formul!rio de cadastro. 6ntão, observe a lin7a

TU na ima"em acima. 6stamos di+endo &ue ao clicar no lin( # onclic> # iremosexecutar uma função.

Iniciamos tal função c)amando outras tr*s funç es # exibir?"?odE/;, boxCad/; eopenAjax/; # essa última foi atribuída a vari!vel &ue c)amamos de ajax. Maisadiante abordaremos as outras duas funç es.

:a lin7a TV criamos a vari!vel recipiente , a &ual ter! como valor um objetocujo 5 foi definido como box+a) .

:a lin7a U , começamos a maravil)a do Ajax, utili+ando o método open doobjeto M?Bttp e4uest . Informamos a esse método &ue trabal)aremos como método ;!C de re&uisição 3449, &ue a p!"ina formulario(p7pajax&true ser! re&uisitado e &ue trabal)aremos de forma a

Documents

Web Sites Com AJAX - Objetos de Metodos Do DHTML (DOM)