Как вывести скрипт во внешний файл

Обновлено: 06.07.2024

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

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

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

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

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

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

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

1_1-1801-78c28c.jpg

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

2_1-1801-b52756.jpg

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

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

3_1-1801-e46fa6.jpg

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

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

1-1801-e457cf.jpg

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

4_1-1801-ec1e08.jpg

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

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

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

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

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

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

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

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

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

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

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

<script src color:red;">URL-адрес"></script>

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

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

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

<script src color:red;">../../scripts/myscript.js"></script>

Тег <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 в полной мере, то см. здесь:

Всем привет!
Решил написать небольшой сайт лично для себя и сейчас занимаюсь изучением всего что понадобится +моментальное написание сайта.
Так вот, узнал о JQuery и о его функциях, которые упростят жизнь.
Смотрел видео и все поголовно пишут код JQuery в основном файле index.html.
Но лично для меня это выглядит не очень и хочется, чтобы всё было на своих местах.
Как писать код JQuery в отдельном файле?
Вроде скачал и подключил через:
А что дальше? Создать файл .js его подключить в основной файл через: (myjs.js например) Или как? Ни одного видео не нашёл, статьи тоже все пишут про написание в основном файле.

  • Вопрос задан более года назад
  • 894 просмотра

1)создаешь файл main.js
2)подключаешь
3)ПРОВЕРЯШЬ jquery
4)погнал писать

Сначала думал, что не работает, а потом вспомнил, что чтобы увидеть на сайте надо написать alert
А ещё вопрос. Есть ли смысл использовать просто js, если есть jquery?
Если да, то где писать обычный код js в этом же файле? Или лучше ещё один создать?

modezen,
1)можно совмещать
2)писать в любом месте
3)Создавать еще один не нужно
4)jquery делает все что есть в js и наоборот)

Значит по сути я подключил обычный js, но с доп. функциями? Так?

modezen, ну типо того) jquery - это js,только с измененным и УПРОЩЕННЫМ синтаксисом)

KickeRocK

drawnofmymind,
1) А
2) Вы
3) Всегда
4) По пукнтам
5) Расписываете?)
modezen, Если вы просто учитесь и нет строгой необходимости писать на jQuery, привязки к времени, то учитесь сразу на чистом Javascript.
querySelector и querySelectorAll освойте и поймёте что jQ не очень-то нужен.

KickeRocK

modezen, когда вы знаете только jQ и чтобы писать на ванильке будет потрачено больше времени, которого нет.

Осваивайте профессию, начните зарабатывать, а платите через год!


Курсы Python Ак­ция! Бес­плат­но!


Станьте хакером на Python за 3 дня


Веб-вёрстка. CSS, HTML и JavaScript



Курс Bootstrap 4


Станьте веб-разработчиком с нуля

В этой главе мы займемся размещением сценариев в HTML-документе, чтобы иметь возможность использовать их для оперативной модификации HTML-документа. Для вставки JavaScript-кoдa в НТМL-страницу обычно используют элемент <script> .

Первая программа

Чтобы ваша первая пpoгpaммa (или сценарий) JavaScript запустилась, ее нужно внедрить в НТМL-документ.
Сценарии внедряются в HTML-документ различными стандартными способами:

  • поместить код непосредственно в атрибут события HTML-элемента;
  • поместить код между открывающим и закрывающим тегами <script> ;
  • поместить все ваши скрипты во внешний файл (с расширением .js), а затем связать его с документом HTML.

JavaScript в элементе script

Самый простой способ внедрения JavaScript в HTML-документ – использование тега <script> . Теги <script> часто помещают в элемент <head> , и ранее этот способ считался чуть ли не обязательным. Однако в наши дни теги <script> используются как в элементе <head> , так и в теле веб-страниц.

Таким образом, на одной веб-странице могут располагаться сразу несколько сценариев. В какой последовательности браузер будет выполнять эти сценарии? Как правило, выполнение сценариев браузерами происходит по мере их загрузки. Браузер читает HTML-документ сверху вниз и, когда он встречает тег <script> , рассматривает текст программы как сценарий и выполняет его. Остальной контент страницы не загружается и не отображается, пока не будет выполнен весь код в элементе <script> .

Обратите внимание: мы указали атрибут language тега <script> , указывающий язык программирования, на котором написан сценарий. Значение атрибута language по умолчанию – JavaScript, поэтому, если вы используете скрипты на языке JavaScript, то вы можете не указывать атрибут language .

JavaScript в атрибутах событий HTML-элементов

Вышеприведенный сценарий был выполнен при открытии страницы и вывел строку: «Привет, мир!». Однако не всегда нужно, чтобы выполнение сценария начиналось сразу при открытии страницы. Чаще всего требуется, чтобы программа запускалась при определенном событии, например при нажатии какой-то кнопки.

В следующем примере функция JavaScript помещается в раздел <head> HTML-документа. Вот пример HTML-элемента <button> с атрибутом события, обеспечивающим реакцию на щелчки мышью. При нажатии кнопки генерируется событие onclick.

Внешний JavaScript

Если JavaScript-кода много – его выносят в отдельный файл, который, как правило, имеет расширение .js .

Чтобы включить в HTML-документ JavaScript-кoд из внешнего файла, нужно использовать атрибут src (source) тега <script> . Его значением должен быть URL-aдpec файла, в котором содержится JS-код:

В этом примере указан абсолютный путь к файлу с именем script.js, содержащему скрипт (из корня сайта). Сам файл должен содержать только JavaScript-кoд, который иначе располагался бы между тегами <script> и </script> .

По аналогии с элементом <img> атрибуту src элемента <script> можно назначить полный URL-aдpec, не относящийся к домену текущей НТМL-страницы:

На заметку: Подробнее о путях файлов читайте в разделе «Абсолютные и относительные ссылки».

Чтобы подключить несколько скриптов, используйте несколько тегов:

Примечание: Элемент <script> с атрибутом src не может содержать дополнительный JаvаSсriрt-код между тегами <script> и </script> , хотя внешний сценарий выполняется, встроенный код игнорируется.

Независимо от того, как JS-код включается в НТМL-документ, элементы <script> интерпретируются браузером в том порядке, в котором они расположены в HTML-документе. Сначала интерпретируется код первого элемента <script> , затем браузер приступает ко второму элементу <script> и т. д.

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

Примечание: Во внешние файлы копируется только JavaScript-код без указания открывающего и закрывающего тегов <script> и </script> .

Расположение тегов <script>

Вы уже знаете, что браузер читает HTML-документ сверху вниз и, начинает отображать страницу, показывая часть документа до тега <script> . Встретив тег <script> , переключается в JavaScript-режим и выполняет сценарий. Закончив выполнение, возвращается обратно в HTML-режим и отображает оставшуюся часть документа.

Если на странице используется много скриптов JavaScript, то могут возникнуть длительные задержки при загрузке, в течение которых пользователь видит пустое окно браузера. Поэтому считается хорошей практикой все ссылки нa javaScript-cцeнapии указывать после контента страницы перед закрывающим тегом <body> :

Такое расположение сценариев позволяет браузеру загружать страницу быстрее, так как сначала загрузится контент страницы, а потом будет загружаться код сценария.
Для пользователей это предпочтительнее, потому что страница полностью визуализируется в браузере до обработки JavaScript-кoдa.

Отложенные и асинхронные сценарии

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

В этом примере, пока пока браузер не загрузит и не выполнит script.js, он не покажет часть страницы под ним. Такое поведение браузера называется «синхронным» и может доставить проблемы, если мы загружаем несколько JavaScript-файлов на странице, так как это увеличивает время её отрисовки.

А что, если HTML-документ на самом деле не зависит от этих JS-файлов, а разработчик желает контролировать то, как внешние файлы загружаются и выполняются?

Кардинально решить проблему загрузки скриптов помогут атрибуты async и defer элемента <script> .

Атрибут async

Async используется для того, чтобы указать браузеру, что скрипт может быть выполнен «асинхронно».

При обнаружении тега <script async src="https://wm-school.ru/js/"> браузер не останавливает обработку HTML-документа для загрузки и выполнения скрипта, выполнение может произойти после того, как скрипт будет получен параллельно с разбором документа. Когда скрипт будет загружен – он выполнится.

Для сценариев с атрибутом async не гарантируется вы­полнение скриптов в порядке их добавления, например:

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

Примечание: Атрибут async используется, если нужно разрешить браузеру продолжить загрузку страницы, не дожидаясь завершения загрузки и выполнения сценария.

Атрибут defer

Атрибут defer откладывает выполнение скрипта до тех пор, пока вся HTML-страница не будет загружена полностью.

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

Несмотря на то, что в приведенном примере теги <script defer src="https://wm-school.ru/js/"> включены в элемент <head> HTML-документа, выполнение сценариев не начнется, пока браузер не дойдет до закрыва­ющего тега </html> .

Кроме того, в отличие от async , относительный порядок выполнения скриптов с атрибутом defer будет сохранён.

Применение атрибута defer бывает полезным, когда в коде скрипта предусматривается работа с HTML-документом, и разработчик должен быть уверен, что страница полностью получена.

Примечание: Атрибуты async и defer поддерживаются только для внешних файлов сценариев, т.е. работают только при наличии атрибута src .

Итоги