Как вынести js в отдельный файл

Обновлено: 06.07.2024

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

Первое, о чём следует сказать, — зачем вообще выносить код во внешний файл? Ответ прост. Давайте представим, что у пользователя (user) есть большой script, занимающий 100 и более строк кода. Скрипт этот должен работать на каждой странице веб-сайта. Каждый раз дублировать сотни строк кода, как и само наличие в HTML-документе не HTML-кода — не самое оптимальное решение, и это ещё мягко сказано. Намного лучше вынести код JS в отдельный файл и подключить его к HTML-странице (по аналогии с файлами, отвечающими за стили). Но как же это реализовать?

На деле подключение script к основному файлу особых сложностей не вызывает. Можно воспользоваться тегом <script>, добавив к нему атрибут src (как и в случае, если речь идёт о картинках). В src-атрибуте потребуется прописать путь к подключаемому script.

Практический пример

Для примера давайте перенесём коротенькую однострочную программу во внешний файл с последующим подключением этого файла. Пусть файл называется scripts.js и имеет следующее содержимое:

Важный момент заключается в том, что теги script необходимо прописывать внутри HTML-файла. Если они будут написаны в файле .js, код Джаваскрипт работать перестанет, в результате чего всё закончится ошибкой.

Давайте теперь посмотрим, каким образом выглядит непосредственное подсоединение внешнего JS-файла:

Обновив страницу, мы увидим обычное модальное окно с соответствующим приветствием.

Какие моменты важно учитывать в процессе подключения scripts? Смотрите, в примере JS-скрипт помещён в конец HTML-документа, то есть непосредственно перед закрывающим тегом body. Какое-то время назад скрипты подключали в тегах head, то есть в начале документа. Но в настоящее время поступать таким образом не рекомендуют — лучше всего выполнять подключение именно в конце. Давайте разберёмся, почему.

Для примера подключимся теперь в начале документа, между head-тегами:

На картинке выше видно, что кроме модального окна, ничего нет, то есть сам контент (в нашем случае — надпись «Это обычный HTML документ») отсутствует. Дело в том, что при подсоединении внешнего скрипта между тегами head, веб-браузер в первую очередь загрузит и попытается выполнить именно его. И до тех пор, пока загрузка и выполнение не завершатся, веб-браузер не покажет оставшуюся часть документа. Всё вроде бы ничего, но что будет, если файл по каким-нибудь причинам станет загружаться медленно? В результате users будут ждать загрузку этого файла, а ждать сейчас никто не любит, поэтому, скорее всего, users отдадут предпочтение другому ресурсу. Чтобы этого не случилось, сегодня рекомендуют подключать scripts в конце документа, то есть непосредственно перед </body>.

Однако бывают ситуации, когда какая-нибудь библиотека требует подключения как раз таки в начале документа. В данных обстоятельствах пригодятся атрибуты async и defer — они дают возможность веб-браузеру выполнять асинхронную загрузку скриптов (веб-браузер начнёт загружать скрипт, не останавливая отображение контента). Вот, как это работает (будем использовать атрибуты по очереди):

И в первом, и во втором случае будет получен одинаковый результат, то есть script будет подключен без прерывания отображения контента.

Но атрибуты async и defer всё же несколько отличаются: — defer сохраняет последовательность при подключении внешних скриптов. При использовании этого атрибута первым всегда будет выполняться скрипт, подключаемый выше. Это может иметь значение, если подключаются несколько scripts, среди которых один зависит от другого. То есть разработчик получает возможность подключить основной скрипт раньше зависимого. Можно констатировать, что атрибут defer обеспечивает соблюдение порядка; — async просто обеспечивает выполнение скрипта непосредственно после того, как он загрузился. Соответственно, при наличии скриптовых зависимостей этот атрибут лучше не использовать.

Несколько слов о jQuery или как подключить JS к JS (файл .js к другому файлу .js)?

Операцию можно выполнить с помощью библиотеки jQuery. Если кто не знает, jQuery — это набор JS-функций, обеспечивающих взаимодействие между HTML и JavaScript. Всё можно реализовать с помощью простого кода:

Интересуют более профессиональные знания по JS-разработке? Их можно получить на курсах в OTUS:

JavaScript необходимо загружать и запускать одновременно с разметкой. Это можно сделать как внутри HTML-документа , так и в отдельном файле, который браузер загрузит одновременно с HTML .

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

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

Можно добавить JavaScript в HTML-документ при помощи специального тега <script>. Он может быть помещен в раздел <head> HTML-документа, <body> или после него. В зависимости от того, когда необходимо загрузить JavaScript .

Как правило, JavaScript-код помещается внутри раздела <head>, что позволяет держать его за пределами основного содержимого HTML-документа .

Но если ваш сценарий должен запускаться в определенном месте разметки страницы, тогда его размещают в <body>.

На данный момент файл содержит разметку, в которой не используется тег script в HTML . Допустим, мы хотим добавить в него следующий JavaScript-код :

Начнем с того, что добавим скрипт между тегами <head>. Он даст сигнал браузеру о том, что нужно запустить сценарий, прежде чем загрузится остальное содержимое страницы:

Можно поэкспериментировать: вставить этот код внутри или наоборот вынести за пределы тега <body> и перезагрузить страницу. Поскольку HTML-документ достаточно прост, вы не заметите никакой разницы.

Чтобы внести изменения в структуру HTML-документа , нужно разместить код после раздела <head>. Теперь дата будет отображаться на странице:

При загрузке приведенного выше HTML-документа в браузере веб-страница с script body HTML будет выглядеть следующим образом:

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

Работа с отдельным JavaScript-файлом

Чтобы разместить большие сценарии, которые будут использоваться для нескольких веб-страниц, JavaScript-код помещают в один или несколько js-файлов . Они подключаются к HTML-документу точно так же как CSS .

При желании любой посетитель вашего сайта может посмотреть исходный код страницы. И если сценарии встроены непосредственно в страницу, то их исходные коды также будут видны.

Если вы этого не хотите, то сценарий можно поместить в отдельный файл. Правда, пользователь и этот файл может посмотреть. Но всё-таки при таком подходе исходные коды сценариев не будут явно видны в HTML-коде страницы.

Кроме того, вы таким образом можете создать некую библиотеку функций и использовать их на других страницах вашего сайта, не прописывая каждый раз код на JavaScript в HTML-коде страницы.

И сегодня я расскажу, как поместить скрипт в файл, и использовать этот файл в HTML-странице.

Как всегда напоминаю, что полный обучающий курс по JavaScript можно найти здесь:

Скрипты JavaScript во внешних файлах

Тег <script> поддерживает атрибут src . Значение этого атрибута задает URL-адрес файла, содержащего код на JavaScript. Использовать эту возможность можно примерно так:

Что такое URL-адрес, надеюсь, вы знаете. Если нет, то см. по ссылке выше.

Непосредственно имя файла с кодом на JavaScript может быть любым допустимым именем. Но нежелательно использовать в имени пробелы и русские буквы. Исходный файл на JavaScript обычно имеет расширение .js и содержит JavaScript-код в “чистом виде”, то есть без тегов <script> или любого другого HTML-кода.

Пример подключения файла с кодом к HTML-странице:

Тег <script> с атрибутом src ведет себя точно так же, как если бы JavaScript-код, который имеется в файле, находился бы непосредственно между тегами <script> и </script> . Любой код, указанный между этими тегами, не отображается браузерами.

Обратите внимание, что закрывающий тег </script> обязателен даже в том случае, когда указан атрибут src и между тегами отсутствует JavaScript-код.

Использование тега с атрибутом src может быть полезным, потому что:

HTML-файлы становятся меньше, так как из них можно убрать большие участки кода на JavaScript. Это помогает отделить содержимое от поведения, что также положительно сказывается на индексации страниц поисковыми системами.
Функции JavaScript или другой JavaScript-код, используемый несколькими HTML-файлами, можно держать в одном файле. Это уменьшает объем занимаемой дисковой памяти и намного облегчает поддержку программного кода.
Когда функции JavaScript требуются нескольким страницам, размещение кода в виде отдельного файла позволяет браузеру кэшировать его и тем самым ускорять загрузку. Когда JavaScript-код совместно используется несколькими страницами, экономия времени, достигаемая за счет кэширования, существенно перевешивает небольшую задержку, требуемую браузеру для открытия отдельного сетевого соединения и загрузки файла с кодом на JavaScript при первом запросе на его исполнение. src принимает в качестве значения произвольный URL-адрес, поэтому программа JavaScript или веб-страница с одного веб-сервера может воспользоваться кодом (например, из библиотеки подпрограмм), предоставляемым другими веб-серверами. То есть создав, например, библиотеку функций на одном своём сайте, вы сможете использовать её на любых других своих сайтах, а также предоставить доступ к ней другим программистам.

Как поместить сценарий в файл

Ну а теперь простой пример для закрепления полученных знаний. Создадим файл с именем myscript.js и напишем в этом файле такой код:

Далее создадим HTML-файл и там у нас будет:

Файлы должны находиться в одном каталоге. Если они находятся в разных каталогах, то значением атрибута src должен быть полный или относительный путь к файлу с JavaScript-кодом.

Ну вот и всё. Если хотите знать больше и изучить JavaScript в полной мере, то см. здесь:

Иногда возникает ситуация, когда код становится слишком объемным и сложным для восприятия, поэтому его удобно дробить на небольшие самостоятельные автоподгружаемые функции, что значительно упрощает восприятия в целом кода и уменьшает потребляемую память сервера. Но у меня возникла другая проблема: решив переписать все объявленные переменные в PHP в свои пользовательские функции, понял, что это будет сделать сложновато, если не вынести CSS-вставки и скриптовые вставки в отдельные скрипты, потому как проблема в одинарных и двойных кавычках не позволяет в PHP вывести весь код одним махом: пришлось бы части кода с двойными кавычками печатать отдельно, а с одинарными отдельно. Назначать для этих целей html-переменные - весьма коряво, делить страницу на HTML PHP включения не рационально, если очень много вставок. Итак, кто понял о чем суть, читаем далее.

В принципе двойные и одинарные кавычки ничем не отличаются и нужны лишь для того, чтобы можно было один отдельный кусок кода запихнуть в другой, но все же в html-коде лучше использовать общепринятые двойные кавычки по умолчанию. Решил переписать функции в PHP, вернее, простые переменные переписать в функции; дело в том, что переменные постоянно сидят в памяти после их объявления (например, $a1 = ''; $a2 = 0;) или создания, потому как имеют статус "глобальные", а переменные в функциях имеют статус "локальные" и удаляются из памяти после выполнения функции. Переменные из функции можно либо распечатать (например, оператором "echo $a;", либо передать самой функции, которая вернет окончательное значение, затем его можно уже распечатать на экране, т.е. "echo func($arg);". Еще одной проблемой является то, что нельзя просто так объявить переменную, где имеются двойные и одинарные кавычки, если, например, требуется подгрузить ЯваСкрипт (javascript), например:

Тогда можно переменную объявить как html-переменную, содержащую часть или даже всю страницу html, например:

Но опять же, зачем нужно хранить в памяти (ОЗУ сервера) такую тяжелую переменную? Эх. решил почти всё переписать на функции. Итак, форму для проверки сайтов в своем будущем seo-чекере (блин, не знаю, когда доделаю его. nervous) я вытащил в отдельный скрипт: вместо:

Ну вот и все. Если кому помогло, буду рад, если у кого-то есть свои наблюдения, буду рад, если поделитесь. Если интересно продолжение, подписывайтесь на РСС моих Интернет заметок. Удачи. UPDATE Интересный вариант, показывающий в полях формы "Email" и "password" любой текст, валью (англ. value - подсказка, метка) нашел с использованием библиотеки скриптов jquery:

Читайте также: