1.03M

Category:

programming

JavaScript в веб-разработке

1. JavaScript в веб-разработке

ПОДГОТОВИЛ
НЕНАШЕВ МАКСИМ 21ИВТ

2. Браузерное окружение

Язык JavaScript создавался, в первую очередь, для работы с
фронтендом, клиентской стороной пользовательского
интерфейса. С его помощью HTML и CSS становятся
максимально управляемыми, изменяемыми, с гарантией
работы практически на всех устройствах.
Возможности JavaScript уже не ограничены только
лишь frontеnd'ом, его применяют на серверной стороне, разных
платформах и устройствах. Наша задача: рассмотреть этот
язык программирования в плане его использования в браузере,
на пользовательской стороне.

3. 4. Браузерное окружение

Помимо возможностей самого языка, мы получаем доступ к
ряду объектов:
Объект window (корневой элемент, представляющий собой
окно браузера и включающий методы управления им);
Объект DOM (Document object model, объектная модель
документа) – совокупность всех сущностей веб-страницы в виде
дерева;
Объект BOM (Browser object model, объектная модель браузера)
– дополнительные инструменты для непосредственной работы с
просмотрщиком.

5. Объект window

Позволяет
обращаться к
переменным и
функциям в любом
месте программы.
Ключевое
слово window можно
опускать.

6. Объект document - модель DOM

Нужен для создания и
изменения элементов
на странице.
Порождает так
называемую
модель DOM. Все теги,
комментарии и текст
web-ресурса
становятся объектами,
с которыми можно
работать.

7. Объектная модель браузера - BOM

Объектная модель браузера - BOM
Для доступа к
инструментам самого
браузера
используется BOM. Из
этого окружения можно
получить данные о
просмотрщике,
операционной системе,
текущем адресе
ресурса, истории
посещения страниц

8. Подключение скриптов к сайту

Подключение скриптов к сайту
Внедрять JavaScript на страницу можно
несколькими способами:
Напрямую (непосредственно в HTML-код);
Из внешних файлов (в заголовочной части
документа или перед закрывающим
тегом <body>).
Удобнее всего создавать внешние
скрипты, которые наподобие
подключаемых таблиц стилей
прикрепляются к документу. Чтобы js-код
сработал после полной прогрузки всех
элементов страницы, его принято
размещать перед закрывающим
тегом <body>. Однако, никто не
запрещает давать ссылку на него и в
заголовке с использованием ключевого
слова defer.

9. Навигация по DOM

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

10. Навигация по DOM

Для навигации по DOM-дереву следует иметь представление о следующих
понятиях:
1. Корневые элементы:
а) document.documentElement (самый верхний узел, соответствует тегу <html>,
включает в себя всё содержимое документа);
б) document.head (заголовочная часть web-страницы);
в) document.body (тело документа, содержимое тега <body>).
2. Узел-родитель (parentNode – непосредственный потомок конкретного
объекта)
3. Дети, потомки:
а) childNodes (коллекция потомков определенного объекта);
б) firstChild (первый ребенок);
в) lastChild (последний дочерний элемент).
4. Соседи (один уровень иерархии):
а) nextSibling (следующий сосед того же родителя);
б) previousSibling (предыдущий элемент внутри родителя, находящийся на том
же уровне, что и изначальный).

11. Свойства DOM-узлов

Узлы в зависимости от класса могут иметь собственный перечень свойств и
методов. В любом случае, они являются объектами JavaScript, что
разрешает задавать им пользовательские атрибуты и методы.
DOM-узлы принадлежат к определенным классам, имеющим иерархию:
Класс EventTarget – класс-основа, позволяющий объектам поддерживать
события;
Класс Node – ключевой класс для узлов, позволяющий им быть
обработанными при помощи свойств и методов: childNodes, nextSibling и
др.;
Класс Element – отвечает за навигацию на уровне элементов и снабжает их
методами поиска. Является базой
для SVGElement, XMLElement и HTMLElement;
HTMLElement – позволяет наследоваться остальным тегам
(HTMLInputElement, HTMLAnchorElement, HTMLBodyElement) и наделяет их
свойствами (click(), focus() и др.).

12. 13. Свойства DOM-узлов

Рассмотрим
некоторые
другие свойства,
часто
используемые на
практике.

14. Поиск по дереву документа

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

15. Внесение изменений в DOM-дерево

При помощи JavaScript мы можем
не только находить элементы в webдокументе или менять их свойства, но
и вносить изменения в структуру
DOM-дерева:
Создавать новые теги
Удалять имеющиеся
Заменять их на другие
Для этого применяются следующие
инструменты:

16. Управление стилями элементов

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

17. 18. Браузерные события

Браузер постоянно
сообщает о разного
рода событиях (events), и
к любому из них есть
способ определить
некоторый обработчик.
Он представляет собой
функцию, которая
реагирует на ивент.
Приведем частичный
перечень событий:

19. ПОДВЕДЕМ ИТОГИ

Без JavaScript не обходится современный frontеnd. Этот язык
программирования позволяет управлять DOM-деревом при
помощи браузерного окружения. Мы можем выбирать
необходимые элементы, модифицировать их, изменять
количество. В дополнение, к каждому объекту не сложно
применить определённые обработчики событий, которые
существенно расширят функционал сайта, да и пользователям
станет приятнее взаимодействовать с ресурсом.

English Русский Rules