Introdução a JavaScript
Através desse tutorial vou tentar ensinar alguma coisa muito usada em javascript para integarir com linguagens web em geral...o bloqueio de forms..restrição de cadastros!!
Segundo o wikipédia:
JavaScript é uma linguagem de programação criada pela Netscape em 1995, que a princípio se chamava LiveScript, para atender, principalmente, as seguintes necessidades:
• Validação de formulários no lado cliente (programa navegador);
• Interação com a página. Assim, foi feita como uma linguagem de script. Javascript tem sintaxe semelhante à do Java, mas é totalmente diferente no conceito e no uso.
1. Oferece tipagem dinâmica - tipos de variáveis não são definidos;
2. É interpretada, ao invés de compilada;
3. Possui ótimas ferramentas padrão para listagens (como as linguagens de script, de modo geral);
4. Oferece bom suporte a expressões regulares (característica também comum a linguagens de script).
http://pt.wikipedia.org/wiki/JavaScript
bom..nao sabia q era tão novo!!
HAHAHAHA..
Vamos lá..
Mais uma vez vou falar que não vou ensinar a programar..nem vou ensinar algo como arrays e coisa do tipo..vou ensinar somente alguns bloqueios..e daí pode-se chegar ao resto!!
Vamos fazer uma página simples com um formulário:
Index.html
Código:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>::JS::</title>
</head>
<body>
<form id="frm_cadastra" name="frm_cadastra" method="post" action="">
Nome: <input type="text" id="nome" name="nome" /><br />
Senha: <input type="text" id="senha" name="senha" /><br />
<input type="submit" id="botao" value="Enviar" />
</form>
</body>
</html>
Na aula passada vimos os html’s...a diferença que agora tem um form...que no caso vai ter 3 ferramentas a mais dentro..
Dois campos text e um submit..q é o botão!!
xD
vamos supor q isso seria o nosso login!!
Como bloqueiar para que a pessoa digite o nome??
Oo
Vamos fazer uma javascript:
Eu não sei particulamente aonde fica o JS..sei q eh antes do body..mas nao sei se eh dentro ou fora do head..ai eu coloco fora!!
Código:
<script language="javascript"></script>
Bom..um conceito básico e geral para todas as linguagens de programação...o que é função?
Na hora de fazer um programa levemente grande existem determinados processos que se podem conceber de forma independente, e que são mais simples de resolver que o problema inteiro. Ademais, estes costumam ser realizados repetidas vezes ao longo da execução do programa. Estes processos podem se agrupar em uma função, definida para que não tenhamos que repetir uma vez ou outra esse código em nossos scripts, e sim, simplesmente chamamos a função, e ela se encarrega de fazer tudo o que deve.
Segundo nosso amigo do site: http://www.criarweb.com/artigos/229.php
Bom..com o conceito..vamos criar uma função para ser chamanda quando o cara clicar no botão!!
Código:
function bloqueia() {
}
Bom...bloqueia é o nome da função...o () serve para caso se vc fosse chamar uma variável de fora..vc setaria lá dentro..como não é o nosso caso...
Bom..vindo da lógica de programação (que tem exercícios aqiu no fórum!)
http://www.ccvgaming.com/forum/showthread.php?t=500
Vamos fazer a seguinte lógica!
Se o valor do campo for vazio...
Então ele retornará uma mensagem e pausará o script dá página!
Fim_se
No javascript:
Código:
if(!document.frm_cadastra.nome.value) {
window.alert('Nome deve ser preenchido!');
return false;
}
Onde o document.frm_cadastra.nome.value é o seguinte modelo:
Document.nome_do_formulario.nome_do_campo.value...
Window.alert vai abrir aquela janelinha chata do browser
E return false vai para o script!!
O ruim do js q qd dá erro ele nao avisa..simplesmente nao roda (pelo menos no FF)..no IE tem um alerta no canto esquerdo inferior falando quando dá erro!!
Para que o formulário rode a função..devemos adicionar a seguinte linha:
Código:
onsubmit="return bloqueia();"
Nosso código está assim:
Código:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>::JS::</title>
</head>
<script language="javascript">
function bloqueia() {
if(!document.frm_cadastra.nome.value) {
window.alert('Nome deve ser preenchido!');
return false;
}
}
</script>
<body>
<form id="frm_cadastra" name="frm_cadastra" method="post" action="" onsubmit="return bloqueia();">
Nome: <input type="text" id="nome" name="nome" /><br />
Senha: <input type="text" id="senha" name="senha" /><br />
<input type="submit" id="botao" value="Enviar" />
</form>
</body>
</html>
Se você rodar a página..irá perceber que deve preencher o campo nome..
Vamos fazer o campo senha..é a msma coisa..:
Código:
if(!document.frm_cadastra.senha.value) {
window.alert('Senha deve ser preenchido!');
return false;
}
Só muda o nome do campo e a mensagem!!
Legal..agora vamos incrementar esse script??
Como eu nunnca vi nome com menso de 2 letras..vamos colocar pra bloqueiar isso e vamos colocar para focar no campo qd estiver vazio!!
Código:
<script language="javascript">
function bloqueia() {
if(document.frm_cadastra.nome.value.length<2) {
window.alert('Nome deve ser preenchido!');
document.frm_cadastra.nome.focus();
return false;
}
if(document.frm_cadastra.senha.value.length<2) {
window.alert('Senha deve ser preenchido!');
document.frm_cadastra.senha.focus();
return false;
}
}
</script>
Perceba que usei length depois do .value!
Isso quer dizer quantidaade de caracteres!!
Vamos agora fazer algo diferente..mais bonitinho..
Em vez dessa mensagem chata (window.alert)..vamos fazer aparecer uma div com a mensagem..
Para isso vamos criar a div..
Código:
<div id="erro">
<input type="text" id="cmp_erro" name="cmp_erro" style="border:0px; background-color: #FFFFFF;" /><br />
</div>
O campo cmp_Erro vai receber as mensagens..com isso tiramos a borda e colocamos fundo da cor do fundo do site...branco!
Vamos agora fazer sumir a tabela..afinal..ela começa desaparecida!
Código:
function show() {
document.getElementById("erro").style.display = 'none';
}
Outra função..chamada show()...ela vai pegar alguma coisa com id erro e vai desaparecer com ele..
Mas para isso..devemos chamá-la em algum lugar...afinal função nao roda se não chamarmos...
No final da sua página (deve ser depois do elemento que ela usa...eu aconselho colocar depois do código inteiro..depois do body e do html) vamos colocar isso:
Código:
<script language="javascript">
show();
</script>
Bom..agora rode seu site..você vai ser que não mudou muita coisa!!
xD..ficou identico
vamos agora fazer com q ele apareça e o campo receba a msg caso esteja faltando preencher o campo!
Apague isso:
Código:
window.alert('Nome deve ser preenchido!');
document.frm_cadastra.nome.focus();
return false;
e coloque isso:
Código:
document.getElementById("erro").style.display = 'block';
document.frm_cadastra.nome.value = 'Nome deve ser preenchido!';
document.frm_cadastra.nome.focus();
return false;
Nosso código geral está assim:
Código:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>::JS::</title>
</head>
<script language="javascript">
function show() {
document.getElementById("erro").style.display = 'none';
}
function bloqueia() {
if(document.frm_cadastra.nome.value.length<2) {
document.getElementById("erro").style.display = 'block';
document.frm_cadastra. cmp_erro.value = 'Nome deve ser preenchido!';
document.frm_cadastra.nome.focus();
return false;
}
if(document.frm_cadastra.senha.value.length<2) {
window.alert('Senha deve ser preenchido!');
document.frm_cadastra.senha.focus();
return false;
}
}
</script>
<body>
<form id="frm_cadastra" name="frm_cadastra" method="post" action="" onsubmit="return bloqueia();">
<div id="erro">
<input type="text" id="cmp_erro" name="cmp_erro" style="border:0px; background-color: #FFFFFF;" /><br />
</div>
Nome: <input type="text" id="nome" name="nome" /><br />
Senha: <input type="text" id="senha" name="senha" /><br />
<input type="submit" id="botao" value="Enviar" />
</form>
</body>
</html>
<script language="javascript">
show();
</script>
Se vc rodar o script..vai ver que ele mostrou um campo a mais qd nao coloca nada no campo nome..e ele recebeu um texto..
Vamos aumentar o campo:
Código:
<input name="cmp_erro" type="text" id="cmp_erro" style="border:0px; background-color: #FFFFFF;" size="50" />
Eu aumentei o campo pq ficou cortado!!
xD
logo...faça isso no campo senha tb...agora vamos só pintar o campo em destaque pra ficar mais bonito!
Código:
document.frm_cadastra.nome.style.backgroundColor = "#DBE4E6";
Como podem ver...o style.backgroundColor vai dar a cor para o campo..
Lembre q o JS eh case senstive..ou seja...backgroundColor..e nao color!!
Agora ficamos com um problema...ele está rodando bonito..mas se tiver certo...ele continua marcado..num eh??
Façamos assim:
Código:
if(document.frm_cadastra.nome.value.length<2) {
document.getElementById("erro").style.display = 'block';
document.frm_cadastra.nome.style.backgroundColor = "#DBE4E6";
document.frm_cadastra.cmp_erro.value = 'Nome deve ser preenchido!';
document.frm_cadastra.nome.focus();
return false;
} else {
document.getElementById("erro").style.display = 'none';
document.frm_cadastra.nome.style.backgroundColor = "#FFFFFF";
}
O else...como a lógica de programação fala..é o Senão!
Ou seja..se ele estiver certo..o campo erro some e o campo nome fica branco!!
Façamos o msmo para o campo senha..nosso código inteiro ficará assim:
Código:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>::JS::</title>
</head>
<script language="javascript">
function show() {
document.getElementById("erro").style.display = 'none';
}
function bloqueia() {
if(document.frm_cadastra.nome.value.length<2) {
document.getElementById("erro").style.display = 'block';
document.frm_cadastra.nome.style.backgroundColor = "#DBE4E6";
document.frm_cadastra.cmp_erro.value = 'Nome deve ser preenchido!';
document.frm_cadastra.nome.focus();
return false;
} else {
document.getElementById("erro").style.display = 'none';
document.frm_cadastra.nome.style.backgroundColor = "#FFFFFF";
}
if(document.frm_cadastra.senha.value.length<2) {
document.getElementById("erro").style.display = 'block';
document.frm_cadastra.senha.style.backgroundColor = "#DBE4E6";
document.frm_cadastra.cmp_erro.value = 'Senha deve ser preenchido!';
document.frm_cadastra.senha.focus();
return false;
} else {
document.getElementById("erro").style.display = 'none';
document.frm_cadastra.nome.style.backgroundColor = "#FFFFFF";
}
}
</script>
<body>
<form id="frm_cadastra" name="frm_cadastra" method="post" action="" onsubmit="return bloqueia();">
<div id="erro">
<input name="cmp_erro" type="text" id="cmp_erro" style="border:0px; background-color: #FFFFFF;" size="50" />
<br />
</div>
Nome: <input type="text" id="nome" name="nome" /><br />
Senha: <input type="text" id="senha" name="senha" /><br />
<input type="submit" id="botao" value="Enviar" />
</form>
</body>
</html>
<script language="javascript">
show();
</script>
SHOWW!
Agora podemos fazer coisinhas simples no nosso site em JS..q agrada e muito os clientes...
Lembre: coisas simples e detalhadas que fazem você conquistar o cliente!!!
Você poderá agora fazer algumas coisas diversas tais como:
http://www.ericmaicon.com.br/ccv/login.php
...ou seja..o que digo é..você pode fazer algumas coisas mais bem feitas..do que uma janela de browser q td mundo detesta!!
o que eu quero é:
faça uma página chamada contato.php, onde tenha um texto introdutório, logo depois um formulário com os campos:
nome, email, assunto e mensagem...o nome, email e assunto deve ser bloqueiado com uma mensagem bonita...se quiser diversificar fique a vontade!!
vou cobrar
xD!!!
e faltou dois botões ai..o Enviar e o Limpar!!
boa sorte a todos!!
Curtidas: 0
