Подключение jQuery, jQuery-UI, Bootstrap через CDN

В статье описано как подключить библиотеки через CDN сеть вместо их расположения на самом сайте. CDN - простыми словами это сеть расположенных в разных географических точках серверов, которые обеспечивают 100% доступность и ускоренное получение статических данных, таких например, как js-библиотек.

jQuery - библиотека JS с набором инструментов для веб-разработки. С помощью jQuery можно обращаться к разным элементам интернет-страницы и управлять состоянием и содержимым, можно изменять страницу в зависимости от настроек и действий пользователя. Подключается через CDN так:

<script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>

Актуальную ссылку можно получить на официальном сайте https://releases.jquery.com/jquery/ нажав на ссылку с нужной версией библиотеки.

jQuery-UI - библиотека JS для создания пользовательского интерфейса в веб-приложениях, содержит виджеты и эффекты, такие, например, как диалоговое окно, виджет для выбора даты, слайдер, возможность перемещения элементов с помощью мыши и т.д. Подключается через CDN так:

<script src="https://code.jquery.com/ui/1.13.3/jquery-ui.min.js" integrity="sha256-sw0iNNXmOJbQhYFuC9OF2kOlD5KQKe1y5lfBn4C9Sjg=" crossorigin="anonymous"></script>

Для jQuery-UI так же необходим файл CSS для оформления элементов интерфейса (ссылка зависит от темы, ниже описано как её получить). Подключается CSS-файла так:

<link rel="stylesheet" href="https://code.jquery.com/ui/1.13.3/themes/base/jquery-ui.css">

Актуальную ссылку можно получить на официальном сайте https://releases.jquery.com/ui/ нажав на ссылку с нужной версией библиотеки.

Для получения ссылки на css-файл темы нужно нажать на ссылку с названием темы под заголовком "Themes" в разделе нужной версии jquery-ui. Тему можно выбрать на сайте https://jqueryui.com/themeroller/, где нужно слева в "ThemeRoller" выбрать закладку "Gallery" и в ней выбирать тему, а справа смотреть как выглядит оформление.

Bootstrap - это набор инструментов для создания и оформления сайтов и веб-приложений. Включает в себя HTML и CSS шаблоны оформления для типографики, веб-форм, кнопок, меток, блоков навигации и прочих компонентов веб-интерфейса, сетки с заранее заданными размерами колонок, средства оформления таблиц и т.д. Подключается через CDN так:

<link crossorigin="anonymous" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.min.js" integrity="sha384-+sLIOodYLS7CIrQpBjl+C7nPvqq+FbNUBDunl/OZv93DB7Ln/533i8e/mZXLi/P+" crossorigin="anonymous"></script>

Актуальную ссылку можно получить на официальном сайте https://www.bootstrapcdn.com/ (для получения html-кода нужно нажать справа от ссылки кнопку со стрелкой вниз)