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