курси програмування для дітей безкоштовно

Цикли

Цикл — це структура яка допомагає повторювати набір команд. А ще цикл, це надзвичайно корисна річ без якої не обходиться жодна велика програма.

Цикл допомагає повторити деякі дії задану кількість разів. Для цього на початку цикл визначається змінна-лічильник або умова за допомогою якої, буде визначатись кількість запусків циклу.

В житті повторювані подіє також можуть створювати цикл. Наприклад чистка зубів або рухи в танці. Послідовність зима-весна-літо-осінь ми знаємо, як річний цикл. Також є цикл в тижні.

На цьому занятті ми розглянемо цикл for. Його можна створити в кілька способів, ось найпростіший з них:

Після слова for є три параметри, які коротко можна назвати : старт, стоп, крок. Старт – умова початку циклу (Задаємо значення i=0). Стоп – також умова, доки вона істина, цикл працює, як тільки умова не виконується, цикл переходить до команд, які знаходяться за дужками циклу. Крок – зміна значення лічильника перед тим, як запустити цикл ще раз.

Ось кілька прикладів, як ще може виглядати цикл for:

Найпростіші цикли

Примітка: цикл обов’язково використовувати в усіх завданнях!

1: Додайте у html-файл блок, в якому ми будемо показувати роботу циклів

<div id="first"></div>

Додайте у js-файл змінну result – це загальна змінна, яку будемо виводити. В кінці додамо код, що виводить result у блок div з id first. Всі цикли програми далі будемо розміщати в середині, де зараз коментар.

let result = ``;

// Тут код програми

document.getElementById("first").innerHTML = result;

2: Додайте перший цикл, який буде рахувати від 0 до 5. За прикладом.

result += `<h3>Завдання</h3>`;
for (let i = 0; i <= 5; i++) {
  result += `${i}`;
}

Змініть цикл так, щоб :

  1. Кожне число починалося з нового рядка (тег <br> або тег абзацу)
  2. Цикл був від 100 до 10 і виводив числа, які діляться на 5 (i-=5)

3: (ДЗ) Додайте цикл, який рахує від 2000 до 0 сотнями у зворотному порядку. Тобто:

2000, 1900, 1800, ….0

4: Тепер зробимо трикутник зі смайликів. Оберіть смайлик, який подобається і напишіть такий код:

result += `<h3>Завдання</h3>`;
for (let i = 0; i <= 10; i++) {
  result += "☘️".repeat(i) + `<br>`;
}

Функція repeat повторює смайлик і разів. Ось так має вийти:

☘️
☘️☘️
☘️☘️☘️
☘️☘️☘️☘️
☘️☘️☘️☘️☘️
☘️☘️☘️☘️☘️☘️
☘️☘️☘️☘️☘️☘️☘️
☘️☘️☘️☘️☘️☘️☘️☘️
☘️☘️☘️☘️☘️☘️☘️☘️☘️
☘️☘️☘️☘️☘️☘️☘️☘️☘️☘️

Змініть код так, щоб вийшло ось це (в останньому рядку 20 смайлів):

☘️☘️
☘️☘️☘️☘️
☘️☘️☘️☘️☘️☘️
☘️☘️☘️☘️☘️☘️☘️☘️
☘️☘️☘️☘️☘️☘️☘️☘️☘️☘️
☘️☘️☘️☘️☘️☘️☘️☘️☘️☘️☘️☘️
☘️☘️☘️☘️☘️☘️☘️☘️☘️☘️☘️☘️☘️☘️
☘️☘️☘️☘️☘️☘️☘️☘️☘️☘️☘️☘️☘️☘️☘️☘️
☘️☘️☘️☘️☘️☘️☘️☘️☘️☘️☘️☘️☘️☘️☘️☘️☘️☘️
☘️☘️☘️☘️☘️☘️☘️☘️☘️☘️☘️☘️☘️☘️☘️☘️☘️☘️☘️☘️

5: (ДЗ) Зробіть трикутник від 10 до 1 смайлика в іншу сторону:

🌻🌻🌻🌻🌻🌻🌻🌻🌻🌻
🌻🌻🌻🌻🌻🌻🌻🌻🌻
🌻🌻🌻🌻🌻🌻🌻🌻
🌻🌻🌻🌻🌻🌻🌻
🌻🌻🌻🌻🌻🌻
🌻🌻🌻🌻🌻
🌻🌻🌻🌻
🌻🌻🌻
🌻🌻
🌻

6: (ДЗ) Додайте стиль, щоб для id=”center” текст виводився по центру. Далі зробіть ялинку, як на картинці. Смайлики можуть бути інші. Кількість також. Підказка : для кожного виводу смайла варто додати тег р з id=”center”.

7: (LU) Зробіть таку картинку:

8: (LU) Створіть такі три малюнки за допомогою циклу в циклі (цикл по змінній i, в середині такий же цикл по змінній j).

Підказки :

result+=`(` + i + `,`+j +`)`+`\t\t` 

result+= j%5==0 ? "🌼":"🌸"

9 (LU) : Створіть шахове поле за допомогою ось цих смайлів : ⬛️⬜️

Скучили за математикою ?

10: Давайте виведемо квадрати чисел від 0 до 20

result += `<h3>Завдання</h3>`;
n = 20;
for (let i = 0; i < n; i++) {
  result += "Квадрат числа " + i + " це " + i * i + "<br>";
}

11 (ДЗ): Виведіть на екран таблицю ділення на 7:

Цикл по елементах списку

12: Створіть програму, яка виводить список авто які є в автомагазині:

result += `<h3>Завдання</h3>`;
const cars = ["BMW", "Volvo", "Saab", "Ford", "Fiat", "Audi"];
 result +="<p>В нашому магазині є такі авто:</p>";
for (c of cars) {
  result += c + "<br>";
}

13 (ДЗ): Створіть програму, яка виводить список солодощів, які є в магазині.

домашка з програмування

Домашня робота

Шукайте завдання в тексті уроку з позначкою ДЗ

домашка з програмування

Level Up

Шукайте завдання в тексті уроку з позначкою LU

Залишити коментар

Ваша e-mail адреса не оприлюднюватиметься. Обов’язкові поля позначені *