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

<p>

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

</p>

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

<p>

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

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

</form>

</p>

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>

12. INTERAGIR COM O USUÁRIO

VOLTAR