Как подключить JS в Bitrix
В статье мы расскажем как подключить свой JS файл в Битриксе. Покажем вам несколько способов подключения файлов стилей и скриптов при верстке шаблонов в системе управления 1С-Битрикс. Это пригодится, если вы получаете готовую верстку в HTML/CSS, чтобы грамотно подключить файлы стилей, js и мета теги при интеграции шаблона в Битрикс.
Как подключить свой JS файл в Битриксе
Первый способ – прописать в коде.
Такие скрипты не кешируются и не минифицируются битриксом. С другой стороны, к ним можно добавить свойства defer, async или свойство data-skip-moving=»true», про которое будет сказано ниже.
Второй способ
Если код относится к шаблону конкретного компонента, можно в папке шаблона создать файл script.js. Такой файл будет подключен автоматически, вместе с компонентом.
Третий способ
Если вам не достаточно одного script.js, можно добавить дополнительные файлы скриптов с помощью
$this→addExternalJs(SITE_TEMPLATE_PATH . «/newscript.js») в template.php
Четвёртый способ
Если скрипт нужно добавить вне шаблона, или один и тот-же скрипт используется в разных шаблонах, можно использовать функцию Asset::getInstance()→addJs(путь к файлу);, которая добавляет соответствующий файл в секцию head документа. Метод этот является заменой методу $APPLICATION→AddHeadScript(‘scr’);
используется следующим образом
use Bitrix\Main\Page\Asset;
Asset::getInstance()->addJs(SITE_TEMPLATE_PATH . «/fix.js»);
Библиотеку jquery можно подключить с помощью функции CUtil::InitJSCore(array(‘jquery’)). С её помощью можно добавляются различные библиотеки Битрикса, например — медиаплеер.
С помощью этой функции вы можете подключать и свои собственные библиотеки. Для этого вам нужно зарегистрировать её, разместив в init.php такую конструкцию
$arJsConfig = array(
‘Название_библиотеки’ => array(
‘js’ => ‘Путь к файлу js’, // ‘/bitrix/js/custom/main.js’
‘css’ => ‘Путь к файлу css’, // ‘/bitrix/js/custom/main.css’
‘rel’ => array(),
)
);
foreach ($arJsConfig as $ext => $arExt)
\CJSCore::RegisterExt($ext, $arExt);
>
Это полезно, если скрипт нужен в нескольких шаблонах сайта
Использование defer
Чтобы переместить файлы javscript в конец сайта нужно включить опцию Переместить весь Javascript в конец страницы в разделе Настройки>Настройки продукта>Настройки модулей>Главный модуль. Скриптам, которые должны остаться на месте, нужно прописать data-skip-moving=»true».
Подключение дополнительных скриптов позволит вам оптимизировать сайт. Не исключайте такую возможность — она не требует больших трудов и по итогу вы получаете быстрый сайт.
Также советуем вам просмотреть интересный кейс по созданию интернет магазина на Битрикс.
Знакомство с JavaScript. Подключение к странице
JavaScript (сокращённо JS) – это язык программирования , который изначально был придуман для браузера, чтобы придать страницам интерактивность и динамичность .
Программы написанные на JavaScript называются сценариями или скриптами . Добавление их на страницу выполняется через тег . При этом их можно как непосредственно вставлять на веб-страницу, так и размещать в отдельном файле. Каждый браузер имеет интерпретатор JavaScript, с помощью которого он выполняет этот код.
Потребность в создании языка программирования для веб-браузера возникла в 90-е годы. В это время на веб-страницах хотелось делать уже намного больше, чем просто выводить статичный контент.
Данный язык изначально был создан Бренданом Айком в 1995 году для браузера Netscape и назывался он Mocha. Но после ряда переименований он обрёл окончательное имя – JavaScript . В начале он имел очень маленькую функциональность и в основном использовался для добавления на страницу интерактивности. Но со временем язык стал развиваться и позволять делать всё больше и больше.
В 1996 году язык JavaScript был стандартизован компанией Ecma, которая занимается стандартизацией информационных и коммуникационных технологий. Сама спецификация была названа ECMAScript или сокращённо ES. По сути, JavaScript является реализацией спецификации ECMAScript. Новые версии ECMAScript выходят ежегодно и добавляют в язык новые возможности.
- ECMAScript 1 – июнь 1997;
- ECMAScript 2 – июнь 1998;
- ECMAScript 3 – декабрь 1999;
- ECMAScript 5 – декабрь 2009;
- ECMAScript 5.1 – июнь 2011;
- ECMAScript 2015 (ES2015, ECMAScript 6, ES6) – июнь 2015;
- ECMAScript 2016 (ES2016, ECMAScript 7, ES7) – июнь 2016;
- ECMAScript 2017 (ES2017, ECMAScript 8, ES8) – июнь 2017;
- ECMAScript 2018 (ES2018, ECMAScript 9, ES9) – июнь 2018;
- ECMAScript 2019 (ES2019, ECMAScript 10, ES10) – июнь 2019;
- ECMAScript 2020 (ES2020, ECMAScript 11, ES11) – июнь 2020;
- ECMAScript 2021 (ES2021, ECMAScript 12, ES12) – июнь 2021.
ECMAScript – это стандарт JavaScript, который описывает полностью все функции JavaScript. Браузеры, Node.js применяют это стандарт и реализуют его поддержку.
Начиная с версии ES6 язык значительно преобразился, в нём появился новый синтаксис для написания сложных приложений (классы, модули, итераторы, циклы, генераторы в стиле Python, стрелочные функции, ключевые слова let , const и многое другое). С выходом версии ES6 весь код JavaScript принято делить на modern (современный) и классический (до ES6) .
В настоящее время JavaScript применяется не только в веб-браузере. С помощью него можно писать десктопные и мобильные приложения, использовать его на сервере (Node.js).
Язык JavaScript, как и другие языки программирования, имеет некоторые свои особенности. Среди основных – слабая типизация и динамическое приведение типов .
JavaScript – это не Java , хоть он и унаследовал некоторые синтаксические конструкции этого языка. Такое название данный язык получил в силу некоторых исторических причин. Одной из них являлось то, что изначально в качестве языка, который должен был быть доступным в браузере, хотели сделать Java . Но впоследствии компания Netscape отказалась от этой мысли, из-за того, что Java был слишком большим и сложным.
Виды браузеров и браузерных движков
В настоящее время существует большое количество браузеров . Любой современный браузер основывается на движке . Движок – это часть браузера, которая преобразует HTML, CSS, JavaScript, изображения и другую информацию в интерактивную картинку .
Основные современные движки и браузеры, которые их используют:
- Blink (Google Chrome, Opera, Яндекс.Браузер и др.);
- Gecko (Mozilla Firefox, Waterfox и др);
- WebKit (Safari, Maxthon, Vivaldi и др.);
- EdgeHTML (Microsoft Edge).
Подключение JavaScript к странице
Добавление JavaScript на страницу выполняется с помощью тега .
Первый способ – это вставка кода непосредственно на страницу . Выполняется это между открывающим и закрывающим тегом .
Второй способ заключается в использовании отдельного файла с расширением js . В данный файл необходимо поместить код JavaScript, а затем подключить его к странице с помощью . Путь к файлу задаётся с помощью атрибута src .
С помощью этого способа можно подключить JavaScript к большому количеству HTML страниц. Это позволяет при изменении кода не править его на каждой странице.
можно поместить внутрь любого элемента, но рекомендуется непосредственно в или :
Знакомство с JavaScript. Подключение к странице --> . --> Если подключить скрипт с помощью атрибута src и дополнительно ещё указать некоторый код между открывающим и закрывающим тегом script , то код, который вы указали непосредственно, будет проигнорирован, т.е. он не выполнится.
Как выполняются скрипты на странице?
Когда браузер читает страницу и встречает на ней script , он останавливает дальнейшую загрузку страницы и выполняет, подключенный с помощью этого элемента JavaScript. После чего приступает к дальнейшей загрузке страницы:
Знакомство с JavaScript. Подключение к странице --> Introduction to JavaScript
В этом примере используются 2 метода:
- alert() – для вывода на экран предупреждения с кнопкой «ОК»; данное предупреждение приостанавливает дальнейшую загрузку страницу;
- document.write() – для вывода текста в текущее место HTML, если страница ещё не загрузилась.
При загрузке этого документа, когда браузер встретит alert() , он выведет на экран предупреждение «HEAD: Hello, world!». Кроме этого, он приостановит дальнейшую загрузку страницы , пока пользователь не нажмёт на кнопку «ОК».
На этом этапе загрузки страницы:
После нажатия на кнопку «ОК» браузер продолжит загрузку страницы. Он выполнит метод document.write() , который выведет значение, указанное в скобках сразу после открывающего тега . Затем тег и в завершении выполнит метод document.write() , который выведет текст «BODY: Hello, world!».
async и defer
До появления этих атрибутов у нас не было возможности загружать JavaScript в фоне. Поэтому многие сайты, в которых JavaScript не использовался для формирования первоначальной структуры страницы, подключали его в самом конце, т.е. перед закрывающим тегом . В основном это использовалось для того, чтобы пользователь мог как можно быстрее увидеть страницу и начать с ней взаимодействовать. А так как такой код взаимодействует с уже загруженной страницей, его в принципе и вставлять выше не имеет смысла.
async – атрибут для , который используется для того, чтобы указать браузеру на то, что этот скрипт необходимо загрузить асинхронно, т.е. не останавливая основной поток чтения страницы. После загрузка скрипта, браузер сразу же его выполнит.
JavaScript
defer – это ещё один атрибут для , похожий на async . Он также указывает, что скрипт необходимо загрузить в фоне. Но в отличие от async , он будет выполнен после загрузки страницы, а точнее DOM. Кроме этого, стоит отметить, что скрипты, заданные с атрибутом async , выполняются перед вызовом события DOMContentLoaded .
Ещё одно отличие defer от async в том, что defer сохраняет очередность их выполнения:
Т.е. вне зависимости от того какой скрипт загрузится быстрее, они всё равно будут выполнены браузером в том порядке, в котором они расположены в коде. В данном примере, сначала выполнится «script-1.js», а затем «script-2.js» даже если второй загрузится быстрее, чем первый.
Если для одновременно указать два атрибута, т.е. сразу async и defer , то будет работать только async .
Атрибуты async и defer можно использовать только для скриптов, подключаемых на страницу с использованием src .
1. Подключение скрипта
Чтобы добавить скрипт на веб-страницу, в HTML-файле используется тег script , в атрибуте src которого указываем ссылку на внешний JavaScript-файл.
Чтобы подключить JavaScript из внешнего файла:
- Создайте файл с расширением .js и поместите его в подпапку js . Размещение JavaScript файла в папке js не требуется, однако это хорошая практика.
- Затем укажите путь к файлу скрипта в атрибуте src тега script .
html lang="en"> head> meta charset="UTF-8" /> title>JavaScript is fun!title> head> body> script src="js/script.js">script> body> html> При отображении HTML-документа, некоторое время может отображаться пустая страница. Дело в том, что фаза рендеринга страницы приостаналивается до тех пор, пока не будет полностью загружен скрипт (если он подключен в head ). Чтобы этого избежать, необходимо подключать скрипт перед закрывающим тегом body, после всего содержимого, как показано в примере.
2. Несколько скриптов
При подключении нескольких JavaScript-файлов к странице, интерпретатор обрабатывает их в том порядке, в котором они указаны в HTML-файле.
script src="js/script-1.js">script> script src="js/script-2.js">script> Браузер загружает и отображает HTML постепенно. Если браузер видит тег script , то по стандарту он обязан сначала выполнить его, и только потом обработать остальной код HTML-файла. Поэтому, интерпретатор будет последовательно обрабатывать файлы script-1.js и script-2.js .
results matching » «
No results matching » «
Подключаем скрипт JavaScript
В данной статье будет рассказано о том, каким образом можно перенести JavaScript-код во внешний файл с подключением JS-скрипта. Статья будет полезна читателям, только начинающим изучение языка программирования JavaScript.
Первое, о чём следует сказать, — зачем вообще выносить код во внешний файл? Ответ прост. Давайте представим, что у пользователя (user) есть большой script, занимающий 100 и более строк кода. Скрипт этот должен работать на каждой странице веб-сайта. Каждый раз дублировать сотни строк кода, как и само наличие в HTML-документе не HTML-кода — не самое оптимальное решение, и это ещё мягко сказано. Намного лучше вынести код JS в отдельный файл и подключить его к HTML-странице (по аналогии с файлами, отвечающими за стили). Но как же это реализовать?
На деле подключение script к основному файлу особых сложностей не вызывает. Можно воспользоваться тегом , добавив к нему атрибут src (как и в случае, если речь идёт о картинках). В src-атрибуте потребуется прописать путь к подключаемому script.
Практический пример
Для примера давайте перенесём коротенькую однострочную программу во внешний файл с последующим подключением этого файла. Пусть файл называется scripts.js и имеет следующее содержимое:
alert('Привет!');Важный момент заключается в том, что теги script необходимо прописывать внутри HTML-файла. Если они будут написаны в файле .js, код Джаваскрипт работать перестанет, в результате чего всё закончится ошибкой.
Давайте теперь посмотрим, каким образом выглядит непосредственное подсоединение внешнего JS-файла:
script src="scripts.js">/script>
Обновив страницу, мы увидим обычное модальное окно с соответствующим приветствием.
Какие моменты важно учитывать в процессе подключения scripts? Смотрите, в примере JS-скрипт помещён в конец HTML-документа, то есть непосредственно перед закрывающим тегом body. Какое-то время назад скрипты подключали в тегах head, то есть в начале документа. Но в настоящее время поступать таким образом не рекомендуют — лучше всего выполнять подключение именно в конце. Давайте разберёмся, почему.
Для примера подключимся теперь в начале документа, между head-тегами:
На картинке выше видно, что кроме модального окна, ничего нет, то есть сам контент (в нашем случае — надпись «Это обычный HTML документ») отсутствует. Дело в том, что при подсоединении внешнего скрипта между тегами head, веб-браузер в первую очередь загрузит и попытается выполнить именно его. И до тех пор, пока загрузка и выполнение не завершатся, веб-браузер не покажет оставшуюся часть документа. Всё вроде бы ничего, но что будет, если файл по каким-нибудь причинам станет загружаться медленно? В результате users будут ждать загрузку этого файла, а ждать сейчас никто не любит, поэтому, скорее всего, users отдадут предпочтение другому ресурсу. Чтобы этого не случилось, сегодня рекомендуют подключать scripts в конце документа, то есть непосредственно перед .
Однако бывают ситуации, когда какая-нибудь библиотека требует подключения как раз таки в начале документа. В данных обстоятельствах пригодятся атрибуты async и defer — они дают возможность веб-браузеру выполнять асинхронную загрузку скриптов (веб-браузер начнёт загружать скрипт, не останавливая отображение контента). Вот, как это работает (будем использовать атрибуты по очереди):
И в первом, и во втором случае будет получен одинаковый результат, то есть script будет подключен без прерывания отображения контента.
Но атрибуты async и defer всё же несколько отличаются: — defer сохраняет последовательность при подключении внешних скриптов. При использовании этого атрибута первым всегда будет выполняться скрипт, подключаемый выше. Это может иметь значение, если подключаются несколько scripts, среди которых один зависит от другого. То есть разработчик получает возможность подключить основной скрипт раньше зависимого. Можно констатировать, что атрибут defer обеспечивает соблюдение порядка; — async просто обеспечивает выполнение скрипта непосредственно после того, как он загрузился. Соответственно, при наличии скриптовых зависимостей этот атрибут лучше не использовать.
Несколько слов о jQuery или как подключить JS к JS (файл .js к другому файлу .js)?
Операцию можно выполнить с помощью библиотеки jQuery. Если кто не знает, jQuery — это набор JS-функций, обеспечивающих взаимодействие между HTML и JavaScript. Всё можно реализовать с помощью простого кода:
$.getScript("another_script.js", function()alert("Загружено."); // скрипт используем здесь >);Интересуют более профессиональные знания по JS-разработке? Их можно получить на курсах в OTUS:
