Элементы управления. Манипулятор. Нажатие кнопки.

Элементы управления. Манипулятор. Нажатие кнопки.

Подготовительный этап:

  1. Зайти на цифровой образовательный ресурс по изучению языка программирования Javascript: https://www.khanacademy.org/computer-programming/new/pjs;
  2. В разделе эмулятора языка программирования Javascript перейти на вкладку: Dokumentation;
  3. В блоке Mouse обратить внимание на MouseButton  и активировать его;
  4. Открыть текст с кодом (программой) из домашнего задания прошлого урока. Выделить, скопировать весь текст кода и вставить в пространство "Редактор кода" новой программы.

*****      *****      *****

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

draw = function() {

    background(0, 0, 0);

    if (mouseIsPressed && mouseButton === LEFT)

       {fill(219, 219, 40);}

       else

         if (mouseIsPressed && mouseButton === RIGHT)

          {fill(255, 0, 255);}

          else {fill(255, 255, 255);}

   rect(100,100,100,100);
};

     В коде (программе)  можно выделить основные элементы, которые нам уже известны:

  • Функция многократного повторения - draw = function() {набор команд, операторов, переменных и т. д.};
  • Свойство закрашивания фона - background (пропорция красного, пропорция зелёного, пропорция синего);
  • Свойство заливки объекта - fill(пропорция красного, пропорция зелёного, пропорция синего);
  • Функция создания прямоугольника - rect(координата положения по "Х", координата положения по "Y", размер по горизонтали "ширина",размер по вертикали "высота").

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

if (условие/последовательность условий, связанных логическими операторами) {набор команд, операторов, переменных и т. д.} //выполняется в случае, ели условие является истинным

   else {набор команд, операторов, переменных и т. д.} //выполняется в случае, ели условие является ложным

 

    В данном коде (программе) проводиться проверка нажатия двух кнопок манипулятора. Структуру (часть алгоритма данного кода) можно представить следующим образом:

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

     Теперь обратим внимание на то, как прописаны эти два условия:

  • mouseIsPressed && mouseButton === LEFT;
  • mouseIsPressed && mouseButton === RIGHT.

     mouseIsPressed представляет собой запись логической системной переменной, которая имеет значение true, если мышь нажата и false, если нет.

     && представляет собой логический оператор "И", объединяющий две логические системные переменные.  // Для операций над логическими значениями в JavaScript есть || (ИЛИ - логическое сложение), && (И - логическое умножение) и ! (НЕ - инверсия).

     mouseButton === LEFT представляет собой запись логической системной переменной кнопки манипулятора, идентифицированной как левая (LEFT) и имеет значение true, если нажата левая кнопка манипулятора и false, левая кнопка не нажата. Возможные варианты идентификации кнопок манипулятора: LEFT, RIGHT, CENTER.

  

 Практическое задание.

  1. Открыть загруженную в начале урока страницу с кодом вашего домашнего задания;
  2. Внести следующие изменение в код (программу):
  • задать переменную для "динамического" изменения координаты Х;
  • добавить элементы ветвления для проверки нажатия кнопок манипулятора;
  • создать "динамическое" изменение координаты положения объекта по горизонтали в левую и правую сторону (согласно  нажатию кнопок манипулятора);
  • сменить параметры координат подвижного объекта с mouseX на переменную Х
  • проверить синтаксис и запустить код (программу).

     Если у вас при нажатии левой кнопки манипулятора объект начинает движение в левую сторону, а при нажатии правой клавиши мыши двигается в правую сторону, то вы всё сделали правильно. Молодцы! Иначе, внимательно просмотрите добавленные элементы кода, обращая внимание на принцип увеличения (уменьшения) координатной переменной по горизонтали.