# 19: Ini Hanya JavaScript - Trik CSS

Satu hal yang ingin saya jelaskan dalam seri ini adalah bahwa tidak satupun dari kita harus anti vanilla JavaScript. "Vanilla" yang berarti JavaScript "mentah" atau "asli". JavaScript yang berjalan di browser tanpa kerangka kerja atau perpustakaan atau apa pun. Faktanya, jika ini tidak jelas, jQuery itu sendiri ditulis dalam vanilla JavaScript. Itu harus, untuk bekerja. Saya yakin secara internal itu menyebut metode itu sendiri dan kadang-kadang seperti itu, tetapi pada intinya "itu hanya JavaScript".

Sebagai aturan praktis, jika saya bekerja di situs yang menggunakan beberapa JavaScript untuk menyelesaikan beberapa tugas kecil (misalnya menyembunyikan / menampilkan beberapa hal), saya akan belajar untuk tidak menggunakan perpustakaan seperti jQuery. Apa pun di atas dan di luar itu dan perpustakaan akan sangat berharga. Faktanya, saya tidak pernah mengerjakan situs web non-sepele yang tidak menggunakan jQuery.

Terlepas dari apakah Anda bekerja di situs yang memilikinya atau tidak, adalah hal yang baik untuk mempelajari setidaknya dasar-dasarnya dalam vanilla JavaScript. Saya sangat menyukai artikel NetTuts + ini yang menunjukkan padanan (dan satu lagi bagus). Saya mereferensikan yang ini secara teratur:

$('a').on('click', function() ( ));

pada dasarnya ini:

().forEach.call( document.querySelectorAll('a'), function(el) ( el.addEventListener('click', function() ( ), false); ));

Mulai di video, kami memiliki tombol seperti ini:

Button

Dan seperti yang telah kami lakukan berulang kali, kami mendapat referensi seperti ini:

$("#press");

Untuk mendapatkan elemen itu di vanilla JavaScript kita bisa:

document.getElementById("press");

Hal-hal itu tidak cukup setara karena versi jQuery sebenarnya adalah objek jQuery yang berarti ia dapat melakukan semua hal jQuery khusus (misalnya setiap metode jQuery). Tapi itu sama persis dengan:

$("#press")(0);

Penting untuk diketahui ketika kita memiliki referensi ke elemen seperti itu, kita memiliki semua jenis informasi yang berguna tentangnya. Maafkan blok yang sangat besar, tetapi itu layak untuk membawa pulang ini. Ini hanya beberapa dari apa yang kami dapatkan dari referensi tombol itu (seperti yang diambil dari 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__: HTMLButtonElement

Dalam video yang kita bahas tentang penggunaan tagName, yang dapat berguna saat Anda menentukan apakah Anda melihat elemen yang tepat dalam suatu acara (terkadang peristiwa dapat memicu pada elemen bersarang dan Anda perlu memastikannya).

Kami juga melihat beberapa acara "jadul" yang mengikat dengan hal-hal seperti pengaturan onclickproperti. Ini bermasalah karena betapa mudahnya menimpa. Kami bahkan tidak perlu memikirkan (banyak) tentang hal-hal itu dengan jQuery karena metode pengikatan kejadiannya tidak menimpa yang lain. Desain API yang bagus.

Mengenai menemukan elemen, ada juga getElementsByClassName, querySelector, dan querySelectorAll (yang bahkan ada karena pustaka seperti jQuery) yang semuanya perlu diketahui.

Anda dapat belajar tentang vanilla JavaScript dari jQuery itu sendiri! Paul Irish memiliki beberapa video bagus tentang hal-hal yang dia pelajari dari sumbernya.