Passando uma função como parâmetro para outra função em javascript

Uma coisa que é muito comum, com a popularização dos frameworks/bibliotecas javascript, é passar uma função como parâmetro para outra, e essa função ser executada depois de algum evento (finalizar uma requsição assíncrona ou acabar o drag"n drop de um elemento, por exemplo).

Mas, como funciona isso? Simples: no javascript, uma function é um Object do javascript. Com isso, ela pode ser passada como parâmetro com a mesma sintaxe de uma variável. Um bom exemplo é:

function myFunction() {
  //faz algo
}

function wrapper(parameter) {
 //faz algo
}

wrapper(myFunction);

No caso, passamos para a função wrapper a função myFunction como parâmetro.

Agora, como fazer para que essa função seja chamada dentro da função wrapper()? Toda função do javascript tem alguns métodos padrão. Um deles é o call(), que com que a função seja exetucada.

function wrapper(parameter) {
    parameter.call(); //executa parameter, que no caso é a função passada como parâmetro
}

Uma boa prática é checar se o parâmetro é mesmo uma função. Para isso, usamos a função typeof() que verifica o tipo do objeto:

function wrapper(parameter) {
    if(typeof(parameter)=="function")
        parameter.call();
}

Segue abaixo o exemplo completo do código para testes:

<html>
<head>
<title>Passando uma função como parâmetro para outra</title>
<script type="text/javascript">
function wrapper(parameter) {
    if(typeof(parameter)=="function")
        parameter.call();
}
function myFunction() {
    alert("teste");
}
wrapper(myFunction);
</script>
</head>
<body>
</body>
</html>

Ao rodar esse exemplo, deverá aparecer na tela um alert com o "teste" impresso.

No próximo post vou explicar como passar além da função outros parâmetros e fazer com que a função wrapper() reconheça os mesmos e repasse para a função myFunction().

Crie um cronômetro em javascript

Como saber qual forma de implementar um código em javascript roda mais rápido, com melhor perfomance? Ou, ainda, qual browser interpreta um código mais rápido?

Criei uma classe bem simples: instancia-se ela, chama o método start() para iniciar o cronômetro e o stop() para parar. O stop() retorna a diferença de tempo em segundos.

A implementação da classe é:

/*
classe para contador de tempo
*/
function TimeCounter() {
    this.startDate = null;
    this.ellapsedTime = null;
       
    //inicia o timer
    this.start = function() {
        this.startDate = new Date();
    }
       
    /*
    para o timer e retorna a diferença entre a hora atual e a em que foi startado/ dividindo
    por mil pois a diferença é dada em milisegundos
    */
    this.stop = function() {
        return (new Date() – this.startDate)/1000;
    }
}

Segue um uso da mesma; ao carregar a página (onload() da janela) inicio o cronômetro e crio 1000 divs, adicionando-as ao body. Após acabar o laço, paro o cronômetro. *faça o teste em diversos browsers e veja a diferença de performance

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Time Counter</title>
<script type="application/javascript">
    function TimeCounter() {
        this.startDate = null;
        this.ellapsedTime = null;

        this.start = function() {
            this.startDate = new Date();
        }
       
        this.stop = function() {
            return (new Date() – this.startDate)/1000;
        }
    }
   
    var timeCounter = new TimeCounter();
    window.onload = function() {
        timeCounter.start();
        for(var i=0; i<1000; i++) {
            var div = document.createElement("div");
            div.appendChild(document.createTextNode(i));
            document.body.appendChild(div);
        }
        alert(timeCounter.stop());
    }
</script>
</head>
<body>
</body>

Exiba seus últimos twits no seu blog

Quer mostrar suas últimas mensagens enviadas no Twitter (não sabe ainda o que é o Twitter?) no seu site/blog? Sem nenhuma programação server-side?

Simples. O próprio pessoal do Twitter desenvolveu uma biblioteca javascript na qual você só precisa inserir o username (o usuário não pode ter as mensagens privadas) e dizer quantas mensagens quer exibir.

<script type="text/javascript" src="http://twitter.com/javascripts/blogger.js"></script>
            <script type="text/javascript" src="http://twitter.com/statuses/user_timeline/nome_do_usuario.json?callback=twitterCallback2&amp;count=quantidade"></script>

Troque o nome_do_usuario pelo username do Twitter e o quantidade pela quantidade de mensagens.

Feito isso, crie uma lista ul com o id igual a twitter_update_list.

<ul id="twitter_update_list">
</ul>

É onde as mensagens serão exibidas!