Programação para Internet Rica– Aula 06 Prof. Me. Ronnison Reges Vidal 1
CONTEÚDO Unidade 7 – JavaScript Caixas de Diálogo Funções Eventos 2
JavaScript Caixas de diálogo JavaScript possuí três tipos de caixas de popup: Alert box Confirm box Prompt box 3
JavaScript Alert Box É uma caixa de alerta que é freqüentemente usada quando você quer retornar uma informação para o usuário. Quando uma caixa de alerta aparece na tela, o usuário terá de clicar em "OK" para prosseguir. Sintaxe alert ("texto da mensagem"); 4
JavaScript Exemplo: <html> <head> <script type="text/javascript"> alert ("Eu sou uma caixa de alerta!"); </script> </head> <body> </body> </html> 5
JavaScript Confirm box É freqüentemente usada quando você quiser que o usuário verifique ou aceite algo. Quando uma caixa de confirmação aparece, o usuário terá que clicar em "OK" ou "Cancelar" para continuar. Se o usuário clicar em "OK", caixa retorna true. Se o usuário clica em "Cancelar", caixa retorna false. Sintaxe Confirm ("texto da mensagem"); 6
JavaScript Exemplo: <html> <head> <script type="text/javascript"> var r = confirm ("Aperte um botão"); if (r == true) ( alert ("Você pressionou OK!"); ) else alert ("Você pressionou Cancelar!"); </script> </head> <body> </body> </html> 7
JavaScript Prompt Box É freqüentemente usado quando você deseja capturar alguma informação fornecida pelo usuário antes de entrar em uma página. Quando uma caixa de prompt aparece na tela, após introduzir um valor de entrada, o usuário terá que clicar em "OK" ou "Cancel" para continuar. Se o usuário clicar em "OK" o valor da caixa de entrada é retornado. Se o usuário clica em "Cancel" o valor null é retornado. 8
JavaScript Funções Funções em JavaScript nada mais são que uma rotina JavaScript que possui um conjunto de instruções à serem executadas. Sua sintaxe compõem-se dos seguintes parâmetros: function nomeFunção(argumentos) { Comandos } Uma função contém código que será executado por um evento ou por uma chamada para a função. 9
JavaScript Funções Você pode chamar uma função em qualquer lugar dentro de uma página (ou até mesmo de outras páginas, se a função for incorporado de um arquivo externo. (arquivo .js). Funções podem ser definidas tanto no <head> como na seção <body> de um documento. No entanto, para assegurar que uma função será lida/carregada pelo browser antes que ele seja chamada, ela deve ser colocada na seção <head>. 10
JavaScript Exemplo: <html> <head> <script type="text/javascript"> function displaymessage() { alert("Olá mundo!"); } </script> </head> <body> <form> <input type="button" value="Click aqui!" onclick="displaymessage()" /> </form> </body> </html> 11
JavaScript Eventos Eventos são ações que podem ser detectadas pelo JavaScript. Através do JavaScript nós temos a habilidade de criar paginas dinâmicas. Todos os Elementos de uma página web possui eventos que podem ser disparados através do JavaScript. Por exemplo nós podemos utilizar o evento onClick do elemento button para indicar que uma função irá rodar quando um usuário clicar no botão. Os eventos devem ser definidos nas tags HTML. Os eventos normalmente são usados em combinação com funções, e as funções não serão executadas antes de ocorrerem os eventos. 12
JavaScript Eventos onLoad e onUnload O onLoad e onUnload são eventos disparados quando o usuário entra e sai da página respectivamente. O evento onLoad pode ser usado para checar o tipo e a versão do navegador do usuário, e carregar assim, a versão apropriada da página web baseada nessas informações. Os eventos onLoad e onUnLoad também podem ser utilizados para criar e destruir cookies 13
JavaScript Eventos onFocus, onBlur e onChange Os eventos onFocus, onBlur e onChange são usados em combinação com a validação de campos nos formulários. Por exemplo o evento onChange poderia ser chamado para validar um e-mail ou um número CPF enquanto o usuário altera o conteudo deste campo. <input type="text" size="30" id="email" onchange="checkEmail()"> <input type="text" size="30" id="CPFl" onchange="validaCPF()"> 14
JavaScript Eventos onMouseOver and onMouseOut Os eventos onMouseOver e onMouseOut são disparados quando passamos o mouse por cima de um elemento e retiramos o mouse de cima do elemento respectivamente. Estes eventos podem ser usados para criar botões animados. Exemplo: uma caixa de alerta é disparada quando passamos o mouse por cima da imagem. <a href="http://www.google.com" onmouseover="alert('o evento foi detectado!');return false"><img src="img.gif" alt="imagem" /></a> 15
JavaScript Exemplo 16