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.

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???

14. jQuery Customizado!!!
http://projects.jga.me/jquery-builder/

15. 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

16. Obrigada!
Christiane Morais
@ChrisCirce
chris.morais2