Розділи
Типи даних
| Тип | Приклад | typeof |
|---|---|---|
| Number | const n = 42; | "number" |
| String | const s = "hi"; | "string" |
| Boolean | const b = true; | "boolean" |
| Array | const a = [1,2,3]; | "object" |
| Object | const o = {x:1}; | "object" |
| undefined | змінна оголошена, але не задана | "undefined" |
| null | const x = null; | "object" |
Змінні: let, const, var
| Ключове слово | Можна перепризначити | Коли використовувати |
|---|---|---|
| const | Ні | За замовчуванням — для всього, що не буде змінюватися |
| let | Так | Коли значення змінної точно буде змінюватися |
| var | Так | Застарілий варіант, у новому коді не використовується |
Оператори порівняння
| Оператор | Значення |
|---|---|
=== | Строга рівність (порівнює і значення, і тип) |
!== | Строга нерівність |
== | Нестрога рівність (з приведенням типів, краще уникати) |
> >= < <= | Більше, більше або дорівнює, менше, менше або дорівнює |
&& | Логічне І (обидві умови істинні) |
|| | Логічне АБО (хоча б одна умова істинна) |
! | Логічне НЕ (інвертує значення) |
Методи масивів
| Метод | Що робить | Приклад |
|---|---|---|
| push() | Додає елемент у кінець | arr.push(5) |
| pop() | Видаляє і повертає останній елемент | arr.pop() |
| shift() | Видаляє і повертає перший елемент | arr.shift() |
| unshift() | Додає елемент на початок | arr.unshift(0) |
| map() | Створює новий масив, застосовуючи функцію до кожного елемента | arr.map(x => x * 2) |
| filter() | Створює новий масив тільки з підходящими елементами | arr.filter(x => x > 5) |
| forEach() | Проходить по кожному елементу, нічого не повертає | arr.forEach(x => console.log(x)) |
| find() | Повертає перший підходящий елемент | arr.find(x => x > 5) |
| includes() | Перевіряє, чи є значення в масиві | arr.includes(5) |
| slice() | Повертає частину масиву, не змінюючи оригінал | arr.slice(1, 3) |
| splice() | Видаляє/додає елементи, змінюючи оригінал | arr.splice(1, 2) |
| join() | Збирає масив у рядок через роздільник | arr.join(", ") |
| reduce() | Зводить масив до одного значення (наприклад, суми) | arr.reduce((s,x)=>s+x, 0) |
Методи рядків
| Метод / властивість | Що робить | Приклад |
|---|---|---|
| length | Довжина рядка | "hello".length → 5 |
| toUpperCase() | Переводить у верхній регістр | "hi".toUpperCase() → "HI" |
| toLowerCase() | Переводить у нижній регістр | "HI".toLowerCase() → "hi" |
| slice() | Повертає частину рядка | "hello".slice(0,2) → "he" |
| split() | Розбиває рядок у масив за роздільником | "a,b".split(",") → ["a","b"] |
| includes() | Перевіряє, чи містить рядок підрядок | "hello".includes("ell") → true |
| trim() | Прибирає пробіли по краях рядка | " hi ".trim() → "hi" |
| replace() | Замінює частину рядка | "hi".replace("h","H") → "Hi" |
Умови і цикли
| Конструкція | Синтаксис |
|---|---|
| if / else | if (x > 5) { ... } else { ... } |
| if / else if / else | if (x>90){...} else if (x>70){...} else {...} |
| switch | switch (x) { case 1: ...; break; default: ...; } |
| for | for (let i = 0; i < 10; i++) { ... } |
| while | while (умова) { ... } |
Функції
| Вид | Синтаксис |
|---|---|
| Звичайна функція | function sum(a, b) { return a + b; } |
| Функціональний вираз | const sum = function(a, b) { return a + b; }; |
| Стрілкова функція | const sum = (a, b) => a + b; |
| Виклик функції | sum(2, 3); // 5 |
Основи DOM
| Метод / властивість | Що робить |
|---|---|
| document.querySelector() | Знаходить перший елемент за CSS-селектором |
| document.querySelectorAll() | Знаходить усі елементи за CSS-селектором |
| element.innerHTML | Читає або задає HTML-вміст елемента |
| element.textContent | Читає або задає текст всередині елемента |
| element.addEventListener() | Вішає обробник події (клік, ввід тощо) |
| element.classList.add() / remove() / toggle() | Керує CSS-класами елемента |
| element.value | Значення поля вводу (input, select) |
| element.style | Пряме керування CSS-стилями елемента |
Що далі
Хочеш розібратися глибше?
Всі ці теми детально розібрані у безкоштовному курсі JavaScript — з практичними завданнями після кожного уроку.