Проверить JavaScript в браузере и уметь включить его #2

3 варианта скриптов проверки активации с описанием и рекомендациями

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

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

Несколько понятий и правил

Коротко рассматриваются несколько часто используемых простых, но принципиально важных правил при написании кода, с демонстрацией и описанием.

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

Элемент script

Если программа встроена непосредственно в документ HTML, то исходный код JS размещается внутри парного тега:

Где параметр type представляет стандарт MIME с описанием типа передачи данных по эл. почте (текстовый, архивный и мультиме́дийный контент). В HTML5 этот параметр можно не указывать, в отличие от ранних версий.

В случае размещения исходника во внешнем файле применяется конструкция:

Используемые параметры:

• src – адрес нахождения внешнего файла с программой;
• defer – программа во внешнем файле выполняется только после полной загрузки веб-страницы;
• async – параллельная загрузка страницы и выполнение программы, доступно только в HTML5.

Понятие функции

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

В общем случае функция имеет следующую условную схему:

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

Переменные

Их имена должны быть уникальны и состоять из букв латиницы и знаков подчеркивания, которые могут являться первым знаком в имени переменой. Допустимо, что цифры тоже используются, но не в качестве первого знака. Также имена переменных не должны быть идентичны ключевым зарегистрированным в JS словам.

Объявить переменную и присвоить значение рекомендуется используя ключевик let , а не устаревающий var . Образец: let x = "Передаваемое значение"; . Допустимо переменную объявить, но значение передать ей позже: let y; , если их несколько можно перечислять через запятую.

Комментарии и элемент noscript

1) Пояснять назначение комментариев излишне, но полезно знать, что их два вида:

• однострочные с текстурой до конца строки - // … ;
• многострочные, если длиннее одной строки - /* … */ .

2) Внутри парного тегаразмещается контент, который отображается в случае, если браузер не поддерживает JavaScript.

Как проверить JavaScript в браузере

Скрипты JS могут размещаться в разных сегментах HTML. При этом их местоположение имеет значение при написании текстов кода. Цель одна, но способы реализации разные. Рассмотрим три примера, подробности запуска скриптов описаны в предыдущей статье.

Настройка веб-навигаторов

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

1) Mozilla Firefox - в современных версиях требуется: в адресной строке ввести about:config → подтвердить согласие действовать осторожно → javascript.enabled → появится возможность варьировать доступностью JS.

2) Google Chrome - действия: в правом верхнем углу нажать на значок три вертикальные точки → в меню внизу Настройки → слева Конфиденциальность и безопасность (1) → в центре Настройки сайтов → ниже JavaScript → выше варьировать кнопками Разрешить …(2) и Запретить … (3).

3) ...

Вариант 1

Само изложение скрипта расположено в сегменте body , применяется метод write() объекта document . Если «истинно» выводится соответствующее подтверждение, иначе на экране появится контент из noscript .

Это простейший вариант позволяющий проверить JavaScript в браузере.

Вариант 2

Скрипт находится в сегменте head . Это более сложная, но и совершенная версия. В ней не используется noscript , зато применяется встроенная таблица стилей и функция hi() , вызываемая с помощью обработчика события встроенного в элемент body onload="hi()" , когда будет полностью загружен. Часто, как в данном случае, тело функции ограничивается фигурными скобками.

В примере применяется метод getElementById() объекта document, позволяющий найти элемент на веб-странице по его идентификатору id="idf" и передать переменной idf значение объекта. В случае успеха срабатывает свойство idf.innerHTML , которое заменяет в элементе HTML с идентификатором idf имеющуюся фразу на сообщение о подтверждении активизации языка в навигаторе. В противном случает фраза в эл-те с idf остается без изменения.

Вариант 3

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

Рассмотрим текущие фрагменты исходного кода.

1) Фрагмент файла /general-includes/footer.shtm с парным тегомразмещен под сегментом footer :

2) Содержимое внешнего файла с JS находится в данном случае по адресу /js/script.js :

 let idf = document.getElementById("idf"); 

Используется метод getElementById() объекта document , по аналогии с предыдущим примером, только отсутствует свойство innerHTML .

3) Фрагмент файла - /general-includes/header.shtml , где применяется noscript :

4) Фрагмент файла таблицы стилей для вывода сообщения с предупреждением - /general-styles/style.css :

  .att {
      text-align: center;
      padding: 0 0 5px 0;
      border: 0;
      margin: 0;
      color: #ff3300;
      font-size: 100%;
      font-weight: bolder;
      line-height: 120%;
  }
        

⚬ ⚬ ⚬

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

Применение популярных методов write() с document.getElementById() , свойства innerHTML и тегапозволяет достигнуть желаемого результата.

Назад   Вперед