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

(1)

COM222

DESENVOLVIMENTO DE

SISTEMAS WEB

(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

(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

(4)

OnLoad e OnUnload

Os eventos mais simples

ocorrem quando as páginas

são carregadas e

descarre-gadas



O atributo

onload

da tag <body>

especifica o código JavaScript

que é automaticamente

executa-do quanexecuta-do a página é carregada



O atributo

onlunload

,

similarmen-te, especifica o código que é

automaticamente executado

quando o nagegador deixa a

página

<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.");

}

</script> </head>

<body onload="Hello();" onunload="Goodbye();"> <p>Um texto qualquer aparece na página.</p> </body>

(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)

• 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

<html>

<!–- form02.html --> <head>

<title> Manipulando botões </title>

<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>

• O elemento mais simples de um form é um botão



Análogo a um botão do mundo real. Clique é usado para disparar eventos.

(8)

Botões e Funções

<html>

<!–- form03.html --> <head>

<title>Manipulando botões</title>

{

var now = new Date();

if (now.getHours() < 12) { alert("Bom dia"); } else if (now.getHours() < 18) { alert("Boa tarde"); } else { alert("Boa noite"); } } </script> </head> <body> <form id="ButtonForm">

</form> </body> </html>

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(); // abre uma janela e atribui // um nome a janela

OutputWindow.document.open(); // abre a janela para // escrita

OutputWindow.document.write("ALGUMA COISA"); // escreve texto na // janela

(10)

Manipulação de Janela

<html>

<!-– form04.html -->

<head>

<title> Manipulando janelas </title>

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. ");

} </script> </head>

<body>

(11)

Manipulação de Janela 2

<html>

<!-– form05.html --> <head>

<title> Manipulando janelas </title>

// 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. "); }

</script> </head> <body>

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>

<head> <title> Manipulando caixas de texto </title>

<body>

<p> <label for="userName">Digite seu nome:</label> <input type="text" id="userName" size="12" value="" />

<input type="button" value="Click Me"

onclick="alert('Obrigado, ' + document.forms['BoxForm'].userName.value + ', eu precisava de um clique.');" /> </p> </form>

</body> </html>

(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>

<head>

<title> Manipulando caixas de texto </title>

<body>

<p> <label for="number">Digite um número:</label>

<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

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

function FahrToCelsius(tempInFahr)

// Assume: tempInFahr é um números(graus Fahrenheit) // Returna: temperatura correspondente em graus Celsius { return (5 / 9) * (tempInFahr - 32); } </script> </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));">

<input type="text" id="Celsius" size="10" value="" onfocus="blur();"> em Celsius

</p> </form> </body></html>

(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

http://www.baldochi.unifei.edu.br/COM222/verify.js

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) ) { // ** isNaN function alert("Você deve digitar um nro válido!");

textBox.value = ""; return false;

}

return true; }

(16)

Exemplo de validação

<html>

<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 </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

(18)

Exemplo TEXTAREA

<head> <title> Manipulando Text Areas </title>

src="http://www.baldochi.unifei.edu.br/COM222/verify.js"> </script>

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; } </script> </head> <body>

<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);" />

<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 />

</div> </form> </body> </html>

(19)

• 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>

<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)); }" />

<input type="text" id="Celsius" size="10" value="" onfocus="getElementById('Fahr').focus();" /> em Celsius </p>

(21)

•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)

Checkbox - exemplo

<html>

{ 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); } </script> </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)

<head> <title> Check Boxes </title>

function processCB()

{ var s=""; var cb=document.forms['BoxForm'].elements['cb']; for (var i = 0; i < cb.length; i++)

{ if (cb[i].checked) { s = s + cb[i].value + " "; } } if (s == "") { s = "nada"; } alert("You selected " + s); } </script> </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/>