Упражнение. Включение интерактивных возможностей с использованием JavaScript

10 мин

JavaScript (или ECMAScript) — это язык программирования, с помощью которого вы можете добавлять на веб-страницы интерактивные возможности.

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

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

Связывание с JavaScript

Как и при использовании CSS, вы можете добавить JavaScript непосредственно в HTML-файл, однако рекомендуется размещать код JavaScript в отдельном файле. Добавление кода JavaScript в отдельный файл упрощает его повторное использование на нескольких веб-страницах. Например, вы можете создать всплывающее оповещение, добавив следующий код в любое место в тексте веб-страниц:

<script>alert('Hello World')</script>

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

Тег <script> скрипта HTML позволяет связаться с внешним файлом JavaScript, который позволяет настроить веб-приложение в этом упражнении.

В Visual Studio Code откройте index.html файл.
Найдите закрывающий </body> элемент и поместите курсор на новую строку над ней. Введите script:src и нажмите клавишу ВВОД. В код добавляются открывающие и закрывающие теги для <script> элемента.
Измените <script> элемент, чтобы загрузить app.js файл, как показано в следующем примере. Убедитесь, что он расположен после закрывающего </ul> элемента списка.
```
...
<ul>
  <li class="list">Add visual styles</li>
  <li class="list">Add light and dark themes</li>
  <li>Enable switching the theme</li>
</ul>
<script src="app.js"></script>
...
```

Элемент можно поместить <script> в <head> или в другом месте.<body> Однако при <script> вводе элемента в конец <body> раздела все содержимое страницы сначала отображается на экране перед загрузкой скрипта.

Добавление отказоустойчивости

В HTML-файле добавьте элемент <noscript> после закрывающего тега </script>, который можно использовать для отображения сообщения при деактивации JavaScript.
```
<script src="app.js"></script>
<noscript>You need to enable JavaScript to view the full site.</noscript>
```
Добавление элемента <noscript> представляет собой пример обеспечения отказоустойчивости или постепенного уменьшения возможностей. При использовании <noscript> элемента код может обнаруживать и планировать, когда функция не поддерживается или недоступна.

Установка строгого режима

JavaScript был разработан для упрощения обучения и позволяет разработчику делать определенные ошибки. Например, JavaScript не выдает ошибку при использовании неправильной переменной, а вместо этого создает новую глобальную. При запуске обучения JavaScript с меньшим количеством ошибок удобно. Однако это может привести к написанию кода, который сложнее для браузеров оптимизировать и труднее для отладки.

Переключитесь на строгий режим, чтобы получать полезные сообщения при возникновении ошибок.

В Visual Studio Code откройте app.js файл и введите следующее:
```
'use strict';
```

Добавление кнопки

Теперь вам нужно определить способ, с помощью которого пользователь будет переключаться между светлой и темной темами на странице. В этом упражнении вы реализуете эту функцию с помощью элемента HTML <button> .

В HTML-файле (index.html) добавьте <button> элемент. Поместите кнопку внутри <div> элемента и добавьте ее сразу после окончания списка (</ul>).
```
...
<ul>
  <li class="list">Add visual styles</li>
  <li class="list">Add light and dark themes</li>
  <li>Enable switching the theme</li>
</ul>
<div>
  <button class="btn">Dark</button>
</div>
<script src="app.js"></script>
...
```
Обратите внимание, что <button> элемент в этом примере имеет атрибут класса , который можно использовать для применения стилей CSS.
Сохраните изменения в HTML-файле с помощью сочетания клавиш Control+S в Windows или Command+S в macOS.
В CSS-файле (main.css) добавьте новое правило с селектором .btn классов для кнопки HTML. Чтобы цвета кнопки отличались от общих цветов светлой или темной темы, задайте свойства color и background-color в этом правиле. При отображении страницы эти .btn свойства переопределяют свойства по умолчанию, заданные в правиле body CSS-файла.
```
.btn {
  color: var(--btnFontColor);
  background-color: var(--btnBg);
}
```
Затем измените правило .btn, добавив некоторые стили, определяющие размер, форму, внешний вид и расположение кнопки. Следующая CSS создает круглую кнопку справа от заголовка страницы.
```
.btn {
  position: absolute;
  top: 20px;
  left: 250px;
  height: 50px;
  width: 50px;
  border-radius: 50%;
  border: none;
  color: var(--btnFontColor);
  background-color: var(--btnBg);
}
```
Затем обновите CSS для светлой и темной темы. Определите несколько новых переменных, --btnBg и --btnFontColor, чтобы указать специфические для кнопки цвет фона и шрифта.
```
.light-theme {
  --bg: var(--green);
  --fontColor: var(--black);
  --btnBg: var(--black);
  --btnFontColor: var(--white);
}

.dark-theme {
  --bg: var(--black);
  --fontColor: var(--green);
  --btnBg: var(--white);
  --btnFontColor: var(--black);
}
```
Сохраните изменения в CSS-файле с помощью сочетания клавиш Control+S в Windows или Command+S в macOS.

Добавьте обработчик событий

Чтобы при нажатии кнопки выполнялось определенное действие, в файл JavaScript нужно добавить обработчик событий. Обработчик событий — это способ запуска функции JavaScript при возникновении события на странице. Для кнопки добавим обработчик событий для события click. Функция обработчика событий выполняется при возникновении события click.

Перед добавлением обработчика событий нужно получить ссылку на элемент кнопки.

В файле JavaScript (app.js) используйте document.querySelector для получения ссылки на кнопку.
```
const switcher = document.querySelector('.btn');
```
Функция document.querySelector использует селекторы CSS, как те, которые использовались в файле CSS. switcher теперь является ссылкой на кнопку на странице.
Затем добавим обработчик событий для события click. В следующем коде вы добавите прослушиватель события click и определите функцию обработчика событий, выполняемую браузером при возникновении click события.
```
switcher.addEventListener('click', function() {
    document.body.classList.toggle('light-theme');
    document.body.classList.toggle('dark-theme');
});
```

В приведенном выше коде метод toggle используется для изменения атрибута класса элемента <body>. Этот метод автоматически добавляет или удаляет классы light-theme или dark-theme. Этот код применяет темные стили вместо светлых стилей, если вы щелкаете, а затем световые стили, а не темные, если вы снова щелкаете.

Но метку кнопки также необходимо обновить, чтобы она отображала правильную тему. Поэтому вам нужно добавить инструкцию if для проверки текущей темы и обновления метки кнопки.

Вот как должен выглядеть код JavaScript с добавленным обработчиком событий:

'use strict';

const switcher = document.querySelector('.btn');

switcher.addEventListener('click', function() {
    document.body.classList.toggle('light-theme');
    document.body.classList.toggle('dark-theme');

    const className = document.body.className;
    if(className == "light-theme") {
        this.textContent = "Dark";
    } else {
        this.textContent = "Light";
    }
});

Это соглашение JavaScript для использования верблюжего регистра для имен переменных с несколькими словами, например переменной className.

Сообщение консоли

В качестве веб-разработчика вы можете создавать скрытые сообщения, которые не отображаются на веб-странице, но которые можно прочитать на вкладке "Средства разработчика" на вкладке "Консоль". Использование сообщений консоли полезно для просмотра результата кода.

В файле JavaScript добавьте вызов console.log после if инструкции, но внутри прослушивателя событий.

После внесения этого изменения полный код JavaScript должен выглядеть следующим образом.

'use strict';

const switcher = document.querySelector('.btn');

switcher.addEventListener('click', function() {
    document.body.classList.toggle('light-theme');
    document.body.classList.toggle('dark-theme');

    const className = document.body.className;
    if(className == "light-theme") {
        this.textContent = "Dark";
    } else {
        this.textContent = "Light";
    }

    console.log('current class name: ' + className);
});

Если вы находитесь в файле JavaScript в Visual Studio Code, вы можете использовать автозавершение для console.log ввода log и нажатия клавиши ВВОД.

Чтобы указать, что текст является строкой, его можно заключить в одинарные или двойные кавычки.

Открытие в браузере

Чтобы просмотреть, щелкните правой кнопкой мыши и выберите index.html"Открыть в браузере по умолчанию" или перезагрузите ту же вкладку браузера, нажав клавишу F5.
Нажмите кнопку Темная, чтобы перейти на темную тему.
Убедитесь, что все правильно и что поведение является ожидаемым. Если нет, ознакомьтесь с приведенными выше шагами, чтобы узнать, пропустили ли что-то.

Проверка страницы в средствах разработчика

Откройте средства разработчика, щелкнув правой кнопкой мыши и выбрав "Проверить" или с помощью сочетания клавиш F12. Вы также можете использовать сочетание клавиш CTRL+SHIFT+I в Windows или Linux и OPTION+CMD+I в macOS.
Выберите вкладку "Элементы" и перейдите на вкладку "Стили".
Выберите элемент <body>. Просмотрите примененную тему на вкладке Стили. Если текущей темой является темная тема, применяются стили dark-theme.

Убедитесь, что выбрана темная тема.
Перейдите на вкладку Консоль, чтобы просмотреть сообщение console.log: current class name: dark-theme.

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

Дополнительные сведения о консоли см. в статье Общие сведения о консоли.