MINISTÉRIO DA EDUCAÇÃO Universidade Federal de Ouro Preto – UFOP Departamento de Ciências Exatas e Aplicadas Campus João Monlevade Trabalho da Disciplina CEA467 – Desenvolvimento de Sistemas Web I Professor Marcos Henrique Fonseca Ribeiro 2009/1 Utilizando a mesma equipe da primeira parte do trabalho, amplie o seu site, utilizando a linguagem Javascript, para implementar no mesmo os seguintes recursos: 1) Validação de formulários. Utilize eventos e funções Javascript para checar se o mesmo foi preenchido corretamente. O formulário em questão deve ser o de cadastro do cliente. Os erros devem ser informados com uma mensagem do tipo “alert”, informando ao usuário do problema que aconteceu com o formulário. Em caso de preenchimento correto, uma mensagem “alert” deve informa-lo do cadastro realizado com sucesso. O formulário criado deve conter os seguintes campos, com os seguintes comportamentos: Campo Nome Tipo Campo texto Observação Para ser preenchido com nome completo do cliente. o Preenchimento obrigatório. Sexo Botão rádio Opções: Masculino e Feminino, os valores correspondentes, no código HTML, devem ser M e F. Preenchimento obrigatório. Data de Nascimento Três campos texto, um para o Montar uma única string com a dia, outro para o mês e outro data e verificar se a mesma é para o ano de nascimento do válida. cliente Dica: utilize o objeto Javascript “Date” da melhor forma que puder. Importante: o usuário deve ter pelo menos 18 anos para efetuar uma compra. Utilize a data de nascimento que ele entro, depois de validada, para checar sua idade. Preenchimento obrigatório. Endereço Campo texto A ser preenchido com o logradouro do cliente (rua, avenida, praça, travessa etc.). Preenchimento obrigatório. Número Campo texto Número de porta (casa, prédio etc.) do endereço do cliente. DECEA UFOP – Campus João Monlevade Caixa Postal 24 CEP 35.930970 João Monlevade MG Brasil Homepage: http://www.decea.ufop.br – email: [email protected] Telefax: (0xx31) 38528709 MINISTÉRIO DA EDUCAÇÃO Universidade Federal de Ouro Preto – UFOP Departamento de Ciências Exatas e Aplicadas Campus João Monlevade Preenchimento obrigatório. Complemento Campo texto Complemento ao número (apto, bloco etc.). Preenchimento opcional. CEP Dois campos texto. O primeiro Montar uma única string com o para os 5 primeiros dígitos e o CEP, unindo os valores dos segundo para os restantes. campos com um hífen. Deve ser verificado se todos os dígitos são numéricos. Preenchimento obrigatório. Bairro Campo texto Preenchimento obrigatório. Cidade Campo texto Preenchimento obrigatório. Estado Campo “select” Deve apresentar as opções: Minas Gerais, São Paulo, Espírito Santo e Rio de Janeiro, com os valores internos de MG, SP, ES e RJ. Preenchimento obrigatório. CPF Campo texto. Deve validar o número de CPF. Algoritmo genérico no apêndice. Preenchimento obrigatório. E-mail Campo texto Deve ser verificada a existência de uma arroba (@) no texto digitado e pelo menos a ocorrência de um caracter de ponto. Preenchimento obrigatório. Receber novidades Campo “checkbox” Opção para receber, por e-mail as novidades do site. Não há necessidade de implementar a funcionalidade do envio de novidades, apenas a inclusão do campo no formulário basta. Preenchimento opcional. Senha Campo “password” Preenchimento obrigatório. DECEA UFOP – Campus João Monlevade Caixa Postal 24 CEP 35.930970 João Monlevade MG Brasil Homepage: http://www.decea.ufop.br – email: [email protected] Telefax: (0xx31) 38528709 MINISTÉRIO DA EDUCAÇÃO Universidade Federal de Ouro Preto – UFOP Departamento de Ciências Exatas e Aplicadas Campus João Monlevade Confirmação de senha Campo “password” Campo para digitação da confirmação. uma segunda senha, para Deve-se verificar se a senha digitada é a mesma do campo anterior. Preenchimento obrigatório. Botão “Enviar” Campo “input”, do tipo “button” Ao ser clicado, a rotina de verificação do formulário deve ser chamada, simulando o envio de informações ao site. As mensagens sucesso descritas enunciado devem em resposta ao botão. Botão “Limpar” de erro e no início do ser exibidas clique neste Campo “input”, do tipo “button” Ao ser clicado, deve retornar os valores dos campos do formulário aos seus valores originais. 2) No carrinho de compras, deve-se calcular o valor total das compras com base nos valores unitários de cada produto e na quantidade especificada pelo usuário para a compra (em um campo texto). 3) Recurso de ajuda para preencher o formulário. Para cada campo do formulário de cadastro especificado acima, deve-se criar uma “div”, que começa oculta (propriedade CSS display: none;) explicando o que é e como deve ser preenchido o campo em questão. Ao lado de cada campo, haverá uma interrogação (uma imagem ou um link) que, ao ser clicada, exibe a div com o texto de ajuda. Ao se clicar sobre o texto, o mesmo some novamente. Dica: use Javascript para alterar o estilo da div, trocando de display: none; para display: block; e viceversa. DATA DE ENTREGA E APRESENTAÇÃO DO TRABALHO: 03/07/2009 Bom trabalho, Prof. Marcos DECEA UFOP – Campus João Monlevade Caixa Postal 24 CEP 35.930970 João Monlevade MG Brasil Homepage: http://www.decea.ufop.br – email: [email protected] Telefax: (0xx31) 38528709 MINISTÉRIO DA EDUCAÇÃO Universidade Federal de Ouro Preto – UFOP Departamento de Ciências Exatas e Aplicadas Campus João Monlevade APÊNDICE: CÁLCULO DE VALIDADE DE CPF A fórmula para verificar a validade do número do CPF é simples e é explicada abaixo: Vamos tomar como exemplo o número 123.456.789-09 • 1º Dígito Verificador Primeiro calculamos a soma da multiplicação dos 9 primeiros dígitos por 10, 9, 8, ... , 3, 2, respectivamente. Ou seja Soma = (1*10) + (2*9) + ... + (8*3) + (9*2) Em seguida, dividimos e multiplicamos por 11. (Nota: Ao multiplicarmos utilizamos o valor inteiro da divisão). Valor = (Soma/11) * 11 Por fim, subtraímos Valor de Soma. Resultado = Soma - Valor Note que acabamos de realizar o módulo de Soma e 11. As duas operações anteriores podem ser substituídas por Resultado = Soma módulo 11. Agora analisamos Resultado: • • Se Resultado for igual à 1 ou à 0, então o 1º dígito verificador é 0; Caso contrário, o 1º dígito verificador é o resultado da subtração de Resultado de 11. • 2º Dígito Verificador Primeiro calculamos a soma da multiplicação dos 9 primeiros dígitos por 11, 10, 9, ... , 4, 3, respectivamente e em seguida somamos com (Digito1*2), sendo que Digito1 é o valor encontrado para o 1º dígito verificador. Ou seja Soma = (1*11) + (2*10) + ... + (8*4) + (9*3) + (Digito1*2) O resto é semelhante ao que foi feito anteriormente. Dividimos e multiplicamos por 11. (Nota: Ao multiplicarmos utilizamos o valor inteiro da divisão). Valor = (Soma/11) * 11 Por fim, subtraímos Valor de Soma. Resultado = Soma - Valor Agora analisamos Resultado: • • Se Resultado for igual à 1 ou à 0, então o 2º dígito verificador é 0; Caso contrário, o 2º dígito verificador é o resultado da subtração de Resultado de 11. No nosso exemplo (123.456.789-09) o número é válido. Fonte: Site “Fundão da Computação”. DECEA UFOP – Campus João Monlevade Caixa Postal 24 CEP 35.930970 João Monlevade MG Brasil Homepage: http://www.decea.ufop.br – email: [email protected] Telefax: (0xx31) 38528709
Download
