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

Transcrição

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 Permite fazer com que um documento (página) reaja a eventos Permite ler e escrever elementos xhtml Pode ser utilizado para validar dados 2005 ESTSetúbal Susana Cabaço - Computação na Internet 2005/2006 Página 1/9

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> 2005 ESTSetúbal Susana Cabaço - Computação na Internet 2005/2006 Página 2/9

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... Incluir javascript na secção head ou body faz-se da forma já indicada no primeiro exemplo ESTSetúbal Susana Cabaço - Computação na Internet 2005/2006 Página 3/9

4 No entanto, quando pretendemos utilizar um ficheiro com scripts externos devemos proceder de forma ligeiramente diferente: <html> <head> <script src="path_relativo_raiz_site/nome_ficheiro.js"></script> </head> <body> </body> </html> 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 2005 ESTSetúbal Susana Cabaço - Computação na Internet 2005/2006 Página 4/9

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, 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 Por vezes podemos querer interagir com o utilizador com base numa caixa de diálogo. O Javascript oferece três tipos de caixas de diálogo muito simples: 1. Alert box: usamos quando pretendemos ter a certeza de que determinada informação é fornecida pelo utilizador. Este é obrigado a carregar num botão de ok para 2005 ESTSetúbal Susana Cabaço - Computação na Internet 2005/2006 Página 5/9

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 ESTSetúbal Susana Cabaço - Computação na Internet 2005/2006 Página 6/9

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: 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: 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: Este exemplo: 2005 ESTSetúbal Susana Cabaço - Computação na Internet 2005/2006 Página 7/9

8 document.write ("You \& I sing \"Happy Birthday\".") Produz o seguinte resultado: You & I sing "Happy Birthday". No site: 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 é válido (entre outras coisas, verificar se tem 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 6. Aplicar a solução final 2005 ESTSetúbal Susana Cabaço - Computação na Internet 2005/2006 Página 8/9

9 Este trabalho tem a duração de uma aula e deverá ser entregue sem falta até ao dia 14 de Outubro ESTSetúbal Susana Cabaço - Computação na Internet 2005/2006 Página 9/9