До сих пор мы писали код JavaScript непосредственно внутри кода html-страницы. Однако, такой подход не всегда оправдан и в итоге может привести к тому, что код вашей страницы будет совершенно нечитабельным. Существует и другой подход к использованию JavaScript на веб-страницах — подключение JavaScript с использованием внешнего файла.
Вторая программа JavaScript
Запустим VS Code и выберем в меню File пункт Open Folder:
Укажем на диске любую папку в которой будем хранить исходный код нашего приложения. Например, я выбрал папку c:\app , которую создавал ранее и в которой уже имеется файл app.html. При первом открытии новой папки VS Code спросит доверяем ли мы авторам файлов в этой папке:
Необходимо указать, что мы доверяем авторам файлов в этой папке, а также, при необходимости, отметить флажок, который укажет, что мы доверяем также и всем файлам, находящимся в других папках. После этого VS Code откроет папку и покажет её структуру в списке слева и открытые редакторы (по умолчанию — это страница с приветствием):
Если кликнуть по файлу в списке, то он откроется в редакторе справа. Например, последний код файла app.html выглядит так в VS Code:
Теперь изменим нашу программу следующим образом:
во-первых, добавим новую папку. Для этого в списке справа нажмем кнопку New Folder… и зададим её название — scripts
во-вторых, выделим имя папки, нажмем кнопку New File… и назовем его outer.js:
Кликнем по новому файлу и напишем следующий код в редакторе:
let a = 2;
let b = 3;
let s = a + b;
console.log("Результат вычислений: "+ s);
document.write("2 + 3 ="+ s);
сохраним код, нажав сочетание Ctrl+S.
Теперь откроем код страницы app.html и напишем следующий код:
<html> <body> <script src="scripts/outer.js"></script> </body> </html>
Здесь мы подключили код JavaScript из внешнего файла. Для чего указали внутри тега script путь к внешнему файлу относительно текущего расположения — файл app.html лежит на том же уровне, что и папка scripts, соответственно, путь к внешнему файлу с кодом JS будет scripts/outer.js.
Теперь запустим нашу программу в браузере. Для этого в меню слева выберем пункт Run And Debug или нажмем сочетание клавиш Ctrl+Shift+D:
После того как вы нажмете синюю кнопку «Run and debug» (см. на рисунке выше), вверху окна появится меню выбора браузера в котором необходимо запустить выполнение кода. Выбираете необходимый вам браузер и VS Code запустит в нем ваш код. Например, в Microsoft Edge страничка будет выглядеть следующим образом:
Итого
Сегодня мы немного изменили нашу первую программу JavaScript и подключили внешний файл с кодом JavaScript на страницу. Для того, чтобы подключать JS-скрипты из внешний файлов необходимо внутри тега script создать атрибут src в котором необходимо указать путь к файлу с кодом JS относительно текущего местоположения. Использование внешних файлов с JavaScript имеет ряд преимуществ, а именно:
- код страниц становится чище и короче
- js-файлы обычно кэшируются браузерами, в результате чего ваше приложение при повторном запуске будет работать быстрее
- вы можете повторно использовать свой код на разных страницах без необходимости его копирования — достаточно подключить файл со скриптом в нужном месте на странице.