12. INTERAGIR COM O USUÁRIO

A interacção com o usuário se dá através de objectos para entrada de dados (textos), marcação de opções (radio, checkbox e combo), botões e link’s para outras páginas.

Conceitualmente, os objectos são divididos em: Input, Textarea e Select.

O objecto Input divide-se (propriedade Type) em:

Password

Text

Hidden

Checkbox

Radio

Button

Reset

Submit

A construção destes objectos é feita pela linguagem HTML (HiperText Mark-up Language). Portanto, é aconselhável que sejam criados utilizando-se ferramentas de geração de páginas HTML, como o HotDog ou, mais recomendado, FrontPage.

Objecto Input TEXT:

É o principal objecto para entrada de dados.

As suas principais propriedades são: type, size, maxlength, name e value.

type=text : especifica um campo para entrada de dados normal.

size : especifica o tamanho do campo na tela.

maxlength : especifica a quantidade máxima de caracteres permitidos.

name : especifica o nome do objecto.

value : armazena o conteúdo do campo.

Os eventos associados a este objecto são: onchange, onblur, onfocus e onselect.

Ex.:

<p>Entrada de Texto <input type=text size=20 maxlength=30 name= "CxTexto "

value= " " onchange= "alert (‘Voce digitou ‘ + CxTexto.value) ">

</p>

</form>

Objecto Input PASSWORD:

É o objecto para entrada de Senhas de acesso (password). Os dados digitados neste objecto são criptografados e, só são interpretados (vistos) pelo " server ", por razões de segurança. As suas principais propriedades são: type, size, maxlength, name e value.

type=password : especifica um campo para entrada de senha. Os dados digitados são substituídos (na tela) por " * ".

size : especifica o tamanho do campo na tela.

maxlength : especifica a quantidade máxima de caracteres permitidos.

name : especifica o nome do objecto

value : armazena o conteúdo digitado no campo.

Os eventos associados a este objecto são: onchange, onblur, onfocus e onselect.

Ex.:

<p>Entrada de Senha<input type=password size=10 maxlength=10 name= "Senha " value= " ">

</p>

</form>

Objecto Input HIDDEN:

É um objecto semelhante ao input text, porém, invisível para o usuário. Este objecto deve ser utilizado para passar informações ao " server " (quando o formulário for submetido) sem que o usuário tome conhecimento. As suas propriedades são: name e value.

name : especifica o nome do objecto.

value : armazena o conteúdo do objecto

Ex.:

</form>

</p>

Objecto Input CHECKBOX:

São objectos que permitem ao usuário ligar ou desligar uma determinada opção. As suas principais propriedades são: name, value e checked.

name : especifica o nome do objecto.

value : especifica o valor que será enviado ao " server " se o objecto estiver ligado (checked). Caso seja omitido, será enviado o valor default " on " . Esta propriedade também serve para activar comandos lógicos, testando-se a condição de " checked ".

checked : especifica que o objecto inicialmente estará ligado

O único evento associado a este objecto é onclick.

Ex.: no exemplo abaixo, criaremos um objecto input.text e três objectos checkbox. O primeiro checkbox, quando activado, transformará o texto em caracteres minúsculos. O segundo checkbox, quando activado, transformará o texto em caracteres maiúsculos. O terceiro checkbox, quando activado, dará um aviso do conteúdo que será recebido pelo " server " caso o formulário seja submetido para este.

function AltMaiusc () {

document.TCheck.Muda.value = document.TCheck.Muda.value.toUpperCase()

document.TCheck.Opt1.checked = false

}

function AltMinusc () {

document.TCheck.Muda.value = document.TCheck.Muda.value.toLowerCase()

document.TCheck.Opt2.checked = false

}

</SCRIPT>

<p>

Muda Case <input type=text size=20 maxlength=20 name= "Muda "> </p>

<p>

Minusculo<input type=checkbox name= "Opt1 " value= "1 " checked

onclick= "if (this.checked)

{ AltMinusc() } " >

Maiusculo<input type=checkbox name= "Opt2 " value= "2 "

onclick= "if (this.checked)

{ AltMaiusc() } " >

Demo valor<input type=checkbox name= "Opt3 "

onclick= "if (Opt3.checked)

{alert (‘Server recebera = ‘ + Opt3.value) } " >

</p>

</form>

Existe ainda uma outra forma de manipular este objecto, em forma de array, que é a seguinte:

form.elements[index].propriedade. Esta não é uma boa forma porque o index é único dentro de um formulário, exigindo muito cuidado quando se acrescenta ou se apaga um objecto, pois, neste caso, haverá um natural deslocamento do index, podendo comprometer a lógica.

Objecto Input RADIO:

São objectos que permitem ao usuário a escolha de apenas uma alternativa, diante de uma série de opções. As suas principais propriedades são: name, value e checked.

name : especifica o nome do objecto. Para caracterizar uma mesma série de opções, todos os objectos desta série têm que ter o mesmo " name ".

checked : especifica que o objecto inicialmente estará ligado. Para utilização deste objecto é importante o conhecimento de outras propriedades associadas:

Objecto.length : retorna a quantidade de opções existentes na lista.

Objecto.[index].value : retorna o texto (value) associado a cada opção.

Objecto.[index].checked : retorna verdadeiro ou falso.

O único evento associado a este objecto é onclick.

Ex.: no exemplo em baixo temos dois set’s de objectos radio. O primeiro tem o objectivo de mudar a cor de fundo do documento atual. O segundo tem o objectivo levar informações ao " server ".

<p>Radio</p>

<p> <input type=radio name= "Rad " value= "1 "

onclick= "document.bgColor=’green’ "> Fundo Verde

<input type=radio name= "Rad " value= "2 "

onclick= "document.bgColor=’blueviolet’ "> Fundo Violeta

<input type=radio name= "Rad " value= "3 "

onclick= "document.bgColor=’#FFFF00’ "> Fundo Amarelo

</p>

<p>

<input type=radio name= "Rad2 " value= "1 "> Solteiro

<input type=radio name= "Rad2 " value= "2 "> Casado

<input type=radio checked name= "Rad2 " value= "3 "> Tico Tico

</p>

Objecto Input BUTTON:

Este objecto tem por finalidade criar um botão ao qual se possa atrelar operações lógicas, a serem executadas quando o mesmo receber um click. As suas propriedades são: name e value.

name : especifica o nome do objecto.

value : especifica o nome que aparecerá sobre o botão.

O único evento associado a este objecto é onclick.

Ex.:

Digite um Texto <input type=text size=30 maxlength=30 name= "Teste " value= " ">

</p><p>

Click no Botao <input type=button name= "Bteste " value= "Botao de teste "

onclick= "alert (‘Voce digitou: ‘ + TstButton.Teste.value) ">

</form>

Objecto Input RESET:

Este objecto é um botão que tem por finalidade, única, limpar os campos digitados pelo usuário, restaurando o conteúdo do formulário para os valores iniciais. É recomendável a utilização deste objecto, para facilitar o usuário a limpar as suas informações, uma vez que a utilização da opção " reload " do " browser " (que seria uma forma) não perde as informações digitadas. As suas propriedades são: name e value.

name : especifica o nome do objecto.

value : especifica o nome que aparecerá sobre o botão.

O único evento associado a este objecto é onclick.

Ex.:

Digite um Texto<input type=text size=10 maxlength=20 name= "Teste " value= " ">

Apague o Texto <input type=reset name= "Bres " value= "Reset ">

</form>

Objecto Input SUBMIT:

Este objecto é um botão que tem por finalidade submeter (enviar) o conteúdo dos objectos do formulário ao " server ". O formulário será submetido à URL especificada na propriedade " action " do formulário. As suas propriedades são: name e value.

name : especifica o nome do objecto.

value : especifica o nome que aparecerá sobre o botão

O único evento associado a este objecto é onclick. Embora se possa atrelar lógica a este evento, não se pode evitar que o formulário seja submetido, portanto, não é aconselhável o seu uso. Mais seguro e mais útil é a utilização da propriedade onSubmit do formulário. Este permite que se atrele lógica e decida-se pela submissão ou não.

Ex.:

function TestaVal() {

if (document.TesteSub.Teste.value == " ") {

alert ( "Campo nao Preenchido...Form nao Submetido ")

return false }

else {

alert ( "Tudo Ok....Form Submetido ")

return true } }

</script>

<p>

<form method= "POST " name= "TesteSub "

onSubmit= "return TestaVal() "

action= "http://10.0.5.2/scripts/isapielo.dll/vbloja.loja.action ">

Digite um Texto <input type=text size=10 maxlength=10 name= "Teste " value= " ">

Botao Submit <input type=submit name= "Bsub " value= "Manda p/Server ">

</p>

</form>

No exemplo acima, o formulário está sendo submetido ao URL " 10.0.5.2 " (que é o endereço IP de um " Server "). Este servidor está rodando o " Microsoft Internet Information Server ". Estamos enviando os dados a um " OLE ", que está no subdiretório " scripts ", chamado " isapielo.dll ", que tem por objectivo fazer a conecção com aplicações escritas em VB. A aplicação VB que está sendo chamada, é um OLE de nome " vbloja " no qual estamos accionando a classe " loja " e o método " action ".

A aplicação VB, deste exemplo, fará apenas a devolução dos dados recebidos pelo Server.

Objecto TEXTAREA:

É um objecto para entrada de dados em um campo de múltiplas linhas. As suas principais propriedades são: name, rows e cols.

name : especifica o nome do objecto.

rows : especifica a quantidade de linhas que aparecerão na tela.

cols : especifica a quantidade de caracteres que aparecerão em cada linha value : acessa o conteúdo do campo via programação.

Os eventos associados a este objecto são: onchange, onblur, onfocus e onselect.

Ex.:

<p>

Texto de Múltiplas Linhas <textarea name= "MultText " rows=2 cols=40>

Primeira linha do texto inicial

segunda linha do texto inicial

</textarea>

</p>

Objecto SELECT:

É um objecto para entrada de opções, onde o usuário, a partir de uma lista de alternativas, selecciona uma ou mais opções. As suas principais propriedades são: name, size, value e multiple.

name : especifica o nome do objecto.

size : especifica a quantidade de opções que aparecerão na tela simultaneamente.

value : associa um valor ou string para cada opção (opcional).

multiple : especifica a condição de múltipla escolha (usando-se a tecla Ctrl).

Para utilização deste objecto é importante o conhecimento de outras propriedades associadas:

Objecto.length : retorna a quantidade de opções existentes na lista.

Objecto.selectedindex : retorna o " index " do objecto selecionado (primeiro = 0).

Objecto.options[index].text : retorna o texto externo associado a cada opção.

Objecto.options[index].value : retorna o texto interno (value) associado a cada opção.

Objecto.options[index].selected : retorna verdadeiro ou falso.

Os eventos associados a este objecto são: onchange, onblur e onfocus.

Ex1.:

Neste exemplo é importante observar os seguintes aspectos:

a) A lista permite apenas uma selecção

b) A quarta opção aparecerá inicialmente seleccionada (propriedade " selected ")

c) Não utilizamos a propriedade " value ". Assim, a propriedade " text " e a propriedade " value " passam a ter o mesmo valor, ou seja, o valor externo que aparece na tela.

function Verselect(Campo) {

Icombo = Campo.selectedIndex

alert ( "Voce escolheu " + Campo.options[Icombo].text) }

</script>

<p>

Objecto Select <select name= "Combo1 " size=1 onchange= "Verselect(Combo1) ">

<option>Opcao 1

<option>Opcao 2

<option>Opcao 3

<option selected>Opcao 4 (recomendada)

<option>Opcao 5

<option>Opcao 6

</select>

</p>

Ex2.:

Neste exemplo é importante observar os seguintes aspectos:

a) A lista permite múltiplas selecções.

b) Utilizamos a propriedade " value ". Assim as propriedades " text " e " value " têm valores diferentes: text retornará Escolha 1 a Escolha 4 e value retornará List1 a List4.

c) O parâmetro passado, quando da ocorrência do evento onblur, foi this.

Esta directiva significa que estamos passando este objecto.

function Vermult(Lista) {

var opcoes = " "

for (i = 0 ; i < Lista.length ; i++) {

if (Lista.options[i].selected) {

opcoes += (Lista.options[i].value + " , " ) }

}

alert ( "As opcoes escolhidas foram : " + opcoes) }

</script>

<p>

Objecto Select2 <select name= "Combo2 " size=4 multiple onblur= "Vermult(this) ">

<option value= "List1 ">Escolha 1 </option>

<option value= "List2 ">Escolha 2 </option>

<option value= "List3 ">Escolha 3 </option>

<option value= "List4 ">Escolha 4 </option>

</select>

</p>

VOLTAR