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

поместили комментарий TODO, будет расположен фактически интересный материал.
                            e
       В последней строке Pap r .   j s получает инструкцию нарисовать нечто на экране.
          Т е перь, когда с шаблоном покончено, давайте что-нибудь нарисуем! Начнем с зе­
       леного круга в середине холста. Замените комментарий "TODO" следующими стро­
       ками.
       var  с  =    Shape . C ircle ( 2 0 0 ,   2 0 0 ,   5 0 ) ;
       c . fillColor  =  ' g ree ' ;
                         n
          Обновите свой браузер и полюбуйтесь зеленым кругом. Вы написали свой первый
       реальный код JavaScript. Фактически в этих двух строках происходит довольно мно­
       го, но пока важно знать лишь несколько вещей. В первой строке создается объект
       (object) круга с использованием трех аргументов (argument): координат х и у центра
       круга, а также его радиуса. Помните, мы создали свой холст размером 400 пикселей
       шириной и 400 пиксел ей высотой, поэтому центр холста находится в точке с коорди -
       натами (200, 200). И радиус 50 делает круг размером в одну восьмую ширины и вы­
       соты холста. Во второй строке устанавливается цвет заполнения, отличный от цвета
       контура (штрих (stroke), на языке Paper . j s). Не бойтесь экспериментировать с из­
       менением этих аргументов.


       Автоматизация повторяю             щихся задач

          Предположим, необходимо не просто добавить один круг, а заполнить холст ими,
       расположив в табличном порядке. Если сделать круги немного меньше, то на холсте
       можно  разместить 64  круга.  Конечно,  вы  могли  бы  скопировать только  что напи­
       санный код 63 раза и вручную модифицировать все координаты так, чтобы круги
       располагались в виде таблицы. Похоже на большое количество  работы,  не так ли?
       К счастью, компьютер отлично подходит для повторяющихся задач такого вида. Да­
       вайте рассмотрим, как мы можем нарисовать 64 равномерно расположенных круга.
       Заменим свой код, рисующий одиночный круг, следующим.
       var  с ;
                 2
                       4
                              5
       for ( v ar  х= 5 ;   х< 0 0 ;   х+= 0 )    {
                                  5
           for (var  у=25 ;   у<4 0 0 ;   у+= 0 )
               с  =    Shape . C ircle ( x ,   у,  2 0 ) ;
           c . fillColor  =  ' g reen ' ;

          Если вы обновите свой браузер, то увидите 64 зеленых круга! Если вы новичок
       в программировании, то только что написанное может показаться непонятным, од­
       нако вполне очевидно, что это лучше написания 1 2 8 строк вручную.
          Т о , что мы использовали, называется циклом for. Он является частью синтаксиса
       управления потоком, о котором вы узнаете подробно из главы 4. Цикл for позволяет


                                                Автоматизация повторя ю щихся задач   35
   32   33   34   35   36   37   38   39   40   41   42