O que é e como usar Mustache JS

Pare de escrever TAGS HTML dentro do seu Javascript, crie templates, envie um objeto para seu template, faça o insert na sua página HTML e seja feliz. Isso é Mustache JS.

Exemplo simples de Mustache JS: http://plnkr.co/edit/WLiQjSTfgezQmIJFcVeB?p=preview

mustache_0ec34a13-805a-4146-87f0-80a9a0799566

Canivete Suíço do Desenvolvedor Web

O que você precisa?

  • Comprimir e minimizar um HTML
  • Comprimir e minimizar um Javascript
  • Comprimir e minimizar um CSS, ou
  • Descomprimir HTML
  • Descomprimir JavaScript
  • Descomprimir CSS

Link: html-generator.weebly.com

Lista completa de eventos Javascript

rastrear objetos dos correios por código rastreador de encomendas

Os manipuladores de eventos em Javascript

A lista de manipuladores de eventos contém o nome do manipulador em negrito, sua descrição e finalmente a versão de Javascript que incorporou tal manipulador.

Relação de eventos

onabort
Este evento se produz quando um usuário detém a carga de uma imagem, seja porque detém a carga da página ou porque realiza uma ação que a detém, como por exemplo, sair da página.
Javascript 1.1

onblur
Desata-se um evento onblur quando um elemento perde o foco da aplicação. O foco da aplicação é o lugar onde está situado o cursor, por exemplo, pode estar situado sobre um campo de texto, uma página, um botão ou qualquer outro elemento.
Javascript 1.0

onchange
Desata-se este evento quando muda o estado de um elemento de formulário, às vezes não se produz até que o usuário retire o foco da aplicação do elemento. Javascript 1.0
Javascript 1.0

onclick
Produz-se quando se clica o botão do mouse sobre um elemento da página, geralmente um botão ou um link.
Javascript 1.0

ondragdrop
Produz-se quando um usuário solta algo que havia arrastado sobre a página web.
Javascript 1.2

onerror
Produz-se quando não se pode carregar um documento ou uma imagem e esta fica quebrada.
Javascript 1.1

onfocus
O evento onfocus é o contrário de onblur. Produz-se quando um elemento da página ou a janela ganham o foco da aplicação.
Javascript 1.0

onkeydown
Este evento é produzido no instante que um usuário pressiona uma tecla, independentemente que a solte ou não. É produzido no momento do clique.
Javascript 1.2

onkeypress
Ocorre um evento onkeypress quando o usuário deixa uma tecla clicada por um tempo determinado. Antes deste evento se produz um onkeydown no momento que se clica a tecla..
Javascript 1.2

onkeyup
Produz-se quando o usuário deixa de apertar uma tecla. É produzido no momento que se libera a tecla.
Javascript 1.2

onload
Este evento se desata quando a página, ou em Javascript 1.1 as imagens, terminaram de se carregar.
Javascript 1.0

onmousedown
Produz-se o evento onmousedown quando o usuário clica sobre um elemento da página. onmousedown se produz no momento de clicar o botão, soltando ou não.
Javascript 1.2

onmousemove
Produz-se quando o mouse se move pela página.
Javascript 1.2

onmouseout
Desata-se um evento onmuoseout quando a seta do mouse sai da área ocupada por um elemento da página.
Javascript 1.1

onmouseover
Este evento desata-se quando a seta do mouse entra na área ocupada por um elemento da página.
Javascript 1.0

onmouseup
Este evento se produz no momento que o usuário solta o botão do mouse, que previamente havia clicado.
Javascript 1.2

onmove
Evento que se executa quando se move a janela do navegador, ou um frame.
Javascript 1.2

onresize
Evento que se produz quando se redimensiona a janela do navegador, ou o frame, no caso de que a página os tenha.
Javascript 1.2

onreset
Este evento está associado aos formulários e se desata no momento que um usuário clica no botão de reset de um formulário.
Javascript 1.1

onselect
Executa-se quando um usuário realiza uma seleção de um elemento de um formulário.
Javascript 1.0

onsubmit
Ocorre quando o visitante aperta sobre o botão de enviar o formulário. Executa-se antes do envio propriamente dito.
Javascript 1.0

onunload
Ao abandonar uma página, seja porque se clique em um link que nos leva a outra página ou porque se fecha a janela do navegador, se executa o evento onunload.

JSFIDDLE é perfeito para testar html, css e javascript

jsFiddle: testando e compartilhando scripts com facilidade

Testar ou debugar um pequeno script pode ser uma tarefa desnecessariamente trabalhosa. Afinal de contas, é necessário criar uma nova página html, escrever sua marcação, inserir scripts, adicionar bibliotecas, salvar e, então, testá-la em algum browser para acompanhar o resultado. Tudo para, muitas vezes, chegar à conclusão de que o grande problema do código era um ponto-e-vírgula ausente ou um seletor mal identificado.

A jsFiddle surgiu dessa necessidade de testar scripts rapidamente. Desenvolvida originalmente para MooTools, a ferramenta foi se expandindo aos poucos, e hoje oferece suporte às principais bibliotecas Javascript do mercado, como MooTools, jQuery, YUI, Prototype, Dojo, Glow, Processing, ExtJS, Raphael e Right JS. Sua interface é simples e intuitiva, bastando selecionar a biblioteca desejada e preencher os campos de XHTML, CSS e Javascript com os dados desejados para testar um script. Clicando no botão “Run”, é possível ver o script em ação, sem a necessidade de criar novos arquivos ou de utilizar vários programas para visualizá-lo.

Exemplo: Olá Mundo: http://jsfiddle.net/mbrasil/2kPZy/

Além da agilidade no desenvolvimento, outro ponto forte da jsFiddle, que tem alavancado o sucesso da ferramenta entre os desenvolvedores front-end, é a facilidade de compartilhar códigos com a comunidade. Um fiddle (código) criado por um desenvolvedor pode ser inserido em uma página via iframe ou compartilhado via Facebook e Twitter. Ao acessar a página do Fiddle, outros desenvolvedores podem editar o código e atualizá-lo, gerando uma nova revisão que pode ser acessada a partir do número correspondente, que é adicionado ao final da URL do código. O fiddle passa a ficar sob controle de versão, e outros desenvolvedores podem até gerar novos fiddles a partir do código original caso julguem necessário.

Apesar da interface minimalista e da facilidade de uso, engana-se quem pensa que a jsFiddle é uma ferramenta simplória. Ela aceita arquivos externos, consegue testar chamadas Ajax e possui integração com o Github, podendo ser manipulada diretamente através de um repositório.

Criando e compartilhando fiddles

Ao acessar o site do jsFiddle, o desenvolvedor irá se deparar com uma interface simples, constituída por um menu superior com opções relacionadas ao fiddle, um menu lateral com opções de desenvolvimento e quatro grandes blocos redimensionáveis para a inserção de conteúdo. Começar a “brincar” com o jsFiddle é fácil: basta escolher um framework no menu lateral, digitar códigos nos blocos correspondentes e clicar em “Run” no menu superior. O resultado será gerado no bloco inferior direito do fiddle.

No menu lateral, é possível definir configurações para o desenvolvimento do fiddle. O primeiro item permite que o desenvolvedor escolha a biblioteca a ser utilizada e o momento de execução do código (se ele estará no header, no body, ou se será executado em outro lugar do código, depende das opções do framework). Já o segundo item permite que o desenvolvedor insira a URL de arquivos externos que ele deseja testar em seu fiddle. Caso queira adicionar uma folha de estilos especial ou um plugin, este é o local indicado. Mas é sempre bom lembrar que o jsFiddle não faz transferência de arquivos. Na seção Info, é possível modificar as informações do documento, tais como doctype, título e descrição. O menu lateral ainda oferece testes de chamadas Ajax e exemplos de como o fiddle pode ser utilizado.

O menu superior apresenta as opções relacionadas ao fiddle. Como já citado, o botão “Run” executa o código digitado, e o botão “Save” armazena o fiddle. Uma vez armazenado, o fiddle ganha uma URL própria, pela qual ele pode ser acessado, atualizado, inserido em uma página como iframe, ou compartilhado com a comunidade.

O botão “Update” cria uma nova revisão do mesmo fiddle com as últimas modificações feitas no código. Ao atualizar o código, o número da nova revisão é adicionado à URL e as várias revisões ficam à disposição do desenvolvedor para que ele possa acompanhar a evolução do código em seus vários estágios.

A jsFiddle ainda oferece outras características interessantes para facilitar o desenvolvimento. O botão “Fork”, por exemplo, cria um novo fiddle do zero a partir da revisão do fiddle que está sendo editado. A opção “Tiddy Up” alinha os códigos de forma apropriada e o JSLint valida o código, acusando erros de Javascript. Como se ainda não fosse o suficiente, ainda há as opções de discussão e compartilhamento já citadas anteriormente, permitindo ao desenvolvedor compartilhar suas dúvidas e sugestões com a comunidade.

Simples, leve e intuitiva, mas ao mesmo tempo versátil e com muitos recursos à disposição, a jsFiddle é uma verdadeira mão na roda para os desenvolvedores front-end. A despeito do modo como ela agiliza testes cotidianos, sua alta integração com as mídias sociais e facilidade de compartilhamento dos códigos tende a beneficiar a forma como os desenvolvedores se comunicam e expressam suas ideias.