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

Что такое JavaScript?

JavaScript – это язык программирования, который изначально был придуман для браузера, чтобы сделать веб-страницы более динамичными.

Потребность в создании языка программирования для браузера появилась ещё в 90-е годы. В этом время нужно было уже больше чем статичное изображение веб-страниц; требовалось дальнейшее развитие веб-технологий. Кроме двух базовых технологий веба (HTML и CSS), нужна была ещё третья технология - язык программирования.

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

В 1997 году язык JavaScript был стандартизован ассоциацией ECMA и назван ECMAScript. Последняя версия данного языка на сегодняшний день называется ECMAScript 2017.

В настоящее время язык JavaScript уже применяется не только для веба. С помощью него можно написать обычные приложения для десктопных и мобильных операционных систем, использовать его в роли серверного языка (node.js) и др.

Языка JavaScript, как и другие языки программирования, имеет некоторые особенности. Среди основных – это слабая типизация и динамическое приведение типов.

Программы на языке JavaScript, которые разрабатываются для выполнения на стороне клиента, т.е. в браузере, называют ещё сценариями.

JavaScript - это не Java, хоть он и унаследовал некоторые синтаксические конструкции этого языка. Такое название данный язык получил в силу некоторых исторических причин. Одной из них является то, что изначально в качестве языка, который должен был быть доступным в браузере, хотели сделать Java. Но впоследствии компания Netscape отказалась от этой мысли, из-за того что Java был слишком большим и сложным.

Виды браузеров и браузерных движков

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

Основные современные движки и браузеры, которые их используют:

  • Blink (Google Chrome, Opera, Яндекс.Браузер и др.);
  • Gecko (Mozilla Firefox, Waterfox и др);
  • WebKit (Safari, Maxthon, Vivaldi и др.);
  • EdgeHTML (Microsoft Edge).

Как осуществляется подключения кода JavaScript к странице

Подключение JavaScript на страницу выполняется с помощью элемента script.

Первый способ - это размещение кода JavaScript непосредственно на странице, т.е. между открывающим и закрывающим тегом script.

<script>
  alert("Привет, мир!");
</script>

Второй способ заключается в использовании отдельного файла с расширением js. В данный файл необходимо поместить код JavaScript, а затем его подключить к странице с помощью элемента script. Путь к файлу задаётся с помощью атрибута src.

<script src="main.js"></script>

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

Элементы script, а, следовательно, JavaScript код, можно располагать в любых элементах страницы (например, в head, body и др.).

<!doctype html>
<html lang="ru">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- Сценарий, подключённый к странице в секции head -->
    <script src="main_head.js"></script>
  </head>
  <body>
    <h1>Заголовок</h1>
    ...

    <!-- Сценарий, подключённый к странице в секции body -->
    <script src="main.js"></script>
  </body>
</html>

Если подключить скрипт с помощью атрибута src и дополнительно ещё указать некоторый код между открывающим и закрывающим тегом script этого элемента, то код, который указали непосредственно, будет проигнорирован, т.е. он не выполниться.

<!-- Будет выполнен только скрипт common.js -->  
<script src="common.js">
  alert('Это предупреждение никогда не отобразиться!');
</script>

Как выполняются скрипты на странице?

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

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

Пример:

<!doctype html>
<html lang="ru">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- Сценарий, подключённый к странице в секции head -->
    <script>
      document.write("Привет, мир (из раздела head)!");      
      alert("Привет, мир (из раздела head)!");
    </script>
  </head>
  <body>
    <h1>Заголовок h1</h1>
    ...
    <script>
      document.write("Привет, мир (из раздела body)!");
    </script>
  </body>
</html>

В этом примере используются 2 метода JavaScript:

  • document.write – для вывода текста в текущее место HTML, если страница ещё не загрузилась;
  • alert – для вывода на экран предупреждения с кнопкой «ОК»; данное предупреждение приостанавливает дальнейшую загрузку страницу.

При загрузке этого документа, когда браузер встретит метод document.write он выведет значение параметра сразу после открывающего тега body. При чтении следующей строчки, содержащей метод alert, браузер выведет на экран предупреждение «Привет, мир (из раздела head)!» на экран. Кроме этого он приостановит дальнейшую загрузку страницы, пока пользователь не нажмёт на кнопку «ОК».

На этом этапе увидим следующую картинку:

Загрузка HTML документа (#1)

После нажатия на кнопку «ОК» браузер продолжит загрузку страницы. Когда браузер встретит строчку с методом document.write. Он выведет в этом месте текст «Привет, мир (из раздела body)!».

Загрузка HTML документа (#2)

Атрибуты async и defer

async – атрибут script, который используется для того, чтобы браузер не осуществлял остановку чтения страницы при загрузке скрипта. Скрипт в этом случае будет загружаться асинхронно, а как только он загрузится, он тут же выполнится.

<script src="common.js" async></script>

defer – атрибут script, который так же как и атрибут async «говорит» браузеру, что его загрузку нужно выполнять асинхронно. Но в отличие от async он указывает на то, что этот скрипт необходимо выполнить только после полной загрузки страницы.

<script src="path_to/script.js" defer></script>

Второе отличие от async заключается в том, что будет сохранена очерёдность выполнения скриптов.

<script src="path_to/1.js" defer></script>
<script src="path_to/2.js" defer></script>

Т.е. скрипты вне зависимости от того, какой из них загрузиться быстрее всё равно будут выполнены браузером в порядке их подключения, т.е. сначала path_to/1.js, а потом path_to/2.js.

Если для script одновременно указать атрибуты async и defer, то будет использоваться только async.

<script src="path_to/script.js" async defer></script>

Атрибуты async и defer можно использовать только для скриптов, подключаемых на страницу с помощью атрибута src.