Обновление интерфейса с помощью JavaScript
В этой главе мы начнем создавать наш проект, используя JavaScript и методы DOM для добавления тега h1.
Откройте редактор кода и создайте новый файл index.html. Внутри HTML-файла добавьте следующий код:
<html>
<body>
<div></div>
</body>
</html>Затем присвойте div уникальный id, чтобы можно было обратиться к нему позже.
<html>
<body>
<div id="app"></div>
</body>
</html>Чтобы писать JavaScript внутри HTML-файла, добавьте тег script:
<html>
<body>
<div id="app"></div>
<script type="text/javascript"></script>
</body>
</html>Теперь внутри тега script вы можете использовать метод DOM getElementById() для выбора элемента <div> по его id:
<html>
<body>
<div id="app"></div>
<script type="text/javascript">
const app = document.getElementById('app');
</script>
</body>
</html>Вы можете продолжить использовать методы DOM для создания нового элемента <h1>:
<html>
<body>
<div id="app"></div>
<script type="text/javascript">
// Выбираем div с id 'app'
const app = document.getElementById('app');
// Создаем новый элемент H1
const header = document.createElement('h1');
// Создаем текстовый узел для элемента H1
const text = 'Разрабатывай. Тестируй. Запускай.';
const headerContent = document.createTextNode(text);
// Добавляем текст в элемент H1
header.appendChild(headerContent);
// Помещаем H1 внутрь div
app.appendChild(header);
</script>
</body>
</html>Чтобы убедиться, что всё работает, откройте HTML-файл в браузере. Вы должны увидеть тег h1 с текстом 'Разрабатывай. Тестируй. Запускай.'.
HTML vs. DOM
Если посмотреть на элементы DOM в инструментах разработчика браузера, можно заметить, что DOM включает элемент <h1>. DOM страницы отличается от исходного кода — или, другими словами, от оригинального HTML-файла, который вы создали.
Это происходит потому, что HTML представляет начальное содержимое страницы, тогда как DOM отражает обновленное содержимое страницы, измененное написанным вами JavaScript-кодом.
Обновление DOM с помощью чистого JavaScript — мощный, но многословный подход. Вы написали весь этот код, чтобы добавить элемент <h1> с текстом:
<script type="text/javascript">
const app = document.getElementById('app');
const header = document.createElement('h1');
const text = 'Разрабатывай. Тестируй. Запускай.';
const headerContent = document.createTextNode(text);
header.appendChild(headerContent);
app.appendChild(header);
</script>По мере роста размера приложения или команды такой подход может становиться всё более сложным.
При таком подходе разработчики тратят много времени на написание инструкций, объясняющих компьютеру как выполнять действия. Но не было бы удобнее просто описывать что нужно показать, а компьютер сам разбирался бы как обновить DOM?
Императивное vs. декларативное программирование
Приведённый выше код — хороший пример императивного программирования. Вы описываете шаги для того, как должен обновляться пользовательский интерфейс. Но при создании интерфейсов часто предпочтительнее декларативный подход, так как он ускоряет разработку. Вместо написания методов DOM было бы удобнее, если бы разработчики могли просто объявлять что они хотят показать (в данном случае — тег h1 с текстом).
Другими словами, императивное программирование — это как давать повару пошаговые инструкции по приготовлению пиццы. Декларативное программирование — это как заказать пиццу, не задумываясь о шагах её приготовления. 🍕
React — популярная декларативная библиотека для создания пользовательских интерфейсов.
React: Декларативная библиотека для интерфейсов
Как разработчик, вы можете сообщить React, что должно произойти с пользовательским интерфейсом, а React сам разберётся, как обновить DOM.
В следующем разделе мы рассмотрим, как начать работу с React.
Дополнительные материалы: