JavaScript для фронтендера
1. Метод поиска querySelector
JavaScript отвечает за динамику веб-страниц, позволяет им реагировать на действия пользователя. Но для того, чтобы JavaScript мог изменить состояние элемента на странице, вначале ему необходимо этот элемент найти.
Метод поиска элементов в JavaScript называется querySelector.
Его синтаксис:
document.querySelector(".logo img");
Здесь:
document – где ищем (по всему документу);
querySelector – метод поиска элементов;
.logo img – css-селектор
Метод querySelector позволяет найти любой элемент веб-страницы, отображенный в html-разметке: тег, класс, псевдокласс, id и их сочетания.
Пример. Используя метод querySelector найдём в документе элемент с классом peter
document.querySelector(".peter");
Пример. Найдём изображение внутри элемента с классом peter,
document.querySelector(".peter img");
2. Метод поиска querySelectorAll
Метод querySelector ищет первый элемент на странице. Если нужно найти все элементы, отвечающие определённому css-селектору, используем метод querySelectorAll.
Методы поиска querySelector и querySelectorAll позволяют решить около 95% задач поиска элемента на веб-странице и охватывают практически все типовые случаи.
Пример. Найдём все изображения внутри элемента с классом pets, используя метод поиска querySelectorAll.
document.querySelectorAll(".pets img");
3. Объявление и создание переменных
Чтобы сохранить результаты поиска и иметь возможность обращаться к ним в дальнейшем, создают переменные.
Процесс создания переменной выглядит примерно так:
var logo = document.querySelector(".logo img");
Здесь:
var – объявление переменной;
logo – имя переменной;
= – оператор присвоения.
Правая часть выражения нам уже известна и понятна.
Способ объявления переменной и присвоения ей определённого значения прописаны в стандартах языка, имя переменной является произвольным.
Выбирая имена переменных, старайтесь делать их осмысленным и понятным.
Имена переменных в JavaScript могут содержать буквы, цифры, знак подчёркивания. Для них даже можно использовать русские буквы, но устоявшейся практикой являются всё же английские имена переменных.
Объявление всех используемых переменных принято выносить в начало программы.
Пример. Используя метод querySelector, найдём первое изображение на странице, результат поиска присвоим переменной с именем peter.
var peter = document.querySelector("img");
4. Ограничиваем область поиска // как искать в определённой области документа
Обычно на веб-странице находятся сотни и тысячи различных элементов. Если известно, что интересующие нас элементы находятся внутри определённой области на странице, поиск осуществляем внутри неё.
Например, если нужные нам элементы находятся внутри главного меню, то разумно и правильно будет найти в документе меню, присвоить результат поиска переменной и дальше уже её использовать в качестве области поиска:
var navigation = document.querySelector("nav");
var logo = navigation.querySelector(".logo img");
5. Используем консоль браузера // выполнение кода в консоли
Для отладки, проверки, тестирования JavaScript кода очень удобно использовать консоль браузера. На сегодня наиболее функциональными являются консоль Google Chrome, а также консоль Firefox с установленным дополнением Firebug.
Чтобы открыть консоль браузера, нажмите на клавишу F12 на клавиатуре.
Потренируйтесь находить элементы на веб-страницах, используя методы поиска querySelector и querySelectorAll и консоль браузера.
Обратите внимание, если навести курсор на полученный в консоли результат, на странице он подсветится синим.
6. Выводим информацию в консоль браузера
Чтобы вывести отладочную информацию в консоль браузера, используется метод console.log();
Выполните в консоли браузера код:
console.log("peter");
Текст в кавычках является строкой, и выводится без изменений.
Изменим код:
console.log(peter);
Теперь браузер вывел значение переменной peter.
7. Метод отлова событий
Событие – это сигнал от браузера о том, что что-то произошло.
Существует много видов событий. Перечислим некоторые из них (запоминать события не нужно).
События мыши:
• click – клик
• contextmenu – клик правой кнопкой мыши
• dbclick – двойной клик
• mouseover – навели курсор
• mouseout – убрали курсор
• mousedown и mouseup – кнопку мыши нажали или отжали
• mousemove – движение мыши
Клавиатурные события:
• keydown – кнопка нажата
• keyup – кнопка отжата
• keypress – кнопка удерживается
События на элементах управления:
• focus – элемент в фокусе, например, пользователь нажимает на input или в текстовое поле вводит текст
• blur – убрали мышку из фокуса
• reset – форма очищена
• submit – форма отправлена
И все эти события можно отлавливать.
Метод addEventListener отлавливает событие элемента и выполняет переданную функцию.
Его синтаксис:
peter.addEventListener("click", function(){});
• peter – элемент, у которого отлавливаем события;
• addEventListener – метод отлова событий;
• click – какое именно событие отлавливаем ("клик");
• function(){} – функция, которая будет выполнена в тот момент, когда событие произойдёт.
Пример. Напишите код, который будет выводить в консоль сообщения «Второй поросёнок» и «Третий поросёнок» при кликах по второму и третьему изображениях.
peter_2.addEventListener("click", function(){
console.log("Второй поросёнок");
});
peter_3.addEventListener("click", function(){
console.log("Третий поросёнок");
});
Пример. Используя известные нам методы: querySelector, addEventListener и console.log(), напишем программу, которая при клике по изображению поросёнка выводит в консоль браузера текст: «Это поросёнок Пётр».
var peter = document.querySelector(".peter img");
peter.addEventListener("click", function(){
console.log("Это поросёнок Пётр");
});
8. Метод classList.toggle
Мы научились находить любой элемент на странице, замечать, что с этим элементом что-то происходит и даже выводить результаты своих наблюдений в консоль браузера. Единственный недостаток: информация в консоли предназначена в первую очередь для разработчиков. Попробуем сделать её доступной и для рядовых пользователей тоже. Для этого мы будем использовать метод classList.
Как подсказывает название метода, он предназначен для работы с классами и только с классами. Зато с ними он умеет делать всё!
element.classList.add("class"); - добавляет элементу класс;
element.classList.remove("class"); - удаляет класс;
element.classList.toggle("class"); - переключает класс: добавляет, если класса нет, и удаляет, если он есть.
С переключения классов мы и начнём, но вначале одно важное замечание.
Так как метод classList работает только с классами, то в кавычках внутри может находиться только название класса. И вот перед этим названием класса точка не ставится никогда.
Во всех остальных отношениях метод classList является идеальным для работы с классами. Он поддерживается всеми современными браузерами, и даже IE10. Использовать метод classList в более ранних версиях IE позволяет полифил – библиотека, которая добавляет в старые браузеры поддержку новых возможностей.
Пример. Напишем программу, которая будет скрывать и отображать картинку при кликах мышкой.
1. В css пропишем правило для класса peter-hide указав ему свойство opacity: 0;
.peter-hide {
opacity: 0;
}
2. В js заменим метод console.log внутри функции на метод classList.toggle, применив его к переменной peter и указав в кавычках название класса peter-hide.
var peter = document.querySelector(".peter img");
peter.addEventListener("click", function(){
peter.classList.toggle("peter-hide");
});
Метод classList позволяет не только скрыть элемент, но могли сделать с ним многое другое: изменить размер, повернуть, переместить и т.д. Всё зависит от css-правил для нового класса, присваиваемого элементу.
9. Отмена события по умолчанию
Если элемент имеет событие по умолчанию, а это относится не только к ссылкам, но и к элементам форм, данное событие следует отменить.
Чтобы понять как это можно сделать, посмотрите на код:
var logo = document.querySelector(".logo img");
logo.addEventListener("click", function(event){
event.preventDefault();
console.log("Это моя аватарка");
});
Большая часть кода нам известна, но появилось два изменения:
function(event) – аргумент event – любое событие;
event.preventDefault(); – оно отменено.
10. Если элемент недоступен // classList.add и classList.remove
Не всегда желательно и возможно кликать по самому элементу, чтобы его показать или скрыть. Часто стоит задача показывать или скрывать элемент кликом по кнопке, не являющейся частью данного элемента.
Пример. Научимся отображать и скрывать элемент на странице кликом по кнопкам «Показать» и «Скрыть».
1. Используя метод поиска querySelector, найдём в документе кнопки с классами show и hide, присвоим результат поиска переменным show и hide.
var show = document.querySelector(".show");
var hide = document.querySelector(".hide");
2. Используем метод addEventListener для отлова кликов по кнопкам show и hide и выполнения переданной функции.
show.addEventListener("click", function(){});
hide.addEventListener("click", function(){});
3. Для кликов по кнопке hide в качестве функции укажем добавление класса peter-hide к элементу peter. Добавить класс позволяет метод classList.add
hide.addEventListener("click", function(){
peter.classList.add("peter-hide");
});
4. Для кликов по кнопке show в качестве функции укажем удаление класса peter-hide у элемента peter. Удалить класс позволяет метод classList.remove
show.addEventListener("click", function(){
peter.classList.remove("peter-hide");
});
11. Управление элементом с клавиатуры // window, event.keyCode
Существует возможность управлять поведением элемента нажимая на клавиши на клавиатуре.Вот как будет выглядеть код скрывающий элемент peter при нажатии на клавишу пробел:
window.addEventListener("keydown", function(event){
if(event.keyCode==32) {
peter.classList.add("peter-hide");
}
});
Большая часть кода нам уже знакома, но появились некоторые новые моменты. К ним относятся:
- глобальный объект window. Мы уже знакомы с глобальным объектом document, который содержит весь код страницы и все его элементы.
window – это окно браузера, в котором данный документ отображается;
- событие keydown. Несложно догадаться, что речь идёт о нажатии на клавишу;
- условие if(event.keyCode==32). Выполняется, если код нажатой клавиши равен 32. Узнать код клавиши можно на странице http://keycod.es/. Перейдите по ссылке, нажмите на клавишу и увидите её код. Оператор == означает «равно», тогда как одинарное = это уже известный нам оператор присвоения.