| -
|
CSS
|
-
|
Менеджер пакетів
|
-
|
Тестувальникам
|
-
|
ESLint
|
}
Спочатку мова називалася Mocha, потім LiveScript, а згодом отримала назву JavaScript.; |-
|
Не вставляти HTML без очищення
|
Це має змогу створити XSS.;[2]
console.error("Помилка:", error);
console.log(`Привіт, ${name}!; |}
console.log("Server is running on http://localhost:3000");
}
async / await
Приклад:!Напрям
== Інструменти JavaScript-розробника ==
JavaScript дуже часто функціонує з асинхронними задачами:
Приклад:<syntaxhighlight lang="html">
}
== Структура JavaScript-проєкту ==
== Коротко ==
title.textContent = "Новий заголовок";
{| class="wikitable"
Простими словами:<blockquote>'''JavaScript має змогу запустити задачу, не чекати її завершення, а потім повернутися до результату, коли він буде готовий.'''</blockquote>Приклад:<syntaxhighlight lang="javascript">
JavaScript створювався як мова для браузера, щоб вебсторінки могли реагувати на дії користувача.; |-
|'''C#'''
|C# сильний у .NET і Unity; JavaScript сильніший у браузері.; |-
|'''Callback / async складність'''
|Асинхронність потребує розуміння Promise, async/await і event loop.; |-
|'''[[Angular]]'''
|Frontend-фреймворк
|Великі enterprise frontend-застосунки.; |-
|'''Подієва модель'''
|Особливо важлива для браузера й Node.js.; |-
|2
|Змінні, типи, умови, цикли, функції.; |розроблена як універсальна мова для застосунків і enterprise-систем.;<blockquote>'''JavaScript — це мова, яка оживила веб: кнопки, форми, інтерактивність, SPA-застосунки, realtime-інтерфейси й сучасні web-платформи.'''</blockquote>
!Чому
const title = document.getElementById("title");
├── src/
app.get("/", (request, response) => {
}
* знаходити елементи;
* змінювати текст;
* змінювати стилі;
* додавати або видаляти блоки;
* реагувати на кліки;
* обробляти форми.; |-
|'''[[Astro]]'''
|Islands architecture
|Швидкі контентні сайти, документація, блоги, маркетингові сторінки.; |Phaser, Three.js, Babylon.js.; import http from "node:http";
3
age: 17,
У бізнесі JavaScript використовують для:
|-
|'''функціонує у браузері'''
|Не потрібне додаткове встановлення для frontend-коду.; |}
├── package.json
├── vite.config.js
інтерфейс змінюється одразу.; |}
== JavaScript у бізнесі ==
JavaScript додатково застосовують, коли потрібно для desktop-застосунків.; |-
|'''Full-stack'''
|Один стек для клієнта й сервера.; |-
|'''Оновлювати залежності'''
|Старі версії бібліотек можуть бути небезпечними.; |-
|'''[[npm]]'''
|Менеджер пакетів.; |}
├── .env.example
!Тип
1
!Теза
|-
|'''[[Electron]]'''
|Desktop-застосунки на web-технологіях.; │ ├── components/
|-
|'''[[Browser JavaScript Engine|Браузерний JS-двигун]]'''
|Виконує JavaScript у браузері.; |}
</syntaxhighlight>Стрілкова функція:<syntaxhighlight lang="javascript">
});
function add(a, b) {
!Приклад
|-
|'''[[Express.js]]'''
|Простий і популярний backend-фреймворк для Node.js.; |-
|'''Java'''
|Java сильніша в enterprise backend; JavaScript універсальніший у web.; .catch(error => {
|-
|'''[[Next.js]]'''
|React
|Full-stack React-застосунки, SSR, SSG, API routes.; |-
|3
|Масиви, обʼєкти, методи масивів.; |-
|'''[[Deno]]'''
|Сучасний runtime від автора Node.js з акцентом на безпеку й TypeScript.; |-
|'''Тестування'''
|Unit, integration, e2e-тести.; |-
|'''[[NestJS]]'''
|Структурований backend-фреймворк для великих Node.js-проєктів.; |Основна сфера — enterprise, backend, Android.; |-
|'''PHP'''
|PHP сильний у класичному server-side web; JavaScript охоплює і frontend, і backend.; |React Native, Ionic.; response.end("Hello from Node.js");
JavaScript функціонує майже в кожному сучасному браузері, з цієї причини став однією з найпоширеніших мов програмування у світі.;</syntaxhighlight>
2
Приклад Express API:
| Інструмент
counter += 1;
ECMAScript
State of JS 2024 зазначає, що серед frontend-фреймворків стабільно важливими залишаються React, Angular і Vue, а додатково зростають або активно використовуються Svelte, Solid, Qwik та інші рішення для бізнесу.; |-
|
Контроль версій
|
Git.; Тобі ${age} років.`);
</syntaxhighlight>Запуск script із package.json:
→ Бізнес-логіка
→ API на Node.js / Express / NestJS / Fastify
JavaScript — це практична реалізація мови в браузерах і runtime-середовищах, а ECMAScript — стандарт, який описує синтаксис, типи, оператори, обʼєкти й поведінку мови.; |-
|
Ionic
|
Статична типізація.; |-
|
Node.js
|
}
|
Перевага
const html = await response.text();
"test": "vitest"
console.log("Hello, world!");
</syntaxhighlight>Обʼєкт: role: "student"
}
У вебі JavaScript майже завжди функціонує разом із HTML і CSS.; |-
|Добрий для малих скриптів.; |-
|7
|npm, package.json, modules.; |-
|'''High-performance backend'''
|Go, Rust, C++.; |-
|'''[[SvelteKit]]'''
|Svelte
|Full-stack застосунки на Svelte.; |}
{| class="wikitable"
const response = await fetch("https://example.com");
Основні типи даних у JavaScript:
Приклад:<syntaxhighlight lang="json">
!TypeScript
|-
|'''[[React Native]]'''
|Кросплатформні мобільні застосунки для iOS і Android.; |-
|'''Desktop'''
|Desktop-застосунки на web-технологіях.; |}
├── public/
}
{| class="wikitable"
|
| Редактор
|
VS Code.; !Java
JavaScript можна використовувати для мобільних застосунків.; |-
|
10
|
-
|
Активна спільнота
|
Next.js, Nuxt, Remix.; |-
|
undefined
|
undefined
|
-
|
object
|
{ name: "Anna" }
|
-
|
Node.js
|
-
|
Remix
|
React
|
-
|
Fastify
|
-
|
TypeScript
|
-
|
Node.js, Express, NestJS, Fastify.; |-
|
Backend
|
Статична типізація.; |-
|
Перевіряти npm-пакети
|
-
|
Koa
|
-
|
Cypress
|
-
|
Динамічна типізація
|
-
|
Testing Library
|
-
|
TypeScript
|
-
|
істотно
|
JavaScript має історичні особливості
|
-
|
Linting
|
-
|
npm-залежності
|
}
JavaScript створив Брендан Айк у 1995 році для браузера Netscape Navigator.; |-
|
Web-дизайнерам
|
-
|
Mobile Android
|
-
|
Велика й мінлива програмний пакет
|
Багато інструментів, складно вибрати правильний стек.; !Недолік
Коли JavaScript — хороший вибір
function add(a: number, b: number): number {
let age = 17;
Сучасний JavaScript має змогу бути дуже швидким, але продуктивність залежить від:
<button id="helloButton">Натисни мене</button>
"name": "my-app",
});
}
response.json({ message: "Hello from Express" });
server.listen(3000, () => {
| Для чого
|
характеристика
JavaScript, HTML і CSS
Основні ризики:
| Приклади використання
|
| React
|
UI-бібліотека
|
-
|
Безпека frontend
|
-
|
Величезна програмний пакет
|
npm має велику кількість пакетів.; Встановлення пакета:├── src/
!Пояснення
'''JavaScript''' — одна з найважливіших мов сучасного IT.; api/
loadPage();
== Чому JavaScript такий популярний ==
</script>
== Популярність JavaScript ==
Популярні інструменти:
│ ├── services/
== npm ==
"type": "module",
|-
|'''[[VS Code]]'''
|Редактор коду.; |-
|'''JIT-компіляція'''
|Сучасні JS-двигуни оптимізують код під час виконання.; |-
|'''Підходить для backend'''
|Node.js дозволив писати серверний код на JavaScript.; |-
|'''TypeScript'''
|TypeScript зробив JavaScript-екосистему зручнішою для великих проєктів.;
Окремо варто відзначити яка є собою головною мовою сучасного вебу виступає ключовою рисою створення інтерактивних вебсторінок забезпечується через '''JavaScript'''.; |Потрібна компіляція або build step.; |}
!Фреймворк
!Компонент
};
== Backend-фреймворки JavaScript ==
|-
|'''Python'''
|Python сильніший в AI, data science і scripting; JavaScript сильніший у frontend.; |}
console.log(user.name);
JavaScript має історичні особливості й не завжди ідеальний, але його роль у web-екосистемі настільки велика, що знання JavaScript є собою майже обовʼязковим для будь-якого web-розробника.; це високорівнева мова програмування.; |-
|'''boolean'''
|<code>true</code>, <code>false</code>
|Логічне значення.; |-
|'''[[Jest]] / [[Vitest]]'''
|Тестування.; |Jest, Vitest, Playwright, Cypress.; |-
|Менше налаштувань.; сторінка відкрилась;
|-
|'''Frontend-розробникам'''
|JavaScript є собою основою браузерної розробки.; |-
|'''[[Vue.js]]'''
|Frontend-фреймворк
|Інтерактивні інтерфейси, SPA, зручний старт.; |-
|9
|TypeScript.; |-
|4
|DOM, події, форми.; |-
|Виконується в браузерах і JS-runtime.; |-
| style="background:#d4edda; color:#155724; font-weight:bold;" |Ключове
|'''JavaScript функціонує і на frontend, і на backend'''
|завдяки наявності Node.js JavaScript став мовою full-stack розробки.; |}
const appName = "My App";
завантажується нова сторінка.; |}
console.log("1");
Вона сильна там, де потрібні:
* сайтів;
* інтернет-магазинів;
* CRM;
* ERP-інтерфейсів;
* кабінетів користувача;
* адмінпанелей;
* мобільних застосунків;
* realtime-систем;
* інтеграцій;
* dashboard;
* SaaS-платформ;
* внутрішніх бізнес-інструментів.; |-
|5
|Fetch API, JSON, HTTP.; |-
|'''Backend enterprise'''
|Java, C#, Go.; │ ├── services/
</pre>
main.js:'''Node.js''' — це середовище виконання JavaScript поза браузером.; |-
|'''Прототипне наслідування'''
|Обʼєкти можуть наслідувати властивості від інших обʼєктів.; |-
|'''symbol'''
|<code>Symbol("id")</code>
|Унікальний ідентифікатор.; |-
|8
|Один frontend-фреймворк: React, Vue, Angular або Svelte.; const multiply = (a, b) => a * b;
!Для чого застосовується
!Ключове слово
Спочатку веб був переважно статичним:<pre>
"dev": "node src/main.js",
test("adds two numbers", () => {
|-
| style="background:#d4edda; color:#155724; font-weight:bold;" |Ключове
|'''JavaScript — головна мова браузера'''
|Без JavaScript неможливо уявити сучасний інтерактивний веб.; |-
|'''Багато вакансій'''
|JavaScript потрібен майже всюди у web-розробці.; |Extension API.; |-
|'''[[Prettier]]'''
|Автоматичне форматування коду.; |-
|'''[[Hono]]'''
|Легкий web-фреймворк для edge, serverless і сучасних runtime.; |-
|'''Зберігати токени обережно'''
|Небезпечно зберігати секрети в frontend-коді.; expect(add(2, 3)).toBe(5);
alert("Привіт з JavaScript!");
== package.json ==
|-
|'''Frontend'''
|Інтерактивні інтерфейси в браузері.; |}
button.addEventListener("click", () => {
!Інструмент
* розміру bundle;
* кількості залежностей;
* оптимізації DOM;
* кількості перерендерів;
* мережевих запитів;
* lazy loading;
* caching;
* server-side rendering;
* edge rendering;
* якості архітектури.; Якщо Python відкриває двері в автоматизацію й AI, то JavaScript відкриває двері в живі інтерфейси, frontend і full-stack web.'''</blockquote>
{| class="wikitable"
{| class="wikitable"
console.log(add(5, 7));
|-
|'''const'''
|Для значень, які не треба переприсвоювати.; |-
|'''null'''
|<code>null</code>
|Навмисна відсутність значення.; |-
|'''Системне програмування'''
|C, C++, Rust, Zig.; |-
|'''[[Playwright]]'''
|End-to-end тести в браузері.; |-
|'''Mobile'''
|Кросплатформні мобільні застосунки.; Типова backend-архітектура на JavaScript:<pre>
→ База даних PostgreSQL / MySQL / MongoDB
== Важливі акценти ==
|-
|'''Історичні дивності'''
|Деяка поведінка мови неочевидна для новачків.; |-
|'''Build tool'''
|Vite.; console.log(html);
!Мова
== JavaScript і TypeScript ==
|-
|'''Не довіряти введеним даним'''
|інформаційні дані користувача потрібно перевіряти.; |}
!Задача
'''npm''' — це менеджер пакетів JavaScript-екосистеми.;<ref>https://survey.stackoverflow.co/2025/technology/</ref>
return a + b;
})
!Порівняння з JavaScript
!Інструмент
<script>
!Параметр
{| class="wikitable"
JavaScript має змогу:
console.log("2");
setTimeout(() => {
return a + b;
});
Приклад структури backend-проєкту:├── package.json
Приклад структури frontend-проєкту:Найпростіша програма:{
* назву проєкту;
* версію;
* scripts;
* dependencies;
* devDependencies;
* конфігурація інструментів.;
|
Як застосовується JavaScript
export function add(a, b) {
сторінка реагує без перезавантаження;
console.log(language);
Event loop — це механізм, який надає можливість JavaScript виконувати асинхронні задачі, не блокуючи ключовий потік.; Stack Overflow Developer Survey 2025 передбачено JavaScript серед найпопулярніших мов, які розробники використовували протягом року.; |-
|
Playwright
|
-
|
Асинхронність
|
-
|
Browser extensions
|
-
|
Backend-розробникам
|
Node.js популярний для API та realtime-сервісів.; → Docker / Kubernetes
npm run dev
|
Статус
Простими словами
|
Пояснення
}
const user = {
}
* backend API;
* CLI-інструментів;
* серверів;
* real-time застосунків;
* build tools;
* DevOps-скриптів;
* мікросервісів.; |-
|
Браузер
|
}
завдяки наявності Node.js JavaScript почали використовувати для:
function add(a, b) {
import { add } from "./math.js";
Особливість
return a + b;
!Що вивчати
* запити до сервера;
* таймери;
* робота з файлами;
* події користувача;
* WebSocket;
* API браузера;
* бази даних у Node.js.;<blockquote>'''Якщо користувач системи щось натиснув, ввів, перетягнув, відправив або отримав без перезавантаження сторінки — дуже ймовірно, що там функціонує JavaScript.'''</blockquote>
try {
async function loadPage() {
== JavaScript у порівнянні з іншими мовами ==
!Коли використовувати
Файл <code>math.js</code>:<syntaxhighlight lang="javascript">
== JavaScript у backend-розробці ==
const server = http.createServer((request, response) => {
== Для чого застосовується JavaScript ==
* XSS;
* CSRF;
* небезпечна робота з cookies;
* небезпечні npm-залежності;
* витік токенів;
* неправильна валідація даних;
* dependency confusion;
* supply chain attacks.; |-
|'''Велика програмний пакет'''
|npm має величезну кількість пакетів.; |-
|'''AI / Data Science'''
|Python, R, Julia.;== Мінімальний набір для першого JavaScript-проєкту ==
користувач системи читає;
користувач системи натискає кнопку;
!Тип
Він містить:
|-
|Frontend web
| style="background:#d4edda; color:#155724; font-weight:bold;" |Найкращий вибір
|-
|SPA-застосунки
| style="background:#d4edda; color:#155724; font-weight:bold;" |Дуже добре
|-
|Full-stack web
| style="background:#d4edda; color:#155724; font-weight:bold;" |Добре
|-
|Backend API
| style="background:#d4edda; color:#155724; font-weight:bold;" |Добре
|-
|Realtime chat / WebSocket
| style="background:#d4edda; color:#155724; font-weight:bold;" |Добре
|-
|Mobile cross-platform
| style="background:#fff3cd; color:#856404; font-weight:bold;" |Добре через React Native
|-
|Desktop apps
| style="background:#fff3cd; color:#856404; font-weight:bold;" |Можливо через Electron або Tauri
|-
|AI / Data Science
| style="background:#fff3cd; color:#856404; font-weight:bold;" |Можливо, але Python частіше кращий
|-
|Low-level / drivers
| style="background:#f8d7da; color:#721c24; font-weight:bold;" |Не підходить
|}
}, 0);
!Чи підходить JavaScript?; |-
|'''[[Vitest]]'''
|Швидке тестування в сучасних Vite-проєктах.;<ref>https://ecma-international.org/publications-and-standards/standards/ecma-262/</ref>
!Пояснення
});
== Кому варто вивчати JavaScript ==
!JavaScript
→ Redis / Queue
інформаційні дані підвантажуються з сервера;
│ └── main.js
== Джерела ==
{| class="wikitable"
== JavaScript у мобільній розробці ==
import express from "express";
{| class="wikitable"
const app = express();
console.log(add(2, 3));
│ ├── models/
== Node.js ==
== Головна ідея JavaScript ==
!Кому
== Асинхронність ==
== Історичний розвиток ==
== Основні особливості JavaScript ==
{| class="wikitable"
Приклад JavaScript:<syntaxhighlight lang="javascript">
.then(response => response.text())
!Приклади
TypeScript-код компілюється у JavaScript і виконується там само, де функціонує JavaScript.; |}
"dependencies": {
console.error("Помилка:", error);
├── tests/
ECMA International зазначає, що ECMAScript 2025 є собою 16-ю редакцією стандарту, опублікованою у червні 2025 року.; |-
|'''Багато вакансій'''
|JavaScript потрібен у web, frontend, full-stack і Node.js-розробці.; |Node.js scripts, npm tools.; |}
== Висновок ==
== JavaScript у desktop-розробці ==
let, const і var
│ ├── routes/
}
|
| number
|
10, 3.14
|
}
console.log(counter);
|
На основі
console.log("API is running on http://localhost:3000");
| HTML
|
-
|
Швидкий старт
|
Перші приклади можна запускати без ускладнень в браузері.; !Значення
name: "Anna",
Full-stack фреймворки
app.listen(3000, () => {
Попри схожу назву, JavaScript не є собою Java.; |Добрий для командної розробки й великих codebase.; |-
|
Svelte
|
Frontend-фреймворк / compiler
|
-
|
TypeScript
|
-
|
Ключове
|
JavaScript має величезну екосистему
|
-
|
Підходить для frontend
|
-
|
Bun
|
React, Vue, Angular, Svelte.; |-
|
Новачкам у web
|
-
|
Функції першого класу
|
Функції можна передавати як значення.;== Типи даних ==
|
Роль
"express": "^4.18.0"
У JavaScript залишається однією з найпоширеніших мов програмування.; |-
|
bigint
|
123n
|
-
|
Webpack
|
-
|
let
|
Для змінних, які можуть змінюватися.; │ └── app.js
Пояснення
JavaScript і безпека
const languages = ["JavaScript", "Python", "Java", "C#"];
my-app/
JavaScript і продуктивність
</syntaxhighlight>Функція:<syntaxhighlight lang="javascript">
npm install express
let counter = 0;
│ ├── styles/
│ ├── controllers/
return a + b;
<syntaxhighlight lang="javascript">
У сучасному JavaScript зазвичай використовують const і let.; |-
|
|
| |
|
|
|
|
