Структура JavaScript

215

посл. ред. 13.01.2017

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

str = 'Строка';
document.write(str);

В скрипт можно добавлять комментарии, которые не будут учитываться интерпретатором кода. Если комментарий однострочный, то его можно отделить от кода двумя слэшами // с левой стороны, а с правой он будет ограничен концом строки. Если комментарий многострочный, то начало комментария нужно задать слэшем со звездочкой /*, а конец - звездочкой со слэшем */.

str = 'Строка'; // задаём строку
/* Выводим строку
на экране */
document.write(str);

Для однозначного выделения комментария желательно использовать второй способ.

Как подключить к документу?

Для включения программного кода JavaScript в HTML-страницу используется парный тег <script>. Можно вынести скрипт в отдельный файл и подключить к документу с помощью атрибута src того же тега <script>. Для примера в папке js/ лежит файл example.js со строкой:

document.body.innerHTML = '<p>Пример JavaScript</p>';

Этот файл подключается к документу спомощью тега <script>:

<!DOCTYPE html>
<html>
<head>
  <title>JavaScript</title>
</head>
<body>
  <script src="js/example.js"></script>
</body>
</html>

Пример JavaScript

Если в теге <script> подключен внешний файл с помощью атрибута src, тогда все содержимое тега игнорируется. Если написать так

<script src="example.js">
  alert('Внимание!');
</script>

тогда строка alert('Внимание!'); проигнорируется.

Момент, в который браузер начнёт выполнять скрипт, зависит от местоположения тега <script> в документе. Если тег <script> расположен в заголовке документа <head>, то скрипт выполнится до начала вывода страницы. Если тег <script> находится в теле документа <body>, тогда веб-браузер выводит страницу до того места, где вставляется скрипт. Затем выполняется этот скрипт и только после этого продолжается вывод страницы на экран.

<!DOCTYPE html>
<html>
<head>
  <title>JavaScript</title>
</head>
<body>
  <p>Начало страницы</p>
  <script>alert('Пауза');</script>
  <p>Конец страницы</p>
</body>
</html>

Еще один способ использования JavaScript в документе - атрибуты событий. В качестве значения подобного атрибута указывается непосредственно скрипт.

<!DOCTYPE html>
<html>
<head>
  <title>JavaScript</title>
</head>
<body>
  <p onmouseover="this.style.background = 'red';" onmouseout="this.style.background = 'transparent';">Наведите курсор</p>
</body>
</html>

Наведите курсор

Асинхронное выполнение JavaScript

Если скрипт подключается из внешнего файла с помощью атрибута src, тогда перед выполнением браузер загружает указанный файл. Это может занять много времени, если файл очень большой или сервер, где расположен файл, перегружен. Чтобы пользователю не пришлось ждать пока файл загрузится, нужно воспользоваться одним из атрибутов async или defer (если указать оба, то применится async).

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

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

Включен ли JavaScript?

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

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

<noscript>JavaScript отключен. Пожалуйста, включите JavaScript.</noscript>

Если отключить JavaScript, то данный текст отобразится на странице.

С точки зрения разработчика, более правильным будет не только предупредить, но и помочь пользователю включить JavaScript:

<!DOCTYPE html>
<html>
<head>
  <title>JavaScript</title>
</head>
<body>
  <noscript>
    <p>JavaScript отключен. Некоторые сервисы сайта могут не работать.</p>
    <p>Для корректной работы сайта включите JavaScript.</p>
    <p>Вот <a href="http://www.enable-javascript.com/ru/" target="_blank">инструкции, как включить JavaScript в вашем браузере</a>.</p>
  </noscript>
</body>
</html>