web 2.0

JavaScript – Dicas

Estava trabalhando em um projeto utilizando javascript puro, sem utilizar jQuery. Precisei trabalhar com o formato JSON, porem meus objetos precisavam ser ordenados conforme a necessidade do sistema. Bem, depois de muitos testes vai uma dica:

01 - Ordenar objetos JSON

Listagem 01 – objeto JSON

var objJSON = [
      { "ID": 1, "Name": "Luciano Lima", "Email": "lima@lucianolima.com.br" },
      { "ID": 4, "Name": "Fabio Almeida", "Email": "fabio@lucianolima.com.br" },
      { "ID": 2, "Name": "Ricardo", "Email": "ric@lucianolima.com.br" },
      { "ID": 3, "Name": "Marcio", "Email": "marcio@lucianolima.com.br" }   
];

 

Acima temos o objeto que iremos ordenar. Vamos criar dois métodos, “OrdenarPorId(objA, objB)” e “OrdenarPorNome(objA, objB)”.

Listagem 02 – métodos de ordenação

function OrdenarPorId(objA, objB) {
  return objA.ID - objB.ID; 
}

function OrdenarPorNome(objA, objB) {
  return ((objA.Name == objB.Name) ? 0 : ((objA.Name > objB.Name) ? 1 : -1 ));
}


Ok. Agora que temos nossos dois métodos podemos realizar a ordenação do objeto. Mas como isso funciona? Bem, para que consigamos realizar a ordenação devemos chamar o método “sort()” que é nativo de objetos do tipo Array, passando nossos métodos como callback. Quanto do  o método “sort()” for iniciar a ordenação, ele vai enviar os objetos para nossos métodos, eles irão realizar a ordenação e retornar para o método “sort()”, assim caso precisemos de outra forma de ordenação, basta criar um terceiro método da forma que lhe convier.

Na listagem abaixo temos a forma de como invocar nossa ordenação. Criei apenas mais um método para exibir a saída.

Listagem 03 – invocando a ordenação

function Exibir(obj) {
    for (var o in obj)
        document.writeln("Id " + obj.ID + ", Nome " + obj.Name + ", Email " + obj.Email);
}

// Chamada ao objeto original
Exibir(objJSON);

// Chamada ao objeto ordenando por ID
objJSON.sort(OrdenarPorId);
Exibir(objJSON);

// Chamada ao objeto ordenando por Nome
objJSON.sort(OrdenarPorNome);
Exibir(objJSON);

 

02 - Método para Formatar uma String

Como todos sabem o Javascript ainda tem que melhorar muito, no mesmo projeto que estava utilizando o JSON como padrão dos objeto, precisei formatar uma string para um padrão definido pelo usuário, porém minha surpresa foi que a “classe” “String” do javascript não possui um método “format” então fui obrigado a criar uma implementação, espero que aproveitem.

Listagem 01 – implementação do método format

function _formatInline() {
    var _value = this;
    for (var i = 0; i < arguments.length; i++) {
        var regExp = new RegExp('\\{' + (i) + '\\}', 'gm');
        _value = _value.replace(regExp, arguments[i]);
    }

    return _value;
}

function _formatStatic() {
    for (var i = 1; i < arguments.length; i++) {
        var regExp = new RegExp('\\{' + (i - 1) + '\\}', 'gm');
        arguments[0] = arguments[0].replace(regExp, arguments[i]);
    }
    return arguments[0];
}

if (!String.prototype.format) {
    String.prototype.format = _formatInline;
}

if (!String.format) {
    String.format = _formatStatic;
}

 

Para utilizarmos esta implementação basta chamar o método “format” direto de uma string ou utilizar a classe String conforme na listagem 02.

Listagem 02 – utilização

// implementação com String.format
var text = String.format("Esta {0} será formatada com {1} {2}","sentença","nosso","método");

// implementação com "".format
var text = "Esta {0} será formatada com {1} {2}".format("sentença","nosso","método");

 

Enjoy!!

Tags:

JavaScript | Desenvolvimento Web | jQuery

jQuery – Truques e Dicas


Dica 01 -
Prevenir “Recortar”, “Copiar” e “Colar” informações de um TextBox.

É bem útil quando estamos criando formulário onde o usuário deve digitar o e-mail em um campo e digitá-lo novamente em outro para que possamos verificar se os mesmos são idênticos.

Listagem 01

<html>
<script type="text/javascript">
$(document).ready(
    function() {
        $("#txtName").bind('cut copy paste', function(e){
            e.preventDefault();
            var _type = "";
            
            switch(e.type)
            {
                case "cut": 
                    _type = "cortar";
                break;
                case "copy": 
                    _type = "copiar";
                break;
                case "paste": 
                    _type = "colar";
                break;
            }

            alert("Voce nao pode " + _type + " o texto");
        });
    });
</script>
 <body>
    <div id="hello">
    <input type="text" id="txtName" />
    </div>
 </body>
</html>


O que fizemos foi definir no método bind() do jQuery quais eventos estamos monitorando, coloquei um “switch” para podermos exibir as informações em português, verificamos qual deles foi lançado e fazemos a conversão, tudo muito simples.

Dica 02 – Prevenir digitação de letras ou números

Listagem 02 – permitir somente números

<html>
<script type="text/javascript">
$(document).ready(
    function() {
        $("#txtName").bind('keyup blur', function(e){
            e.preventDefault();
            
            if(this.value.match(/[a-zA-Z]/g))
            {
                this.value = this.value.replace(/[a-zA-Z]/g,'');
            }
        });
    });
</script>
 <body>
    <div id="hello">
    <input type="text" id="txtName" />
    </div>
 </body>
</html>

Listagem 03 – permitir somente letras
<html>
<script type="text/javascript">
$(document).ready(
    function() {
        $("#txtName").bind('keyup blur', function(e){
            e.preventDefault();
            
            if(this.value.match(/[0-9]/g))
            {
                this.value = this.value.replace(/[0-9]/g,'');
            }
        });
    });
</script>
 <body>
    <div id="hello">
    <input type="text" id="txtName" />
    </div>
 </body>
</html>

Novamente utilizamos a função “bind()” para monitorarmos os eventos keyup e blur.
Utilizamos também expressão regular para informar, no primeiro código, que não são permitidas a inserção de letras no campo “/[a-zA-Z]/g”.

No segundo código invertemos, fazendo com que sejam permitidas entrada de caracteres não numéricos “/[0-9]/g”.


Dica 03 – evite chamar o mesmo objeto várias vezes

Muitas vezes precisamos carregar um objeto para podermos trabalhar com ele, a maioria dos programadores fazem como na listagem abaixo:

Listagem 04

$('#txtName').css('background-color', '#00f0a0');
$("#txtName").val("digite seu nome");
$('#txtName').addClass('inputbord');
$('#txtName').show(1000);

Porem devemos carregar o objeto apenas uma vez conforme abaixo:

Listagem 05
var objName =  $('#txtName');
    objName.css('background-color', '#00f0a0');
    objName.val("digite seu nome");
    objName.addClass('inputbord');
    objName.show(1000);

Desta forma mantemos a variável em cache e pronta para uso!

Estas são dicas bem simples mas que muitas vezes são bem úteis, espero que aproveitem.

Tags:

jQuery | Desenvolvimento Web

jQuery terá suporte Microsoft

A Microsoft começará a atuar junto à equipe de desenvolvimento da biblioteca jQuery para acelerar a criação de novos recursos que irão facilitar a criação de aplicativos web que possam rodar em qualquer plataforma.

A novidade foi feita por Scott Guthrie, vice-presidente da Plataforma de Desenvolvimento .NET da Microsoft, durante o MIX10 em São Francisco, nos Estados Unidos.

O objetivo aqui é ajudar a garantir que este seja um dos principais meios para o desenvolvimento de aplicativos web cliente baseados em JavaScript.

Para ler mais clique aqui

Tags:

jQuery | Desenvolvimento Web