12. Творімо магію! ✨

Спробуймо трохи оживити наш сайт і додати трохи кольору.

Створімо нашу першу функцію в проєкті!

Ми визначимо наступну функцію у JS-файлі:

function getRandomColor() {
    console.log('Додамо кольору!')
}

getRandomColor();

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

З’явився напис, який ми ввели. Час шукати кольори!

На більшості сайтів кольори зберігаються у шістнадцятковій системі. Наприклад: #FFFFFF — білий, #000000 — чорний, а #FFA500 — помаранчевий. Як бачите, у цьому записі кожен колір починається з символу ‘#’, за яким слідують 6 символів (літери (ABCDEF) та/або цифри (0123456789)). Щоб створити випадковий колір, нам потрібно випадковим чином поєднати ці символи разом.

Почнемо зі створення змінної, яка містить усі можливі символи:

var letters = '0123456789ABCDEF';

Другою змінною буде колір. Її єдиною константою є символ ‘#’, тому поки що це буде єдиний символ, який потрапить до нашої змінної.

var color = '#';

Згодом ми додамо до неї випадкові літери з-поміж тих, що містяться в letters.

Тепер функція getRandomColor() повинна мати такий вигляд:

function getRandomColor() {
    var letters = '0123456789ABCDEF';
    var color = '#';
}

Тепер ми хочемо витягнути випадкові літери з нашої змінної letters і створити з них рядок з 6 символів. Отже, найпростіший спосіб зробити це — витягнути випадкові символи з букв 6 разів. Для цього ми використаємо цикл.

function getRandomColor() {
    var letters = '0123456789ABCDEF';
    var color = '#';

    for (var i = 0; i < 6; i++) {

    }
}

Спробуємо його прочитати:

Для кожного i, що починається з нуля і є меншим за 6, виконати команду, що міститься у дужках, а потім перейти до i, що на 1 більше.

Як можна здогадатись, число 6 означає, що нам потрібно взяти літери нашого рядка 6 разів, по одній літері за раз. Отже, почнемо.

Щоб витягнути елемент списку, нам потрібно вказати його номер. Важливо, що ми починаємо відлік елементів списку з нуля. Дивимося на нашу змінну:

var letters = '0123456789ABCDEF';

Щоб витягти перший елемент (тобто число 0), нам потрібно записати letters[0].

Для того, щоб отримати літеру B, ми будемо використовувати позначення letters[10]. Гаразд, але що з нашим кольором?

JavaScript має вбудований об’єкт, що містить властивості та методи, пов’язані з математичними функціями та константами. Цей об’єкт називається Math. Наприклад, Math.PI поверне нам значення числа Pi. Ви можете дізнатися більше про об’єкт Math тут. Одним з методів Math є метод random(), який повертає випадкове значення від 0 до 1. Спробуймо! Введи Math.random() декілька разів у консолі браузера.

Однак ми хочемо отримати ціле число від 0 до 16, тому помножимо наше випадкове значення на 16:

Math.random()*16;

Ми вже ближче. Однак тепер нам потрібні цілі числа, а не дроби. Тут нам на допомогу приходить ще один метод об’єкта Math — floor(), який округлює числа до цілих. Спробуємо ввести у консолі:

Math.floor(14.567);
Math.floor(-1.38);

Однак наша мета — округлити результат малювання чисел від 0 до 16, тобто:

Math.floor(Math.random() * 16);

Ми будемо робити ще одне жеребкування 6 разів. Тобто, ми повинні заховати цей процес всередині нашого циклу. Присвоїмо його змінній:

 function getRandomColor() {
    var letters = '0123456789ABCDEF';
    var color = '#';

    for (var i = 0; i < 6; i++) {
       var randomNumber = Math.floor(Math.random() * 16);
    }
}

Наступним кроком буде “витягнути” літеру намальованої позиції з нашого рядка літер. Якщо ми хочемо витягнути літеру A, ми повинні ввести

letters[9]

Однак ми хочемо витягувати літеру, яка знаходиться під змінною randomNumber, на кожному проході циклу. Тому замість 10 ми введемо randomNumber. Для наочності ми присвоїмо це значення змінній:

function getRandomColor() {
    var letters = '0123456789ABCDEF';
    var color = '#';

    for (var i = 0; i < 6; i++) {
        var randomNumber = Math.floor(Math.random() * 16);
        var randomLetter = letters[randomNumber];
    }
}

Подивимося, що відбувається, коли ми виводимо отриману літеру:

function getRandomColor() {    
    var letters = '0123456789ABCDEF';
    var color = '#';

    for (var i = 0; i < 6; i++) {
        var randomNumber = Math.floor(Math.random() * 16);
        var randomLetter = letters[randomNumber];
        console.log(randomLetter);
    }
}

Викличемо нашу функцію:

function getRandomColor() { 
    var letters = '0123456789ABCDEF';
    var color = '#';

    for (var i = 0; i < 6; i++) {
        var randomNumber = Math.floor(Math.random() * 16);
        var randomLetter = letters[randomNumber];
        console.log(randomLetter);
    }
}

getRandomColor();

У нас є випадкові літери з літер! Однак ми хочемо, щоб вони додавалися щоразу, коли використовується змінна кольору. Це єдиний спосіб отримати колір. Ми можемо зробити це, додавши новий елемент (нову літеру) до наявного значення кольору:

function getRandomColor() {    
    var letters = '0123456789ABCDEF';
    var color = '#';

    for (var i = 0; i < 6; i++) {
        var randomNumber = Math.floor(Math.random() * 16);
        var randomLetter = letters[randomNumber];

        color += randomLetter;
    }
    console.log(color);
}

getRandomColor();

Чудово! Однак ми не хочемо відображати цей колір, а лише повернути його для подальшого використання.

Для повернення значення використовується команда return:

function getRandomColor() {       
    var letters = '0123456789ABCDEF';
    var color = '#';

    for (var i = 0; i < 6; i++) {
        var randomNumber = Math.floor(Math.random() * 16);
        var randomLetter = letters[randomNumber];

        color += randomLetter;
    }

    return "#" + color;
}

getRandomColor();

Отримали випадковий колір! Тепер нам потрібно призначити його стилям тексту.

Щоб відокремити різні елементи сторінки, ми використовуємо різні теги.

Наприклад, між тегами <p></p> розміщуємо вміст абзаців. <div></div> — це цілий блок або секція. <table></table> використовуємо для таблиці. <ul></ul> — це маркований список, а <ol></ol> — нумерований. <li></li> — кожний з елементів списку. <h1></h1>, <h2></h2>, <h3></h3>, <h4></h4>, <h5></h5>, <h6></h6> — заголовки різних ступенів.

У деякі елементи ми можемо вкладати інші елементи. Деякі з них можуть зустрічатися на сторінці кілька разів. Для того, щоб посилатися на конкретні елементи, ми даємо їм ідентифікатор (присвоюється тільки одному елементу) або клас (class), який можуть мати декілька елементів. Наприклад:

<p id="magic" class="title">Let’s make some magic!</p>

Вставмо підпис на нашій сторінці між тегами та присвоїмо йому ідентифікатор.

Тепер повернемося до JS-коду. Щоб знайти на сторінці елемент з певним id, ми скористаємося командою document.getElementById(); У дужках ми вказуємо ім’я id. Добре було б присвоїти цей елемент змінній.

var title = document.getElementById('magic');

Тепер ми створимо ще одну функцію, яка відповідатиме за зміну кольору тексту.

function changeColor() {

}

Щоб змінити колір, ми звернемося до об’єкта стилю. Коли ми введемо:

console.log(title.style)

JavaScript поверне всі властивості об’єкта стилю. Тут ви побачите впорядкований список. Нам потрібна властивість кольору.

function changeColor() {
    title.style.color
}

Крім того, ми хочемо змінити цю властивість, тобто надати їй нового значення. Ми робимо це, так само як змінюємо значення змінної:

function changeColor() {
    title.style.color = new_color;
}

Наш новий колір буде створено під час виклику функції getRandomColor:

function changeColor() {
    title.style.color = getRandomColor();
}

Викличемо функцію changeColor і оновимо нашу сторінку кілька разів.

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

Якщо ми вирішили це зробити, нам потрібно призначити параметр для нашої функції. Ми поміщаємо його в дужки поруч з назвою функції.

function changeColor(text) {
}

Тепер нам потрібно призначити команду зміни кольору не змінній title, а параметру функції, який змінюватиметься:

function changeColor(text) {
    text.style.color = getRandomColor();
}

Тепер при виклику функції нам потрібно замінити наш параметр на існуючий елемент сторінки:

changeColor(title);

Але на цьому робота не закінчується! Наш напис може бути будь-якого кольору. Але зробімо його ще цікавішим. Давайте будемо змінювати колір кожні 2 секунди!

Щоб досягти цього ефекту, нам потрібно викликати нашу функцію changeColor(title) кожні дві секунди;

Для цього ми використаємо метод setInterval(), який виглядає наступним чином:

setInterval(function() { 
    co_ma_się_wydarzyć; 
}, coJakiCzas);

Ми вимірюємо час у мілісекундах. 2 секунди — це 2000 мілісекунд. Тобто:

setInterval(function() { 
    changeColor(title); 
}, 2000);

✨ Магія існує! ✨