# 19: C'est juste du JavaScript - Astuces CSS

Une chose que je veux clarifier dans cette série est qu'aucun de nous ne devrait être anti-JavaScript vanilla. «Vanille» signifie JavaScript «brut» ou «natif». JavaScript qui s'exécute dans le navigateur sans aucun framework, ni bibliothèque, ni rien d'autre. En fait, si ce n'est pas évident, jQuery lui-même est écrit en JavaScript vanilla. Cela doit être, pour fonctionner. Je suis sûr qu'en interne, il appelle parfois ses propres méthodes, mais au fond, «c'est juste du JavaScript».

En règle générale, si je travaille sur un site dans lequel utilise une poignée de JavaScript pour accomplir quelques petites tâches (par exemple cacher / afficher quelques choses), j'apprendrais à ne pas utiliser une bibliothèque comme jQuery. Tout ce qui dépasse et au-delà de cela et la bibliothèque vaudra son poids. En fait, je n'ai jamais travaillé sur un site Web non trivial qui n'utilisait pas jQuery.

Que vous travailliez sur un site qui l'a ou non, c'est une bonne chose d'apprendre au moins les bases de JavaScript vanilla. J'aime bien cet article NetTuts + qui montre des équivalents (et un autre bon). Je référence celle-ci régulièrement:

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

est essentiellement ceci:

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

À partir de la vidéo, nous avions un bouton comme celui-ci:

Button

Et comme nous l'avons fait maintes et maintes fois maintenant, nous en avons une référence comme ceci:

$("#press");

Pour obtenir cet élément en JavaScript vanille, nous pourrions:

document.getElementById("press");

Ces choses ne sont pas tout à fait équivalentes car la version jQuery est en fait un objet jQuery, ce qui signifie qu'elle peut faire tout ce truc spécial jQuery (par exemple, chaque méthode jQuery). Mais c'est exactement la même chose que:

$("#press")(0);

Il est important de savoir que lorsque nous avons une référence à un élément comme celui-là, nous avons toutes sortes d'informations utiles à son sujet. Pardonnez l'énorme bloc, mais ça vaut le coup de conduire cette maison. Voici quelques-uns de ce que nous obtenons de cette référence de bouton (d'après 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

Dans la vidéo, nous abordons l'utilisation tagName, ce qui peut être utile lorsque vous déterminez si vous regardez le bon élément dans un événement (parfois des événements peuvent se déclencher sur des éléments imbriqués et vous devez vous en assurer).

Nous examinons également certaines liaisons d'événement «old school» avec des éléments comme la définition de la onclickpropriété. C'est problématique à cause de la facilité avec laquelle il est d'écraser. Nous n'avons même pas à penser (beaucoup) à ce genre de choses avec jQuery car ses méthodes de liaison d'événement n'écrasent pas les autres. Bonne conception d'API.

En ce qui concerne la recherche d'éléments, il existe également getElementsByClassName, querySelector et querySelectorAll (qui existe même à cause de bibliothèques comme jQuery) qui valent la peine d'être connues.

Vous pouvez en apprendre davantage sur le JavaScript vanille à partir de jQuery lui-même! Paul Irish a de bonnes vidéos sur les choses qu'il a apprises en regardant sa source.