24/05/2012

Parâmetros opcionais em javascript

Boa tarde pessoal, faz muito tempo que não escrevo, mas arrumei um tempinho pra falar de algo bem útil que muita gente faz algumas gambiarras para solucionar algo tão simples, que é ter parâmetros opcionais em métodos de sua aplicação.

O que isso quer dizer?

Sem mais delongas, vamos ao seguinte código:

function doSomething(a, b, c) {
	console.log(a);
	console.log(c);
	console.log(c);
}

No código acima, temos uma simples função recebendo 3 parâmetros (a, b, c). Esta é a maneira mais rústica de se criar uma função em javascript, porém, em determinadas aplicações, e para determinadas situações, esta forma pode ser não recomendável caso sua aplicação precise de mais parâmetros para aquela função, e futuramente você terá que modificar sua função para outros e outros parâmetros.

Então, o que fazer para que eu possa ter parâmetros “ilimitados”?

Algo muito simples que quase ninguém nunca notou, é que toda vez que uma função é executada, ela traz consigo uma variável dentro do escopo chamada “arguments”. Exatamente o que você agora pensou: “AAAAAAAAAAhhhhhhhhhhhhhhhhhhhhhhhhhhhhh, agora ta tudo explicaaaaaaaaaado, vou refazer todos os sitemass!!!!!”. É bem por aí! Agora que você sabe como esta variável pode funcionar, vamos ver na prática a criação de uma função com este recurso da linguagem:

function doSomething() {
	console.log(arguments);
}

Você perceberá que foram omitidos quaisquer parâmetros que possam ser passados para a função. Então, desta maneira, eu posso executar esta função da seguinte forma:

doSomething({a: [1 ,2 ,3, 4, 5]}, 'b', 'c', {hey: 'you', got: 'that?'});

Simples não? Agora você poderá ter funções mais flexívels, tornando sua aplicação mais robusta e sem necessidade de criar variáveis a toa.
Uma situação muito boa é na criação de plugins, quando parâmetros normalmente são objetos literais, e você não vai ficar criando variável a toa.

Espere o inesperado =)

, , ,
15/05/2012

jQuery: biblioteca ou framework?

Esta discussão não é recente. Na verdade, é um assunto muito polêmico, e não são os tão conhecidos mamilos. Até algum tempo atrás, no próprio site oficial, o jQuery se definia como um framework, e atualmente, deixam bastante explícito que é uma biblioteca. Mas por que tanta dúvida da comunidade e dos próprios desenvolvedores? Vamos tentar entender um pouco mais cada coisa, analisando diversas fontes do nosso universo online (não, não é um jabá!). Vejamos os conceitos…

Biblioteca (or Library)

“In computer science, a library is a collection of resources used to develop software. These may include pre-written code and subroutines, preses, values or type specifications.” Wikipedia/EN

“Na ciência da computação, biblioteca é uma coleção de subprogramas utilizados no desenvolvimento de software. Bibliotecas contém código e dados auxiliares, que provém serviços a programas independentes, o que permite o compartilhamento e a alteração de código e dados de forma modular.” Wikipedia/BR

Framework (or that even)

“A software framework is a universal, reusable software platform used to develop applications, products and solutions. Software Frameworks include support programs, compilers, code libraries, an application programming interface (API) and tool sets that bring together all the different components to enable development of a project or solution.” Wikipedia/EN

“Um framework, em desenvolvimento de software, é uma abstração que une códigos comuns entre vários projetos de software provendo uma funcionalidade genérica. Um framework pode atingir uma funcionalidade específica, por configuração, durante a programação de uma aplicação. Ao contrário das bibliotecas, é o framework quem dita o fluxo de controle da aplicação, chamado de Inversão de Controle.” Wikipedia/BR

jQuery

“jQuery is a new kind of JavaScript Library. jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is designed to change the way that you write JavaScript.” Site oficial do jQuery

Ou seja, o jQuery simplifica diversas coisas para um desenvolvimento mais rápido. jQuery é projetado para mudar a maneira que você escreve JavaScript. Mas ele não dita qual a estrutura nem qual o fluxo em que sua aplicação deve ser montada, consequentemente, por esses e outros motivos, não deve ser considerado um framework.

jQuery Mobile

“jQuery’s mobile strategy can be summarized simply: A unified user interface system that works seamlessly across all popular mobile device platforms, built on the rock-solid jQuery and jQuery UI foundation.” Site oficial do jQuery Mobile

Quem conhece o jQuery Mobile, em seu Getting Started, já ditam qual o modelo em que sua aplicação deve seguir para poder utilizá-lo. Todas as seções, listas, navegação, campos de formulário, devem seguir à risca o modelo, a menos que seja configurado diferentemente. Com isso, todo o Javascript, CSS e imagens do framework serão utilizados para facilitar o trabalho do desenvolvedor.

And now?

Pois é, terminologia sempre geram dúvidas. Mas analisando as fontes diferenciadas, conseguimos ter uma ideia mais aprofundada. Em suma, um framework é algo que normalmente obriga uma certa forma de implementação da solução. A biblioteca, como seu próprio nome diz, é um acervo, que contém funções/métodos/padrões que irão facilitar o trabalho do desenvolvedor.

10/05/2012

Redirect e scroll to com jQuery

Há muito tempo (muito mesmo, em 2009) eu fiz um post no meu blog sobre scroll to – scroll animado com jQuery. Devido algumas pessoas estarem com dúvidas de como fazer isso mas após um redirect de página, estou criado esse tutorial.

Scroll to

O código do Scroll to é bem simples, como já dito em meu site:

$('html, body').animate({
    scrollTop: $("#id_da_ancora").offset().top
}, 2000);

Após o redirect

A execução continua simples, o que muda é o momento da execução do script. No modelo normal, seria executado quando acontecesse algum click (provavelmente em algum link), porém aqui será no load da página.
A única coisa que precisamos é receber via QueryString qual será o id do elemento.

OBS: caso sempre seja um elemento específico nessa tela, poderá setar diretamente no onload

Código

//verifico se existe hash na url (caso não tenha, não preciso fazer o scroll)
if (window.location.hash) {
    //pego a hash
    var hash = window.location.hash
    //animo até meu elemento
    $('html, body').animate({
        scrollTop: $(hash).offset().top
    }, 2000);
}
​

E para adicionar essa hash na minha url, basta adicionar #id_do_elemento no final do href do link. Ex: href="minhaoutrapagina.php#id_do_elemento"

Demo

Link para melhor visualização

08/05/2012

Conheça o jQuery Boilerplate: Entrevista com Zeno Rocha

Trabalhar com jQuery ou Javascript e não conhecer Zeno Rocha é bem difícil, mas mesmo assim não vou deixar de apresentá-lo. Ele tem 21 anos e já tem muita história para contar. Foi desenvolvedor de software na Petrobrás, e hoje trabalha no Globoesporte.com, estuda Sistemas de Informação na Universidade Federal do Estado do Rio de Janeiro (UNIRIO) e ainda tem tempo para implementar um bocado de ideia open-source, como o jQuery Boilerplate (no qual iremos falar neste post) e o Wormz do Chrome Experiments.

Particularmente falando, eu já conhecia Zeno remotamente, mas só o conheci pessoalmente no Pernambuco.JS, evento que participei da organização e ele era um dos palestrantes. O jQuery Boilerplate é apenas um de seus projetos, e conhecer esta iniciativa será bem inspiradora para todos nós que trabalhamos com desenvolvimento web. Acabando um pouco com o blá-blá-blá, vamos partir para o objetivo do post!

O que é?

O jQuery Boilerplate é um pontapé inicial para os desenvolvedores construirem plugins jQuery. Um conjunto de boas práticas que visam te auxiliar nesse processo.

Como surgiu a ideia?

A ideia surgiu enquanto estava no trabalho, na época ainda trabalhava para Petrobras e notei que a lógica que estava codificando poderia ser útil para outras partes do sistema. Na hora pensei: “Bem que isso poderia se transformar em um plugin jQuery”.

Dei uma pesquisada no nosso amigo Google em busca de encontrar um modo para construí-lo e me deparei com dezenas de abordagens diferentes. Aquilo me deixou confuso e pensei: “Por que não criar um padrão definitivo contendo as melhores práticas, já que ninguém o fez antes?”.

Algumas semanas antes disso, tinha palestrado no Front in Rio sobre o HTML5 Boilerplate e estava encantado com esse projeto. O que não me fez pensar duas vezes, o nome seria jQuery Boilerplate.

Corri atrás para descobrir se o domínio estava disponível. Impulsivo, saquei o cartão de crédito e comprei naquela hora mesmo. Começava aí minha saga em tentar estabelecer o padrão mais famoso para o desenvolvimento de plugins jQuery.

E um pequeno detalhe, nunca tinha criado nenhum plugin antes.

Como começou o projeto?

O primeiro passo foi entrar em contato com Paul Irish, o líder do projeto HTML5 Boilerplate na época. Minha ideia era utilizar o mesmo conceito e identidade visual deles, o que foi negado já que eles acharam melhor não vincular as coisas. Tudo bem, segui em frente, sozinho mesmo.

Comecei a estudar bastante o assunto, até que conheci Stefan Gabos, um desenvolvedor romeno que também estava desenvolvendo algo do tipo. Juntamos forças e chegamos em uma primeira versão. Preparei o site em inglês e lancei!

No primeiro dia (24/07/11) o site teve 64 visitas. No segundo, 2.767! O motivo desse boom tão repentino foi um simples tweet da Smashing Magazine, expondo o projeto para o mundo.

A repercussão foi grande e rapidamente chegou aos ouvidos do Core Team do jQuery, tudo ia bem até que recebo o seguinte Pull Request no Github:

O padrão proposto foi duramente criticado. E com razão, pois feria princípios importantíssimos da criação de plugins, estava na hora de mudar.

Foi então que surgiu Adam J. Sontag, desenvolvedor do Core do jQuery e jQuery UI, muito solicito em expor quais eram os problemas do projeto. Além de Addy Osmani que estava iniciando a escrita do livro Essential JavaScript & jQuery Design Patterns e por isso muito interessado no assunto.

Juntos chegamos ao que temos hoje.

Muitas pessoas utilizam?

Muitas! Hoje em dia o repositório do Github possui mais de 600 viewers e cerca de 100 forks. Só de acessos no site, já passam mais de 40 mil. O problema é que dessas 40 mil visitas, apenas 6% são oriundas do Brasil, os EUA lideram com 47% das visitas.

Quais as novidades do projeto?

A mais expressiva é o lançamento da tradução do site para português, algo que eu vinha procastinando há muito tempo, mas que criei vergonha na cara e terminei semana passada.

Recentemente, também foi incorporado, em uma branch separada, o uso de Rake para o pessoal que utiliza Ruby. Pra quem não conhece é uma ferramenta de build muito útil que realiza tarefas como minificação, validação do código com JSHint, compilação de CoffeeScript e etc.

E quais são os planos para o futuro?

Por muito tempo não me dediquei muito em torná-lo público, mas a adoção pelo mundo tem sido incrível e meu objetivo agora é disseminar isso ainda mais aqui no Brasil.

Portanto, aos poucos algumas ações tem sido feitas, o primeiro passo foi a tradução, lançada juntamente com o artigo “Tudo que você gostaria de saber sobre plugins jQuery e ninguém teve paciência de explicar” no Tableless, isso sem contar essa própria entrevista.

Além disso, estão previstas traduções para outros idiomas, a integração com o Grunt para facilitar a vida de quem usa NodeJS e quem sabe um gerador. Ou seja, muito trabalho pela frente e se você quiser ajudar é só chegar lá nas issues do Github.

Alguma mensagem final para os nossos leitores?

Coloque a cara pra bater, mostre seu código para o mundo. Fique atento, observe o que acontece na sua área. Eu tive uma ideia, achei que tinha potencial e coloquei no ar, só isso. Fui criticado, aprendi muito e hoje o projeto é um sucesso.

Hoje eu expus detalhes de uma história pessoal na esperança de inspirar outras pessoas a se envolver mais com esse mundo open source. Muita gente acaba não fazendo isso com a desculpa de não ter tempo, se você é uma delas pare com esse blá blá, durma menos e coloque alguma coisa no ar, você vai se surpreender com a proporção que isso pode tomar.

27/03/2012

Criando elementos com jQuery

Desde sua primeira versão, a biblioteca jQuery possui a funcionalidade de criar elementos de forma eficiente com a função jQuery(). Porém muitas vezes os desenvolvedores acabam esquecendo desta funcionalidade e utilizando strings no formato de HTML para resultar em grupos de elementos.

Até a versão 1.9 da jQuery a função jQuery() convertia strings no formato de HTML em conjuntos de elementos. Por questões de proteção XSS a partir de jQuery 1.9 a função jQuery() só converte em um grupo de elementos strings iniciados em "<" (menor que). Caso haja a necessidade de converter um string que comece com um nó de texto por exemplo, você pode recorrer ao método jQuery.parseHTML(). (Leia mais em: jQuery(htmlString) versus jQuery(selectorString))

Exemplo:

$.parseHTML('Nome: <input type="text" name="nome" />').appendTo('form');

Para evitar o uso de strings ao criar elementos você pode passar como primeiro parâmetro da função jQuery() um string no formato de tag HTML e como segundo parâmetro suas propriedades.

Exemplo:

$('<a>',{
	href : 'http://jquerybrasil.org',
	target : '_blank',
	text : 'jQuery Brasil'
});

O resultado é:

<a href="http://jquerybrasil.org" target="_blank">jQuery Brasil</a>

As propriedades passadas no objeto do segundo parâmetro não se resumem apenas em attributos, você também pode usar algumas das funções da jQuery, como por exemplo a função .css() que se destina a estilizar elementos ou a função .data() que se destina a armazenar dados no elemento.

Exemplo:

$('<div>',{
	id : 'box',
	css : {
		width : 100,
		height : 100,
		background : '#000'
	},
	data : {
		name : 'box'
	}
});

O resultado é:

<div id="box" style="width:100px;height:100px;background:rgb(0,0,0);"></div>

Você também pode delegar eventos:

$('<a>',{
	href : 'http://jquerybrasil.org',
	target : '_blank',
	text : 'jQuery Brasil',
	click : function(event) {
		event.preventDefault();
	}
});

No jQuery 1.8 uma nova funcionalidade foi implementada, você pode usar alguns manipuladores DOM para trabalhar com o elemento sem a necessidade de encadear mais funções.

O exemplo abaixo cria um elemento div, inclui dentro dele uma âncora e em seguida o insere como ultimo elemento de body.

$('&lt;div&gt;',{
	append : $('<a>',{
		href : 'http://jquerybrasil.org',
		target : '_blank',
		text : 'jQuery Brasil'
	}),
	appendTo : 'body'
});

Você também pode usar animate, html, prepend, prependTo, insertAfter e insertBefore dentre outros.

Gostou ou tem algo a acrescentar? Então não esqueça de comentar ^^!

23/03/2012

Lançado jQuery 1.7.2

Chegou a versão 1.7.2, já esta disponível para download através do CDN:

Compatibilidade com o jQuery Mobile

Essa versão só é compatível com a versão 1.1 do jQuery Mobile, para quem utiliza versões anteriores do jQuery Mobile, continue usando o jQuery 1.7.1 ou anterior.

Post do blog do jQuery.

21/03/2012

jQuery 1.9 beta

A versão beta de jQuery 1.9 já está disponível. Você pode testar a nova versão agora mesmo e se você encontrar algum problema, use o Bug Tracker do jQuery para informar a equipe e ajudar a comunidade.

Você pode fazer download da nova versão clicando aqui. E caso você esteja interessado em saber sobre as novidades que a nova verão da biblioteca vai trazer, pode acessar o Upgrade Guide ou aguarde o nosso post sobre a versão 1.9 final que será escrito em breve em português.

13/02/2012

Caçando bugs na jQuery

Dan Heberden publicou no GitHub um pequeno script denominado jquery-include destinado a carregar qualquer versão da biblioteca jQuery em sua página web. Ora bolas! Por que alguém iria se importar com mais uma forma de carregamento da biblioteca jQuery se tantas e já consagradas formas existem?

O diferencial do script de Dan é a possibilidade de carregamento de qualquer versão da biblioteca com o simples acréscimo de uma query string no URL da página na qual pretendemos carregar a biblioteca. Suponha a página de um site, que usa a biblioteca jQuery versão 1.6.4, cujo URL é: http://site.com.br/exemplo.html.

O site em questão foi projetado há algum tempo, e, naquela ocasião a versão mais recente da biblioteca era a 1.6.4. Além disso o desenvolvedor usou o script de Dan para fazer a chamada da biblioteca jQuery em suas páginas.

Hoje (dia em que esta matéria foi escrita a versão da biblioteca é a 1.7.1 e já existe um versão beta, de testes, da 1.7.2 denominada 1.7.2b1. Pois bem! Quer testar o funcionamento do site com uso das versões 1.7.1 ou da 1.7.2b1? É muito provável que com a versão 1.7.1 tudo funcione normalmente, a menos que alguma funcionalidade prevista na versão 1.6.4 tenha sido tornado obsoleta e retirada da versão 1.7.1. Contudo se ao carregar a versão 1.7.2b1 algo sair errado é muito provável que você tenha encontrado um bug, e, mais, se o que saiu errado estiver certo quando for carregada a versão estável mais recente então: BINGO! você encontrou um bug e poderá contribuir com o time de desenvolvimento da jQuery reportando o bug encontrado preenchendo um formulário apropriado. E, o interessante disso é que não foi você quem desenvolveu o site e nem mesmo tem acesso FTP a ele. Você simplesmente abre a página do site no navegador, adiciona uma query string no URL e recerrega a página para chamar uma nova versão da biblioteca, como mostrado a seguir considerendo nossa página exemplo anterior:

http://site.com.br/exemplo.html?jqversion=1.7.2b1

O script de Dan

  (function(){
    // Verifica se existe uma query string jqversion no URL e armazena na variável verMatch.
    // Busca uma query string constituída somente de números, letras e ponto com a finalidade de impedir ataque XSS
    var verMatch = /jqversion=([\d\w\.]+)/.exec( location.search ),
        // versão encontrada, por exemplo: 1.6.4 or 1.7rc1
        version = verMatch && verMatch[1],
        src;
    if ( version ) {
      // A verificação da query string resultou em uma verão válida. Use o CDN da jQuery para lincar a versão (não comprimida, beta ou RC) encontrada
      src = 'code.jquery.com/jquery-' + version;
    } else {
      // A verificação da query string não resultou em uma versão válida. Use o CDN do Google (ou da jQuery ou da Microsoft) para lincar a versão comprimida
      src = 'ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min';
    }
    // cria uma tag script lincando para a versão
    document.write( '<script src="//' + src + '.js"><\/script>' );
  })();

  // Usa uma cópia local, como backup caso falhe o carregamento a partir do CDN. Nesse exemplo não usamos essa opção.
  if ( !window.jQuery ) {
    document.write( '<script src="/scripts/jquery-1.7.1.min.js"><\/script>' );
  }

O script foi comentado para facilitar seu entendimento, mas se você tem alguma dúvida, fique à vontade para perguntar na área de comentários.

Além disso você poderá comprovar o funcionamento do script na prática visitando essa página exemplo que desenvolvemos para essa finalidade específica.

Gostou? Use e o time da jQuery agradece

Que tal, a partir de agora, usar o script de Dan para “fazer a chamada” da biblioteca jQuery para as páginas que você desenvolver? O máximo que poderá acontecer é um site funcionando normalmente usando a versão da biblioteca que você escolheu. Contudo o máximo dos máximos é que você estará proporcionando aos desenvolvedores do mundo inteiro a oportunidade de caçar bugs nas versões de testes futuras usando seu site como suite de testes. E, é claro, o time de desenvolvimento da jQuery agradece.

Esta matéria foi transcrita do blog do Maujor, com prévia autorização.

31/01/2012

Sorteio do livro: jQuery Mobile

Capa do Livro jQuery Mobile do Maujor

Estamos divulgando mais uma ação em parceria com a novatec.

Trata-se de DOIS sorteios do livro jQuery Mobile lançado nesta semana. Para quem não conhece, o livro foi escrito por Maurício Samy Silva, mais conhecido como Maujor.

Site oficial do livro: http://www.jqmovel.com.br/

Como participar no Twitter?

O participante deverá seguir o @jquerybr e dar um RT na mensagem abaixo:

Estou participando do sorteio do livro jQuery Mobile escrito pelo @maujor e organizado pelo @jquerybr e @novateceditora http://kingo.to/YKg

Os comentários só serão aceitos até o dia 05/02/2012 às 23:59. O sorteio acontecerá no dia 06/02/2012. Boa sorte! :)

Como participar no Facebook?

O participante deverá:

As participações só serão aceitas até o dia 05/02/2012 às 23:59. O sorteio acontecerá no dia 06/02/2012. Boa sorte! :)

Resultado

Promoção Twitter: @AlineFernandes1

Promoção Facebook: /flavioricardo91

Resenha do livro

jQuery Mobile é um framework para o desenvolvimento de aplicações web para dispositivos móveis. Adota um sistema unificado de interface de usuário, com base em HTML5 e CSS3 e, com uso de JavaScript de alto nível, gera um código compatível com uma ampla variedade de plataformas. Tem como base de construção as bibliotecas jQuery e jQuery UI, o que garante uma curva de aprendizado rápido, possibilitando desenvolver com facilidade interfaces de usuário de alta qualidade e com código extremamente otimizado para os principais navegadores desktop, smartphones e tablets, como iPad, iPhone, Android, Blackberry, Windows Phone e Nokia.

Utiliza um sistema de navegação entre as páginas da aplicação, baseado em AJAX, que proporciona o carregamento rápido das páginas, com economia de banda, além de oferecer várias opções de animação na transição entre páginas. Fornece widgets pré-configurados e estilizados, prontos para uso, que atendem à maioria das necessidades do layout de uma aplicação web, tais como barras de navegação, páginas, janelas modais, botões e listas, entre outros, todos criados por mecanismos internos do framework, a partir de marcação HTML5 simples. Além de disponibilizar uma folha de estilos CSS padrão, com cinco paletas de cores, também permite a criação de paletas personalizadas, a partir da folha de estilo padrão ou com o uso da ferramenta ThemeRoller.

Maujor, em mais um livro pioneiro em língua portuguesa, se propõe a difundir o uso desse fantástico framework, abordando as funcionalidades do jQuery Mobile de forma clara, em linguagem didática, com muitos exemplos práticos. No site do livro (http://jqmovel.com.br) você poderá ver esses exemplos em funcionamento.

O livro tem os seguintes objetivos:

  • Apresentar o framework jQuery Mobile relatando as motivações e o histórico de seu desenvolvimento.
  • Estudar a aplicação de barras de ferramentas e botões nativos do framework.
  • Explicar os fundamentos da navegação AJAX do framework.
  • Demonstrar os mecanismos para formatação de conteúdos a serem apresentados em dispositivos móveis.
  • Detalhar as técnicas de construção de listas ordenadas e não ordenadas, simples e aninhadas para apresentação de conteúdos.
  • Entender a criação de formulários com seus diferentes controles.
  • Aplicar temas e paletas, bem como criar paletas personalizadas com uso da ferramenta ThemeRoller.
  • Estudar as propriedades, os eventos e métodos da API da jQuery Mobile.
31/01/2012

jQueryBrasilCast 004 – Micro.JS

Olá pessoal,

Apesar da demora, finalmente lançamos o nosso 4º podcast.

Desta vez, contamos com a participação especial do Wilker Lúcio (pela segunda vez) e do Davidson Fellipe.

Você pode adicionar o podcast ao seu iTunes clicando aqui.

É isso aí. Comentem bastante! :)

Links

Participantes:

Espero que gostem! :)

Cya! :D

Página 2 de 712345...Última »