Наповнення JS розділу

Добридень, Пані та Панове, завдяки вам вдалося зібрати більше 19тис грн з необхідних 15тис на впровадження JS розділу.

JS розділ вже впроваджено - переходимо до його наповнення і почнемо бігти довгий марафон, адже JS має більше 1100 різноманітних методів, властивостей, подій і т.д., які необхідно описати.

Будемо працювати, і вдень, і вночі, щоб орієнтовно взимку закінчити наповнювати JS розділ!

Ви також можете допомогти нам в цьому. Долучайтеся до нашої спільноти в дискорді - ставайте її частиною і допомагайте нашому розвитку.

Також, підтримуйте нас матеріально.

JS об'єкт Global

Глобальный об'єкт

Глобальний об'єкт надає змінні та функції, готові до використання в будь-якій точці програми. Зазвичай, це елементи, вбудовані безпосередньо в мову чи середовище її роботи. В браузерах він носить ім'я window, у Node.js відомий як global. Але в інших середовищах його назва може відрізнятися.

Не так давно мову JavaScript поповнило нове ім'я для глобального об'єкта — globalThis. Ця назва призначена бути універсальною і працювати в будь-якому середовищі. Основні браузери вже її підтримують.

Надалі ми будемо використовувати window, маючи на увазі роботу в браузері. Проте якщо ваш скрипт можливо запускатиме в інших середовищах, віддайте перевагу globalThis.

Отже, щоб отримати доступ до атрибутів глобального об'єкта:

alert("Привіт");
// Це те ж саме, що:
window.alert("Привіт");

У контексті браузера, якщо ви оголошуєте глобальні функції чи змінні через var (не через let чи const!), вони стають частиною глобального об'єкта:

var gVar = 5;
alert(window.gVar); // виведе 5

Аналогічна ситуація із функціями, створеними за допомогою Function Declaration.

Якщо ж ви використовуєте let:

let gLet = 5;
alert(window.gLet); // виведе undefined

І коли вам потрібно дійсно зробити деяку властивість глобальною, просто додайте її до глобального об'єкта:

// Записуємо інформацію про користувача глобально
window.currentUser = {
  name: "John"
};
alert(currentUser.name); // виведе John

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

Використання для поліфілів

Глобальний об'єкт дозволяє перевірити підтримку сучасних можливостей мови. Давайте, наприклад, перевіримо наявність вбудованого об'єкта Promise (така підтримка відсутня в дуже старих браузерах):

if (!window.Promise) {
  alert("Ваш браузер застарілий!");
}

Якщо такої підтримки немає (можливо, використовується стара версія браузера), ми можемо створити поліфіл: додати функції, які не підтримуються поточним середовищем, але є в сучасному стандарті.

if (!window.Promise) {
  window.Promise = ... // наша реалізація сучасних можливостей мови
}
Порада:

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

Нотатка:

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

Нотатка:

Замість того, щоб користуватися window в браузері або global в Node.js, можна використовувати globalThis. Це універсальний спосіб звертання до глобального об'єкта в різних середовищах виконання.

Синтаксис

var x = window.variable; // для браузера
var x = global.require('path'); // Node.js
var x = globalThis.variable; // Node.js (> 6.0.0)

Переглядачі

Переглядач

1

4

1

5

12

Переглядач

37

18

4

1

Переглядач

0.10.0

1.0

Приклади


У даному прикладі ми працюємо з глобальним об'єктом JavaScript в середовищі браузера, який називається window. На початку ми створюємо глобальну змінну currentUser з ім'ям користувача "John". Після цього ми використовуємо функцію alert для відображення імені користувача. Наостанок, ми демонструємо, як безпечно звертатися до глобальної змінної, якщо в області видимості існує локальна змінна з таким же ім'ям, використовуючи window.currentUser.name.

// зробити інформацію про поточного користувача глобальною, для надання доступу всім скриптам
window.currentUser = {
  name: "John"
};

alert(currentUser.name); // John

// або, якщо у нас є локальна змінна з ім'ям "currentUser",
// отримаємо її з window явно
alert(window.currentUser.name); // John

У цьому прикладі ми створили глобальний об'єкт userConfig, який зберігає інформацію про користувача та його персональні налаштування. Об'єкт має дві підсекції: userInfo для особистої інформації користувача та preferences для його налаштувань.

Ми також створили дві функції:

  • setTheme - дозволяє змінювати тему відображення користувача (з темної на світлу та навпаки).
  • displayUserInfo - виводить інформацію про користувача в консоль.

Цей приклад демонструє, як можна структурувати глобальні дані та використовувати їх в різних частинах програми.

// Створюємо глобальний об'єкт для зберігання інформації про користувача та його налаштування
window.userConfig = {
  userInfo: {
    name: "Anna",
    age: 25,
    location: "Kyiv"
  },
  preferences: {
    theme: "dark",
    language: "uk"
  }
};

// Функція, що змінює тему відображення для користувача
function setTheme(theme) {
  if (theme === 'dark' || theme === 'light') {
    window.userConfig.preferences.theme = theme;
    // тут можна додати код для зміни стилів сторінки відповідно до обраної теми
    console.log(`Тема змінена на: ${theme}`);
  } else {
    console.log("Невідома тема. Будь ласка, виберіть 'dark' або 'light'.");
  }
}

// Функція для виведення інформації про користувача
function displayUserInfo() {
  console.log(`Ім'я: ${window.userConfig.userInfo.name}`);
  console.log(`Вік: ${window.userConfig.userInfo.age}`);
  console.log(`Місто: ${window.userConfig.userInfo.location}`);
}

// Використання функцій
displayUserInfo(); // Виведе інформацію про користувача
setTheme('light'); // Змінить тему на світлу

Методи

decodeURIComponent()
Перетворює закодовані компоненти URI назад у їхній первісний текстовий формат.
encodeURIComponent()
Закодовує компонент URI, замінюючи спеціальні символи на їхні коди відсотка.
isNaN()
Перевіряє, чи є значення "не числом" (NaN).
Number()
Вбудований об'єкт, що представляє числовий конструктор і допоміжні методи для роботи з числами.
unescape()
Перетворює закодовані символи URI назад у їхній вихідний рядковий вигляд.
decodeURI()
Перетворює закодований URI назад в звичайний рядок.
parseFloat()
Перетворює рядок у десяткове число.
encodeURI()
Перетворює текст в кодований вигляд, придатний для використання в Уніфікованих Ідентифікаторах Ресурсу (URI).
escape()
Перетворює спеціальні символи в рядку на їхні закодовані у вигляді URI еквіваленти.
eval()
Виконує рядок як код JavaScript.
parseInt()
Перетворює рядок у ціле число.
isFinite()
Визначає, чи є даний числовий аргумент скінченним числом.
String()
Створює або перетворює значення в рядок.

Властивості

NaN
Infinity
Спеціальне числове значення, що представляє нескінченність або результат ділення на нуль.
NaN
Позначає значення, яке не є числом.
undefined
Спеціальне значення, яке вказує на відсутність визначеного значення або непризначену змінну.