{"draftJsState":{"blocks":[{"data":{},"depth":0,"entityRanges":[{"key":0,"length":6,"offset":74}],"inlineStyleRanges":[],"text":"В прошлых статьях в блоге была упомянута популярная JavaScript-библиотека jQuery. Для тех, кто еще не сталкивался с данным полезным инструментом веб-разработки, я определенно рекомендую уделить время и прочитать сначала вводный материал, а потом и эту дополняющую статью. Для всех других кто уже работал с этой библиотекой, может быть полезно сохранить ссылку чтобы поделиться с начинающими веб программистами - или повторить материал при необходимости. ","type":"unstyled","key":"3avjj"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Чуть повторюсь относительно вводной статьи. Вот что пишут на тему библиотеки jQuery в английской версии Wikipedia:","type":"unstyled","key":"6o16s"},{"data":{},"depth":0,"entityRanges":[{"key":1,"length":10,"offset":24}],"inlineStyleRanges":[{"length":156,"offset":0,"style":"BOLD"}],"text":"jQuery - это библиотека JavaScript, предназначенная для упрощения обхода и манипулирования деревом HTML DOM, а также обработки событий, CSS-анимации и Ajax. По состоянию на август 2022 года, jQuery используется 77% из 10 миллионов самых популярных веб-сайтов. Веб-аналитика показывает, что это наиболее широко используемая библиотека JavaScript с большим отрывом - по крайней мере, она используется в 3-4 раза чаще, чем любая другая библиотека JavaScript. Синтаксис jQuery разработан для облегчения навигации по документу, выбора элементов DOM, создания анимации, обработки событий и разработки Ajax-приложений.","type":"unstyled","key":"41arj"},{"data":{"image":{"id":"65a037a186640b3b81181198"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Пиши меньше - делай больше! Фирменный слоган проекта jQuery. Не вникая в подробности, это как-то так и работает, за вычетом некоторых пробелов в качестве результатов.","type":"atomic:image","key":"1c5ag"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":212,"offset":0,"style":"BOLD"}],"text":"А теперь, другими словами и ближе к делу. jQuery - это старая как динозавр, простая, немного громоздкая, местами неэффективная, но привычная в своей простоте лопата, которая помогает делать сайты интерактивными. ","type":"unstyled","key":"dhpuk"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":8,"offset":223,"style":"STRIKE"},{"length":11,"offset":382,"style":"STRIKE"}],"text":"Много кто ругает эту лопату, много кто предпочитает использовать более изящные инструменты для создания современных сайтов. Но! Точно так же, как и каждая настоящая лопата, она хранится практически в каждом сарае у каждого садовода программиста - и применительно к веб-разработке, ей умеет пользоваться практически каждый. Даже если ты предпочтешь ненавидеть эту лопату или в целом садоводство веб-разработку, тем не менее на каком-то жизненном этапе с ней будет работать банально проще.","type":"unstyled","key":"9noqs"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Для пущей убедительности, я попросил нейросеть нарисовать типичного программиста с лопатой использующего jQuery, но по странному стечению обстоятельств получился персонаж, напоминающий постаревшего Артемия Лебедева. Но видимо как-то так Kandinksky представляет веб-разработчиков.","type":"unstyled","key":"d2c9t"},{"data":{"image":{"id":"65a27b978af407146783a1f1"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Типичный программист который использует jQuery в процессе веб-разработки. Некоторым образом картинка напоминает постаревшего Артемия Лебедева.","type":"atomic:image","key":"388ge"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Как подключить JavaScript-библиотеку jQuery к своей веб-странице \uD83D\uDD0C","type":"header-two","key":"p2q2"},{"data":{},"depth":0,"entityRanges":[{"key":2,"length":9,"offset":114},{"key":3,"length":19,"offset":126}],"inlineStyleRanges":[{"length":146,"offset":0,"style":"BOLD"}],"text":"Я искренне надеюсь, что читая эти строки, ты уже постиг основы веб-разработки и понимаешь что такое веб-страница, язык HTML и язык стилизации CSS. Если же этого еще не произошло - вероятно, данная статья будет неким набором красивых букв и картинок - и практической пользы на данный момент из нее извлечь будет сложно. В этом случае, лучше будет все-таки начать с более простых основ веб-разработки - пожалуйста вернись к прошлым материалам и сначала изучи их. Ну а если ты уже их освоил - давай продолжим!","type":"unstyled","key":"930nh"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Для подключения jQuery к своей веб-странице, тебе нужно добавить специальный блок кода в секцию head. Данная секция предназначена для хранения невидимой части страницы - мета-информации, ссылок на скрипты и стили страницы. ","type":"unstyled","key":"2mfa3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Содержимое самой простой, базовой HTML-страницы (например файл myfirstpage.html) с подключенной библиотекой jQuery может выглядеть следующим образом:","type":"unstyled","key":"3ocpv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"\n\n\n\t\n\t\n\n\n\t\n\t\t

jQuery example page

\n\t\t

Hi there the great developer!

\n\t\n\n","type":"blockquote","key":"333eg"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Обрати внимание, что подключение jQuery происходит именно в этой строке:","type":"unstyled","key":"4c8tr"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"amuoh"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":180,"offset":0,"style":"BOLD"}],"text":"Ну и если ты задашь логичный вопрос, что это за такая ссылка на google - то ответ достаточно банален. Просто на одном из серверов Google хранятся различные версии библиотек jQuery. И одну из них (в данном примере конкретно версию 3.5.1) ты можешь подключить к своему сайту. ","type":"unstyled","key":"mojc"},{"data":{},"depth":0,"entityRanges":[{"key":4,"length":18,"offset":82}],"inlineStyleRanges":[],"text":"Наиболее же актуальная версия библиотеки - 3.7, и скачать ее можно с официального сайта разработчика. Как поступаю я? По странной старой привычке, и исходя из гипертрофированных представлений о надежности, каждый раз я скачиваю локальную копию библиотеки и размещаю ее на разрабатываемом сайте. В этом случае, ссылка на библиотеку выглядит например так: src=\"assets/js/jquery/3.5.1/jquery.3.5.1.min.js\"","type":"unstyled","key":"959k4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Но вернемся к разбору приведенного примера. Что происходит далее по коду? Чуть ниже в тексте есть вот такие строчки:","type":"unstyled","key":"lcme"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" ","type":"blockquote","key":"ca4cq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Что они означают? Зачем они здесь? Говоря простыми словами, внутри них происходят следующие процессы. Парные теги script (открывающий и следующий за ним закрывающий) говорят системе о том, что внутри них будет расположен некоторый JavaScript-код. Поскольку этот блок со скриптом находится в секции head, то выполнен такой программный код будет сразу после загрузки страницы в браузер пользователя (как только страница будет нарисована на мониторе).","type":"unstyled","key":"edi97"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":197,"offset":0,"style":"BOLD"}],"text":"Непосредственно же внутри кода JavaScript, можно найти вот такую конструкцию: $(document). Вот здесь уже начинается непосредственная архитектура библиотеки jQuery и ее связь с HTML-моделью страницы и моделью событий, происходящих внутри страницы. Конструкция $() выполняет основную функцию библиотеки jQuery - а именно выбирает элемент со страницы на основе CSS-селектора или объекта внутри JavaScript. ","type":"unstyled","key":"fc5im"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Конкретно в данном примере, происходит выбор объекта \"документ целиком\", и далее - подписка документа на событие ready (которое в оригинальной модели страницы называется onload). Данное событие происходит, когда страница полностью загружена и готова к использованию - и теперь можно работать с интерактивностью элементов.","type":"unstyled","key":"cbeqh"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Соответственно, программный код из примера дождется пока страница загрузится, и далее сделает действия, которые программист определит внутри фигурных скобок.","type":"unstyled","key":"9phbi"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Базовый синтаксис и три основы jQuery \uD83D\uDCE6","type":"header-two","key":"6nq9j"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":132,"offset":0,"style":"BOLD"}],"text":"Хотя jQuery и является достаточно сложной и гибкой библиотекой с кучей возможностей, обычно разработчики используют только 2 из них - а именно обработку различных событий (клики, наведение мышки и так далее) и AJAX - обращение к серверу за новой динамической информацией для страницы. В конечном итоге, современный интернет выглядит как-то так:","type":"unstyled","key":"8ca9s"},{"data":{"image":{"id":"65a27494b754511ad6290489"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Краткое представление модели современного интернета. Любимая JS-библиотека jQuery и ее три основные концепции.","type":"atomic:image","key":"5f1q6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":44,"offset":1,"style":"BOLD"},{"length":1,"offset":75,"style":"BOLD"}],"text":"✅ Первая основа библиотеки jQuery - символ $ - он же ключевое слово jQuery. Это оператор, с которого начинается большинство вызовов библиотеки, включая обращение к элементам документа или различным функциям самой библиотеки. В случае вызова $(\"...\") происходит выборка всех элементов через CSS-селектор внутри кавычек. В случае вызова $, происходит обращение к функциям библиотеки.","type":"unstyled","key":"advf1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":41,"offset":2,"style":"BOLD"}],"text":"✅ Вторая основа jQuery - это CSS-селекторы. Это специальные выражения на языке CSS, которые позволяют обращаться к элементам на твоей HTML-странице. Не забывай, что твоя HTML-страница - это локальная копия веб-документа, который был загружен с сервера, и отрисован на твоем экране. CSS-селекторы позволяют сообщить библиотеке, какие конкретно элементы с HTML-страницы нужно выбрать, чтобы потом совершить с ними какие-то действия. Например подписать их на клики, наведение мышки, и так далее.","type":"unstyled","key":"5doqh"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":33,"offset":2,"style":"BOLD"},{"length":10,"offset":607,"style":"BOLD"}],"text":"✅ Третья основа jQuery - это AJAX. Это такой механизм, который позволяет асинхронно загружать с сервера какие-то данные, и применять их на веб-странице. Ну или давай простыми словами. Повторюсь, твоя HTML-страница - это локальная статическая копия HTML-кода, зафиксированная на некоторый момент времени. Чтобы например при нажатии на кнопку на страницу загрузилось новое содержимое (допустим таблица с ценами), нужно сделать отдельный вызов к твоему серверу, да еще умудриться сделать это так, чтобы сама страница не перезагрузилась (действие в фоновом режиме). Для этого и используется AJAX - Asynchronous JavaScript And XML (Асинхронный JavaScript и XML).","type":"unstyled","key":"71qiu"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"В общем если не усложнять, то базовый синтаксис библиотеки сводится к следующим двум транскрипциям. Первая из них подписывает элемент страницы на какое-то действие (например клик мышкой), а вторая - отправляет запрос к серверу через AJAX. Для начального понимания и даже для практического применения, этих конструкций хватает с избытком.","type":"unstyled","key":"fgr24"},{"data":{"image":{"id":"65a2773bc690d6570caeb966"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Две основные функции библиотеки jQuery - подписка элемента на некоторое событие, и AJAX-обращение к серверу.","type":"atomic:image","key":"bvuse"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Выборка элементов со страницы через jQuery - что такое \"селектор\" \uD83D\uDCB0","type":"header-two","key":"4msgj"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Рассмотрим более подробно первую из конструкций - а именно программный код вида $(\"selector\").on(\"action\"); Для лучшего понимания что это и как это работает, давай обратимся к теории - а именно к базовому устройству веб-страницы.","type":"unstyled","key":"4he2a"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":175,"offset":0,"style":"BOLD"}],"text":"Твой HTML-документ всегда состоит из HTML-узлов. Каждый тег внутри страницы представляет из себя отдельный объект DOM, с которым можно работать независимо от других элементов. Каждая кнопка, картинка, блок текста на странице - все это обособленные HTML-узлы (HTML Nodes) или другими словами DOM-элементы. Они могут быть вложены друг в друга (например внутри тега

может быть три элемента