JavaScript: основы языка и работа с DOM

JavaScript — единственный язык, работающий в браузере нативно. Он отвечает за интерактивность любого сайта: анимации, формы, обновление данных без перезагрузки страницы. Разберём язык с основ.

Переменные: var, let, const

В современном JS используйте const по умолчанию, let — если значение меняется. Забудьте о var — он создаёт проблемы с областью видимости.

// variables.js

const name = 'Alice';     // не переопределить
let count = 0;           // можно изменить
count++;

// Деструктуризация
const [first, ...rest] = [1, 2, 3, 4];
// first = 1, rest = [2, 3, 4]

const {x, y} = {x: 10, y: 20};
// x = 10, y = 20

Функции: три способа объявления

// functions.js

// 1. Function Declaration — поднимается (hoisting)
function add(a, b) { return a + b; }

// 2. Function Expression
const multiply = function(a, b) { return a * b; };

// 3. Arrow Function — краткий синтаксис
const square = x => x ** 2;
const greet = (name) => `Привет, ${name}!`;

// Arrow function и this

Arrow functions не имеют собственного this — они берут его из окружающего контекста. Это важно при работе с методами объектов и обработчиками событий. Для методов объекта используйте обычные функции, для callback — стрелочные.

Массивы и методы

// arrays.js

const nums = [1, 2, 3, 4, 5];

// map — трансформация каждого элемента
const doubled = nums.map(x => x * 2);

// filter — только нужные элементы
const evens = nums.filter(x => x % 2 === 0);

// reduce — свёртка в одно значение
const sum = nums.reduce((acc, x) => acc + x, 0);

// Цепочка методов
const result = nums
  .filter(x => x > 2)
  .map(x => x ** 2);
// [9, 16, 25]

Работа с DOM

DOM (Document Object Model) — API браузера для управления HTML-страницей через JavaScript.

// dom.js

// Найти элемент
const btn = document.querySelector('#myButton');
const items = document.querySelectorAll('.item');

// Изменить содержимое
btn.textContent = 'Нажми меня';
btn.style.backgroundColor = '#3FB950';

// Обработчик события
btn.addEventListener('click', (event) => {
  event.preventDefault();
  console.log('Клик!');
  btn.classList.toggle('active');
});