Подключение файла js в js – Можно ли через javascript подключить внешний js-файл, отсутствующий на странице?

Leave a Comment / Js / By /

Подключение скрипта JavaScript

Подключение скрипта JavaScript

От автора: приветствую вас, друзья. В этой статье мы с вами узнаем, как перенести наш код JavaScript во внешний файл и подключить скрипт JavaScript. Статья ориентирована на новичков, начинающих свое изучение языка JavaScript.

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

Именно поэтому код JavaScript принято выносить в отдельный файл, который и подключается к страничке. Собственно, все так же, как и в случае с файлами стилей. Как же подключить скрипт JavaScript к основному файлу? Очень просто. Для этого используются уже знакомый нам тег <script>, к которому добавляется атрибут src, точно так же, как и в случае с картинками. Ну и, как вы уже догадались, в атрибуте src указывается путь к подключаемому скрипту JavaScript.

Давайте попробуем перенести нашу программу, состоящую из одной строки кода, во внешний файл и подключим этот файл. Назовем этот файл, к примеру, scripts.js:

Подключение скрипта JavaScript

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Узнать подробнее

Обратите внимание, внутри подключаемого файла нам нужно писать теги script. Мало того, если мы их напишем в файле .js, то наш код JavaScript перестанет работать, и мы получим ошибку JavaScript.

Ну и само подключение внешнего файла JavaScript:

<script src=»scripts.js»></script>

<script src=»scripts.js»></script>

Подключение скрипта JavaScript

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

Подключение скрипта JavaScript

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Узнать подробнее

Подключение скрипта JavaScript

На что стоит обратить внимание при подключении скриптов? Мы подключили скрипт в конце документа, перед закрывающим тегом body. Ранее практиковалось подключение скриптов в начале документа, в тегах head. Однако сегодня так делать не рекомендуется и скрипты рекомендуют подключать именно в конце документа. Почему так?

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

Подключение скрипта JavaScript

Что мы видим? Ничего, кроме модального окна. Никакого контента нет. В этом и суть. Когда внешний скрипт подключается в начале документа, браузер начинает загружать его и пытается выполнить. И пока загрузка и выполнение скрипта не будут завершены, браузер не покажет часть документа, следующую после подключаемого файла.

А теперь представьте, что этот файл по каким-то причинам загружается крайне медленно. В результате пользователю придется ждать, и порой он может просто не дождаться. Именно поэтому скрипты рекомендуется подключать в конце документа, перед закрывающим тегом body.

Но что делать, если некая библиотека требует подключения именно в начале документа? Как быть в этом случае? В этом случае нас выручат атрибуты async и defer, которые позволяют браузеру загружать скрипты асинхронно, т.е. браузер начнет загружать скрипт, но при этом не остановит показ документа. Попробуем поочередно использовать данные атрибуты:

<!— вариант 1 —> <script src=»scripts.js» async></script> <!— вариант 2 —> <script src=»scripts.js» defer></script>

<!— вариант 1 —>

<script src=»scripts.js» async></script>

<!— вариант 2 —>

<script src=»scripts.js» defer></script>

В обоих случаях мы получим одинаковый результат, скрипт подключается, не прерывая показ документа:

Подключение скрипта JavaScript

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

На этом статья подошла к концу. Если вы хотите больше узнать о JavaScript, тогда рекомендую обратить свое внимание на уроки по JavaScript и отдельный курс по языку JavaScript. Удачи!

Подключение скрипта JavaScript

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Узнать подробнее Подключение скрипта JavaScript

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Смотреть

Как подключить JS в другой JS — kulibaba.net

Как подключить JS в другой JS

Если вы сталкивались в своей жизни с javascript, то, наверняка, вы подключали его к своей HTML-странице подобным образом:

 


<script src="/js/my.js" type="text/javascript"></script>

 

Но как быть, если вам необходимо подключить скрипт внутри другого скрипта?

 

Тут возникает проблема: в JS нет подобных средств, как в других языках. (#include в C, import в java…)

 

Но можно написать свою функцию, которая будет справляться с поставленной задачей на все 100%!

 


 function include(url) {
        var script = document.createElement('script');
        script.src = url;
        document.getElementsByTagName('head')[0].appendChild(script);
    }

Вызов этой функции происходит самым простым способом:

 


include("/js/script.js");

 

 


17 комментариев:

1) мишка:(2014-02-23 23:16:30)

спасибо!


2) сергей:(2014-05-30 11:58:52)

вот это дело. хотя наверняка не заработает


3) гость:(2014-06-13 13:13:55)

а если скрипт на другом сервере?


4) Эмир:

(2014-08-06 11:06:42)

«а если скрипт на другом сервере?»
то же самое


5) Антон:(2014-09-08 11:04:52)

Спасибо. все работает


6) Сергей:(2014-12-10 14:58:21)

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


7) андрей:(2015-12-10 07:13:31)

хех я доигрался рекурссию учудил, все зависло


8) sat:(2016-06-14 18:14:11)

Такой приём принято называть псевдо-ajax, поскольку файл скрипта добавляется асинхронно. Нет никаких гарантий, что выполняющийся код увидит подключенную таким образом библиотеку.


9) дима:(2016-08-03 10:42:22)

спасибо


10) Иосиф:(2017-01-19 12:15:24)

не для всех случаев годится, т.к. к моменту загрузки этого скрипта,ранее инициализированные данные — данные из вновь подключенного не увидят.


11) mebel-catalog.blogspot.ru:(2017-04-22 08:22:47)

Мебель -> mebel-catalog.blogspot.ru


12) page.if.ua:(2018-03-02 17:54:16)

page.if.ua


13) mabufs.com:(2018-05-04 09:45:51)

mabufs.com


14) LANVisor:(2018-10-06 17:06:00)

посмотри здесь, может пригодится LANVisor.ru


15) тест:(2019-07-23 14:55:33)

тест


16) rardPag:(2019-10-23 23:27:44)

hi 🙂 bross 🙂


17) rardPag:(2019-11-04 18:33:59)

hi 🙂 bross 🙂


javascript — Подключение нескольких JS файлов

Stack Overflow на русском

Loading…

  2. 0
  3. +0
    • Тур Начните с этой страницы, чтобы быстро ознакомиться с сайтом
    • Справка Подробные ответы на любые возможные вопросы
    • Мета Обсудить принципы работы и политику сайта
    • О нас Узнать больше о компании Stack Overflow

Способы подключения javascript | Vaden Pro

Создавая скрипты для страниц мы можем не только вставлять их в код страницы, а и подключать js внешним файлом. Второй подход обычно используется когда нам необходимо подключать объемные скрипты, чтобы не «загрязнять» код страницы.

Рассмотрим же особенности каждого типа подключения скриптов подробнее.

Как вставить скрипт в код страницы?

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

К примеру:

<!DOCTYPE HTML>
<html>
<head>
  <meta charset="utf-8">
  <title>Пример скрипта</title>
 
  <!--Вставляем код первый раз-->
  <script>
    alert('Сообщение 1');
  </script>
 
</head>
<body>
  <p>Текст до кода</p>
 
  <!--Вставляем код второй раз-->
  <script>
    alert('Сообщение 2');
  </script>
 
  <p>Текст после кода</p>
</body>
</html>

Те, кто изучал javascript ранее могут сказать, что в примере допущена ошибка и при использовании тега script необходимо добавлять атрибут type=»text/javascript», на самом деле ошибки тут нет.

В стандарте html4 и ранее указание атрибута type действительно было обязательно. С выходом в мир html5 все стало немного проще и теперь нам достаточно просто указать сам тег script, чтобы браузер интерпретировал код верно.

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

На заметку:

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

  • Загружая страницу интерпретатор идет по коду построчно, потому первыми активируются скрипты стоящие в коде раньше (в нашем случае скрипт из «головы» документа).
  • После загружается часть страницы до второго скрипта.
  • Происходит исполнение второго скрипта.
  • Заканчивается загрузка страницы.

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

На заметку:

Чтобы избежать  появления на экране непонятных кракозябр, вместо нужных нам символов, не забывайте указывать странице кодировку utf-8 в теге meta. Данная проблема с камим скриптам отношения не имеет ни какого, но позволяет избежать непонимания причин коверкания символов браузерами.

Также стоит проверить, что вы сохраняете файлы в кодировке utf-8 иначе при открытии его следующий раз может быть исковеркан уже сам код.

Как подключить внешние файлы скриптов?

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

Это делается при помощи атрибута src тега скрипт. Браузер, встретив в любом месте кода страницы конструкцию:

<script src="путь-к-скрипту/script.js"></script>

Скачает файл script.js и выполнит код содержащийся в нем.

Страницы не имеют ограничений на количество подключаемых файлов js. Для подключения нескольких файлов скриптов мы просто используем несколько тегов script указывая каждому путь к необходимому нам файлу.

Преимуществом данного метода подключения javascript является то, что обычно браузер подгружает файл скрипта один раз и сохраняет его в кеш, не тратя после время на его скачивание при серфинге пользователя по другим страницам сайта или же обновлении текущей. Это на порядок ускоряет скорость обработки страниц сайта браузерами.

Стоит обратить внимание на тот факт, что код внутри тега у которого указан атрибут src будет проигнорирован.

<script src="script.js">
  alert(какой-то код);
</script>

При таком использовании тега будет исполнен код из файла script.js, но вывода сообщения «какой-то код» не произойдет, поскольку код внутри тега будет проигнорирован.

Чтобы все сработало нужно использовать следующую конструкцию:

<script src="script.js"></script>
<script>
  alert(какой-то код);
</script>

Оценок: 2 (средняя 5 из 5)

  • 3319 просмотров

Понравилась статья? Расскажите о ней друзьям:

Еще интересное

Подключение JavaScript кода

JavaScript может быть встроен в HTML документ с помощью тега <script>. Пример:

<!DOCTYPE html>
<html>
    <head>
      <title>Страница с JS кодом</title>
    </head>
    <body>
        <script type="text/javascript">
          alert('Hello World!')
        </script>
    </body>
</html>

Такие вставки кода будут исполняться по мере того как браузер встречает их в HTML документе. На время исполнения кода браузер приостановит парсинг и отрисовку страницы. А это значит что:

  1. DOM дерево еще не будет целиком построено
  2. Пользователь увидит отрисованной лишь верхнюю часть страницы
  3. JS код не сможет работать с тегами из нижней части документа

Можно подключить JavaScript код по URL адресу, таким образом:

<script src="http://example.com/jquery.js"></script>

Встретив такой тег в HTML документе браузер приостановит парсинг страницы дожидаясь окончания скачивания файла из сети, его разбора и исполнения JS кода. По этой причине стараются подключать JS файлы в конце HTML документа, как можно ближе к закрывающему тегу </body>. Так пользователь увидит отрисованную страницу раньше чем успеет загрузиться и выполниться весь необходимый JS код. Быстрым в работе сайтом приятно пользоваться, за это стоит бороться.

Полезно пользоваться популярными CDN для подключения библиотек jquery, lodash и пр. Браузеры кэшируют такие файлы, что снижает нагрузку на канал пользователя, увеличивает скорость отрисовки страницы, ведь теперь не нужно ждать скачивания файла. Пример:

<script src="http://code.jquery.com/jquery-3.1.1.min.js"
        integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
        crossorigin="anonymous"></script>

Другие полезные приемы:

  1. Атрибут async для асинхронного подключения JS файлов. Так подключают Яндекс Метрику, Google Analytics и не только;
  2. Склейка нескольких JS файлов в один. Для этого используют специальные инструменты коих развелось пруд пруди: Webpack, Gulp, Grunt;
  3. Минификация JS кода. Выкидываются пробелы и комментарии, меняются названия переменных на более короткие, происходит еще много разной магии. Эта процедура также требует спец.инструментов;
  4. Кэширование JS файлов в браузере навечно с одновременным версионированием — добавлением в имя файла хэша: jquery.kjb234kjb23.js. При любом изменении JS кода создается новый файл c новым хэшом в названии.

Попробуйте бесплатные уроки по Python

Получите крутое код-ревью от практикующих программистов с разбором ошибок и рекомендациями, на что обратить внимание — бесплатно.

Переходите на страницу учебных модулей «Девмана» и выбирайте тему.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *