Добавление JavaScript на веб-страницу

Выведите свои веб-страницы на новый уровень с помощью JavaScript. В этой статье вы узнаете, как запускать JavaScript непосредственно из HTML-документов.

О JavaScript

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

Как запускать JavaScript из HTML

В браузере JavaScript сам по себе ничего не делает. JavaScript выполняется внутри HTML-страниц. Чтобы вызвать код JavaScript из HTML, нужен элемент <script>. Использовать script можно двумя способами — в зависимости от того, подключаете ли вы внешний скрипт или добавляете скрипт непосредственно на веб-страницу.

Подключение внешнего скрипта

Обычно скрипты пишут в отдельных файлах .js. Чтобы выполнить скрипт .js на веб-странице, используйте <script> с атрибутом src, указывающим на файл скрипта с помощью его URL:

<script src="path/to/my/script.js"></script>

Написание JavaScript в HTML

Также можно добавить код JavaScript между тегами <script>, не указывая атрибут src.

<script>
  console.log("Some code");
</script>

Это удобно, если вам нужен лишь небольшой фрагмент JavaScript, но хранение JavaScript в отдельных файлах упрощает следующие задачи:

• сосредоточиться на работе
• писать самодостаточный HTML
• создавать структурированные приложения на JavaScript

Обеспечение доступности скриптов

Доступность — важный аспект разработки любого программного обеспечения. При разумном использовании JavaScript может сделать ваш сайт более доступным, а неосторожное использование скриптов может привести к серьёзным проблемам. Чтобы JavaScript работал на вас, стоит знать несколько рекомендаций по его добавлению:

• Представляйте весь контент в виде (структурированного) текста. По возможности используйте HTML для своего контента. Например, если вы реализовали красивую индикаторную полосу выполнения на JavaScript, дополните её соответствующими процентными значениями в тексте HTML. Аналогично, выпадающие меню следует оформлять как неупорядоченные списки из ссылок.

• Обеспечьте доступ ко всем функциям с клавиатуры.

  • Пользователи должны иметь возможность перемещаться клавишей Tab по всем элементам управления (например, ссылкам и полям ввода формы) в логическом порядке.
  • Если вы используете события указателя (например, события мыши или касания), продублируйте их функциональность с помощью событий клавиатуры.
  • Проверьте свой сайт, используя только клавиатуру.

• Не устанавливайте и даже не пытайтесь угадать временные ограничения. Для навигации с клавиатуры или прослушивания озвученного контента требуется дополнительное время. Вы почти никогда не сможете предсказать, сколько времени понадобится пользователям или браузерам для выполнения процесса (особенно асинхронных действий, таких как загрузка ресурсов).

• Делайте анимацию ненавязчивой и короткой, избегайте мигания. Мигание раздражает и может вызвать приступ. Кроме того, если анимация длится больше пары секунд, предоставьте пользователю возможность отменить её.

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

• Предусмотрите запасной вариант для пользователей без JavaScript. Пользователи могут отключить JavaScript ради повышения скорости и безопасности, а также часто сталкиваются с проблемами сети, которые мешают загрузке скриптов. Кроме того, сторонние скрипты (реклама, скрипты отслеживания, расширения браузера) могут нарушить работу ваших скриптов.

  • Как минимум, оставьте короткое сообщение с помощью <noscript>, например: <noscript>To use this site, please enable JavaScript.</noscript>
  • В идеале, по возможности воспроизведите функциональность JavaScript с помощью HTML и серверных скриптов.
  • Если вам нужны только простые визуальные эффекты, CSS зачастую справится с этой задачей ещё проще.
  • Поскольку почти у всех включён JavaScript, <noscript> не оправдывает создание скриптов, недоступных для пользователей.

Дополнительные материалы

• <script>
• <noscript>
• Написание JavaScript с учётом доступности, автор Мануэль Матузович (2017)
• Рекомендации W3C по доступности