WEBDESIGN. Professor: Paulo Marcos Trentin - paulo@paulotrentin.com.br Escola CDI de Videira

Transcrição

1 WEBDESIGN Professor: Paulo Marcos Trentin - paulo@paulotrentin.com.br Escola CDI de Videira

2 Formulários e JavaScript Como visto anteriormente, JavaScript pode ser usada para validar dados de formulários. Hoje vamos aprender a acessar esses dados e processá-los. Nosso objetivo é fazer uma calculadora em HTML e JavaScript! 8/7/2011 2

3 Formulários HTML Inicialmente vamos aprender a criar um formulário. Mas o que é e para que serve um formulário? Basicamente é uma área onde o usuário pode inserir dados e podemos processar tais dados, salvando-os num banco de dados ou apenas exibindo-os para o usuário após algum processo. 8/7/2011 3

4 Criando um formulário em HTML Inicie um novo documento HTML. A primeira coisa a ser feita é criar a tag form com seus atributos. Cole o seguinte trecho de código dentro de seu elemento body: 8/7/2011 4

5 Tag form, atributo action e method O atributo action é usado para informar ao navegador qual página irá receber os dados deste formulário. Usaremos ele mais tarde ao trabalhar com PHP. O atributo method é usado para informar qual tipo de envio de dados de desejamos: GET ou POST. 8/7/2011 5

6 Tag form, método GET O método GET envia dados como uma parte da URL. protocolo://servidor/caminho?nome_variável=valor Exemplo de uso (repare os dados depois do?): 8/7/2011 6

7 Tag form, método GET Após implementar o código anterior, preencha o formulário com seu nome e clique no botão Enviar. Repare a URL após o envio dos dados: 8/7/2011 7

8 Tag form, método POST Altere o método no seu formulário para post e faça a submissão dos dados. Qual á diferença? 8/7/2011 8

9 Formulário básico de contato Implemente o seguinte código HTML: 8/7/2011 9

10 Entendendo elementos do formulário elemento label O elemento label é o rótulo para um campo do formulário. Usamos o atributo for na tag label para indicar qual campo do formulário esse rótulo se aplica. Isso é útil para que ao o usuário clicar no nome do campo (label Nome) o cursor de texto seja direcionado automaticamente para o campo de entrada (input Nome) 8/7/

11 Entendendo elementos do formulário elemento input O elemento input é o local onde o usuário irá entrar com os dados ou gerar uma ação. Ele pode ser dos seguintes tipos: button, checkbox, file, hidden, image, password, radio, reset, submit, text. O tipo de entrada text é usado quando queremos que o usuário insira um texto de uma linha em seu formulário: 8/7/

12 Entendendo elementos do formulário elemento input O tipo de entrada button é usado quando queremos que o usuário execute alguma ação (geralmente manipulamos essa ação via JavaScript): O tipo de entrada submit cria um botão de submissão dos dados do formulário: Lista completa de tipos: 8/7/

13 Entendendo elementos do formulário elemento textarea A área de texto (textarea) é usada quando desejamos receber várias linhas de texto do usuário. Os atributos rows e cols são obrigatórios, porém podem fazer com que a caixa de texto apareça com tamanho variado de acordo com o navegador. Portanto é recomendável que você estilize esse elemento com CSS, definindo sua largura e altura. Veja mais sobre formulários aqui: 8/7/

14 Formulário integrado com JavaScript Faremos com que ao submeter os dados do formulário, ocorra uma chamada de função JavaScript, para isso, crie o atributo onsubmit em seu formulário com o valor minhafuncao(); dentro dele: Ao submeter (onsubmit) o formulário, o navegador irá invocar a chamada da função minhafuncao() que é definida no arquivo JavaScript que sua página carregou. 8/7/

15 Formulário integrado com JavaScript - arquivo javascript Por hora implemente a seguinte função em seu JavaScript: Atualize seu navegador e faça testes de submissão do formulário para ver o que acontece. 8/7/

16 Formulário integrado com JavaScript - teste chamada de função Se tudo ocorreu como o previsto, você receberá a seguinte mensagem: 8/7/

17 Formulário integrado com JavaScript - recebendo dados do formulário Reimplemente a função abaixo: 8/7/

18 Formulário integrado com JavaScript - recebendo dados do formulário Preencha o formulário e submeta-o. Você deve ver o texto inserido nos campos, como segue abaixo: 8/7/

19 Conceito da calculadora online Agora que já sabemos como receber os dados do usuário, como processá-los, e como apresentar os resultados, não falta muito para fazermos uma calculadora, não é mesmo? Para isso precisaremos: 1. Implementar o formulário em HTML que receba dois valores do usuário. 2. Capturar esses valores por uma função JavaScript; 3. Processá-los (efetuar algum cálculo como soma, divisão, etc); 4. Apresentar os resultados para o usuário. 8/7/

20 Implementação da calculadora online 1 - Implemente o seguinte código HTML: 8/7/

21 Implementação da calculadora online 2 A função soma em JavaScript: Faça testes com seu formulário e veja o que acontece 8/7/

22 Implementação da calculadora online Por que não está somando e sim concatenando os valores? 8/7/

23 Implementação da calculadora online Lembra-se da diferença entre a expressão abaixo? Se não, teste-a: Todo valor vindo do formulário, por padrão é texto, afinal é um campo de entrada do tipo text, como vimos anteriormente. 8/7/

24 Implementação da calculadora online Para trabalharmos com números, precisamos antes, converter o valor lido do formulário em número. Modifique sua função soma: 8/7/

25 Implementação da calculadora online Teste agora sua calculadora para ver se ela está somando: O que aconteceria se somássemos 2.9 com 3.5? 8/7/

26 Implementação da calculadora online A função soma anterior, converte valores do formulário (string) em números inteiros (int). Por isso seu nome é parseint. Um valor quebrado, em programação é tratado como float (ponto flutuante). Usaremos agora uma função chamada parsefloat, que converte os valores string em valores de ponto flutuante (float). 8/7/

27 Implementação da calculadora online Modifique sua função soma(): 8/7/

28 Implementação da calculadora online Sua calculadora agora deve funcionar corretamente: 8/7/

29 Implementação da calculadora online Vamos completar nossa calculadora! Que tal o usuário informar que tipo de cálculo deseja fazer? 8/7/

30 Implementação da calculadora online Adicione o seguinte código em seu HTML para que seja criado uma lista de seleção de dados. Isso é muito usado na internet! Faça com que apareça no mesmo local da imagem na página anterior. 8/7/

31 Exercício Seguindo o que foi feito nas últimas aulas de JavaScript, vamos fazer nossa calculadora funcionar completamente! Faça uma calculadora que receba dois valores e o tipo de cálculo a ser feito. De acordo com esse tipo, execute o cálculo e exiba o resultado para o usuário. Dica: Você irá precisar usar as estruturas de tomadas de decisões: IF e talvez ELSE. 8/7/