Javascript

Introduc
ao
B
asico do JavaScript
JavaScript avancado
JavaScript avancado II
Programacao Web
Javascript
Ivo Calado
Instituto Federal de Educac
ao, Ci
encia e Tecnologia de Alagoas
10 de Novembro de 2015
1 / 83
Programac
ao Web
Ivo Calado
IFAL
Introduc
ao
B
asico do JavaScript
JavaScript avancado
Roteiro
Introducao
Basico do JavaScript
JavaScript avancado
2 / 83
Programac
ao Web
Ivo Calado
IFAL
Introduc
ao
B
asico do JavaScript
JavaScript avancado
O que
e Javascript
O que vimos ate aqui?

Linguagens que possuem como foco a visualizacao da
informacao
Nao possibilitam a execucao de fluxos de c
odigo
3 / 83
Programac
ao Web
Ivo Calado
IFAL
Introduc
ao
B
asico do JavaScript
JavaScript avancado
O que
e Javascript

informacao
odigo
Nao sao destinadas a programadores!!
3 / 83
Programac
ao Web
Ivo Calado
IFAL
Introduc
ao
B
asico do JavaScript
JavaScript avancado
O que
e Javascript

informacao
odigo
JavaScript foi projetado para adicionar interatividade à
paginas HTML
Trata-se de uma linguagem de script
Trata-se de uma linguagem interpretada
3 / 83
Programac
ao Web
Ivo Calado
IFAL
Introduc
ao
B
asico do JavaScript
JavaScript avancado
O que
e Javascript

informacao
odigo
paginas HTML
O que e uma linguagem interpretada?
3 / 83
Programac
ao Web
Ivo Calado
IFAL
Introduc
ao
B
asico do JavaScript
JavaScript avancado
O que
e Javascript

informacao
odigo
paginas HTML
O que e uma linguagem interpretada?
Significa que o script e executada sem uma previa compilacao
3 / 83
Programac
ao Web
Ivo Calado
IFAL
Introduc
ao
B
asico do JavaScript
JavaScript avancado
O que
e Javascript
Curiosidades
Qual a relacao entre Java e JavaScript?
4 / 83
Programac
ao Web
Ivo Calado
IFAL
Introduc
ao
B
asico do JavaScript
JavaScript avancado
O que
e Javascript
Curiosidades

Nenhuma. Trata-se de linguagens completamente diferentes. Uma
criada pela Sun e a outra pela Netscape!
4 / 83
Programac
ao Web
Ivo Calado
IFAL
Introduc
ao
B
asico do JavaScript
JavaScript avancado
O que
e Javascript
Curiosidades

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
Programac
ao Web
Ivo Calado
IFAL
Introduc
ao
B
asico do JavaScript
JavaScript avancado
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 r i p t type=" text / javascript ">
document . w r i t e ( " <h1 > Hello World ! </ h1 >" ) ;
</ s c r i p t>
</ body>
</ html>
document.write e a maneira padrao para escrita na sada!

5 / 83
Programac
ao Web
Ivo Calado
IFAL
Introduc
ao
B
asico do JavaScript
JavaScript avancado
Hello World!
Como tornar JavaScript compatvel com navegadores

antigos?
Deve-se fazer uso dos comentarios HTML para esconder o
codigo JavaScript do navegador para manter a
retrocompatibilidade!
<html>
<body>
<!
document . w r i t e ( " Hello World !" ) ;
//>
</ s c r i p t>
</ body>
</ html>
6 / 83
Programac
ao Web
Ivo Calado
IFAL
Introduc
ao
B
asico do JavaScript
JavaScript avancado
Onde colocar o c
odigo JavaScript?
No HEAD?
Scripts colocados na secao HEAD nao sao executados
imediatamente e devem ser localizados em funcoes!
7 / 83
<html>
<head>
f u n c t i o n message ( )
{
a l e r t ( " This alert box was called with the onload event "
);
}
</ s c r i p t>
</ head>
<body on l oa d=" message () ">
</ body>
</ html>
Programac
ao Web
Ivo Calado
IFAL
Introduc
ao
B
asico do JavaScript
JavaScript avancado
Onde colocar o c
odigo JavaScript?
No Body?
Se voce nao deseja que seu script esteja em uma funcao ou
que ele seja destinado a escrever conte
udo na tela entao
coloque-o na secao body!
<html>
<head></ head>
<body>
document . w r i t e ( " This message is written by
JavaScript " ) ;
</ s c r i p t>
</ body>
</ html>
8 / 83
Programac
ao Web
Ivo Calado
IFAL
Introduc
ao
B
asico do JavaScript
JavaScript avancado
Onde colocar o c
odigo JavaScript?
Usando em um arquivo externo?

Se voce deseja compartilhar seu c
odigo JavaScript entre
diversas paginas, pode-se fazer uso de uma pagina externa
<html>
<head>
< s c r i p t type=" text / javascript " s r c=" xxx . js "></
s c r i p t>
</ head>
<body on l oa d=" helloworld () ">
</ body>
</ html>
9 / 83
Programac
ao Web
Ivo Calado
IFAL
Introduc
ao
B
asico do JavaScript
JavaScript avancado
Comandos
Uso do ponto e vrgula

Em JavaScript, e facultativo o uso do ; (ponto e vrgula) para
delimitar o fim de um comando!
<html>
<body>
document . w r i t e ( " Fim de linha COM ponto e virgula " ) ;
document . w r i t e ( " Fim de linha SEM ponto e virgula " )
</ s c r i p t>
</ body>
</ html>
10 / 83
Programac
ao Web
Ivo Calado
IFAL
Introduc
ao
B
asico do JavaScript
JavaScript avancado
Comandos
Pulando linha em JavaScript

Como voce deve ter percebido no exemplo anterior, as duas
frases ficaram na mesma linha
Este comportamento acontece porque toda sada de enviada
pelo JavaScript e tratata como c
odigo HTML. Por isso,
deve-se fazer uso do <br/> ao final da frase
document . w r i t e ( " Fim de linha COM ponto e virgula < br
/>" ) ;
document . w r i t e ( " Fim de linha SEM ponto e virgula < br
/>" )
11 / 83
Programac
ao Web
Ivo Calado
IFAL
Introduc
ao
B
asico do JavaScript
JavaScript avancado
Comandos
Comentarios de linhas e multilinhas

JavaScript oferece dois tipos de comentarios // e /* */
A semantica e a mesma do que acontece em linguagens como
Java e C++
<html>
<body>
/
The c o d e b e l o w w i l l w r i t e
one h e a d i n g
/
document . w r i t e ( " <h1 > This is a heading </ h1 >" ) ;
</ s c r i p t>
</ body>
</ html>
12 / 83
Programac
ao Web
Ivo Calado
IFAL
Introduc
ao
B
asico do JavaScript
JavaScript avancado
Usando vari
aveis
Usando variaveis
Variaveis em JavaScript tem a mesma semantica que em

outras linguagens, isto e, armazenar informacoes na memoria
Assim como o restante do JavaScript, sao 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
Programac
ao Web
Ivo Calado
IFAL
Introduc
ao
B
asico do JavaScript
JavaScript avancado
Usando vari
aveis
Exemplo do uso de variaveis

<html>
<body>
var firstname ;
f i r s t n a m e=" Hege " ;
document . w r i t e ( f i r s t n a m e ) ;
document . w r i t e ( " <br />" ) ;
f i r s t n a m e=" Tove " ;
document . w r i t e ( f i r s t n a m e ) ;
</ s c r i p t>
</ body>
</ html>
14 / 83
Programac
ao Web
Ivo Calado
IFAL
Introduc
ao
B
asico do JavaScript
JavaScript avancado
Usando vari
aveis
Uso de variaveis nao declaradas

possvel atribuir valores à variaveis ainda nao declaradas.
E
<html>
<body>
f i r s t n a m e=" Hege " ;
</ s c r i p t>
</ body>
</ html>
Nestes caso, a variavel e criada no momento da atribuicao!
15 / 83
Programac
ao Web
Ivo Calado
IFAL
Introduc
ao
B
asico do JavaScript
JavaScript avancado
Usando vari
aveis
Arrays
Em JavaScript e possvel criar array para armazenamento de
diversos tipos de objetos
Os objetos nao precisam ser do mesmo tipo
Existem 4 tipos de instanciacao!
var
var
var
var
myCars=new A r r a y ( ) ;
myCars=new A r r a y ( 1 0 ) ;
myCars=new A r r a y ( " Saab " , " Volvo " , " BMW " ) ;
myCars =[" Saab " , " Volvo " , " BMW " ] ;
16 / 83
Programac
ao Web
Ivo Calado
IFAL
Introduc
ao
B
asico do JavaScript
JavaScript avancado
Usando vari
aveis
Indexando arrays
Assim como Java, arrays em JavaScript sao indexados a partir

da posicao 0
v a r myCars =[" Saab " , " Volvo " , " BMW " ] ;
document . w r i t e ( myCars [ 0 ] ) // I m p r i m e Saab
17 / 83
Programac
ao Web
Ivo Calado
IFAL
Introduc
ao
B
asico do JavaScript
JavaScript avancado
Usando vari
aveis
Unindo arrays
Em JavaScript e possvel unir dois arrays de maneira bastante

simples
v a r p a r e n t s = [ " Jani " , " Tove " ] ;
v a r c h i l d r e n = [ " Cecilie " , " Lone " ] ;
var family = parents . concat ( c h i l d r e n ) ;
document . w r i t e ( f a m i l y ) ;
</ s c r i p t>
18 / 83
Programac
ao Web
Ivo Calado
IFAL
Introduc
ao
B
asico do JavaScript
JavaScript avancado
Usando vari
aveis
Unindo todos elementos de um array em uma string

possvel unir todos os elementos de um array em uma u
E
nica
string atraves do metodo join
v a r f r u i t s = [ " Banana " , " Orange " , " Apple " , " Mango " ] ;
document . w r i 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 padr
a o " ,"
document . w r i 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
ametro
document . w r i 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
ametro
</ s c r i p t>
19 / 83
Programac
ao Web
Ivo Calado
IFAL
Introduc
ao
B
asico do JavaScript
JavaScript avancado
Usando vari
aveis
Exerccio
Pesquisar e criar exemplos para os seguintes metodos de um array:
push
pop
reverse
shift
slice
sort
unshift (se possvel, testar no Firefox e IE)
20 / 83
Programac
ao Web
Ivo Calado
IFAL
Introduc
ao
B
asico do JavaScript
JavaScript avancado
Usando vari
aveis
O objeto String
Em JavaScript o objeto String possui as seguintes
propriedades/metodos
length
toUpperCase()
big()
small()
bold()
italics()
fixed()
strike()
etc
21 / 83
Programac
ao Web
Ivo Calado
IFAL
Introduc
ao
B
asico do JavaScript
JavaScript avancado
Usando vari
aveis
Exerccio para casa!
Pesquisar a utilizacao dos objetos:

Date
Boolean
Math
RegExp
22 / 83
Programac
ao Web
Ivo Calado
IFAL
Introduc
ao
B
asico do JavaScript
JavaScript avancado
Usando vari
aveis
Operadores aritmeticos
JavaScript oferece 7 operadores aritmeticos (+, -, *, /, %,

++, )
23 / 83
Programac
ao Web
Ivo Calado
IFAL
Introduc
ao
B
asico do JavaScript
JavaScript avancado
Usando vari
aveis
Operadores aritmeticos
JavaScript oferece 7 operadores aritmeticos (+, -, *, /, %,

++, )
Alem disso, sao oferecidos os operadores de atribuicao
correspondentes (=, +=, -=. *=, /= e %=)
23 / 83
Programac
ao Web
Ivo Calado
IFAL
Introduc
ao
B
asico do JavaScript
JavaScript avancado
Usando vari
aveis
Concatenacao de strings
O operador + pode ser utilizado tambem no processo de
concatenacao de strings
Se pelo menos um dos operandos for uma string entao sera
realizado a concatenacao
v1 = 20
v2 = " 11 "
v3 = v1 + v2
Ira resultar na string 2011 e nao no n

umero 31!!!
24 / 83
Programac
ao Web
Ivo Calado
IFAL
Introduc
ao
B
asico do JavaScript
JavaScript avancado
Usando vari
aveis
Operadores de comparacao
JavaScript especifica 7 operadores de comparacao: ==,
===, !=, >, <, >=, <= e
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 r i p t>
25 / 83
Programac
ao Web
Ivo Calado
IFAL
Introduc
ao
B
asico do JavaScript
JavaScript avancado
Usando vari
aveis
Operadores de comparacao
JavaScript especifica 7 operadores de comparacao: ==,
===, !=, >, <, >=, <= e
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 r i p t>
3 operadores logicos: &&, ||, !

25 / 83
Programac
ao Web
Ivo Calado
IFAL
Introduc
ao
B
asico do JavaScript
JavaScript avancado
Usando vari
aveis
Operadores ternario
Assim como Java e C++, em JavaScript e possvel fazer uso do
operador ternario.
Qual o resultado da variavel valor ap
os a execucao do seguinte
script?
x = 5
v a l o r = ( x != 5 ) ? " string de teste " : 10
</ s c r i p t>
26 / 83
Programac
ao Web
Ivo Calado
IFAL
Introduc
ao
B
asico do JavaScript
JavaScript avancado
Controle de fluxo
Expressoes condicionais: if-else

A utilizacao da estrutura de selecao if-else e semelhante à
Java
i f ( condition )
{
statement 1;
statement 2;
} // Os d o i s comandos s
ao executados
i f ( condition )
statement 1;
statement 2;
statement 3;
// Apenas o p r i m e i r o comando e e x e c u t a d o
27 / 83
Programac
ao Web
Ivo Calado
IFAL
Introduc
ao
B
asico do JavaScript
JavaScript avancado
Controle de fluxo
Exemplo if-else
<html>
<body>
v a r d = new Date ( ) ;
var time = d . getHours () ;
i f ( time < 12)
{
document . w r i t e ( " <b > Bom dia </b >" ) ;
} else
document . w r i t e ( " <b > Boa tarde </b >" ) ;
</ s c r i p t>
</ body>
</ html>
28 / 83
Programac
ao Web
Ivo Calado
IFAL
Introduc
ao
B
asico do JavaScript
JavaScript avancado
Controle de fluxo
Exerccio
Criar uma pagina HTML que possua um script JavaScript que faz
uso da funcao Math.random() para gerar n
umeros aleatorios e
caso o valor for maior que 0.5 criar o link para a pagina do Google.
Caso contrario, redirecionar para a pagina globo.com .
29 / 83
Programac
ao Web
Ivo Calado
IFAL
Introduc
ao
B
asico do JavaScript
JavaScript avancado
Controle de fluxo
Exerccio II
Altere o exemplo if.html para que, dependendo da hora

obtida no sistema seja impressa a aula atual (1a , 2a , 3a ,
intervalo, 4a , 5a , 6a ).
Sabe-se que o metodo getMinutes() do objeto Date retorna
os minutos atuais e getHours() retorna a hora atual.
30 / 83
Programac
ao Web
Ivo Calado
IFAL
Introduc
ao
B
asico do JavaScript
JavaScript avancado
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 r t v a l u e ; v a r<=e n d v a l u e ; v a r=v a r+i n c r e m e n t )
{
// c o d i g o a s e r e x e c u t a d o
}
31 / 83
Programac
ao Web
Ivo Calado
IFAL
Introduc
ao
B
asico do JavaScript
JavaScript avancado
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 r t v a l u e ; v a r<=e n d v a l u e ; v a r=v a r+i n c r e m e n t )
{
// c o d i g o a s e r e x e c u t a d o
}
As estruturas while e do-while seguem a mesma estrutura da

linguagem JavaScript
31 / 83
Programac
ao Web
Ivo Calado
IFAL
Introduc
ao
B
asico do JavaScript
JavaScript avancado
Controle de fluxo
Exerccio
Implemente uma pagina Web que escreva os 6 tipos de

cabecalhos fazendo uso do comando for
32 / 83
Programac
ao Web
Ivo Calado
IFAL
Introduc
ao
B
asico do JavaScript
JavaScript avancado
Controle de fluxo
Controles de fluxo adicionais
break, continue e for..in

Qual a diferenca entre break e continue
33 / 83
Programac
ao Web
Ivo Calado
IFAL
Introduc
ao
B
asico do JavaScript
JavaScript avancado
Controle de fluxo
Controles de fluxo adicionais
break, continue e for..in

Qual a diferenca entre break e continue
continue interrompe a iteracao atual e inicia na proxima iteracao.
break interrompe todo o loop.
33 / 83
Programac
ao Web
Ivo Calado
IFAL
Introduc
ao
B
asico do JavaScript
JavaScript avancado
Controle de fluxo
for..in
A estrutura for..in tem a mesma semantica do for extendido
do Java
Visa realizar iteracao sobre arrays e listas
var x ;
v a r m y c a r s = new A r r a y ( ) ;
m y c a r s [ 0 ] = " Saab " ;
m y c a r s [ 1 ] = " Volvo " ;
m y c a r s [ 2 ] = " BMW " ;
f o r ( x i n mycars )
{
document . w r i t e ( m y c a r s [ x ] + " <br />" ) ;
}
34 / 83
Programac
ao Web
Ivo Calado
IFAL
Introduc
ao
B
asico do JavaScript
JavaScript avancado
Caixa de dialogo e Ciclo de

vida das variaveis
35 / 83
Programac
ao Web
Ivo Calado
IFAL
Introduc
ao
B
asico do JavaScript
JavaScript avancado
Caixas Popup
Caixas Popup
JavaScript oferece tres tipos de caixas de dialogo

AlertBox: tem como objetivo informar ao usuario alguma
mensagem
ConfirmBox: recebe uma entrada do usuario a partir da
confirmacao
PromptBox: recebe uma entrada do usuario a partir de uma
entrada de texto
36 / 83
Programac
ao Web
Ivo Calado
IFAL
Introduc
ao
B
asico do JavaScript
JavaScript avancado
Caixas Popup
Alert Box
<head>
function show alert ()
{
a l e r t ( " Hello ! I am an alert box !" ) ;
}
</ s c r i p t>
</ head>
<body>
<i n p u t type=" button " o n c l i c k=" show_alert () " v a l u e=" Show
alert box " />
</ body>
37 / 83
Programac
ao Web
Ivo Calado
IFAL
Introduc
ao
B
asico do JavaScript
JavaScript avancado
Caixas Popup
Confirm Box
<html> <head>
function show confirm () {
v a r r=c o n f i r m ( " Press a button !" ) ;
i f ( r==t r u e ) {
a l e r t ( " You pressed OK !" ) ;
} else {
a l e r t ( " You pressed Cancel !" ) ;
}
}
</ s c r i p t> </ head>
<body>
<i n p u t type=" button " o n c l i c k=" show_confirm () " v a l u e=
" Show a confirm box " />
</ body> </ html>
38 / 83
Programac
ao Web
Ivo Calado
IFAL
Introduc
ao
B
asico do JavaScript
JavaScript avancado
Caixas Popup
Prompt Box
<html>
<head>
function disp prompt () {
v a r fname=prompt ( " Please enter your name :" , " Your name
")
a l e r t ( fname ) ;
}
</ s c r i p t>
</ head>
<body>
<i n p u t type=" button " o n c l i c k=" disp_prompt () " v a l u e="
Display
a prompt box " />
</ body> </ html>
39 / 83
Programac
ao Web
Ivo Calado
IFAL
Introduc
ao
B
asico do JavaScript
JavaScript avancado
Func
oes
Funcoes
Funcoes em JavaScript tem o mesmo prop
osito que em
linguagens como Java e C++
Possibilitam o re
uso de c
odigo
Funcoes podem ser definidas no HEAD, BODY ou num
arquivo externo .js, porem recomenda-se nao adicionar na
secao BODY
f u n c t i o n n o m e d a f u n c a o ( v a r 1 , v a r 2 , . . . , varX )
{
some c o d e
}
40 / 83
Programac
ao Web
Ivo Calado
IFAL
Introduc
ao
B
asico do JavaScript
JavaScript avancado
Func
oes
Ciclo de vida de variaveis em JavaScript
Se voce declara uma variavel dentro de uma funcao, ela tera

escopo apenas local e quando a funcao for finalizada a
variavel sera destruda
Contudo, variaveis criadas fora de func
oes podem ser
visualizadas de qualquer parte da pagina, chamadas variaveis
globais e existem desde o momento que a pagina e carregada
ate quando ela for fechada
41 / 83
Programac
ao Web
Ivo Calado
IFAL
Introduc
ao
B
asico do JavaScript
JavaScript avancado
Eventos
Eventos
42 / 83
Programac
ao Web
Ivo Calado
IFAL
Introduc
ao
B
asico do JavaScript
JavaScript avancado
Eventos
Eventos
Eventos sao acoes que podem ser detectadas em JavaScript

A partir da implementacao de eventos, podemos criar paginas
dinamicas
Cada elemento em HTML tem um pr
oprio conjunto de
eventos que podem ser capturados
A especificacao dos eventos que serao escutados e definido
nas tags HTML
43 / 83
Programac
ao Web
Ivo Calado
IFAL
Introduc
ao
B
asico do JavaScript
JavaScript avancado
Eventos
Exemplos de Eventos
Clique do mouse
Carregamento de uma pagina Web ou imagem
Mover o mouse sobre uma certa area da pagina Web
Selecionar um campo de entrada de dados em um formulario
Submeter um formulario
44 / 83
Programac
ao Web
Ivo Calado
IFAL
Introduc
ao
B
asico do JavaScript
JavaScript avancado
Eventos
Exemplos de Eventos
Clique do mouse
Carregamento de uma pagina Web ou imagem
Mover o mouse sobre uma certa area da pagina Web
Selecionar um campo de entrada de dados em um formulario
Submeter um formulario
Eventos sao normalmente usados em combinac
oes com funcoes e,
portanto, a funcao nao sera executado ate que o evento seja
lancado
44 / 83
Programac
ao Web
Ivo Calado
IFAL
Introduc
ao
B
asico do JavaScript
JavaScript avancado
Eventos
Eventos OnLoad e OnUnload
Esta classe de eventos sao lancados no carregamento e no

fechamento de uma pagina HTML
OnLoad geralmente e utilizado para checar o tipo de browser
utilizado ou a versao do navegador
Um outro uso seria setar Cookies quando o usuario entra ou
sai da pagina Web
45 / 83
Programac
ao Web
Ivo Calado
IFAL
Introduc
ao
B
asico do JavaScript
JavaScript avancado
Eventos
Eventos OnFocus, OnBlur e OnChange
OnFocus e OnBlur sao eventos complementares. O primeiro e

lancado quando um elemento ganha foco e o segundo quando
perde foco
Onchange, por sua vez, e lancado apenas se o conte
udo do
elemento tiver sido alterado
46 / 83
Programac
ao Web
Ivo Calado
IFAL
Introduc
ao
B
asico do JavaScript
JavaScript avancado
Eventos
Evento OnSubmit
Evento lancado antes de um fomulario ser enviado

Geralmente usado para fazer a validacao dos campos do
formulario
<form method=" post " a c t i o n=" destino . htm " o n s u b m i t="
return checkForm () ">
47 / 83
Programac
ao Web
Ivo Calado
IFAL
Introduc
ao
B
asico do JavaScript
JavaScript avancado
Eventos
Eventos OnMouseOver e OnMouseOut
Controlam quando o mouse entra e sai de um componente

respectivamente
<a h r e f=" http :// www . google . com . br /" onMouseOver=" mouse
() ; return true ">g o o g l e</a>
<a h r e f=" http :// g1 . globo . com /" onMouseOut=" mouse2 () ;
return true ">G1</a>
48 / 83
Programac
ao Web
Ivo Calado
IFAL
Introduc
ao
B
asico do JavaScript
JavaScript avancado
Eventos
Evento OnClick
Evento lancado quando o usuario clica em um componente

visvel da tela
Um exemplo de utilizacao e em bot
oes de submissao. Caso a
funcao JavaScript retorne falso o formulario nao e submetido
<i n p u t type=" submit " o n c l i c k=" return checkForm () ;"
v a l u e=" Submeter " i d=" input3 "/>
49 / 83
Programac
ao Web
Ivo Calado
IFAL
Introduc
ao
B
asico do JavaScript
JavaScript avancado
Tratamento de exceco
es
Tratamento de Excecoes
50 / 83
Programac
ao Web
Ivo Calado
IFAL
Introduc
ao
B
asico do JavaScript
JavaScript avancado
es
Tratamento de excecoes
Assim como outras linguagens de programacao, JavaScript
oferece suporte ao tratamento de erros atraves do uso de
excecoes
A sintaxe em JavaScript e bastante semelhante ao que
acontece em C++ e Java
try {
// B l o c o que pode l a n c a r e x c e c
ao
} catch ( ex ) {
// Tratamento de e x c e c
ao
s t r = e x . message // r e c u p e r a o e r r o g e r a d o
}
51 / 83
Programac
ao Web
Ivo Calado
IFAL
Introduc
ao
B
asico do JavaScript
JavaScript avancado
es
A clausula throw
Alem de capturar excec
oes, podemos lanca-las
Para tal, fazemos uso da clausula throw
Ela possui a mesma semantica do comando analogo, em Java,
throw!
i f ( x >10)
{
t h r o w " Err1 " ;
} else
i f ( x<0 ) {
t h r o w " Err2 " ;
}
52 / 83
Programac
ao Web
Ivo Calado
IFAL
Introduc
ao
B
asico do JavaScript
JavaScript avancado
es
Exerccio! :)
Pesquisar sobre o objeto navigator
Qual a funcao deste objeto?
53 / 83
Programac
ao Web
Ivo Calado
IFAL
Introduc
ao
B
asico do JavaScript
JavaScript avancado
es
Exerccio! :)
Pesquisar sobre o objeto navigator
Qual a funcao deste objeto?
O objeto navigator contem todas as informac
oes sobre o browser
visitante, como:
Nome da aplicacao
Versao do navegador
Plataforma
etc
53 / 83
Programac
ao Web
Ivo Calado
IFAL
Introduc
ao
B
asico do JavaScript
JavaScript avancado
es
Exerccio 2! :)
Pesquisar sobre eventos relacionados a tempo

setTimeout e clearTimeout
54 / 83
Programac
ao Web
Ivo Calado
IFAL
Introduc
ao
B
asico do JavaScript
JavaScript avancado
HTML DOM
HTML DOM
55 / 83
Programac
ao Web
Ivo Calado
IFAL
Introduc
ao
B
asico do JavaScript
JavaScript avancado
HTML DOM
O que e?
O que e?
56 / 83
Programac
ao Web
Ivo Calado
IFAL
Introduc
ao
B
asico do JavaScript
JavaScript avancado
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
Programac
ao Web
Ivo Calado
IFAL
Introduc
ao
B
asico do JavaScript
JavaScript avancado
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
Programac
ao Web
Ivo Calado
IFAL
Introduc
ao
B
asico do JavaScript
JavaScript avancado
HTML DOM
Em outras palavras...
Trata-se de um padrao de modelagem dos elementos HTML

como objetos
Uma abordagem padrao para acesso e alteracao do HTMl
programaco
Um padrao W3C
Em outras palavras: O HTML DOM
e um padr
ao para
recuperac
ao, alterac
ao, adic
ao ou remoc
ao de elementos
HTML e suas propriedades
57 / 83
Programac
ao Web
Ivo Calado
IFAL
Introduc
ao
B
asico do JavaScript
JavaScript avancado
HTML DOM
Nos 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 sao n
os
Cada atributo do HTML e um atributo de um no
Comentarios sao n
os de comentario
58 / 83
Programac
ao Web
Ivo Calado
IFAL
Introduc
ao
B
asico do JavaScript
JavaScript avancado
HTML DOM
Exemplo
<html>
<head>
< t i t l e>DOM T u t o r i a l</ t i t l e>
</ head>
<body>
<h1>DOM L e s s o n one</h1>
<p>H e l l o w o r l d !</p>
</ body>
</ html>
59 / 83
Programac
ao Web
Ivo Calado
IFAL
Introduc
ao
B
asico do JavaScript
JavaScript avancado
HTML DOM
Navegando entre a hierarquia de nos
60 / 83
Programac
ao Web
Ivo Calado
IFAL
Introduc
ao
B
asico do JavaScript
JavaScript avancado
HTML DOM
Propriedades basicas 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 - referencia ao elemento pai de x
x.childNodes - Nos filhos de x
x.attributes - nos atributos de x
61 / 83
Programac
ao Web
Ivo Calado
IFAL
Introduc
ao
B
asico do JavaScript
JavaScript avancado
HTML DOM
A propriedade innerHTML
utilizado para recuperar ou substituir o conte
E
udo de um
elemento HTML, inclusive <html> e <body>
Pode ser utilizada tambem para visualizar o codigo fonte de
uma pagina alterada dinamicamente
<p i d=" intro ">H e l l o World !</p>
t x t=document . g e t E l e m e n t B y I d ( " intro " ) . innerHTML ;
document . w r i t e ( " <p > The text from the intro paragraph :
" + t x t + " </p >" ) ;
</ s c r i p t>
62 / 83
Programac
ao Web
Ivo Calado
IFAL
Introduc
ao
B
asico do JavaScript
JavaScript avancado
HTML DOM
Propriedades childNodes e nodeValue

Uma segunda forma de obtencao e a partir da combinacao das
propriedades childNodes e nodeValue
<p i d=" intro ">H e l l o World !</p>
t x t=document . g e t E l e m e n t B y I d ( " intro " ) . c h i l d N o d e s [ 0 ] .
nodeValue ;
document . w r i t e ( " <p > The text from the intro paragraph :
" + t x t + " </p >" ) ;
</ s c r i p t>
63 / 83
Programac
ao Web
Ivo Calado
IFAL
Introduc
ao
B
asico do JavaScript
JavaScript avancado
HTML DOM
Acessando Nos
Existem basicamente tres forma de acessar os n

os da arvore
HTML:
getElementById
getElementByTagName
Navegando na estrutura dos n
os
64 / 83
Programac
ao Web
Ivo Calado
IFAL
Introduc
ao
B
asico do JavaScript
JavaScript avancado
HTML DOM
getElementById
Trata-se do metodo mais utilizado para recuperacao de valores

Recebe como o id do objeto a ser acessado
Ver exemplo...
65 / 83
Programac
ao Web
Ivo Calado
IFAL
Introduc
ao
B
asico do JavaScript
JavaScript avancado
HTML DOM
getElementsByTagName
Retorna todos os elementos da tag passada por parametro
document . getElementsByTagName ( "p" ) ;
o s e l e m e n t o s p do HTML
66 / 83
Programac
ao Web
Ivo Calado
// R e t o r n a t o d o s
IFAL
Introduc
ao
B
asico do JavaScript
JavaScript avancado
HTML DOM
Qual o significado do c
odigo abaixo?
document . g e t E l e m e n t B y I d ( main ) . getElementsByTagName ( "p
") ;
66 / 83
Programac
ao Web
Ivo Calado
IFAL
Introduc
ao
B
asico do JavaScript
JavaScript avancado
HTML DOM
Qual o significado do c
odigo abaixo?
document . g e t E l e m e n t B y I d ( main ) . getElementsByTagName ( "p
") ;
Os itens podem sao indexados como em um vetor!!

66 / 83
Programac
ao Web
Ivo Calado
IFAL
Introduc
ao
B
asico do JavaScript
JavaScript avancado
HTML DOM
Exerccio
Criar um formulario que antes de ser submetido sera checado por

valores vazio. E caso isso ocorra, cancele a transmissao e imprima
um texto na cor vermelha indicando que houve erro.
67 / 83
Programac
ao Web
Ivo Calado
IFAL
Introduc
ao
B
asico do JavaScript
JavaScript avancado
HTML DOM
Alterando as propriedades de um elemento

Ate agora vimos como alterar o conte
udo de um elemento
HTML via propriedade innerHTML
Porem, e possvel alterar o conte
udo diretamente sem
reescrever um novo HTML
<html>
<body>
document . body . b g C o l o r=" lavender " ;
</ s c r i p t>
</ body>
</ html>
68 / 83
Programac
ao Web
Ivo Calado
IFAL
Introduc
ao
B
asico do JavaScript
JavaScript avancado
HTML DOM
Exemplo 2
<html>
<body>
<p i d=" p1 ">H e l l o World !</p>
document . g e t E l e m e n t B y I d ( " p1 " ) . innerHTML=" New text !" ;
</ s c r i p t>
</ body>
</ html>
69 / 83
Programac
ao Web
Ivo Calado
IFAL
Introduc
ao
B
asico do JavaScript
JavaScript avancado
HTML DOM
Mudando um elemento a partir de eventos

possvel alterar uma propriedade diretamente a partir do
E
lancamento de um evento
<html>
<body>
<i n p u t type=" button " o n c l i c k=" document . body . bgColor =
lavender ; "
v a l u e=" Change background color " />
</ body>
</ html>
70 / 83
Programac
ao Web
Ivo Calado
IFAL
Introduc
ao
B
asico do JavaScript
JavaScript avancado
HTML DOM
JavaScript + CSS
Em JavaScript as regras CSS podem ser customizadas
durante a execucao
Para isso, faz-se uso da propriedade style de cada elemento
f u n c t i o n ChangeStyle ()
{
document . g e t E l e m e n t B y I d ( " p1 " ) . s t y l e . c o l o r=" blue " ;
document . g e t E l e m e n t B y I d ( " p1 " ) . s t y l e . f o n t F a m i l y=" Arial
";
}
</ s c r i p t>
71 / 83
Programac
ao Web
Ivo Calado
IFAL
Introduc
ao
B
asico do JavaScript
JavaScript avancado
HTML DOM
Exerccio
Altere o exerccio anterior para que as propriedades sejam

customizadas via CSS
72 / 83
Programac
ao Web
Ivo Calado
IFAL
Introduc
ao
B
asico do JavaScript
JavaScript avancado
AJAX
O que e AJAX
Asynchronous JavaScript and XML
uma tecnica para criar paginas web de maneira rapida e
E
dinamicas
Possibilita que as paginas Web sejam atualizadas
assincronamente pela troca de pequenos pedacos de
informacao entre o servidor
Torna possvel a atualizacao de pedacos da pagina Web, sem
a necessidade de atualizacao da pagina inteira
Paginas Web antigas por outro lado devem recarregar a
pagina inteira se alguma parte precisar ser atualizada
Exemplos de aplicac
oes com AJAX: Google Maps, Gmail,
Youtube, Facebook etc
73 / 83
Programac
ao Web
Ivo Calado
IFAL
Introduc
ao
B
asico do JavaScript
JavaScript avancado
AJAX
74 / 83
Programac
ao Web
Ivo Calado
IFAL
Introduc
ao
B
asico do JavaScript
JavaScript avancado
AJAX
AJAX e baseado em padr

oes da Web, e utiliza uma combinacao
de:
Objeto XMLHttpRequest (utilizado para a troca assncrona de
dados com o servidor)
JavaScript/DOM (utilizado para exibir/interagir com a
informacao)
CSS (utilizado para formatar a informacao)
XML (geralmente utilizado como formato de troca de
informacoes entre cliente e servidor
75 / 83
Programac
ao Web
Ivo Calado
IFAL
Introduc
ao
B
asico do JavaScript
JavaScript avancado
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 00 );
76 / 83
Programac
ao Web
Ivo Calado
IFAL
Introduc
ao
B
asico do JavaScript
JavaScript avancado
AJAX
Como manter compatibilidade entre navegadores novos e

antigos?
var xmlhttp ;
i f ( window . XMLHttpRequest ) {
// c o d e f o r I E 7 +, F i r e f o x , Chrome , Opera , S a f a r i
x m l h t t p=new XMLHttpRequest ( ) ;
} e l s e {// c o d e f o r IE6 , I E 5
x m l h t t p=new A c t i v e X O b j e c t ( " Microsoft . XMLHTTP " ) ;
}
77 / 83
Programac
ao Web
Ivo Calado
IFAL
Introduc
ao
B
asico do JavaScript
JavaScript avancado
AJAX
Como enviar uma requisicao para o servidor

Para enviar dados para um servidor, utilizamos os metodos open()
e send() do objeto XMLHttpRequest
GET
x m l h t t p . open ( " GET " , " demo_get . asp " , f a l s e ) ;
xmlhttp . send ( )
GET com atributos

x m l h t t p . open ( " GET " , " demo_get2 . asp ? fname = Henry & lname
= Ford " , f a l s e ) ;
xmlhttp . send ( ) ;
78 / 83
Programac
ao Web
Ivo Calado
IFAL
Introduc
ao
B
asico do JavaScript
JavaScript avancado
AJAX
Como enviar uma requisicao para o servidor
POST com atributos

x m l h t t p . open ( " POST " , " ajax_test . asp " , t r u e ) ;
x m l h t t p . s e t R e q u e s t H e a d e r ( " Content - type " , "
application /x - www - form - urlencoded " ) ;
x m l h t t p . s e n d ( " fname = Henry & lname = Ford " ) ;
79 / 83
Programac
ao Web
Ivo Calado
IFAL
Introduc
ao
B
asico do JavaScript
JavaScript avancado
AJAX
Para que serve o terceiro parametro (bool)?

utilizado para indicar se a requisicao sera assncrona (true)
E
ou sncrona (false)
Requisicoes sncronas fazem com que o script fique congelado
ate obter uma resposta do servidor. Normalmente n
ao
e
utilizado por causar travamento moment
aneo do cliente
Requisicoes assncronas sao recomendadas pois:
Possibilitam que outros scripts sejam executados enquanto
aguarda a resposta do servidor
Possibilita a indicacao de uma funcao que sera invocada
quando a informacao estiver disponvel
80 / 83
Programac
ao Web
Ivo Calado
IFAL
Introduc
ao
B
asico do JavaScript
JavaScript avancado
AJAX
Async = false
x m l h t t p . open ( " GET " , " http :// localhost :8080/

ExemploHora / gethora " , f a l s e ) ;
document . g e t E l e m e n t B y I d ( " test " ) . innerHTML=x m l h t t p
. responseText ;
81 / 83
Programac
ao Web
Ivo Calado
IFAL
Introduc
ao
B
asico do JavaScript
JavaScript avancado
AJAX
Async = true
xmlhttp . onreadystatechange = f u n c t i o n () {
i f ( x m l h t t p . r e a d y S t a t e == 4 && x m l h t t p . s t a t u s ==
200) {
document . g e t E l e m e n t B y I d ( " test " ) . innerHTML =
xmlhttp . responseText ;
}
}
x m l h t t p . open ( " GET " , " http :// localhost :8080/ ExemploHora /
gethora " , t r u e ) ;
Pesquisar como funciona a chamada xmlhttp.responseXML

82 / 83
Programac
ao Web
Ivo Calado
IFAL
Introduc
ao
B
asico do JavaScript
JavaScript avancado
AJAX
O evento onreadystatechange
O evento onreadystatechange e disparado toda vez que o
status da requisicao muda
O status da requisicao e armazenado no atributo readyState
do objeto XMLHttpRequest e pode possuir os seguintes
valores:
0:
1:
2:
3:
4:
requisicao nao inicializada

conexao com o servidor estabelecida
requisicao recebida
requisicao em processamento
requisicao finalizada e resposta pronta
A variavel status armazena o resultado final da resposta

recebida:
200: Resposta recebida com sucesso
404: Pagina nao encontrada
83 / 83
Programac
ao Web
Ivo Calado
IFAL

Javascript

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Javascript

Uploaded by

Copyright:

Available Formats

Introduc

O que vimos ate aqui?

O que vimos ate aqui?

O que vimos ate aqui?

O que vimos ate aqui?

O que vimos ate aqui?

Qual a relacao entre Java e JavaScript?

Qual a relacao entre Java e JavaScript?

Qual a relacao entre Java e JavaScript?

document.write e a maneira padrao para escrita na sada!

Como tornar JavaScript compatvel com navegadores

Usando em um arquivo externo?

Uso do ponto e vrgula

Pulando linha em JavaScript

Comentarios de linhas e multilinhas

Variaveis em JavaScript tem a mesma semantica que em

A partir do segundo caracter poder ser dos seguintes tipos

Exemplo do uso de variaveis

Uso de variaveis nao declaradas

Nestes caso, a variavel e criada no momento da atribuicao!

Assim como Java, arrays em JavaScript sao indexados a partir

Em JavaScript e possvel unir dois arrays de maneira bastante

Unindo todos elementos de um array em uma string

Exerccio para casa!

Pesquisar a utilizacao dos objetos:

JavaScript oferece 7 operadores aritmeticos (+, -, *, /, %,

JavaScript oferece 7 operadores aritmeticos (+, -, *, /, %,

Ira resultar na string 2011 e nao no n

3 operadores logicos: &&, ||, !

Expressoes condicionais: if-else

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

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

Implemente uma pagina Web que escreva os 6 tipos de

Controles de fluxo adicionais

break, continue e for..in

Controles de fluxo adicionais

break, continue e for..in

Caixa de dialogo e Ciclo de

JavaScript oferece tres tipos de caixas de dialogo

Ciclo de vida de variaveis em JavaScript

Se voce declara uma variavel dentro de uma funcao, ela tera

Eventos sao acoes que podem ser detectadas em JavaScript

Eventos OnLoad e OnUnload

Esta classe de eventos sao lancados no carregamento e no

Eventos OnFocus, OnBlur e OnChange

OnFocus e OnBlur sao eventos complementares. O primeiro e

Evento lancado antes de um fomulario ser enviado

Eventos OnMouseOver e OnMouseOut

Controlam quando o mouse entra e sai de um componente

Evento lancado quando o usuario clica em um componente

Pesquisar sobre eventos relacionados a tempo

Trata-se de um padrao de modelagem dos elementos HTML

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

Navegando entre a hierarquia de nos

Propriedades basicas de um elemento HTML DOM

Propriedades childNodes e nodeValue

Existem basicamente tres forma de acessar os n

Trata-se do metodo mais utilizado para recuperacao de valores

Os itens podem sao indexados como em um vetor!!

Criar um formulario que antes de ser submetido sera checado por

Alterando as propriedades de um elemento

Mudando um elemento a partir de eventos

Altere o exerccio anterior para que as propriedades sejam

AJAX e baseado em padr