Javascript ou Flash

Recentemente peguei um site com slides de banners. A animação era em jquery. Depois a cliente pediu para colocar mais animações. Percebi que o site começou travar.

O que pude concluir é que se for uma animação não pesada, javascript da conta, mas se for algo pesado, vale a pena fazer em flash.

Sua máquina irá dar cria se você colocar animações pesadas em javascript.

Fica a dica!

Read Full Post »

Google.load

Tenho usado o google.load para carregar a biblioteca jquery. Não sabe o que é isso?

http://code.google.com/intl/pt-BR/apis/ajaxlibs/documentation/index.html#googleDotLoad

O google hospeda as principais bibliotecas javascript e eles se encarregam de atualizá-los.

Read Full Post »

Chonoforms e JQuery

A quem se destina: desenvolvedor de Joomla
Nível: Avançado
Conhecimento Necessário: programação em jquery (javascript)

Esse artigo não irá ensinar como fazer um formulário no Chronoforms. Irá ensinar como usar o Jquery (e seus plugins) em conjunto com o Chronoforms para tornar seus formulários mais interativos.

Read Full Post »

Identificar uma Tecla Pressionada

Descrição: Fazer uma função em Javascript que permita identificar a tecla pressionada e se determinada tecla for pressionada, executar uma tarefa.Se você é um desenvolvedor(web) e fez formulário, com certeza já quis fazer algo como se o cara pressionar “enter”, ir para o próximo campo.

Linguagem: Javascript

Procurando na internet e dando uma incrementada, eis a função que disponibilizo agora:

function keyExec(e, tc, func) {
var keyID = (window.event) ? event.keyCode : e.keyCode;
switch (tc) {
case ‘enter’:
tccode = 13;
break;
/*pode se adicionar outras teclas aqui */
}
if(keyID == tccode) {
eval(func);
return true;
} else {
return false;
}
}

Como deve ser sua chamada:

<input type=”text” id=”nome” name=”nome” onKeyPress=”keyExec(event, ‘enter’, ‘document.form.endereco.focus()’)”/>

No meu exemplo, estou utilizando em um campo nome. Quando pressionado “enter”, o foco irá para o próximo campo chamado endereco.
Ou seja,
1º parâmetro – e – não muda.
2º parâmetro – tc – o que você quer identificar.
3º parâmetro – func – função a ser executada quando a tecla for pressionada.

Read Full Post »

Tela de Login utilizando prototype

Procurando pela internet como fazer uma tela de login usando o prototype, achei esse um ótimo artigo escrito por Pedro Antunes. Não era bem o que eu queria, mas já deu uma luz. Pedi a ele que me explicasse melhor o seu código e pude então fazer o que estou postando aqui.

Para fins didáticos eu irei dar uma limpada do código, mas basicamente o código html é da seguinte forma:

<form name=”form_login” id=”form_login” method=”post” action=””>
<label for=”login”>Login</label><br />
<input type=”text” name=”login” id=”login” class=”input”/>
<br />
<label for=”senha”>Senha</label><br />
<input type=”password” name=”senha” id=”senha” class=”input”/>
<br /><br />
<input name=”entrar” type=”button” value=”Entrar” class=”button” onclick=”validarLogin()” />
</form>
<div id=”mensagem” style=”display:none”></div>

Mas o mais importante é como o javascript validarLogin() irá manipular a validação. Aqui está o segredo de tudo…

function validarLogin() {
var login = $F(‘login’);
var senha = $F(‘senha’);
var url = ‘validation.php’;
var pars = ‘login=’+login+’&senha=’+senha;
var myAjax = new Ajax.Request(
url,
{
method: ‘get’,
parameters: pars,
onComplete: mostraResposta
}
);
}
function mostraResposta(requisicaoOriginal) {
var msg = requisicaoOriginal.responseText;
if (msg == “OK “) {
$(“mensagem”).style.display=”none”;
document.location=’index2.php’;
} else {
$(“mensagem”).style.display=”block”;
$(‘mensagem’).innerHTML = msg;
}
}

O script submete para o validation.php o login e a senha. Com isso o arquivo verifica na base de dados se o usuário é valido ou não. Caso não seja, ele retorna “Login inválido”…

//trecho do validation.php
//verifica login
if !($validado) {
echo “Login Inválido”;
} else {
//setar as sessions
echo “OK”;
}

Retornando ao código ajax, pega-se o retorno do arquivo .php e verifica. Se for “OK”, ele torna o div “mensagem” invisivel e redireciona para index2.php. Caso contrario vai deixar o div “mensagem” visivel e vai printar o erro. Observe essa linha:

if (msg == “OK “) {

TEM UM ESPAÇO na frente do OK! Para funcionar a comparação é necessário esse espaço, pois o resultado do requisicaoOriginal.responseText vem com esse espaço. Mas não me pergunte o motivo. Alguma coisa obscura que talvez alguém consiga explicar. Eu não…

PS: Agradecimento especial ao Pedro Antunes que tirou toda minha dúvida!

Read Full Post »

Validação de formulário

Fazer uma pré-validação dos dados no lado do cliente(navegador) utilizando javascript é a melhor forma para garantir a validade dos dados. Mas qual a diferença se posso fazer a validação no arquivo php(ou asp ou coldfusion) que recebe os dados?

Simples, fazer a validação utilizando javascript evita sobrecarga do servidor!

Portanto, na minha opinião, toda validação que se possa utilizar javascript, utilize! Se você já programa em alguma linguagem não terá grande dificuldade.

Mas esse artigo não está so pra blá-blá-blá. Discutindo com um amigo de trabalho, vi que ele tem um meio peculiar de fazer a validação de formulário. Olhe o código abaixo:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”&gt;
<html xmlns=”http://www.w3.org/1999/xhtml”&gt;
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″ />
<title>Exemplo</title>
<script>
function submeter(){
/* vai aqui as validacoes */
document.form.action = “submeter.php”;
document.form.submit();
}
</script>
</head>
<body>
<form id=”form” name=”form” method=”post”>
<input name=”campo” type=”text” id=”campo” />
<input name=”botao” type=”button” id=”botao” value=”Submeter” onclick=”submeter()”/>
</form>
</body>
</html>

Como você pode observar, ele não coloca o action diretamente no formulário e o botão que serve pra submeter o formulário não é do tipo submit, mas sim um botao normal.

Qualquer coisa que tiver a chamada da função onclick=”nomedafuncao()” irá servir como disparador para submeter o formulário.

Qual a vantagem disso tudo?
Primeiramente, você logo percebe que o botão onde se chama a função submeter() pode ser qualquer coisa!!! Pode ser uma imagem, pode ser um div! Já temos uma maior flexibilidade para personalizar nosso site.

Outra grande vantagem é que seu formulário fica limpo. É mais lógico pensar da seguinte forma. O javascript, no nosso caso a função submeter() , recebe os dados e as valida. Se tudo der certo, irá setar o action e submeter os dados já validados. Fica intuitivo e fácil de se manter.

Bom, é isso, beijunda

Read Full Post »