Сьогодні ми розберемося як працює формат JSON у JavaScript на прикладі програмки-словника, яка допоможе запам’ятати слова з іноземної мови. Ось так приблизно може виглядати програма в кінці уроку. Програма буде показувати набір карток з іноземними словами, користувачу треба написати переклад. Якщо він вірний, то програма переходить до наступного слова.
Основи форматування JSON
JSON (JavaScript Object Notation) — це простий і зрозумілий спосіб зберігати та передавати дані між різними програмами чи комп’ютерами. Уяви, що це як коробка, у якій дані упорядковані за правилами, зрозумілими для комп’ютерів.
Як це виглядає?
JSON схожий на список або таблицю з парами “назва” – “значення”. Ось приклад:
jsonCopyEdit{на
"name": "Міла",
"age": 15,
"hobbies": ["малювання", "музика", "спорт"]
}
Що це означає:
name: “Мілана” — це ім’я.
age: 15 — це її вік.
hobbies: [“малювання”, “музика”, “спорт”] — список її улюблених занять.
Чому JSON такий крутий?
- Зрозумілий людям і комп’ютерам. Якщо ти розумієш англійську, то легко прочитаєш JSON.
- Популярний у програмах. Багато сайтів і додатків використовують JSON, щоб обмінюватися даними (наприклад, надсилати повідомлення або завантажувати профіль користувача).
- Простий. У ньому тільки текст, без зайвих символів.
Як це використовувати?
Уяви, що ти робиш гру, і тобі потрібно зберегти інформацію про гравців:
jsonCopyEdit{
"player": "Макс",
"level": 5,
"score": 1200
}
Потім комп’ютер може завантажити цей JSON і зрозуміти, якого рівня гравець і скільки в нього очок.
JSON — це як мова для обміну інформацією між твоєю грою, додатком чи вебсайтом! 😊
Формат JSON у JavaScript. Практика
1: Для роботи ми будемо використовувати https://codesandbox.io/, але також можна використати будь-який схожий редактор.
2: Створіть новий проєкт HTML\CSS, введіть назву проєкту: dictionary (або щось схоже).
👉Codesandbox дуже схожий на інші редактори, якими ми користувалися для розробки. Справа є область для перегляду коду, а зліва папка з файлами проєкту. По середині можна відкрити файл і писати код. Для збереження змін використовуйте гарячі клавіші Ctrl+S.
3: Нам знадобиться додатковий файл для Javascript. Створіть index.js, у ньому розмістимо js код.
4: Додайте також бібліотеки у середу тега <head>. Перша підключить jquery, що дозволить перевантажувати форму, без перезавантаження сторінки, коли написали переклад слова. Друга підключить наші майбутні скрипти, а третя – стилі.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script>
<script src="index.js"></script>
<link rel="stylesheet" href="styles.css" />5: Додаємо код для картки. Заголовок, картинка, поле для введення перекладу, кнопка і поле для результатів перевірки (правильно чи неправильно записане слово). Зауважте, що поле для картинки поки пусте, ми не передаємо картинку, бо це зроблять за нас скрипти.
<div class="card">
<h1 id="word">Word</h1>
<img
id="image"
src=""
alt="Word Image"
/>
<input type="text" id="translation" placeholder="Введіть переклад" />
<button onclick="checkAnswer()">Перевірити</button>
<div id="message" class="message"></div>
</div>Додаємо стилів
6: Попрацюємо над стилями. Тут перші стилі для сторінки. Деякі слова написані українською, згадайте, про які властивості йдеться і замініть на правильну назву. Слова для вставки: height, background-color, margin.
body {
font-family: Arial, sans-serif;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
висота: 100vh;
зовнішній_відступ: 0;
колір-фону: #acdfca;
}
Трохи підказки, щоб згадати:
font-family: Arial, sans-serif; встановлює шрифт.
flex-direction: column; задає напрямок розташування дочірніх елементів у flex-контейнері. column — елементи розташовуються вертикально (один під одним), як стовпчик.
align-items: center вирівнює дочірні елементи по вертикальній осі (по центру)
justify-content: center вирівнює дочірні елементи по горизонтальній осі (по центру)
7: Тепер черга стилів для картки та картинки. Проставте відповідні властивості зі списку: text-align, border-radius, padding, max-width, background, box-shadow, border, margin.
.card {
фон: #fff;
рамка: 1px solid #ddd;
радіус_рамки: 8px;
внутрішній_відступ: 20px;
розтащування_тексту: center;
тінь_блоку: 0 2px 8px rgba(0, 0, 0, 0.1);
}
img {
максимальна_ширина: 100px;
зовнішній_відступ: 10px 0;
}8: Наступна група стилів для поля вводу тексту, кнопки та повідомлення. button:hover – стиль для кнопки, коли на неї навели курсор. Слова для заміни: border, width, padding, margin, color, font-weight, border-radius, cursor, margin-top, background-color. Enjoy! 😈
input[type="text"] {
ширина: 80%;
внутрішній_відступ: 10px;
зовнішній_відступ: 10px 0;
рамка: 1px solid #ccc;
радіус_рамки: 4px;
}
button {
внутрішній_відступ: 10px 20px;
background-color: #28a745;
колір_тексту: #fff;
рамка: none;
радіус_рамки: 4px;
курсор: pointer;
}
button:hover {
колір_фону: #218838;
}
.message {
зовнішній_відступ_зверху_елемента: 15px;
товщина_тексту: bold;
}9: (Додаткове) Пограйтесь зі значеннями у властивостях, змініть їх на свій смак.
Створюємо json
10: Створіть words.json. У цьому файлі ми будемо зберігати слова для карток.
[
{
"word": "apple",
"image": "https://fruit-time.ua/images/cache/products/5a/yabluko-zelene-grenni-smit-imp__126-500x500.jpeg",
"wordUA": "яблуко"
},
{
"word": "dog",
"image": "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSzYkj3axLzSOs5GbfRruXlW2vFKQ4YP-CeRw&s",
"wordUA": "собака"
},
{
"word": "car",
"image": "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRPSwrRhinEj-L9lNNDi3P4VrryliXVN0sZxg&s",
"wordUA": "автомобіль"
}
]
Розберімо структуру:
"word": - слово іноземною мовою
"image": - картинка з ілюстрацією
"wordUA" - слово українськоюКожен блок відділений дужками та комою. Не забувайте про це, коли будете редагувати цей файл.
11: Відредагуйте файл. Змініть слова на складніші, додайте відповідні картинки.
Додаємо Javascript
12: Перейдімо до javascript коду. Код подаю картинкою нижче, щоб ви потренувались набирати його і краще розібрались у структурі.
Одже, words – список слів (з перекладами та картинкою), по суті змінна, у яку затягуємо все, що є у json-файлі. currentWordIndex – номер поточного слова.
Створи дві функції. loadWords() – завантажуватиме слова з json-файлу у змінну. loadWord – прописуватиме відповідні поля у формі.
loadWords детальніше:
async: Вказує, що ця функція є асинхронною і всередині неї можна використовувати await. Ключове слово await змушує JavaScript чекати, поки відповідна команда не виконається.
await: Зупиняє виконання функції до завершення запиту fetch.
fetch(“words.json”): Виконує запит для отримання файлу words.json
words = await response.json(); – перетворює json на об’єкт, надалі програма працюватися з цим об’єктом.
loadWord(); – функція, яку напишемо за хвилинку
try {
… тут команди, які теоретично можуть повернути помилку
} catch (error) {
… якщо трапиться помилка у блоці try, то виконаються команди з цього блоку.
}
loadWord детальніше:
if (words.length === 0) return; Перевіряє, чи масив words порожній (тобто кількість слів у ньому дорівнює нулю). Якщо так – вихід з функції.
const currentWord = words[currentWordIndex]; – створює змінну currentWord, яка зберігає об’єкт з поточним словом.
document.getElementById(“word”).textContent = currentWord.word; – запис англійського слова word у тестове поле. Далі схожим чином заповнюються й інші поля.
Останній рядок loadWords(); викликає відповідну функцію.
13: Допишемо функцію для перевірки відповідей checkAnswer(). Її важливо написати перед останнім рядком loadWords(), бо спочатку оголошуються функції, потім іде сама програма – це гарний стиль програмування
checkAnswer детальніше:
const userTranslation = document.getElementById(“translation”).value.trim().toLowerCase(); – тут кілька дій іде, як вагони у потязі, розберемо кожну:
document.getElementById(“translation”).value – взяти те, що написано у полі translation (те, що ми записали, як переклад).
document.getElementById(“translation”).value.trim() – … trim дозволяє прибрати зайві пробіли, якщо є
document.getElementById(“translation”).value.trim().toLowerCase(); – …toLowerCase() переводить всі символи у нижній регістр (замінює великі літери на малі)
const userTranslation = document.getElementById(“translation”).value.trim().toLowerCase(); – це все щастя записується у змінну userTranslation
const correctTranslation = words[currentWordIndex].wordUA.toLowerCase();
words[currentWordIndex].wordUA – з об’єкта words дістаємо поточне слово, далі дістаємо його wordUA (переклад на українську). toLowerCase() описана вище
const messageElement = document.getElementById(“message”); записуємо поле для повідомлення про вірну\не вірну відповідь
if (userTranslation === correctTranslation) { – якщо переклад юзера збігається з реальним … то ..
currentWordIndex = (currentWordIndex + 1) % words.length; Змінює індекс поточного слова на 1 (наступне слово)
setTimeout(loadWord, 1000); – таймаут, чекаємо 1 секунду (1000 мілісекунд), щоб перейти до наступного слова
14: Додайте функцію перемішування слів. Щоб слова з’являлись у різній послідовності. Не забудьте викликати функцію у потрібному місці коду:
function shuffleObject(array) {
for (let i = array.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1)); // Random index
[array[i], array[j]] = [array[j], array[i]]; // Swap elements
}
}
Домашня робота
1: Розширте словник до 10-12 слів
2: Зробіть власний дизайн словника. (змініть стилі на ваш смак)
3: Додайте поле транскрипція, але не для всіх слів, для декількох. Виводьте на екран транскрипцію поряд з англійським словом
4: Зробіть можливість перемикатися між мовами : на екрані англійське слово, треба вводити українське і навпаки. Якщо перекладаємо з української, то транскрипцію не має бути видно (бо це підказка)
Підказка по 4-му
У підказці не пишу, що і куди додавати і частину коду треба буде змінити. Для цього додай поля для переключення мов (заміни python та javascript на мови твого словника) :
<input type="radio" id="python" name="lang" value="python" />
<label for="python">На українську</label><br />
<input type="radio" id="javascript" name="lang" value="javascript" checked />
<label for="javascript">На англійську</label><br />Додай код, який слухатиме переключення радіобатона:
// Event listener for language change
document.addEventListener("DOMContentLoaded", () => {
document.querySelectorAll("input[name='lang']").forEach((radio) => {
radio.addEventListener("change", loadWord); // Reload word when language changes
});
});Додай глобальну змінну :
let lang = "en";У функції loadWord зміни код:
lang = document.querySelector('input[name="lang"]:checked').value;
console.log(lang);
if ( мова == ua) {
console.log("ua");
Записати у елемент word значення currentWord.word
Записати у елемент transcription значення для транскрипції
} else if ( мова == en) {
Записати у елемент word значення currentWord.wordUA;
}
У функцію checkAnswer додай такий шматочок (дещо треба буде і змінити):
console.log("Selected language: " + lang);
let correctTranslation = "";
if (мова == ua) {
correctTranslation = поточне слово wordUA малими літерами
} else if ( мова == en) {
correctTranslation = поточне слово word малими літерами
}
console.log("Correct Translation: " + correctTranslation);
Level Up
Формат JSON у JavaScript
1: Додайте підтримку кількох мов. Наприклад, у вас українська, англійська та іспанська. Користувач обирає, як перекладати :
з української на англійську
з англійської на українську
з української на іспанську
з іспанської на українську
Хочете дізнатися більше ? Переходьте на сторінку з уроками по CSS та Javascript і прокачайте навички з веброзробки 😎🤖 !!!
