JS-файл
Основой описываемого подхода является отдельный файл, содержащий код JavaScript. Не имеет значения, как вы назовете этот файл, но его расширение, как правило, будет. js. Например, мой файл JS назван example.js.
Внутри этого файла будет размещен только JavaScript:
function showDistance(speed, time) {
alert(speed * time);
}
showDistance(10, 5);
showDistance(85, 1.5);
showDistance(12, 9);
showDistance(42, 21);
Все, что мы обычно поместили бы в тег script, попадет сюда. Кроме этого, мы не будем ничего добавлять, так как появление в этом файле других элементов вроде произвольно выбранных частей HTML и CSS не допускается, а в ответ на подобные действия браузер заругается.
Ссылка на JavaScript-файл
Как только мы создали файл JS, второй (и заключительный) шаг — это связать его со страницей HTML. За это отвечает тег script, а конкретнее — его атрибут src, который указывает на расположение JavaScript-файла:
<!DOCTYPE html>
<html>
<body>
<h1>Example</h1>
<script src="example.js"></script>
</body>
</html>
В этом примере, если файл JavaScript расположен в одном каталоге с HTML, мы можем использовать относительный путь и сослаться напрямую на имя файла. А если этот файл находится в другом каталоге, нам нужно будет соответственно изменить путь:
<!DOCTYPE html>
<html>
<body>
<h1>Example</h1>
<script src="some/other/folder/example.js"></script>
</body>
</html>
В этом случае наш файл сценария вложен в три уровня каталогов с именами some, other и folder. Кроме того, мы также можем прибегнуть к использованию абсолютного пути вместо относительного:
<!DOCTYPE html>
<html>
<body>
<h1>Example</h1>
<script src="https://www.kirupa.com/js/example.js"></script>
</body>
</html>
Не важно, если пути относительные или абсолютные, — они будут прекрасно работать. В ситуациях же, когда путь между HTML-страницей и сценарием, на который мы ссылаемся, отличается (например, внутри шаблона, серверного включения, сторонней библиотеки и т. д.), безопаснее использовать абсолютный путь.
Итак, какой подход использовать?
У нас есть два основных подхода, определяющих, как и где следует размещать код (рис. 10.4).
Рис. 10.4. Два основных подхода, используемых для работы с кодом JavaScript
Конечный выбор подхода зависит от ответа на следующий вопрос: «Планируется ли использование одного и того же кода в нескольких HTML-документах?»
Считывание и расположение сценариев в документе
Несколькими разделами ранее я описывал выполнения сценариев. Браузер считывает HTML-страницу, начиная сверху и построчно перемещаясь вниз. Когда он достигает тега script, то начинает выполнять содержащийся в нем код. Это выполнение также происходит построчно, начинаясь с верхней части. Все остальные возможные действия страницы на время этого выполнения приостанавливаются. Если тег script ссылается на внешний JS-файл, то прежде, чем начать выполнение этого файла, браузер его загрузит.
При таком линейном считывании документа браузером наблюдается интересные нюансы, влияющие на то, где лучше размещать теги script. Технически их можно разместить в любой части HTML-документа. Тем не менее для этого есть предпочтительное место. Учитывая то, как браузер считывает страницу, и то, что он все блокирует во время выполнения сценариев, следует размещать теги script в нижней части HTML-документа, после всех его элементов.
Если тег script окажется в верхней части документа, то на время его выполнения браузер заблокирует все остальное. В результате если вы начнете загружать большой файл сценария или будете выполнять сценарий, то пользователь сможет увидеть частично загруженную и не отвечающую HTML страницу. До тех пор пока у вас не возникнет реальной потребности в выполнении JavaScript до полного считывания документа, размещайте теги script в конце, как показано в большинстве предыдущих примеров. Есть и еще одно преимущество в расположении скриптов внизу страницы, но о нем я расскажу значительно позднее, когда мы будем говорить о DOM (объектная модель документа) и о том, что происходит в процессе загрузки страницы.