O slideshow foi denunciado.
Seu SlideShare está sendo baixado. ×

JAVASCRIPT NÃO-OBSTRUTIVO com jQuery

Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Carregando em…3
×

Confira estes a seguir

1 de 17 Anúncio

Mais Conteúdo rRelacionado

Diapositivos para si (20)

Anúncio

Semelhante a JAVASCRIPT NÃO-OBSTRUTIVO com jQuery (20)

Anúncio

JAVASCRIPT NÃO-OBSTRUTIVO com jQuery

  1. 1. JAVASCRIPT NÃO-OBSTRUTIVO com jQuery Por Marcelo Fraga
  2. 2. O QUE É? Um conjunto de princípios para uma escrita de JavaScript acessível, de fácil manutenção.
  3. 3. CARACTERÍSTICAS • Sempre aplicar JavaScript em arquivos externos. • Nunca utilizar JavaScript diretamente no documento. • Usar JavaScript como incremento, não como uma funcionalidade segura. • A página continua sendo utilizável, mesmo sem o suporte a JavaScript.
  4. 4. EXEMPLO Uma vez que a página foi carregada, o JavaScript: • Encontra todos os labels ligados a um campo de texto. • Move o texto do label para o campo de texto associado. • Esconde os labels. • Estabelece eventos para remover o texto descritivo quando o campo está em foco.
  5. 5. EXEMPLO
  6. 6. O JAVASCRIPT $('label').each(function() { var $label = $(this), $input = $('#' + $label.attr('for')), initial = $label.hide().text(); $input.focus(function() { if ($input.val() == initial) { $input.val(‘’).css('color', '#000'); } }).blur(function() { if (!$input.val()) { $input.val(initial).css('color', '#aaa'); } }).css('color', '#aaa').val(initial); });
  7. 7. O HTML <form action=”procurar.php”> <label for=”procurar”>Procurar</label> <input type=”text” id=”procurar” name=”procurar” /> <button type=”submit”>ok</button> </form>
  8. 8. MAL USO <a href=”javascript: window.open(‘http://zigotto.com.br’);”>Zigotto</a>
  9. 9. MAL USO <a href=”#” onclick=”javascript: window.open(‘http://zigotto.com.br’); return false;”>Zigotto</a>
  10. 10. UM POUCO MELHOR <a href=”http://zigotto.com.br” onclick=”javascript: window.open(this.href); return false;”>Zigotto</a>
  11. 11. O MELHOR <a href=”http://zigotto.com.br” rel=”externo”>Zigotto</a> $('a[rel="externo"]').click(function(e) { window.open(this.href); e.preventDefault(); });
  12. 12. A IMPLEMENTAÇÃO GARBER-IRISH <body data-controller=”<%= params[:controller] %>” data-action=”<%= params[:action] %>”>
  13. 13. A IMPLEMENTAÇÃO GARBER-IRISH <body id=”cart” class=”shopping”>
  14. 14. A IMPLEMENTAÇÃO GARBER-IRISH SITENAME = { common: { init: function() { // code } }, users: { init: function() { // code }, show: function() { // code } } };
  15. 15. A IMPLEMENTAÇÃO GARBER-IRISH UTIL = { exec: function(controller, action) { var namespace = SITENAME, action = (action === undefined) ? “init” : action; if (controller && namespace[controller] && typeof(namespace[controller][action] == “function”)) { namespace[controller][action](); } }, init: function() { var $body = $(document.body), controller = $body.data(‘controller’), action = $body.data(‘action’); UTIL.exec(‘common’); UTIL.exec(controller); UTL.exec(controller, action); } };
  16. 16. A IMPLEMENTAÇÃO GARBER-IRISH $(document).ready(UTIL.init);
  17. 17. FONTES • http://dev.opera.com/articles/view/the-seven-rules-of-unobtrusive-javascrip/ • http://paulirish.com/2009/markup-based-unobtrusive-comprehensive-dom-ready- execution/ • http://www.viget.com/inspire/extending-paul-irishs-comprehensive-dom-ready- execution

×