Элементы управления. Клавиатура.

Элементы управления. Клавиатура.

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

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

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

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

var draw = function() {

background(0, 0, 0);

if (keyIsPressed && keyCode === UP) {

      fill(255, 0, 0);}

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

ellipse(100,100,100,100);

};

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

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

(keyIsPressed && keyCode === UP)

     

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

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

     keyCode === UP - представляет собой запись логической системной переменной конкретной кнопки клавиатуры, которую можно идентифицировать как клавиша "стрелка вверх" и имеет значение true, если нажата именно эта кнопка клавиатуры и false, если эта кнопка не нажата. При этом UP можно заменить на числовой код для данной клавиши - 38.

     Числовые коды клавишам клавиатуры можно просмотреть используя онлайн ресурс  - http://keycode.info/

 

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

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

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