Aula_09

Esta é uma pré-visualização de arquivo. Entre para ver o arquivo original

DESENVOLVIMENTO DE SISTEMAS WEB
Prof. Jorge Ferreira
Aula 9
Conteúdo Programático desta aula
Validação de dados obrigatórios;
Document Object Model (DOM);
Críticas de campos multivalorados;
Uso de elementos HIDDEN.
2
Abrir uma Janela Secundária
<script>
 window.open(“http://www.google.com”,””,”width=550,height=420,
menubar=no”)
</script>
3
Uma mensagem de boas vindas
<script>
 
window.alert(“Bem vindo ao site web…”)
</script>
4
Exibir a data atual
<script>
document.write(new Date())
</script>
5
Link para voltar à página anterior
<a href=“javascript:history.go(-1)”>Voltar</a>
6
document.write()
Escreve dentro da página web.
Podemos escrever tags HTML e texto normal.
7
DOM - Eventos
Os eventos são maneiras que temos em JavaScript para controlar as ações dos visitantes e definir um comportamento da página quando se produz.
Quanto um usuário visita uma página web e interage com ela, se produz eventos e com JavaScript podemos definir o que queremos que ocorra.
8
DOM - onabort
Este evento se produz quando um usuário detém a carga de uma imagem, seja porque detém a carga da página ou porque realiza uma ação que a detém, como por exemplo sair da página.
9
DOM - onblur
Aplica-se um evento onblur quando um elemento perde o foco da aplicação. O foco da aplicação é o lugar onde está situado o cursor, por exemplo, pode estar situado sobre um campo de texto, uma página, um botão ou qualquer outro elemento.
10
DOM - onchange
Aplica-se este evento quando muda o estado de um elemento de formulário, às vezes não se produz até que o usuário retire o foco da aplicação do elemento.
11
DOM - onclick
Produz-se quando se clica o botão de mouse sobre um elemento da página, geralmente um botão ou um link.
12
DOM - onfocus
O evento onfocus é o contrário de onblur. Profuz-se quando um elemento da página ou a janela ganham o foco da aplicação.
13
Criando um primeiro Projeto em Java
Vamos Praticar
14
Formulário
<form name= “contato"action = “" method=“post">
 <fieldset>
 <legend>Envie seu contato:</legend>
 <label>
 <span>Nome:</span>
 <input type=“text" name=“nome" value=“Informe seu nome”/>
 </label>
 <label>
 <input type=“submit" value=“Envir" class=“btn"/>
 </label>
 </fieldset>
</form>
15
Formulário
16
onclick
<span>Nome:</span>
<input type=“text" name = “nome" value=“Informe seu nome”
onclik = “
 this.style.background=‘#fff’,
 if(this.value==‘Informe seu nome’ | this.value== ‘Nome é inválido’){
	this.value = ‘ ‘;
}
"
17
Formulário
18
onblur
onblur= "
 if(this.value == ''){
 this.value = 'Informe seu nome',
 this.style.background='#ffa6a6',
 this.style.borderColor='#ff0000',
 } 
 
 “
19
Formulário
20
onchange
onchange = "
 if(this.value.length < 10){
 this.value = 'Nome é inválido',
 this.style.background='#ffa6a6',
 this.style.borderColor='#ff0000',
 }else{
 this.style.background='#ff97b1',
 this.style.borderColor='#00ff00',
 }
 "
21
Formulário
22
onchange
<?php
 if(isset($cod))
 {
 echo "<input type='hidden' id='cod' value='$cod' />";
 }
 else
 {
 echo "<input type='hidden' id='cod' value='000' />";
 }
 ?>
 
<script>
 var cod = document.getElementById('cod').value;
 alert(cod);
 </script>
23
Resumindo
Validação de dados obrigatórios;
Document Object Model (DOM);
Críticas de campos multvalorados;
Uso de elementos HIDDEN.
24