Що робить: шукає в документі елемент з конкретним id і повертає його.

Коли використовувати: коли треба отримати конкретний унікальний елемент.

// В HTML є: <button id="myBtn">Натисни</button>

const btn = document.getElementById('myBtn')
// тепер btn — це наша кнопка
console.log(btn) // побачиш кнопку в консолі

Що робить: знаходить перший елемент який підходить під CSS-селектор. Найуніверсальніший спосіб пошуку.

// По тегу
const title = document.querySelector('h1')

// По класу (крапка перед назвою)
const card = document.querySelector('.card')

// По id (решітка перед назвою)
const btn = document.querySelector('#myBtn')

// Вкладений елемент
const link = document.querySelector('.nav a')

Що робить: повертає список всіх елементів які підходять під селектор.

// Знайти всі параграфи
const paragraphs = document.querySelectorAll('p')

// Знайти всі елементи з класом .item
const items = document.querySelectorAll('.item')

// Пройтись по кожному
items.forEach(function(item) {
  console.log(item)
})

Що робить: повертає всі елементи з вказаним CSS-класом.

const cards = document.getElementsByClassName('card')
// Без крапки! Просто назва класу

Що робить: шукає вгору по дереву DOM і знаходить найближчий батьківський елемент що підходить під селектор.

// Натиснули на кнопку всередині картки
btn.addEventListener('click', function(e) {
  const card = e.target.closest('.card')
  // card — батьківська картка кнопки
})

Що робить: читає або змінює текстовий вміст елемента (без HTML тегів).

const title = document.querySelector('h1')

// Прочитати текст
console.log(title.textContent)

// Змінити текст
title.textContent = 'Новий заголовок'

Що робить: читає або повністю замінює HTML-вміст елемента разом з тегами.

const box = document.querySelector('.box')

// Вставити HTML
box.innerHTML = '<strong>Жирний текст</strong>'

// Додати список
box.innerHTML = `
  <ul>
    <li>Пункт 1</li>
    <li>Пункт 2</li>
  </ul>
`

const link = document.querySelector('a')

// Прочитати атрибут
const href = link.getAttribute('href')

// Встановити атрибут
link.setAttribute('href', 'https://google.com')

// Для src картинки
const img = document.querySelector('img')
img.setAttribute('src', 'new-photo.jpg')

Що робить: отримує або встановлює те що введено в поле форми.

const input = document.querySelector('#email')

// Прочитати що ввів користувач
const email = input.value
console.log(email)

// Очистити поле
input.value = ''

// Створити новий параграф
const p = document.createElement('p')
p.textContent = 'Це новий параграф'

// Додати його на сторінку
document.body.appendChild(p)

// Або в конкретний контейнер
const list = document.querySelector('ul')
const li = document.createElement('li')
li.textContent = 'Новий пункт'
list.appendChild(li)

const card = document.querySelector('.card')
card.remove() // просто видалити

Найпоширеніший спосіб змінювати вигляд — через CSS класи.

const menu = document.querySelector('.menu')

// Додати клас
menu.classList.add('active')

// Видалити клас
menu.classList.remove('active')

// Переключити (є — видалить, немає — додасть)
menu.classList.toggle('open')

// Перевірити чи є клас
const isOpen = menu.classList.contains('open')
console.log(isOpen) // true або false

const box = document.querySelector('.box')

box.style.color = 'red'
box.style.backgroundColor = '#000' // camelCase!
box.style.display = 'none'     // приховати
box.style.display = 'block'    // показати

Основна команда для реакції на дії користувача.

const btn = document.querySelector('#btn')

// Синтаксис: елемент.addEventListener(подія, функція)
btn.addEventListener('click', function() {
  console.log('Натиснули!')
})

// Або стрілкова функція (коротше)
btn.addEventListener('click', () => {
  console.log('Натиснули!')
})

event — це об'єкт з інформацією про подію. event.target — конкретний елемент на який натиснули.

btn.addEventListener('click', function(event) {
  console.log(event.target)       // сам елемент
  console.log(event.target.textContent) // його текст
})

Зупиняє стандартну дію браузера — наприклад щоб форма не перезавантажувала сторінку.

const form = document.querySelector('form')

form.addEventListener('submit', function(event) {
  event.preventDefault() // зупинити перезавантаження
  console.log('Форма відправлена без перезавантаження!')
})

// Або для посилання
link.addEventListener('click', (e) => {
  e.preventDefault() // не переходити по посиланню
})

el.addEventListener('click', fn)      // одиночний клік
el.addEventListener('dblclick', fn)   // подвійний клік
el.addEventListener('mouseover', fn)  // навів мишку
el.addEventListener('mouseout', fn)   // прибрав мишку
el.addEventListener('mousemove', fn)  // рух миші
el.addEventListener('contextmenu', fn) // права кнопка

document.addEventListener('keydown', function(e) {
  console.log(e.key) // яку клавішу натиснули

  if (e.key === 'Escape') {
    // закрити модальне вікно
  }
  if (e.key === 'Enter') {
    // підтвердити дію
  }
})

const inp = document.querySelector('input')

inp.addEventListener('input', (e) => {
  console.log(e.target.value) // кожен введений символ
})

inp.addEventListener('focus', () => {
  // коли поле отримало фокус (клацнули в нього)
})

inp.addEventListener('blur', () => {
  // коли поле втратило фокус (клацнули деінде)
})

// Сторінка завантажилась
document.addEventListener('DOMContentLoaded', () => {
  // весь JS запускати тут
})

// Прокрутка
window.addEventListener('scroll', () => {
  console.log(window.scrollY) // скільки прокрутили
})

// Зміна розміру вікна
window.addEventListener('resize', () => {
  console.log(window.innerWidth)
})

const name = 'Віктор'
const age = 30
const btn = document.querySelector('#btn')

// name = 'Інше' — ПОМИЛКА! const не перевизначається

let count = 0
count = count + 1 // тепер count = 1
count++           // тепер count = 2

let isOpen = false
isOpen = true    // можна змінити

const name = 'Віктор'
const age = 30

// Старий спосіб (незручно)
const text1 = 'Привіт, ' + name + ', тобі ' + age

// Новий спосіб (зворотні лапки + ${})
const text2 = `Привіт, ${name}, тобі ${age} років`

// Можна навіть вираз вставляти
const text3 = `Наступного року буде ${age + 1}`

// Рядок (string) — текст в лапках
const name = 'Віктор'
const city = "Київ"

// Число (number)
const age = 30
const price = 99.99

// Булеве (boolean) — тільки true або false
const isLoggedIn = true
const isAdmin = false

// null — спеціально порожнє значення
const user = null

// undefined — змінна є але значення не присвоєне
let result
console.log(result) // undefined

// Перевірити тип
console.log(typeof name)  // "string"
console.log(typeof age)   // "number"

const age = 20

if (age >= 18) {
  console.log('Дорослий')
} else if (age >= 13) {
  console.log('Підліток')
} else {
  console.log('Дитина')
}

// Оператори порівняння
// ===  точна рівність (значення і тип)
// !==  не рівно
// >    більше
// <    менше
// >=   більше або рівно
// &&   і (AND)
// ||   або (OR)
// !    не (NOT)

// умова ? якщо true : якщо false
const age = 20
const status = age >= 18 ? 'дорослий' : 'неповнолітній'

// Зручно для JSX в React
// {isLoggedIn ? 'Вийти' : 'Увійти'}

// for (початок; умова; крок)
for (let i = 0; i < 5; i++) {
  console.log(i) // 0, 1, 2, 3, 4
}

// Перебрати масив
const fruits = ['яблуко', 'банан', 'груша']
for (let i = 0; i < fruits.length; i++) {
  console.log(fruits[i])
}

const fruits = ['яблуко', 'банан', 'груша']

for (const fruit of fruits) {
  console.log(fruit) // яблуко, банан, груша
}

// Оголошення
function greet(name) {
  console.log(`Привіт, ${name}!`)
}

// Виклик
greet('Віктор') // Привіт, Віктор!
greet('Олег')   // Привіт, Олег!

// Функція з return
function add(a, b) {
  return a + b
}

const sum = add(5, 3) // sum = 8

// Виконати один раз через 2 секунди
setTimeout(() => {
  console.log('Через 2 секунди')
}, 2000) // мілісекунди

// Повторювати кожні 1 секунду
const interval = setInterval(() => {
  console.log('Кожну секунду')
}, 1000)

// Зупинити повторення
clearInterval(interval)

// Звичайна функція
function add(a, b) {
  return a + b
}

// Та сама функція стрілкою
const add = (a, b) => {
  return a + b
}

// Ще коротше (якщо одна строка)
const add = (a, b) => a + b

// Один параметр — дужки необов'язкові
const double = n => n * 2

// Без параметрів
const sayHi = () => console.log('Привіт!')

// Створення масиву
const fruits = ['яблуко', 'банан', 'груша']

// Доступ по індексу (нумерація з 0!)
console.log(fruits[0]) // 'яблуко'
console.log(fruits[1]) // 'банан'

// Кількість елементів
console.log(fruits.length) // 3

// Останній елемент
console.log(fruits[fruits.length - 1]) // 'груша'

// Масив об'єктів (часто в React)
const users = [
  { name: 'Віктор', age: 30 },
  { name: 'Олег', age: 25 }
]

Проходить по кожному елементу і повертає новий масив з результатами.

const numbers = [1, 2, 3, 4]

// Помножити кожне число на 2
const doubled = numbers.map(n => n * 2)
// doubled = [2, 4, 6, 8]

// В React — рендер списку
const items = ['React', 'Vue', 'Angular']
// items.map(item => <li>{item}</li>)

Повертає новий масив тільки з елементами які відповідають умові.

const numbers = [1, 2, 3, 4, 5, 6]

// Тільки парні числа
const even = numbers.filter(n => n % 2 === 0)
// even = [2, 4, 6]

// Фільтр користувачів
const users = [{name: 'Вася', active: true}, {name: 'Петя', active: false}]
const active = users.filter(u => u.active)
// Тільки активні користувачі

const users = [
  { id: 1, name: 'Вася' },
  { id: 2, name: 'Петя' }
]

const user = users.find(u => u.id === 2)
// user = { id: 2, name: 'Петя' }

const arr = [1, 2, 3]

arr.push(4)      // [1, 2, 3, 4] — додати в кінець
arr.pop()       // [1, 2, 3] — видалити з кінця
arr.unshift(0) // [0, 1, 2, 3] — додати на початок
arr.shift()    // [1, 2, 3] — видалити з початку

const fruits = ['яблуко', 'банан', 'груша']

fruits.forEach((fruit, index) => {
  console.log(`${index}: ${fruit}`)
})
// 0: яблуко
// 1: банан
// 2: груша

const fruits = ['яблуко', 'банан']

fruits.includes('банан') // true — чи є елемент

const numbers = [1, 3, 5, 7]
numbers.some(n => n > 4)  // true — хоч один більше 4
numbers.every(n => n > 0) // true — всі більше 0

// Створення об'єкта
const user = {
  name: 'Віктор',
  age: 30,
  isAdmin: false
}

// Доступ до властивостей
console.log(user.name)    // 'Віктор'
console.log(user['age']) // 30

// Змінити значення
user.age = 31

// Додати нову властивість
user.city = 'Київ'

const user = { name: 'Віктор', age: 30, city: 'Київ' }

// Без деструктуризації
const name = user.name
const age = user.age

// З деструктуризацією (коротше)
const { name, age, city } = user

// Масив
const [first, second] = ['яблуко', 'банан']
// first = 'яблуко', second = 'банан'

// В React props часто так приймають
// function Card({ title, text }) { ... }

const str = '  Привіт Світ  '

str.length              // 15 — довжина
str.toUpperCase()      // 'ПРИВІТ СВІТ'
str.toLowerCase()      // 'привіт світ'
str.trim()             // 'Привіт Світ' (без пробілів)
str.includes('Привіт') // true
str.startsWith('При') // false (є пробіл спочатку)
str.replace('Світ', 'JS') // 'Привіт JS'
str.split(' ')         // ['Привіт', 'Світ'] — в масив
str.slice(2, 8)        // вирізати частину

// Базовий fetch
fetch('https://api.example.com/users')
  .then(response => response.json())
  .then(data => {
    console.log(data)
  })
  .catch(error => {
    console.log('Помилка:', error)
  })

fetch('https://api.example.com/users', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    name: 'Віктор',
    email: '[email protected]'
  })
})

async перед функцією означає що вона асинхронна. await зупиняє виконання і чекає на результат.

// async функція
async function getUsers() {
  try {
    const response = await fetch('https://api.example.com/users')
    const data = await response.json()
    console.log(data)
  } catch (error) {
    console.log('Помилка:', error)
  }
}

getUsers()

const promise = new Promise((resolve, reject) => {
  // Якщо все добре
  resolve('Успіх!')
  // Якщо помилка
  // reject('Помилка!')
})

promise
  .then(result => console.log(result))  // 'Успіх!'
  .catch(error => console.log(error))   // якщо помилка
  .finally(() => console.log('Кінець')) // завжди

// Зберегти
localStorage.setItem('name', 'Віктор')

// Прочитати
const name = localStorage.getItem('name')

// Видалити один ключ
localStorage.removeItem('name')

// Очистити все
localStorage.clear()

// Зберегти об'єкт (тільки рядки!)
const user = { name: 'Віктор', age: 30 }
localStorage.setItem('user', JSON.stringify(user))

// Прочитати об'єкт
const saved = JSON.parse(localStorage.getItem('user'))

console.log('Звичайний вивід')
console.error('Помилка')        // червоний
console.warn('Попередження')    // жовтий
console.info('Інформація')     // синій

// Вивести об'єкт красиво
const user = { name: 'Віктор', age: 30 }
console.log(user)

// Вивести масив як таблицю
console.table([user])

// Замір часу виконання
console.time('myTimer')
// ... якийсь код
console.timeEnd('myTimer')

window.innerWidth    // ширина вікна браузера
window.innerHeight   // висота вікна
window.scrollY       // скільки прокрутили вниз
window.scrollX       // скільки прокрутили вправо

window.location.href     // поточний URL
window.location.reload() // перезавантажити сторінку

alert('Привіт!')           // діалог
confirm('Ви впевнені?')   // true/false
prompt('Введіть ім\'я:')  // ввід тексту

// Прокрутити до верху
window.scrollTo(0, 0)

const form = document.querySelector('#myForm')
const nameInput = document.querySelector('#name')
const emailInput = document.querySelector('#email')

form.addEventListener('submit', (e) => {
  e.preventDefault() // зупинити перезавантаження

  const name = nameInput.value.trim()
  const email = emailInput.value.trim()

  // Валідація
  if (!name) {
    alert('Введіть ім\'я')
    return
  }

  console.log({ name, email })
  form.reset() // очистити форму
})