IT-школа
Цикли + canvas фігури циклами
Веб-розробка сьогодні один із найцікавіших, захоплюючих та перспективних напрямків, тому багато дітей та підлітків з радістю відвідують курси, де їх навчають правильної розробки проектів. Аналізуючи сьогоднішній ринок фахівців, на розробників високий попит, а це означає, що заняття веб-розробкою не лише дуже цікаві, а й у майбутньому прибуткові.
Веб-розробка включає навчання верстці сайтів, реалізація їх за допомогою JavaScript і налаштування серверної частини – все це вже зараз може освоїти Ваша дитина, відвідуючи курси з вивчення JavaScript.
JavaScript – одна з найцікавіших динамічних мов програмування, яка безпосередньо пов’язана з реалізацією роботи веб-сайтів, і, як і інші області програмування, вона має свої особливості та тонкощі.
У цій статті ми розглянемо з Вами роботу з циклами JavaScript, а також як за допомогою цієї динамічної мови програмування і CANVAS Ви можете створювати фігури.
Курси з вивчення JavaScript: Цикли
Цикли, що використовуються в програмуванні JavaScript, допомагають виконувати повторювані обчислення. Завдяки циклам, можуть виконуватися ті самі процеси або навіть блоки із заданими інструкціями конкретну кількість разів, яку задає програміст або доти, доки умова буде істинною.
Розглянемо докладніше, які цикли існують у JavaScript:
- Цикл for
Цей цикл виконує ітерації, проходячи по елементах масивів або будь-яких об’єктів, схожих на масиви, наприклад, arguments і HTMLCollection.
Умови проходять перевірку перед кожною ітерацією циклу, якщо перевірка пройшла вдало, код, що знаходиться в циклі, виконуватиметься, якщо невдало – код виконуватись не буде, і програма продовжить працювати починаючи з першого рядка, що йде після циклу.
Приклад використання циклу for:
for (var i = 0; i < 7; i++) {
console.log(i + “: Hello, World!”);
}
При введенні даного коду, на екрані ви отримаєте фразу “Hello, World!”, написану 7 разів.
Розглянемо як працює цей цикл.
Цикл for містить 3 операції:
- Ініціалізація, яка записується як “var i = 0;”. Тут відбувається оголошення змінної, яка є лічильником, дана змінна проходитиме перевірку тоді, коли виконуватиметься цикл. Вона ініціалізується значенням 0. Зазвичай позначення лічильників циклу використовують такі змінні як i, j і k.
- Далі йде перевірка умови, що записується як “i < 7;”. Це умовне вираз, у разі, коли воно повертає true, тіло циклу виконує задану роботу. Якщо Ви подивитеся на наш приклад коду, Ви здогадаєтеся, що в тому випадку перевірка умов виконуватиметься доти, доки значення на лічильнику буде менше 7.
- Останній етап, який має вигляд i++. Цей етап називається збільшенням лічильника, де відбувається збільшення значення використовуваної змінної var i додавання до неї одиниці. Замість операції інкременту (збільшення значення змінної), може відбуватися операція декремента (зменшення значення змінної).
- Цикл for…in
Цей цикл використовується для обходу властивостей елементів, які є масивами. Такі обходи називаються перерахуваннями. У такому випадку Вам необхідно використовувати метод hasOwnProperty(), який фільтруватиме властивості, успадковані від прототипу.
Розглянемо для прикладу наступний код:
var user = {
name: ‘Alice’,
age: 25,
country: ‘Ukraine’
};
for (var prop in user) {
console.log(prop + “: ” + user[prop]);
}
Припустимо, що в подібному сценарії до або після створення об’єкта user прототип об’єкта Object був розширений за допомогою методу clone().
if (typeof Object.prototype.clone === ‘undefined’) {
Object.prototype.clone = function () {};
}
Через те, що успадкування прототипу постійно проходить перевірку інтерпретатором, всі об’єкти мають доступ до нового способу.
Щоб уникнути виявлення такого методу при перерахуванні властивостей об’єкта user, використовуйте метод hasOwnProperty(), для фільтру властивостей прототипу.
var user = {
name: ‘Ann’,
age: 23,
country: ‘USA’
};
if (typeof Object.prototype.clone === ‘undefined’) {
Object.prototype.clone = function () {};
}
for (var prop in user) {
if (user.hasOwnProperty(prop)) {
console.log(prop + “: ” + user[prop]);
}
}
Цикл while
Цей цикл попередньо виконує перевірку умов. Якщо умовні вирази обчислюються в true, код усередині циклу виконуватиметься, як і було задумано.
Після того, як ітерація була завершена, умови знову проходять перевірку, і процес повторюватиметься, поки перевірка умов не покаже false.
Розглянемо наступний приклад коду:
var i = 1;
var msg = ”;
while (i < 10) {
msg+= i + ‘ x 5 = ‘ + (i * 5) + ‘<br>’;
i++;
}
document.write(msg);
Такий код допоможе Вам вивести в консоль таблицю множення цифру 5.
Цикл do…while
Такий цикл здійснює перевірку умов продовження після закінчення циклу. На відміну від while, у цьому циклі дії виконуються мінімум один раз, тому що умови перевіряються в кінці, а не на початку.
do…while застосовується не так часто, як цикл while, через те, що такі ситуації, коли потрібно хоча б одноразове виконання циклу зустрічаються рідко.
Ви можете ознайомитись із прикладом коду, який ми для Вас написали, щоб побачити випадок одноразового виконання циклу, навіть тоді, коли умова може не виконуватись.
Приклад коду:
var result = ”;
var i = 0;
do {
i += 1;
result += i + ‘ ‘;
} while (i < 5);
document.write(result);
Нескінчений цикл
При необхідності Ви можете створити нескінченні цикли, щоб вони не завершувалися. Такий цикл може працювати, доки працює комп’ютер. Щоб цикл зупинився тоді, коли це буде потрібно, Ви можете заздалегідь подбати про те, щоб у якийсь момент під час перевірки умов було false.
Розглянемо приклад нескінченного циклу:
for (var i = 25; i > 15; i++) {
document.write(“Hello, World!”<br>”);
}
У такому випадку, на екран буде виводитися заданий напис нескінченно, оскільки змінний i ніколи не буде меншим за 15.
Вкладені цикли
Подібні цикли знаходяться всередині іншого циклу. Вкладені цикли можна створювати за допомогою циклів for та циклу while.
Приклад вкладеного циклу:
for (var count = 1; count < 3; count++) {
document.write(count + “. Строка цикла<br>”);
for (var nestcount = 1; nestcount< 3; nestcount++) {
document.write(“Строка вложенного цикла<br>”);
}
}
Створення геометричної фігури за допомогою JavaScript та Canvas
Ми розглянули створення циклів на динамічній мові програмування JavaScript, тепер якщо паралельно з ним використовувати тег canvas, Ви можете попрацювати над створенням будь-якої геометричної фігури.
Розглянемо наступний код:
for (var i = 1; i <= 10; i++) {
ctx.moveTo(50, 15*i);
ctx.lineTo(150, 15*i);
}
ctx.stroke();
Така конструкція допоможе вивести на екран 10 ліній. Використовуючи цикли, Ви можете створити будь-які необхідні Вам геометричні фігури, які Вам потрібні.
Таким чином, онлайн курси кодингу допоможуть Вашій дитині освоїти найцікавіші розділи програмування та наблизитись до мрії стати професіоналом.
Записати дитину на курси програмування – найкраще рішення, оскільки більшість дітей із задоволенням грають у комп’ютерні ігри, загалом є активними користувачі інтернет-простору, а деякі примудряються самостійно освоювати програмування.
Курси з вивчення JavaScript
У нашій статті ми докладно розібрали цикли у динамічній мові програмування JavaScript та як їх можна застосовувати для малювання геометричних фігур. Також ми радимо пройти тест із цієї теми, який можна знайти вгорі нашої сторінки. Результатом тестування є сертифікат, який Ви можете обміняти у адміністратора на коїни. а потім обміняти самі коїни на подарунки.