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

c . fillColor ' g reen ' ;
} ;

На первом этапе этот код создает наш объект инструмента. Сделав это, мы можем
закрепить за ним обработчик событий (event handler), в данном случае - обработ­
s
чик событий по имени onMou e Down. Всякий раз, когда пользователь щелкает мы­
шью, вызывается функция, которую мь1 закрепили за этим обработчиком. Это очень
важно понять. Наш предыдущий код выполнялся сразу же: мы обновили браузер,
и зеленые круги появились автоматически. Здесь этого не происходит, а если бы про­
изошло, то был бы нарисован один зеленый круг где-нибудь на экране. Вместо этого
код, содержавшийся между фигурными скобками после слова function, выполняет­
ся только тогда, когда пользователь щелкает мышью на холсте.
Обработчик событий делает две вещи: выполняет ваш код, когда происходит щел -
чок мышью, и указывает вам, где произошел щелчок. Место щелчка хранится в свой­
стве аргумента, event . point, у которого есть два свойства, х и у, указывающих ко­
ординаты щелчка.
Обратите внимание: мы могли бы сэкономить на вводе кода, непосредственно
передав точку в Circle (вместо передачи координат х и у по отдельности).

var с = Shape . C ircle ( e vent . p oint , 2 0 ) ;
Это подчеркивает очень важный аспект JavaScript: он в состоянии узнавать ин­
формацию о передаваемых переменных. В предыдущем случае, встретив три числа
подряд, он знает, что они представляют координаты х, у и радиус. Если он встречает
два аргумента, то знает, что первый - объект типа point, а второй - радиус. Боль­
ше об этом мы узнаем в главах 6 и 9.

Программа Hello, World

Давайте завершим эту главу примером Брайана Кернигана 1 9 72 года. Вся тяже­
лая работа уже сделана, осталось лишь добавить текст. Перед вашим обработчиком
onMouseDown добавьте следующее.
var с = Shape . C ircle ( 2 0 0 , 2 0 0 , 8 0 ) ;
c . fillColor = ' Ы асk ' ;
x
var text = new PointTe t ( 2 0 0 , 2 0 0 ) ;
s
text . j u t i fication = ' c enter ' ;
text . fillColor = ' w hite ' ;
text . fontSize = 2 0 ;
text . content = ' h ello world ' ;
Это дополнение довольно простое: мы создаем другой круг, который будет фо­
ном для нашего текста, а затем фактически создаем текстовый объект (PointText).
Мы определяем место вывода (центр экрана) и несколько дополнительных свойств

Программа Hello, World 37