Стильное Оглавление статей с JavaScript - пример кода #3

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

Ниже демонстрируется описание подобного приложения со сценарием JS, другими исходными текстами процесса верстки страницы и общими особенностями методики "Практический JavaScript".

Некоторые общие особенности

Предполагается, что читатели имеют представление о базовых знаниях разметки страниц с применением каскадных таблиц стилей.

В этой публикации, как и в других из данной серии статей, основное внимание уделяется JavaScript. При этом рассматриваются технические возможности совместного использования трех основополагающих языков, применяемых почти в любом web-приложении. Их объединенный код здесь, как правило, расположен в общих файлах где:

• HTML – формирует структуру web-документов;
• CSS – отвечает за их визуальное представление;
• JavaScript – сценарии встроенные в структуру приложений, позволяют придать интерактивность веб-страницам.

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

Оглавление статьи на веб-странице

Цель создания - возможность комфортного просмотра статей. Когда в определенном месте страницы зафиксировано Оглавление с активными гиперссылками, динамично взаимосвязанными с соответствующими разделами h2 статьи в процессе ее прокрутки.

HTML

Код HTML в сокращенном виде, но местами вкрапления исходных текстов CSS и JavaScript, представлен на общей схеме приложения:

Разберемся с понятием якорь (anchor), который по сути является обычным атрибутом id="..." , обладает уникальным именем в узлах DOM одной конкретной страницы, например в коде HTML секции section . Где гиперссылка на якорь имеет вид href="#..." , как представлено в сегменте nav на схеме выше.

CSS

Парный тег style обрамляет код CSS, который встраивает заданные стили в web-документ, благодаря селекторам, здесь используются лишь по тегу и по классу (в реальности их больше):

JavaScript

В предлагаемой методике код скрипта JS занимает центральную часть изучения в объединенном совместном коде, но прежде коснемся несколько важных аспектов.

Понятия абстракции

Эффективное программирование в JavaScript это умение работы с абстракциями. Достигается благодаря применению принципов объектно-ориентированного программирования (ООП), с использованием соответствующих понятий: функций и массивов, классов и объектов, интерфейсов, всевозможных свойств и методов, … .

Основная идея ООП - разделить программу на составные части, где каждая отвечает за собственное состояние, взаимодействуя между собой посредством интерфейсов на абстрактном уровне, скрывая подробности реализации. Называется инкапсуляцией, результат достигается благодаря комбинации функций с замыканием или классам.

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

Больше конкретики

1) Помимо изменяющихся данных - переменные let, существуют неизменные - константы const . Значения им присваиваются сразу при объявлении и не меняются во время работы программы. Существуют глобальные константы, используемые в данном случае. Таковыми считаются, если они объявлены вне функции и доступны в любом месте сценария. При присвоении имен принято использовать прописные буквы и знаки подчёркивания для разделения слов.

2) Обратимся еще раз к понятию функция, далее по тексту статьи используется два вида:

• стрелочная - ключевое слово function в анонимной функции (т.е. без имени) заменяется знаком стрелки => , что несколько упрощает синтаксис;
• обратный вызов (коллбэк, callback) - передается в качестве аргумента в другую функцию и вызывается по завершению определенного действия.

3) Кроме объектов имеется понятие классы (не в селекторах). Это шаблоны, создающие объекты определенного вида с общим набором свойств и методов. Существует разница при обращении: к свойствам - без скобок, к методам - с круглыми скобками. В исходных текстах их легко отличить друг от друга, поэтому будут обозначаться не всегда. Например по тексту (поз. 8 ниже) присутствуют оба обращения. Метод getBoundingciientRect() класса HTMLEiement возвращает объект класса DOMRec, обладающий свойствами определения местоположения конкретного эл-та, в данном случае по вертикали top .

4) Существуют также встроенные классы в JS: Number, Boolean, Array, String, Function и Date.

5) Массив (Array) - нумерованный (позиция задается индексом) и изменяемый в процессе работы программы набор переменных (элементы массива), начиная с 0.

6) Понятие коллекция (NodeList), при изменении DOM бывает:

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

Описание сценария

Его исходный текст:

Объявление констант и присвоение им значений полученных благодаря методам объекта document :

• 1 - отбор и возвращение всех найденных на странице эл-тов HTML с селектором '.navlink' (в Оглавлении) в виде статической коллекции;
• 2 - возврат всей живой коллекции дочерних эл-ов относящихся к тегу section , начиная с 0; элементы размещаются в коллекции автоматически по мере их появления;
• 3 - аналогично поз. 1, только отбираются все эл-ты HTML с 'h2[id]' , точнее якоря.

Осуществляется прокрутка и привязка скроллинга к заголовкам h2 секции section с демонстрацией активных ссылок в Оглавлении:

• 4 - конструкция SECT_SCROL.addEventListener('scroll', () => { ... }) осуществляет в процессе скроллинга (событие 'scroll') элементов DOM секции 'section' привязку якорей в заголовках h2 к ссылкам в оглавлении; осуществляется с помощью addEventListener() из интерфейса EventTarget и привязанной стрелочной функции обратного вызова (коллбэк) к событию 'scroll' ; сработает в случае нахождения искомой гиперссылки в заданном диапазоне, став активной;
• 5 - объявление переменных: i счетчик цикла перебора якорей со значениями их порядковых номеров в numAnc , y координаты текущей прокрутки, n значение текущей ссылки в NAV_LINKS ;
• 6 - перебор якорей в цикле заголовков h2 , начиная с 0 до H2_ANCHORS.length , где свойство length возвращает их количество;
• 7 - присвоение значения переменной numAnc i -го якоря из коллекции в константе H2_ANCHORS ;
• 8 - getBoundingClientRect() возвращает объект, где поддерживаются координаты и размеры текущего элемента в секции 'section' , представленными в px , в данном случае по вертикали;
• 9 - определение скроллинга в диапазоне секции 'section' , где y > 0 и y < SECT_SCROL.clientHeight в px ; свойство элемента HTML DOM возвращает видимую высоту;
• 10 - перебор гиперссылок в nav с установлением их соответствия перемещению скроллинга; forEach() может работать с массивами и коллекциями, перебирает каждый элемент коллекции константы NAV_LINKS и выполняет заданное действие в стрелочной функции коллбэк;
• 11 - проверка соответствия ссылки в оглавлении nav и заголовка h2 в секции 'section' ; встроенный метод endsWith() определяет идентичны ли последние символы значения в конструкции n.href (адрес ссылки оглавления) значению подстроки numAnc.id (заголовок в секции 'section') ;
• 12 - если гиперссылка в оглавлении nav и соответствующий якорь в сегменте с class="act" идентичны друг другу, то гиперссылка становится активной используя classList.add('active') ;
• 13 - иначе класс active удаляется из элемента благодаря classList.remove('active') ;
• 14 - выход из цикла.

Каждое последующее приложение, включая ДАННОЕ, можно скачать целиком. Прежде чем исполнить его в браузере и применить в дальнейшем по своему усмотрению.

⚬ ⚬ ⚬

Таким образом в статье было дано общее представление о такой терминологии как: классы, массивы, константы, живая и статическая коллекции, стрелочная функция и обратный вызов. Все они использовались для создания сценария интерактивного фиксированного оглавления статьи с JavaScript на веб-странице.

Назад