{"id":4086,"date":"2015-04-13T09:45:32","date_gmt":"2015-04-13T12:45:32","guid":{"rendered":"https:\/\/www.turbosite.com.br\/blog\/?p=4086"},"modified":"2015-04-13T09:45:32","modified_gmt":"2015-04-13T12:45:32","slug":"10-dicas-de-como-escrever-javascript-sem-jquery","status":"publish","type":"post","link":"https:\/\/www.turbosite.com.br\/blog\/10-dicas-de-como-escrever-javascript-sem-jquery\/","title":{"rendered":"10 dicas de como escrever JavaScript sem jQuery"},"content":{"rendered":"<p>jQuery \u00e9 uma grande biblioteca e isto n\u00e3o podemos negar. Ela\u00a0apareceu\u00a0quando o IE6 era o navegador mais utilizado. Naquela \u00e9poca, havia peculiaridades que tornava escrever JavaScript puro tedioso\/complicado, era necess\u00e1rio muitas adapta\u00e7\u00f5es para funcionar nos diversos browsers,\u00a0para contornar estes problemas jQuery era a ferramenta perfeita para escrever c\u00f3digos cross browser.<\/p>\n<p>Hoje, no entanto, os navegadores melhoraram muito. Podemos usar confortavelmente todos os recursos fornecidos pelo ES5 (Ecmascript 5), e n\u00f3s temos \u00e0 nossa disposi\u00e7\u00e3o APIs HTML 5 impressionantes que tornam o trabalho com o DOM muito mais f\u00e1cil. Os desenvolvedores est\u00e3o agora em uma posi\u00e7\u00e3o onde eles podem optar por deixar de fora jQuery para alguns projetos, e ainda manter sua produtividade.<\/p>\n<p>N\u00e3o interpretem mal, jQuery ainda \u00e9 uma biblioteca maravilhosa. No entanto, para pequenos projetos\u00a0como p\u00e1ginas e intera\u00e7\u00f5es simples, dever\u00edamos utilizar JavaScript puro, assim economizando um pouco de\u00a0recursos. Aqui est\u00e3o 10 dicas que ir\u00e3o ajud\u00e1-lo com pequenos trechos de c\u00f3digo.<\/p>\n<p>Ap\u00f3s ler estas 10 dicas de como escrever JavaScript sem jQuery voc\u00ea ser\u00e1 capaz de capturar, alterar, inserir e remover conte\u00fados do HTML sem a necessidade de utilizar jQuery, como tamb\u00e9m utilizar os eventos, alterar classes e atributos.<\/p>\n<blockquote><p>\u00a0Este artigo \u00e9 uma tradu\u00e7\u00e3o de\u00a0<a href=\"http:\/\/tutorialzine.com\/2014\/06\/10-tips-for-writing-javascript-without-jquery\/\">10 Tips for Writing JavaScript without jQuery<\/a><\/p><\/blockquote>\n<h3>1. Escutando pelo carregando da p\u00e1gina<\/h3>\n<pre class=\"top-margin:20 bottom-margin:20 left-set:true left-margin:20 right-set:true right-margin:20 whitespace-before:2 whitespace-after:2 lang:php decode:true\" title=\"Escutando pelo carregando da p\u00e1gina\">\/\/ Adicionar uma escuta ao carregamento da p\u00e1gina, logo ap\u00f3s\n\/\/ chame uma fun\u00e7\u00e3o anonima e execute seu c\u00f3digo JavaScript\n\ndocument.addEventListener('DOMContentLoaded', function () {\n\n    \/\/ Diga Ol\u00e1 para o Console :)\n    console.log('Ol\u00e1 Console!');\n\n});<\/pre>\n<p>&nbsp;<\/p>\n<h3>2.\u00a0Selecionando elementos<\/h3>\n<p>Antigamente\u00a0s\u00f3 podemos selecionar elementos por id, classe e nome do elemento.\u00a0jQuery foi um salva-vidas com os seus seletores estilo css inteligentes. Criadores de Browsers gostaram e introduziram duas APIs importantes &#8211; querySelector e querySelectorAll:<\/p>\n<p><iframe loading=\"lazy\" width=\"100%\" height=\"300\" src=\"\/\/jsfiddle.net\/rf9abd2h\/embedded\/\" allowfullscreen=\"allowfullscreen\" frameborder=\"0\"><\/iframe><\/p>\n<p>&nbsp;<\/p>\n<h3>3. Adicionar e remover eventos de escuta<\/h3>\n<p>Ouvir eventos \u00e9 uma parte fundamental da constru\u00e7\u00e3o de uma aplica\u00e7\u00e3o web e hoje sua utiliza\u00e7\u00e3o foi simplificada com o addEventListener:<\/p>\n<p><iframe loading=\"lazy\" width=\"100%\" height=\"300\" src=\"\/\/jsfiddle.net\/txzaej6w\/1\/embedded\/\" allowfullscreen=\"allowfullscreen\" frameborder=\"0\"><\/iframe><\/p>\n<p>&nbsp;<\/p>\n<h3>4. Manipulando classes e atributos<\/h3>\n<p>Manipular\u00a0nomes de classes sem jQuery costumava ser muito inconveniente. N\u00e3o mais, gra\u00e7as \u00e0 propriedade <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Element\/classList\">classList<\/a>. E se voc\u00ea precisa para manipular atributos, voc\u00ea tem <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Element.setAttribute\">setAttribute<\/a>.<\/p>\n<p><iframe loading=\"lazy\" width=\"100%\" height=\"300\" src=\"\/\/jsfiddle.net\/ez888e9j\/embedded\/\" allowfullscreen=\"allowfullscreen\" frameborder=\"0\"><\/iframe><\/p>\n<p>&nbsp;<\/p>\n<h3>5. Obter e manipular classes e atributos<\/h3>\n<p>jQuery tem os m\u00e9todos text() e html(). Opcional a isto, podemos\u00a0usar as propriedades <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Node.textContent\">TextContent<\/a> e <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Element.innerHTML\">innerHTML<\/a>:<\/p>\n<p><iframe loading=\"lazy\" width=\"100%\" height=\"300\" src=\"\/\/jsfiddle.net\/z6t58gee\/1\/embedded\/\" allowfullscreen=\"allowfullscreen\" frameborder=\"0\"><\/iframe><\/p>\n<p>&nbsp;<\/p>\n<h3>6. Inserindo e removendo elementos<\/h3>\n<p>Embora jQuery torna muito mais f\u00e1cil a adi\u00e7\u00e3o e remo\u00e7\u00e3o de elementos do DOM, hoje com JavaScript puro\u00a0\u00e9 relativamente simples. Veja como acrescentar, remover e substituir qualquer elemento:<\/p>\n<p><iframe loading=\"lazy\" width=\"100%\" height=\"300\" src=\"\/\/jsfiddle.net\/gcjxrh44\/embedded\/\" allowfullscreen=\"allowfullscreen\" frameborder=\"0\"><\/iframe><\/p>\n<p>&nbsp;<\/p>\n<h3>7. Andando pelo\u00a0DOM<\/h3>\n<p>Como todo verdadeiro ninja JS sabe, h\u00e1 uma grandes\u00a0segredos\u00a0escondidos\u00a0no DOM. Em compara\u00e7\u00e3o com jQuery, APIs DOM oferecem funcionalidades limitadas para a sele\u00e7\u00e3o de elementos.\u00a0No entanto, ainda existem muitos recursos que voc\u00ea poder\u00e1 utilizar para percorrer todo o DOM.<\/p>\n<p><iframe loading=\"lazy\" width=\"100%\" height=\"300\" src=\"\/\/jsfiddle.net\/wqs2Lw88\/embedded\/\" allowfullscreen=\"allowfullscreen\" frameborder=\"0\"><\/iframe><\/p>\n<p>&nbsp;<\/p>\n<h3>8.\u00a0Looping sobre matrizes<\/h3>\n<p>Alguns dos m\u00e9todos que utilizamos em jQuery est\u00e3o dispon\u00edveis com o padr\u00e3o ES5. Para itera\u00e7\u00e3o, podemos usar <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/Array\/forEach\">forEach<\/a> e <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/Array\/map\">map<\/a> em vez de suas vers\u00f5es do jQuery &#8211; <strong>each<\/strong>() e do <strong>map<\/strong>(). S\u00f3 tome cuidado para as diferen\u00e7as de argumentos e padr\u00e3o este valor nos retornos de chamada.<\/p>\n<p><iframe loading=\"lazy\" width=\"100%\" height=\"300\" src=\"\/\/jsfiddle.net\/5g4dhb9r\/embedded\/\" allowfullscreen=\"allowfullscreen\" frameborder=\"0\"><\/iframe><\/p>\n<p>&nbsp;<\/p>\n<h3>9.\u00a0Anima\u00e7\u00f5es<\/h3>\n<p>O m\u00e9todo animate do jQuery \u00e9 superior a qualquer coisa que voc\u00ea tentar com JavaScript puro, mas\u00a0se voc\u00ea precisar de anima\u00e7\u00f5es complexas , voc\u00ea ainda deve utilizar jQuery. Mas, gra\u00e7as a todas as maravilhas do CSS3, alguns dos casos mais simples podem ser tratadas com uma biblioteca leve como <a href=\"http:\/\/daneden.github.io\/animate.css\/\">Animate.css<\/a>, que permite acionar anima\u00e7\u00f5es, adicionando ou removendo os nomes de classe de elementos.<\/p>\n<p><iframe loading=\"lazy\" width=\"100%\" height=\"300\" src=\"\/\/jsfiddle.net\/cxvcuvzv\/embedded\/\" allowfullscreen=\"allowfullscreen\" frameborder=\"0\"><\/iframe><\/p>\n<p>&nbsp;<\/p>\n<h3>10.\u00a0AJAX<\/h3>\n<p>AJAX foi outra tecnologia que costumava ser uma bagun\u00e7a quando se falava de cross-browser. A boa not\u00edcia \u00e9 que agora podemos usar o mesmo c\u00f3digo em todos os lugares. A m\u00e1 not\u00edcia, por\u00e9m, \u00e9 que ele ainda \u00e9 complicado para instanciar e enviar solicita\u00e7\u00f5es de AJAX com <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/XMLHttpRequest\">XMLHttpRequest<\/a>, por isso \u00e9 melhor deixar para uma biblioteca. Mas voc\u00ea n\u00e3o precisa incluir jQuery s\u00f3 para isso. Voc\u00ea pode usar uma das in\u00fameras <a href=\"http:\/\/microjs.com\/#ajax\">bibliotecas leves<\/a> que est\u00e3o dispon\u00edveis. Aqui est\u00e1 um exemplo a constru\u00e7\u00e3o de uma solicita\u00e7\u00e3o AJAX diretamente, e usando a biblioteca <a href=\"https:\/\/github.com\/ded\/reqwest\">reqwest<\/a>:<\/p>\n<pre class=\"top-margin:20 bottom-margin:20 left-set:true left-margin:20 right-set:true right-margin:20 whitespace-before:2 whitespace-after:2 lang:js decode:true\">\/\/ Este exemplo demonstra a maneira de criar uma requisi\u00e7\u00e3o, neste exemplo \u00e9 requisitado uma p\u00e1gina e capturado seu conte\u00fado body e logado no console.\n\nvar request = new XMLHttpRequest();\nrequest.open('GET', 'http:\/\/localhost', true);\n\nrequest.onload = function (e) {\n    if (request.readyState === 4) {\n\n        \/\/ Verifique se a requisi\u00e7\u00e3o foi efetuada com sucesso.\n\n        if (request.status === 200) {\n            console.log(request.responseText);\n        } else {\n            console.error(request.statusText);\n        }\n    }\n};\n\n\/\/ Resgata erros:\n\nrequest.onerror = function (e) {\n    console.error(request.statusText);\n};\n\nrequest.send(null);\n\n\/\/ Outro met\u00f3do utilizando uma pequena biblioteca chamada Reqwest (1.5Kb), isto pode tornar seu trabalho mais f\u00e1cil.\n\nreqwest({\n    url: 'http:\/\/localhost\/',\n    method: 'get',\n    error: function (err) {},\n    success: function (resp) {\n        console.log(resp);\n    }\n});<\/pre>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>10 dicas de como escrever JavaScript sem jQuery. Se voc\u00ea tem um pequeno projeto e que deix\u00e1-lo enxuto, deve ser considerado utilizar essas dicas!<\/p>\n","protected":false},"author":1,"featured_media":4087,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[6,15,28],"tags":[192,365,448],"class_list":["post-4086","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-dicas","category-javascript","category-tutoriais","tag-dicas-javascript","tag-javascript-puro","tag-no-jquery"],"_links":{"self":[{"href":"https:\/\/www.turbosite.com.br\/blog\/wp-json\/wp\/v2\/posts\/4086","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.turbosite.com.br\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.turbosite.com.br\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.turbosite.com.br\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.turbosite.com.br\/blog\/wp-json\/wp\/v2\/comments?post=4086"}],"version-history":[{"count":0,"href":"https:\/\/www.turbosite.com.br\/blog\/wp-json\/wp\/v2\/posts\/4086\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.turbosite.com.br\/blog\/wp-json\/wp\/v2\/media\/4087"}],"wp:attachment":[{"href":"https:\/\/www.turbosite.com.br\/blog\/wp-json\/wp\/v2\/media?parent=4086"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.turbosite.com.br\/blog\/wp-json\/wp\/v2\/categories?post=4086"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.turbosite.com.br\/blog\/wp-json\/wp\/v2\/tags?post=4086"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}