Javascript

Introducao Basico do JavaScript JavaScript avancado JavaScript avancado II

Programacao WebJavascript

Ivo Calado

Instituto Federal de Educacao, Ciencia e Tecnologia de Alagoas

6 de Novembro de 2012

1 / 72 Ivo Calado IFAL

Programacao Web


Roteiro

1 Introducao

2 Basico do JavaScript

3 JavaScript avancado

4 JavaScript avancado II


Programacao Web


O que e Javascript

O que vimos ate aqui?

Linguagens que possuem como foco a visualizacao dainformacao

Nao possibilitam a execucao de fluxos de codigo

Nao sao destinadas a programadores!!

JavaScript foi projetado para adicionar interatividade apaginas 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 previa compilacao


Programacao Web


O que e Javascript











Programacao Web


O que e Javascript











Programacao Web


O que e Javascript











Programacao Web


O que e Javascript











Programacao Web


O que e Javascript

Curiosidades

Qual a relacao entre Java e JavaScript?

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

Qual o nome oficial da linguagem JavaScript?

ECMAScript! Desenvolvido e mantido pela ECMA InternationalOrganization


Programacao Web


O que e Javascript

Curiosidades






Programacao Web


O que e Javascript

Curiosidades






Programacao Web


Hello World!

Hello World

Para adicionar algum script JavaScript basta fazer uso da tagscript 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 saıda!


Programacao Web


Hello World!

Como tornar JavaScript compatıvel com navegadoresantigos?

Deve-se fazer uso dos comentarios HTML para “esconder” ocodigo JavaScript do navegador para manter aretrocompatibilidade!

<html><body>

<s c r i p t type="text/javascript"><!−−

document . w r i t e ("Hello World!" ) ;//−−></ s c r i p t>

</body></ html>


Programacao Web


Onde colocar o codigo JavaScript?

No HEAD?

Scripts colocados na secao HEAD nao sao executadosimediatamente e devem ser localizados em funcoes!

<html><head><s c r i p t type="text/javascript">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 onload="message()"></body></ html>


Programacao Web



No Body?

Se voce nao deseja que seu script esteja em uma funcao ouque ele seja destinado a escrever conteudo na tela entaocoloque-o na secao body!

<html><head></head><body>

<s c r i p t type="text/javascript">document . w r i t e ("This message is written by

JavaScript" ) ;</ s c r i p t>

</body></ html>


Programacao Web



Usando em um arquivo externo?

Se voce deseja compartilhar seu codigo JavaScript entrediversas 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 onload="helloworld()"></body>

</ html>


Programacao Web


Comandos

Uso do ponto e vırgula

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

<html><body>

<s c r i p t type="text/javascript">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" )


</ html>


Programacao Web


Comandos

Pulando linha em JavaScript

Como voce deve ter percebido no exemplo anterior, as duasfrases ficaram na mesma linha

Este comportamento acontece porque toda saıda de enviadapelo JavaScript e tratata como codigo 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

/>" )


Programacao Web


Comandos

Comentarios de linhas e multilinhas

JavaScript oferece dois tipos de comentarios “//” e “/* */”A semantica e a mesma do que acontece em linguagens comoJava e C++

<html><body><s c r i p t type="text/javascript">/∗The code below 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>


Programacao Web


Usando variaveis

Usando variaveis

Variaveis em JavaScript tem a mesma semantica que emoutras 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 $


Programacao Web


Usando variaveis

Exemplo do uso de variaveis

<html><body>

<s c r i p t type="text/javascript">v a r f i r s t n a m e ;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 ) ;


</ html>


Programacao Web


Usando variaveis

Uso de variaveis nao declaradas

E possıvel atribuir valores a variaveis ainda nao declaradas.

<html><body>

<s c r i p t type="text/javascript">f i r s t n a m e="Hege" ;


</ html>

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


Programacao Web


Usando variaveis

Arrays

Em JavaScript e possıvel criar array para armazenamento dediversos tipos de objetos

Os objetos nao precisam ser do mesmo tipo

Existem 4 tipos de instanciacao!

v a r myCars=new Array ( ) ;v a r myCars=new Array ( 1 0 ) ;v a r myCars=new Array ("Saab" ,"Volvo" ,"BMW" ) ;v a r myCars=["Saab" ,"Volvo" ,"BMW" ] ;


Programacao Web


Usando variaveis

Indexando arrays

Assim como Java, arrays em JavaScript sao indexados a partirda posicao 0

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


Programacao Web


Usando variaveis

Unindo arrays

Em JavaScript e possıvel unir dois arrays de maneira bastantesimples

<s c r i p t type="text/javascript">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" ] ;v a r f a m i l y = p a r e n t s . c o n c a t ( 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>


Programacao Web


Usando variaveis

Unindo todos elementos de um array em uma string

E possıvel unir todos os elementos de um array em uma unicastring 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 ao ","

document . w r i t e ( f r u i t s . j o i n ("+" ) + "<br />" ) ; // U t i l i z ao 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 os e p a r a d o r passado por par ametro

</ s c r i p t>


Programacao Web


Usando variaveis

Exercıcio

Pesquisar e criar exemplos para os seguintes metodos de um array:

push

pop

reverse

shift

slice

sort

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


Programacao Web


Usando variaveis

O objeto String

Em JavaScript o objeto String possui as seguintespropriedades/metodos

length

toUpperCase()

big()

small()

bold()

italics()

fixed()

strike()

etc21 / 72 Ivo Calado IFAL

Programacao Web


Usando variaveis

Exercıcio para casa!

Pesquisar a utilizacao dos objetos:

Date

Boolean

Math

RegExp


Programacao Web


Usando variaveis

Operadores aritmeticos

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

Alem disso, sao oferecidos os operadores de atribuicaocorrespondentes (=, +=, -=. *=, /= e %=)


Programacao Web


Usando variaveis

Operadores aritmeticos

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

Alem disso, sao oferecidos os operadores de atribuicaocorrespondentes (=, +=, -=. *=, /= e %=)


Programacao Web


Usando variaveis

Concatenacao de strings

O operador “+” pode ser utilizado tambem no processo deconcatenacao de strings

Se pelo menos um dos operandos for uma string entao serarealizado a concatenacao

v1 = 20v2 = "11"

v3 = v1 + v2

Ira resultar na string 2011 e nao no numero 31!!!


Programacao Web


Usando variaveis

Operadores de comparacao

JavaScript especifica 7 operadores de comparacao: ==,===, !=, >, <, >=, <= e

<s c r i p t type="text/javascript">x = 5p 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: &&, ||, !


Programacao Web


Usando variaveis

Operadores de comparacao

JavaScript especifica 7 operadores de comparacao: ==,===, !=, >, <, >=, <= e

<s c r i p t type="text/javascript">x = 5p 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: &&, ||, !


Programacao Web


Usando variaveis

Operadores ternario

Assim como Java e C++, em JavaScript e possıvel fazer uso dooperador ternario.

Qual o resultado da variavel valor apos a execucao do seguintescript?

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

</ s c r i p t>


Programacao Web


Controle de fluxo

Expressoes condicionais: if-else

A utilizacao da estrutura de selecao if-else e semelhante aJava

i f ( c o n d i t i o n ){

s t a t e m e n t 1 ;s t a t e m e n t 2 ;

} // Os d o i s comandos s ao e x e c u t a d o si f ( c o n d i t i o n )

s t a t e m e n t 1 ;s t a t e m e n t 2 ;s t a t e m e n t 3 ;

// Apenas o p r i m e i r o comando e e x e c u t a d o


Programacao Web


Controle de fluxo

Exemplo if-else

<html><body><s c r i p t type="text/javascript">v a r d = new Date ( ) ;v a r t ime = d . getHours ( ) ;i f ( t ime < 12){document . w r i t e ("<b>Bom dia </b>" ) ;} e l s edocument . w r i t e ("<b>Boa tarde </b>" ) ;</ s c r i p t></body></ html>


Programacao Web


Controle de fluxo

Exercıcio

Criar uma pagina HTML que possua um script JavaScript que fazuso da funcao Math.random() para gerar numeros aleatorios ecaso o valor for maior que 0.5 criar o link para a pagina do Google.Caso contrario, redirecionar para a pagina globo.com .


Programacao Web


Controle de fluxo

Exercıcio II

Altere o exemplo if.html para que, dependendo da horaobtida no sistema seja impressa a aula atual (1a, 2a, 3a,intervalo, 4a, 5a, 6a).

Sabe-se que o metodo getMinutes() do objeto Date retornaos minutos atuais e getHours() retorna a hora atual.


Programacao Web


Controle de fluxo

O comando For

Em JavaScript, a estrutura for segue a mesma sintaxe dalinguagem 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 ; var=var+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 dalinguagem JavaScript


Programacao Web


Controle de fluxo

O comando For

Em JavaScript, a estrutura for segue a mesma sintaxe dalinguagem 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 ; var=var+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 dalinguagem JavaScript


Programacao Web


Controle de fluxo

Exercıcio

Implemente uma pagina Web que escreva os 6 tipos decabecalhos fazendo uso do comando for


Programacao Web


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.


Programacao Web


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.


Programacao Web


Controle de fluxo

for..in

A estrutura for..in tem a mesma semantica do for extendidodo Java

Visa realizar iteracao sobre arrays e listas

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 r i t e ( mycars [ x ] + "<br />" ) ;}


Programacao Web


Caixa de dialogo e Ciclo devida das variaveis


Programacao Web


Caixas Popup

Caixas Popup

JavaScript oferece tres tipos de caixas de dialogo

AlertBox: tem como objetivo informar ao usuario algumamensagem

ConfirmBox: recebe uma entrada do usuario a partir daconfirmacao

PromptBox: recebe uma entrada do usuario a partir de umaentrada de texto


Programacao Web


Caixas Popup

Alert Box

<head><s c r i p t type="text/javascript">f u n c t i o n s h o w a l e r t ( ){a l e r t ("Hello! I am an alert box!" ) ;}</ s c r i p t></head><body><i nput type="button" o n c l i c k="show_alert()" va lue="Show

alert box" /></body>


Programacao Web


Caixas Popup

Confirm Box

<html> <head><s c r i p t type="text/javascript">

f u n c t i o n s h o w c o n f i r m ( ) {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!" ) ;} e l s e {

a l e r t ("You pressed Cancel!" ) ;}

}</ s c r i p t> </head><body>

<i nput type="button" o n c l i c k="show_confirm()" va lue="Show a confirm box" />

</body> </ html>


Programacao Web


Caixas Popup

Prompt Box

<html><head><s c r i p t type="text/javascript">f u n c t i o n d i s p p r o m p t ( ) {

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 nput type="button" o n c l i c k="disp_prompt()" va lue="

Display

a prompt box" /></body> </ html>


Programacao Web


Funcoes

Funcoes

Funcoes em JavaScript tem o mesmo proposito que emlinguagens como Java e C++

Possibilitam o reuso de codigo

Funcoes podem ser definidas no HEAD, BODY ou numarquivo externo .js, porem recomenda-se nao adicionar nasecao BODY

f u n c t i o n nome da funcao ( var1 , var2 , . . . , varX ){

some code}


Programacao Web


Funcoes

Ciclo de vida de variaveis em JavaScript

Se voce declara uma variavel dentro de uma funcao, ela teraescopo apenas local e quando a funcao for finalizada avariavel sera destruıda

Contudo, variaveis criadas fora de funcoes podem servisualizadas de qualquer parte da pagina, chamadas variaveisglobais e existem desde o momento que a pagina e carregadaate quando ela for fechada


Programacao Web


Eventos

Eventos


Programacao Web


Eventos

Eventos

Eventos sao acoes que podem ser detectadas em JavaScript

A partir da implementacao de eventos, podemos criar paginasdinamicas

Cada elemento em HTML tem um proprio conjunto deeventos que podem ser capturados

A especificacao dos eventos que serao “escutados” e definidonas tags HTML


Programacao Web


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 combinacoes com funcoes e,portanto, a funcao nao sera executado ate que o evento sejalancado


Programacao Web


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 combinacoes com funcoes e,portanto, a funcao nao sera executado ate que o evento sejalancado


Programacao Web


Eventos

Eventos OnLoad e OnUnload

Esta classe de eventos sao lancados no carregamento e nofechamento de uma pagina HTML

OnLoad geralmente e utilizado para checar o tipo de browserutilizado ou a versao do navegador

Um outro uso seria setar Cookies quando o usuario entra ousai da pagina Web


Programacao Web


Eventos

Eventos OnFocus, OnBlur e OnChange

OnFocus e OnBlur sao eventos complementares. O primeiro elancado quando um elemento ganha foco e o segundo quandoperde foco

Onchange, por sua vez, e lancado apenas se o conteudo doelemento tiver sido alterado


Programacao Web


Eventos

Evento OnSubmit

Evento lancado antes de um fomulario ser enviado

Geralmente usado para fazer a validacao dos campos doformulario

<form method="post" a c t i o n="destino.htm" onsubmit="

return checkForm()">


Programacao Web


Eventos

Eventos OnMouseOver e OnMouseOut

Controlam quando o mouse entra e sai de um componenterespectivamente

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


Programacao Web


Eventos

Evento OnClick

Evento lancado quando o usuario clica em um componentevisıvel da tela

Um exemplo de utilizacao e em botoes de submissao. Caso afuncao JavaScript retorne falso o formulario nao e submetido

<i nput type="submit" o n c l i c k="return checkForm();"

va lue="Submeter" i d="input3"/>


Programacao Web


Tratamento de excecoes

Tratamento de Excecoes


Programacao Web




Assim como outras linguagens de programacao, JavaScriptoferece suporte ao tratamento de erros atraves do uso deexcecoes

A sintaxe em JavaScript e bastante semelhante ao queacontece em C++ e Java

t r y {// Bloco que pode l a n c a r e x c e c a o

} c a t c h ( ex ) {// Tratamento de e x c e c a os t r = ex . message // r e c u p e r a o e r r o gerado

}


Programacao Web



A clausula throw

Alem de capturar excecoes, 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){

throw "Err1" ;} e l s e

i f ( x<0) {throw "Err2" ;

}


Programacao Web



Exercıcio! :)

Pesquisar sobre o objeto navigator

Qual a funcao deste objeto?

O objeto navigator contem todas as informacoes sobre o browservisitante, como:

Nome da aplicacao

Versao do navegador

Plataforma

etc


Programacao Web



Exercıcio! :)

Pesquisar sobre o objeto navigator

Qual a funcao deste objeto?

O objeto navigator contem todas as informacoes sobre o browservisitante, como:

Nome da aplicacao

Versao do navegador

Plataforma

etc


Programacao Web



Exercıcio 2! :)

Pesquisar sobre eventos relacionados a tempo

setTimeout e clearTimeout


Programacao Web


HTML DOM

HTML DOM


Programacao Web


HTML DOM

O que e?

O que e?

De acordo com o W3C o DOM (Documento Object Model) edefinido como:”The W3C Document Object Model (DOM) is a platform andlanguage-neutral interface that allows programs and scripts todynamically access and update the content, structure, and style ofa document.”

Em resumo HTML DOM == HTML + DOM


Programacao Web


HTML DOM

O que e?

O que e?




Programacao Web


HTML DOM

O que e?

O que e?




Programacao Web


HTML DOM

Em outras palavras...

Trata-se de um padrao de modelagem dos elementos HTMLcomo objetos

Uma abordagem padrao para acesso e alteracao do HTMlprogramaco

Um padrao W3C

Em outras palavras: O HTML DOM e um padrao pararecuperacao, alteracao, adicao ou remocao de elementosHTML e suas propriedades


Programacao Web


HTML DOM

Nos DOM

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

O documento inteiro e um no

Cada elemento HTML e um no

O texto dos elementos HTML sao nos

Cada atributo do HTML e um atributo de um no

Comentarios sao nos de comentario


Programacao Web


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 Lesson one</h1><p>H e l l o w o r l d !</p>

</body></ html>


Programacao Web


HTML DOM

Navegando entre a hierarquia de nos


Programacao Web


HTML DOM

Propriedades basicas de um elemento HTML DOM

x.innerHTML - conteudo 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


Programacao Web


HTML DOM

A propriedade innerHTML

E utilizado para recuperar ou substituir o conteudo de umelemento HTML, inclusive <html> e <body>

Pode ser utilizada tambem para visualizar o codigo fonte deuma pagina alterada dinamicamente

<p i d="intro">H e l l o World !</p>

<s c r i p t type="text/javascript">t x t=document . getE lementById ("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>


Programacao Web


HTML DOM

Propriedades childNodes e nodeValue

Uma segunda forma de obtencao e a partir da combinacao daspropriedades childNodes e nodeValue

<p i d="intro">H e l l o World !</p>

<s c r i p t type="text/javascript">t x t=document . getE lementById ("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>


Programacao Web


HTML DOM

Acessando Nos

Existem basicamente tres forma de acessar os nos da arvoreHTML:

getElementById

getElementByTagName

Navegando na estrutura dos nos


Programacao Web


HTML DOM

getElementById

Trata-se do metodo mais utilizado para recuperacao de valores

Recebe como o id do objeto a ser acessado

Ver exemplo...


Programacao Web


HTML DOM

getElementsByTagName

Retorna todos os elementos da tag passada por parametro

document . getElementsByTagName ("p" ) ; // Retorna t o d o sos e l e m e n t o s p do HTML

Qual o significado do codigo abaixo?

document . getE lementById ( ’ main ’ ) . getElementsByTagName ("p" ) ;

Os itens podem sao indexados como em um vetor!!


Programacao Web


HTML DOM








Programacao Web


HTML DOM








Programacao Web


HTML DOM

Exercıcio

Criar um formulario que antes de ser submetido sera checado porvalores vazio. E caso isso ocorra, cancele a transmissao e imprimaum texto na cor vermelha indicando que houve erro.


Programacao Web


HTML DOM

Alterando as propriedades de um elemento

Ate agora vimos como alterar o conteudo de um elementoHTML via propriedade innerHTML

Porem, e possıvel alterar o conteudo diretamente sem“reescrever” um novo HTML

<html><body><s c r i p t type="text/javascript">

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


Programacao Web


HTML DOM

Exemplo 2

<html><body><p i d="p1">H e l l o World !</p><s c r i p t type="text/javascript">document . getE lementById ("p1" ) . innerHTML="New text!" ;</ s c r i p t></body></ html>


Programacao Web


HTML DOM

Mudando um elemento a partir de eventos

E possıvel alterar uma propriedade diretamente a partir dolancamento de um evento

<html><body><i nput type="button" o n c l i c k="document.body.bgColor=’

lavender ’;"

va lue="Change background color" /></body></ html>


Programacao Web


HTML DOM

JavaScript + CSS

Em JavaScript as regras CSS podem ser customizadasdurante a execucao

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

<s c r i p t type="text/javascript">f u n c t i o n C h a n g e S t y l e ( ){

document . getE lementById ("p1" ) . s t y l e . c o l o r="blue" ;document . getE lementById ("p1" ) . s t y l e . f o n t F a m i l y="Arial

" ;}</ s c r i p t>


Programacao Web


HTML DOM

Exercıcio

Altere o exercıcio anterior para que as propriedades sejamcustomizadas via CSS


Programacao Web

Documents

Javascript