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

Оцените материал
(0 голосов)

Здравствуйте! В  уроке  Первая программа на 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 кода.

Поэтому желательно подключать к веб-странице внешние файлы 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, например – использует модуль, описанный первым скриптом.

Ну и второе отличие – скрипт с 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 файл к веб-документу 

Десерт на сегодня видео о велосипедистах-экстремалах

 

Прочитано 277 раз Последнее изменение Воскресенье, 13 августа 2017 15:55
Другие материалы в этой категории:
Понравилась запись? Подпишитесь на обновления по почте:

Нетология

TemplateMonster

Поиск по сайту

Связной трэвел

Google+