Arquivo da tag: Javascript

O Blog Mudou

Pessoal, o blog mudou de endereço e estou deixando o wordpress.com, todos os novos posts (incluindo os antigos) estarão em WWW.CLARES.COM.BR

Se puderem, assinem o novo blog, não tenho certeza de que a migração trouxe também os e-mails de assinantes. Você vai levar 20 segundos para fazer isso (no topo do site, lado direito).

Esse mês haverão alguns posts com novidades  (jquery, xml, webservices, slideshow, etc…) e talvez você não veja se não assinar.

Obrigado

Anúncios

Imagens para Ajax

Esse Post foi movido para :

http://clares.com.br/2008/08/09/imagens-para-ajax/

Desculpe pelo transtorno, aproveite para assinar o novo blog.

Ativar controle activex automaticamente

Esse Post foi movido para :

http://clares.com.br/2008/06/27/flash-ativar-controle-activex-automaticamente/

Desculpe pelo transtorno, aproveite para assinar o novo blog.

Eventos JavaScript

…..

Utilizando eventos sem declarar no HTML

Esse Post foi movido para :

http://clares.com.br/2008/02/12/usando-eventos-sem-declara-los-no-html/

Desculpe pelo transtorno, aproveite para assinar o novo blog.

Recuperando dados de formulários

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

%d blogueiros gostam disto: