Что такое функции
Очень часто нам приходится повторять одни и те же команды в разных частях программы.Эти кусочки повторяющегося кода мы можем записать в виде функции, дав ей имя. В нужном месте кода эту функцию можно вызвать и она сработает.
Вы уже использовали базовые js-функции: alert(message), prompt(message, default) и console.log(data). Но вы можете создавать и свои функции, со своими названиями.
Давайте рассмотрим пример алгоритма для вывода текста с количеством набранных очков на экран:
задатьВопрос1();
если (ответ правильный), увеличить очки на 1
иначе уменьшить очки на 1
задать размер шрифта = 20
очистить старый текст с количеством очков
вывести новый текст с количеством очков
задатьВопрос2();
если (ответ правильный), увеличить очки на 1
иначе уменьшить очки на 1
задать размер шрифта = 20
очистить старый текст с количеством очков
вывести новый текст с количеством очков
Здесь есть кое-что, что касается вывода очков победы на экран. Заменим эти команды функцией:
функция вывестиНаЭкранКоличествоОчков() {
задать размер шрифта = 20
очистить старый текст с количеством очков
вывести новый текст с количеством очков
}
задатьВопрос1();
если (ответ правильный), увеличить очки на 1
иначе уменьшить очки на 1
вывестиНаЭкранКоличествоОчков()
задатьВопрос2();
если (ответ правильный), увеличить очки на 1
иначе уменьшить очки на 1
вывестиНаЭкранКоличествоОчков()
В чём польза такого подхода?
1) Нет дублирования одинакового кода
2) Если нужно внести изменения в код, это можно сделать в одном месте (представьте, что вопросов около 30 и надо было бы изменить во всех размер шрифта равным не 20, а 18)
3) Названия функций дают понятие, что эта функция делает, код становится понятнее.
Try it out
Давайте напишем программу, которая будет отрисовывать два ряда шаров двух цветов:1. В вашей папке с сайтами вы создавали папку "Javascript - 7". Скопируйте её, переименуйте на "Javascript - 8". Откройте папку в редакторе.
2. Для начала в файле со скриптами пропишем базовую структуру работы с canvas:
let canvas = document.getElementById("canvas");
let context = canvas.getContext("2d");
let width = 800;
let height = 600;
canvas.width = width;
canvas.height = height;
3. Добавим код для создания первого ряда с шарами оранжевого цвета. Первый ряд будет начинаться слева, сверху его центр будет находиться на расстоянии 40 пикселей:
let radius = 20;
let centerY = 40;
context.fillStyle = "#EE6352";
for(let i = 0;i<20;i++) {
centerX = i*40;
context.beginPath()
context.arc(centerX, centerY, radius, 0, 2*Math.PI);
context.closePath()
context.fill()
}
4. Теперь изменим цвет и отступ сверху и отрисуем ещё один ряд с шарами:
context.fill()
}
centerY = 380;
context.fillStyle = "#08B2E3";
for(let i = 0;i<20;i++) {
centerX = i*40;
context.beginPath()
context.arc(centerX, centerY, radius, 0, 2*Math.PI);
context.closePath()
context.fill()
}
5. Как видно, здесь повторяется код с циклом. Выведем его в функцию под названием drawEllipseRow (перевод – "нарисуй ряд из эллипсов"). Весь код:
let canvas = document.getElementById("canvas");
let context = canvas.getContext("2d");
let width = 800;
let height = 600;
canvas.width = width;
canvas.height = height;
// грубо говоря, мы говорим программе: "Эй! Ты умеешь рисовать ряд из эллипсов!"
function drawEllipseRow() {
// И это делается так:
for(let i = 0;i<20;i++) {
centerX = i*40;
context.beginPath()
context.arc(centerX, centerY, radius, 0, 2*Math.PI);
context.closePath()
context.fill()
}
// научили программу, в общем, как это делать
}
let radius = 20;
let centerY = 40;
context.fillStyle = "#EE6352";
// говорим программе: "Эй! Нарисуй ряд из эллипсов!"
drawEllipseRow();
centerY = 380;
context.fillStyle = "#08B2E3";
// снова говорим программе: "Эй! Нарисуй ряд из эллипсов!"
drawEllipseRow();
Функции с параметрами
Функция drawEllipseRow у нас вызывается без параметров. Сейчас на примере посмотрим, зачем нужны параметры и как они используются. Давайте рассмотрим пример, когда нам нужно создать не просто ряд из эллипсов, но и с указанием радиуса эллипсов и их количества:1. Для начала, изменим функцию drawEllipseRow:
// грубо говоря, мы говорим программе: "Эй! Ты умеешь рисовать ряд из заданного количества эллипсов заданного радиуса!"
function drawEllipseRow(radius,number) { // radius и number – это параметры функции
// И это делается так:
for(let i = 0;i<number;i++) {
centerX = i*40;
context.beginPath()
context.arc(centerX, centerY, radius, 0, 2*Math.PI);
context.closePath()
context.fill()
}
// научили программу, в общем, как это делать
}
2. Теперь изменим код с вызовом этой функции:
let centerY = 40;
context.fillStyle = "#EE6352";
// говорим программе: "Эй! Нарисуй ряд из 10 эллипсов радиусом в 30 пикселей!"
drawEllipseRow(30,10);
centerY = 380;
context.fillStyle = "#08B2E3";
// снова говорим программе: "Эй! Нарисуй ряд из 100 эллипсов радиусом в 10 пикселей!"
drawEllipseRow(10,100);
Функции с возвратом результата
Пример функции, которая считает сумму чисел и возвращает результат:
function calcSum(a,b) {
return a+b;
}
let number1 = +prompt("Введите первое число");
let number2 = +prompt("Введите второе число");
let rezult = calcSum(number1, number2);
alert("Сумма чисел = " + rezult);
В конспект
Синтаксисfunction название(параметры, через, запятую) {
/* тело, код функции */
}
Функции, начинающиеся с…
"draw…" – что-то рисуют,
"calc…" – что-то вычисляют,
"create…" – что-то создают,
"check…" – что-то проверяют и возвращают логическое значение, и т.д.
Функции с возвратом результата
function calcSum(a,b) {
return a+b;
}
let rezult = calcSum(5, 9); // будет равно 14
Задачи
Задача 8.1*. Измените код из Try it out так, чтобы параметрами функции ещё и передавался цвет эллипсов, и центр по Y.Задача 8.2**. Напишите функцию по отрисовке чёрного квадрата drawSquare, передавая в параметры его координаты, которые вы генерируете случайно (х и у). Вызовите эту функцию 400 раз.
Задача 8.3***. Напишите функцию по отрисовке смайлика drawSmile с параметрами (диаметр, координаты). Вызовите её 200 раз, случайно генерируя эти параметры перед вызовом. Для того, чтобы сгенерировать случайный диаметр в диапазоне от и до, используйте такую формулу:
diameter = 30 + Math.random()*20;
Цвета: жёлтый #FFC700, тёмный #2d2d2d
Задача 8.5*. Напишите функцию с возвратом результата getMax(a,b), которая возвращает максимальное из чисел-параметров.
Комментарии
Отправить комментарий