Constru o de Sites Aula 6 - UFPR · Eventos onLoad e onUnload Eventos com JavaScript Os eventos...

Eventos com JavaScriptEventos por id

InnerHTML

Construcao de Sites

Aula 6

Programa Instrutor

Universidade Federal do Parana

Pro-reitoria de Assuntos Estudantis

Departamento de Informatica

17 de Agosto de 2010

Programa Instrutor Construcao de SitesAula 6


InnerHTML

Indice

1 Eventos com JavaScriptEventos onLoad e onUnload

2 Eventos por idEventos onMouseOver e onMouseOutEventos onClickEventos onSubmit

3 InnerHTML



InnerHTMLEventos onLoad e onUnload

Eventos com JavaScript

Para dar mais interatividade a uma pagina html podemosreagir a eventos como:

clique de mouse;

pagina ou imagem sendo carregada;

movimentacao do mouse numa parte da pagina;

submetendo um formulario em html;




Eventos com JavaScript

Os eventos sao adicionados a tags de html da seguinte forma:

Controlando Eventos

onEvento = ”codigo a ser executado.”onLoad = ”alert(’Seja bem vindo!’)”;.onEvento = ”funcao()”.onLoad = ”mensagem incial()”.




Eventos onLoad e onUnload

Os eventos de load e unload sao ativados quando entra e saida pagina.

Exemplo de onLoad

<head><script>function msg boas vindas(){

alert(”Seja bem vindo!”);}

</script></head>

<body onLoad = ”msg boas vindas()”></body>




Eventos onLoad e onUnload

Exemplo de Unload

<head><script>function msg saida(){

alert(”Volte sempre!”);}

</script></head>

<body onLoad = ”msg saida()”></body>



InnerHTML

Eventos onMouseOver e onMouseOutEventos onClickEventos onSubmit

Eventos por id

O atributo id de uma tag html pode ser usado pelo javascript.

Uso de id

Id e usado para passar valor de uma pagina html para umafuncao do javascript.Forma de acesso a um objeto:

document.getElementById(”nome-id-objeto”)



InnerHTML


Eventos onMouseOver e onMouseOut

Os eventos de mouse over e mouse out serverm para criaranimacoes na pagina.

Exemplo de animacao usando mouse

<a href=”http://www.w3schools.com”target=” blank”><img border=”0”alt=”VisitW3Schools!”src=”b pink.gif”id=”b1”onmouseOver=”mouseOver()”onmouseOut=”mouseOut()”/></a>



InnerHTML



Exemploe de animacao usando mouse

<script type=”text/javascript”>function mouseOver(){

document.getElementById(”b1”).src=”b blue.gif”;

}function mouseOut(){

document.getElementById(”b1”).src=”b pink.gif”;

}</script>



InnerHTML





InnerHTML


Eventos onClick

Eventos onClick podem ser usados para validar um formulariono momento que sao enviados.

Funcao para verificar campo vazio

function TestaVazio(elemento){if(elemento.value.length == 0){

alert(”Campo vazio!”);elem.focus();return false;

}return true;

}



InnerHTML


Eventos onClick

Formulario a ser verificado

<form>

Required Field: <input type=’text’ id=’req1’/><input type=’button’onclick=”TestaVazio(document.getElementById(’req1’),

’Entre com valor’)”value=’Verfica Campo’ />

</form>



InnerHTML


Eventos onClick

Agora vamos criar uma funcao para um campo em que temosde ter apenas numeros.

Funcao que testa se e numero

function TestaNumero(elemento){

var numericExpression = / [0-9]+$ /;if(elemento.value.match(numericExpression)){

return true; }else {

alert(”Nessa campo vai somente numeros!”);elemento.focus();return false;

}}



InnerHTML


Eventos onClick


<form>

Somente numeros: <input type=’text’ id=’numbers’/><input type=’button’

on-click=”TestaNumero(document.getElementById(’numbers’),

’Apenas numeros’)”value=’Verifica campo’ />

</form>



InnerHTML


Eventos onClick

Agora vamos criar uma funcao para um campo em que temosde ter apenas letras

Funcao que testa se e uma palavra

function TestaPalavra(elemento){

var numericExpression = / [a-zA-Z]+$ /;if(elemento.value.match(numericExpression)){

return true; }else {

alert(”Nessa campo vai somente numeros!”);elemento.focus();return false;

}}



InnerHTML


Eventos onClick


<form>

Digite uma palavra: <input type=’text’ id=’letras’/><input type=’button’

onclick=”TestaPalavra(document.getElementById(’letras’),’Apenas letras’)”value=’Verifica campo’ />

</form>



InnerHTML


Eventos onClick

Outra forma de entrada de dados e selecionar um item de umalista, abaixo segue um exemplo como verifica-la.

Exemplo de funcao para verificar item selecionado

function TestaLista(elementto){if(elemento.value == ”Selecione um valor”){

alert(”Selecione um opcao abaixo!”);elemento.focus(); return false;

}else {

return true;}

}



InnerHTML


Eventos onClick

Exemplo de lista

<form>

Lista: <select id=’selection’><option>Please Choose</option>

<option>CA</option>

</select><input type=’button’onclick=”TestaLista(document.getElementById(’selection’))”value=’Verifica Campo’ /></form>



InnerHTML


Eventos on Submit

Com o evento onSubmit iremos validar campos de umformulario.

Exemplo de formulario a ser validado

<form onsubmit=’return valida form()’ >

Nome: <input type=’text’ id=’nome’ /><br />Telefone: <input type=’text’ id=’telefone’ /><br />Turno: <select id=’turno’><option>Selecione turno</option>

<option>Manha</option>

<option>Noite</option>

</select><br/><input type=’submit’ value=’Verifica Dados’ /></form>



InnerHTML


Eventos onSubmit

Funcao que valida formulario

function valida form(){var nome = document.getElementById(’nome’);var telefone = document.getElementById(’telefone’);var turno = document.getElementById(’turno’);if(TestaPalavra(nome) == false) return false;if(TestaNumero(telefone) == false) return false;if(TestaLista(turno) == false) return false;return true;

}



InnerHTML

InnerHTML

O atributo InnerHTML nos permite alterar conteudo de umapagina em html.

Uso de InnerHTML

<script type=”text/javascript”>function MudaTexto(){

document.getElementById(’campo’).innerHTML =’Novo Texo’;

}</script><p>Mudando o texto com InnerHTML<b id=’campo’>TextoOriginal</b> </p>

<input type=’button’ onclick=’MudaTexto()’ value=’Mudar oTexto’/>



InnerHTML

InnerHTML

Podemos usar o prompt box para entrar dados e mudar otexto.

InnerHTML com prompt box

<script type=”text/javascript”>function MudaTexto(){

var texto =document.getElementById(’texto’).value;

document.getElementById(’campo’).innerHTML =texto;

}



InnerHTML

InnerHTML

InnerHTML com prompt box

</script><p>Mudando o texto com InnerHTML<b id=’campo’>TextoOriginal</b></p>

<input type=’text’ id=’texto’ value=’Digite algo’ /><input type=’button’ onclick=’MudaTexto()’ value=’Mudar oTexto’/>


Date post:	23-Jul-2020
Category:	Documents
Upload:	others
View:	5 times
Download:	0 times

Constru o de Sites Aula 6 - UFPR · Eventos onLoad e onUnload Eventos com JavaScript Os eventos...

Documents