Основы использования JavaScript на веб-сайте

JavaScript – это объектно-ориентированный язык сценариев, используемый для создания интерактивных веб-страниц. Браузеры могут интерпретировать JavaScript без необходимости в отдельном компиляторе, таком как теги HTML. Он в основном используется в сценариях на стороне клиента, чтобы предлагать функции, которые могут быть реализованы в браузере без отправки запросов на веб-сервер. Выполнение сценариев на стороне клиента – хороший способ сократить время прохождения сервера туда и обратно.

  • Скрипт – это язык программирования, который интерпретируется и запускается в контексте какого-либо другого приложения (в данном случае браузера).
  • А на стороне клиента подразумевается, что сценарий выполняется на клиенте, а не отправляется на сервер, что дает гораздо лучший ответ пользователю.

Синтаксис

JavaScript включается в HTML-страницу с помощью тега

<SCRIPT LANGUAGE=JavaScript>
(JavaScript code goes here)
</SCRIPT>

Тег SCRIPT может находиться либо внутри тега HEAD, либо внутри тега BODY документа HTML. Первое лучше, чтобы отделить его от фактических тегов HTML.

Браузер интерпретирует сценарий во время анализа тегов HTML. Сценарий может делать очень простые вещи, такие как проверки, или некоторые действительно сложные вещи, такие как изменение содержимого самой HTML-страницы! Один из наиболее очевидных примеров: если пользователь оставляет некоторые обязательные поля пустыми, отправка формы вообще не имеет смысла !! Это может быть поймано на самом клиенте с помощью простых функций JavaScript.

История JavaScript

Netscape создал JavaScript с исходным названием «LiveScript» – язык сценариев, который можно было использовать как на стороне клиента, так и на стороне сервера. Затем с выходом Navigator 2.0 он был переименован в «JavaScript». Последующие выпуски браузера привели к появлению более продвинутых версий JavaScript.

Легко предположить, что JavaScript – это подмножество Java, но это не так! Он намного ближе к C. Он имеет объектно-ориентированные функции, но не является чистым объектно-ориентированным языком.

Преимущества использования JavaScript

Ниже приведены некоторые причины, по которым JavaScript стал предпочтительным языком сценариев среди веб-разработчиков:

  • JavaScript – это самоинтерпретируемый язык, которому не нужен компилятор.
  • Его можно легко встроить в HTML-документ.
  • Имеют простой синтаксис и очень просты в освоении.
  • Независимо от платформы – он может работать в любом веб-браузере, в котором включен JavaScript.
  • Очень легко отлаживать и тестировать.

Примеры JavaScript

Вы можете отображать приветственное сообщение для посетителей вашего сайта, когда страница загружается, используя приведенный ниже код JavaScript:

<HTML>
<HEAD>
<TITLE>ALERT BOX EXAMPLE</TITLE>
</HEAD>
<BODY>
<SCRIPT Language="JavaScript">
alert("Welcome to Our Website!!!");
document.write('<IMG SRC=""/>');
</SCRIPT>
</BODY>
</HTML>

Приветственное сообщение при загрузке в браузере Google Chrome будет выглядеть, как показано ниже:

Поле предупреждения JavaScript в Google Chrome

Есть много других простых и сложных практических примеров. Например, Google AdSense использует асинхронный JavaScript для загрузки рекламных объявлений параллельно с доставкой контента. Это помогает показывать рекламу параллельно, не блокируя контент. Вы можете вставить код в область заголовка любой страницы для отображения рекламы.

Рекламный код AdSense с JavaScript

Рекламный код AdSense с JavaScript

Блокировка JavaScript

С тех пор, как в рекламе начал использоваться JavaScript, он стал одним из раздражающих факторов для читателей, которые не хотят, чтобы их беспокоила реклама на странице. Все веб-браузеры по умолчанию имеют возможность включать или отключать JavaScript. В Google Chrome вы можете отключить JavaScript в дополнительных настройках, как показано ниже:

Включение или отключение JavaScript в Chrome

Включение или отключение JavaScript в Chrome

Для браузера также доступны плагины и расширения для отключения содержимого JavaScript.

Узнайте больше о том, как отключить JavaScript в браузерах.

Библиотеки JavaScript

В настоящее время JavaScript используется в различных формах на основе библиотек и фреймворков. Эти библиотеки обычно размещаются на стороне сервера, и некоторые популярные примеры включают Ajax и jQuery. Многие популярные компании, такие как Google, предлагают упрощенные и обновленные библиотеки, которые разработчики могут включать в свой продукт.

JavaScript против скорости страницы

Использование большего количества JavaScript на веб-странице резко снизит скорость. Google PageSpeed ​​Insights – один из популярных инструментов для проверки скорости веб-страницы. При тестировании любой веб-страницы с помощью инструмента Google PageSpeed ​​вы можете обнаружить две проблемы, связанные с JavaScript.

Устранение блокирующих рендеринг JavaScript и CSS в верхней части страницы

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

Проблемы с JavaScript в Google PageSpeed ​​Tool

Проблемы с JavaScript в Google PageSpeed ​​Tool

Минимизировать JavaScript

Файлы JavaScript (с расширением .js) можно сжать для ускорения доставки. Решение здесь – сжать файлы сценария и доставить (с расширением .min.js)

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

Заключение

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

  • Используйте меньшее количество файлов сценариев и объедините несколько файлов.
  • Рекомендуется доставлять файлы статических сценариев с помощью сети доставки контента (CDN).
  • Включите скрипты только на нужных страницах. Например, может не иметь смысла отображать слайдер JavaScript на домашней странице, пока сценарий загружен на всех страницах вашего сайта. Убедитесь, что плагины позволяют загружать файлы скрипта только на требуемых страницах перед установкой на свой сайт.
  • Используйте файлы библиотеки jQuery и Ajax от Google или любого другого CDN, чтобы улучшить скорость загрузки страницы.

Похожие записи

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *