Você está na página 1de 99

Programa¸c˜ao Web

Javascript

Ivo Calado

Instituto Federal de Educa¸c˜ao, Ciˆencia e Tecnologia de Alagoas

1 / 83 Programa¸c˜ao Web

10 de Novembro de 2015

Ivo Calado

Programa¸c˜ao Web Javascript Ivo Calado Instituto Federal de Educa¸c˜ao, Ciˆencia e Tecnologia de Alagoas 1 /

IFAL

Roteiro

  • 1 Introdu¸c˜ao

  • 2 B´asico do JavaScript

  • 3 JavaScript avan¸cado

  • 4 JavaScript avan¸cado II

2 / 83 Programa¸c˜ao Web

Ivo Calado

Roteiro 1 Introdu¸c˜ao 2 B´asico do JavaScript 3 JavaScript avan¸cado 4 JavaScript avan¸cado II 2 /

IFAL

O que ´e Javascript

O que vimos at´e aqui?

Linguagens que possuem como foco a visualiza¸c˜ao da informa¸c˜ao N˜ao possibilitam a execu¸c˜ao de fluxos de c´odigo

3 / 83 Programa¸c˜ao Web

Ivo Calado

O que ´e Javascript O que vimos at´e aqui? Linguagens que possuem como foco a visualiza¸c˜ao

IFAL

O que ´e Javascript

O que vimos at´e aqui?

Linguagens que possuem como foco a visualiza¸c˜ao da informa¸c˜ao N˜ao possibilitam a execu¸c˜ao de fluxos de c´odigo

N˜ao s˜ao destinadas a programadores!!

3 / 83 Programa¸c˜ao Web

Ivo Calado

O que ´e Javascript O que vimos at´e aqui? Linguagens que possuem como foco a visualiza¸c˜ao

IFAL

O que ´e Javascript

O que vimos at´e aqui?

Linguagens que possuem como foco a visualiza¸c˜ao da informa¸c˜ao

N˜ao possibilitam a execu¸c˜ao de fluxos de c´odigo

N˜ao s˜ao destinadas a programadores!!

JavaScript foi projetado para adicionar interatividade `a p´aginas HTML

Trata-se de uma linguagem de script Trata-se de uma linguagem interpretada

3 / 83 Programa¸c˜ao Web

Ivo Calado

O que ´e Javascript O que vimos at´e aqui? Linguagens que possuem como foco a visualiza¸c˜ao

IFAL

O que ´e Javascript

O que vimos at´e aqui?

Linguagens que possuem como foco a visualiza¸c˜ao da informa¸c˜ao

N˜ao possibilitam a execu¸c˜ao de fluxos de c´odigo

N˜ao s˜ao destinadas a programadores!!

JavaScript foi projetado para adicionar interatividade `a p´aginas HTML

Trata-se de uma linguagem de script Trata-se de uma linguagem interpretada

O que ´e uma linguagem interpretada?

3 / 83 Programa¸c˜ao Web

Ivo Calado

O que ´e Javascript O que vimos at´e aqui? Linguagens que possuem como foco a visualiza¸c˜ao

IFAL

O que ´e Javascript

O que vimos at´e aqui?

Linguagens que possuem como foco a visualiza¸c˜ao da informa¸c˜ao

N˜ao possibilitam a execu¸c˜ao de fluxos de c´odigo

N˜ao s˜ao destinadas a programadores!!

JavaScript foi projetado para adicionar interatividade `a p´aginas HTML

Trata-se de uma linguagem de script Trata-se de uma linguagem interpretada

O que ´e uma linguagem interpretada?

Significa que o script ´e executada sem uma pr´evia compila¸c˜ao

O que ´e Javascript O que vimos at´e aqui? Linguagens que possuem como foco a visualiza¸c˜ao

3 / 83 Programa¸c˜ao Web

Ivo Calado

IFAL

O que ´e Javascript

Curiosidades

Qual a rela¸c˜ao entre Java e JavaScript?

4 / 83 Programa¸c˜ao Web

Ivo Calado

O que ´e Javascript Curiosidades Qual a rela¸c˜ao entre Java e JavaScript? 4 / 83 Programa¸c˜ao

IFAL

O que ´e Javascript

Curiosidades

Qual a rela¸c˜ao entre Java e JavaScript?

Nenhuma. Trata-se de linguagens completamente diferentes. Uma criada pela Sun e a outra pela Netscape!

4 / 83 Programa¸c˜ao Web

Ivo Calado

O que ´e Javascript Curiosidades Qual a rela¸c˜ao entre Java e JavaScript? Nenhuma. Trata-se de linguagens

IFAL

O que ´e Javascript

Curiosidades

Qual a rela¸c˜ao entre Java e JavaScript?

Nenhuma. Trata-se de linguagens completamente diferentes. Uma criada pela Sun e a outra pela Netscape!

Qual o nome oficial da linguagem JavaScript? ECMAScript! Desenvolvido e mantido pela ECMA International Organization

4 / 83 Programa¸c˜ao Web

Ivo Calado

O que ´e Javascript Curiosidades Qual a rela¸c˜ao entre Java e JavaScript? Nenhuma. Trata-se de linguagens

IFAL

Hello World!

Hello World

Para adicionar algum script JavaScript basta fazer uso da tag script tendo como valor do campo type: text/javascript

<html> <body> <s c ri p t

type="text/javascript">

document . w ri t e ( "<h1 >Hello

World !</h1 >" ) ;

</

s c ri p t>

</body>

</html>

document.write ´e a maneira padr˜ao para escrita na sa´ıda!

Hello World! Hello World Para adicionar algum script JavaScript basta fazer uso da tag script tendo

5 / 83 Programa¸c˜ao Web

Ivo Calado

IFAL

Hello World!

Como tornar JavaScript compat´ıvel com navegadores antigos?

Deve-se fazer uso dos coment´arios HTML para “esconder” o c´odigo JavaScript do navegador para manter a retrocompatibilidade!

<html> <body> <s c ri p t

type="text/javascript">

<!−− document . w ri t e ( "Hello //−−> </ s c ri p t> </body> </html>

World!" ) ;

Hello World! Como tornar JavaScript compat´ıvel com navegadores antigos? Deve-se fazer uso dos coment´arios HTML para

Onde colocar o c´odigo JavaScript?

No HEAD?

Scripts colocados na se¸c˜ao HEAD n˜ao s˜ao executados imediatamente e devem ser localizados em fun¸c˜oes!

<html> <head> <s c ri p t

f u n c ti o n

type="text/javascript">

 

message ()

{

a l e r t ( "This

}

;

alert

box

was

called

with

the

onload

event"

)

</

s c ri p t>

</head>

< / head >

<body

onload="message ()">

 

</body>

</html>

7 / 83 Programa¸c˜ao Web

Ivo Calado

IFAL

Onde colocar o c´odigo JavaScript?

No Body?

Se vocˆe n˜ao deseja que seu script esteja em uma fun¸c˜ao ou que ele seja destinado a escrever conte´udo na tela ent˜ao coloque-o na se¸c˜ao body!

<html>

<head></head>

<body> <s c ri p t

type="text/javascript">

document . w ri t e ( "This

message

is

written

by

JavaScript" ) ; </ s c ri p t> </body> </html>

Onde colocar o c´odigo JavaScript? No Body? Se vocˆe n˜ao deseja que seu script esteja em

8 / 83 Programa¸c˜ao Web

Ivo Calado

IFAL

Onde colocar o c´odigo JavaScript?

Usando em um arquivo externo?

Se vocˆe deseja compartilhar seu c´odigo JavaScript entre diversas p´aginas, pode-se fazer uso de uma p´agina externa

<html> <head> <s c ri p t type="text/javascript" s r c="xxx.js"></ s c ri p t>
<html>
<head>
<s c ri p t
type="text/javascript"
s r c="xxx.js"></
s c ri p t>
</head>
<body
onload="helloworld ()">
</body>
</html>
9 / 83
Programa¸c˜ao Web
Ivo Calado
IFAL

Comandos

Uso do ponto e v´ırgula

Em JavaScript, ´e facultativo o uso do ; (ponto e v´ırgula) para delimitar o fim de um comando!

<html> <body> <s c ri p t document document </ s c ri p t> </body>
<html>
<body>
<s c ri p t
document
document
</ s c ri p t>
</body>
</html>
type="text/javascript">
.
w ri t e
( "Fim
de
linha
COM
ponto
e
.
w ri t e
( "Fim
de
linha
SEM
ponto
e
virgula" ) ;
virgula" )
10 / 83
Programa¸c˜ao Web
Ivo Calado
IFAL

Comandos

Pulando linha em JavaScript

Como vocˆe deve ter percebido no exemplo anterior, as duas frases ficaram na mesma linha

Este comportamento acontece porque toda sa´ıda de enviada pelo JavaScript ´e tratata como c´odigo HTML. Por isso, deve-se fazer uso do “<br/>” ao final da frase

document . w ri t e ( "Fim de linha COM ponto e virgula <br />"
document . w ri t e
( "Fim
de
linha
COM
ponto
e
virgula <br
/>" )
;
document . w ri t e
( "Fim
de
linha
SEM
ponto
e
virgula <br
/>" )
11 / 83
Programa¸c˜ao Web
Ivo Calado
IFAL

Comandos

Coment´arios de linhas e multilinhas

JavaScript oferece dois tipos de coment´arios “//” e “/* */” A semˆantica ´e a mesma do que acontece em linguagens como Java e C++

<html>

<body> <s c ri p t /

type="text/javascript">

The

code

below

w i l

l

w ri t e

one

he ading

 

/ document . w ri t e ( "<h1 >This </ s c ri p t> </body> </html>

is

a

heading </h1 >" ) ;

Comandos Coment´arios de linhas e multilinhas JavaScript oferece dois tipos de coment´arios “//” e “/* */”

Usando vari´aveis

Usando vari´aveis

Vari´aveis em JavaScript tem a mesma semˆantica que em outras linguagens, isto ´e, armazenar informa¸c˜oes na mem´oria

Assim como o restante do JavaScript, s˜ao case-sensitive

Podem ser iniciadas por [aA-zZ],

ou $

A partir do segundo caracter poder ser dos seguintes tipos

[aA-zZ], [0-9],

ou $

13 / 83 Programa¸c˜ao Web

Ivo Calado

Usando vari´aveis Usando vari´aveis Vari´aveis em JavaScript tem a mesma semˆantica que em outras linguagens, isto

IFAL

Usando vari´aveis

Exemplo do uso de vari´aveis

<html> <body> <s c ri p t v a r

type="text/javascript"> f ir st n a m e ;

f ir st n a m e="Hege" ;

document . . f ir st n a m e="Tove" ; document . w ri t
document
.
.
f ir st n a m e="Tove" ;
document . w ri t e ( f ir st n a m e
</ s c ri p t>
</body>
</html>
document
w ri t e
w ri t e
(
f ir st n a m e
)
;
( "<br
/>" )
;
)
;
14 / 83
Programa¸c˜ao Web
Ivo Calado
IFAL

Usando vari´aveis

Uso de vari´aveis n˜ao declaradas

E ´ poss´ıvel atribuir valores `a vari´aveis ainda n˜ao declaradas.

<html>

<body> <s c ri p t

type="text/javascript">

</

f ir st n a m e="Hege" ; s c ri p t>

</body>

</html>

Nestes caso, a vari´avel ´e criada no momento da atribui¸c˜ao!

Usando vari´aveis Uso de vari´aveis n˜ao declaradas E ´ poss´ıvel atribuir valores `a vari´aveis ainda n˜ao

15 / 83 Programa¸c˜ao Web

Ivo Calado

IFAL

Usando vari´aveis

Arrays

Em JavaScript ´e poss´ıvel criar array para armazenamento de

diversos tipos de objetos

Os objetos n˜ao precisam ser do mesmo tipo

Existem 4 tipos de instancia¸c˜ao!

v a r myCars=new Array () ; v a r myCars=new Array (10) ; v a
v
a r
myCars=new
Array () ;
v
a r
myCars=new
Array (10) ;
v
a r
myCars=new
Array ( "Saab" , "Volvo" , "BMW" ) ;
v
a r
myCars=["Saab" , "Volvo" , "BMW" ] ;
16 / 83
Programa¸c˜ao Web
Ivo Calado
IFAL

Usando vari´aveis

Indexando arrays

Assim como Java, arrays em JavaScript s˜ao indexados a partir

da posi¸c˜ao 0

v a r

myCars=["Saab" , "Volvo" , "BMW" ] ;

document . w ri t e ( myCars [ 0 ])

//

Imprime

Saab

17 / 83 Programa¸c˜ao Web

Ivo Calado

Usando vari´aveis Indexando arrays Assim como Java, arrays em JavaScript s˜ao indexados a partir da posi¸c˜ao

IFAL

Usando vari´aveis

Unindo arrays

Em JavaScript ´e poss´ıvel unir dois arrays de maneira bastante

simples

<s c ri p t

type="text/javascript">

 
  • v =

a r

p a r e n ts

[ "Jani" ,

"Tove" ] ;

 
  • v [ "Cecilie" ,

a r

c h i l d r e n

=

"Lone" ] ;

  • v f a m i l y

a r

=

p a r e n ts .

conc a t ( c h i l d r e n ) ;

)

   

document . w ri t e ( f a m i l y

;

</ s c ri p t>

 
v = a r p a r e n ts [ "Jani" , "Tove" ] ;

18 / 83 Programa¸c˜ao Web

 

Ivo Calado

IFAL

Usando vari´aveis

Unindo todos elementos de um array em uma string

´

E poss´ıvel unir todos os elementos de um array em uma unica

´

string atrav´es do m´etodo join

= document . w ri t e

v a r

f r u i t s

[ "Banana" ,

( f r u i t s

.

"Orange" ,

"Apple" ,

j o i n ()

+

"<br

/>" )

;

"Mango" ] ; // U t i l i z a

o

s e p a r a d o r

padr˜ao

","

document . w ri t e ( f r u i t s . j o i n ( "+" )

+

"<br

/>" )

;

// U t i l i z a

o

s e p a r a d o r

passado

por

parˆame tro

 

document . w ri t e ( f r u i t s . j o i n ( "

and

" ) )

;

// U t i l i z a

o

s e p a r a d o r

passado

por

parˆame tro

 
Usando vari´aveis Unindo todos elementos de um array em uma string ´ E poss´ıvel unir todos

</ s c ri p t>

19 / 83 Programa¸c˜ao Web

Ivo Calado

IFAL

Usando vari´aveis

Exerc´ıcio

Pesquisar e criar exemplos para os seguintes m´etodos de um array:

push

pop

reverse

shift

slice

sort

unshift (se poss´ıvel, testar no Firefox e IE)

20 / 83 Programa¸c˜ao Web

Ivo Calado

Usando vari´aveis Exerc´ıcio Pesquisar e criar exemplos para os seguintes m´etodos de um array: push pop

IFAL

Usando vari´aveis

O objeto String

Em JavaScript o objeto String possui as seguintes

propriedades/m´etodos

length

toUpperCase()

big()

small()

bold()

italics()

fixed()

strike()

etc

21 / 83 Programa¸c˜ao Web

Ivo Calado

Usando vari´aveis O objeto String Em JavaScript o objeto String possui as seguintes propriedades/m´etodos length toUpperCase()

IFAL

Usando vari´aveis

Exerc´ıcio para casa!

Pesquisar a utiliza¸c˜ao dos objetos:

Date

Boolean

Math

RegExp

22 / 83 Programa¸c˜ao Web

Ivo Calado

Usando vari´aveis Exerc´ıcio para casa! Pesquisar a utiliza¸c˜ao dos objetos: Date Boolean Math RegExp 22 /

IFAL

Usando vari´aveis

Operadores aritm´eticos

JavaScript oferece 7 operadores aritm´eticos (+, -, *, /, %,

++, –)

23 / 83 Programa¸c˜ao Web

Ivo Calado

Usando vari´aveis Operadores aritm´eticos JavaScript oferece 7 operadores aritm´eticos ( +, -, *, /, %, ++,

IFAL

Usando vari´aveis

Operadores aritm´eticos

JavaScript oferece 7 operadores aritm´eticos (+, -, *, /, %,

++, –)

Al´em disso, s˜ao oferecidos os operadores de atribui¸c˜ao

correspondentes (=, +=, -=. *=, /= e %=)

23 / 83 Programa¸c˜ao Web

Ivo Calado

Usando vari´aveis Operadores aritm´eticos JavaScript oferece 7 operadores aritm´eticos ( +, -, *, /, %, ++,

IFAL

Usando vari´aveis

Concatena¸c˜ao de strings

O operador “+” pode ser utilizado tamb´em no processo de

concatena¸c˜ao de strings

Se pelo menos um dos operandos for uma string ent˜ao ser´a

realizado a concatena¸c˜ao

v1

=

20

v2

=

"11"

 

v3

=

v1

+

v2

Ir´a resultar na string 2011 e n˜ao no n´umero 31!!!

24 / 83 Programa¸c˜ao Web

Ivo Calado

Usando vari´aveis Concatena¸c˜ao de strings O operador “+” pode ser utilizado tamb´em no processo de concatena¸c˜ao

IFAL

Usando vari´aveis

Operadores de compara¸c˜ao

JavaScript especifica 7 operadores de compara¸c˜ao: ==,

===, !=, >, <, >=, <= e

<s c ri p t

type="text/javascript">

 

x

=

5

p r i n t l n

( x

==

5)

p r i n t l n

( x

==

"5" )

p r i n t l n

( x

=== 5)

 

p r i n t l n

( x

===

"5" )

 

</

s c ri p t>

 
 
x = 5 p r i n t l n ( x == 5) p r

25 / 83 Programa¸c˜ao Web

 

Ivo Calado

IFAL

Usando vari´aveis

Operadores de compara¸c˜ao

JavaScript especifica 7 operadores de compara¸c˜ao: ==,

===, !=, >, <, >=, <= e

<s c ri p t x

=

5

</

type="text/javascript">

p r i n t l n

( x

==

5)

p r i n t l n

( x

==

"5" )

p r i n t l n

( x

=== 5)

p r i n t l n

( x

===

"5" )

s c ri p t>

3 operadores l´ogicos: &&, ||, !

25 / 83 Programa¸c˜ao Web

Ivo Calado

Usando vari´aveis Operadores de compara¸c˜ao JavaScript especifica 7 operadores de compara¸c˜ao: ==, ===, !=, > ,

IFAL

Usando vari´aveis

Operadores tern´ario

Assim como Java e C++, em JavaScript ´e poss´ıvel fazer uso do

operador tern´ario.

Qual o resultado da vari´avel valor ap´os a execu¸c˜ao do seguinte

script?

<s c ri p t type="text/javascript"> x = 5 v a l o r = s
<s c ri p t
type="text/javascript">
x
=
5
v a l o r
=
s c ri p t>
( x
!=
5) ?
"string
de
teste"
:
10
</
26 / 83
Programa¸c˜ao Web
Ivo Calado
IFAL

Controle de fluxo

Express˜oes condicionais: if-else

A utiliza¸c˜ao da estrutura de sele¸c˜ao if-else ´e semelhante `a

Java

i f ( c o n d it i o n ) { st a t
i
f
( c o n d it i o n )
{
st a t ement
st a t ement
1 ;
2 ;
}
//
Os
d o is
comandos
s˜ao
e x e c u t a d o s
i
f
( c o n d it i o n )
//
st a t ement
st a t ement
st a t ement
Apenas
o
1 ;
2 ;
3 ;
p ri m e ir o
comando
´e
e x e cut ado
27 / 83
Programa¸c˜ao Web
Ivo Calado
IFAL

Controle de fluxo

Exemplo if-else

<html> <body> <s c ri p t type="text/javascript"> v a r d = new Date ()
<html>
<body>
<s c ri p t
type="text/javascript">
v
a r
d
=
new
Date () ;
v
a r
time
=
d . ge tHours ()
;
i f
( time
<
12)
{
document
.
w ri t e
( "<b>Bom
dia </b>" ) ;
}
e ls e
document . w ri t e ( "<b>Boa
tarde </b>" ) ;
</ s c ri p t>
</body>
</html>
28 / 83
Programa¸c˜ao Web
Ivo Calado
IFAL

Controle de fluxo

Exerc´ıcio

Criar uma p´agina HTML que possua um script JavaScript que faz

uso da fun¸c˜ao Math.random() para gerar n´umeros aleat´orios e

caso o valor for maior que 0.5 criar o link para a p´agina do Google.

Caso contr´ario, redirecionar para a p´agina globo.com .

29 / 83 Programa¸c˜ao Web

Ivo Calado

Controle de fluxo Exerc´ıcio Criar uma p´agina HTML que possua um script JavaScript que faz uso

IFAL

Controle de fluxo

Exerc´ıcio II

Altere o exemplo if.html para que, dependendo da hora

obtida no sistema seja impressa a aula atual (1 a , 2 a , 3 a ,

intervalo, 4 a , 5 a , 6 a ).

Sabe-se que o m´etodo getMinutes() do objeto Date retorna

os minutos atuais e getHours() retorna a hora atual.

30 / 83 Programa¸c˜ao Web

Ivo Calado

Controle de fluxo Exerc´ıcio II Altere o exemplo if.html para que, dependendo da hora obtida no

IFAL

Controle de fluxo

O comando For

Em JavaScript, a estrutura for segue a mesma sintaxe da

linguagem Java

f o r

( v a r=s t a rt v

a l u e

;

v a r<=e n d v a l u e ; var=var+i n c r eme n t )

{

 

// c o di g o

a

s e

r

e x e cut ado

}

31 / 83 Programa¸c˜ao Web

Ivo Calado

Controle de fluxo O comando For Em JavaScript, a estrutura for segue a mesma sintaxe da

IFAL

Controle de fluxo

O comando For

Em JavaScript, a estrutura for segue a mesma sintaxe da

linguagem Java

f o r

( v a r=s t a rt v

a l u e

;

v a r<=e n d v a l u e ; var=var+i n c r eme n t )

{

 

// c o di g o

a

s e

r

e x e cut ado

}

As estruturas while e do-while seguem a mesma estrutura da

linguagem JavaScript

31 / 83 Programa¸c˜ao Web

Ivo Calado

Controle de fluxo O comando For Em JavaScript, a estrutura for segue a mesma sintaxe da

IFAL

Controle de fluxo

Exerc´ıcio

Implemente uma p´agina Web que escreva os 6 tipos de

cabe¸calhos fazendo uso do comando for

32 / 83 Programa¸c˜ao Web

Ivo Calado

Controle de fluxo Exerc´ıcio Implemente uma p´agina Web que escreva os 6 tipos de cabe¸calhos fazendo

IFAL

Controle de fluxo

Controles de fluxo adicionais

break, continue e for in

..

Qual a diferen¸ca entre break e continue

33 / 83 Programa¸c˜ao Web

Ivo Calado

Controle de fluxo Controles de fluxo adicionais break, continue e for in .. Qual a diferen¸ca

IFAL

Controle de fluxo

Controles de fluxo adicionais

break, continue e for in

..

Qual a diferen¸ca entre break e continue

continue interrompe a itera¸c˜ao atual e inicia na pr´oxima itera¸c˜ao.

break interrompe todo o loop.

33 / 83 Programa¸c˜ao Web

Ivo Calado

Controle de fluxo Controles de fluxo adicionais break, continue e for in .. Qual a diferen¸ca

IFAL

Controle de fluxo

for in ..

A estrutura for

in

tem a mesma semˆantica do for extendido

do Java

Visa realizar itera¸c˜ao sobre arrays e listas

v a r x ; v a r mycars = new Array () ; mycars [
v
a r
x ;
v
a r
mycars = new
Array () ;
mycars [ 0 ]
=
"Saab" ;
mycars [ 1 ]
=
"Volvo" ;
mycars [ 2 ]
=
"BMW" ;
f o r
( x
i n
mycars
)
{
document
.
w ri t e
( mycars [ x ]
+
"<br
/>" )
;
}
34 / 83
Programa¸c˜ao Web
Ivo Calado
IFAL

Caixa de di´alogo e Ciclo de vida das vari´aveis

35 / 83 Programa¸c˜ao Web

Ivo Calado

Caixa de di´alogo e Ciclo de vida das vari´aveis 35 / 83 Programa¸c˜ao Web Ivo Calado

IFAL

Caixas Popup

Caixas Popup

JavaScript oferece trˆes tipos de caixas de di´alogo

AlertBox: tem como objetivo informar ao usu´ario alguma

mensagem

ConfirmBox: recebe uma entrada do usu´ario a partir da

confirma¸c˜ao

PromptBox: recebe uma entrada do usu´ario a partir de uma

entrada de texto

36 / 83 Programa¸c˜ao Web

Ivo Calado

Caixas Popup Caixas Popup JavaScript oferece trˆes tipos de caixas de di´alogo AlertBox: tem como objetivo

IFAL

Caixas Popup

Alert Box

<head>

<s c ri p t f u n c ti o n

type="text/javascript">

s h o w

a l e rt ()

{

a l e r t

}

( "Hello!

</ s c ri p t> </head> <body>

I

am

an

alert

box!" ) ;

<input

type="button"

o n c l i c k="show_alert ()"

value="Show

alert

box"

/>

</body>

Caixas Popup Alert Box < head > < s c ri p t f u n

37 / 83 Programa¸c˜ao Web

Ivo Calado

IFAL

Caixas Popup

Confirm Box

<html> <head>

 

<s c ri p t

type="text/javascript">

 

f u n c ti o n

show confirm ()

{

 

r=c o n firm ( "Press

a

button!" ) ;

v a r i f

(

r==t r u e )

{

 

a l e r t

( "You

pressed

OK!" )

;

}

e ls e

{

a l e r t

( "You

pressed

Cancel!" ) ;

}

} </ s c ri p t> </head> <body>

<input

type="button"

o n c l i c k="show_confirm ()"

"Show

a

confirm

box"

</body> </html>

/>

value=
value=

Caixas Popup

Prompt Box

<html> <head> <s c ri p t

type="text/javascript">

 

f u n c ti o n

d is p

p r omp t ()

{

 

v a r

fname=prompt ( "Please

enter

your

name:" , "Your

name

" ) a l e r t

(fname ) ;

 

}

</

s c ri p t>

</head>

 

<body>

<input

type="button"

o n c l i c k="disp_prompt ()"

value="

 
 

Display

   
Display

a

prompt

box"

/>

</body> </html>

 

Fun¸c˜oes

Fun¸c˜oes

Fun¸c˜oes em JavaScript tem o mesmo prop´osito que em

linguagens como Java e C++

Possibilitam o re´uso de c´odigo

Fun¸c˜oes podem ser definidas no HEAD, BODY ou num

arquivo externo .js, por´em recomenda-se n˜ao adicionar na

se¸c˜ao BODY

f u n c ti o n

nome

da

funcao ( var1 , var2 ,

.

, varX )

{

 

some

code

 

}

Fun¸c˜oes Fun¸c˜oes Fun¸c˜oes em JavaScript tem o mesmo prop´osito que em linguagens como Java e C++

40 / 83 Programa¸c˜ao Web

Ivo Calado

IFAL

Fun¸c˜oes

Ciclo de vida de vari´aveis em JavaScript

Se vocˆe declara uma vari´avel dentro de uma fun¸c˜ao, ela ter´a

escopo apenas local e quando a fun¸c˜ao for finalizada a

vari´avel ser´a destru´ıda

Contudo, vari´aveis criadas fora de fun¸c˜oes podem ser

visualizadas de qualquer parte da p´agina, chamadas vari´aveis

globais e existem desde o momento que a p´agina ´e carregada

at´e quando ela for fechada

41 / 83 Programa¸c˜ao Web

Ivo Calado

Fun¸c˜oes Ciclo de vida de vari´aveis em JavaScript Se vocˆe declara uma vari´avel dentro de uma

IFAL

Eventos

 

Eventos

 
Eventos Eventos 42 / 83 Programa¸c˜ao Web Ivo Calado IFAL

42 / 83 Programa¸c˜ao Web

Ivo Calado

IFAL

Eventos

Eventos

Eventos s˜ao a¸c˜oes que podem ser detectadas em JavaScript

A partir da implementa¸c˜ao de eventos, podemos criar p´aginas

dinˆamicas

Cada elemento em HTML tˆem um pr´oprio conjunto de

eventos que podem ser capturados

A especifica¸c˜ao dos eventos que ser˜ao “escutados” ´e definido

nas tags HTML

43 / 83 Programa¸c˜ao Web

Ivo Calado

Eventos Eventos Eventos s˜ao a¸c˜oes que podem ser detectadas em JavaScript A partir da implementa¸c˜ao de

IFAL

Eventos

Exemplos de Eventos

Clique do mouse

Carregamento de uma p´agina Web ou imagem

Mover o mouse sobre uma certa ´area da p´agina Web

Selecionar um campo de entrada de dados em um formul´ario

Submeter um formul´ario

44 / 83 Programa¸c˜ao Web

Ivo Calado

Eventos Exemplos de Eventos Clique do mouse Carregamento de uma p´agina Web ou imagem Mover o

IFAL

Eventos

Exemplos de Eventos

Clique do mouse

Carregamento de uma p´agina Web ou imagem

Mover o mouse sobre uma certa ´area da p´agina Web

Selecionar um campo de entrada de dados em um formul´ario

Submeter um formul´ario

Eventos s˜ao normalmente usados em combina¸c˜oes com fun¸c˜oes e,

portanto, a fun¸c˜ao n˜ao ser´a executado at´e que o evento seja

lan¸cado

44 / 83 Programa¸c˜ao Web

Ivo Calado

Eventos Exemplos de Eventos Clique do mouse Carregamento de uma p´agina Web ou imagem Mover o

IFAL

Eventos

Eventos OnLoad e OnUnload

Esta classe de eventos s˜ao lan¸cados no carregamento e no

fechamento de uma p´agina HTML

OnLoad geralmente ´e utilizado para checar o tipo de browser

utilizado ou a vers˜ao do navegador

Um outro uso seria setar Cookies quando o usu´ario entra ou

sai da p´agina Web

45 / 83 Programa¸c˜ao Web

Ivo Calado

Eventos Eventos OnLoad e OnUnload Esta classe de eventos s˜ao lan¸cados no carregamento e no fechamento

IFAL

Eventos

Eventos OnFocus, OnBlur e OnChange

OnFocus e OnBlur s˜ao eventos complementares. O primeiro ´e

lan¸cado quando um elemento ganha foco e o segundo quando

perde foco

Onchange, por sua vez, ´e lan¸cado apenas se o conte´udo do

elemento tiver sido alterado

46 / 83 Programa¸c˜ao Web

Ivo Calado

Eventos Eventos OnFocus, OnBlur e OnChange OnFocus e OnBlur s˜ao eventos complementares. O primeiro ´e lan¸cado

IFAL

Eventos

Evento OnSubmit

Evento lan¸cado antes de um fomul´ario ser enviado

Geralmente usado para fazer a valida¸c˜ao dos campos do

formul´ario

<form method="post"

ac t ion="destino.htm"

return

checkForm ()">

onsubmit="

47 / 83 Programa¸c˜ao Web

Ivo Calado

Eventos Evento OnSubmit Evento lan¸cado antes de um fomul´ario ser enviado Geralmente usado para fazer a

IFAL

Eventos

Eventos OnMouseOver e OnMouseOut

Controlam quando o mouse entra e sai de um componente

respectivamente

<a

hr e f="http :// www.google.com.br/" onMouseOver="mouse

();

return

true">g o o g l e</a>

<a

hr e f="http ://g1.globo.com/" onMouseOut="mouse2 ();

return

true">G1</a>

48 / 83 Programa¸c˜ao Web

Ivo Calado

Eventos Eventos OnMouseOver e OnMouseOut Controlam quando o mouse entra e sai de um componente respectivamente

IFAL

Eventos

Evento OnClick

Evento lan¸cado quando o usu´ario clica em um componente

vis´ıvel da tela

Um exemplo de utiliza¸c˜ao ´e em bot˜oes de submiss˜ao. Caso a

fun¸c˜ao JavaScript retorne falso o formul´ario n˜ao ´e submetido

<input

type="submit"

value="Submeter"

o n c l i c k="return

id="input3"/>

checkForm ();"

49 / 83 Programa¸c˜ao Web

Ivo Calado

Eventos Evento OnClick Evento lan¸cado quando o usu´ario clica em um componente vis´ıvel da tela Um

IFAL

Tratamento de exce¸c˜oes

Tratamento de Exce¸c˜oes

50 / 83 Programa¸c˜ao Web

Ivo Calado

Tratamento de exce¸c˜oes Tratamento de Exce¸c˜oes 50 / 83 Programa¸c˜ao Web Ivo Calado IFAL

IFAL

Tratamento de exce¸c˜oes

Tratamento de exce¸c˜oes

Assim como outras linguagens de programa¸c˜ao, JavaScript

oferece suporte ao tratamento de erros atrav´es do uso de

exce¸c˜oes

A sintaxe em JavaScript ´e bastante semelhante ao que

acontece em C++ e Java

tr y { // Bloco que pode l a n c a r e x c
tr y
{
//
Bloco
que
pode
l a n c a r
e x c e ¸c˜ao
}
c a t ch ( ex )
{
// Tratamento
de
st
r
=
ex . message
e x c e c¸˜ao
// r e c u p e r a
o
e rr o
ge rado
}
51 / 83
Programa¸c˜ao Web
Ivo Calado
IFAL

Tratamento de exce¸c˜oes

A cl´ausula throw

Al´em de capturar exce¸c˜oes, podemos lan¸c´a-las

Para tal, fazemos uso da cl´ausula throw

Ela possui a mesma semˆantica do comando an´alogo, em Java,

throw!

i f ( x>10) {

"Err1" ; } throw e ls e i f ( x<0) { throw "Err2" ; }
"Err1" ;
}
throw
e ls e
i f ( x<0)
{
throw
"Err2" ;
}
52 / 83
Programa¸c˜ao Web
Ivo Calado
IFAL

Tratamento de exce¸c˜oes

Exerc´ıcio! :)

Pesquisar sobre o objeto navigator

Qual a fun¸c˜ao deste objeto?

53 / 83 Programa¸c˜ao Web

Ivo Calado

Tratamento de exce¸c˜oes Exerc´ıcio! :) Pesquisar sobre o objeto navigator Qual a fun¸c˜ao deste objeto? 53

IFAL

Tratamento de exce¸c˜oes

Exerc´ıcio! :)

Pesquisar sobre o objeto navigator

Qual a fun¸c˜ao deste objeto?

O objeto navigator cont´em todas as informa¸c˜oes sobre o browser

visitante, como:

Nome da aplica¸c˜ao

Vers˜ao do navegador

Plataforma

etc

53 / 83 Programa¸c˜ao Web

Ivo Calado

Tratamento de exce¸c˜oes Exerc´ıcio! :) Pesquisar sobre o objeto navigator Qual a fun¸c˜ao deste objeto? O

IFAL

Tratamento de exce¸c˜oes

Exerc´ıcio 2! :)

Pesquisar sobre eventos relacionados a tempo

setTimeout e clearTimeout

54 / 83 Programa¸c˜ao Web

Ivo Calado

Tratamento de exce¸c˜oes Exerc´ıcio 2! :) Pesquisar sobre eventos relacionados a tempo setTimeout e clearTimeout 54

IFAL

HTML DOM

 

HTML DOM

 
HTML DOM HTML DOM 55 / 83 Programa¸c˜ao Web Ivo Calado IFAL

55 / 83 Programa¸c˜ao Web

Ivo Calado

IFAL

HTML DOM

O que ´e?

O que ´e?

 
HTML DOM O que ´e? O que ´e? 56 / 83 Programa¸c˜ao Web Ivo Calado IFAL

56 / 83 Programa¸c˜ao Web

Ivo Calado

IFAL

HTML DOM

O que ´e?

O que ´e?

De acordo com o W3C o DOM (Documento Object Model) ´e

definido como:

”The W3C Document Object Model (DOM) is a platform and

language-neutral interface that allows programs and scripts to

dynamically access and update the content, structure, and style of

a document.”

56 / 83 Programa¸c˜ao Web

Ivo Calado

HTML DOM O que ´e? O que ´e? De acordo com o W3C o DOM (Documento

IFAL

HTML DOM

O que ´e?

O que ´e?

De acordo com o W3C o DOM (Documento Object Model) ´e

definido como:

”The W3C Document Object Model (DOM) is a platform and

language-neutral interface that allows programs and scripts to

dynamically access and update the content, structure, and style of

a document.”

Em resumo HTML DOM == HTML + DOM

56 / 83 Programa¸c˜ao Web

Ivo Calado

HTML DOM O que ´e? O que ´e? De acordo com o W3C o DOM (Documento

IFAL

HTML DOM

Em outras palavras ...

Trata-se de um padr˜ao de modelagem dos elementos HTML

como objetos

Uma abordagem padr˜ao para acesso e altera¸c˜ao do HTMl

programa¸c˜o

Um padr˜ao W3C

Em outras palavras: O HTML DOM ´e um padr˜ao para

recupera¸c˜ao, altera¸c˜ao, adi¸c˜ao ou remo¸c˜ao de elementos

HTML e suas propriedades

57 / 83 Programa¸c˜ao Web

Ivo Calado

HTML DOM Em outras palavras ... Trata-se de um padr˜ao de modelagem dos elementos HTML como

IFAL

HTML DOM

N´os DOM

O DOM segue a mesma filosofia de modelagem do JDOM, ou seja:

O documento inteiro ´e um n´o

Cada elemento HTML ´e um n´o

O texto dos elementos HTML s˜ao n´os

Cada atributo do HTML ´e um atributo de um n´o

Coment´arios s˜ao n´os de coment´ario

58 / 83 Programa¸c˜ao Web

Ivo Calado

HTML DOM N´os DOM O DOM segue a mesma filosofia de modelagem do JDOM, ou seja:

IFAL

HTML DOM

Exemplo

<html> <head> <t i t l e>DOM

T u t o ri a l</ t i t l e>

</head> <body> <h1>DOM Le sson one</h1> <p>H e l l o world !</p> </body> </html>

59 / 83 Programa¸c˜ao Web

Ivo Calado

HTML DOM Exemplo < html > < head > < t i t l e >

IFAL

HTML DOM

Navegando entre a hierarquia de n´os

HTML DOM Navegando entre a hierarquia de n´os 60 / 83 Programa¸c˜ao Web Ivo Calado IFAL

60 / 83 Programa¸c˜ao Web

Ivo Calado

HTML DOM Navegando entre a hierarquia de n´os 60 / 83 Programa¸c˜ao Web Ivo Calado IFAL

IFAL

HTML DOM

Propriedades b´asicas de um elemento HTML DOM

x.innerHTML - conte´udo textual de x

x.nodeName - o nome de x

x.nodeValue - o valor do x

x.parentNode - referˆencia ao elemento pai de x

x.childNodes - N´os filhos de x

x.attributes - n´os atributos de x

61 / 83 Programa¸c˜ao Web

Ivo Calado

HTML DOM Propriedades b´asicas de um elemento HTML DOM x.innerHTML - conte´udo textual de x x.nodeName

IFAL

HTML DOM

A propriedade innerHTML

´

E utilizado para recuperar ou substituir o conte´udo de um

elemento HTML, inclusive <html> e <body>

Pode ser utilizada tamb´em para visualizar o c´odigo fonte de

uma p´agina alterada dinamicamente

<p

id="intro">H e l l o

World !</p>

<s c ri p t

type="text/javascript">

t x t=document . ge tEl ementById ( "intro" ) . innerHTML ;

document . w ri t e ( "<p>The

text

from

the

intro

paragraph:

"

+ s c ri p t>

t x t

+

" </p>" )

;

HTML DOM A propriedade innerHTML ´ E utilizado para recuperar ou substituir o conte´udo de um

</

62 / 83 Programa¸c˜ao Web

Ivo Calado

IFAL

HTML DOM

Propriedades childNodes e nodeValue

Uma segunda forma de obten¸c˜ao ´e a partir da combina¸c˜ao das

propriedades childNodes e nodeValue

<p

id="intro">H e l l o

World !</p>

 

<s c ri p t

type="text/javascript">

 

t x t=document . ge tEl ementById ( "intro" ) . c h i l dNo d e s [ 0 ] .

nodeValue ; document . w ri t e ( "<p>The

 

text

from

the

intro

paragraph:

</

"

+ s c ri p t>

t x t

+

" </p>" )

;

HTML DOM Propriedades childNodes e nodeValue Uma segunda forma de obten¸c˜ao ´e a partir da combina¸c˜ao

63 / 83 Programa¸c˜ao Web

Ivo Calado

IFAL

HTML DOM

Acessando N´os

Existem basicamente trˆes forma de acessar os n´os da ´arvore

HTML:

getElementById

getElementByTagName

Navegando na estrutura dos n´os

64 / 83 Programa¸c˜ao Web

Ivo Calado

HTML DOM Acessando N´os Existem basicamente trˆes forma de acessar os n´os da ´arvore HTML: getElementById

IFAL

HTML DOM

getElementById

Trata-se do m´etodo mais utilizado para recupera¸c˜ao de valores

Recebe como o id do objeto a ser acessado

Ver exemplo ...

65 / 83 Programa¸c˜ao Web

Ivo Calado

HTML DOM getElementById Trata-se do m´etodo mais utilizado para recupera¸c˜ao de valores Recebe como o id

IFAL

HTML DOM

getElementsByTagName

Retorna todos os elementos da tag passada por parˆametro

document . getElementsByTagName ( "p" ) ;

os

e l ement o s

p

do HTML

//

Re torna

todos

66 / 83 Programa¸c˜ao Web

Ivo Calado

HTML DOM getElementsByTagName Retorna todos os elementos da tag passada por parˆametro document . getElementsByTagName (

IFAL

HTML DOM

getElementsByTagName

Retorna todos os elementos da tag passada por parˆametro

document . getElementsByTagName ( "p" ) ; // Re torna todos os e l ement o
document . getElementsByTagName ( "p" ) ;
//
Re torna
todos
os
e l ement o s
p
do HTML
Qual o significado do c´odigo abaixo?
document . ge tEl ementById ( ’ main ’)
. getElementsByTagName ( "p
" )
;
66 / 83
Programa¸c˜ao Web
Ivo Calado
IFAL

HTML DOM

getElementsByTagName

Retorna todos os elementos da tag passada por parˆametro

document . getElementsByTagName ( "p" ) ; // Re torna todos os e l ement o
document . getElementsByTagName ( "p" ) ;
//
Re torna
todos
os
e l ement o s
p
do HTML
Qual o significado do c´odigo abaixo?
document . ge tEl ementById ( ’ main ’) . getElementsByTagName ( "p
" )
;
Os itens podem s˜ao indexados como em um vetor!!
66 / 83
Programa¸c˜ao Web
Ivo Calado
IFAL

HTML DOM

Exerc´ıcio

Criar um formul´ario que antes de ser submetido ser´a checado por

valores vazio. E caso isso ocorra, cancele a transmiss˜ao e imprima

um texto na cor vermelha indicando que houve erro.

67 / 83 Programa¸c˜ao Web

Ivo Calado

HTML DOM Exerc´ıcio Criar um formul´ario que antes de ser submetido ser´a checado por valores vazio.

IFAL

HTML DOM

Alterando as propriedades de um elemento

At´e agora vimos como alterar o conte´udo de um elemento

HTML via propriedade innerHTML

Por´em, ´e poss´ıvel alterar o conte´udo diretamente sem

“reescrever” um novo HTML

<html> <body> <s c ri p t type="text/javascript"> document . body . bgColor="lavender" ; </ s
<html>
<body>
<s c ri p t
type="text/javascript">
document . body . bgColor="lavender" ;
</
s c ri p t>
</body>
</html>
68 / 83
Programa¸c˜ao Web
Ivo Calado
IFAL

HTML DOM

Exemplo 2

<html>

<body>

<p

id="p1">H e l l o

World !</p>

<s c ri p t

type="text/javascript">

document . ge tEl ementById ( "p1" ) . innerHTML="New </ s c ri p t> </body> </html>

text!" ;

69 / 83 Programa¸c˜ao Web

Ivo Calado

HTML DOM Exemplo 2 < html > < body > < p id = "p1" >

IFAL

HTML DOM

Mudando um elemento a partir de eventos

´

E poss´ıvel alterar uma propriedade diretamente a partir do

lan¸camento de um evento

<html>

<body>

<input

type="button"

o n c l i c k="document.body.bgColor=’

lavender ’;"

 

value="Change

background

color"

/>

</body>

</html>

HTML DOM Mudando um elemento a partir de eventos ´ E poss´ıvel alterar uma propriedade diretamente

70 / 83 Programa¸c˜ao Web

Ivo Calado

IFAL

HTML DOM

JavaScript + CSS

Em JavaScript as regras CSS podem ser customizadas

durante a execu¸c˜ao

Para isso, faz-se uso da propriedade style de cada elemento

<s c ri p t f u n c ti o n type="text/javascript"> ChangeSt y l
<s c ri p t
f u n c ti o n
type="text/javascript">
ChangeSt y l e ()
{
document
.
.
st y l e
.
document
.
ge tEl ementById
ge tEl ementById
( "p1" )
( "p1" )
.
st
y l e
.
c o l o r="blue" ;
f o n tFa m i l y="Arial
"
;
}
</
s c ri p t>
71 / 83
Programa¸c˜ao Web
Ivo Calado
IFAL

HTML DOM

Exerc´ıcio

Altere o exerc´ıcio anterior para que as propriedades sejam

customizadas via CSS

72 / 83 Programa¸c˜ao Web

Ivo Calado

HTML DOM Exerc´ıcio Altere o exerc´ıcio anterior para que as propriedades sejam customizadas via CSS 72

IFAL

AJAX

O que ´e AJAX

Asynchronous JavaScript and XML

´

E uma t´ecnica para criar p´aginas web de maneira r´apida e

dinˆamicas

Possibilita que as p´aginas Web sejam atualizadas

assincronamente pela troca de pequenos peda¸cos de

informa¸c˜ao entre o servidor

Torna poss´ıvel a atualiza¸c˜ao de peda¸cos da p´agina Web, sem

a necessidade de atualiza¸c˜ao da p´agina inteira

P´aginas Web antigas por outro lado devem recarregar a

p´agina inteira se alguma parte precisar ser atualizada

Exemplos de aplica¸c˜oes com AJAX: Google Maps, Gmail,

Youtube, Facebook etc

AJAX O que ´e AJAX Asynchronous JavaScript and XML ´ E uma t´ecnica para criar p´aginas

73 / 83 Programa¸c˜ao Web

Ivo Calado

IFAL

AJAX

74 / 83 Programa¸c˜ao Web Ivo Calado IFAL
74 / 83
Programa¸c˜ao Web
Ivo Calado
IFAL

AJAX

AJAX ´e baseado em padr˜oes da Web, e utiliza uma combina¸c˜ao

de:

Objeto XMLHttpRequest (utilizado para a troca ass´ıncrona de

dados com o servidor)

JavaScript/DOM (utilizado para exibir/interagir com a

informa¸c˜ao)

CSS (utilizado para formatar a informa¸c˜ao)

XML (geralmente utilizado como formato de troca de

informa¸c˜oes entre cliente e servidor

75 / 83 Programa¸c˜ao Web

Ivo Calado

AJAX AJAX ´e baseado em padr˜oes da Web, e utiliza uma combina¸c˜ao de: Objeto XMLHttpRequest (utilizado

IFAL

AJAX

O objeto XMLHttpRequest

Todos os navegarores modernos suportam o objeto

XMLHttpRequest (IE5 e IE6 usam um objeto semelhante

ActiveXObject)

O objeto XMLHttpRequest ´e utilizado para a troca de dados

entre o servidor e o cliente

Como criar um objeto XMLHttpRequest?

variable = newXMLHttpRequest();

Como criar um objeto ActiveXObject?

variable = newActiveXObject(“Microsoft.XMLHTTP );

76 / 83 Programa¸c˜ao Web

Ivo Calado

AJAX O objeto XMLHttpRequest Todos os navegarores modernos suportam o objeto XMLHttpRequest (IE5 e IE6 usam

IFAL

AJAX

Como manter compatibilidade entre navegadores novos e antigos?

 

xmlhttp

;

v a r i f

( window . XMLHttpRequest)

{

 

// code f o r IE7+, F ir e f o x , Chrome , Opera , S a f a r i

xmlhttp=new

XMLHttpRequest () ;

}

e ls e

{//

code

f o r

IE6 ,

IE5

xmlhttp=new Ac ti v eXObj e c t ( "Microsoft.XMLHTTP" ) ;

}

77 / 83 Programa¸c˜ao Web

Ivo Calado

AJAX Como manter compatibilidade entre navegadores novos e antigos? xmlhttp ; v a r i f

IFAL

AJAX

Como enviar uma requisi¸c˜ao para o servidor

Para enviar dados para um servidor, utilizamos os m´etodos open()

e send() do objeto XMLHttpRequest

GET xmlhttp . open ( "GET" , "demo_get.asp" , f a l s e ) ;
GET
xmlhttp
.
open ( "GET" , "demo_get.asp" ,
f a l s e
)
;
xmlhttp . send ()

GET com atributos

xmlhttp . open ( "GET" , "demo_get2.asp?fname=Henry&lname =Ford" , f a ls e ) ; xmlhttp
xmlhttp . open ( "GET" , "demo_get2.asp?fname=Henry&lname
=Ford" , f a ls e ) ;
xmlhttp . send () ;
78 / 83
Programa¸c˜ao Web
Ivo Calado
IFAL

AJAX

Como enviar uma requisi¸c˜ao para o servidor

POST com atributos

xmlhttp . open ( "POST" , "ajax_test.asp" , tr u e ) ; xmlhttp . s
xmlhttp . open ( "POST" , "ajax_test.asp" , tr u e ) ;
xmlhttp . s e tReque stHe ade r ( "Content -type" , "
application/x-www -form -urlencoded" ) ;
xmlhttp . send ( "fname=Henry&lname=Ford" ) ;

79 / 83 Programa¸c˜ao Web

Ivo Calado

AJAX Como enviar uma requisi¸c˜ao para o servidor POST com atributos xmlhttp . open ( "POST"

IFAL

AJAX

Para que serve o terceiro parˆametro (bool)?

´

E utilizado para indicar se a requisi¸c˜ao ser´a ass´ıncrona (true)

ou s´ıncrona (false)

Requisi¸c˜oes s´ıncronas fazem com que o script fique congelado

at´e obter uma resposta do servidor. Normalmente n˜ao ´e

utilizado por causar travamento momentˆaneo do cliente

Requisi¸c˜oes ass´ıncronas s˜ao recomendadas pois:

80 / 83 Programa¸c˜ao Web

Possibilitam que outros scripts sejam executados enquanto aguarda a resposta do servidor Possibilita a indica¸c˜ao de uma fun¸c˜ao que ser´a invocada quando a informa¸c˜ao estiver dispon´ıvel

AJAX Para que serve o terceiro parˆametro (bool)? ´ E utilizado para indicar se a requisi¸c˜ao

Ivo Calado

IFAL

AJAX

Async = false

 
 

xmlhttp . open ( "GET" , "http :// localhost :8080/ ExemploHora/gethora" , f a l s e ) ; xmlhttp . send () ; document . ge tEl ementById ( "test" ) . innerHTML=xmlhttp . r e s p o n s eTe x t ;

 
 
AJAX Async = false xmlhttp . open ( "GET" , "http :// localhost :8080/ ExemploHora/gethora" ,

81 / 83 Programa¸c˜ao Web

Ivo Calado

IFAL

AJAX

Async = true

xmlhttp

.

o n r e a d y st a t e c h a n g e

=

f u n c ti o n ()

{

i f

(

xmlhttp .

r e a d y S t a t e

==

4

&&

xmlhttp . st a t u s

==

 

200)

{

document . ge tEl ementById ( "test" ) . innerHTML = xmlhttp . r e s p o n s eTe x t ;

}

}

xmlhttp . open ( "GET" , "http :// localhost :8080/ ExemploHora/

gethora" , xmlhttp . send () ;

tr u e ) ;

AJAX Async = true xmlhttp . o n r e a d y st a t

Pesquisar como funciona a chamada xmlhttp.responseXML

82 / 83 Programa¸c˜ao Web

Ivo Calado

IFAL

AJAX

O evento onreadystatechange

O evento onreadystatechange ´e disparado toda vez que o

status da requisi¸c˜ao muda

O status da requisi¸c˜ao ´e armazenado no atributo readyState

do objeto XMLHttpRequest e pode possuir os seguintes

valores:

0: requisi¸c˜ao n˜ao inicializada 1: conex˜ao com o servidor estabelecida 2: requisi¸c˜ao recebida 3: requisi¸c˜ao em processamento 4: requisi¸c˜ao finalizada e resposta pronta

A vari´avel status armazena o resultado final da resposta

recebida:

200: Resposta recebida com sucesso 404: P´agina n˜ao encontrada

83 / 83 Programa¸c˜ao Web

Ivo Calado

AJAX O evento onreadystatechange O evento onreadystatechange ´e disparado toda vez que o status da requisi¸c˜ao

IFAL