Це буде довгий процес. Тож готуйтеся. Ідея полягає в тому, щоб вивчити основну взаємодію з бібліотеками, такими як Bootstrap, з фокусом на концепти JavaScript.
Я продемонструю процес створення простого квізу на тему Покемонів. Це буде проста веб-сторінка, яка міститиме 4 питання. Відповіді будуть на основі множинного вибору. Наприкінці тесту ви подасте свою відповідь і отримаєте оцінку. Почнемо!
Що таке Bootstrap?
Bootstrap — це CSS і JavaScript бібліотека, яка полегшує створення красивих вебсайтів. Замість того, щоб писати купу кастомного CSS, Bootstrap прийде на допомогу. Я не буду глибоко занурюватися в JavaScript частину, але концепти взаємодії з ним будуть чітко описані.
Як підключити Bootstrap до вашого проєкту:
Є кілька способів. Найлегший — зайти на www.getbootstrap.com і перейти до цього розділу:
Просто скопіюйте це та вставте в <head> вашого HTML документа.
Це означає, що тепер ми можемо використовувати вбудовані CSS класи Bootstrap.
Тепер давайте перейдемо до коду.
У тілі мого HTML я створив div. Я надав йому клас “intro”. Я також використав деякі класи Bootstrap. “py-3” — це відступ по осі Y з силою 3. “bg-white” говорить про те, що фон має бути білим. “text-center” вирівнює текст по центру в цьому div. Нижче я створив ще один div з класом “container”. Це потрібно для того, щоб тримати текст в центральній колонці. Усередині цього я виводжу заголовок h2 з класом “text-primary”. Це робить текст синім. “display-3” означає, що текст буде великим, а “my-4” дає тексту відступи з верхньої та нижньої частин з силою 4. Кінцевий результат виглядає так:
Так само, як я починав верхню частину, я почну частину з квізом з div. Потім відкриваю ще один div, щоб помістити в нього заголовок h2.
Щоб візуалізувати, що роблять ці div, я змінив колір фону на синій.
НАЛАШТУВАННЯ HTML ШАБЛОНУ:
Як я вже сказав, я хочу в основному зосередитись на JavaScript, але розуміння деяких аспектів HTML, безумовно, важливе для того, щоб зрозуміти, як ми взаємодіємо з браузерами. Тому нижче наводиться HTML для відображення розділу питань.
Це питання 1:
Після цього я просто скопіював і вставив все всередині div. Ось так:
Тепер поясню, як працює питання 1. Спочатку я створив div з класом “my-5”. Це клас Bootstrap, який просто встановлює відступ по осі Y. Тепер все всередині цього div буде мати цей відступ. Потім я використовую тег p з класом “lead font-weight-normal”, щоб задати вигляд тексту. Далі я створив div для кожної відповіді. Клас “text-white-75” встановлює колір тексту білим з прозорістю 75, щоб він виглядав трохи світліше за текст питання. Всередині я додав поле введення типу “radio”, щоб воно відображалося як вибір з кількох варіантів, надав йому ім’я, в даному випадку “q1” і значення або A, або B. Я хочу, щоб A завжди було вибрано за замовчуванням, тому після значення додав атрибут “checked”. Далі йде мітка, де я вказую текст для цього вибору.
Клас “form-check-label” є додатковим стилем від Bootstrap.
Після питань я додав просту кнопку для відправлення відповідей.
Кінцевий результат виглядає ось так:
Чудово. Тепер, коли наша веб-сторінка виглядає так, як ми хочемо, пора перейти до взаємодії з нею.
Я зараз працюватиму в файлі app.js. Першим кроком є створення масиву для зберігання правильних відповідей.
Я створю змінну correctAnswers і поки що встановлю її рівною []. Наступним кроком буде визначити, яка відповідь є правильною для кожного питання. У моєму випадку правильні відповіді — A для питання 1, B для 2, B для 3 і A для 4. Тому я скажу: const correctAnswers = ['A','B','B', 'A'];. Якщо ви йдете за прикладом, але не використовуєте A, B і т. д., вам просто потрібно ввести значення в масив для кожного питання, яке відповідає правильній відповіді.
Тепер я хочу перевірити відповіді користувача. Тому, коли вони натискають кнопку відправки, я й буду це робити. Для цього мені потрібно отримати доступ до форми. Потім я додам прослуховувач подій (Event Listener) для форми та налаштуємо його на обробку події відправки.
Тепер, коли зворотний виклик (callback function) для події відправки створено, перше, що потрібно зробити — це запобігти дії за замовчуванням, тобто оновленню сторінки. Після цього я хочу створити змінну для оцінки та встановити її рівною 0. Потім створю ще один масив для зберігання відповідей користувача.
Я встановив елементи цього масиву рівними form.q1.value, наприклад. Це означає, що ми отримуємо форму, потім отримуємо посилання на ім’я поля введення і значення, яке вибрав користувач (A чи B).
Після цього я хочу пройти через відповіді користувача і подивитися, чи збігаються вони з правильними значеннями з масиву correctAnswers. Якщо значення збігаються, я додаю 25 до оцінки. Якщо б було більше ніж 4 питання, я міг би просто зробити кілька простих обчислень для встановлення правильної оцінки.
Зворотний виклик (callback function) приймає два аргументи: відповідь і індекс. Тому, якщо поточна вибрана відповідь збігається з correctAnswers[index], це правильна відповідь. Якщо користувач вибирає A для питання 1, це значення збігається з першим елементом масиву correctAnswers. Коли значення збігаються, до оцінки додається 25.
У коді я просто виводжу оцінку в консоль, але насправді я хочу відобразити оцінку в браузері. Тому в HTML я створю секцію для цього.
Тут я використовую трохи Bootstrap. Я створив ще один div з класом “result”, на випадок, якщо я захочу звернутися до цього div пізніше. “py-4” — це клас Bootstrap. Він просто додає відступ з силою 4. “d-none” важливий. За замовчуванням я не хочу, щоб ця секція була видимою. Я хочу, щоб вона стала видимою тільки після того, як користувач натисне кнопку відправки. “d-none” вказує, що її тип відображення — none. “bg-light” і “text-center” — це те, що я вже пояснював.
Тепер я хочу працювати з JavaScript частиною цього. Спочатку мені потрібно отримати доступ до класу “result”.
Тепер, де я раніше використовував console.log, я хочу налаштувати логіку для відображення оцінки.
Тут я використовую метод querySelector, щоб отримати доступ до елемента span всередині цього класу. Я беру властивість textContent і встановлюю її рівною шаблонному рядку ${score}%.
Отже, це просто означає, що я передаю рядок змінній і додаю до нього символ %.
Після цього я отримую доступ до списку класів і просто видаляю клас “d-none” з результату. Тепер, коли я відповідаю на кілька питань і натискаю кнопку відправки, оцінка з’являється вгорі сторінки.
Якщо ви слідуєте за процесом, ви могли помітити, що коли натискаєте кнопку відправки, сторінка не прокручується автоматично до верху. Я думаю, що було б доцільно зробити так, щоб це відбувалося. Деякі користувачі можуть не подумати про це. Тому мені потрібно поговорити про об'єкт Window!
ОБ'ЄКТ WINDOW:
Об'єкт window — це глобальний об'єкт у front-end JavaScript. Матір усіх об'єктів, якщо хочете. Практично все, що ми робимо в front-end JavaScript, зберігається в цьому об'єкті window.
Щоб продемонструвати це, я перейду до інструментів розробника, натискаючи F12.
Я ввів “window” в консоль, і з'являється величезна кількість інформації. Я не буду розглядати все, але ось кілька речей, які варто перевірити:
Якщо я скажу window.outerWidth, то це покаже мені ширину вікна.
Те ж саме стосується і outerHeight. Зміна розміру вікна змінить це значення.
До цього часу все, що я робив, фактично залежало від об'єкта window. Наприклад, console.log() також можна написати як window.console.log() і це працюватиме точно так само. Я не маю обов'язку писати window, тому що це за замовчуванням.
Тепер я хочу використовувати метод з об'єкта window, який називається scrollTo(). Цей метод приймає координати x і y. Якщо я хочу прокрутити сторінку до самого верху, я просто скажу scrollTo(0,0);
Тепер, коли я вибираю відповіді і натискаю кнопку відправки, мене прокручує до верху сторінки. Наступне, що я хочу розглянути, це як анімувати числа, щоб вони виглядали так, наче вони рахуються до кінцевого результату. Для цього я використаю ще один метод з об'єкта window, який називається SetInterval.
Отже, що я зробив тут, так це створив локальну змінну output. Потім створив іншу змінну timer, яка дорівнює setInterval(). Зворотний виклик функції — це те, де я обробляю зміну текстового вмісту. Я просто переніс цей рядок вниз. Тепер, замість того, щоб змінювати текстовий вміст, щоб він відповідав оцінці, я маю, щоб він відповідав змінній output. Змінна output інкрементується кожного разу, коли викликається setInterval(). Число 10 в кінці зворотного виклику вказує, що кожні 10 мілісекунд значення змінної output буде перевірятися. Оператор if, який перевіряє, чи дорівнює output оцінці, є точкою, де ми виходимо з методу setInterval. Як тільки значення оцінки і output досягають того самого числа, метод зупиняється. Це дозволяє побачити, як числа рахуються.
Перекладено з: JavaScript: Bootstrap Basics