JavaScript - Знакомство. Подключение к странице

Александр Мальцев
15K
1
JavaScript - Знакомство. Подключение к странице
Содержание:
  1. Что такое JavaScript
  2. Виды браузеров и браузерных движков
  3. Как осуществляется подключения кода JavaScript к странице
  4. Как выполняются скрипты на странице
  5. Атрибуты async и defer
  6. Комментарии

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

Что такое JavaScript

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

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

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

Данный язык изначально был создан Бренданом Айком в 1995 году для браузера Netscape и назывался он Mocha. Но после ряда переименований он обрёл окончательное имя – JavaScript. По началу он имел очень маленькую функциональность и в основном использовался для добавления на страницу интерактивности. Но со временем язык стал развиваться и позволять делать всё больше и больше.

В 1996 году язык JavaScript был стандартизован компанией Ecma, которая занимается стандартизацией информационных и коммуникационных технологий. Сама спецификация была названа ECMAScript или сокращённо ES. По сути, JavaScript является реализацией спецификации ECMAScript. Новые версии ECMAScript выходят ежегодно и добавляют в язык новые возможности.

Версии:

  • ECMAScript 1 – июнь 1997 г.;
  • ECMAScript 2 – июнь 1998 г.;
  • ECMAScript 3 – декабрь 1999 г.;
  • ECMAScript 5 – декабрь 2009 г.;
  • ECMAScript 5.1 – июнь 2011 г.;
  • ECMAScript 2015 (ES2015, ECMAScript 6, ES6) – июнь 2015 г.;
  • ECMAScript 2016 (ES2016, ECMAScript 7, ES7) – июнь 2016 г.;
  • ECMAScript 2017 (ES2017, ECMAScript 8, ES8) – июнь 2017 г.;
  • ECMAScript 2018 (ES2018, ECMAScript 9, ES9) – июнь 2018 г.;
  • ECMAScript 2019 (ES2019, ECMAScript 10, ES10) – июнь 2019 г.;
  • ECMAScript 2020 (ES2020, ECMAScript 11, ES11) – июнь 2020 г.

Начиная с версии ES6 язык значительно преобразился, в нём появился новый синтаксис для написания сложных приложений (классы, модули, итераторы, циклы, генераторы в стиле Python, стрелочные функции, ключевые слова let, const и многое другое). С выходом версии ES6 весь код JavaScript принято делить на modern (современный) и классический (до ES6).

В настоящее время язык 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.

Комментарии ()

  1. Вячеслав
    Вчера в 08:07
    Александр, а как подключать скрипты в зависимости от размера экрана? Ведь иногда для мобильных устройств не требуются скрипты, работающие на десктопах.
    1. Александр Мальцев
      Вчера в 14:31
      Для этого можно создать небольшой скрипт, который будет подключать другой скрипт в зависимости от ширины экрана:
      <script>
      var script = document.createElement('script');
      script.defer = 1;
      if (window.matchMedia('(min-width: 992px)').matches) {
        script.src = '/path/to/desktop.js';
      } else {
        script.src = '/path/to/mobile.js';
      }
      document.head.appendChild(script);
      </script>
      1. Вячеслав
        Вчера в 17:06
        Да, то что надо. Спасибо огромное!
    2. amadeu5
      20 октября 2016, 10:48
      Внедрение сценариев JavaScript в HTML документ..
      Мне кажется или в этом абзаце два раза пример вставки кода повторяется?
      1. Александр Мальцев
        20 октября 2016, 10:55
        Да два раза. Один в раздел head, другой в body. Этот пример показывает, что сценарии можно помещать не только в body, но и в секцию head.
      2. Андрей
        12 января 2016, 02:43
        Александр, какой путь для MODX нужно прописать в самом файле js, который находится в папке assets/templates/.../js/, если в нем прописана картинка?
        1. Александр Мальцев
          13 января 2016, 17:01
          Проверьте, если ли у Вас в разделе head элемент base:
          <base href="[[++site_url]]">
          
          Если есть, то все пути в файлах должны задаваться относительно корня сайта. Например, если в script Вам необходимо указать src картинке, то пишем относительный адрес от корня сайта к картинке:
            var srcImg = "assets/images/image-10.png";
          
        Войдите, пожайлуста, в аккаунт, чтобы оставить комментарий.