курси програмування для дітей безкоштовно

18. Формат JSON у JavaScript

Формат JSON у JavaScript | JavaScript для дітей | ITisFuture

Сьогодні ми розберемося як працює формат JSON у JavaScript на прикладі програмки-словника, яка допоможе запам’ятати слова з іноземної мови. Ось так приблизно може виглядати програма в кінці уроку. Програма буде показувати набір карток з іноземними словами, користувачу треба написати переклад. Якщо він вірний, то програма переходить до наступного слова.

Словник для запам'ятовування слів на JavaScript . Формат JSON у JavaScript | JavaScript для дітей | ITisFuture

Основи форматування JSON

JSON (JavaScript Object Notation) — це простий і зрозумілий спосіб зберігати та передавати дані між різними програмами чи комп’ютерами. Уяви, що це як коробка, у якій дані упорядковані за правилами, зрозумілими для комп’ютерів.

Як це виглядає?

JSON схожий на список або таблицю з парами “назва” – “значення”. Ось приклад:

jsonCopyEdit{
"name": "Міла
на",
"age": 15,
"hobbies": ["малювання", "музика", "спорт"]
}

Що це означає:

name: “Мілана” — це ім’я.
age: 15 — це її вік.
hobbies: [“малювання”, “музика”, “спорт”] — список її улюблених занять.

Чому JSON такий крутий?

  1. Зрозумілий людям і комп’ютерам. Якщо ти розумієш англійську, то легко прочитаєш JSON.
  2. Популярний у програмах. Багато сайтів і додатків використовують JSON, щоб обмінюватися даними (наприклад, надсилати повідомлення або завантажувати профіль користувача).
  3. Простий. У ньому тільки текст, без зайвих символів.

Як це використовувати?

Уяви, що ти робиш гру, і тобі потрібно зберегти інформацію про гравців:

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" - слово українською

Кожен блок відділений дужками та комою. Не забувайте про це, коли будете редагувати цей файл.

Мем-Жарт про програмістів | JavaScript для дітей | ITisFuture

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 мілісекунд), щоб перейти до наступного слова

Мем-Жарт про програмістів | JavaScript для дітей | ITisFuture

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: Зробіть можливість перемикатися між мовами : на екрані англійське слово, треба вводити українське і навпаки. Якщо перекладаємо з української, то транскрипцію не має бути видно (бо це підказка)

Мем-Жарт про програмістів | JavaScript для дітей | ITisFuture



Підказка по 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

Level Up
Формат JSON у JavaScript


1: Додайте підтримку кількох мов. Наприклад, у вас українська, англійська та іспанська. Користувач обирає, як перекладати :

з української на англійську
з англійської на українську
з української на іспанську
з іспанської на українську

Хочете дізнатися більше ? Переходьте на сторінку з уроками по CSS та Javascript і прокачайте навички з веброзробки 😎🤖 !!!

Залишити коментар

Ваша e-mail адреса не оприлюднюватиметься. Обов’язкові поля позначені *