programando javascript sem jquery
TRANSCRIPT
Programando Javascript sem jQuery
Christiane Morais@ChrisCirce
chris.morais2
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
–Desconhecido
“Javascript é a unica linguagem que nenhum programador acha que precisa aprender.”
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
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
Os métodos mais utilizados
Seletores / Manipuladores de DOM
Animações
Ajax
document.ready()
Seletores
jQuery Javascript
$(“div”) document.getElementByTagName(“div”)
$(“.class”)document.getElementByClassName(“class
”)
$(“#idObjeto”) document.getElementByID(“idObjeto”)
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); document.body.appendChild(frag);
Animações
Use CSS
É mais performático
https://daneden.github.io/animate.css/
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();
document.ready()
jQuery Javascript
$(document).ready(function () { /*... */});
function ready(fn) { if (document.readyState != 'loading'){ fn(); } else {document.addEventListener('DOMContentLoaded', fn); }}
Outras opções de framework
Zepto.js
Ractive.js
MooTools
Dojo Toolkit
...
Qual a melhor opção???
Guia de Estudos
https://www.javascript.com/
http://api.jquery.com/
http://projects.jga.me/jquery-builder/
http://youmightnotneedjquery.com/
https://daneden.github.io/animate.css/
http://desenvolvimentoparaweb.com/
tableless.com.br
Obrigada!
Christiane Morais@ChrisCirce
chris.morais2