Как подключить js к html src

Атрибут src

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

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

Синтаксис

Значения

В качестве значения принимается полный или относительный путь к файлу. Файл должен иметь расширение .js.

Значение по умолчанию

HTML5 IE Cr Op Sa Fx

       
.
  

Урок №2: подключение JavaScript к веб-странице

Есть несколько способов подключить событие JavaScript к HTML-документу. На данном уроке мы рассмотрим все способы подключения JavaScript-кода к HTML странице. Стоит заметить, независимо от типа подключения, всегда используется парный тег Script. Javascript-код может находиться как на самой странице (в теле страницы Body или в контейнере Head), так и во внешнем файле, который подключается с помощью ссылки на него в контейнере Head. Рассмотрим каждый способ подключения JavaScript к веб-странице более подробно.

JavaScript в контейнере body

Данный способ используется редко, так как браузеры считывая HTML-код и дойдя до тега script, прорабатывают событие и только после этого загружают остаток HTML-кода. Для примера создадим программу всплывающих окон.

Заголовок

for(var i=1; i alert(«Всплывающее окно номер «+i+», нажмите пожалуйста — Ок!»)
>

. Остальной контент веб-страницы.

В данном примере браузер загрузит заголовок и перейдет к событию, и до тех пор, пока пользователь не нажмет «Ок» в двух, поочередно всплывающих окнах, остальной контент веб-страницы не будет загружен. Данный урок посвящен именно подключению JavaScript к HTML-документы, поэтому элементы программы рассматривать не будем.

JavaScript в контейнере head

Данный способ более популярный, так как позволяет отделить JavaScript от документа, что облегчает работу с ним. Раньше в данном случае у тега script должен быть задан параметр language, который указывает язык, на котором написан скрипт. Сейчас используется в основном параметр type=»text/javascript», однако и без него все работает. И все же рекомендуется использовать стандарты записи.

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

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

Как и в случае с таблицами стилей, скрипты можно хранить во внешнем файле. Такой файл можно создать в обычном «Блокноте», сохранив его с расширением .js (например, script.js). При написании скриптов в отдельном файле не нужно брать программу в парный тег script. Подключается такой файл с помощью тега script и его параметра src, в значении которого необходимо указать путь к вашему файлу со скриптами. Например:

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

К счастью все современные браузеры понимают JavaScript, и его подключение не должны вызвать вопросов. Далее рассмотрим виды литералов в JavaScript: Литералы

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

В одной из предыдущих статей( тык ), я рассказывал про братков JS. В рассказе о CSS я показывал, что каскадные таблицы стилей могут подключаться как напрямую в HTML-страницу(внутрь тега style), так и отдельным файлом с форматом расширения *.css.

С JavaScript дела обстоят почти так же. Его можно подключить тоже двумя способами.

1-ый способ подключения

С помощью тега js-код . Т.е, весь код, который мы будем писать на JS, мы должны поместить внутрь этого тега.

Пример:

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

Здесь же мы можем разместить тег в любом месте HTML-страницы и все будет работать. Но, запомни, js-код лучше всего размещать в конце страницы, перед . Почему? Потому что, ёпта. Потому что на странице может быть до хера контента, например, текста, картинок, видео и всякой другой хероты, которая может не успеть загрузиться на страницу, а ты через JS уже будешь пытаться как-то управлять этими данными. И, естественно, ты пойдешь на хер и никакой код не выполнится. Все что произойдет в лучшем случае – браузер засрет тебе консоль ошибками(не критично), а в худшем – на твоем будущем Facebook может что-то знатно наебнуться.

Еще одна причина, по которой нужно привыкать подключать JS в конце HTML-страницы заключается в том, что когда ты уже начнешь пилить свой проект, код будет разрастаться, а вместе с ним и размер файла с кодом. Файл начнет превышать 100 КВ, а со временем будет становится все больше и больше и в итоге может весить больше 1 МВ, особенно, если ты будешь в будущем использовать различные фреймворки(об этом как-нибудь расскажу). И, если ты подключишь этот файл вверху страницы, то ничего на странице не будет загружаться, никакой контент, пока не загрузится JS-код(это можно настроить, конечно, но все же).

Запоминай эти советы, пригодятся и не тупи.

2-ой способ подключения

Все через тот же тег , но с одним нюансом.

Тебе нужно создать файл с расширением .js и подключить его через атрибут src.

Создаем файл script.js со следующим содержимым:

alert('Ку-ку, ёпта');

Подключаем этот файл с помощью тега через атрибут src.

Код HTML-страницы:

Уловил? Все очень просто. Указываешь у тега script атрибут src и в него прописываешь относительный путь к файлу .js. Не забывай про кавычки!

Эффект и в 1-ом и 2-ом случае абсолютно одинаковый. Какой способ использовать лучше? Конечно же с подключением файла. Этот способ позволяет не разводить «портянку» из кода в разметке страницы.

Ты же увидел у тега script в примере выше атрибут type=»text/javascript»? Это атрибут, который уточняет для браузера, что это JS-код. Его совсем не обязательно писать, но это является хорошей практикой.

Теперь о главном – мы же написали целую строчку кода на JS.

alert('Ку-ку, ёпта');

Что же она делает? Она просто-напросто выводит во всплывающем окне то, что ты ее попросишь вывести.

Это может быть текст или какое-либо арифметическое действие, например:

alert(2 + 2); //выведет 4

Окно выглядит примерно так(зависит от операционки):

Дальше поступаем так.

Ты идешь вот по этой ссылке:

https://repl.it/@JSstupid/Learn-2-JavaScriptStupid и смотришь как и че работает, и пытаешься сам вывести в окне надпись «Я мамкин хацкер!«.

А я готовлю следующий материал, чувак. Удачи и приятных занятий!

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

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

 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 документа, как можно ближе к закрывающему тегу . Так пользователь увидит отрисованную страницу раньше чем успеет загрузиться и выполниться весь необходимый 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

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

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