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