Programando Javascript sem jQuery
Transferir como PPTX, PDF0 gostou624 visualizações
O documento discute as vantagens de usar Javascript puro em vez de frameworks como jQuery. Apresenta os principais métodos de seleção e manipulação de DOM em jQuery e Javascript puro, além de abordar animações, Ajax e o método document.ready(). Por fim, fornece guias de estudo e outras opções de frameworks.
Programando Javascript sem jQuery
- 1. Programando Javascript sem jQuery Christiane Morais @ChrisCirce chris.morais2
- 2. Sumário Por que Javascript puro? Prós e contras do jQuery Os métodos mais utilizados Outras opções de frameworks Guia de Estudos
- 3. –Desconhecido “Javascript é a unica linguagem que nenhum programador acha que precisa aprender.”
- 4. Por que Javascript puro? Conhecimento Ter apenas funções que serão utilizadas Maior capacidade de customização e extensão Mais leveza do site principalmente para requisições 3G
- 5. Prós e contras do jQuery Prós Resolve problemas de compatibilidade do Javascript nos navegadores Facilita o desenvolvimento Contras O arquivo é muito pesado, mesmo com gzip Muitas vezes é um canhão para matar uma formiga
- 6. Os métodos mais utilizados Seletores / Manipuladores de DOM Animações Ajax document.ready()
- 7. Seletores jQuery Javascript $(“div”) document.getElementByTagName(“div”) $(“.class”) document.getElementByClassName(“class”) $(“#idObjeto”) document.getElementByID(“idObjeto”)
- 8. Manipulador de DOM jQuery Javascript $(document.body).append(“…”); var frag = document.createDocumentFragment(); var myDiv = document.createElement("div"); myDiv.id = "myDiv"; var im = document.createElement("img"); im.src = "im.gif"; myDiv.appendChild(im); frag.appendChild(myDiv);
- 9. Animações Use CSS É mais performático https://daneden.github.io/animate.css/
- 10. Ajax jQuery Javascript $.ajax({ type: 'GET', url: /*... */ , data: /*... */ , success: function () { /*... */ }, error: function () { /*... */ } }); var request = new XMLHttpRequest(); request.open('GET', '/my/url', true); request.onload = function() { if (request.status >= 200 && request.status < 400) { var resp = request.responseText; } else { /*... */ } }; request.onerror = function() { /*... */ }; request.send();
- 11. document.ready() jQuery Javascript $(document).ready(function () { /*... */ }); function ready(fn) { if (document.readyState != 'loading'){ fn(); } else { document.addEventListener('DOMContentLoaded', fn); } }
- 12. Outras opções de framework Zepto.js Ractive.js MooTools Dojo Toolkit ...
- 13. Qual a melhor opção???