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

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

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

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

Внешние скрипты подключаются с помощью тега script:

<script></script>

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

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

  1. Что такое внешний скрипт!?

    Для начала, дадим определение : "Что такое внешний скрипт"!?
    Внешний скрипт это скрипт, который располагается не внутри текущего документа, а в отдельном файле.

    Если вы сейчас, прямо здесь нажмете сочетание клавиш "ctrl + U", то увидите код страницы и выделено красным - это и есть файл, в котором есть скрипт, который и будет называться "внешний скрипт":

    Эту картинку, скриншот, можно увеличить в отдельном окне нажмите по нему!Что такое  внешний скрипт!?

    Что такое внешнее подключение скриптов!? Синтаксис.

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

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

    <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>


Последняя дата редактирования : 11.02.2021 20:33
//dwweb.ru/comments_1_5/include/img/hand_no_foto.png
no
no
Еще никто не прокомментировал! COMMENTS+   BBcode
аватар
🞨
Загрузить свой аватар
(max ширина, высота = 200px)

Подписаться + =
Теги:
script как подключить html подключить script как подключить script js как подключить script js к htmlкак подключить js через путь

Счетчик в график :

Построение гравиков
Основа для графика : счетчик посещаемости.
Последние комментарии :
Марат :
23/07/2021 10:58
Сам офигеваю...
подробнее.
александр анатольевич таширев :
21/07/2021 02:47
прикольно
подробнее.
Марат :
17/07/2021 04:14
Рад, что помог! Приходите ещё!
подробнее.
Slomal Plintus :
16/07/2021 06:41
спасибо за ответ, очень помогло!
подробнее.
Марат :
12/06/2021 10:04
Рад, что понравилось!Приходите ещё!
подробнее.

текст_ссылки