Марейн Хавербеке - Выразительный JavaScript

p:hover { color: red }

Наведите мышь на этот параграф .

Когда элемент прокручивается, запускается событие "scroll". Это используется во многих случаях, например чтобы узнать, на что сейчас пользователь смотрит (чтобы останавливать анимацию, не попавшую на экран, или отправлять секретные шпионские донесения в ваш злодейский штаб), или визуально демонстрировать прогресс (подсвечивая часть содержания или показывая номер страницы).

В примере в правом верхнем углу документа создаётся индикатор процесса, который заполняется по мере прокрутки элемента вниз.

.progress {

border: 1px solid blue;

width: 100px;

position: fixed;

top: 10px; right: 10px;

}

.progress > div {

height: 12px;

background: blue;

width: 0%;

}

body {

height: 2000px;

}

Scroll me...

var bar = document.querySelector(".progress div");

addEventListener("scroll", function() {

var max = document.body.scrollHeight - innerHeight;

var percent = (pageYOffset / max) * 100;

bar.style.width = percent + "%";

});

Позиция элемента fixedозначает почти то же, что absolute, но ещё и предотвращает прокручивание элемента вместе с остальным документом. Смысл в том, чтобы оставить наш индикатор в углу. Внутри него находится другой элемент, который изменяет размер, отражая текущий прогресс. Мы используем проценты вместо pxдля задания ширины, чтобы размер элемента изменялся относительно размера всего индикатора.

Глобальная переменная innerHeightдаёт высоту окна, которую надо вычесть из полной высоты прокручиваемого элемента – при достижении конца элемента прокрутка заканчивается. (Также в дополнение к innerHeightесть переменная innerWidth). Поделив текущую позицию прокрутки pageYOffsetна максимальную позицию прокрутки, и умножив на 100, мы получили процент для индикатора.

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

При получении элементом фокуса браузер запускает событие "focus". Когда он теряет фокус, запускается событие "blur".

В отличие от предыдущих событий, эти два не распространяются. Обработчик родительского узла не уведомляется о получении или утрате фокуса дочерним элементом.

Следующий пример демонстрирует текст подсказки для того текстового поля, у которого в данный момент фокус.

Имя:

Возраст:

var help = document.querySelector("#help");

var fields = document.querySelectorAll("input");

for (var i = 0; i < fields.length; i++) {

fields[i].addEventListener("focus", function(event) {

var text = event.target.getAttribute("data-help");

help.textContent = text;

});

fields[i].addEventListener("blur", function(event) {

help.textContent = "";

});

}

Объект windowполучает события focusи blur, когда пользователь выделяет или убирает фокус с закладки браузера или окна браузера, в котором показан документ.

Когда заканчивается загрузка страницы, на объектах windowи bodyзапускается событие “load”. Это часто используется для планирования инициализирующих действий, которым необходим полностью построенный документ. Вспомните, что содержимое тегов запускается сразу, как только тег встречается. Иногда это слишком рано – например, когда скрипту нужно что-то сделать с теми частями документа, которые находятся после тега .

У элементов типа картинок или тегов скрипта, которые загружают внешний файл, тоже есть событие “load”, которое показывает, что файл загружен. Как и события фокуса, события загрузки не распространяются.

Когда страница закрывается или с неё уходят (например, по ссылке), запускается событие "beforeunload". Основная цель – защитить пользователя от случайной потери данных при закрытии документа. Предотвращение закрытия страницы не производится, как вы могли подумать, при помощи preventDefault. Вместо этого используется возврат строки из обработчика. Строка будет использована в диалоге, который спрашивает пользователя, хочет ли он остаться на странице или покинуть её. Этот механизм гарантирует, что пользователь может покинуть страницу, даже если на ней работает зловредный скрипт, который бы хотел не отпускать пользователя, а вместо этого показывал бы ему мошенническую рекламу по снижению веса.

Несколько вещей могут привести к старту скрипта. Чтение тега — одна из них. Запуск события – ещё одна. В главе 13 обсуждается функция requestAnimationFrame, которая планирует запуск функции перед следующей перерисовкой страницы. Это ещё один способ запустить скрипт.

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

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

То, что программы JavaScript делают по одной вещи за раз, облегчает нашу жизнь. Если вам очень надо сделать в фоне что-то тяжёлое, не подвешивая при этом страницу, браузеры предоставляют штуку под названием «сетевые рабочие» (web worker) – изолированное окружение JavaScript, работающее вместе с главной программой над документом, которое может общаться с ней только посредством сообщений.

Предположим, у нас есть следующий код в файле code/squareworker.js:

addEventListener("message", function(event) {

postMessage(event.data * event.data);

});

Представьте, что возведение в квадрат – очень тяжёлое, долго работающее вычисление, которое нам надо запустить фоновым потоком. Такой код порождает «рабочего», отправляет ему несколько сообщений, и выводит результаты.

var squareWorker = new Worker("code/squareworker.js");

squareWorker.addEventListener("message", function(event) {

console.log("The worker responded:", event.data);

});

squareWorker.postMessage(10);

squareWorker.postMessage(24);

Функция postMessageотправляет сообщение, которое запускает событие “message”у принимающей стороны. Скрипт, создавший рабочего, отправляет и получает сообщения через объект Worker, тогда как рабочий общается со скриптом, создавшим его, отправляя и получая сообщения через его собственное глобальное окружение – которое является отдельным окружением, не связанным с оригинальным скриптом.