Laboratório 4 Validação do Formulário

(1)

Laboratório 4 – Validação do Formulário

Introdução

Agora que já definimos os nossos documentos usando xhtml e já os embelezámos através da utilização das CSS, está na hora de validar a informação que o utilizador poderá vir a inserir nos formulários.

Para isso, vamos utilizar Javascript (ou ECMAScript, que é o nome do standard propriamente dito).

É uma linguagem de scripting, o que significa que:

1. em termos de execução o seu custo a nível de recursos necessários é baixo 2. consiste em linhas de código executável pelo computador

3. normalmente este código está embutido nas próprias páginas html

4. é uma linguagem interpretada, o que quer dizer que para poder o código é executado sem ser necessária compilação prévia

5. pode ser utilizado sem ter de adquirir nenhuma licensa especial

Nota:

Java e Javascript não são a mesma coisa! A sintaxe é semelhante em alguns aspectos, mas não passa disso.

O que é que o Javascript pode fazer?

• Dar aos designers de xhtml uma ferramenta de programação com sintaxe simples para que possam dinamizar todo o layout das suas criações

• Permite colocar texto xhtml nas páginas dinamicamente

(2)

• Pode ser utilizado para detectar o browser utilizado pelo cliente

• Pode ser utilizado para criar cookies que permitem recolher e tratar alguma informação acerca do cliente

Pequeno exemplo: <html> <body> <script type="text/javascript"> document.write("Hello World!") </script> </body> </html>

document.write permite escrever texto numa página. Neste caso irá aparecer na página em questão o texto “Hello World!”.

document é um dos objectos do modelo DOM (Document Object Model) e, neste caso, o documento a que se refere é a página xhtml com que se está a lidar. Write é um método do objecto document, através do qual indicamos o texto que deve aparecer numa determinada página. Existem outros objectos e métodos com os quais lidaremos mais tarde, por agora serviu apenas de pequena demonstração.

É de realçar ainda que, se não tivéssemos colcado a tag <script....> e se não a tivéssemos depois fechado, o browser interpretaria a instrução document.write como sendo texto normal e ao invés de aparecer só Hello World na página aparecia todo o texto da instrução em causa.

O mesmo acontece quando um browser não entende javascript, pelo que, quando colocamos código javascript directamente dentro de uma página é costume usarem-se comentários xhtml () em redor do código javascript. Assim, se o browser não o endender, interpreta como sendo texto comentado e não surge texto estranho nas nossas páginas. Exemplo: <script type="text/javascript">  </script>

(3)

Uma dica acerca de sintaxe: tal como em outras linguagens, no javascript usa-se ; como separador de instruções. No entanto, se num segmento de javascript só há uma instrução a executar, o ; torna-se opcional.

Onde colocar código Javascript?

Há essencialmente três formas de embutir código javascript numa página: 1. Na secção head

2. Dentro da secção body

3. Usar um ficheiro javascript externo (mais ou menos da mesma forma que se usa uma CSS externa)

Scripts na secção head

Ao colocar o código javascript na secção head de uma página estamos a garantir que antes que este seja executado, já foi carregado para memória, sendo que assim não se correm riscos de uma função falhar por não estar presente no documento.

Scripts na secção body

Ao colocar o código javascript na secção body, passamos a assumir que esse código é carregado e executado na altura em que a própria página está a ser carregada pelo browser. Pode contribuir para gerar conteúdo para a própria página.

Scripts externos

Um script externo, permite dar ênfase aos aspectos de reutilização. Podemos utilizar o mesmo script externo em diversas páginas que necessitam de funcionalidade idêntica em algum ponto, evitando assim de re-escrever o mesmo código diversas vezes, o que também evita repetir os mesmos erros. Para além disso, se um bug é detectado, sabemos exactamente onde o encontrar, ou seja, no(s) ficheiro(s) externo(s) contendo todas as funções de scripting.

Nota: Dado que podemos utilizar um número ilimitado de scripts, é perfeitamente possível

utilizar scripts na secção de head, na secção de body e além disso manter scripts externos, tudo em simultâneo. Tudo isto deve, logicamente, ser feito com conta peso e medida, pois a manutenção e toda a aplicação desenvolvida em redor destas páginas poderá tornar-se demasiado complexa!

Fazer debug de javascript não é uma tarefa simples, pois a linha de código que muitas vezes nos é indicada não corresponde à linha de código da página...

(4)

No entanto, quando pretendemos utilizar um ficheiro com scripts externos devemos proceder de forma ligeiramente diferente:

Uma nota importante, relativa à utilização de javascript nas secções de head ou body de um documento, prende-se com a possibilidade de falsificação das nossas validações.

O javascript é pouco seguro, no sentido em que, podemos fazer download de uma página, gravá-la no nosso disco como ficheiro html, editar esse ficheiro, modificar todas as validações

javascript e executar novamente a página, fazendo submit para o servidor de dados

absolutamente incorrectos. Este é um exemplo simples, de algo que pode ser feito por parte de alguém com intenções maliciosas.

Assim sendo, embora façamos as validações dos dados de um form em javascript como forma de pré-processamento, ao receber os dados do lado do servidor é conveniente proceder a nova validação para evitar situações de erros provocados por situações como a acima descrita.

Variáveis

O javascript não é uma linguagem fortemente tipada como é o caso do Java, do C, C++, etc.

Uma variável em javascript é declarada dando-se-lhe um nome seguido de um valor. Se o valor for inteiro, a variável é inteira, se for um char é do tipo caracter, etc.

É perfeitamente possível fazer com que a mesma variável num dado instante guarde na sua zona de memória uma string para, umas linhas de código adiante, já estar a guardar um valor double.

No entanto, se bem se recordam de boas práticas de programação, este tipo de situação, embora possível, não é minimamente desejável, para bem da compreensão e manutenção do vosso trabalho!

Regras acerca de nomes de variáveis:

1. São case-sensitive, ou seja, o nome X é diferente de x 2. Têm de começar por uma letra ou por um underscore

(5)

3. Na declaração, podem (opcionalmente) ser precedidas da palavra var

Âmbito (scope) de uma variável

Em javascript uma variável é visível dentro da função em que foi criada, ou, se for

declarada fora de qualquer função, será visível por toda a página e por todas as funções que existam nessa página.

Instruções

Tal como no Java, em Javascript também há um conjunto de instruções à nossa disposição para programar as funções:

1. if, if-else, if-else if, ... 2. switch - case

3. for 4. while 5. do-while

Também estão presentes as instruções break e continue, com os mesmos significados que em Java.

Comentários:

Em javascript podemos comentar código tal como o faríamos noutras linguagens. A sintaxe dos comentários é idêntica à do Java:

1. // serve para comentar uma linha

2. /* serve para comentar um bloco de texto de uma ou mais linhas */

Operadores:

Existem operadores aritméticos, lógicos, de comparação e de afectação idênticos aos da linguagem Java.

Pop-Up Boxes

(6)

confirmar o alerta.

2. Confirm box: usa-se quando se pretende que o utilizador verifique determinado bloco de informação. Se estiver tudo bem deve usar o botão de ok, caso contrário tem sempre disponível a opção cancel.

3. Prompt box: usa-se quando pretendemos que o utilizador nos dê determinado input antes de carregar a página ou de entrar numa outra página. Escreve o valor e depois opta por dizer ok, para continuar, ou cancel e fica na mesma página.

Sintaxe:

alert(“texto”);

confirm(“texto com dados a confirmar”);

prompt(“mensagem”,”valor default para o input”);

Funções

As funções em javascript são declaradas de forma explícita, sendo que a sintaxe utilizada é a seguinte:

function nomeDaFuncao(var1,var2,...,varX)

{

código a executar

}

Podem ou não ter uma instrução de return, consoante a necessidade.

A utilização de parâmetros também não é obrigatória, tal como em qualquer outra linguagem.

Não devemos esquecer de que também os nomes das funções são case-sensitive!

Eventos

Eventos são acontecimentos que são despoletados por intermédio de algum processo de interacção. Por exemplo, o mexer do rato, o clickar num determinado botão do rato, carregar numa tecla qualquer, etc, etc.

Em javascript podemos “apanhar” esses eventos e associar-lhes algum processamento que nos convenha ou pareça necessário.

Estão normalmente associados a funções (exemplo: ao clickar de um botão, verificar se o texto de uma determinada caixa é composto apenas por caracteres numéricos), sendo que a função em causa só é executada quando o evento ocorre.

(7)

Para lidar com eventos, são-nos disponibilizados os chamados event handlers, funções que são executadas automaticamente sempre que um destes eventos ocorre e que não são programadas por nós.

Para uma lista completa dos event-handlers disponíveis em javascript, consultar:

http://www.devguru.com/Technologies/ecmascript/quickref/js_eventhandler.html

Não esquecer, no entanto, que o vosso código tem de ser compatível com todos os principais browsers utilizados no mercado e, que, portanto, há que ter cuidado com os

handlers a utilizar.

Objectos

Em javascript temos também uma série de objectos à nossa disposição, com os quais podemos criar funcionalidades mais elaboradas.

Para uma lista dos objectos disponíveis e das funcionalidades que nos oferecem, consultar:

http://www.devguru.com/Technologies/ecmascript/quickref/js_objects.html

Dicas importantes:

1. Símbolos como ([{, etc devem ter sempre o símbolo correspondente a fechar, por uma questão de evitar erros difíceis de detectar

2. Espaços em branco extra são ignorados, pelo que ao afectar uma variável, por exemplo, x=1, será mais legível usar espaços e fazer x = 1

3.

Se uma linha de código é demasiado longa, podemos quebrá-la, para que o código seja mais legível:

document.write("Hello \ World!")

No entanto, quebrar a linha desta forma: document.write("Hello \

World!") Não é possível e gera erros!

4. Podemos inserir caracteres especiais nas nossas mensagens, como &, ', “, mas para isso temos de usar técnicas de escaping como no Java:

(8)

document.write ("You \& I sing \"Happy Birthday\".") Produz o seguinte resultado:

You & I sing "Happy Birthday". No site:

http://www.devguru.com/Technologies/ecmascript/quickref/javascript_index.html

Podem consultar toda a referência em termos de sintaxe, operadores, objectos, eventos, etc., relativos ao javascript.

Laboratório 4

Para a página ou conjunto de páginas já desenvolvidas e formatadas nos laboratórios anteriores, proceder aos seguintes passos:

1. Criar um ficheiro javascript onde irão colocar as funções a desenvolver

2. Incluir esse ficheiro javascript nas páginas em que têm de efectuar validações 3. Criar um conjunto de funções genéricas, nomeadamente:

• Verificar se o conteúdo de uma caixa de texto é constituído apenas por números (pode ser conseguido também criando uma função que não permita inserir números no objecto de input)

• Verificar se uma data é válida (se tem o formato aaaa-mm-dd, por exemplo). Pode ser dividida em funções para verificar o dia, o mês e o ano

• Verificar se um endereço de e-mail é válido (entre outras coisas, verificar se tem um @ e no mínimo um . a separar domínios

• Verificar se um determinado elemento do form é de preenchimento obrigatório • Verificar se um determinado elemento do form está vazio

• Verificar se o comprimento do conteúdo de um elemento do form excede o limite • Criar uma função que serve para validar o form inteiro

4. Encontrar a melhor forma de utilizar estas funções no form. 5. Discutir a solução encontrada com o professor

(9)

Este trabalho tem a duração de uma aula e deverá ser entregue sem falta até ao dia 14 de Outubro.