Пошук уроків, статей та іншого контенту
Порівняємо середовища виконання JavaScript у браузері та Node.js, їхні API, обмеження й типові завдання.
JavaScript — це мова програмування. Вона описує синтаксис, типи даних, функції, об’єкти та інші можливості мови.
Але сам JavaScript не визначає, як працювати:
зі сторінкою HTML;
з файлами на комп’ютері;
із мережевими запитами;
із базами даних;
із процесом операційної системи.
Для цього потрібне середовище виконання — програма, яка запускає JavaScript і надає йому додаткові API.
Найпоширеніші середовища:
браузер — Chrome, Firefox, Safari та інші;
Node.js — середовище для запуску JavaScript поза браузером.
Один і той самий JavaScript-код може поводитися по-різному залежно від середовища, у якому його запущено.
Браузер запускає JavaScript у контексті вебсторінки. Він надає API для роботи з:
HTML-документом;
CSS;
подіями користувача;
формами;
сховищем браузера;
мережевими запитами;
URL і історією навігації.
Наприклад, браузер надає глобальний об’єкт window
documentalertconst title = document.querySelector("h1");
title.textContent = "Заголовок змінено JavaScript";
console.log(window.location.href);Цей код працює на вебсторінці, де є елемент <h1>. Він:
знаходить заголовок у HTML;
змінює його текст;
виводить адресу поточної сторінки.
Об’єкт document належить до браузерного API. Він не є частиною самої мови JavaScript.
JavaScript у браузері працює в захищеному середовищі. Скрипт вебсторінки зазвичай не може довільно:
читати будь-які файли на комп’ютері;
змінювати файли без дозволу користувача;
виконувати команди операційної системи;
переглядати всі дані інших сайтів;
отримувати необмежений доступ до пристрою.
Такі обмеження потрібні для безпеки. Інакше будь-який відкритий сайт міг би читати особисті файли або виконувати небезпечні команди.
Браузер може надати доступ до деяких можливостей після дії користувача або за спеціальним дозволом. Наприклад, користувач може вибрати файл через <input type="file">.
Node.js запускає JavaScript поза браузером. Він не створює вебсторінку і не має вбудованого DOM.
Node.js надає API для роботи з можливостями операційної системи:
файлами та папками;
процесами;
змінними середовища;
мережевими з’єднаннями;
серверами;
потоками даних.
Наприклад, Node.js може прочитати власний файл програми:
const fs = require("node:fs");
const path = require("node:path");
const fileName = path.basename(__filename);
const sourceCode = fs.readFileSync(__filename, "utf8");
console.log(`Файл: ${fileName}`);
console.log(`Кількість символів: ${sourceCode.length}`);
console.log(`Версія Node.js: ${process.version}`);Збережіть код у файл inspect.js і запустіть у терміналі:
node inspect.jsУ цьому прикладі:
fs — модуль Node.js для роботи з файловою системою;
path — модуль для роботи зі шляхами;
__filename — шлях до поточного файлу в CommonJS-модулі;
process — об’єкт із інформацією про поточний процес Node.js.
fs, path, process і __filename не доступні у звичайному браузерному скрипті.
Node.js не має деяких браузерних можливостей за замовчуванням:
document не представляє HTML-сторінку;
немає вебсторінки, яку можна змінювати через DOM;
немає автоматичного доступу до подій миші та клавіатури вебсторінки;
немає браузерного window з його API.
Якщо програмі на Node.js потрібно працювати з HTML, вона може обробляти HTML як текст або використовувати окремі бібліотеки. Але Node.js сам по собі не є браузером.
API — це набір доступних об’єктів, функцій і модулів.
У браузері часто використовують:
document.querySelector(".button");
window.setTimeout(() => {
console.log("Минуло секунди");
}, 1000);
localStorage.setItem("theme", "dark");Ці можливості пов’язані з вебсторінкою або браузером:
document працює з DOM;
window представляє середовище браузерної вкладки;
localStorage зберігає дані в браузері;
setTimeout планує виконання функції через певний час.
У Node.js використовують вбудовані модулі та об’єкти:
const os = require("node:os");
console.log(`Платформа: ${os.platform()}`);
console.log(`Архітектура: ${os.arch()}`);
console.log(`Домашня папка: ${os.homedir()}`);Модуль node:os надає інформацію про операційну систему. Подібні можливості потрібні серверним програмам і командним утилітам.
Назви деяких API можуть бути схожими в обох середовищах. Наприклад, console.log працює і в браузері, і в Node.js. Проте це не означає, що всі інші глобальні об’єкти будуть однаковими.
У браузері та Node.js підтримуються основні можливості JavaScript:
змінні та константи;
числа, рядки та булеві значення;
масиви й об’єкти;
функції;
умови та цикли;
класи;
обробка помилок;
асинхронний код із Promise та async/await.
Наприклад, така функція не залежить від середовища:
function calculateTotal(prices) {
return prices.reduce((total, price) => total + price, 0);
}
const total = calculateTotal([10, 25, 15]);
console.log(total);У браузері результат з’явиться в консолі розробника, а в Node.js — у терміналі.
Водночас сама функція calculateTotal не знає, де вона виконується. Вона використовує лише можливості мови JavaScript.
Глобальний об’єкт globalThis доступний у сучасних середовищах JavaScript. За його допомогою можна перевірити наявність певних API:
console.log(typeof document);
console.log(typeof process);
console.log(typeof window);Типовий результат у браузері:
object
undefined
objectТиповий результат у Node.js:
undefined
object
undefinedЦе лише проста діагностика. У реальних програмах зазвичай не варто будувати всю логіку на перевірках середовища без потреби.
Браузер зазвичай використовують для коду, який виконується на стороні користувача:
зміна вмісту сторінки;
реакція на натискання кнопок;
перевірка форм;
створення інтерактивних компонентів;
показ або приховування елементів;
надсилання запитів до сервера;
збереження простих даних у браузері.
Наприклад, браузерний код може обробити натискання кнопки:
const button = document.querySelector("#save-button");
button.addEventListener("click", () => {
console.log("Кнопку натиснуто");
});Node.js зазвичай використовують для коду, який виконується на сервері або в терміналі:
створення вебсерверів;
обробка запитів від клієнтів;
робота з файлами;
взаємодія з базами даних через відповідні інструменти;
створення командних утиліт;
автоматизація завдань;
виконання серверної бізнес-логіки.
Node.js може отримати дані від браузера, обробити їх і повернути результат. У такій архітектурі браузер відповідає переважно за інтерфейс, а Node.js — за серверну частину.
Вебзастосунок часто складається з двох частин:
Клієнтська частина запускається в браузері.
Серверна частина запускається в Node.js.
Наприклад:
браузер показує форму входу;
користувач вводить логін і пароль;
браузер надсилає запит;
Node.js приймає запит і перевіряє дані;
сервер повертає відповідь;
браузер показує результат користувачу.
Код цих частин може бути написаний JavaScript, але доступні API будуть різними.
Код браузерної сторінки зазвичай виконується на пристрої користувача. Тому браузер обмежує його доступ до системи.
Код Node.js зазвичай виконується на сервері або локальному комп’ютері. Він може мати значно ширші права:
читати та записувати файли;
запускати системні процеси;
працювати з мережевими портами;
читати змінні середовища.
Тому серверний код потрібно захищати особливо уважно. Не можна без перевірки виконувати команди або використовувати дані, отримані від користувача.
document працює в Node.jsdocument.querySelector("h1");У Node.js цей код завершиться помилкою, тому що Node.js не має браузерного DOM.
fs працює в браузеріconst fs = require("node:fs");Браузер не надає цей модуль. Робота з файлами в браузері має інші механізми та обмеження.
Array, Promise і функції — це можливості JavaScript.
document, localStorage, process і fs — це API конкретного середовища або платформи.
Розуміння цієї різниці допомагає правильно визначати причину помилки.
HTML і JavaScript для сторінки не обов’язково можна запустити командою:
node app.jsЯкщо app.js використовує document або події DOM, його потрібно підключити до HTML-сторінки та відкрити в браузері.
Якщо файл використовує require("node:fs"), process або інші API Node.js, браузер не зможе виконати його як звичайний скрипт сторінки.
Перед запуском коду поставте собі такі запитання:
Чи потрібно змінювати HTML або реагувати на дії користувача?
Чи потрібно читати файли операційної системи?
Чи код запускається у вкладці браузера чи в терміналі?
Які глобальні об’єкти та модулі потрібні програмі?
Чи має код працювати з даними користувача на клієнті або на сервері?
Якщо потрібен DOM і взаємодія зі сторінкою — це завдання браузера.
Якщо потрібні файли, сервер, процес або операційна система — це завдання Node.js.
JavaScript — це мова, а браузер і Node.js — різні середовища її виконання.
Браузер надає DOM та API для роботи з вебсторінкою.
Node.js надає API для роботи з файлами, процесами, мережею та операційною системою.
Браузер обмежує доступ скриптів до комп’ютера з міркувань безпеки.
Node.js не має document і браузерного DOM за замовчуванням.
Основні конструкції JavaScript працюють в обох середовищах.
Вибір середовища залежить від завдання: інтерфейс сторінки виконується в браузері, серверна та системна логіка — у Node.js.