Mascara Javascript para os novos telefones de São Paulo

Olá pessoal,

“O presidente da Anatel (Agência Nacional de Telecomunicações), João Rezende, informou nesta sexta-feira que o acréscimo do nono dígito aos números de celulares da região metropolitana de São Paulo vai garantir 53 milhões de novas combinações numéricas.”
http://www1.folha.uol.com.br/mercado/1040493-nono-digito-garante-53-mi-de-novos-numeros-de-celular-em-sp.shtml

Sabendo disso, é importante começarmos a pensar em soluções para atender as mascaras de telefone de todo o Brasil e também para região metropolitana de São Paulo.

Já faz uns meses que falei sobre o  jQuery Mask Plugin. E desta vez, também vamos resolver este mesmo problema com o ele. Criei um exemplo no jsFiddle de como resolver da mascara javascript com o novo nono dígito nos telefones celulares de São Paulo. Você pode ver o exemplo funcionando aqui: http://jsfiddle.net/d29m6enx/2/

E o código é este:

// using jQuery Mask Plugin v1.7.5
// http://jsfiddle.net/d29m6enx/2/
var maskBehavior = function (val) {
 return val.replace(/\D/g, '').length === 11 ? '(00) 00000-0000' : '(00) 0000-00009';
},
options = {onKeyPress: function(val, e, field, options) {
 field.mask(maskBehavior.apply({}, arguments), options);
 }
};

$('.phone').mask(maskBehavior, options);

Desta forma, atendemos todos os números de telefone do Brasil e também atendemos a nova forma da Anatel para os telefones da região metropolitana de São Paulo, simples, certo? Ainda bem que tive a ideia de implementar estes eventos nas mascaras antes mesmo desta norma da Anatel 🙂

É isso, simples e objetivo!

UPDATE 10/10/2014

Eu e o @dgmike fizemos uma versão um pouco mais otimizada da solução apresentada pelo Bruno Porto em comentário:
http://jsfiddle.net/d29m6enx/2/

Ajudou? Ajude no desenvolvimento do jQuery Mask Plugin

Click here to lend your support to: jQuery Mask Plugin and make a donation at pledgie.com !

Posts Relacionados:

Masks With jQuery Mask Plugin

Today is the oficial release of the version 0.4.3 of my jQuery Mask Plugin. Since I have never written about it before on this blog, I’ll teach you guys how to use it and some other cool features about it.

Downloading the code

 wget https://github.com/igorescobar/jQuery-Mask-Plugin/blob/master/jquery.mask.min.js 

The only thing that you guys need to do is include the javascript file of the plugin between the head tag in your HTML document and it’s all set to use.

The syntax

The jQuery Mask Plugin syntax is pretty simple. First, you input your  selector, followed by the .mask and then as a parameters you have to put the mask that you want the plugin to apply on the form field.
Example

$(document).ready(function(){
  $('.date').mask('00/00/0000');
});

In this example the mask 00/00/0000 will be applied in all the input fields that have the “.date” class. At jQuery Mask Plugin you don’t have pre-established masks, you choose the mask as you wish. On the website project you can see the jQuery Mask Plugin running with some others examples like this:

$(document).ready(function(){
$('.date').mask('11/11/1111');
  $('.time').mask('00:00:00');
  $('.date_time').mask('00/00/0000 00:00:00');
  $('.cep').mask('00000-000');
  $('.phone').mask('0000-0000');
  $('.phone_with_ddd').mask('(00) 0000-0000');
  $('.phone_us').mask('(000) 000-0000');
  $('.mixed').mask('AAA 000-S0S');
  $('.cpf').mask('000.000.000-00', {reverse: true});
  $('.money').mask('000.000.000.000.000,00', {reverse: true});
});

As you can see, it’s possible to define other data type on each digit of the mask. This mask for example:

$('.mixed').mask('AAA 000-S0S');

The user can type a sequence of three alpha numeric characters, followed by space, three numeric characters, a slash, one string character, other number character and finally one string character, cool isn’t it?

Again, you can define the mask as you wish and the data type of each digit of the mask as well.

Features

  • Lightweight (~2kb minified, ~1kb gziped).
  • Masks on any HTML element!
  • data-mask attribute support.
  • String/Numeric/Alpha/Mixed masks.
  • Reverse mask support for masks on numeric fields.
  • Sanitization.
  • Optional digits.
  • Digits by range.
  • Automatic maxlength.
  • Advanced mask initialization.
  • Callbacks.
  • On-the-fly mask change.
  • Mask removal.
  • Customization.
  • Compatibility with Zepto.js

More about jQuery Mask Plugin

  1. jQuery Mask Plugin on Github
  2. Demonstration
  3. jQuery Mask Plugin
  4. All versions of jQuery Mask Plugin

Any problems, please, let me know.

Help us!

Click here to lend your support to: jQuery Mask Plugin and make a donation at pledgie.com !

Posts Relacionados:

Mudando a barra de endereço do browser sem refresh

Hoje vamos falar sobre um recurso bastante interessante dos nossos browsers que nos permite fazer a alteração das informações das páginas que acessamos, inclusive a URL que é mostrada na barra de endereço do seu browser sem fazer o uso do refresh e o melhor: mantendo o histórico.

Manipulando o histórico do browser

Para se fazer o que é proposto neste post é preciso entender como funciona a manipulação do histórico do nosso browser e os métodos que o objeto DOM window nos proporciona para manipular o nosso histórico. Neste post vamos falar especificamente sobre o window.history.

W3C implementa History com a seguinte interface:

interface History {
  readonly attribute long length;
  readonly attribute any state;
  void go(optional long delta);
  void back();
  void forward();
  void pushState(any data, DOMString title, optional DOMString url);
  void replaceState(any data, DOMString title, optional DOMString url);
};

Neste post, vou falar somente somente os métodos pushState e replaceState que são os métodos responsáveis por manipular o histórico da sessão do seu navegador.

Sempre que você abre uma nova aba e/ou janela o navegador inicia uma nova sessão. E é nesta sessão que ele armazena todas as URL’s que você visitou.

Método history.pushState

O método pushState registra uma nova entrada no seu histórico de sessão, mantendo o histórico. E essa é a sua sintaxe:

window.history.pushState(data, title [, url ] )

Data: O parâmetro data pode ser útil caso você queira utilizar o evento onPopState. O evento onPopState é invocado sempre que uma nova entrada é registrada no seu histórico de sessão.
Title: É o título da página que você quer que esta entrada tenha.
URL: É a URL que você quer que a página tenha. Você pode utilizar este parametro de duas formas:

  1. Absoluta: Passando toda a nova URL completa, incluindo protocolo, host, path etc. Ex: http://blog.igorescobar.com/
  2. Relativa: A URL que você passar será relativa a URL atual, ou seja, se você estiver acessando o http://blog.igorescobar.com/ e passar “/category/javascript/” a URL que será registrada é “http://blog.igorescobar.com/category/javascript/”.

Exemplo

 window.history.pushState('Object', 'Categoria JavaScript', '/category/javascript/'); 

O resultado deste código vai fazer com que a URL e o título da página que você estiver navegando mude, sem que o refresh ocorra. E se você apertar o “voltar” no seu navegador, vai ver que ele vai voltar a página anterior que você tinha acessado, ou seja, o histórico foi mantido.

Método history.replaceState

O método replaceState é muito parecido com o pushState. A única diferença entre os dois métodos é que o pushState armazena uma nova entrada, mantendo o histórico. O replaceState não, ele substituí a entrada do histórico de sessão atual pelos dados que você passa. E essa é a sua sintaxe:

window.history.replaceState(data, title [, url ] )

Exemplo:

window.history.replaceState('Object', 'Titulo da Página', '/outra-nova-url');

Evento onPopState

O evento onpopstate é invocado sempre que uma nova entrada é dada no histórico de sessão do seu browser. A forma como você pode utiliza-lo é só adaptar à sua necessidade de negócio. Uma forma de utilização deste evento é delegar para ele a responsabilidade de carregar via ajax todo o link que for clicado, por exemplo.

Exemplo de navegação sem refresh

Todo mundo já conhece o GitHub, certo? (espero que sim!) O GitHub faz do uso deste mesmo recurso para que vocês consigam visualizar os arquivos de um repositório de maneira rápida, sem refresh e mantendo um histórico da navegação. Veja que sempre que você clica em um arquivo, ele é carregado dentro do mesmo contexto, a url da página muda e você consegue ir para frente e voltar no histórico, graças ao método window.history.pushState.

Este é um exemplo de como seria a implementação de uma navegação parecida com jQuery.

$('#menu-nav a')​​.click(function(e){
  e.preventDefault();
  window.history.pushState({url: "" + $(this).attr('href') + ""}, $(this).attr('title') , $(this).attr('href'));
 });​

$(window).bind("popstate", function(e) {
  $('#my-navigation-container').load(e.state.url);
});

Compatibilidade

Os browsers Chrome, Opera, Safari e Firefox 4+ implementam todos estes métodos de forma nativa. Os browsers antigos utilizam o location.hash para imitar o comportamento. Existe uma biblioteca chamada History.js que implementa esta funcionalidade de forma crossbrowser.

 

Posts Relacionados:

Mascaras com jQuery Mask Plugin

Hoje é o lançamento oficial da versão 0.4.3 do meu plugin jQuery Mask Plugin. Como nunca falei sobre ele aqui no blog, vou ensinar vocês como utiliza-lo e algumas features bacanas do plugin.

Baixando o código

 wget https://github.com/igorescobar/jQuery-Mask-Plugin/blob/master/dist/jquery.mask.min.js 

A única coisa que vocês precisam fazer é incluir o plugin entre as tags do seu documento e pronto, o plugin está pronto para vocês utilizarem.

A sintaxe

A sintaxe do jQuery Mask Plugin é bem simples. Primeiro você passa o seletor, seguido de .mask e como parametro você vai passar a mascara que você quer que o campo tenha.
Exemplo

$(document).ready(function(){
  $('.date').mask('00/00/0000');
});

Neste exemplo, todos os input fields que possuem a classe “.date”, a mascara será aplicada. No jQuery Mask Plugin você não tem mascaras pré-estabelecidas. Você escolhe a mascara como você quiser. no site do projeto vocês podem ver o jQuery Mask Plugin funcionando e mais alguns outros exemplos, como os a seguir:

$(document).ready(function(){
  $('.date').mask('11/11/1111');
  $('.time').mask('00:00:00');
  $('.date_time').mask('00/00/0000 00:00:00');
  $('.cep').mask('00000-000');
  $('.phone').mask('0000-0000');
  $('.phone_with_ddd').mask('(00) 0000-0000');
  $('.phone_us').mask('(000) 000-0000');
  $('.mixed').mask('AAA 000-S0S');
  $('.cpf').mask('000.000.000-00', {reverse: true});
  $('.money').mask('000.000.000.000.000,00', {reverse: true});
});

Veja que que eu posso definir o tipo de dado que o usuário pode imputar a cada dígito. Nesta máscara por exemplo:

$('.mixed').mask('AAA 000-S0S');

O usuário poderá digitar uma sequência de 3 caracteres alpha números, seguido de espaço, seguido de 3 caracteres números, seguido de traço, seguido de um caractere do tipo string, seguido de um caractere do tipo inteiro e seguido de um caractere do tipo string, legal, né?

Vocês podem definir a mascara como quiserem e também podem definir o tipo de dado que pode ser inputado em cada dígito da mascara.

Features

  • Lightweight (~2kb minified, ~1kb gziped).
  • Mascaras em qualquer elemento HTML.
  • suporte ao attribututo data-mask.
  • Mascaras com String/Numeros/Alpha-Numéricos/Mixed.
  • Suporte a mascara reversa para campos numéricos.
  • Sanitização.
  • Digitos Opcionais.
  • maxlength Automático.
  • Inicialização de mascara avançada.
  • Callbacks.
  • Mudança de mascara On-the-fly.
  • Remoção da mascara.
  • Customização.
  • Compatibilidade com Zepto.js

Mais sobre o jQuery Mask Plugin

  1. jQuery Mask Plugin no Github
  2. Página de demonstração
  3. Source-Code do jQuery Mask Plugin
  4. Todas as versões do jQuery Mask Plugin

Qualquer problema, por favor, me avisem.

AJUDOU? AJUDE NO DESENVOLVIMENTO DO JQUERY MASK PLUGIN

Click here to lend your support to: jQuery Mask Plugin and make a donation at pledgie.com !

Posts Relacionados:

Javascript – Aviso de Dados Não Salvos

Sabe quando você está escrevendo um e-mail e se você tenta sair de tela o browser te da um aviso, comunicando a possível perda de dados? pois é! sobre isso que vamos falar. 🙂 O Gmail faz isso, o Rally faz isso, mas muita gente ainda não sabe como isso é feito de fato.

Este tipo de recurso é muito interessante e pode evitar muita dor de cabeça por parte da pessoa que estiver utilizando o seu sistema. No meu caso, este recurso foi aplicado a um CMS. A finalidade da implantação deste recurso no CMS era para que os jornalistas fossem avisados quando algum dado no formulário fosse alterado, porém, o usuário intencionalmente (ou não) tenta mudar de página e este dado dado seria perdido. Se tratando de um CMS focado para jornalistas onde o conteúdo digitado é extremamente importante, todos recurso que for desenvolvido para evitar perda de conteúdo é extremamente bem-vindo.

onBeforeUnload Event

O evento onbeforeunload não tem uma finalidade exclusiva para ele, é um evento como outro qualquer, mas ele é invocado sempre que o usuário tenta sair da página atual, mas quando ele não está setado, simplesmente nada acontece. O evento responsável por pedir para que o usuário confirme ou não a mudança de pagina é o evento onbeforeunload. Sempre que ele é setado, você vai ver um confirm dialog, igual o da imagem abaixo.

Aviso de perda de conteúdo

O Problema

Se fosse só setar o efeito e ele fazia todo o resto, seria fácil, né? Pois é… mas não é assim (#lol). Temos que fazer um script peça a intervenção do usuário nas seguinte situações:

  1. Ao fechar aba/navegador.
  2. Ao clicar em qualquer outro link, senão o submit do formulário.
  3. O alerta deve aparecer somente se algo for alterado no formulário.

A Solução

$(function(){
  var formObject = $('.new_materia, .edit_materia');
  formObject.data('original_serialized_form', formObject.serialize());

  $(':submit').click(function() {
    window.onbeforeunload = null;
  });

  window.onbeforeunload = function() {
    if (formObject.data('original_serialized_form') !== formObject.serialize()) {
      return "As mudanças deste formulário não foram salvas. Saindo desta página, todas as mudanças serão perdidas.";
    }
  };
});

Como funciona?

  1. Utilizei o $.data() do jQuery por que eu não gosto de utilizar o var para declarar variáveis globais.
  2. Utilizei o $.serialize() do jQuery para serializar o formulário para comparar o estado do formulário no futuro. E foi a forma mais inteligente que encontrei para identificar se algo realmente foi mudado no formulário.
  3. Por default, eu seto o evento onbeforeunload e dentro dele eu verifico se algo foi mudado no formulário.
  4. O único caso em que eu tenho que remover o evento onbeforeunload é quando existe a intenção de salvar o dado, no caso utilizei o :submit com evento $.click() para remover o evento e cancelar o alerta, caso houve a intenção de salvar o formulário.
Bom, é isso!
Dúvidas, sugestões, comentários are extremely encouraged.

Posts Relacionados:

jGallery – A jQuery Plugin for Image Gallery’s

Olá Pessoal!

Mais um projeto pessoal. Com a oportunidade de um novo trabalho surgiu o jGallery. Um cliente me pediu um plugin parecido com o Lightbox, porém, ele queria que as fotos aparecessem logo abaixo, como uma galeria de fotos onde o usuário pudesse navegar entre as fotos sem sair da famosa “lightbox”. A partir desta necessidade surgiu o jGallery. Um plugin feito em jQuery para exibir de forma elegante uma galeria de fotos.

Características

  • Atalhos de teclado.
  • Se a imagem estourar a área útil do navegador a mesma é redimencionada de forma proporcional.
  • A galeria sempre se ajusta a sua resolução, inclusive a imagem (caso estoure a área útil).
  • Efeitos de transição.
  • Pre-loading de imagem.
  • Interface intuitiva e fácil de utilizar.
  • Compatibilidade com Internet Explorer, Chrome, Safari, Firefox e Opera (foi os que eu testei).

Código-Fonte

http://github.com/igorescobar/jGallery

Demo

http://igorescobar.com/projects/jGallery/

Sugestões

blog [at] igorescobar [dot] com

Posts Relacionados:

Javascript: OnUnload VS OnBeforeUnload

Fico pensando em um caso mais familiar possível para ilustrar a utilidade das duas funções, e a melhor que me vem à cabeça é o Gmail. Já pensou em fazer algo parecido com o Gmail? Quando o usuário fechar a janela e alguma requisição estiver em processamento, ele dá um aviso sobre ela, para evitar que você perca alguma alteração.

Muita gente pensa que o evento utilizado para fazer tal proeza é o evento “onunload” mas não é. Existe uma pequena diferença entre os dois eventos.

O evento OnUnload

O evento OnUnload em sua tradução quer dizer: “quando descarregar”. Ele é responsável por executar uma instrução quando a página for fechada, mas CUIDADO!. A utilização deste evento não é muito confiável quando se trata de navegadores como Internet Explorer e AJAX ao mesmo tempo. Quando o IE está de mal humor e simplesmente ignora o evento, não executando a instrução que você programou para ele fazer. Se a instrução envolver AJAX, ela está ainda mais fadada ao fracasso e o seu usuário provavelmente vai ficar muito triste.

Exemplo

<script language="JavaScript">
window.onunload = Sair;
function Sair()
{
    return "A página foi fechada";
}
</script>

O evento OnBeforeUnload

Traduzindo OnBeforeUnload para o português, quer dizer: Antes de descarregar. O evento OnBeforeUnload funciona um pouco diferente do OnUnload. O evento OnBeforeUnload é chamado ANTES da janela ser fechada. É mais eficiente, pois ele não é executado em concorrência (junto/ao mesmo tempo) com o fechamento da janela, o que pode fazer com que algo seja carregado pela metade (de forma interminada).

Exemplo

<script language="JavaScript">
window.onbeforeunload = ConfirmExit;
function ConfirmExit()
{
    //Pode se utilizar um window.confirm aqui também...
    return "Mensagem de fechamento de janela....";
}
</script>

Pesquisando sobre este evento eu notei que o jQuery não da suporte ao eventoOnBeforeUnload. Se alguém descobrir por que, ganha um doce. x)

[]’s

Posts Relacionados:

Detectando o iPad com PHP e Javascript

Não me pergunte como, não me pergunte o por quê mas o Steve Jobs conseguiu mais uma vez. Tudo começou com rumores de perda de tempo, ele não vai conseguir e bla bla e no final das contas a poeira abaixou e o iPad foi lançado no dia 3 de abril. Logo após o final de semana de seu lançamento oficial, 700 mil iPads foram vendidos só nos Estados Unidos.

Sendo assim, é importante saber identificar estes dispositivos para conseguirmos otimizar nossos serviços para que nos possibilite atingir uma nova fatia de mercado, dando origem a novos negócios e oportunidades.

O novo iPad da Apple é identificado pelo seguinte User Agent:

Mozilla/5.0 (iPad; U; CPU OS 3_2 like Mac OS X; en-us) AppleWebKit/531.21.10 (KHTML, like Gecko) Version/4.0.4 Mobile/7B334b Safari/531.21.10

Sabendo como os novos iPads são identificados aqui vão algumas soluções para que vocês possam identificá-los e fazer suas versões dedicadas a partir daí:

Detectando iPad com PHP

$isiPad = (bool) strpos($_SERVER['HTTP_USER_AGENT'],'iPad');

Detectando iPad com Javascript

var isiPad = navigator.userAgent.match(/iPad/i) != null;

Detectando o iPad com .htaccess

RewriteCond %{HTTP_USER_AGENT} ^.*iPad.*$
RewriteRule ^(.*)$ http://ipad.seudominio.com [R=301]

Espero que ajude!
[]’s

Posts Relacionados:

Tutorial jQuery – Método $.live();

Hoje vou falar sobre um método do jQuery muito útil, muito mesmo. Mais informações em inglês pode ser encontrada na documentação oficial do método .live().

O Problema

É muito comum quando estamos desenvolvendo aplicações para Internet e precisamos criar ferramentas tão dinâmicas que acabamos por utilizarmos quase todo o potencial que o JavaScript dispõe a oferecer. Nas ferramentas que desenvolvo é muito comum a interface da ferramenta ser controlada e alterada quase que o tempo todo através da manipulacão do DOM e muitas vezes precisamos atachar comportamentos em um determinado elemento da página.

Por exemplo: Temos um sistema de comentários onde todos os comentários são carregados e as respostas destes comentários aparecem como arvore.

  • Comentário 1
  • Comentário 2
    • Resposta do comentário 2
      • Resposta da resposta do comentário 2
  • Comentário 3

E assim vai…

Eu posso responder em tempo real um comentário e ele ja vai aparecer para mim. Tudo via jQuery. Quando fazemos uma varredura no DOM do documento usando os seletores do jQuery, procuramos por todos os botões que tenha a classe “responder” que originalmente ficam sem ação e depois, via jQuery damos ação ao elemento.

$('.responder').bind('click', function() {
  // instruções
});

Neste ponto, temos um problema. O indice de elementos do jQuery é estático, ele não atualiza automaticamente. Se um novo botão responder surgir na tela o jQuery não surtirá efeito sobre ele, pois ele apareceu DEPOIS da primeira varredura no DOM quando eu usei o seletor $(‘.responder’).

Solução

Para corrigir este problema, podemos utilizar o .live() do jQuery. Independente de quando e a quantidade de botões que surgirem na tela o jQuery irá acrescenta-lo em seu índice e você poderá manipula-lo da forma como quiser.

$('.responder').live('click', function() {
  // instruções
});

Caso queira adicionar ao DOM o mesmo comportamento em mais de um evento, basta fazer o seguinte:

$('.responder').live('mouseover mouseout', function(event) {
  if (event.type == 'mouseover') {
    // faça isso
  } else {
    // faça aquilo
  }
});

Ou crie 2 lives separadamente para cada evento.

$('.responder').live('mouseover', function() {
  // instruções
});
$('.responder').live('mouseout', function() {
  // instruções
});

A princípio o conceito pode ser um pouco confuso. Fica difícil de entender isso quando nunca se passou pelo problema. O dia que algo não funcionar como o esperado pelo jQuery nem simplesmente ter sido chamado, lembre-se do $.live();

Igor
[]’s

Posts Relacionados:

10 Dicas JavaScript e Boas Práticas

Recentemente alguns site e blogs vem divulgando listas de dicas para se codificar em javascript. Apresentando melhores práticas de desenvolvimento e muitas dicas bacanas, Pensei que este seria um bom tópico para se extender e compartilhar com vocês. Neste post estou reunindo as minhas top 10 dicas e boas práticas para codificação javascript.

Espero que gostem.

1. Use o atributo defer para indicar o uso scripts externos no IE

O propósito do defer é avisar o script que está sendo requisitado externamente para esperar  até que a página seja carregada ou o DOM esteja preparado. O mesmo pode ser realizado através de bons métodos não-obstrutivos via javascript, que usualmente inclui códigos que previne a execução de scripts antes que o DOM seja carregado por completo.

A vantagem do defer ocorre quando utilizamos o Internet Explorer, tendo em vista que é único browser que suporta o atributo defer. Então, se você precisa de um rápido script que rode únicamente e exclusivamente no Internet Explorer, e você não quer que ele execute antes que o DOM esteja preparado, então simplesmente adicione defer="defer" no sua tag <script> e ela irá rapidamente tratar o seu problema. Corrigir a transparência de arquivos PNG no IE6 é uma das possibilídades práticas do uso do defer.

(Edit: O atributo defer deve ser usado quando escondemos um script de outros browsers com o uso dos comentários condicionais  – conditional comment – que afete somente os navegadores da Microsoft – de outra maneira o script vai rodar normalmente em outros browsers.)

2. Use o CData Section para previnir erros de validação XHTML Strict

Muitas vezes seus scripts vão residir em arquivos externos e chamados dentro da tag <script> dentro do  <head> do documento, ou então antes do fechamento da tag </body>.

Mas este documento pode estar eventualmente usado em um local que junto dele existem marcações HTML, como abaixo:

<div>
<p>
<script type="text/javascript">
var my_variable = 100;
if (my_variable < 50) {
// alguma coisa aqui...
}
</script>
</p>
</div>

Você pode notar que no código acima, dentro do if, existe o símbolo <  que representa “menos”, que é parte da sintax, corréto? Este símbolo causa um erro de validação. O validador interpreta ele como um inicio de uma marcação ou uma tag HTML que não foi fechada, a não ser que você encapsule o seu código com o CData, assim:

<div>
<p>
<script type="text/javascript">
//<![CDATA[
var my_variable = 100;
if (my_variable < 50) {
// alguma coisa aqui...
}
//]]>
</script>
</p>
</div>

3. Evite palavras-chaves reservadas do JavaScript quando estiver criando funções e identificadores

Muitas palavras são reservadas no javascript, então você deve evitá-las quando forem criar variáveis ou outros idenficadores. A lista completa de palavras-chaves do javascript segue abaixo:

break
case
catch
continue
default
delete
do
else
finally
for
function
if
in
instanceof
new
return
switch
this
throw
try
typeof
var
void
while
with

4. Evite palavras reservadas do JavaScript quando estiver criando funções e identificadores

Que estão também algumas palavras reservadas, que não estão necessariamente sendo usadas pela linguagem mas são reservadas para o uso futuro. São estas:

abstract
boolean
byte
char
class
const
debugger
double
enum
export
extends
final
float
goto
implements
import
int
interface
long
native
package
private
protected
public
short
static
super
synchronized
throws
transient
volatile

5. Não mude o tipo das variaveis depois da declaração inicial.

No javascript, tecnicamente, isso é perfeitamente legal:

var my_variable = "Esta é uma string";
my_variable = 50;

Depois que a variável é inicialmente declarada como string na linha 1, na linha 2 o seu valor é mudado e o seu tipo também. Esta não é uma boa prática e deve ser evitada.

6. Não use variáveis globais.

Para previnir possíveis conflitos, em 99% dos casos, use o “var” no início quando estivermos declarando uma variável e seu valor. Isso faz com que a sua variável exista somente no escopo da função e não fora dela, ou seja, toda variável criada pelo var, só poderá ser acessível dentro do escopo no qual ela foi declarada e não mais fora dele. Então, se acontecer de você utilizar duas variáveis com o mesmo valor em lugares diferentes do seu script, nenhum conflito ocorrerá.

7. Javascript é Case-Sensitive.

Lembre-se do que vem a seguir: No código que segue temos duas variáveis que estão armazenando seus valores em 2 lugares diferentes na memória, e não um só, como alguns podem pensar. São duas variáveis completamente diferentes alocadas em lugares diferentes na memória:

var myVariable = "data";
var myvariable = "more data";

8. Use o switch para lidar com multiplas condições

Não faça isso:

if (example_variable == "cyan") {
// faça algo aqui...
} else if (example_variable == "magenta") {
// faça algo aqui...
} else if (example_variable == "yellow") {
// faça algo aqui...
} else if (example_variable == "black") {
// faça algo aqui...
} else {
// faça algo aqui...
}

Faça isso:

switch (example_variable) {
case "cyan":
// faça algo aqui...
break;
case "magenta":
// faça algo aqui...
break;
case "yellow":
// faça algo aqui...
break;
case "black":
// faça algo aqui...
break;
default:
// faça algo aqui...
break;
}

O segundo bloco de código faz exatamente a mesma coisa que o primeiro – mas o segundo é limpo, fácil de ler, fácil de dar manutenção e modificar.

9. Use o try-catch para previnir que erros sejam expostos para os usuários

Encapsulando todo o seu código no try-catch, você pode evitar que o usuário final nunca veja um feio erro de javascript exposto na tela. Assim:

try {
funcaoQueNaoExiste();
} catch (error) {
document.write("Um erro ocorreu.")
}

No código acima, eu tentei chamar uma função que não existe, para forçar um erro. O navegador não vai exibir o típico erro “not an object” ou “object expected”, mas ao invés disso, vai exibir um erro mais customizável que eu incluí dentro do meu “catch”. Você pode também deixar o catch vázio para nada ser mostrado para o usuário, ou você pode criar uma função que seja chamada dentro do catch que faça o tratamento deste erro para propósitos de debug etc.

Mantenha na sua cabeça que isso pode esconder erros do desenvolvedor também, então uma boa decumentação do código e comentários podem ser úteis neste ponto.

10. Faça comentários multi-linhas legíveis, mas simples

Em javascript, você pode comentar uma linha de código colocando um // no início da linha. Você também pode criar um comentário em bloco como mostra a seguir: /* [comentário aqui ] */. Algumas vezes você precisa incluir um comentário longo, um comentário de mais de uma linha. Um bom método para se utilizar que não tenha uma visual esmagador, mas é fácil de identificar o código é esse a seguir:

/*
* Este é um comentário multi-linha...
* bla bla bla...
* bla bla bla...
* bla bla bla...
* bla bla bla...
*/

E é isso 🙂

Este artigo é uma adaptação e tradução do texto: 10 JavaScript Quick Tips and Best Practices

Posts Relacionados: