ICC Turma D - UnB 2/04

Prática 6

1- Criação de Formulários em documentos html

Documentos html podem ser usados para a entrada de dados destinados a processamento por algum programa. Um programa em linguagem interpretada cujo código fonte pode compartilhar, com dados ou outros programas, o arquivo onde está armazenado (inclusive programas escritos em outras linguagens) é chamado de script.

Scripts na linguagem Javascript (linguagem que estaremos aprendendo nas aulas subsequentes) são exemplos de tais programas. Quando um srcipt Javascript estiver dentro de um documento html, compartilhando o arquivo com o código fonte da página web correspondente, diremos que o script é local. Caso contrário, diremos que o script é remoto. Nesse cursto estaremos praticando e vendo exemplos de scripts locais.

Um script geralmente recebe dados através de um formulário preenchido pelo visitante de uma página web. Um formulário, nesse caso, é um elemento da página formado por uma instância da diretiva <form>...</form> (formulário, em inglês). Um script local geralmente recebe dados de um formulário que está no mesmo documento html. Um documento html pode conter mais de um script e mais de um formulário, mas não pode conter um formulário dentro de outro formulário, nem um script Javascript dentro de outro script Javascript.

Em jargão html, um formulário é portanto um elemento de um documento html (circunscrito pelo "abre e fecha form") que, além das diretivas eventualmente usadas para formatação e legendas (dados textuais), contêm elementos chamados controles, através dos quais usuários da página podem fornecer dados a scripts. Esses controles podem ser classificados como campos, menus, e botões, conforme explicado na aula 5 de html.

O objetivo desta aula prática é experimentarmos com as diretivas que criam formulários e seus controles.

Abra o Notepad, crie a casca de um documento html e, dentro da extensão do corpo do documento html coloque uma instância da diretiva <form> </form>. Dentro da extensão desta diretiva, insira alguns campos. Voce deve imaginar que está criando um formulário a ser preenchido pelo visitante da página com dados que se destinam a processamento por algum script Javascript.

Se voce quiser botar ordem na prática, imagine um exemplo de página web que o internauta visitaria para fornecer dados de uma compra a crédito, ou então para inscrever-se no cadastro de alguma instituição.  Se quiser imaginar tal coisa, crie instâncias de controles conforme o tipo de dado imaginado, de acordo com a sintaxe abaixo relacionada. Se não quiser imaginar tal coisa, faça pelo menos uma instância de cada tipo de campo e cada controle abaixo relacionado.
 

2- Alguns controles de formulários html

2.1 Diretiva <input> (de efeito pontual).

A diretiva <input...> serve para criar um campo através do qual o usuário pode selecionar ou digitar dados textuais destinados a processamento por um script. Há um parâmetro obrigatório, name (através do qual o script identifica a origem do dado ali inserido ou selecionado) e vários parmetros opcionais. Dentre os parâmetros opcionais, incluem-se type, value e size.

O parâmetro type

Valores para o parâmetro type (tipo de campo) incluem: "text" (default), "hidden", "password", "checkbox" , "radio"

Lembre-se, da aula passada, que os tipos "checkbox" e "radio" servem para criar campos de seleção do tipo "sim ou não" (valor lógico), e que vários campos de tipo radio com mesmo nome formam um grupo de seleção única. Experimente usar também o parâmetro value, carregando-o com algum texto, conforme explicado na aula passada.

Legenda

Texto (ou imagem) ao lado (antes, ou depois, ou dentro da mesma célula de tabela, etc.) do controle cria uma "legenda" para o mesmo. Da mesma forma que o script identifica a origem de um dado pelo nome do controle que o gera (nome atribuído em linguagem html e reconhecido em linguagem javascript), o usuário cuja interação com a página irá produzir esse dado identifica seu propósito através dessa legenda. Portanto, a legenda faz o papel de nome do campo para o visitante da página  (em linguagem humana).


2.2 Diretiva <textarea> (de efeito extendido).

A diretiva <textarea>...</textarea>  serve para criar um campo de texto com mais de uma linha, e com fundo rolável. . Há um parâmetro obrigatório: name, e vários parmetros opcionais, conforme explicado na aula passada. Experimente-a.


2.3 Diretiva <select>
(de efeito extendido).

A diretiva <select>...</select>  serve para criar um menu de opções. Há um parâmetro obrigatório: name, e vários parmetros opcionais. Dentro da extensão da diretiva <select>, haverá uma instância da diretiva <option name="..." value="...">...</option> para cada item do menu. Experimente-a, preenchendo os pontinhos com aquilo que sua imaginação indicar, e conforme o que foi explicado na última aula, para o formulário de coleta de dados que vc está montando para esta sua prática.


2.4 Diretiva <button>
(de efeito extendido).

A diretiva <button>...</button>  serve para criar um botão no formulário. Quando clicado pelo visitante da página web correspondente, o botão envia, ou disponibiliza, os dados do formulário para algum script, conforme a ligação que exista entre o botão e tal script. A extensão da diretiva serve para criar uma legenda na face do botão. Por exemplo, com texto do tipo "clique aqui" ou "enviar dados". Se o botão ligar-se ao script através de algum parâmetro na diretiva correspondente, não haverá, nessa instância, necessidade do parâmetro name. Experimente-a.

3- Uma primeira experiência com Javascript

Para ligarmos um botão a um script, podemos usar um parâmetro do tipo que diz ao interpretador html como lidar com eventos na página. Em jargão de programação em linguagens interpretadas, um parâmetro desse tipo é chamado event hadle, ou "gancho para evento" O ato do usuário clicar em um elemento clicável, como por exempo um botão de formulário, é um evento. O parâmetro html que corresponde ao evento "clicar" tem nome onClick. Para nossa primeira experiência com Javasciript, sugerimos testar o seguinte código em sua página (ao inserir o código abaixo em sua página de prática, obedeça as regras explicadas acima).

<form name="f1">
<input name="c1" onClick="javascript:
    value = '';
 " value="digite seu nome"><br>
<button name="b1" onClick="javascript:
    c1.value = 'olá, ' + c1.value;
 ">Depois clique aqui</button>
<form>

3.1 Entendendo a combinação de html com Javascript

O formulário de nome f1 tem dois controles: um campo de nome c1 e um botão de nome b1. A legenda do campo c1 está inicialmente dentro do próprio campo, e consiste em uma instrução (em linguagem humana) para o visitante da página digitar o nome dele naquele campo.A legenda do botão b1 diz, em sua face: "Depois clique aqui". Cada um desses controles também contém um parâmetro onClick (em linguagem html).

Portanto, esse código fonte html contém dois scripts: um para eventos onClick que ocorram no campo c1, outro para eventos onClick no botão b1. Assim, entre aspas duplas,  o código fonte acima está "pendurando" um script (em linguagem javascript) no gancho para o evento "clicar" para cada um desses controles de formulário f1.

Portanto, ao clicar no campo c1 para preenchê-lo (seguindo a instrução em linguagem humanda contida na página), o visitante da página web correspondente verá o efeito da execução do script desse evento nesse campo. Esse script fará com que o valor desse campo (o texto nele contido) passe a ser o texto delimitado pelas aspas simples, ou seja, nada (o campo fica em branco, sumindo a "legenda" originalmente nele contida).

E ao clicar no botão b1 (supostamente após ter preenchido c1),  verá o efeito do script desse botão, que será o processamento do comando:

c1.value = 'olá, ' + c1.value;

Este comando fará com que o valor do campo c1 passe a ser o resultado da operação que segue o sinal de igual. Em javascript, o sinal de igual serve para formar o comando chamado de atribuição.  Em jargão de programação para linguagens imperativas (isto é, linguagens de progração que contém comando de atribuição), dizemos que esta execução se resume no seguinte: a variável do lado esquerdo da atribuição, c1.value (que corresponde ao valor do campo c1) passa a conter o valor formado pela operação que está no lado direito. Ou seja, o dado textual entre aspas simples, 'olá, ', "juntado" ao valor que antes estava em c1.value (antigo valor no campo c1).

3.2 Entendendo a sintaxe do exemplo acima

Experimente, agora, trocar as aspas simples por aspas duplas no código fonte acima. O que acontece? 

Experimente trocar as aspas duplas por aspas simples no código fonte acima. O que acontece? Como voce explica o que acontece?

Volte as aspas ao original, de sorte que seu formulário volte a funcionar como no início. Experimente então colocar aspas simples em torno da instância de c1.value no lado direito da atribuição no script do botão b1. O que acontece?

Volte ao original. Experimente agora colocar aspas simples em torno da instância de c1.value no lado esquerdo da atribuição no script do botão b1. O que acontece?

Ao seguir estas sugestões, voce estará  experimentando novas formas de se cair da bicicleta da programação quando não se entende, ou não se respeita, a sintaxe de uma linguagem de programação de verdade. Na próxima aula, veremos os conceitos que estão por trás das regras de sitaxe sendo violadas pelas tentativas sugeridas acima, e veremos as primeiras regras de sintaxe para formação de comandos em javascript. Ou seja, conheceremos os primeiros elementos da linguagem javascript.

Antes de encerrarmos, porém, um outro pequeno e proposital "tombo da bicicleta", para nos deixar motivados a entender o conceito de tipo de dados em uma linguagem de programação de verdade:

 
3.3 Começando a entender tipos de dados

Vamos fazer agora um outro formulário, destinado a "juntar" dois números, usando a mesma operação que foi usada no script do botão b1 no formulário f1

<form name="f2">
<input name="n1">digite um número<br>
<input name="n2">digite outro número<br>
<button onClick="javascript:
    n3.value = n1.value + n2.value;
 ">um número "+" outro número:</button><br>
<input name="n3">resultado da operação
</form>

Como voce pode perceber, o interpretador javascript não adivinhou o que voce pretende que ele faça com os dados. Se voce quer tratá-los como dados literais (em cujo caso + significa concatenação) ou se voce pretende tratá-los como dados numéricos (em cujo caso + significa soma numérica). Como dar ao interpretador javascript pistas suficientes para que ele entenda o que voce pretende, nesse caso, com "+"?

Agora experimente trocar, no script do botão do formulário f2, a operação + por outras operações aritméticas, *, /  ou %, e veja se esse problema do javascript, de não entender quando o dado digitado é numérico, permanece. E veja o que ele faz, quando o dado digitado não for numérico. Faça alguns testes, e veja o que ocorre. Assunto da próxima aula.