Всех друзей поздравляем с Новым годом! Всего вам самого наилучшего! Всех благ, здоровья а материальное приложится!
СКРИПТЫ althtmlcssphpjsblog

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

Поддержи проект!!!

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

Внешние скрипты JavaScript подключение примеры

  1. Что такое внешнее подключение скриптов!? -> Синтаксис
  2. Абсолютный путь внешнего подключения скриптов
  3. Вид пути внешнего подключения скрипта относительно текущего документа
  4. Три вида внешних подключений скриптов
  5. В чем отличие async и defer атрибутов!?
  6. При внешнем подключении, скрипт внутри тега не выполнится
  1. Что такое внешнее подключение скриптов!? Синтаксис.

    Внешнее подключение скриптов - это не означает, что скрипты подключены извне! Любой скрипт, подключенный по ссылке называется внешним.

    Синтаксис внешнего подключения скриптов:

    <script src="/здесь_путь/script.js"></script>

    Сколько вариантов подключения вариантов подключения скриптов существует!?

  2. Абсолютный путь внешнего подключения скриптов

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

    <script src="https://dwweb.ru/__a-data/___new_dw/__template/main.js"></script>

    Второй вариант внешнего подключения скрипта

    Если мы из пути уберем https , то скрипт все равно подключится:
    <script src="//dwweb.ru/__a-data/___new_dw/__template/main.js"></script>

    Третий способ внешнего подключения скрипта по абсолютному пути

    Если мы уберем домен у ссылки вообще, то такое внешнее подключения скрипта тоже будет работать!:

    <script src="/__a-data/___new_dw/__template/main.js"></script>
    Выбор редакции

    Прим автора

    Наиболее удачный вариант внешнего подключения - это подключение скриптов через абсолютный путь!

    В чем его удобство!? В том, что он будет работать всегда, вне зависимости ни от каких условий!

  3. Вид пути внешнего подключения скрипта относительно текущего документа

    Наверняка вы встречали такой вид подключения внешних скриптов с точками и слешем:

    <script src="../../../../main.js"></script>

    Прим автора

    Одно время я пользовался именно таким способом - почему я это делал!? Загадка покрытая мраком времен! Самое неудобное и глупое подключение внешних скриптов!

    Почему мне такое подключения не нравится!? Потому, что в каждой папке, на разном удалении от корневой папки , количество слешей и точек разное!

  4. Три вида внешних подключений скриптов

    О первом виде подключения мы уже рассказали выше это:

    <script src="/здесь_путь/script.js"></script> Когда загрузка HTML дойдет до скрипта, то браузер остановится в ожидании выполнения скрипта!

    Существует атрибут defer, который добавляется в тег script

    <script src="/здесь_путь/script.js" defer></script> Скрипт сработает независимо от загрузки HTML кода.

    Существует ещё атрибут async, который также добавляется в тег script

    <script src="/здесь_путь/script.js" async></script> Кроме браузера IE9. При обнаружении <script async src="..."> браузер не останавливается в ожидании выполнения скрипта, а продолжает загружать HTML.

  5. В чем отличие async и defer атрибутов!?

    Атрибут defer - загрузка скрипта внешнего подключения выполняется строго по иерархии, сперва будет выполняться то подключение, что стоит выше, загрузка HTML будет выполняться независимо от JavaScript :

    <script src="1.js" defer></script>
    <script src="2.js" defer></script>
    Дойдя до внешнего скрипта 1.js - браузер остановится в ожидании выполнения, и только после этого перейдет к 2.js Это может пригодиться в том случае, когда второй скрипт зависит от первого!

    Атрибут async - загрузка скрипта внешнего подключения выполнится индивидуально вне зависимости друг от друга и вне зависимости от HTML!

    <script src="1.js" async></script>
    <script src="2.js" async></script>

  6. При внешнем подключении, скрипт внутри тега не выполнится

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

    <script src="script.js">

    alert("Привет мир!"); // alert не сработает,т.к. указан src

    </script>

    Так правильно:

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

    <script>alert("Привет мир!"); </script>


Вас может еще заинтересовать список тем : #JS | #JS_BOOK |
Последняя дата редактирования : 2020-02-27 10:56
https://dwweb.ru/comments_1_5/include/img/hand_no_foto.png
no
no
Еще никто не прокомментировал! COMMENTS+   BBcode
аватар
🞨
Загрузить свой аватар
(max ширина, высота = 200px)

Подписаться + =
Теги:

Последние комментарии :
Марат :
12/06/2020 10:07
Всегда пожалуйста! Приходите еще!!!
подробнее.
Александр :
04/06/2020 01:42
Спасибо
подробнее.
admin :
20/05/2020 10:36
Как бы смешно это не звучало! Но! Запускается новая система комментирования COMMENTS+ 1.5. в тестовом режиме!От…
подробнее.
Паула :
21/05/2020 04:48
Вообще мне очень нравится, что вы делаете! И ваш подход! И ваш стиль!И не обращайте внимание на всяких…
подробнее.
admin :
21/05/2020 05:03
Я Вас помню! Вы частенько оставляли сообщения на сайте!Все никак не мог спросить!? У Вас есть сайт -> зачем это…
подробнее.

НАШИ ПРОЕКТЫ : Проекты находятся в разной степени готовности (просто их столько, что времени не хватает…) Все статьи авторские, при копироавании активная ссылка обязательна DwWeb.ru! © 2015 - 2020 Мы на лучшем хостинге -> ruweb