Rafael Clares Diniz




                   JAVASCRIPT
RECUPERANDO DADOS DE FORMULÁRIOS


1.1 - Escrevendo um formulário HT...
1.1 - Escrevendo um Formulário HTML



Vamos começar escrevendo uma página simples cadastro de usuários.


1    <html>
2  ...
1.2 - Obtendo informações do formulário com javascript


4Agora vamos a função javascript que é a parte mais divertida =)
...
1.2 - Obtendo informações do formulário com javascript

Vamos partir agora apara linha 6 e 7. isso tá ficando legal =)

6 ...
existem diversos tipos de variáveis e operadores, vejamos alguns exemplos:

inteiro - armazena valores númericos inteiros ...
Próximos SlideShares
Carregando em…5
×

Javascript Recuperando Dados De Formularios

2.652 visualizações

Publicada em

javascript basico, recuperando dados de formularios

Publicada em: Tecnologia
  • Seja o primeiro a comentar

Javascript Recuperando Dados De Formularios

  1. 1. Rafael Clares Diniz JAVASCRIPT RECUPERANDO DADOS DE FORMULÁRIOS 1.1 - Escrevendo um formulário HTML 1.2 - Obtendo informações do formulário com javascript 1.3 - Validando o formulário com funções javascript
  2. 2. 1.1 - Escrevendo um Formulário HTML Vamos começar escrevendo uma página simples cadastro de usuários. 1 <html> 2 <head> 3 <title>PegaDados</title> 4 </head> 5 <body> 6 <form name=quot;cadastroquot;> 7 <input type=quot;textquot; name=quot;usuarioquot;> 8 <input type=quot;passwordquot; name=quot;senhaquot;> 9 <input type=quot;buttonquot; value=quot;loginquot;> 10 </form> 11 </body> 12 </html> Claro, no código acima o que nos interessa realmente é o trecho do código que está em vermelho entre as linhas 6 e 10, ou seja, nosso formulário. Então vamos descrever tais linhas a começar pela linha 6. 6 <form name=quot;loginquot;> Esta linha inicia o formulário e atribui o Name quot;loginquot; e o ID quot;formLoginquot; note que nas linhas 7 e 8 também possuem o atributo Name (veremos as linha 7 e 8 logo). O Atributo Name serve para referênciarmos um elemento HTML dentro do documento, isso quer dizer que os nome de elementos devem ser únicos para haver uma referência correta dos campos. 7 <input type=quot;textquot; name=quot;usuarioquot;> Agora na linha 7 nos temos um elemento input do formulário de tipo text, ou seja, para entrada de texto comum. Os elementos input são definidos pelo tipo (TYPE), vejamos alguns deles: 8 <input type=quot;passwordquot; name=quot;senhaquot;> Este elemento acima é um input de tipo quot;passwordquot;, ou seja, o que digitamos nele aparecem no formato de quot;*quot; (asterisco), como é um campo de senha é natural que não queiramos mostrar o valor do campo ao digitarmos. 9 <input type=quot;buttonquot; value=quot;loginquot;> E o último elemento do nosso formulário que é do tipo quot;buttonquot;, os elementos de tipo button são usados para executar algum eventos que determinaremos, em nosso caso ele conterá a função mostraDados() que ainda iremos construrir no javascript e será executado com o evento onClick (neste nós tutorial não abordaremos os eventos a fundo). 10 </form> E a última linha do nosso formulário que fecha a tag form e indica o fim do nosso formulário. nota: não utilize acentos nos nomes e atributos do elementos
  3. 3. 1.2 - Obtendo informações do formulário com javascript 4Agora vamos a função javascript que é a parte mais divertida =) Vejamos o código a seguir onde juntamos o nosso HTML contendo o formulário e o javascript. 1 <html> 2 <head> 3 <title>PegaDados</title> 4 <script type=quot;text/javascriptquot;> 5 function mostraDados(){ 6 usuario = document.cadastro.usuario.value; 7 senha = document.cadastro.senha.value; 8 msg = quot;Usuário: quot; +usuario+ quot; Senha: quot; +senha ; 9 alert(msg); 10 } 11 </script> 12 </head> 13 <body> 14 <form name=quot;cadastroquot;> 15 <input type=quot;textquot; name=quot;usuarioquot;> 16 <input type=quot;passwordquot; name=quot;senhaquot;> 17 <input type=quot;buttonquot; value=quot;loginquot; onclick=quot;mostraDados()quot; > 18 </form> 19 </body> 20 </html> Em nosso novo código temos a função javascript entre as linhas 4 e 11 e na linha 17 temo o evento onclick chamando nossa função mostraDados(). Vamos começar pela linha 4. 4 <script type=quot;text/javascriptquot;> Nesta linha temos a tag <script> e o atributo type, lembra dos atributos ? A tag script informa que um script será iniciado e o atributo type define o tipo de script que será usado, em nosso caso é do tipo text/javascript que define um script na linguagem de scripts javascript. 5 function mostraDados(){ Na linha 5 temos a chamda da função que possui a seguinte sintaxe: função nomeDafunção(){ // bloco de comandos } Então temos function que informa o inicio de uma função, mostraDados que é o nome da função e também () os parenteses que podem possuir valores em seu interior (veremos isso mais adiante). Por fim temos as {} chaves que indicam o inicio e o fim do bloco de comandos que serão executados pela função. nota: existem diversas funções pré-definidas no javascript e nós não abordaremos isso neste tutorial, portanto leia sobre nomes reservados do javascript e seja criativo e direto na hora de dar nome as suas funções =)
  4. 4. 1.2 - Obtendo informações do formulário com javascript Vamos partir agora apara linha 6 e 7. isso tá ficando legal =) 6 usuario = document.cadastro.usuario.value; 7 senha = document.cadastro.senha.value; Nas linhas acima temos a palavra usuario e senha que nada mais são que váriaveies que irão armazenar os valores contidos em nossos campos usuario e senha do formulário. Para se atribuir um valor a uma váriavel temo a seguinte sintaxe: nomeDaVariavel = quot;valorDesejadoquot;; neste exemplo vemos que definimos o nome da váriavel e definimos também seu valor que é contido entre aspas duplas, através do operador '=' (igual), no exemplo acima queremos definir um valor cujo o mesmo é uma string (tipo de váriavel texto), ou seja, seu valor é um texto, uma palvara, uma frase...em fim um valor que não seja números. existem diversos tipos de variáveis e operadores, veja em: 1.3 Tipos de variavéis e operadores E agora vamos ver como isso acontece. Lembra que demos o nome quot;cadastroquot; ao formulário ? lembrando <form name=quot;cadastroquot;> dissemos também que é através dos nomes que temos acesso (referência) ao elementos. um exemplo bem simples sobre acesso as propriedades de um elemento ou objeto: Vamos usar como ex. a váriavel gato, e vamos supor que queiramos acessar a propriedade pata do gato. então seria algo assim: gato.pata; e se quissemos acessar a propriedade dedo do gato seria assim: gato.pata.dedo; agora a unha do gato (eu disse que isso era divertido). =) gato.pata.dedo.unha; Claro que a coisa pode não ser tão simples assim em outros casos, pense no seguinte: e se você quisesse acessar a unha do dedão da pata do gato? isso varia de acordo com a complexibilidade do programa, e o nosso não é nada complexo =) Mas vamos deixar o coitado do gato em paz e vamos voltar ao nosso formulário. Então se temos um formulário chamado quot;cadastroquot; e um campo chamado quot;usuarioquot; para quot;recuperarmosquot; o valor deste campos devemos proceder da seguinte maneira: cadastro.usuario; Só que o que queremos na verdade são os valores que foram digitados neste campo e para isso temos a propriedade quot;valuequot; (valor) para cada elemento filho. Em nosso caso o elemento Pai é o formulário e o elemento filho é o campo usuario e também os demais campos. Então ficaria assm: cadastro.usuario.value; Mas o formulário ainda não é o elemento Pai de todo o documento e por isso usamos o quot;documentquot; seguido do nome do elemento ou objeto que queremos acessar, então finalmente temos: document.cadastro.usuario.value;
  5. 5. existem diversos tipos de variáveis e operadores, vejamos alguns exemplos: inteiro - armazena valores númericos inteiros ex: idade = 23; acima usamos o operador = (igual) para atribuir o valor à váriavel e o ; (ponto e virgula) para indicar o fim da linha de comando. (a cada expressão é necessário finalizar com ;) note que neste caso não usamos as aspas, isso ocorre porque nossa váriavel é do tipo inteiro. vejamos um exemplo com váriaveis do tipo inteiro para ficar mais claro: lateralEsquerda = 12; lateralDireita = 13; Agora vamos usar o operador + (soma) para vermos o que acontece. laterais = (lateralEsquerda + lateralDireita); Acima o que está acontecendo é que criamos uma nova váriavel chamada quot;lateraisquot; e dizemos no script que esta váriavel receberá a soma de lateralEsquerda e lateralDireita, e o resultado é 25 como esperado. O comando alert(); exibe mensagens de alerta na tela e podemos testar esta soma com seguinte script: <script type=quot;text/javascriptquot;> lateralEsq = 12; lateralDir = 13; laterais = (lateralEsq + lateralDir);

×