Представьте, что у вас есть красивый, стильный дом (HTML + CSS), но в нём ничего не работает: выключатели не включают свет, двери не открываются, вода не течёт. JavaScript — это электричество, сантехника и умные системы, которые делают дом жилым и удобным.
Что такое JavaScript и зачем он нужен?
JavaScript — это язык программирования для веб-разработки. В отличие от HTML (структура) и CSS (внешний вид), JavaScript добавляет интерактивность, логику и динамическое поведение.
Интерактивность
Кнопки, формы, слайдеры, модальные окна — всё это работает на JavaScript
Динамика
Контент может меняться без перезагрузки страницы
Работа с данными
Отправка форм, валидация, работа с API, localStorage
Важно: JavaScript работает в браузере пользователя (клиентская часть), но также может работать и на сервере (Node.js).
Основы синтаксиса: переменные и типы данных
JavaScript имеет простой и понятный синтаксис. Давайте начнём с основ:
// Переменные (современный способ)
let name = "Алексей";
const age = 30;
var oldWay = "устаревший способ"; // не используйте var
// Типы данных
let string = "Текст в кавычках";
let number = 42;
let boolean = true; // или false
let array = [1, 2, 3, "текст", true];
let object = {
name: "Иван",
age: 25,
isAdmin: true
};
// Вывод в консоль (для отладки)
console.log("Привет, " + name);
console.log(`Мне ${age} лет`); // шаблонные строкиСовременный подход: Всегда используйте const для значений, которые не меняются, и let для переменных, которые будут изменяться. Избегайте устаревшего var.
Функции: многократное использование кода
Функции — это фундаментальный строительный блок JavaScript. Они позволяют писать код один раз и использовать его много раз.
// 1. Обычная функция (Function Declaration)
function greet(name) {
return `Привет, ${name}!`;
}
// 2. Функциональное выражение (Function Expression)
const greet = function(name) {
return `Привет, ${name}!`;
};
// 3. Стрелочная функция (современный способ)
const greet = (name) => {
return `Привет, ${name}!`;
};
// 4. Сокращенная стрелочная функция
const greet = name => `Привет, ${name}!`;
// Использование функции
console.log(greet("Мария")); // Привет, Мария!
// Функция с несколькими параметрами
const calculateTotal = (price, quantity) => {
return price * quantity;
};Работа с DOM: как взаимодействовать со страницей
DOM (Document Object Model) — это программное представление HTML-страницы. JavaScript может изменять DOM, чтобы динамически обновлять контент.
// 1. Поиск элементов
const button = document.getElementById('myButton');
const items = document.querySelectorAll('.item');
const header = document.querySelector('header');
// 2. Изменение контента
button.textContent = 'Нажми меня';
header.innerHTML = 'Новый заголовок
';
// 3. Изменение стилей
button.style.backgroundColor = 'blue';
button.style.color = 'white';
button.style.padding = '10px 20px';
// 4. Добавление/удаление классов
button.classList.add('active');
button.classList.remove('disabled');
button.classList.toggle('hidden'); // переключает класс
// 5. Создание новых элементов
const newDiv = document.createElement('div');
newDiv.textContent = 'Я новый элемент!';
document.body.appendChild(newDiv);
// 6. Удаление элементов
const elementToRemove = document.getElementById('oldElement');
elementToRemove.remove();Безопасность: Будьте осторожны с innerHTML — он может быть уязвим для XSS-атак. Для простого текста используйте textContent.
События: реагируем на действия пользователя
События — это основа интерактивности. Клики, наведение мыши, ввод текста, отправка форм — всё это события, на которые JavaScript может реагировать.
// 1. Находим элемент
const button = document.getElementById('myButton');
const input = document.getElementById('myInput');
const form = document.getElementById('myForm');
// 2. Добавляем обработчик события клика
button.addEventListener('click', function() {
alert('Кнопка нажата!');
});
// 3. Событие ввода текста
input.addEventListener('input', function(event) {
console.log('Пользователь вводит:', event.target.value);
});
// 4. Событие отправки формы
form.addEventListener('submit', function(event) {
event.preventDefault(); // предотвращаем перезагрузку страницы
console.log('Форма отправлена!');
// здесь будет код для отправки данных на сервер
});
// 5. Событие наведения мыши
button.addEventListener('mouseenter', function() {
button.style.backgroundColor = 'darkblue';
});
button.addEventListener('mouseleave', function() {
button.style.backgroundColor = 'blue';
});
// 6. Современная стрелочная функция
button.addEventListener('click', () => {
console.log('Стрелочная функция работает!');
});addEventListener
Современный способ добавления обработчиков. Можно добавить несколько обработчиков на одно событие.
event.preventDefault()
Отменяет стандартное поведение браузера (например, отправку формы или переход по ссылке).
event.target
Ссылка на элемент, который вызвал событие. Полезно для обработки событий на нескольких элементах.
Делегирование событий
Добавление обработчика на родителя для обработки событий на динамически созданных дочерних элементах.
Практика: создаем интерактивную галерею
Давайте создадим простую интерактивную галерею изображений, используя изученные техники:
<div class="gallery">
<div class="gallery-main">
<img id="mainImage" src="image1.jpg" alt="Основное изображение">
</div>
<div class="gallery-thumbnails">
<img class="thumbnail active" src="image1.jpg" data-full="image1.jpg" alt="Изображение 1">
<img class="thumbnail" src="image2-thumb.jpg" data-full="image2.jpg" alt="Изображение 2">
<img class="thumbnail" src="image3-thumb.jpg" data-full="image3.jpg" alt="Изображение 3">
<img class="thumbnail" src="image4-thumb.jpg" data-full="image4.jpg" alt="Изображение 4">
</div>
<div class="gallery-controls">
<button id="prevBtn">◀ Назад</button>
<button id="nextBtn">Вперёд ▶</button>
</div>
</div>// Находим все необходимые элементы
const mainImage = document.getElementById('mainImage');
const thumbnails = document.querySelectorAll('.thumbnail');
const prevBtn = document.getElementById('prevBtn');
const nextBtn = document.getElementById('nextBtn');
let currentIndex = 0;
// Функция для обновления основного изображения
function updateMainImage(index) {
const thumbnail = thumbnails[index];
const fullImage = thumbnail.getAttribute('data-full');
// Обновляем основное изображение
mainImage.src = fullImage;
mainImage.alt = thumbnail.alt;
// Обновляем активный класс у миниатюр
thumbnails.forEach(thumb => thumb.classList.remove('active'));
thumbnail.classList.add('active');
// Обновляем текущий индекс
currentIndex = index;
}
// Обработчики для миниатюр
thumbnails.forEach((thumbnail, index) => {
thumbnail.addEventListener('click', () => {
updateMainImage(index);
});
});
// Кнопка "Назад"
prevBtn.addEventListener('click', () => {
let newIndex = currentIndex - 1;
if (newIndex < 0) {
newIndex = thumbnails.length - 1; // переходим к последнему
}
updateMainImage(newIndex);
});
// Кнопка "Вперёд"
nextBtn.addEventListener('click', () => {
let newIndex = currentIndex + 1;
if (newIndex >= thumbnails.length) {
newIndex = 0; // переходим к первому
}
updateMainImage(newIndex);
});
// Автопрокрутка каждые 5 секунд
setInterval(() => {
let newIndex = currentIndex + 1;
if (newIndex >= thumbnails.length) {
newIndex = 0;
}
updateMainImage(newIndex);
}, 5000);Что дальше? Современный JavaScript
Освоив основы JavaScript, вы можете перейти к более продвинутым концепциям и современным инструментам:
ES6+ (современный синтаксис)
Стрелочные функции, шаблонные строки, деструктуризация, spread/rest операторы, классы.
Асинхронность
Promise, async/await для работы с API, таймерами и операциями, требующими времени.
Фреймворки и библиотеки
React, Vue, Angular для создания сложных одностраничных приложений (SPA).
Инструменты разработки
Webpack, npm, ESLint, TypeScript для профессиональной разработки.
Ключевые выводы:
const и let вместо var
JavaScript — это мост между статичным контентом и полноценным веб-приложением. Он превращает посетителя в активного пользователя. Начните с простых скриптов, постепенно усложняйте задачи, и вскоре вы сможете создавать интерактивные интерфейсы, которые удивят и ваших пользователей, и вас самих.
Нужен интерактивный сайт с современными функциями?
Digital Greatness создаёт сайты с продуманной JavaScript-логикой: формы обратной связи, интерактивные калькуляторы, динамические фильтры и многое другое.
Обсудить интерактивные возможности