Программирование. Азы. Урок 2⁠⁠

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

В двухмерном пространстве у объектов есть две координаты “х” и “у”. Функция должна принимать два числа (говорят: функция должна принимать два параметра): первое число пусть будет “х”, в второе число тогда будет “у”. Чтобы написать функцию в начале необходимо использовать ключевое слово “function”, а после этого придумать имя для функции, после этого в круглых скобках указать все параметры, которые нужно передать в функцию.

На рисунке новая функция имеет имя “newPosition”. Какое имя использовать для функции, каждый программист решает сам, можно использовать практически любой набор букв и цифр. При этом имя функции не должно совпадать с ключевыми словами. Хорошим тоном считается, когда имя функции не просто набор букв, а имеет логический смысл, как в примере. Сейчас распространено в основном два стиля именования функций: слова через знак подчеркивания ( пример название функции в 4 строке) и новое слово с большой букв ( пример название функции в 16 строке). После того, как имя для функции написано, открываем круглую скобку и через запятую пишем все параметры, затем закрывается круглая скобка.

Блок кода - это весь код, который помещается между фигурными скобками: {}. При программировании, если стоить какая-либо задача перед программист и он пишет для этого функцию, то выполнение этой задачи как раз и помещается в такой блок кода. Задача: изменить позицию картинки на экране. Заголовок функции описан, следующий шаг написать код, который это сделает.

Созданная функция принимает два параметра: newX и newY. Внутри блока кода, с этими параметрами нужно работать как с обычными переменными, только нужно учесть, что вне данного блока кода, эти переменные не видны и если к ним обратиться, то будет ошибка. Выше было описано, как изменить одну из координат картинки в консоли. По аналогии меняем позицию по “х” и “у” используя новые переменные: test.x = newX; Для картинки, за которую отвечает глобальная переменная test изменяется координата “х” используя символ присвоения “=”, а новое значение будет браться с переменной “newX”. После каждого действия необходимо ставить “;”.

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

У хрома есть такая вещь, как выпадающая подсказка. Когда начинается ввод первых букв слова, то появляется список всех доступных переменных и функций которые доступны и начинаются с таких же символов.

То что написано в консоли - называется вызов функции. При вызове функции выполняется блок кода, который был создан для данной функции. Для примера, если вызвать функцию следующим образом: newPosition(45, 200) то проследим как отработает код. Когда пользователь нажал “enter”, браузер начинает выполнять код функции переходя на 17 строчку (потому что это первая строчка в блоке кода функции). Перед выполнением этой строки в переменные newX и newY помещаются значения, которые мы указали в виде цифр. Так, newX станет равен 45, а newY будет равен 200. Получается браузер при вызове функции будет выполнять код примерно так:

в параметры функции подставит те значения которые быле переданы (45 и 200);

для картинки изменит положение “х” на newX (которое будет равно 45);

для картинки изменит положение “у” на newY (которое будет равно 200);

закончит выполнение функции.

Поэкспериментировав с функцией “newPosition” и изменяя положение картинки на экране, попробуйте написать две функции: первая меняла бы положение только по “х”, а вторая функция меняла бы положение только по “у”.

P.S. Используйте тэг jlesson в игнор листе что бы больше не видеть моих постов по поводу программирования

P.S.2. В данных постах я специально поминимуму использую терминологию, т.к. если сразу начать писать используя правильные термины везде - то для читающего новичка будет трудно понять суть. По мере изложения материала, я ввожу и объясняю термины которые в дальнейшем будут использоваться (например: блок кода, вызов функции, параметры - из данного поста)