Page 38 - Браун Э. - Изучаем JavaScript. Руководство по созданию современных веб-сайтов - 2017

задать начальное условие (25), условие завершения (меньше, чем 400) и значение ин­
кремента (50). Мы используем один цикл внутри другого для выполнения задачи
по осям х и у.

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

Обработка пользовательского ввода

Все, что мы делали до сих пор, не требовало ввода от пользователя. Пользователь
может щелкать на кругах, но это ничего не даст. Аналогично попытка перетащить
круг не даст никакого эффекта. Давайте немного улучшим интерактивность, разре­
шив пользователю выбирать, где будут нарисованы круги.
Важно привыкнуть к асинхронному характеру пользовательского ввода. Асинхрон­
ное событие (asynchronous event) - это событие, момент наступления которого вы не
можете никак контролировать. Щелчок мышью пользователя - это пример асинхрон­
ного события: вы не можете знать, когда пользователь соберется щелкнуть. Конечно,
вы можете попросить его щелкнуть, но когда пользователь щелкнет (и щелкнет ли во­
обще) - это его и только его дело. Асинхронные события, являющиеся результатом
пользовательского ввода, имеют интуитивно понятный смысл, но мы рассмотрим на­
много менее интуитивно понятные асинхронные события в последующих главах.
Для обработки пользовательского ввода библиотека Pape . j s использует объект
r
под названием "tool" (инструмент). Если такой выбор имени не кажется вам интуи­
тивно понятным, то вы находитесь в хорошей компании: я тоже не знаю, почему
разработчики Pap r . j s использовали эту терминологию.6 Возможно, вам лучше рас­
e
сматривать "tool" (инструмент) как "user input tool" (инструмент пользовательского
ввода). Давайте заменим наш код, рисовавший таблицу кругов, следующим кодом:
var t o ol = new Tool ( ) ;

tool . onMouseDown = function ( e vent )
var с = Shape . C ircle ( e vent . point . x , event . p oint . y , 2 0 ) ;
6 Технический рецензент Мэтт Инман предположил, что разработчики Pap r . j s, возможно, были
e
пользователями Photoshop, знакомыми с инструментами "hand tool'', "direct selection tool" и т.д.

36 Глава 1. Ваше первое приложение