Вкладені цикли та цикли по об'єкту

Зміст:

На цьому уроці ми розберемо ще більше застосувань циклів. Цикли – одна з найважливіших тем в програмуванні. Вони спочатку можуть не подобатись, але це один з найкращих інструментів для програмістів. Сьогодні ми дізнаємося, яка писати вкладені цикли та цикли по об’єкту, візьмемо простенькі приклади, щоб більше сконцентріватися на циклах, а не на дизайні сторінки

1: Створіть новий проєкт. Додамо заготовку для нашого заняття. Додайте такий код html:

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

  
<div id="target"></div>

І наступний js-код:

let result = ``;


//  тут код вашої програми


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

Також нам знадобляться стилі для створення гарної таблиці:

#center{
  text-align: center;
}

table {
  border-collapse: collapse;
  width: 100%;
}

tr {
  border-bottom: 1px solid #ddd;
}

tr:nth-child(even) {
  background-color: rgba(150, 212, 212, 0.4);
}

th:nth-child(even),
td:nth-child(even) {
  background-color: rgba(150, 212, 212, 0.4);
}
tr:hover {
  background-color: #ddd;
}

Вкладені цикли

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

Ось приклад вкладених циклів на Scratch. Подумайте, який з циклів є зовнішнім, а який внутрішнім.

2: Створіть програму з вкладеними циклами. Програма тут два лічильники : i та j. Який з них відповідає за рядки ? Який за стовпчики?

result += `<h3>Завдання</h3>`; 
for (let i = 0; i < 10; i++) {
  for (let j = 0; j < 10; j++) {
      result +=`${j} ${i}`+ "&ensp;&ensp;"  //&ensp; це таб, він регулює відстані
  }
   result +='<br>'
}

Піксель-арт

Ви, мабуть, зустрічали піксельні світлодіодні таблички чи піксельну графіку в дуже старих іграх.

А як для піксельних табличок і ігор роблять літери та цифри, щоб їх можна було масштабувати залежно від розмірів екрана ? Давайте спробуємо подумати над цим

3: Додайте умову в цикл з минулого завдання так, щоб виводилася літера Т. Подумайте, куди саме прописати ці рядки. Вони мають працювати в середині циклів!

    if (j==5 || i==0) {
      result +=`🟦`+ "&ensp;&ensp;" 
    } else {
      result +=`${j} ${i}`+ "&ensp;&ensp;" 
    }

Має вийти щось таке:

Пару прикладів умов:

Умова	Пояснення
(j==5 \|\| i==0)	Якщо номер стовпця j =5 або номер рядка i =0
(j==5 && i==0)	Якщо номер стовпця j =5 та номер рядка i =0 (виконується і те інше одночасно, буде одна клітинка!)
(j%3==0)	Якщо номер стовпця ділиться на 3
(i>5)	Якщо номер рядка >5

4: Намалюйте в циклі також літеру Ш

Як ви думаєте: хто зашифрований літерами Т і Ш ? Саме він дасть нам ключ до наступного завдання. 9 та 10 березня називають його днями. Не складно здогадатися про кого це?

Ліричний відступ

Трохи лірики не завадить на уроці з програмування. Егеж ?

Отже, сьогодні трохи літературний урок. Всім змалечку знайомі імена Шевченко чи Лесі Українки, Стуса чи Франка. Кожен рік ми знайомимося з новими творами та, чим старше стаємо, тим більше журби, боротьби та печалі у творах, які вивчаємо. Чи задумувались ви колись чому ? Чи актуальні твори і теми, про які там говорять?

А як щодо сучасності ? Ось кілька питань, на які було б дуже цікаво дізнатись вашу думку (напишіть в коментарях):

Чи дивитеся ви ютуб-канали або тікток українською ? Можете порекомендувати якийсь канал?
Чи читаєте ви якісь книжки українських авторів не для школи?
Чи варто робити контент українською? Чи це актуально?

Хочу порекомендувати пару каналів, які розповідають про укр. літ. по-новому. Перший – це одеський проєкт “Дистанційка”, в якому є короткі відео з української літератури та історії. Дуже цікаво і захоплююче про непрості теми

Другий – проєкт “МУР”. Це якийсь супер новий підхід до створення відео в instagram, tictok! Ніколи ще не бачила такого технічного підходу до створення відео в інсті (це натуральний шедевр!). Але найголовніша його цінність – це теми, які там підіймають. В прикладі відео про Стуса, і воно безперечно чудове. Але також раджу подивитися відео “Будинок слова”, воно може бути досить важке і більше розраховане на старших, але це те, що беззаперечно залишить слід в пам’яті й дасть привід задуматися. Одне з найкращих відео, яке я бачила за останній час. Трохи недитяча лексика і зовсім доросла тема.
Ражу після перегляду загуглити що зараз з цим будинком слова…

Сподіваюся, я змогла надихнути хоча б відкрити ці відео, бо після відкриття відірвати вже буде складно… Це не про програмування… Але я така фраза “Нехай квітне український ютуб! ” Це одні з найкращих квіточок в букеті! 🌹🏵️🌻🌼🪻🌷

Цикли по об’єкту

В наступному завданні створимо табличку з письменниками та поетами і їх сторінкам в instagram. В табличці будуть дані про підписників, кількість постів і посилання на сторінку. Так-так, в інсті є сторінки і Шевченка, і Сковороди… Хто їх створив – загадка… Але ми живемо в такий чудовий час, коли можна фоловити не тільки пса Патрона, а й Стуса, можна поставити лайк Шевченку або підписатись на Ліну Костенко. Також можна знайти сторінки сучасних поетів і письменників (троє останніх зі списку – наші сучасники)

5: Додайте цей список письменників :

result += `<h3>Завдання</h3>`;
let people = [
  {
    name: "Тарас", lname: "Шевченко", followers: 13500,posts: 179,
    link: "https://www.instagram.com/shev_che/"
  },
  {
    name: "Іван", lname: "Франко",
 followers: 83, posts: 6,
    link: "https://www.instagram.com/ivan._.franko/"
  },
  {
    name: "Леся", lname: "Українка", followers: 384, posts: 27,
    link: "https://www.instagram.com/_.lesia.ukrainka._/"
  },
  {
    name: "Григорій", lname: "Сковорода", followers: 5724, posts: 315,
    link: "https://www.instagram.com/skovoroda.today/"
  },
  {
    name: "Василь", lname: "Стус", followers: 1203, posts: 113,
    link: "https://www.instagram.com/vasyl_stus.official/"
  },
  {
    name: "Ліна", lname: "Костенко", followers: 500000, posts: 16868,
    link: "https://www.instagram.com/lina_kostenko.ua/"
  },
  {
    name: "Сергій", lname: "Жадан", followers: 181000, posts: 2517,
    link: "https://www.instagram.com/serhiy_zhadan/"
  },
  {
    name: "Макс", lname: "Кідрук", followers: 29500, posts: 1425,
    link: "https://www.instagram.com/max.kidruk/"
  }
];

Додайте цикл, який створює табличку:

const newTable = document.createElement("table");
newTable.innerHTML = "<thead><th>Ім'я</th><th>Прізвище</th></thead>";
for (p of people) {
  const newRow = document.createElement("tr");
  const tdName = document.createElement("td");
  const tdLname = document.createElement("td");
  tdName.textContent = p.name;
  newRow.appendChild(tdName);
  tdLname.textContent = p.lname;
  newRow.appendChild(tdLname);
  newTable.appendChild(newRow);
}

const target = document.getElementById("target");
target.appendChild(newTable);

6 (це ж буде і в дз): Додайте в табличку поля з кількістю підписників і кількістю постів.

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

Домашка після першого заняття : 1,2 і Level Up 1. (Решта завдань після другого уроку)

1: Скопіюйте собі код таблички додавання. Змініть код так, щоб виводилася табличка множення від 1 до 12 (Не забудьте також оновити назву таблиці)

result += `<h3>Завдання</h3>`;
var table = "";
// Зовнішній цикл для створення рядків
for (let i = 1; i <= 10; i++) {
  table += "<tr>";
  // Внутрішній цикл для створення комірок
  for (let j = 1; j <= 10; j++) {
    table += `<td>${i} + ${j} = ${i + j}</td>`;
  }
  table += "</tr>";
}
result += '<table border="1">';
result += "<caption>Таблиця додавання</caption>";
result += "<tbody>";

result += table;
result += "</tbody>";
result += "</table>";

2: Намалюйте за допомогою вкладених циклів прапор і одну літеру або цифру на ваш вибір (крім Т чи Ш). Дивіться табличку з прикладами умов