Uma coisa que quero deixar absolutamente claro nesta série é que nenhum de nós deve ser anti-JavaScript vanilla. “Vanilla” significa JavaScript “bruto” ou “nativo”. JavaScript que roda no navegador sem nenhuma estrutura ou biblioteca ou qualquer outra coisa. Na verdade, se isso não for óbvio, o próprio jQuery é escrito em JavaScript vanilla. Tem que ser, para funcionar. Tenho certeza de que internamente ele chama seus próprios métodos e outras coisas, mas no fundo “é apenas JavaScript”.
Como regra geral, se estou trabalhando em um site no qual usa um punhado de JavaScript para realizar algumas pequenas tarefas (por exemplo, ocultar / mostrar algumas coisas), eu aprenderia a não usar uma biblioteca como o jQuery. Qualquer coisa acima e além disso e a biblioteca valerá seu peso. Na verdade, nunca trabalhei em um site não trivial que não usasse jQuery.
Independentemente de você estar trabalhando em um site que tem ou não, é uma boa coisa aprender pelo menos o básico em JavaScript vanilla. Eu gosto bastante deste artigo do NetTuts + que mostra equivalentes (e outro bom). Eu faço referência a este regularmente:
$('a').on('click', function() ( ));é essencialmente isto:
().forEach.call( document.querySelectorAll('a'), function(el) ( el.addEventListener('click', function() ( ), false); ));Começando no vídeo, tínhamos um botão como este:
ButtonE como já fizemos várias vezes, temos uma referência a ele assim:
$("#press");Para obter esse elemento em JavaScript vanilla, poderíamos:
document.getElementById("press");Essas coisas não são exatamente equivalentes porque a versão jQuery é na verdade um objeto jQuery, o que significa que pode fazer todas aquelas coisas jQuery especiais (por exemplo, cada método jQuery). Mas é exatamente a mesma coisa que:
$("#press")(0);É importante saber que quando temos uma referência a um elemento como esse, temos todos os tipos de informações úteis sobre ele. Perdoe o enorme bloqueio, mas vale a pena dirigir esta casa. Aqui está apenas um pouco do que obtemos dessa referência de botão (conforme tirado do Google Chrome DevTools):
accessKey: "" attributes: NamedNodeMap autofocus: false baseURI: "http://s.codepen.io/pen/secure_iframe?turn_off_js=&mobile=false" childElementCount: 0 childNodes: NodeList(1) children: HTMLCollection(0) classList: DOMTokenList className: "" clientHeight: 23 clientLeft: 2 clientTop: 0 clientWidth: 58 contentEditable: "inherit" dataset: DOMStringMap dir: "" disabled: false draggable: false firstChild: text firstElementChild: null form: null formAction: "" formEnctype: "" formMethod: "" formNoValidate: false formTarget: "" hidden: false id: "press" innerHTML: "Button" innerText: "Button" isContentEditable: false labels: NodeList(0) lang: "" lastChild: text lastElementChild: null localName: "button" name: "" namespaceURI: "http://www.w3.org/1999/xhtml" nextElementSibling: script nextSibling: text nodeName: "BUTTON" nodeType: 1 nodeValue: null offsetHeight: 23 offsetLeft: 0 offsetParent: body offsetTop: 0 offsetWidth: 62 onabort: null onbeforecopy: null onbeforecut: null onbeforepaste: null onblur: null onchange: null onclick: null oncontextmenu: null oncopy: null oncut: null ondblclick: null ondrag: null ondragend: null ondragenter: null ondragleave: null ondragover: null ondragstart: null ondrop: null onerror: null onfocus: null oninput: null oninvalid: null onkeydown: null onkeypress: null onkeyup: null onload: null onmousedown: null onmouseenter: null onmouseleave: null onmousemove: null onmouseout: null onmouseover: null onmouseup: null onmousewheel: null onpaste: null onreset: null onscroll: null onsearch: null onselect: null onselectstart: null onsubmit: null onwebkitfullscreenchange: null onwebkitfullscreenerror: null outerHTML: "Button" outerText: "Button" ownerDocument: document parentElement: body parentNode: body prefix: null previousElementSibling: null previousSibling: text pseudo: "" scrollHeight: 23 scrollLeft: 0 scrollTop: 0 scrollWidth: 58 shadowRoot: null spellcheck: true style: CSSStyleDeclaration tabIndex: 0 tagName: "BUTTON" textContent: "Button" title: "" translate: true type: "submit" validationMessage: "" validity: ValidityState value: "" webkitPseudo: "" webkitRegionOverset: "undefined" webkitShadowRoot: null webkitdropzone: "" willValidate: true __proto__: HTMLButtonElementNo vídeo, falamos sobre o uso tagName, que pode ser útil quando você está determinando se está olhando para o elemento certo em um evento (às vezes, os eventos podem disparar em elementos aninhados e você precisa ter certeza).
Também examinamos algumas associações de eventos da "velha escola" com coisas como definir a onclickpropriedade. É problemático porque é fácil sobrescrever. Não precisamos nem pensar (muito) sobre essas coisas com jQuery porque seus métodos de associação de eventos não sobrescrevem outros. Bom design de API.
Em relação à localização de elementos, há também getElementsByClassName, querySelector e querySelectorAll (que existem até mesmo por causa de bibliotecas como jQuery), que valem a pena conhecer.
Você pode aprender sobre o JavaScript vanilla com o próprio jQuery! Paul Irish tem alguns vídeos bons sobre coisas que aprendeu olhando para a fonte.