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. 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. 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. 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. 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);
