Иногда, чтобы начать изучение чего-то огромного и сложного, вам нужно узнать что-то маленькое и простое. JavaScript огромен и сложен, но вы можете с легкостью освоить его, изучая небольшие и простые вещи. Если вы веб-дизайнер, я думаю, что есть одна вещь, которой вы можете научиться, и которая чрезвычайно вдохновляет.
Я хочу, чтобы вы усвоили вот что: когда вы нажимаете на какой-либо элемент, вы меняете класс на каком-то элементе.
Сводя это к основам, представьте, что у нас есть кнопка и div:
Click Me I'm an element Div может иметь несколько базовых стилей, и он может иметь несколько стилей, когда у него есть определенный класс:
div ( /* base styles */ ) div.yay ( /* styles when it has this class */ )Проницательные CSS-обманщики могут признать это возможностью для взлома флажков, но сегодня мы работаем не над этим.
Мы хотим прикрепить к кнопке «прослушиватель событий»: немного кода для «прослушивания», в нашем случае, событий щелчка, и когда это произойдет, запустить дополнительный код.
Вы знаете, как в CSS нам нужно «выбирать» элементы, чтобы стилизовать их? Нам нужно сделать это и в JavaScript, чтобы прикрепить слушателя событий. Мы создадим «ссылку» на кнопку в виде переменной, например:
var button = document.querySelector("button");Теперь, когда у нас есть ссылка на кнопку, мы прикрепим этот прослушиватель событий:
button.addEventListener("click", function() ( /* run code here, after the button is clicked. */ ));А что мы хотим делать в случае щелчка? Добавьте имя класса в наш div! Но так же, как нам нужна ссылка для кнопки, чтобы что-то с ней делать, нам также понадобится ссылка для div. Давайте сделаем их оба одновременно, вот весь код:
var button = document.querySelector("button"); var element = document.querySelector("div"); button.addEventListener("click", function() ( element.classList.toggle("yay"); ));Это все, что я хотел вам показать. С добавлением некоторого CSS к этому классу «yay» мы можем плавно увеличивать и уменьшать div:
См. Статью «Pen Click Something / Change Class» Криса Койера (@chriscoyier) на CodePen.
Почему именно это?
Возможности дизайна безграничны, когда вы управляете CSS и состоянием любого элемента (какие у него имена классов). Скрытие и раскрытие вещей - очевидная сила, но на самом деле это может быть что угодно.
Повышение уровня
Помните, что вы не ограничены изменением одного имени класса. Вы можете изменить несколько классов для одного элемента или изменить классы для нескольких элементов.
Посмотрите на свойство classList подробнее. «Переключить» - не единственный вариант.
Как и HTML и CSS, JavaScript имеет разные уровни поддержки браузерами. Посмотрите на поддержку браузером classList и добавьте addEventListener. Вас устраивает такой уровень поддержки вашего проекта? Если нет, вы можете изучить полифиллы или даже jQuery.
Мы использовали событие «щелчок», но существует множество других. Другие события мыши, прокрутка, клавиатура и многое другое. Многие сотни.
Метод, который мы использовали для выбора, был document.querySelector. Это было полезно, потому что оно возвращает нам единственный элемент, с которым мы можем работать. Кроме того, селекторы, которые вы даете ему, аналогичны селекторам CSS. document.querySelector("#overlay .modal > h2");был бы законным выбором. Это не единственный метод выбора, есть и другие, такие как getElementById, querySelectorAll, getElementsByClassName и другие.
Вот пример того, как мы выбираем кучу элементов навигации и прикрепляем обработчик кликов ко всем сразу:
См. «Классы смены пера на материале» Криса Койера (@chriscoyier) на CodePen.
Если код JavaScript, который мы написали в нашем небольшом примере, не загружался по какой-либо причине, у нас все равно была бы кнопка с надписью «Click Me». Но щелчок по нему ничего не даст, не так ли? Возможно, мы могли бы вставить эту кнопку с помощью JavaScript, чтобы кнопки даже не было, если мы не знаем, что она будет работать? Хорошая идея, а? ;)