Verifique se a propriedade pertence àquele objeto

Além do nosso amigo do exemplo anterior, no JavaScript temos o loop for-in que usamos pra iterar em objetos. Uma coisa bacana de se fazer e que pode evitar que algo que você não queira aconteça, é usar o método hasOwnProperty(). Esse método simplesmente vai filtrar apenas as propriedades do objeto em si, excluindo as propriedades herdadas pelo prototype.

Um exemplo rápido:

var burger = {
    queijo: 'cheddar',
    pao: 'integral',
    hamburguer: 'picanha',
    molho: 'barbecue'
};

Aí em uma parte obscura, aparece algo que adiciona uma propriedade a todos os objetos.

if(!Object.prototype.feijao) {
  Object.prototype.feijao = 'preto';
}

O que aconteceu acima foi que verificamos se existe a propriedade feijao em Object e, caso ela não exista definimos ela com o valor preto. Aí que está o negócio da coisa do JavaScript, nosso objeto burger, já herda a propriedade feijao via prototype.

Com isso, para evitarmos que feijao apareça quando listarmos as propriedades de burger (até porque feijão, na minha opinião, não combina muito com hamburguer), fazemos o seguinte:

for(var i in burger) {
  if(burger.hasOwnProperty(i)) {
     console.log(i + ' => ' + burger[i]);
  }
}
 
// Resultará no seguinte:
// queijo => cheddar
// pao => integral
// hamburguer => picanha
// molho => barbecue

Do contrário, caso não fizéssemos essa verificação, teríamos algo assim:

for(var i in burger) {
    console.log(i + ' => ' + burger[i]);
}
 
// Resultará no seguinte:
// queijo => cheddar
// pao => integral
// hamburguer => picanha
// molho => barbecue
// feijao => preto

---

Era isso! Dicas rápidas sobre a linguagem, que para alguns podem ser básicas, mas que muita gente ainda pode não conhecer e, que podem evitar alguns problemas no futuro.

Guarde o tamanho do array

Guarde o tamanho do array

No JavaScript temos nossos brothers loops for, que conseguem iterar em arrays ou também em objetos semelhantes a arrays. Semelhantes? Como assim!? Por exemplo os objetos arguments e HTMLCollection. Provavelmente você já deve ter se deparado com um loop for (já deve ter escrito alguns):

for(var i = 0; i < arrayFabeni.length; i++) {
    // magic
}

De bate pronto, conseguimos perceber algo não tão bacana no código acima. O comprimento (length) do array é acessado em toda iteração do loop. Isso não fica tão legal quando por exemplo, o objeto é um HTMLCollection. Lembra o que são esses caras? Eles que são retornados quando a gente chama:

• getElementsByName()
• getElementsByClassName()
• getElementsByTagName()

Tá! Legal! Mas eaí né?! A zica mesmo é que toda vez que a gente itera sobre esses caras significa que estamos consultando o nosso DOM ao vivo e a cores, e a *toda hora*, o que não é nada bacana.

Com base nisso, uma solução que podemos chegar seria guardarmos o comprimento do array; algo parecido com isso:

for(var i = 0, max = arrayFabeni.length;  i < max; i++) {
    // magic
}

O que fizemos acima foi armazenar o valor da propriedade length, evitando assim ter que calculá-la a cada iteração do loop.

Looping sobre matrizes

Alguns dos métodos que utilizamos em jQuery estão disponíveis com o padrão ES5. Para iteração, podemos usar forEach e map em vez de suas versões do jQuery – each() e do map(). Só tome cuidado para as diferenças de argumentos e padrão este valor nos retornos de chamada.

var tartarugasNinja = ["Donatello", "Leonardo", "Michelangelo", "Raphael"];

// ForEach iterai automaticamente através de uma matriz.

tartarugasNinja.forEach(function (ninja) {
    console.log(ninja);
});

// O método mapa chama uma função em cada elemento de uma matriz e cria uma nova matriz com os resultados.

var amantesDaPizza = tartarugasNinja.map(function (ninja) {

    return ninja.concat(" ama pizza!");

});

console.log(amantesDaPizza);

Manipulando classes e atributos

Manipular nomes de classes sem jQuery costumava ser muito inconveniente. Não mais, graças à propriedade classList. E se você precisa para manipular atributos, você tem setAttribute.

var botao = document.querySelectorAll("button"),
    div = document.querySelector("#exemplo");

botao[0].addEventListener("click", function (e) {

    // Resgata o ID da div de forma fácil
    console.log(div.id);
    div.innerHTML = "ID: " + div.id;
});


// O Elemento.classList guarda todas as classes do elemento.

var classes = div.classList;

botao[1].addEventListener("click", function () {

    console.log(classes);
    div.innerHTML = "Classes: " + classes;

});

botao[2].addEventListener("click", function () {

    // Se for suportado, adicionará a classe vermelho.
    classes.add("vermelho");

});

botao[3].addEventListener("click", function () {

    // You can also toggle a class on and off
    classes.toggle("esconder");

});

Efeito "Ir para o topo" com rolagem suave

Bom dia galera, meu primeiro tutorial aqui no site.
Vocês aprenderão hoje a criar um botão "Ir para o topo da página" com jQuery + o plugin jQuery Easing para deixar a rolagem suave.

Primeiramente você deve verificar se a sua página já possui o jQuery, se não tiver, faça o download aqui (http://jquery.com/download/). Feito isso vamos ao código.

O código é bem simples e funcional, vamos usar a função .animate() do jQuery para o efeito.

Código:

<script src="js/jquery/jquery.js" type="text/javascript"></script>
<script>

function toTop(){
$('html, body').animate({
scrollTop: 0
}, 1000, 'linear');
}
</script>

<a href="javascript:toTop();" title="Para o alto, e avante!" />Ir para o topo!</a>

Ok, aqui temos o efeito pronto, já pode ser usado.
Mas eu não fico satisfeito com o simples haha, então vamos adicionar efeitos de easing para a rolagem até o topo ficar mais... interessante.

Teremos que fazer o download do pluguin jQuery Easing aqui (http://gsgd.co.uk/sandbox/jquery/easing/), ou você também pode usar o jQuery UI, pois ele já vem com esses efeitos. Aqui vamos usar o jQuery Easing por ser menor e menos complicado de baixar.. Feito isso vamos melhorar o código.

<script src="js/jquery/jquery.js" type="text/javascript"></script>
<script src="js/jquery/jquery.easing.js" type="text/javascript"></script>
<script>

function toTop(){
$('html, body').animate({
scrollTop: 0
}, 1000, 'easeInOutCirc');
}

</script>

Se você testar vai ver que o efeito é completamente diferente. Isso acontece por usamos o efeito easing. O site http://easings.net/pt-br tem a referencia completa para os efeitos easing, é só passar o mouse por cima que você verá o efeito acontecendo. Gostou de algum? Quer mudar? É só trocar ali onde está 'easeInOutCirc' pelo nome do easing que deseja..