Pesquisa personalizada

Por que usar o “var” nas declarações de variáveis?

19/06/2009 - 12:53 2 comentários

Se você sempre se perguntou o motivo de usar a palavra “var” nas declarações de variáveis em Javascript agora vão ter uma idéia do porquê.

Quando se referimos a uma variável global (uma variável fora das funções) podemos usar ou não a palavra “var”, pois não existe diferença funcional e sim por causa do escopo. Agora se você quer utilizar em uma função uma variável com o mesmo nome de outra que já é declarada como global e não declarar com o “var” você estará alterando a variável global. Se você quer que o valor da variável seja usada apenas dentro do escopo da sua função, então utilize a palavra “var”.

Neste exemplo a função altera o valor da variável global:

<script type="text/javascript">
    var variavelGlobal = 'Variavel Global';

    function alteraValor() {
        variavelGlobal = 'Variavel Global Alterada';
    }

    alteraValor();

    alert(variavelGlobal);
</script>

Neste outro a função apenas declara uma variável de mesmo nome, porém é usada apenas no escopo da função:

<script type="text/javascript">
    var variavelGlobal = 'Variavel Global';

    function alteraValor() {
        var variavelGlobal = 'Variavel Global Alterada';
    }

    alteraValor();

    alert(variavelGlobal);
</script>

Abs,
Chapoo

Autor: Chapolin - Categoria(s): Javascript Tags: , , , , , , ,

Como fazer um scroll em php

13/05/2009 - 12:22 Nenhum comentário

Caros,

Algumas pessoas procuram na internet com fazer um scroll ou uma barra de rolagem e mencionam fazer com o php, está errado!

Gostaria de explicar que o scroll não tem ligação com o php e sim somente com o javascript, no máximo com o css que irá ajudar você a decorar o seu scroll. Segue como fazer um scroll para html “Fazendo um scroll personalizado e simples“.

Dúvidas é só falar!

Abs,
Chapoo

Autor: Chapolin - Categoria(s): Javascript, Utilidade pública Tags: , , , , , ,

Classe para Redimensionar Objetos

06/05/2009 - 19:08 Nenhum comentário

Caros,

Segue uma classe que a muito tempo queria colocar mas por alguns detalhes não tinha como. É uma classe que serve para redimensionar objs html.

Para testar, baixe o arquivo zipado.

Neste script estou usando uma classe estática Rel onde é util para várias outras coisas.

Baixar o arquivo redimensionar

Bom, até mais!

Abs,
Chapoo

Autor: Chapolin - Categoria(s): Javascript, Orientação a objetos Tags: , , , , , , ,

Solução alternativa do Delegate

29/12/2008 - 10:29 7 comentários

Em muitos casos que postei aqui e também em situações profissionais usei o Delegate (post anterior) e simplesmente ele resolveu vários problenas quando estava trabalhando com classes e perdia o escopo do objeto em alguns métodos.

A pouco, desenvolvendo uma nova classe, me deparei com um problema chato.

Seguem as Situações:

Tinha numa classe, no método [this.iniciar] um código que seria executado quando um evento ocorresse, mas ao passar o método para o evento, das duas uma: Ou Conseguia pegar o evento e o escopo era perdido (situação 1) ou tinha o escopo (usando o Delegate) porém não tinha o evento :( (situação 2). Segue abaixo os exemplos:

Situação 1:

...
this.iniciar = function() {
    document.onmousemove = this.verifica;
}

this.verifica = function(e) {
    // Tenho o evento mas não tenho o escopo
}
...

Situação 2:

...
this.iniciar = function() {
    document.onmousemove = Delegate.create(this, this.verifica, Array(''));
}

this.verifica = function(e) {
    // Tenho o escopo mas não tenho o evento
}
...

Consegui resolver o problema da seguinte maneira:

NomeDaClasse = function() {
    with(this) {
        ...
        this.iniciar = function() {
            document.onmousemove = this.verifica;
        }

        this.verifica = function(e) {
            // Tenho o evento
            // Tenho o escopo
            teste(); // Não use o this.teste();
        }

        this.teste = function() {
            alert('Estou no escopo');
        }
        ...
    }
};

Imaginei que usando o with poderia ser uma luz e não acreditei que isso funcionaria até testar!!!

Obs.:
- No exemplo acima, se você usar o [this] dentro do evento, ou seja, dentro do método [this.verifica] você estará no escopo do objeto [document].
- Se você tiver uma função fora da classe com o nome idêntico de algum método da classe não vai dar conflito, porém você não vai acessar a função externa também!

Abs,
Chapooo!

Autor: Chapolin - Categoria(s): Javascript, Orientação a objetos Tags: , , , , , , , , , ,

Classe Delegate

18/12/2008 - 12:15 2 comentários

Caros,

Quando você está programando em Javascript Orientado a Objetos, você pode se deparar com diversos problemas e um deles é a perda de escopo do objeto (this). Uma solução simples é usar a classe Delegate, em poucas palavras ela executa uma função/método no contexto do objeto original.

Segue a classe abaixo:

// No Google...  - Estático
Delegate = {
    versao: "1.0"
}

Delegate.create = function(obj, func, args) {
    f = function() {
        var target = arguments.callee.target;
        var func   = arguments.callee.func;
        var args   = arguments.callee.args;

        return func.apply(target, (args.length < 1 ? arguments : args));
    };

    f.args = (args != undefined && args.length > 0 ? args : new Array());
    f.target = obj;
    f.func = func;

    return f;
}

Outra forma bacana e mais simples que achei:

Delegate = {
	create: function (obj, func, params) {
		var f = function() { return func.apply(obj, params); };

		return f;
	}
}

Exemplo da implementação:

...
this.a = function() {
// Não chame a função this.b() desta forma,
// pois ela executará antes do tempo correto
	setTimeout(Delegate.create(this, this.b, Array('')), 1000);
}

this.b = function() {
	alert(this.c());
}

this.c = function() {
	return 'Olá';
}
...

Essa classe me quebrou vários galhos.

Abs,
Chapoo

Autor: Chapolin - Categoria(s): Javascript, Orientação a objetos, Utilidade pública Tags: , , , , , , , , ,