43. Създаване и използване на функция с параметри. Използване на случайни числа. СпиРабота по проект: Светофар
Теоретични материали
Какво е функция в JavaScript?
Функцията е съобщение до компютъра: „Направи тези стъпки, когато ти кажа!“
Точно както в Python, с функция можем да съберем няколко команди и да ги използваме отново.
🛠 Как се пише функция в JavaScript?
function sayHello() {
console.log("Здравей!");
}
🔍 Обяснение:
function – казваме, че ще създаваме функция.
sayHello – името на функцията (можеш да го избереш).
{ ... } – между тези скоби пишем какво да прави.
📞 Ако искаме да я изпълним, просто я „викаме“:
sayHello(); // Ще покаже "Здравей!" в конзолата
📦 Функция с вход (аргументи):
function greet(name) {
console.log("Здравей, " + name + "!");
}
greet("Мими"); // Показва: Здравей, Мими!
🔍 Тук name е като кутия, в която слагаме име. Когато викаме функцията, тя използва това, което ѝ подадем.
📤 Функция с резултат (return):
function add(a, b) {
return a + b;
}
let result = add(2, 3); // result = 5
🔍 return връща отговора (резултата) обратно.
Разлики при функциите при Python и JavaScript
Работа по проект: Светофар
Създайте програма на JavaScript, с помощта на Turtle графика, която създава анимация на светофар с редуващи се светлини, като първо изчертава фигурите на правоъгълното тяло и трите кръгли светлини, след което ги запълва с цвят през определен интервал, за да се създаде ефект на премигване.
Примерен вид на крайния резултат:
Стъпки за изпълнението на задачата:
1. Рисуваме правоъгълник - това ще бъде тялото на светофара. Той трябва да бъде на позиция (200, 100) и да има (100, 300) ширина и височина:
rect(200, 100, 100, 300);
2. Започваме с червения цвят, който трябва да е в най-отгоре:
red();
3. Създаваме функция, която рисува 3 бели кръгчета - това са лампите на светофара, когато не светят:
function white() {
fill("White"); // Задаваме бял цвят
circle(250, 150, 40); // Горна лампа
circle(250, 250, 40); // Средна лампа
circle(250, 350, 40); // Долна лампа
}
4. Създаваме функцията red за червената светлина, която прави следното:
- Вика функцията white(), за да изчистим предишния цвят
- Задава червен цвят и го рисува на горната лампа
- След 1 секунда (1000 милисекунди) преминава към жълта светлина
function red() {
white();
fill(Тук трябва да зададете червен цвят - на английски "Red");
circle(тук трябва да зададете координатите на горния кръг);
setTimeout(yellow, 1000); // С този ред се задава изчакване за - жълта светлина
}
5. Създаваме функцията yellow за жълтата светлина, която прави следното:
- Изчиства лампите (white())
- Светва жълтата лампа (в средата)
- След 1 секунда минава на зелено
function yellow() {
white();
fill(Тук задаваме жълт цвят на запълване - "Yellow");
circle(тук задаваме координатите на средния кръг);
setTimeout(green, 1000); // След 1 секунда - зелена
}
6. Създаваме функцията green, която:
- Изчиства лампите (white())
- Светва зелената лампа (долната)
- След 1 секунда се връща обратно към червена
function green() {
white();
fill(тук задаваме зелен цвят на запълване - "Green");
circle(тук задаваме координатите на долния кръг);
setTimeout(red, 1000); // След 1 секунда - отново червена
}
Работа по проект: Къщи
Задача 1: Попълнете липсващите параметри в програмата, за да се получат 20 къщи с различен цвят, разположени на случайни места.
Задача 2: Променете програмата от задача 1, така че да се получат 100 къщи с различен цвят и различен размер, разположени на случайни места.
Примерен вид на крайния резултат:
