1.1 - Escrevendo um formulário HTML
1.2 - Obtendo informações do formulário com javascript
1.3 - Tipos de Variavéis e Operadores
1.4 - Validando o formulário com funções javascript
1.1- Escrevendo um Formulário HTML
Vamos começar escrevendo uma página simples de cadastro de usuários.
1 <html>
2 <head>
3 <title>PegaDados</title>
4 </head>
5 <body>
6 <form name=”cadastro”>
7 <input type=”text” name=”usuario”>
8 <input type=”password” name=”senha”>
9 <input type=”button” value=”login”>
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, o formulário.
Então vamos descrever tais linhas a começar pela linha 6.
6 <form name=”login” id=”formLogin”>
Esta linha inicia o formulário e atribui o Name “login” e o ID “formLogin” 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 nomes de elementos devem ser únicos para haver uma referência correta dos campos.
7 <input type=”text” name=”usuario”>
Agora na linha 7 nos temos um elemento input do tipo text, ou seja, para entrada de texto comum.
Os elementos input são definidos pelo tipo (TYPE), vejamos alguns deles:
8 <input type=”password” name=”senha”>
Este elemento acima é um input de tipo “password”, ou seja, o que digitamos nele aparecem no formato
de “*” (asterisco), como é um campo de senha é natural que não queiramos mostrar o valor do campo ao
digitarmos.
9 <input type=”button” value=”login”>
E o último elemento do nosso formulário que é do tipo “button”, os elementos de tipo button são usados
para executar algum evento que determinarmos, em nosso caso ele executará a função
mostraDados()
que ainda iremos construrir no javascript e será executado com o evento onClick (neste tutorial nós 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
1.2 - Obtendo informações do formulário com javascript
Agora 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=”text/javascript”>
5 function mostraDados(){
6 usuario = document.cadastro.usuario.value;
7 senha = document.cadastro.senha.value;
8 msg = “Usuário: ” +usuario+ ” Senha: ” +senha ;
9 alert(msg);
10 }
11 </script>
12 </head>
13 <body>
14 <form name=”cadastro”>
15 <input type=”text” name=”usuario”>
16 <input type=”password” name=”senha”>
17 <input type=”button” value=”login” onclick=”mostraDados()” >
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 temos o evento onclick chamando a função mostraDados().
Vamos começar pela linha 4.
4 <script type=”text/javascript”>
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 chamada à função mostraDados(), as funções javascript possuem 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 =)
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 temos a seguinte sintaxe:
nomeDaVariavel = “valorDesejado”;
neste exemplo 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, palvara, frase..
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 “cadastro” ao formulário ?
lembrando:
<form name=”cadastro”>
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 “cadastro” e um campo chamado “usuario” para “recuperarmos”
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 “value” (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.
cadastro.usuario.value;
Mas o formulário ainda não é o elemento Pai de todo o documento e por isso usamos o “document” seguido do nome do elemento ou objeto que queremos acessar, então finalmente temos:
document.cadastro.usuario.value;
A linha acima faz então a referência ao valor do campo usuario contido no formulário cadastro, porém temos que criar uma váriavel para armazenar este valor e é claro diminuir o caminho de acesso à este valor.
Então vamos criar a variável usuário e atribuir à ela o valor contido em document.cadastro.usuario.value;
vejamos abaixo como ficaria:
6 usuario = document.cadastro.usuario.value;
Pronto, temos agora o valor do campo usuario na variavel usuario, claro que você pode dar outro nome à esta váriavel.
Agora é só fazer a mesma ação para os demais campos, vamos ver então o campo senha como seria;
Vamos criar a váriavel senha e atribuir a ela o valor contido…onde?
isso mesmo, em document.cadastro.senha.value;
Vamos lá !
6 usuario = document.cadastro.usuario.value;
7 senha = document.cadastro.senha.value;
É isso, agora temos nas váriaveis usuario e senha os respectivos valores contidos nos campos do formulário, claro que estamos supondo que o usário digitou estes valores, vamos ver como descubrir se o usuário digitou ou não nos campos com a função validaDados() mais adiante em 1.4 - Validando o formulário com funções javascript.
Agora que você já compreendeu as linhas 6 e 7, vamos ver novamente nosso código completo para podermos então prosseguir com a linha 8.
Abaixo nosso código completo:
1 <html>
2 <head>
3 <title>PegaDados</title>
4 <script type=”text/javascript”>
5 function mostraDados(){
6 usuario = document.cadastro.usuario.value;
7 senha = document.cadastro.senha.value;
8 msg = “Usuário: ” +usuario+ ” Senha: ” +senha ;
9 alert(msg);
10 }
11 </script>
12 </head>
13 <body>
14 <form name=”cadastro”>
15 <input type=”text” name=”usuario”>
16 <input type=”password” name=”senha”>
17 <input type=”button” value=”login” onclick=”mostraDados()” >
18 </form>
19 </body>
20 </html>
Nenhum comentário:
Postar um comentário