Verifica se string é número no javascript

Já escrevi sobre o typeof do javascript, que retorna o tipo de um objeto no javascript – mas quando estava desenvolvendo algumas coisas do Eu Compraria! Shop eu tinha a seguinte situação: um post por ajax executava uma tarefa, em caso de erro retornaria a mensagem do erro (que poderia variar, de acordo com o erro) em caso de sucesso retornava um ID referente a operação, que eu usaria a partir dali.

Poderia utilizar json para receber um parâmetro success e os outros parâmetros e fazer a verificação do success, mas neste caso optei por algo diferente: verificar se o retorno era numérico (o ID) e prosseguir com o a função, caso contrário seria a mensagem de erro que era exibida para o usuário.

No meu exemplo a data retornada pelo post sempre será uma string (mesmo quando é um ID), portanto o uso do typeof(data) é inútil. Neste caso eu preciso verificar quando uma string é numérica.

 

Verificando se uma string é numérica

A função abaixo testa com expressão regular a string passada como parâmetro e retorna true em caso positivo (string é um número) ou false.

function isNumeric(str)
{
  var er = /^[0-9]+$/;
  return (er.test(str));
}

Update com a sugestão do Aurélio, agora o return é o próprio resultado do teste da regex, sem necessidade do true/false como retorno. Obrigado Aurélio!

Mais uma vez uma expressão regular facilitando nossa vida! 🙂

Verificando o tipo de um elemento no javascript

Estava com problema entre a comunicação de dois serviços diferentes feito pela parte de front-end através do javascript.

Uma requisição ajax para o serviço retornava um array de objetos que a interface deveria percorrer e montar um html como resposta. O problema é que algumas vezes este array continha além dos objetos esperados alguma função de callback ou retorno indefinido (undfined) no array.

Para fazer o tratamento deste erro eu precisaria saber qual é o tipo do objeto retornado e ignorar qualquer um que não fosse "object".

Javascript typeof

O comando typeof do javascript retorna qual é o tipo do objeto em questão, os retornos dessa função podem ser:

  • number
  • string
  • boolean
  • object
  • function
  • undefined

 

Exemplo de uso:

if(typeof(myObj) == "object"){
   alert("myObj é um objeto, pode prosseguir");
}else{
   alert("Não é um objeto, ignore");
}

 

Curiosidades

A função typeof sempre retorna uma string (com os valores da lista lé de cima), então typeof(typeof(x)) sempre irá retornar string, não importa se x é um array, string, int ou função.

Um array é considerado um object, mas com a função abaixo (case sensitive, criamos a função typeOf) retorna os tipos padrões mais o array.

function typeOf(obj) {
  if ( typeof(obj) == "object" )
    if (obj.length)
      return "array";
    else
      return "object";
    } else
  return typeof(obj);
}

 

Função bem simples e ótima para previnir e tratar erros, dúvidas e sugestões nos comentários!

HTML5 Selector API – querySelector querySelectorAll

 Quem acompanha O Desenvolvedor já deve ter percebido que eu sou um grande fã do framework jQuery, utilizo-o diariamente no trabalho e nos projetos pessoais.

Desenvolver utilizando jQuery é extremamente produtivo e fácil, visto o sucesso deste framework a W3C resolveu documentar oficialmente seletores no DOM de forma mais fácil: o  querySelector e querySelectorAll.

querySelector e querySelectorAll

O querySelector é uma API de seleção de elementos do DOM que está disponível diretamente no document, isso facilita os seletores tornando-os muito próximos da seleção do jQuery (a W3C assumiu que os seletores vieram da idéia do jQuery, que na verdade é uma biblioteca separada, chamada Sizzle).

A função é bastante simples e o seletor pode ser de classe (exatamente como no jQuery .nome-da-classe ou de elemento, por exemplo p). O resultado do querySelectAll é uma lista com os elementos que casam com o seu seletor e o do querySelector é apenas o primeiro elemento que casar com a seleção passada.

Exemplo

<style>
.zebraon{background:silver}
</style>
<script>
function zebrado(selector){
var zebrar=document.querySelectorAll(selector);
for(var i=0;i<zebrar.length;i+=2)
zebrar[i].className="zebraon"
}


window.onload=function(){
zebrado("p");
zebrado(".zebra tbody tr");
}
</script>

Fiz um teste criando uma função para "zebrar" qualquer elemento da página (tabelas, por exemplo), no exemplo abaixo zebrei todos os parágrafos da página e as linhas da tabela com a classe zebrado. Para isso criei uma função que recebe como parâmetro a seleção, faz a busca usando o querySelectorAll e adiciona a classe "zebraon" que criei.

 

Um exemplo simples mas que mostra um bom amadurecimento na parte de seletores DOM! Antes de levantar qualquer debate – acho que isso não vai acabar com o uso de frameworks, mas provavelmente vai melhorar a performance das bibliotecas como jQuery já que a seleção será nativa, reduzindo parte da magia negra usada atualmente para isso.

E aí, o que acharam?

HTML5 – section ou article?

Nos blogs que acompanho as discussões mais polvorosas que eu vi acerca do HTML5 eram a respeito da semântica e confusão quanto ao uso do article e do section. A definição dos elementos pela W3C realmente é bastante rasa e permite diversas interpretações:

Article tag

O <article> define conteúdo externo.
O conteúdo externo pode ser um artigo de notícias a partir de um provedor externo, um texto de um blog, um texto de um fórum ou qualquer outro conteúdo de uma fonte externa.

W3C (EN)

Depois de ler algumas outras definições externas minha compreensão foi que o source do conteúdo não precisa ser uma fonte externa, mas o article é um conteúdo independente, o conteúdo que teria no feed daquela página, ou como o @elcio bem definiu: o "filézinho do conteúdo".

Section tag

O <section> define as seções em um documento.
Tal como capítulos, cabeçalhos, rodapés ou outras seções do documento.

W3C (EN)

São as seções genéricas do documento, podem estar dentro de um article (dividido em capítulos, por exemplo) ou para separar seções na home do site, por exemplo.

Percebam que a definição oficial é um pouco confusa – e foi o que causou um pouco de pânico enquanto a documentação do HTML5 era escrita. Agora a comunidade está um pouco mais calma acerca do assunto e resolvi dar meus pitacos, já que esclareci algumas dúvidas no curso da W3C de HTML5.

 

A maioria parte das tags html tem uma nomenclatura "técnica", um dos pontos que percebi nas leituras (em inglês a maioria) era que o nome com palavras que existem no idioma (inglês) causam confusão na hora de definir onde a tag será usada. 

Um texto interessante sobre o assunto é o Article vs. Section: We"ve Finally Gone Mad (EN) que dá uma brincada com algumas questões destas dúvidas, e este também fala sobre o assunto e exemplifica o uso de article e section.

Quando usar article e quando usar section?

Você já deve ter entendido, o article é seu conteúdo principal – aquilo que o usuário entrou para ler. O post no seu blog, a notícia, a seção de fotos (?), vídeo (?). Article é o conteúdo que seu usuário gostaria de ter no feed.

Eu li sobre o uso de article para os comentários, porém seguindo esta definição acima não é o correto (e eu jamais faria isso pensando em SEO).  Comentários normalmente não são conteúdo principal – é um conteúdo tangencial – e está relacionado ao conteúdo, portanto faz sentido utilizar o <aside>.

O section é um elemento genérico, "a nova div" como foi comentado no curso. Não é exatamente a "nova div", divs devem continuar existindo para quando for necessário alguma formatação específica para layout apenas (sem peso semântico), porém quando esta formatação for de uma seção da página a div deve ser trocada pelo <section>! 🙂

Uso errado do section

Um exemplo de uso errado do section seria  como a div "principal" da página, normalmente  usada para centralização de todo o site. Não é correto pois semânticamente trata o site como uma "seção", neste caso o correto é o uso de div – dica do próprio @diegoeis, que disse que <div> é coisa do passado e rebeldia no twitter.

 

Leia mais sobre HTML5:

 

HTML5 meta – Charset

Estou agora no curso de HTML5 da W3C e vou inicar uma série de posts sobre as idéias e definições do HTML5 passadas por aqui.

Depois de colocar o doctype correto o HTML5 mantém as tags <meta>, mas com algumas novidades que nos permitem especificar algumas coisas de forma mais intuitiva.

Setando o charset no HTML5

Inconsistência de charset é um problema muito comum e que causa dor de cabeça monstruosa entre os desenvolvedores – acentuação com problema, caracteres especiais que não são imprimidos na tela, etc. Tudo isso normalmente é relacionado a problemas de charset.

Alguns destes problemas acontecem por esquecimento de explicitar o charset, por usar um charset errado… no HTML4 tínhamos o seguinte:

<META http-equiv="Content-Type" content="text/html; charset=UTF-8">

Não existia uma meta especificando o charset e como a tag content-type enviada como cabeçalho pelo servidor era mandatória o charset era sobreposto pelo servidor – muitos desenvolvedores (como eu) não sabiam disso, setavam um charset no documento, ele não funcionava e ficávamos quebrando a cabeça para descobrir que diabos estava acontecendo se o charset "estava certo".

No HTML5 temos uma meta específica para especificar o nosso charset:

<meta charset="UTF-8">

Agora seu navegador realmente sabe com qual charset ele deve tratar o documento, pois a regra do servidor não irá sobrepor a do seu documento, mas não se esqueça que para inserir esta meta tag você precisa especificar corretamente o doctype.

Leia mais sobre HTML5:

E também a documentação das meta tags no W3C.