Цикл— це структура яка допомагає повторювати набір команд. Цикли існують в усіх мовах програмування, а не тільки у Javascript. А ще цикл, це надзвичайно корисна річ без якої не обходиться жодна велика програма.
Цикли у житті
Цикл допомагає повторити деякі дії задану кількість разів. Для цього на початку цикл визначається змінна-лічильник або умова за допомогою якої, буде визначатись кількість запусків циклу.
В житті повторювані подіє також можуть створювати цикл. Наприклад чистка зубів або рухи в танці. Послідовність зима-весна-літо-осінь ми знаємо, як річний цикл. Також є цикл в тижні.
Цикли у Javascript
На цьому занятті ми розглянемо цикл 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}`;
}Змініть цикл так, щоб :
- Кожне число починалося з нового рядка (тег <br> або тег абзацу)
- Цикл був від 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
