Подключение внешнего файла JavaScript

Подключение внешнего файла JavaScript

Здравствуйте! В  уроке  Первая программа на Javascript  мы  свами создали веб-страницу index.html. Теперь давайте для наших скриптов  создадим в каталоге app новый подкаталог. Дадим ему название   js.  В этом каталоге будут сохраняться наши скрипты. Давайте в этом подкаталоге создадим новый файл, имя у которого будет myscript.js. Все файлы с кодом на языке  javascript должны иметь  расширение .js. Таким образом  у получится такая структура в каталоге app:

 

Подключение внешнего файла JavaScript

Откройте файлы myscript.js в редакторе и напишите такой код:

var date1 = new Date(); // текущая дату
var time1 = date1.getHours(); // время в часах
if(time1 < 13) // сравниваем время с число 13
    alert('Доброе утро!'); // если время меньше 13
else
    alert('Добрый вечер!'); // если время равно 13 и больше

 

Да и не забывайте про кодировку лучше устанавливать в utf-8.

В этом примере уже больше выражений javascript. Первое выражение сохраняет дату  в переменной date1 . Далее получаем время в часах.  После чего  сравниваем  время с числом 13 и в зависимости от результата проверки выодим сообщение или «Доброе утро» либо «Добрый вечер».

Теперь самое интересное давайте  подключим этот файл на html-страницу index.html:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
<title>JavaScript пример</title>
</head>
<body>
    <h2>Моя первая программа на JavaScript</h2>
    <script src="js/myscript.js"></script>
</body>
</html>

Просмотреть  пример

Для подключения внешнего файла javascript к веб-странице, также используется тег script, но у него есть атрибут src (читайте про HTML-атрибуты в этой статье) и вот в этот самый атрибут нужно и передать путь к файлу со скриптом, относительно веб странице. Например в нашем примере это будет «js/myscript.js».  Можно указывать и абсолютный путь, если файл находится на другом сервере в сети Интернет. Например «<script src=»http://api.google.com/jquery.js»></script>».

Рассмотрим преимущества подключения внешнего файла javascript:

  • Вы можете использовать повторно один и тот же код на другой веб-странице достаточно просто подключить к ней файл.
  • Браузер как правило внешние файлы кеширует и может использовать без перезагрузки страницы , что существенно снижает время загрузки страницы
  • Да и код веб-страницы становится чище в плане отстуствия тегов script и последующего javascript кода.
Читайте также  Работа в консоле браузера, console.log.

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

 

Асинхронные скрипты: defer/async

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

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

Вот в примере пока все зайчики не будут посчитаны – нижний  абзац не будет показан:

<!DOCTYPE HTML>
<html>
<head>
  <meta charset="utf-8">
</head>
<body>
  <p>Начинаем считать:</p>
  <script>
    alert( 'Первый зайчик!' );
    alert( 'Второй зайчик!' );
    alert( 'Третий зайчик!' );
  </script>
  <p>Зайчики посчитаны!</p>
</body>
</html>

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

И следует заметить, что если скрипт внешний, то пока он не выполнится остальная часть страницы не загрузится.

Вот как здесь в примере пока не загрузится и не выполнится  скрипт script.js, содержимое <body> будет скрыто:

<html>
<head>
  <script src="script.js"></script>
</head>
<body>
  Этот текст не будет показан, пока браузер не выполнит script.js.
</body>
</html>

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

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

А вот решить такую проблему помогут атрибуты async или defer:

Атрибут async
Поддерживается всеми браузерами, кроме IE9-. Скрипт будет выполняться полностью асинхронно. Таким образом, при <script async src=»…»> браузер не останавливает обработку страницы, а идет дальше загружать страницу и параллельно выполняет скрипт.
Атрибут defer
Поддерживается всеми браузерами, включая самые старые IE.  Сценарий выполняется асинхронно,но имеются 2  отличия от async.

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

Вот в примере (с async) первым выполнится, тот скрипт  который раньше загрузится:

<script src="one.js" async></script>
<script src="second.js" async></script>

А в вот в коде (с defer) первым выполнится всегда one.js, а вот  скрипт second.js, даже если загрузился раньше, будет его ждать.

<script src="one.js" defer></script>
<script src="second.js" defer></script>

Поэтому атрибут defer следует использовать только  в тех случаях, когда второй скрипт second.js  будет зависит от первого first.js, например – использует модуль, описанный первым скриптом.

Читайте также  Выполнение кода javascript

Ну и второе отличие – скрипт с defer выполнится, когда вся  веб-страница будет обработана  браузером.

Например, если документ достаточно большой…

<script src="async.js" async></script>
<script src="defer.js" defer></script>

Много много много букв
…То скрипт async.js выполнится, как только загрузится – возможно, до того, как весь документ готов. А вот defer.js будет ждать готовности всего документа.

Это удобно если нужно работать с элементами веб-страницы.

async вместе с defer

Если вы одновременно укажете и async и defer в  браузерах будет использован только async, а вот в браузере  IE9- –  defer (async не воспринимает).

Атрибуты async/defer – только для внешних скриптов

Атрибуты async/defer работают только если подключаются внешние скрипты, т.е. имеющие src.

При попытке назначить на <script>…</script>, будут проигнорированы.

Тот же пример с async:

<p>Эта информация теперь не будет ждать, пока будет загружен весь скрипт...</p> <script async src="https://js.cx/hell/ads1.js?speed=0"></script> <p>...Очень важная информация!</p>

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

Забегая вперёд

Для тех,кто  знает, что теги <script> можно добавлять при помощи  javascript, то эти скриптв будут вести  себя так же, как и async.

А для сохранения порядка  выполнения и  добавить несколько скриптов, которые  будут выполнятся один за другим, надо использовать свойство script.async = false.

Выглядит это будет  примерно так:

function addScript(src){
  var script = document.createElement('script');
  script.src = src;
  script.async = false; // чтобы гарантировать порядок
  document.head.appendChild(script);
}

addScript('first.js'); // загружаться эти скрипты начнут сразу
addScript('second.js'); // выполнятся, как только загрузятся
addScript('third.js'); // но, гарантированно, в порядке 1 -> 2 -> 3

Итого

  • Скрипты можно вставлять на страницу с помощью тега <script>, либо подключаться как внешние файлы с помощью все того же <script>, но уже с указанием атрибута src, в котором указывается путь к скрипту.
  • Атрибуты async и defer используются для асинхронной загрузки страницы.
  • Разница между атрибутами  async и defer: атрибут defer гарантирует  последовательность скриптов, а async – нет. Кроме того, defer будет  всегда ожидать, пока весь HTML-документ будет готов, а async – нет.

Задача.

Какой  из скриптов будет выполнен первым?

В примере  подключены 2 скрипта one.js и many.js.

Если предположить, что one.js загружается гораздо быстрее, чем many.js – какой из них  выполнится первым?

<script src="many.js"></script>
<script src="one.js"></script>

А если так?

<script async src="many.js"></script>
<script async src="one.js"></script>

А в этом случае?

<script defer src="many.js"></script>
<script defer src="one.js"></script>

Ну и в заключении посмотрите видео как подключить js файл к веб-документу

 

Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.

Плюсануть
Поделиться

Об авторе

admin administrator

Сообщить об опечатке

Текст, который будет отправлен нашим редакторам: