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>
1.3 – Tipos de Variavéis e Operadores
… assim que tiver um tempo escreverei
1.4 – Validando o formulário com funções javascript
… na sequência escreverei
Como recuperar o nome do formulário (pode ser passando por parâmetro) com JS?
olá.
Muito bom o tutorial..
gostaria de saber como fazer uma aplicaçao simples do tipo:
a, b – numeros inteiros;
a
para recuperar um dado valor de um campo e transformar em inteiro faça:
function integerFunc(a,b){//passando os valores na função
a = parseInt(a);
b = parseInt(b);
alert(a+b)
}
function intergerFunc2(){ // pegando os valores do formulario
a = parseInt(document.formu.a.value);
b = parseInt(document.formu.b.value);
alert(a+b)
}
o parseInt convert string em inteiro
abraços,
Cara,
sorvetes
o funcao blaTeste();
function blaTeste(id, view)
{
var view = ‘view_’+id+’.php’;
alert(view);
}
/* Como o previsto ela vai me retornar uma string do tipow “view_0.php”, quero colocar essa string no href de um iframe mais num tá rolando… */
então Ed. tá ai
function blaTeste(view){
oElement = document.getElementById(“IframE”)
view = ‘view_’+view+’.php’
oElement.innerHTML = ‘<iframe frameborder=”0″ src=”‘+view+’></iframe>’;
}
<a href=”javascript:blaTeste(0)”> sorvetes </a>
<div id=”IframE”> </div>
———————————————————————–
qualquer dúvida posta ai
Obrigado rapaz me ajudou aqui.
ola, gostei do totorial, gostaria de saber como faço pra que quando eu clicar no botão receber os dados em outra pagina configurada pra receber os dados dessa primeira. obrigado.
Danilo, vc tem que fazer o javascript criar tal página ou utilizar o referenciar a pagina pelo nome é bem mais chatinho dê uma procurada no google sobre o assunto.
http://www.google.com.br/search?q=passar+variaveis+javascript+para+outra+p%C3%A1gina
abs