Создаем интерактивные сайты на JavaScript: руководство для новичков

Пройдите тест, узнайте какой профессии подходите

Сколько вам лет

До 18

От 18 до 24

От 25 до 34

От 35 до 44

От 45 до 49

От 50 до 54

Больше 55

Для кого эта статья:

Новички в веб-разработке
Студенты и учащиеся, желающие освоить JavaScript
Люди, интересующиеся современными фреймворками для создания веб-приложений
JavaScript превратился из простого языка для создания всплывающих окон в мощный инструмент, без которого сложно представить современную веб-разработку. Если вы устали от статичных сайтов и хотите добавить интерактивности своим проектам — вы попали по адресу. В этом руководстве я проведу вас через все этапы создания динамичного сайта с использованием JavaScript: от настройки рабочего окружения до внедрения продвинутых фреймворков. Независимо от вашего уровня подготовки, вы сможете создать что-то работающее уже сегодня. 🚀

Хотите не просто прочитать руководство, а получить структурированные знания под руководством опытных наставников? Курс Обучение веб-разработке от Skypro — это именно то, что вам нужно. Программа обучения построена от простого к сложному, с практическими заданиями на каждом этапе и постоянной обратной связью от действующих разработчиков. Вы не только освоите JavaScript, но и научитесь создавать полноценные веб-приложения, которые можно будет добавить в портфолио при трудоустройстве.

Подготовка к JavaScript-разработке: инструменты и среда

Прежде чем погрузиться в код, необходимо подготовить рабочее пространство — это фундамент, на котором будет строиться весь процесс разработки. Правильно подобранные инструменты могут значительно ускорить вашу работу и сделать процесс создания сайта более комфортным. 🛠️

Артём Савин, Senior Frontend Developer
Когда я только начинал свой путь в веб-разработке, я совершил классическую ошибку новичка — прыгнул сразу в код, не настроив должным образом среду разработки. В результате я тратил часы на поиск ошибок, которые могли быть легко обнаружены с помощью правильных инструментов. Особенно запомнился случай, когда я неделю не мог понять, почему мой JavaScript не работает в IE11. Оказалось, что я использовал современный синтаксис без транспиляции через Babel. Сейчас я всегда советую новичкам потратить время на правильную настройку окружения — это окупится сторицей в будущем.

Для начала вам понадобится текстовый редактор или интегрированная среда разработки (IDE). На рынке представлено множество вариантов, но я рекомендую обратить внимание на следующие:

Название	Тип	Преимущества	Недостатки
Visual Studio Code	IDE	Бесплатный, богатая экосистема расширений, встроенный терминал, отладка	Может потреблять много ресурсов при большом количестве расширений
WebStorm	IDE	Специализирован для JavaScript, мощный рефакторинг, интеграция с инструментами	Платный, высокие системные требования
Sublime Text	Текстовый редактор	Быстрый, легковесный, настраиваемый	Меньше функциональности без плагинов, платная лицензия
Atom	Текстовый редактор	Бесплатный, высокая настраиваемость, поддержка Git	Медленнее других редакторов, разработка прекращена

После выбора редактора необходимо установить Node.js — платформу для выполнения JavaScript вне браузера. Node.js включает в себя npm (Node Package Manager), который позволяет легко устанавливать библиотеки и инструменты. Скачать Node.js можно на официальном сайте.

Следующий шаг — настройка системы контроля версий. Git является стандартом в индустрии и позволяет отслеживать изменения в коде, а также сотрудничать с другими разработчиками. Установите Git и создайте аккаунт на GitHub, GitLab или Bitbucket.

Для тестирования вашего JavaScript-кода вам понадобятся браузеры. Я рекомендую установить как минимум:

Google Chrome — для разработки (отличные инструменты разработчика)
Firefox — для кросс-браузерного тестирования
Microsoft Edge — для проверки совместимости с движком Chromium

Расширения для браузеров также могут быть полезны:

React/Redux DevTools — если планируете использовать React
Vue.js devtools — для проектов на Vue.js
JSON Formatter — для удобного просмотра JSON-ответов от API

Наконец, настройте базовую структуру проекта:

project/
├── index.html
├── css/
│ └── styles.css
├── js/
│ └── main.js
├── assets/
│ ├── images/
│ └── fonts/
└── package.json

Такая структура обеспечит хорошую организацию кода и упростит навигацию по проекту. Теперь вы готовы приступить к непосредственному созданию сайта. 🏗️

Создание структуры сайта: HTML-каркас для JavaScript

HTML — это фундамент любого веб-сайта, и для эффективного использования JavaScript критически важно правильно выстроить HTML-структуру. Хорошо организованный HTML не только упрощает стилизацию с помощью CSS, но и облегчает взаимодействие с элементами страницы через JavaScript. 📝

Начнем с базового шаблона HTML5, который послужит основой для нашего проекта:

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Мой первый JavaScript проект</title>
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<header>
<nav>
<ul>
<li><a href="#" id="home-link">Главная</a></li>
<li><a href="#" id="about-link">О нас</a></li>
<li><a href="#" id="contact-link">Контакты</a></li>
</ul>
</nav>
</header>

<main>
<section id="content">
<h1>Добро пожаловать на мой сайт</h1>
<p>Здесь будет размещен основной контент.</p>
<button id="action-button">Нажми меня</button>
</section>
</main>

<footer>
<p>&copy; 2023 Мой JavaScript Проект</p>
</footer>

<script src="js/main.js"></script>
</body>
</html>

При создании HTML-каркаса для JavaScript важно помнить о следующих принципах:

Используйте семантические теги: <header>, <footer>, <main>, <section> и т.д. делают код более понятным и улучшают доступность сайта.
Добавляйте ID и классы: они служат "хуками" для JavaScript, позволяя легко находить и манипулировать элементами страницы.
Размещайте скрипты внизу body: это обеспечивает загрузку HTML до выполнения JavaScript, что предотвращает ошибки, связанные с попытками взаимодействия с еще не загруженными элементами.
Разделяйте структуру и поведение: HTML должен содержать только разметку, а вся логика должна быть вынесена в отдельные JS-файлы.

Следуя этим принципам, вы создадите чистую и понятную структуру, которая упростит дальнейшую работу с JavaScript. Теперь давайте рассмотрим различные способы включения JavaScript в HTML:

Метод	Пример	Преимущества	Недостатки	Рекомендуется для
Внешний файл	`<script src="script.js"></script>`	Разделение кода, кэширование, чистота	Дополнительный HTTP-запрос	Большинства проектов
Встроенный скрипт	`<script>alert('Привет!');</script>`	Нет дополнительных запросов	Смешивает HTML и JavaScript	Небольших скриптов, демо
Inline-обработчики	`<button onclick="handleClick()">`	Простота для начинающих	Смешивает структуру и поведение	Простейших прототипов
Модульные скрипты	`<script type="module" src="module.js">`	Изоляция кода, ES6 импорты	Не поддерживается старыми браузерами	Современных приложений

Для нашего проекта я рекомендую использовать внешние файлы JavaScript с атрибутом "defer", что гарантирует загрузку скриптов после разбора HTML, но до события DOMContentLoaded:

<script src="js/main.js" defer></script>

Теперь, когда мы создали прочный HTML-каркас, можно переходить к написанию JavaScript-кода, который оживит наш сайт и добавит ему интерактивности. 🎯

Добавление JavaScript-функциональности на ваш сайт

Пришло время вдохнуть жизнь в наш HTML-каркас с помощью JavaScript. Именно здесь ваш сайт начинает превращаться из статичной страницы в интерактивное приложение. JavaScript является мощным инструментом, где используется не только фронтенд, но и бэкенд-разработка через Node.js. 💻

Начнем с создания файла main.js в папке js нашего проекта. Этот файл будет содержать всю основную логику нашего сайта:

Скопировать код

// Дождемся полной загрузки DOM
document.addEventListener('DOMContentLoaded', function() {
// Получаем ссылку на элементы страницы
const actionButton = document.getElementById('action-button');
const contentSection = document.getElementById('content');

// Добавляем обработчик события для кнопки
actionButton.addEventListener('click', function() {
// Меняем содержимое раздела при клике
const newElement = document.createElement('p');
newElement.textContent = 'Вы нажали на кнопку! JavaScript работает!';
contentSection.appendChild(newElement);

// Меняем стиль кнопки
this.style.backgroundColor = '#4CAF50';
this.style.color = 'white';
});

// Обработка навигации
const navLinks = document.querySelectorAll('nav a');
navLinks.forEach(link => {
link.addEventListener('click', function(event) {
event.preventDefault(); // Отменяем стандартное поведение ссылки

// Удаляем активный класс у всех ссылок
navLinks.forEach(l => l.classList.remove('active'));

// Добавляем активный класс к нажатой ссылке
this.classList.add('active');

// Загружаем соответствующий контент
loadContent(this.id);
});
});

// Функция для загрузки контента в зависимости от выбранной ссылки
function loadContent(linkId) {
let content = '';

switch(linkId) {
case 'home-link':
content = `
<h1>Главная страница</h1>
<p>Добро пожаловать на мой первый JavaScript сайт!</p>
<p>Используйте навигацию для перехода между разделами.</p>
`;
break;
case 'about-link':
content = `
<h1>О нас</h1>
<p>Этот сайт создан в учебных целях для демонстрации возможностей JavaScript.</p>
<p>Здесь вы можете увидеть примеры работы с DOM, обработки событий и многое другое.</p>
`;
break;
case 'contact-link':
content = `
<h1>Контакты</h1>
<p>Свяжитесь с нами через форму ниже:</p>
<form id="contact-form">
<div>
<label for="name">Имя:</label>
<input type="text" id="name" name="name" required>
</div>
<div>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
</div>
<div>
<label for="message">Сообщение:</label>
<textarea id="message" name="message" required></textarea>
</div>
<button type="submit">Отправить</button>
</form>
`;

// После загрузки формы добавляем обработчик отправки
setTimeout(() => {
const contactForm = document.getElementById('contact-form');
if (contactForm) {
contactForm.addEventListener('submit', function(e) {
e.preventDefault();
alert('Форма отправлена! В реальном приложении данные были бы отправлены на сервер.');
this.reset();
});
}
}, 100);
break;
default:
content = '<h1>Страница не найдена</h1>';
}

contentSection.innerHTML = content;
}

// Загружаем главную страницу по умолчанию
loadContent('home-link');
document.getElementById('home-link').classList.add('active');
});

Давайте разберем ключевые аспекты этого кода:

DOMContentLoaded: Мы использовали этот обработчик событий, чтобы убедиться, что наш код выполняется только после того, как DOM полностью загружен.
Обработка событий: Мы добавили слушателей событий для кнопки и навигационных ссылок, чтобы реагировать на взаимодействие пользователя.
Динамическое содержимое: С помощью JavaScript мы динамически меняем содержимое страницы без необходимости перезагрузки.
Форма контактов: Мы создали простую форму с валидацией и обработкой отправки.

Теперь давайте рассмотрим некоторые распространенные сценарии использования JavaScript на веб-сайтах:

Валидация форм: Проверка правильности введенных пользователем данных перед отправкой на сервер.
Анимации и визуальные эффекты: Плавные переходы, появление/исчезновение элементов, изменение стилей.
Асинхронные запросы (AJAX): Получение данных с сервера без перезагрузки страницы.
Управление состоянием UI: Открытие/закрытие модальных окон, переключение вкладок, изменение видимости элементов.
Геолокация: Определение местоположения пользователя для персонализированного контента.

Дмитрий Колесников, Frontend Team Lead
Я часто сталкиваюсь с новичками, которые пытаются использовать jQuery в 2023 году, потому что нашли готовые решения в интернете. Однако современный JavaScript предлагает все те же функции нативно, причем с лучшей производительностью. Недавно наша команда получила проект по модернизации старого сайта интернет-магазина. Клиент жаловался на медлительность интерфейса. При анализе кода мы обнаружили множество тяжелых jQuery-плагинов, которые можно было заменить несколькими строками ванильного JavaScript. После рефакторинга сайт стал загружаться на 70% быстрее, а конверсия выросла на 15%. Это отличный пример того, как важно использовать современные подходы вместо устаревших библиотек только потому, что с ними "проще".

Давайте расширим наш пример, добавив асинхронный запрос для получения данных с сервера:

Скопировать код

// Добавьте эту функцию в ваш основной код
function fetchData() {
const loadingIndicator = document.createElement('div');
loadingIndicator.textContent = 'Загрузка данных...';
loadingIndicator.id = 'loading';
contentSection.appendChild(loadingIndicator);

// Используем Fetch API для получения данных
fetch('https://jsonplaceholder.typicode.com/posts/1')
.then(response => {
if (!response.ok) {
throw new Error('Сетевая ошибка');
}
return response.json();
})
.then(data => {
// Обрабатываем полученные данные
const dataElement = document.createElement('div');
dataElement.innerHTML = `
<h2>${data.title}</h2>
<p>${data.body}</p>
`;

// Удаляем индикатор загрузки
const loadingElement = document.getElementById('loading');
if (loadingElement) {
loadingElement.remove();
}

contentSection.appendChild(dataElement);
})
.catch(error => {
console.error('Ошибка при получении данных:', error);

const errorElement = document.createElement('div');
errorElement.textContent = 'Произошла ошибка при загрузке данных. Пожалуйста, попробуйте позже.';
errorElement.style.color = 'red';

// Удаляем индикатор загрузки
const loadingElement = document.getElementById('loading');
if (loadingElement) {
loadingElement.remove();
}

contentSection.appendChild(errorElement);
});
}

// Добавьте кнопку для вызова этой функции
const dataButton = document.createElement('button');
dataButton.textContent = 'Загрузить данные';
dataButton.id = 'data-button';
dataButton.addEventListener('click', fetchData);
contentSection.appendChild(dataButton);

Этот код демонстрирует, как использовать Fetch API для асинхронного получения данных с сервера, обработки успешных ответов и ошибок, а также обновления UI в зависимости от результата. 🔄

С этими основными навыками вы уже можете создавать интерактивные веб-сайты. В следующем разделе мы углубимся в DOM-манипуляции для создания еще более сложных интерактивных элементов. 🚀

Интерактивные элементы с помощью DOM-манипуляций в JS

DOM (Document Object Model) — это программный интерфейс для HTML и XML документов, который представляет страницу в виде дерева узлов, что позволяет JavaScript взаимодействовать с элементами страницы и изменять их. Мастерство в DOM-манипуляциях — ключевой навык для создания по-настоящему интерактивных веб-приложений. 🌳

Рассмотрим наиболее распространенные методы для работы с DOM:

Поиск элементов: document.getElementById(), document.querySelector(), document.querySelectorAll()
Создание элементов: document.createElement(), element.cloneNode()
Модификация элементов: element.innerHTML, element.textContent, element.setAttribute()
Управление структурой: parent.appendChild(), parent.insertBefore(), element.remove()
Работа с классами: element.classList.add(), element.classList.remove(), element.classList.toggle()

Давайте создадим несколько интерактивных элементов, которые демонстрируют мощь DOM-манипуляций:

Скопировать код

// Добавьте этот код в ваш main.js
function createInteractiveElements() {
// Очищаем текущее содержимое
contentSection.innerHTML = `
<h1>Интерактивные элементы с DOM-манипуляциями</h1>
<div class="interactive-container">
<div class="tabs">
<div class="tab-buttons">
<button class="tab-btn active" data-tab="tab1">Вкладка 1</button>
<button class="tab-btn" data-tab="tab2">Вкладка 2</button>
<button class="tab-btn" data-tab="tab3">Вкладка 3</button>
</div>
<div class="tab-content">
<div id="tab1" class="tab-pane active">
<h3>Содержимое вкладки 1</h3>
<p>Это содержимое первой вкладки. Вкладки – отличный пример DOM-манипуляций.</p>
</div>
<div id="tab2" class="tab-pane">
<h3>Содержимое вкладки 2</h3>
<p>Это содержимое второй вкладки. Переключение происходит без перезагрузки страницы.</p>
</div>
<div id="tab3" class="tab-pane">
<h3>Содержимое вкладки 3</h3>
<p>Это содержимое третьей вкладки. Попробуйте создать свои собственные вкладки!</p>
</div>
</div>
</div>

<div class="accordion-container">
<h2>Аккордеон</h2>
<div class="accordion">
<div class="accordion-item">
<div class="accordion-header">Раздел 1</div>
<div class="accordion-content">
<p>Содержимое первого раздела аккордеона. Аккордеоны полезны для экономии места.</p>
</div>
</div>
<div class="accordion-item">
<div class="accordion-header">Раздел 2</div>
<div class="accordion-content">
<p>Содержимое второго раздела аккордеона. Можно открывать и закрывать разделы.</p>
</div>
</div>
<div class="accordion-item">
<div class="accordion-header">Раздел 3</div>
<div class="accordion-content">
<p>Содержимое третьего раздела аккордеона. Все это работает благодаря JavaScript!</p>
</div>
</div>
</div>
</div>

<div class="todo-app">
<h2>Список задач</h2>
<div class="todo-container">
<div class="todo-header">
<input type="text" id="todo-input" placeholder="Добавьте новую задачу">
<button id="add-todo">Добавить</button>
</div>
<ul id="todo-list">
<!-- Задачи будут добавляться сюда динамически -->
</ul>
</div>
</div>
</div>
`;

// Инициализируем вкладки
const tabButtons = document.querySelectorAll('.tab-btn');
tabButtons.forEach(button => {
button.addEventListener('click', function() {
// Удаляем активный класс у всех кнопок и контента
document.querySelectorAll('.tab-btn').forEach(btn => btn.classList.remove('active'));
document.querySelectorAll('.tab-pane').forEach(pane => pane.classList.remove('active'));

// Добавляем активный класс к текущей кнопке
this.classList.add('active');

// Показываем соответствующий контент
const tabId = this.getAttribute('data-tab');
document.getElementById(tabId).classList.add('active');
});
});

// Инициализируем аккордеон
const accordionHeaders = document.querySelectorAll('.accordion-header');
accordionHeaders.forEach(header => {
header.addEventListener('click', function() {
// Получаем родительский элемент
const accordionItem = this.parentElement;

// Переключаем активное состояние
accordionItem.classList.toggle('active');

// Получаем контент
const content = this.nextElementSibling;

// Если элемент активен, показываем контент, иначе скрываем
if (accordionItem.classList.contains('active')) {
content.style.maxHeight = content.scrollHeight + 'px';
} else {
content.style.maxHeight = '0';
}
});
});

// Инициализируем список задач
const todoInput = document.getElementById('todo-input');
const addTodoButton = document.getElementById('add-todo');
const todoList = document.getElementById('todo-list');

addTodoButton.addEventListener('click', function() {
const todoText = todoInput.value.trim();
if (todoText !== '') {
addTodoItem(todoText);
todoInput.value = '';
}
});

todoInput.addEventListener('keypress', function(e) {
if (e.key === 'Enter') {
addTodoButton.click();
}
});

function addTodoItem(text) {
const todoItem = document.createElement('li');
todoItem.className = 'todo-item';

const checkbox = document.createElement('input');
checkbox.type = 'checkbox';
checkbox.addEventListener('change', function() {
todoText.style.textDecoration = this.checked ? 'line-through' : 'none';
});

const todoText = document.createElement('span');
todoText.textContent = text;

const deleteButton = document.createElement('button');
deleteButton.textContent = 'Удалить';
deleteButton.className = 'delete-todo';
deleteButton.addEventListener('click', function() {
todoItem.remove();
});

todoItem.appendChild(checkbox);
todoItem.appendChild(todoText);
todoItem.appendChild(deleteButton);

todoList.appendChild(todoItem);
}

// Добавляем CSS для наших интерактивных элементов
const styleElement = document.createElement('style');
styleElement.textContent = `
.interactive-container {
margin: 20px 0;
}

/* Стили для вкладок */
.tabs {
margin-bottom: 30px;
}

.tab-buttons {
display: flex;
border-bottom: 1px solid #ddd;
}

.tab-btn {
padding: 10px 15px;
border: none;
background: none;
cursor: pointer;
}

.tab-btn.active {
border-bottom: 3px solid #4CAF50;
font-weight: bold;
}

.tab-pane {
display: none;
padding: 20px;
border: 1px solid #ddd;
border-top: none;
}

.tab-pane.active {
display: block;
}

/* Стили для аккордеона */
.accordion-container {
margin-bottom: 30px;
}

.accordion-item {
margin-bottom: 5px;
border: 1px solid #ddd;
}

.accordion-header {
padding: 15px;
background-color: #f5f5f5;
cursor: pointer;
font-weight: bold;
}

.accordion-content {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease;
}

.accordion-item.active .accordion-header {
background-color: #e0e0e0;
}

.accordion-item.active .accordion-content {
padding: 15px;
border-top: 1px solid #ddd;
}

/* Стили для списка задач */
.todo-app {
margin-bottom: 30px;
}

.todo-container {
border: 1px solid #ddd;
padding: 20px;
}

.todo-header {
display: flex;
margin-bottom: 15px;
}

#todo-input {
flex-grow: 1;
padding: 8px;
border: 1px solid #ddd;
}

#add-todo {
padding: 8px 15px;
background-color: #4CAF50;
color: white;
border: none;
cursor: pointer;
}

#todo-list {
list-style-type: none;
padding: 0;
}

.todo-item {
display: flex;
align-items: center;
padding: 10px;
border-bottom: 1px solid #eee;
}

.todo-item span {
flex-grow: 1;
margin: 0 10px;
}

.delete-todo {
padding: 5px 10px;
background-color: #f44336;
color: white;
border: none;
cursor: pointer;
}
`;
document.head.appendChild(styleElement);
}

// Добавляем кнопку в навигацию
const interactiveNavLink = document.createElement('li');
interactiveNavLink.innerHTML = '<a href="#" id="interactive-link">Интерактивные элементы</a>';
document.querySelector('nav ul').appendChild(interactiveNavLink);

document.getElementById('interactive-link').addEventListener('click', function(event) {
event.preventDefault();

// Удаляем активный класс у всех ссылок
document.querySelectorAll('nav a').forEach(link => link.classList.remove('active'));

// Добавляем активный класс текущей ссылке
this.classList.add('active');

// Создаем интерактивные элементы
createInteractiveElements();
});

В этом примере мы создали три типа интерактивных элементов:

Вкладки: Позволяют переключаться между различными блоками контента без перезагрузки страницы.
Аккордеон: Компактно представляет информацию, раскрывая только выбранные разделы.
Список задач (Todo List): Демонстрирует создание, чтение и удаление элементов (базовые операции CRUD).

Эти компоненты демонстрируют основные принципы DOM-манипуляций:

Динамическое изменение стилей (toggle класса active)
Обработка пользовательского ввода (добавление новых задач)
Создание и удаление элементов (добавление и удаление задач)
Делегирование событий (обработка кликов на заголовках аккордеона)

DOM-манипуляции являются фундаментом для создания интерактивных веб-интерфейсов, но для крупных проектов ручное управление DOM может стать сложным и неэффективным. Именно поэтому разработчики часто обращаются к JavaScript-фреймворкам, которые абстрагируют и оптимизируют работу с DOM. В следующем разделе мы рассмотрим, как такие фреймворки могут упростить разработку сложных интерактивных приложений. 🧩

JavaScript-фреймворки для расширения возможностей сайта

По мере роста сложности вашего проекта ручное управление DOM-элементами может стать утомительным и подверженным ошибкам. Здесь на помощь приходят JavaScript-фреймворки и библиотеки, которые упрощают разработку, обеспечивают лучшую организацию кода и повышают производительность. 🚀

Современные JavaScript-фреймворки предлагают мощные инструменты, где используется декларативный подход к построению пользовательских интерфейсов, управлению состоянием и компонентной архитектуре.

Рассмотрим наиболее популярные фреймворки и их особенности:

Фреймворк	Особенности	Порог входа	Экосистема	Лучше всего подходит для
React	Виртуальный DOM, компонентный подход, JSX	Средний	Обширная (Redux, Next.js, React Router)	Сложные SPA, масштабируемые проекты
Vue.js	Прогрессивность, двустороннее связывание, шаблоны	Низкий	Хорошая (Vuex, Vue Router, Nuxt.js)	Быстрое прототипирование, плавный переход от простых к сложным приложениям
Angular	Полноценный фреймворк, TypeScript, двустороннее связывание	Высокий	Встроенная (RxJS, Angular Material)	Крупные корпоративные приложения, где важна строгая типизация
Svelte	Компиляция во время сборки, минимальный рантайм	Низкий	Растущая (SvelteKit)	Производительные приложения, небольшие команды

Давайте рассмотрим, как можно перенести наш список задач из предыдущего раздела на React:

Скопировать код

// App.js
import React, { useState } from 'react';
import './App.css';

function TodoApp() {
const [tasks, setTasks] = useState([]);
const [inputValue, setInputValue] = useState('');

const addTask = () => {
if (inputValue.trim() !== '') {
setTasks([...tasks, { id: Date.now(), text: inputValue, completed: false }]);
setInputValue('');
}
};

const toggleTask = (id) => {
setTasks(
tasks.map(task =>
task.id === id ? { ...task, completed: !task.completed } : task
)
);
};

const deleteTask = (id) => {
setTasks(tasks.filter(task => task.id !== id));
};

return (
<div className="todo-app">
<h2>Список задач</h2>
<div className="todo-container">
<div className="todo-header">
<input
type="text"
value={inputValue}
onChange={(e) => setInputValue(e.target.value)}
onKeyPress={(e) => e.key === 'Enter' && addTask()}
placeholder="Добавьте новую задачу"
/>
<button onClick={addTask}>Добавить</button>
</div>
<ul className="todo-list">
{tasks.map(task => (
<li key={task.id} className="todo-item">
<input
type="checkbox"
checked={task.completed}
onChange={() => toggleTask(task.id)}
/>
<span style={{ textDecoration: task.completed ? 'line-through' : 'none' }}>
{task.text}
</span>
<button onClick={() => deleteTask(task.id)} className="delete-todo">
Удалить
</button>
</li>
))}
</ul>
</div>
</div>
);
}

export default TodoApp;

Обратите внимание, насколько более декларативным стал код с использованием React. Вместо прямых манипуляций с DOM, мы описываем, как должен выглядеть интерфейс в зависимости от состояния приложения.

Аналогично, вот как можно реализовать тот же компонент с использованием Vue.js:

HTML

Скопировать код

<!-- TodoApp.vue -->
<template>
<div class="todo-app">
<h2>Список задач</h2>
<div class="todo-container">
<div class="todo-header">
<input
type="text"
v-model="newTask"
@keyup.enter="addTask"
placeholder="Добавьте новую задачу"
/>
<button @click="addTask">Добавить</button>
</div>
<ul class="todo-list">
<li v-for="task in tasks" :key="task.id" class="todo-item">
<input
type="checkbox"
v-model="task.completed"
/>
<span :style="{ textDecoration: task.completed ? 'line-through' : 'none' }">
{{ task.text }}
</span>
<button @click="deleteTask(task.id)" class="delete-todo">
Удалить
</button>
</li>
</ul>
</div>
</div>
</template>

<script>
export default {
data() {
return {
tasks: [],
newTask: ''
};
},
methods: {
addTask() {
if (this.newTask.trim() !== '') {
this.tasks.push({
id: Date.now(),
text: this.newTask,
completed: false
});
this.newTask = '';
}
},
deleteTask(id) {
this.tasks = this.tasks.filter(task => task.id !== id);
}
}
};
</script>

При выборе фреймворка для вашего проекта учитывайте следующие факторы:

Размер и сложность проекта: Для небольших проектов может хватить ванильного JavaScript или легковесного фреймворка.
Опыт команды: Выбирайте технологию, с которой ваша команда уже знакома или которую легко освоить.
Производительность: Для приложений, требующих высокой производительности, обратите внимание на Svelte или оптимизированный React с использованием мемоизации.
Экосистема и поддержка сообщества: Популярные фреймворки имеют больше готовых компонентов и решений распространенных проблем.
Требования к SEO: Для сайтов, где важна индексация поисковиками, рассмотрите серверный рендеринг (SSR) с Next.js, Nuxt.js или Angular Universal.

Использование фреймворка не только упрощает разработку, но и помогает следовать лучшим практикам. Вот некоторые преимущества:

Компонентная архитектура: Позволяет разбить интерфейс на независимые, переиспользуемые компоненты.
Реактивность: Автоматическое обновление UI при изменении данных.
Управление состоянием: Централизованное хранение и изменение данных приложения (Redux, Vuex, NgRx).
Роутинг: Создание многостраничных SPA без перезагрузки страницы.
Тестирование: Фреймворки обычно имеют хорошую поддержку инструментов для тестирования.

Для начала работы с выбранным фреймворком, используйте официальные инструменты для создания проектов:

React: Create React App или Vite
Vue.js: Vue CLI или Vite
Angular: Angular CLI
Svelte: SvelteKit

Освоение JavaScript-фреймворков откроет перед вами новые горизонты в веб-разработке и позволит создавать сложные, интерактивные приложения с чистой архитектурой и высокой производительностью. 🔥

Итак, мы прошли полный путь от настройки среды разработки до создания интерактивных элементов и знакомства с современными JavaScript-фреймворками. JavaScript давно перестал быть просто языком для добавления простых эффектов на веб-страницы — это мощная технология, лежащая в основе большинства современных веб-приложений. Освоив принципы, изложенные в этом руководстве, вы получили прочный фундамент для дальнейшего роста как веб-разработчик. Самое важное — продолжать практиковаться, создавать собственные проекты и не бояться экспериментировать с новыми технологиями. Именно так формируется тот бесценный опыт, который отличает профессионала от новичка.

Читайте также

Проверь как ты усвоил материалы статьи

Пройди тест и узнай насколько ты лучше других читателей

Какой язык программирования является основным для создания интерактивных элементов на веб-сайтах?

1 / 5

Свежие материалы

Как включить и настроить двухфакторную аутентификацию (2FA)

6 сентября 2024

Как использовать Google Authenticator для двухфакторной аутентификации в Fortnite

6 сентября 2024

Установка и настройка альтернативных IDE для Swift

6 сентября 2024

Создаем интерактивные сайты на JavaScript: руководство для новичков

Подготовка к JavaScript-разработке: инструменты и среда

Создание структуры сайта: HTML-каркас для JavaScript

Добавление JavaScript-функциональности на ваш сайт

Интерактивные элементы с помощью DOM-манипуляций в JS

JavaScript-фреймворки для расширения возможностей сайта

Загрузка...