Emerson Carvalho » Jquery http://www.emersoncarvalho.com Php, Javascript, Flex, MySql, ZendFramework and more... Wed, 01 Feb 2012 10:49:31 +0000 en hourly 1 http://wordpress.org/?v=3.2.1 Entendendo o setTimeout e o setInterval do Javascript http://www.emersoncarvalho.com/entendendo-o-settimeout-e-o-setinterval-do-javascript/ http://www.emersoncarvalho.com/entendendo-o-settimeout-e-o-setinterval-do-javascript/#comments Thu, 10 Nov 2011 18:50:17 +0000 @emersonbroga http://emersoncarvalho.com/?p=188 Vou esclarecer hoje as dúvidas sobre as funcoes setTimeout e setInterval do javascript.

Com a função setTimeout, você define um tempo para que o javascript execute uma função.
Os parametros da função setTimeout( função , tempo ):
função: Função que você quer executar.
tempo: quanto tempo depois que rodar o script você quer que ela seja executada, em milisegundos.

Exemplo 1:

<html>
	<head>
		<title>Emerson Carvalho</title>
		<script type="text/javascript">
			function displayName()
			{
				document.getElementById('feedback').innerHTML = 'Emerson Carvalho';
			}

			//Executar a função displayName após 2 segundos.
			setTimeout('displayName()', 2000);
		</script>
	</head>
	<body>
		<span id="feedback"></span>
	</body>
</html>

Para passar parametros na função que será chamada pelo setTimeout você pode fazer como no exemplo abaixo:
Exemplo 2:

<html>
	<head>
		<title>Emerson Carvalho</title>
		<script type="text/javascript">
			function displayName( name )
			{
				document.getElementById('feedback').innerHTML = name;
			}

			//Passando uma string como parametro.
			setTimeout('displayName("Emerson Carvalho")', 2000);
		</script>
	</head>
	<body>
		<span id="feedback"></span>
	</body>
</html>

Exemplo 3:

<html>
	<head>
		<title>Emerson Carvalho</title>
		<script type="text/javascript">
			function displayName( name , site )
			{
				document.getElementById('feedback').innerHTML =  name + ' ' + site;
			}

			//Passando variaveis
			var nome = 'Emerson Carvalho';
			var url = 'http://www.emersoncarvalho.com';
			setTimeout( function(){
				displayName(nome, url);
			}, 2000);
		</script>
	</head>
	<body>
		<span id="feedback"></span>
	</body>
</html>

A função setInterval tem um comportamento diferente, com ela você irá definir um intervalo para que uma função seja executada constantemente.
Os parametros da função setInterval( função , tempo ):
função: Função que você quer executar.
tempo: de quanto em quanto tempo essa função será executada (em milisegundos).

Exemplo 4:

<html>
	<head>
		<title>Emerson Carvalho</title>
		<script type="text/javascript">
			function displayName()
			{
				document.getElementById('feedback').innerHTML += 'Emerson Carvalho <br/>';
			}
			//Repetir a função a cada 1 segundo.
			setInterval('displayName', 1000);
		</script>
	</head>
	<body>
		<span id="feedback"></span>
	</body>
</html>

Para passar variaveis você pode seguir o mesmo padrão do setTimeout();

Exemplo 5:

<html>
	<head>
		<title>Emerson Carvalho</title>
		<script type="text/javascript">
			function displayName( name, site )
			{
				document.getElementById('feedback').innerHTML +=  name + ' '+ site + '<br/>';
			}
			// Passando parametros para a função.
			var nome = 'Emerson Carvalho';
			var url  = 'http://www.emersoncarvalho.com';
			setInterval(function(){
				displayName( nome, url);
			}, 1000);
		</script>
	</head>
	<body>
		<span id="feedback"></span>
	</body>
</html>

Para parar a execução do setInterval, você deve usar a função clearInterval() conforme mostra o exemplo abaixo:

Exemplo 6:

<html>
	<head>
		<title>Emerson Carvalho</title>
		<script type="text/javascript">
			function displayName( name, site )
			{
				document.getElementById('feedback').innerHTML +=  name + ' '+ site + '<br/>';
			}
			var nome = 'Emerson Carvalho';
			var url  = 'http://www.emersoncarvalho.com';
			var intervalo = setInterval(function(){
				displayName( nome, url);
			}, 1000);
			clearInterval(intervalo);
		</script>
	</head>
	<body>
		<span id="feedback"></span>
	</body>
</html>

Faça o download dos exemplos

Obrigado.

]]> http://www.emersoncarvalho.com/entendendo-o-settimeout-e-o-setinterval-do-javascript/feed/ 0 Php/Js Verificar existência de imagem remota http://www.emersoncarvalho.com/phpjs-verificar-existencia-de-imagem-remota/ http://www.emersoncarvalho.com/phpjs-verificar-existencia-de-imagem-remota/#comments Sun, 16 Oct 2011 15:41:48 +0000 @emersonbroga http://www.emersoncarvalho.com/?p=175 Olá galera,

Depois de tanto tempo sem escrever por aqui, hoje vou dar-lhes uma
dica muito interessante.

O problema era o seguinte, eu tinha a url da imagem, e tinha que verificar
se ela existia no servidor (remoto).
Pesquisei e encontrei varias formas de fazer isso.

Um dos primeiro exemplos que achei foi esse:

$url=getimagesize(“http://www.google.com/intl/en_com/images/srpr/asdf.png”);

if(!is_array($url))
{
	$default_image =”http://www.google.com/intl/en_com/images/srpr/logo3w.png”;
}

Problema: Muito lento.

Outro exemplo:

function is_webfile($webfile)
{
 $fp = @fopen($webfile, "r");
 if ($fp !== false)
  fclose($fp);

 return($fp);
}
is_webfile('http://www.google.com/intl/en_com/images/srpr/asdf.png');

Problema: Lento tambem.

Mais um:

function checkRemoteFile($url)
{
    $ch = curl_init();
    curl_setopt($ch, CURLOPT_URL,$url);
    // don't download content
    curl_setopt($ch, CURLOPT_NOBODY, 1);
    curl_setopt($ch, CURLOPT_FAILONERROR, 1);
    curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
    if(curl_exec($ch)!==FALSE)
    {
        return true;
    }
    else
    {
        return false;
    }
}
checkRemoteFile('http://www.google.com/intl/en_com/images/srpr/asdf.png');

Problema: Um pouco mais rápido que os demais, mas ainda lento.

Solucão: JAVASCRIPT

function imagePlaceholder()
{
	//Use o seletor jquery para as imagens que deseja usar o placeholder.
	$(SELETOR_JQUERY).each(function(){
		$(this).error(function() {
			$(this).attr('src', 'http://www.google.com/intl/en_com/images/srpr/logo3w.png');
		});
	});
}

Com essa solução em javascript funcionou bem e não deixou o site lento.

Espero que seja util.

Obrigado.

]]> http://www.emersoncarvalho.com/phpjs-verificar-existencia-de-imagem-remota/feed/ 0 Validando Formulários com jQuery Validate http://www.emersoncarvalho.com/validando-formularios-com-jquery-validate/ http://www.emersoncarvalho.com/validando-formularios-com-jquery-validate/#comments Sat, 22 May 2010 14:39:35 +0000 @emersonbroga http://www.emersoncarvalho.com/?p=86 O jQuery possui um ótimo plugin para validação de formulários, que é o Validation, criado pelo pessoal
do http://bassistance.de/ você fazer o download no site deles, ou simplesmente
importar o plugin diretamente do site da Microsoft Ajax CDN (Content Delivery Network).

Vamos lá

Para usar o pluguin você deve importar também o jQuery (lógico né?!).

Importando os arquivos de javascript.

<!-- Inclusão do Jquery -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js" ></script>
<!-- Inclusão do Jquery Validate -->
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery.validate/1.6/jquery.validate.js" ></script>

Criando o formulário

<form id="meu_form" action="" method="post" >
	Nome:<br />
	<input type="text" name="nome" id="nome" /><br />
	Email:<br />
	<input type="text" name="email" id="email" /><br />
	Senha:<br />
	<input type="password" name="senha" id="senha" /><br />
	Confirmação de Senha:<br />
	<input type="password" name="conf_senha" id="conf_senha" /><br />
	Aceito os termos e condições:<br />
	<input type="checkbox" name="termos" id="termos"/><br />
	<input type="submit" value="Cadastrar" />
</form>

E a validação:

<script type="text/javascript">
	$(document).ready(function(){
		$('#meu_form').validate({
			rules:{
				nome:{
					required: true,
					minlength: 3
				},
				email: {
					required: true,
					email: true
				},
				senha: {
					required: true
				},
				conf_senha:{
					required: true,
					equalTo: "#senha"
				},
				termos: "required"
			},
			messages:{
				nome:{
					required: "O campo nome é obrigatorio.",
					minlength: "O campo nome deve conter no mínimo 3 caracteres."
				},
				email: {
					required: "O campo email é obrigatorio.",
					email: "O campo email deve conter um email válido."
				},
				senha: {
					required: "O campo senha é obrigatorio."
				},
				conf_senha:{
					required: "O campo confirmação de senha é obrigatorio.",
					equalTo: "O campo confirmação de senha deve ser identico ao campo senha."
				},
				termos: "Para se cadastrar você deve aceitar os termos de uso."
			}

		});
	});
</script>

No formulário acima temos os campos e validações:
Nome: Obrigatório e no mínimo 3 caracteres.
Email: Obrigatório e Email Válido.
Senha: Obrigatória.
Confirmação de Senha: Obrigatória e idêntica a “senha”.
Termos e Condições: Obrigatório.

Faça o download dos arquivos.

No site do Jquery, você encontra uma lista de validações padrão, embutidas no plugin Validate.

Espero que tenham gostado.
[ratings]

Para compartilhar use este link:


http://migre.me/Hkk4
]]> http://www.emersoncarvalho.com/validando-formularios-com-jquery-validate/feed/ 11 Jquery Validation Campo único (login, email,etc…) http://www.emersoncarvalho.com/jquery-validation-campo-unico/ http://www.emersoncarvalho.com/jquery-validation-campo-unico/#comments Mon, 19 Apr 2010 13:30:59 +0000 @emersonbroga http://www.emersoncarvalho.com/?p=58 Após um bom tempo sem postar, estou de volta.

Dessa vez eu vou falar um pouco sobre o jQuery Valitation um plugin do jQuery para validação de campos.
Vou abordar sobre uma validação remota que está presente nesse plugin e é muito útil para validar campos únicos em formulário.

Por exemplo, no seu site, você tem um formulário de cadastro que tem os campos login e senha, mas o campo de login deve ser único e você quer fazer essa validação usando o plugin Validation.

1º passo: Incluir o jQuery e o plugin Validation ao seu html:

<!-- Inclusão do Jquery -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js" type="text/javascript"><!--mce:0--></script>
<!-- Inclusão do Jquery Validate -->
<script src="http://ajax.microsoft.com/ajax/jquery.validate/1.6/jquery.validate.js" type="text/javascript"><!--mce:1--></script>

2º passo: Criar o formulário:

<form id="meu_form" method="post">
Login:
<input id="login" name="login" type="text" />
Senha:
<input id="senha" name="senha" type="password" />
<input type="submit" value="Cadastrar" />
</form>

3º passo: Fazer a validação

<!-- Validação do forumlário -->
$(document).ready(function(){
				$('#meu_form').validate({
					rules:{
						login:{ required: true, remote: 'verifica.php' }
					},
					messages:{
						login:{ required: 'Este Campo é obrigatorio' , remote: 'Este Login já está em uso.'}
					}

				});
			});

Repare que o campo ‘login’ tem a validação ‘required’ (campo obrigatório) e a validação ‘remote’ (remota), sendo assim quando o usuário acaba de digitar o login ele vai no servidor e passa esse valor via GET

Pelo firebug podemos observar a requisição sendo feita ao servidor:
validation_campo_unico_1

Como no validate colocamos remote: ‘verifica.php’ , é enviado o parametro login (nome do campo) e o valor digitado.
No arquivo verifica.php, recebemos esse valor com o $_GET['login'] , fazemos a consulta no banco e então

//Se o login já existir você exibe false
echo 'false';
//Se o login não existir
echo 'true';

pois essa verificação retorna ao validate se o campo é válido ou não.

Veja o Demo.

Faça o download dos arquivos.

Espero que tenham gostado.
Obrigado pela visita.

Dê sua nota: [ratings]

]]> http://www.emersoncarvalho.com/jquery-validation-campo-unico/feed/ 20 Retornar o valor Default ao input com JQuery http://www.emersoncarvalho.com/retornar-o-valor-default-ao-input-com-jquery/ http://www.emersoncarvalho.com/retornar-o-valor-default-ao-input-com-jquery/#comments Sun, 06 Dec 2009 11:30:51 +0000 @emersonbroga http://www.emersoncarvalho.com/?p=15 E aí galera… tudo joia??
Vou passar hoje uma dica bem util para usabilidade do site.
Geralmente a gente coloca um textinput de busca, com o value=”busca”, aí a gente que quando o cara colocar
o mouse lá pra digitar algo esse valor saia de lá …e se ele sair do campo sem digitar nada o value=”busca” volte.
Isso é uma mágica muito simples de se fazer com jQuery :

        //Input id="input-busca"
        $busca = $('#input-busca');
	$busca.blur(function(){
		if( $busca.val() == ''){
			$busca.val('Pesquisar');
		}
	});
	$busca.focus(function(){
		if( $busca.val() == 'Pesquisar'){
			$busca.val('');
		}
	});

muito simples né … mas quem tiver dúvidas pergunte nos comentários.

Update:
Com javascript puro, tambem é facil de fazer.
Por exemplo um input “Pesquisar”, basta você colocar diretamente no input os atributos onBlur e on Focus:

onFocus="javascript: if( this.value == 'Pesquisar' ){ this.value = '' } " onBlur="javascript: if( this.value == ''){ this.value= 'Pesquisar'}"
]]> http://www.emersoncarvalho.com/retornar-o-valor-default-ao-input-com-jquery/feed/ 1