Окно браузера и прокрутка §

Окно (или вкладка) браузера в JavaScript обозначается словом window.

Обработчик событий onscroll §

Чтобы отследить прокрутку, используем обработчик событий onscroll. Он срабатывает каждый раз, когда страницу прокручивают, даже если её сдвинули всего на один пиксель.

window.onscroll = function () {
  console.log("Страница прокручена");
};

Свойство pageYOffset §

Свойство pageYOffset окна браузера содержит количество пикселей, на которое пользователь прокрутил страницу по вертикали:

// Если мы на самом верху страницы
console.log(window.pageYOffset); // Выведет: 0
 
// Прокрутим страницу на 200px
console.log(window.pageYOffset); // Выведет: 200

Величина горизонтальной прокрутки хранится в свойстве pageXOffset.

Метод scrollTo §

Чтобы прокрутить страницу, используем метод scrollTo:

window.scrollTo(координата - Х, координата - Y);

Координата Х указывает, куда нужно прокрутить страницу по горизонтали, а координата Y — куда нужно прокрутить страницу по вертикали. Когда браузер выполнит инструкцию, указанная точка окажется в левом верхнем углу окна. Координаты задаются в пикселях, но указывать единицы измерения не нужно:

// Прокрутит страницу на 100px вправо и на 50px вниз
window.scrollTo(100, 50);

Если прокрутить страницу до указанных координат не получается, браузер прокрутит её так далеко, как сможет, но увеличивать страницу не будет. Если страница помещается в окно целиком и полосы прокрутки нет, то браузер проигнорирует эту инструкцию.

Обработчик событий onchange §

Обработчик событий onchange срабатывает, когда пользователь выбирает новое значение из выпадающего списка.

// Находим выпадающий список
let select = document.querySelector("select");
 
// Добавляем обработчик событий
select.onchange = function () {
  // Выводим в консоль новое значение
  console.log(select.value);
};

Обработчик событий onchange можно использовать с разными элементами. Например, он срабатывает, когда пользователь переключает чекбокс или радиокнопки.

Оператор строгого равенства §

Чтобы проверить, равны ли два значения, используем оператор строгого равенства. Он обозначается тремя знаками равно:

"a" === "a"; // Результат: true
"a" === "b"; // Результат: false

Оператор строгого равенства сравнивает два значения и возвращает true, если они равны, и false, если они не равны. Значения, которые проверяет оператор, называют операндами.

Оператор строгого неравенства §

Оператор строгого неравенства работает противоположно оператору строгого равенства. Он сравнивает два значения и возвращает false, если значения равны, и true, если они не равны.

Оператор строгого неравенства обозначается восклицательным знаком и двумя знаками равно:

"a" !== "a"; // Результат: false
"a" !== "b"; // Результат: true

В JavaScript также есть оператор нестрогого равенства == и оператор нестрогого неравенства !=. О них мы поговорим в одной из следующих частей.

Оператор логическое И §

Чтобы объединить две части условия, используем логическое И. Оно обозначается двойным амперсандом — &&.

if (article.dataset.category !== filter.value && filter.value !== "all") {
  article.classList.add("hidden");
}

Логическое И возвращает true, только если обе части условия возвращают true. Если хотя бы одна из частей вернёт false, то условие целиком также будет считаться ложным:

true && true; // Результат: true
true && false; // Результат: false
false && true; // Результат: false
false && false; // Результат: false

Оператор логическое ИЛИ §

Логическое ИЛИ обозначается двумя вертикальными чертами и возвращает true, если хотя бы один из операндов возвращает true:

true || true; // Результат: true
true || false; // Результат: true
false || true; // Результат: true
false || false; // Результат: false