JavaScript não-obstrutivo com jQuery
•
2 likes•381 views
This document discusses unobtrusive JavaScript and non-blocking JavaScript patterns. It describes applying JavaScript externally, using it to enhance functionality without blocking other functionality, and providing usable functionality when JavaScript is not supported. It provides an example of moving label text to associated fields and hiding labels on page load with JavaScript. It also discusses best practices for external links and implementing these patterns using the Garber-Irish method.
Recommended
More Related Content
What's hot
What's hot (20)
Viewers also liked
Similar to JavaScript não-obstrutivo com jQuery
Similar to JavaScript não-obstrutivo com jQuery (20)
More from Zigotto Tecnologia
JavaScript não-obstrutivo com jQuery
- 1. JAVASCRIPT NÃO-OBSTRUTIVO com jQuery Por Marcelo Fraga
- 2. O QUE É? Um conjunto de princípios para uma escrita de JavaScript acessível, de fácil manutenção.
- 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. 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. EXEMPLO
- 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. 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. MAL USO <a href=”javascript: window.open(‘http://zigotto.com.br’);”>Zigotto</a>
- 9. MAL USO <a href=”#” onclick=”javascript: window.open(‘http://zigotto.com.br’); return false;”>Zigotto</a>
- 10. UM POUCO MELHOR <a href=”http://zigotto.com.br” onclick=”javascript: window.open(this.href); return false;”>Zigotto</a>
- 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. A IMPLEMENTAÇÃO GARBER-IRISH <body data-controller=”<%= params[:controller] %>” data-action=”<%= params[:action] %>”>
- 13. A IMPLEMENTAÇÃO GARBER-IRISH <body id=”cart” class=”shopping”>
- 14. A IMPLEMENTAÇÃO GARBER-IRISH SITENAME = { common: { init: function() { // code } }, users: { init: function() { // code }, show: function() { // code } } };
- 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. A IMPLEMENTAÇÃO GARBER-IRISH $(document).ready(UTIL.init);
- 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