COM222 DESENVOLVIMENTO DE SISTEMAS WEB. Aula 03: JavaScript Parte II

Transcrição

1 COM222 DESENVOLVIMENTO DE SISTEMAS WEB Aula 03: JavaScript Parte II

2 Conteúdo da aula Programação controlada por eventos e processamento de formulários Programação controlada por eventos onload, onunload Formulários HTML button, text box, text area selection list, radio button, check box, password, hidden, Eventos de formulário JavaScript propriedades: name, type, value, métodos: blur(), focus(), click(), event handlers: onblur(), onfocus(), onchange(), onclick(), Técnicas e funcionalidade avançadas windows, timeouts, cookies

3 Programação Controlada por Eventos Em Java e C++ programas são executados sequencialmente Começam na função main e executam sequencialmente a partir do primeiro comando Podem executar laços e pular sequências de código, mas o programa executa passo a passo O programador especifica a sequência na qual a execução ocorre (com alguma variação decorrente da entrada de dados) Há claramente início e fim da execução do programa A computação em páginas Web é raramente sequencial. Ao contrário, a página reage a eventos tais como cliques de mouse, etc. Boa parte da utilidade do Javascript está em especificar ações que ocorrem na página como resultado de algum evento O programador tem pouco ou nenhum controle sobre quando um código será executado, por exemplo, código que reage a um clique sobre um botão Não há sequência, a página espera por eventos e reage

4 OnLoad e OnUnload <html> <! - form01.html --> <head> <title>página Olá / Até logo</title> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <script type="text/javascript"> function Hello() { globalname=prompt("bem vindo a minha página. Qual é o seu nome?",""); function Goodbye() { alert("até logo, " + globalname + " volte em breve."); </head> Os eventos mais simples ocorrem quando as páginas são carregadas e descarregadas O atributo onload da tag <body> especifica o código JavaScript que é automaticamente executado quando a página é carregada O atributo onlunload, similarmente, especifica o código que é automaticamente executado quando o nagegador deixa a página <body onload="hello();" onunload="goodbye();"> <p>um texto qualquer aparece na página.</p> </body> </html>

5 Formulários HTML Boa parte do gerenciamento de eventos em JS está associado a formulários Um formulário HTML é uma coleção de elementos para gerenciar entrada e saída de dados, além de outros tipos de interação nos elementos da página <form id="formname"> </form> Elementos de formulário são: Para input..: botão, lista de seleção, radio button, check box, password, Para input/output...: text box, text area,

6 HTML forms (cont.) document.forms[ ] é um array que contém elementos para cada formulário de uma página. Deve-se usar o "id" associado ao formulário como índice neste array Pode-se também usar a seguinte sintaxe document.forms[0] para acessar o primeiro formulário da página (e indíces maiores para acessar outros formulários, se existir mais de um). Usando esse mecanismo, é possível acessar outros elementos HTML do form (usando os ids desses elementos). Páginas HTML são armazenadas como uma hierarquia de releacionamentos pai/filho. É possível explorar essa hierarquia para acessar os elementos da página

7 Botão O elemento mais simples de um form é um botão Análogo a um botão do mundo real. Clique é usado para disparar eventos. <input type="button" value="label" onclick="javascript_code" /> <html> <! - form02.html --> <head> <title> Manipulando botões </title> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <script type="text/javascript > src=" </head> <body> <form id="buttonform"> <p> <input type="button" value= "Cique para obter nro da sorte" onclick="var num = randomint(1, 100); alert('o nro da sorte para hoje é ' + num);" /> </p> </form> </body> </html>

8 Botões e Funções <html> <! - form03.html --> <head> <title>manipulando botões</title> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <script type="text/javascript"> function Greeting() { var now = new Date(); if (now.gethours() < 12) { alert("bom dia"); else if (now.gethours() < 18) { alert("boa tarde"); else { alert("boa noite"); </head> <body> <form id="buttonform"> <p> <input type="button" value="clique aqui" </form> </body> </html> onclick="greeting();" /> </p> Para tarefas complexas, podemos definir funções e fazer com que o evento onclick dispare a execução da função

9 Botões e Janelas Caixas de alerta são úteis para mostrar mensagens curtas e pouco frequentes Não são adequadas para mostrar texto longo e formatado Caixa não é integrada à página, requer que o usuário explicitamente feche a caixa PERGUNTA: seria possível usar o comando document.write nos exemplos anteriores? NÃO -- isso iria sobrepor a página corrente Mas poderia abrir uma nova janela do browser e e colocar mensagens nela var OutputWindow = window.open(); OutputWindow.document.open(); OutputWindow.document.write("ALGUMA COISA"); OutputWindow.document.close(); // abre uma janela e atribui // um nome a janela // abre a janela para // escrita // escreve texto na // janela // fecha a janela

10 <html> <!- form04.html --> Manipulação de Janela <head> <title> Manipulando janelas </title> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <script type="text/javascript"> function Help() // Resultado: Mostra uma mensagem de ajuda numa janela separada { var OutputWindow = window.open(); OutputWindow.document.open(); OutputWindow.document.write("Esta é uma janela de ajuda. "); </head> <body> <form id="buttonform"> <p><input type="button" value="click for Help" onclick="help();"/> </p> </form> </body> </html>

11 Manipulação de Janela 2 <html> <!- form05.html --> <head> <title> Manipulando janelas </title> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <script type="text/javascript"> function Help() // Resultado: Mostra uma mensagem de ajuda numa 2a janela { var OutputWindow = window.open("", "", "status=0,menubar=0,height=200,width=200"); OutputWindow.document.open(); OutputWindow.document.write("Esta é uma janela de ajuda. "); </head> <body> <form id="buttonform"> <p> <input type="button" value="click for Help" onclick="help();" /> </p> </form> </body> </html> window.open pode ter argumentos 1 arg especifica HREF 2 arg especifica nome interno 3 arg especifica propriedades da janela (tamanho, por exemplo)

12 Caixas de Texto Permite entrada de dados (e também saída) Diferentemente de prompt, caixas de texto tipo input persistem na tela e podem ser editadas <input type="text" id="box_name" name="box_name" /> Atributos opcionais: size : tamanho da caixa (número de caracteres) value: conteúdo inicial da caixa Código JS pode acessar o conteúdo do exemplo abaixo com o comando document.forms['boxform'].username.value <html> <!- form06.html --> <head> <title> Manipulando caixas de texto </title> <meta http-equiv="content-type" content="text/html; charset=utf-8"> </head> <body> <form id="boxform"> <p> <label for="username">digite seu nome:</label> <input type="text" id="username" size="12" value="" /> <br /><br /> <input type="button" value="click Me" onclick="alert('obrigado, ' + document.forms['boxform'].username.value + </form> </body> </html> ', eu precisava de um clique.');" /> </p>

13 Caixas de texto de escrita / leitura Pode-se mudar o conteúdo de uma caixa de texto com uma atribuição de valor Nota: conteúdo deve ser texto puro, sem formatação HTML Mais: conteúdo é acessado como String, deve-se fazer parsefloat our parseint para obter um valor numérico <html> <!- form07.html --> <head> <title> Manipulando caixas de texto </title> <meta http-equiv="content-type" content="text/html; charset=utf-8"> </head> <body> <form id="boxform"> <p> <label for="number">digite um número:</label> <input type="text" size="12" id="number" value="2" /> <br /><br /> <input type="button" value="double" onclick="document.forms['boxform'].number.value= parsefloat(document.forms['boxform'].number.value) * 2;" /> </p> </form> </body> </html>

14 Eventos de caixas de texto <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <title> Fun with Text Boxes </title> <script type="text/javascript"> function FahrToCelsius(tempInFahr) // Assume: tempinfahr é um números(graus Fahrenheit) // Returna: temperatura correspondente em graus Celsius { return (5 / 9) * (tempinfahr - 32); </head> <body> <form id="boxform"> <p> <label for="fahr">temperatura em Fahrenheit:</label> <input type="text" id="fahr" size="10" value="0" onchange="document.forms['boxform'].celsius.value = FahrToCelsius(parseFloat(document.forms['BoxForm'].Fahr.value));"> <tt>----></tt> <input type="text" id="celsius" size="10" value="" onfocus="blur();"> em Celsius </p> </form> </body></html> onchange diparado quando o conteúdo da caixa de texto muda onfocus disparado quando ocorre o clique na caixa de texto blur() remove o foco

15 Validação de caixa de texto O que acontece se o usuário digitar um valor não numérico para a temp.? Solução: caixa de texto deve validar seu conteúdo Comece com um valor permitido (ou uma caixa de texto vazia) No evento onchange, verifique se novo valor é permitido (caso contrário, limpe a caixa) A biblioteca verify.js define várias funções de validação function VerifyNum(textBox) // Assume: textbox é uma caixa de texto // Retorna: verdadeiro se a caixa de texto contém um nro { var boxvalue = parsefloat(textbox.value); if ( isnan(boxvalue) ) { alert("você deve digitar um nro válido!"); textbox.value = ""; return false; return true; // ** isnan function

16 Exemplo de validação <html> <!- form09.html --> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <title> Fun with Text Boxes </title> <script type="text/javascript" src=" <script type="text/javascript"> function FahrToCelsius(tempInFahr){ return (5/9)*(tempInFahr - 32); </head> <body> <form id="boxform"> <p> <label for="fahr">temperatura em Fahrenheit:</label> <input type="text" id="fahr" size="10" value="0" onchange="if (VerifyNum(this)) { document.forms['boxform'].celsius.value = FahrToCelsius(parseFloat(this.value)); " /> <tt>----></tt> <input type="text" id="celsius" size="10" value="" onfocus="blur();" /> em Celsius </form> </body> </html> </p>

17 Text Areas Uma caixa de texto limita-se a uma linha de input / output Uma TEXTAREA é similar a uma caixa de texto, mas permite especificar um número arbitrário de linhas e colunas <textarea id="textareaname" rows="numrows" cols="numcols"> Texto inicial </textarea> Nota: diferentemente de um text box, uma TEXTAREA deve ter uma tag de fechamento separada. O conteúdo TEXTAREA da aparece entre as tags de abertura e fechamento Como acontece nas caixas de texto, não é permitido utilizar formatação HTML numa TEXTAREA

18 Exemplo TEXTAREA <html>  <head> <title> Manipulando Text Areas </title> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <script type="text/javascript" src=" <script type="text/javascript"> function Table(low, high, power) { var message = "i: i^" + power + "\n \n"; for (var i = low; i <= high; i++) { message = message + i + ": " + Math.pow(i, power) + "\n"; document.forms['areaform'].output.value = message; </head> <body> <form id="areaform"> <div style="text-align: center;"> <p> Mostra nros de <input type="text" id="lowrange" size="4" value="1" onchange="verifyint(this);" /> até <input type="text" id="highrange" size="4" value="10" onchange="verifyint(this);" /> elevados a potência de <input type="text" id="power" size=3 value=2 onchange="verifyint(this);" /> <br /> <br /> <input type="button" value="gerar tabela" onclick="table(parsefloat(document.forms['areaform'].lowrange.value), parsefloat(document.forms['areaform'].highrange.value), parsefloat(document.forms['areaform'].power.value));" /> <br /> <br /> <textarea id="output" rows="20" cols="15"></textarea> </p> </div> </form> </body> </html>

19 Melhor abordagem para acessar dados Até agora, estamos acessando campos de entradas de dados explorando a estrututa de árvore provida pelo Document Object Model (DOM) O que ocorre se alguém alterar a estrutura do docto HTML? Se, por exemplo, o nome do form mudar, seus elementos não poderão ser acessados Uma forma mais robusta de acessar os elementos de uma página consiste em atribuir um ID para cada elemento da página e o usar o método getelementbyid Cada item da página (campos de texto, text areas, etc.) devem receber um identificador único

20 Usando getelementbyid <html> <! form11.html --> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <title> Fun with Text Boxes </title> <script type="text/javascript" src=" <script type="text/javascript"> function FahrToCelsius(tempInFahr) { return (5/9)*(tempInFahr - 32); </head> <body> <form id="boxform"> <p><label for="fahr">temperatura em Fahrenheit:</label> <input type="text" id="fahr" size="10" value="0" onchange="if (VerifyNum(this)) { var F=document.getElementById('Fahr'); var C=document.getElementById('Celsius'); C.value = FahrToCelsius(parseFloat(F.value)); " /> <tt>----></tt> <input type="text" id="celsius" size="10" value="" onfocus="getelementbyid('fahr').focus();" /> em Celsius </p> </form> </body> </html>

21 Check boxes Um check box é uma lista de itens na qual um ou mais itens podem ser selecionados. É fácil criar check box em HTML, basta usart o elemento de entrada de dados "checkbox" Dê um nome ao checkbox e use esse nome para inserir elementos no checkbox O conjunto de checkboxes são armazenados internamente como um array.

22 </body> </html> Checkbox - exemplo <html> <!- form12.html --> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <title> Check Boxes </title> <script type="text/javascript"> function processcb() { var boxes = document.forms['boxform'].cb.length; var s=""; for (var i = 0; i < boxes; i++) { if (document.forms['boxform'].cb[i].checked) { s = s + document.forms['boxform'].cb[i].value + " "; if (s == "") { s = "nada"; alert("você selecionou" + s); </head> <body> <form id="boxform"> <p>quais dessas coisas são insuportávies (selecione uma ou mais)?<br/><br/> <input type="checkbox" name="cb" id="corrupcao" value="corrupcao" /> <label for=" Corrupcao ">Corrupção</label><br/> <input type="checkbox" name="cb" id="impostos" value="impostos" /> <label for="impostos">impostos</label><br/> <input type="checkbox" name="cb" id="sertanejo" value="sertanejo"/> <label for="sertanejo">sertanejo Universitário</label><br/> <br/> <input type="button" value="done" onclick="processcb()" /> </p> </form>

23 <html>  <head> <title> Check Boxes </title> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <script type="text/javascript"> function processcb() { var s=""; var cb=document.forms['boxform'].elements['cb']; for (var i = 0; i < cb.length; i++) { if (cb[i].checked) if (s == "") { s = s + cb[i].value + " "; { s = "nada"; Checkboxes Exemplo 2 alert("you selected " + s); </head> <body> <form id="boxform"> <p>quais dessas coisas são insuportávies (selecione uma ou mais)?<br/><br/> <input type="checkbox" name="cb" id="corrupcao" value="corrupcao" /> <label for=" Corrupcao ">Corrupção</label><br/> <input type="checkbox" name="cb" id="impostos" value="impostos" /> <label for="impostos">impostos</label><br/> <input type="checkbox" name="cb" id="sertanejo" value="sertanejo"/> <label for="sertanejo">sertanejo Universitário</label><br/> <br/> <input type="button" value="done" onclick="processcb()" /> </p> </form> </body> </html>

24 Radio buttons Radio buttons são similares aos check boxes, mas apenas um pode ser selecionado por vez. São definidos pela tag <input type="radio"> e acessados da mesma maneira.

25 Considere o formulário a seguir: Exercício Entrega: hoje

26 Exercício Entrega: hoje 1) Escreva funções JavaScript para validar a entrada de dados: a) Valide o campo idade: só pode conter números entre 10 e 90 b) Valide o , obrigando que a string contenha o símbolo c) Valide os check boxes, permitindo que no máximo 3 opções possam ser selecionadas 2) Exiba os dados colhidos do fomulário em uma nova página. Código do formulário está disponível em: