constru o de sites aula 6 - ufpr · eventos onload e onunload eventos com javascript os eventos...
TRANSCRIPT
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
Eventos com JavaScriptEventos por id
InnerHTML
Indice
1 Eventos com JavaScriptEventos onLoad e onUnload
2 Eventos por idEventos onMouseOver e onMouseOutEventos onClickEventos onSubmit
3 InnerHTML
Programa Instrutor Construcao de SitesAula 6
Eventos com JavaScriptEventos por id
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;
Programa Instrutor Construcao de SitesAula 6
Eventos com JavaScriptEventos por id
InnerHTMLEventos onLoad e onUnload
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()”.
Programa Instrutor Construcao de SitesAula 6
Eventos com JavaScriptEventos por id
InnerHTMLEventos onLoad e onUnload
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>
Programa Instrutor Construcao de SitesAula 6
Eventos com JavaScriptEventos por id
InnerHTMLEventos onLoad e onUnload
Eventos onLoad e onUnload
Exemplo de Unload
<head><script>function msg saida(){
alert(”Volte sempre!”);}
</script></head>
<body onLoad = ”msg saida()”></body>
Programa Instrutor Construcao de SitesAula 6
Eventos com JavaScriptEventos por id
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”)
Programa Instrutor Construcao de SitesAula 6
Eventos com JavaScriptEventos por id
InnerHTML
Eventos onMouseOver e onMouseOutEventos onClickEventos onSubmit
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>
Programa Instrutor Construcao de SitesAula 6
Eventos com JavaScriptEventos por id
InnerHTML
Eventos onMouseOver e onMouseOutEventos onClickEventos onSubmit
Eventos onMouseOver e onMouseOut
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>
Programa Instrutor Construcao de SitesAula 6
Eventos com JavaScriptEventos por id
InnerHTML
Eventos onMouseOver e onMouseOutEventos onClickEventos onSubmit
Eventos onMouseOver e onMouseOut
Programa Instrutor Construcao de SitesAula 6
Eventos com JavaScriptEventos por id
InnerHTML
Eventos onMouseOver e onMouseOutEventos onClickEventos onSubmit
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;
}
Programa Instrutor Construcao de SitesAula 6
Eventos com JavaScriptEventos por id
InnerHTML
Eventos onMouseOver e onMouseOutEventos onClickEventos onSubmit
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>
Programa Instrutor Construcao de SitesAula 6
Eventos com JavaScriptEventos por id
InnerHTML
Eventos onMouseOver e onMouseOutEventos onClickEventos onSubmit
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;
}}
Programa Instrutor Construcao de SitesAula 6
Eventos com JavaScriptEventos por id
InnerHTML
Eventos onMouseOver e onMouseOutEventos onClickEventos onSubmit
Eventos onClick
Formulario a ser verificado
<form>
Somente numeros: <input type=’text’ id=’numbers’/><input type=’button’
on-click=”TestaNumero(document.getElementById(’numbers’),
’Apenas numeros’)”value=’Verifica campo’ />
</form>
Programa Instrutor Construcao de SitesAula 6
Eventos com JavaScriptEventos por id
InnerHTML
Eventos onMouseOver e onMouseOutEventos onClickEventos onSubmit
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;
}}
Programa Instrutor Construcao de SitesAula 6
Eventos com JavaScriptEventos por id
InnerHTML
Eventos onMouseOver e onMouseOutEventos onClickEventos onSubmit
Eventos onClick
Formulario a ser verificado
<form>
Digite uma palavra: <input type=’text’ id=’letras’/><input type=’button’
onclick=”TestaPalavra(document.getElementById(’letras’),’Apenas letras’)”value=’Verifica campo’ />
</form>
Programa Instrutor Construcao de SitesAula 6
Eventos com JavaScriptEventos por id
InnerHTML
Eventos onMouseOver e onMouseOutEventos onClickEventos onSubmit
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;}
}
Programa Instrutor Construcao de SitesAula 6
Eventos com JavaScriptEventos por id
InnerHTML
Eventos onMouseOver e onMouseOutEventos onClickEventos onSubmit
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>
Programa Instrutor Construcao de SitesAula 6
Eventos com JavaScriptEventos por id
InnerHTML
Eventos onMouseOver e onMouseOutEventos onClickEventos onSubmit
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>
Programa Instrutor Construcao de SitesAula 6
Eventos com JavaScriptEventos por id
InnerHTML
Eventos onMouseOver e onMouseOutEventos onClickEventos onSubmit
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;
}
Programa Instrutor Construcao de SitesAula 6
Eventos com JavaScriptEventos por id
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’/>
Programa Instrutor Construcao de SitesAula 6
Eventos com JavaScriptEventos por id
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;
}
Programa Instrutor Construcao de SitesAula 6
Eventos com JavaScriptEventos por id
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’/>
Programa Instrutor Construcao de SitesAula 6