JavaScript: Introdução, Básico e Avançado em

Introdu¸õ
ca B´sico do JavaScript
a JavaScript avan¸ado
c JavaScript avan¸ado II
c

Programa¸õ Web
ca
Javascript

Ivo Calado

Instituto Federal de Educa¸õ, Ciˆncia e Tecnologia de Alagoas
ca e

6 de Novembro de 2012

1 / 72 Ivo Calado IFAL
Programa¸õ Web
ca

Introdu¸õ
c

Roteiro

1 Introdu¸õ
ca

2 B´sico do JavaScript
a

3 JavaScript avan¸ado
c

4 JavaScript avan¸ado II
c

Programa¸õ Web
ca

Introdu¸õ
c

O que ´ Javascript
e

O que vimos at´ aqui?
e

Linguagens que possuem como foco a visualiza¸õ da
ca
informa¸õ
ca
Nõ possibilitam a execu¸õ de fluxos de c´digo
a ca o

Programa¸õ Web
ca

Introdu¸õ
c

O que ´ Javascript
e

e

ca
informa¸õ
ca
a ca o
Nõ sõ destinadas a programadores!!
a a

Programa¸õ Web
ca

Introdu¸õ
c

O que ´ Javascript
e

e

ca
informa¸õ
ca
a ca o
a a
JavaScript foi projetado para adicionar interatividade `
a
p´ginas HTML
a
Trata-se de uma linguagem de script
Trata-se de uma linguagem interpretada

Programa¸õ Web
ca

Introdu¸õ
c

O que ´ Javascript
e

e

ca
informa¸õ
ca
a ca o
a a
a
p´ginas HTML
a

O que ´ uma linguagem interpretada?
e

Programa¸õ Web
ca

Introdu¸õ
c

O que ´ Javascript
e

e

ca
informa¸õ
ca
a ca o
a a
a
p´ginas HTML
a

O que ´ uma linguagem interpretada?
e
Significa que o script ´ executada sem uma pr´via compila¸õ
e e ca
Programa¸õ Web
ca

Introdu¸õ
c

O que ´ Javascript
e

Curiosidades

Qual a rela¸õ entre Java e JavaScript?
ca

Programa¸õ Web
ca

Introdu¸˜o
c

O que ´ Javascript
e

Curiosidades

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

Programa¸˜o Web
ca

Introdu¸õ
c

O que ´ Javascript
e

Curiosidades

ca
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

Programa¸õ Web
ca

Introdu¸õ
c

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 ´ a maneira padrõ para escrita na sa´
e a ıda!

Programa¸õ Web
ca

Introdu¸˜o
c

Hello World!

Como tornar JavaScript compat´ com navegadores
ıvel
antigos?
Deve-se fazer uso dos coment´rios HTML para “esconder” o
a
c´digo JavaScript do navegador para manter a
o
retrocompatibilidade!
<html>
<body>
<!−−
document . w r i t e ( " Hello World !" ) ;
//−−>
</ s c r i p t>
</ body>
</ html>
Programa¸˜o Web
ca

Introdu¸õ
c

Onde colocar o c´digo JavaScript?
o

No HEAD?
Scripts colocados na se¸õ HEAD nõ sõ executados
ca a a
imediatamente e devem ser localizados em fun¸˜es!
co
<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>
Programa¸õ Web
ca

Introdu¸õ
c

o

No Body?

Se vocˆ nõ deseja que seu script esteja em uma fun¸õ ou
e a ca
que ele seja destinado a escrever conte´do na tela entõ
u a
coloque-o na se¸õ body!
ca

<html>
<head></ head>
<body>
document . w r i t e ( " This message is written by
JavaScript " ) ;
</ s c r i p t>
</ body>
</ html>

Programa¸õ Web
ca

Introdu¸˜o
c

o

Usando em um arquivo externo?

Se vocˆ deseja compartilhar seu c´digo JavaScript entre
e o
diversas p´ginas, pode-se fazer uso de uma p´gina externa
a a

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

Programa¸˜o Web
ca

Introdu¸õ
c

Comandos

Uso do ponto e v´
ırgula

Em JavaScript, ´ facultativo o uso do ; (ponto e v´
e ırgula) 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>

Programa¸õ Web
ca

Introdu¸õ
c

Comandos

Pulando linha em JavaScript

Como vocˆ deve ter percebido no exemplo anterior, as duas
e
frases ficaram na mesma linha
Este comportamento acontece porque toda sa´ de enviada
ıda
pelo JavaScript ´ tratata como c´digo HTML. Por isso,
e o
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
/>" )

Programa¸õ Web
ca

Introdu¸˜o
c

Comandos

Coment´rios de linhas e multilinhas
a
JavaScript oferece dois tipos de coment´rios “//” e “/* */”
a
A semˆntica ´ a mesma do que acontece em linguagens como
a e
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>
Programa¸˜o Web
ca

Introdu¸õ
c

Usando vari´veis
a

Usando vari´veis
a

Vari´veis em JavaScript tem a mesma semˆntica que em
a a
outras linguagens, isto ´, armazenar informa¸˜es na mem´ria
e co o
Assim como o restante do JavaScript, sõ case-sensitive
a
Podem ser iniciadas por [aA-zZ], ou $
A partir do segundo caracter poder ser dos seguintes tipos
[aA-zZ], [0-9], ou $

Programa¸õ Web
ca

Introdu¸˜o
c

Usando vari´veis
a

Exemplo do uso de vari´veis
a

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

Programa¸˜o Web
ca

Introdu¸õ
c

Usando vari´veis
a

Uso de vari´veis nõ declaradas
a a

´
E poss´ atribuir valores ` vari´veis ainda nõ declaradas.
ıvel a a a

<html>
<body>
f i r s t n a m e=" Hege " ;
</ s c r i p t>
</ body>
</ html>

Nestes caso, a vari´vel ´ criada no momento da atribui¸õ!
a e ca

Programa¸õ Web
ca

Introdu¸õ
c

Usando vari´veis
a

Arrays

Em JavaScript ´ poss´ criar array para armazenamento de
e ıvel
diversos tipos de objetos
Os objetos nõ precisam ser do mesmo tipo
a
Existem 4 tipos de instancia¸õ!
ca

var myCars=new A r r a y ( ) ;
var myCars=new A r r a y ( 1 0 ) ;
var myCars=new A r r a y ( " Saab " , " Volvo " , " BMW " ) ;
var myCars =[" Saab " , " Volvo " , " BMW " ] ;

Programa¸õ Web
ca

Introdu¸õ
c

Usando vari´veis
a

Indexando arrays

Assim como Java, arrays em JavaScript sõ indexados a partir
a
da posi¸õ 0
ca

v a r myCars =[" Saab " , " Volvo " , " BMW " ] ;
document . w r i t e ( myCars [ 0 ] ) // I m p r i m e Saab

Programa¸õ Web
ca

Introdu¸˜o
c

Usando vari´veis
a

Unindo arrays

Em JavaScript ´ poss´ unir dois arrays de maneira bastante
e ıvel
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>

Programa¸˜o Web
ca

Introdu¸˜o
c

Usando vari´veis
a

Unindo todos elementos de um array em uma string
´
E poss´ unir todos os elementos de um array em uma unica
ıvel ´
string atrav´s do m´todo join
e e
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 p a d r ˜ o " ,"
a

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ˆmetro a

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ˆmetro a

</ s c r i p t>

Programa¸˜o Web
ca

Introdu¸˜o
c

Usando vari´veis
a

Exerc´
ıcio

Pesquisar e criar exemplos para os seguintes m´todos de um array:
e
push
pop
reverse
shift
slice
sort
unshift (se poss´
ıvel, testar no Firefox e IE)

Programa¸˜o Web
ca

Introdu¸õ
c

Usando vari´veis
a

O objeto String
Em JavaScript o objeto String possui as seguintes
propriedades/m´todos
e
length
toUpperCase()
big()
small()
bold()
italics()
fixed()
strike()
etc
Programa¸õ Web
ca

Introdu¸õ
c

Usando vari´veis
a

Exerc´ para casa!
ıcio

Pesquisar a utiliza¸õ dos objetos:
ca
Date
Boolean
Math
RegExp

Programa¸õ Web
ca

Introdu¸˜o
c

Usando vari´veis
a

Operadores aritm´ticos
e

JavaScript oferece 7 operadores aritm´ticos (+, -, *, /, %,
e
++, –)

Programa¸˜o Web
ca

Introdu¸õ
c

Usando vari´veis
a

Operadores aritm´ticos
e

JavaScript oferece 7 operadores aritm´ticos (+, -, *, /, %,
e
++, –)
Al´m disso, sõ oferecidos os operadores de atribui¸õ
e a ca
correspondentes (=, +=, -=. *=, /= e %=)

Programa¸õ Web
ca

Introdu¸õ
c

Usando vari´veis
a

Concatena¸õ de strings
ca

O operador “+” pode ser utilizado tamb´m no processo de
e
concatena¸õ de strings
ca
Se pelo menos um dos operandos for uma string entõ ser´
a a
realizado a concatena¸õ
ca

v1 = 20
v2 = " 11 "
v3 = v1 + v2

Ir´ resultar na string 2011 e nõ no n´mero 31!!!
a a u

Programa¸õ Web
ca

Introdu¸õ
c

Usando vari´veis
a

Operadores de compara¸õ
ca

JavaScript especifica 7 operadores de compara¸õ: ==,
ca
===, !=, >, <, >=, <= 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>

Programa¸õ Web
ca

Introdu¸õ
c

Usando vari´veis
a

Operadores de compara¸õ
ca

JavaScript especifica 7 operadores de compara¸õ: ==,
ca
===, !=, >, <, >=, <= 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 l´gicos: &&, ||, !
o

Programa¸õ Web
ca

Introdu¸õ
c

Usando vari´veis
a

Operadores tern´rio
a

Assim como Java e C++, em JavaScript ´ poss´ fazer uso do
e ıvel
operador tern´rio.
a

Qual o resultado da vari´vel valor ap´s a execu¸õ do seguinte
a o ca
script?

x = 5
v a l o r = ( x != 5 ) ? " string de teste " : 10
</ s c r i p t>

Programa¸õ Web
ca

Introdu¸õ
c

Controle de fluxo

Express˜es condicionais: if-else
o

A utiliza¸õ da estrutura de sele¸õ if-else ´ semelhante `
ca ca e a
Java

i f ( condition )
{
statement 1;
statement 2;
} // Os d o i s comandos s ˜ o e x e c u t a d o s
a
i f ( condition )
statement 1;
statement 2;
statement 3;
// Apenas o p r i m e i r o comando ´ e x e c u t a d o
e

Programa¸õ Web
ca

Introdu¸õ
c

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>

Programa¸õ Web
ca

Introdu¸õ
c

Controle de fluxo

Exerc´
ıcio

Criar uma p´gina HTML que possua um script JavaScript que faz
a
uso da fun¸õ Math.random() para gerar n´meros aleat´rios e
ca u o
caso o valor for maior que 0.5 criar o link para a p´gina do Google.
a
Caso contr´rio, redirecionar para a p´gina globo.com .
a a

Programa¸õ Web
ca

Introdu¸õ
c

Controle de fluxo

Exerc´ II
ıcio

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 m´todo getMinutes() do objeto Date retorna
e
os minutos atuais e getHours() retorna a hora atual.

Programa¸õ Web
ca

Introdu¸õ
c

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
}

Programa¸õ Web
ca

Introdu¸õ
c

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

Programa¸õ Web
ca

Introdu¸õ
c

Controle de fluxo

Exerc´
ıcio

Implemente uma p´gina Web que escreva os 6 tipos de
a
cabe¸alhos fazendo uso do comando for
c

Programa¸õ Web
ca

Introdu¸õ
c

Controle de fluxo

Controles de fluxo adicionais

break, continue e for..in

Qual a diferen¸a entre break e continue
c

Programa¸õ Web
ca

Introdu¸õ
c

Controle de fluxo

Controles de fluxo adicionais

break, continue e for..in

Qual a diferen¸a entre break e continue
c
continue interrompe a itera¸õ atual e inicia na pr´xima itera¸õ.
ca o ca
break interrompe todo o loop.

Programa¸õ Web
ca

Introdu¸õ
c

Controle de fluxo

for..in

A estrutura for..in tem a mesma semˆntica do for extendido
a
do Java
Visa realizar itera¸õ sobre arrays e listas
ca

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

Programa¸õ Web
ca

Introdu¸˜o
c

Caixa de di´logo e Ciclo de
a
vida das vari´veis
a

Programa¸˜o Web
ca

Introdu¸õ
c

Caixas Popup

Caixas Popup

JavaScript oferece trˆs tipos de caixas de di´logo
e a
AlertBox: tem como objetivo informar ao usu´rio alguma
a
mensagem
ConfirmBox: recebe uma entrada do usu´rio a partir da
a
confirma¸õ
ca
PromptBox: recebe uma entrada do usu´rio a partir de uma
a
entrada de texto

Programa¸õ Web
ca

Introdu¸˜o
c

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>

Programa¸˜o Web
ca

Introdu¸õ
c

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>
Programa¸õ Web
ca

Introdu¸˜o
c

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>
Programa¸˜o Web
ca

Introdu¸õ
c

Fun¸˜es
co

Fun¸oes
c˜

Fun¸˜es em JavaScript tem o mesmo prop´sito que em
co o
linguagens como Java e C++
Possibilitam o re´so de c´digo
u o
Fun¸˜es podem ser definidas no HEAD, BODY ou num
co
arquivo externo .js, por´m recomenda-se nõ adicionar na
e a
se¸õ BODY
ca

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
}

Programa¸õ Web
ca

Introdu¸õ
c

Fun¸˜es
co

Ciclo de vida de vari´veis em JavaScript
a

Se vocˆ declara uma vari´vel dentro de uma fun¸õ, ela ter´
e a ca a
escopo apenas local e quando a fun¸õ for finalizada a
ca
vari´vel ser´ destru´
a a ıda
Contudo, vari´veis criadas fora de fun¸˜es podem ser
a co
visualizadas de qualquer parte da p´gina, chamadas vari´veis
a a
globais e existem desde o momento que a p´gina ´ carregada
a e
at´ quando ela for fechada
e

Programa¸õ Web
ca

Introdu¸˜o
c

Eventos

Eventos

Programa¸˜o Web
ca

Introdu¸õ
c

Eventos

Eventos

Eventos sõ a¸˜es que podem ser detectadas em JavaScript
a co
A partir da implementa¸õ de eventos, podemos criar p´ginas
ca a
dinˆmicas
a
Cada elemento em HTML tˆm um pr´prio conjunto de
e o
eventos que podem ser capturados
A especifica¸õ dos eventos que serõ “escutados” ´ definido
ca a e
nas tags HTML

Programa¸õ Web
ca

Introdu¸˜o
c

Eventos

Exemplos de Eventos

Clique do mouse
Carregamento de uma p´gina Web ou imagem
a
Mover o mouse sobre uma certa ´rea da p´gina Web
a a
Selecionar um campo de entrada de dados em um formul´rio
a
Submeter um formul´rio
a

Programa¸˜o Web
ca

Introdu¸õ
c

Eventos

Exemplos de Eventos

Clique do mouse
Carregamento de uma p´gina Web ou imagem
a
Mover o mouse sobre uma certa ´rea da p´gina Web
a a
Selecionar um campo de entrada de dados em um formul´rio
a
Submeter um formul´rio
a

Eventos sõ normalmente usados em combina¸˜es com fun¸˜es e,
a co co
portanto, a fun¸õ nõ ser´ executado at´ que o evento seja
ca a a e
lan¸ado
c

Programa¸õ Web
ca

Introdu¸õ
c

Eventos

Eventos OnLoad e OnUnload

Esta classe de eventos sõ lan¸ados no carregamento e no
a c
fechamento de uma p´gina HTML
a
OnLoad geralmente ´ utilizado para checar o tipo de browser
e
utilizado ou a versõ do navegador
a
Um outro uso seria setar Cookies quando o usu´rio entra ou
a
sai da p´gina Web
a

Programa¸õ Web
ca

Introdu¸õ
c

Eventos

Eventos OnFocus, OnBlur e OnChange

OnFocus e OnBlur sõ eventos complementares. O primeiro ´
a e
lan¸ado quando um elemento ganha foco e o segundo quando
c
perde foco
Onchange, por sua vez, ´ lan¸ado apenas se o conte´do do
e c u
elemento tiver sido alterado

Programa¸õ Web
ca

Introdu¸õ
c

Eventos

Evento OnSubmit

Evento lan¸ado antes de um fomul´rio ser enviado
c a
Geralmente usado para fazer a valida¸õ dos campos do
ca
formul´rio
a

<form method=" post " a c t i o n=" destino . htm " o n s u b m i t="
return checkForm () ">

Programa¸õ Web
ca

Introdu¸˜o
c

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>

Programa¸˜o Web
ca

Introdu¸õ
c

Eventos

Evento OnClick

Evento lan¸ado quando o usu´rio clica em um componente
c a
vis´ da tela
ıvel
Um exemplo de utiliza¸õ ´ em bot˜es de submissõ. Caso a
ca e o a
fun¸õ JavaScript retorne falso o formul´rio nõ ´ submetido
ca a a e

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

Programa¸õ Web
ca

Introdu¸˜o
c

Tratamento de exce¸oes
c˜

Tratamento de Exce¸˜es
co

Programa¸˜o Web
ca

Introdu¸õ
c

c˜

c˜

Assim como outras linguagens de programa¸õ, JavaScript
ca
oferece suporte ao tratamento de erros atrav´s do uso de
e
exce¸˜es
co
A sintaxe em JavaScript ´ bastante semelhante ao que
e
acontece em C++ e Java

try {
// B l o c o que pode l a n c a r e x c e ¸ ˜ o
ca
} catch ( ex ) {
// Tratamento de e x c e c ˜ o
¸a
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
}

Programa¸õ Web
ca

Introdu¸õ
c

c˜

A clúsula throw
a

Al´m de capturar exce¸˜es, podemos lan¸´-las
e co ca
Para tal, fazemos uso da clúsula throw
a
Ela possui a mesma semˆntica do comando an´logo, em Java,
a a
throw!

i f ( x >10)
{
t h r o w " Err1 " ;
} else
i f ( x<0 ) {
t h r o w " Err2 " ;
}

Programa¸õ Web
ca

Introdu¸õ
c

c˜

Exerc´
ıcio! :)

Pesquisar sobre o objeto navigator

Qual a fun¸õ deste objeto?
ca

Programa¸õ Web
ca

Introdu¸õ
c

c˜

Exerc´
ıcio! :)

Pesquisar sobre o objeto navigator

Qual a fun¸õ deste objeto?
ca
O objeto navigator cont´m todas as informa¸˜es sobre o browser
e co
visitante, como:
Nome da aplica¸õ
ca
Versõ do navegador
a
Plataforma
etc

Programa¸õ Web
ca

Introdu¸˜o
c

c˜

Exerc´ 2! :)
ıcio

Pesquisar sobre eventos relacionados a tempo
setTimeout e clearTimeout

Programa¸˜o Web
ca

Introdu¸˜o
c

HTML DOM

HTML DOM

Programa¸˜o Web
ca

Introdu¸˜o
c

HTML DOM

O que ´?
e

O que ´?
e

Programa¸˜o Web
ca

Introdu¸õ
c

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

Programa¸õ Web
ca

Introdu¸õ
c

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

Programa¸õ Web
ca

Introdu¸õ
c

HTML DOM

Em outras palavras...

Trata-se de um padrõ de modelagem dos elementos HTML
a
como objetos
Uma abordagem padrõ para acesso e altera¸õ do HTMl
a ca
programa¸˜
co
Um padrõ W3C
a
Em outras palavras: O HTML DOM ´ um padrõ para
e a
recupera¸õ, altera¸õ, adi¸õ ou remo¸õ de elementos
ca ca ca ca
HTML e suas propriedades

Programa¸õ Web
ca

Introdu¸õ
c

HTML DOM

N´s DOM
o

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

O documento inteiro ´ um n´
e o
Cada elemento HTML ´ um n´
e o
O texto dos elementos HTML sõ n´s
a o
Cada atributo do HTML ´ um atributo de um n´
e o
Coment´rios sõ n´s de coment´rio
a a o a

Programa¸õ Web
ca

Introdu¸˜o
c

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>

Programa¸˜o Web
ca

Introdu¸˜o
c

HTML DOM

Navegando entre a hierarquia de n´s
o

Programa¸˜o Web
ca

Introdu¸õ
c

HTML DOM

Propriedades b´sicas de um elemento HTML DOM
a

x.innerHTML - conte´do textual de x
u
x.nodeName - o nome de x
x.nodeValue - o valor do x
x.parentNode - referˆncia ao elemento pai de x
e
x.childNodes - N´s filhos de x
o
x.attributes - n´s atributos de x
o

Programa¸õ Web
ca

Introdu¸˜o
c

HTML DOM

A propriedade innerHTML

´
E utilizado para recuperar ou substituir o conte´do de um
u
elemento HTML, inclusive <html> e <body>
Pode ser utilizada tamb´m para visualizar o c´digo fonte de
e o
uma p´gina alterada dinamicamente
a

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

Programa¸˜o Web
ca

Introdu¸õ
c

HTML DOM

Propriedades childNodes e nodeValue

Uma segunda forma de obten¸õ ´ a partir da combina¸õ das
ca e ca
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>

Programa¸õ Web
ca

Introdu¸˜o
c

HTML DOM

Acessando N´s
o

Existem basicamente trˆs forma de acessar os n´s da ´rvore
e o a
HTML:
getElementById
getElementByTagName
Navegando na estrutura dos n´s
o

Programa¸˜o Web
ca

Introdu¸õ
c

HTML DOM

getElementById

Trata-se do m´todo mais utilizado para recupera¸õ de valores
e ca
Recebe como o id do objeto a ser acessado
Ver exemplo...

Programa¸õ Web
ca

Introdu¸˜o
c

HTML DOM

getElementsByTagName

Retorna todos os elementos da tag passada por parˆmetro
a

document . getElementsByTagName ( "p" ) ; // R e t o r n a t o d o s
o s e l e m e n t o s p do HTML

Programa¸˜o Web
ca

Introdu¸õ
c

HTML DOM


a


Qual o significado do c´digo abaixo?
o
document . g e t E l e m e n t B y I d ( ’ main ’ ) . getElementsByTagName ( "p
") ;

Programa¸õ Web
ca

Introdu¸õ
c

HTML DOM


a


Qual o significado do c´digo abaixo?
o
document . g e t E l e m e n t B y I d ( ’ main ’ ) . getElementsByTagName ( "p
") ;

Os itens podem sõ indexados como em um vetor!!
a

Programa¸õ Web
ca

Introdu¸õ
c

HTML DOM

Exerc´
ıcio

Criar um formul´rio que antes de ser submetido ser´ checado por
a a
valores vazio. E caso isso ocorra, cancele a transmissõ e imprima
a
um texto na cor vermelha indicando que houve erro.

Programa¸õ Web
ca

Introdu¸˜o
c

HTML DOM

Alterando as propriedades de um elemento

At´ agora vimos como alterar o conte´do de um elemento
e u
HTML via propriedade innerHTML
Por´m, ´ poss´ alterar o conte´do diretamente sem
e e ıvel u
“reescrever” um novo HTML

<html>
<body>
document . body . b g C o l o r=" lavender " ;
</ s c r i p t>
</ body>
</ html>

Programa¸˜o Web
ca

Introdu¸˜o
c

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>

Programa¸˜o Web
ca

Introdu¸˜o
c

HTML DOM

Mudando um elemento a partir de eventos

´
E poss´ alterar uma propriedade diretamente a partir do
ıvel
lan¸amento de um evento
c

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

Programa¸˜o Web
ca

Introdu¸õ
c

HTML DOM

JavaScript + CSS

Em JavaScript as regras CSS podem ser customizadas
durante a execu¸õ
ca
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>

Programa¸õ Web
ca

Introdu¸˜o
c

HTML DOM

Exerc´
ıcio

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

Programa¸˜o Web
ca

JavaScript: Introdução, Básico e Avançado em

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Andere mochten auch

Andere mochten auch (20)

Ähnlich wie JavaScript: Introdução, Básico e Avançado em

Ähnlich wie JavaScript: Introdução, Básico e Avançado em (20)

JavaScript: Introdução, Básico e Avançado em