Современная Front-End разработка. Объектно-ориентированное программирование в JavaScript. (Лекция 4)

Сентябрь 7, 2022

Главная
Алгебра
Современная Front-End разработка. Объектно-ориентированное программирование в JavaScript. (Лекция 4)

Содержание

2. Работа с DOM Есть такой фрагмент html: Из JavaScript кода мы имеем полный доступ к нему
3. Работа с DOM Из JS мы можем менять аттрибуты элементов: Вешаем события на кнопку: Важно: нельзя
4. DOM события На элемент лучше вешать события с помощью метода addEventListener(type, eventListener), порядок вызова слушателей определяется
5. DOM события В функцию eventListener передается аргумент event, содержащий информацию по событию, а также ряд методов:
6. Поиск элементов в DOM Для поиска элементов в DOM дереве можно пользоваться функциями поиска: document.getElementById(id) –
7. Изменение и добавление элементов в DOM Создание новых элементов: Клонирование элементов: NOTES: Клонированные элементы не добавляются
8. AJAX Объект XMLHttpRequest (или, как его кратко называют, «XHR») дает возможность из JavaScript делать HTTP-запросы к
9. AJAX Предыдущий вариант использования делает синхронный запрос, весь JavaScript "подвиснет", пока запрос не завершится, поэтому почти
10. AJAX Состояния запроса(readyState): 0; // начальное состояние 1; // вызван open 2; // получены заголовки 3;
11. Наследование в JavaScript На уровне языка реализовано наследование на прототипах. С помощью некоторых трюков можно сделать
12. Наследование через прототип Реализуется наследование через неявную(внутреннюю) ссылку одного объекта на другой, который называется его прототипом
13. Наследование через прототип Расширяем прототип функции-конструктора:
14. Наследование на классах. Функция extend В качестве решения для полноценного наследования, используется функция extend, которая является
15. Вызов родительских методов С помощью функции extend легко получить доступ к родительским методам:
16. Вызов родительских методов Обязательно следить за контекстом, в данном случае использование this вместо Rabbit приведет к
17. Использование прототипов для расширения функционала Задача: нужно логировать время старта и время окончания AJAX запросов по
18. Домашнее задание Примечание: для работы с файлами нужно запустить браузер со специальным параметром например для chromium:
19. Домашнее задание Необходимо обернуть XMLHttpRequest в сервис httpService, который экпортирует метод get(url, callback). Пример использования: Реализовать
21. Скачать презентацию

Слайд 2

Работа с DOM
Есть такой фрагмент html:
Из JavaScript кода мы имеем полный

доступ к нему с помощью глобального объекта document:

Слайд 3

Работа с DOM
Из JS мы можем менять аттрибуты элементов:
Вешаем события на

кнопку:

Важно: нельзя повесить несколько событий onclick на элемент, они будут переопределяться.

Слайд 4

DOM события
На элемент лучше вешать события с помощью метода addEventListener(type, eventListener),

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

Удаляются события с помощью метода
removeEventListener(type, eventListener), где eventListener – ранее привязанная функция:

Слайд 5

DOM события
В функцию eventListener передается аргумент event, содержащий информацию по событию,

а также ряд методов:

Фунцкия event.stopPropagation используется, чтобы остановить вызов последующих слушателей

Слайд 6

Поиск элементов в DOM
Для поиска элементов в DOM дереве можно пользоваться

функциями поиска:
document.getElementById(id) – возвращает элемент с заданным id или null, если элемент не найден
document.getElementsByClassName(class) – возвращает массив элементов с заданным именем класса, можно использовать несколько имен:
document.getElementsByClassName('red test') – вернет все элементы с классами “red” и “test”
document.querySelector(selectors) – возвращает первый попавшийся элемент, удовлетворяющий селектору, либо null и document.querySelectorAll(selectors) – возвращает массив, удовлетворяющих элементов:
document.querySelectorAll(“.red.test”) - результат аналогичен предыдущему примеру с className

Слайд 7

Изменение и добавление элементов в DOM
Создание новых элементов:
Клонирование элементов:
NOTES:
Клонированные элементы

не добавляются в DOM, чтобы это сделать, используется appendChild()
Свойства добавленные через JS-код(например onclick) не копируются

Слайд 8

AJAX
Объект XMLHttpRequest (или, как его кратко называют, «XHR») дает возможность из

JavaScript делать HTTP-запросы к серверу без перезагрузки страницы.

Слайд 9

AJAX
Предыдущий вариант использования делает синхронный запрос, весь JavaScript "подвиснет", пока запрос

не завершится, поэтому почти всегда используется асинхронная версия XHR:

Слайд 10

AJAX
Состояния запроса(readyState):
0; // начальное состояние
1; // вызван open
2; // получены заголовки
3;

// загружается тело (получен очередной пакет данных)
4; // запрос завершён
Работа с заголовками:
setRequestHeader(name, value) – задает заголовок запроса с именем name
getResponseHeader(name) – возвращает заголовок ответа по имени
getAllResponseHeaders() - возвращает все заголовки ответа

Слайд 11

Наследование в JavaScript
На уровне языка реализовано наследование на прототипах. С помощью

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

Создание объекта. Функция-конструктор

Любая функция может создать объект:
Класс объекта определяется функцией, которая его создала. Для проверки принадлежности классу есть оператор instanceof:
alert(animal instanceof Animal) // => true

Слайд 12

Наследование через прототип
Реализуется наследование через неявную(внутреннюю) ссылку одного объекта на другой,

который называется его прототипом и в спецификации обозначается [[prototype]]. Это свойство обычно скрыто от программиста.
Также существует свойство с похожим названием prototype (без квадратных скобок) - оно вспомогательное и указывает, откуда брать прототип при создании объекта.
Когда вы ставите функции Animal свойство Animal.prototype = XXX - вы этим декларируете: "все новые объекты класса Animal будут иметь прототип XXX".

Ссылка [[prototype]] работает так:
Любое запрошенное свойство ищется сначала в rabbit
Если свойство там не найдено, то оно ищется в rabbit.[[prototype]], т.е в animal

Слайд 13

Наследование через прототип
Расширяем прототип функции-конструктора:

Слайд 14

Наследование на классах. Функция extend
В качестве решения для полноценного наследования, используется

функция extend, которая является почти стандартом:

Слайд 15

Вызов родительских методов
С помощью функции extend легко получить доступ к родительским

методам:

Слайд 16

Вызов родительских методов
Обязательно следить за контекстом, в данном случае использование this

вместо Rabbit приведет к ошибке:

Слайд 17

Использование прототипов для расширения функционала
Задача: нужно логировать время старта и время

окончания AJAX запросов по URL.

Слайд 18

Домашнее задание
Примечание: для работы с файлами нужно запустить браузер со специальным

параметром например для chromium:
chromium --allow-file-access-from-files
Задание
Cоздаем два файла: posts.json и users.json в корне проекта и заполняем их тестовыми данными, модели:

Слайд 19

Домашнее задание
Необходимо обернуть XMLHttpRequest в сервис httpService, который экпортирует метод get(url,

callback). Пример использования:
Реализовать модуль userService. Экпортирует фукнцию getUserById, которая возвращает id
Создать функцию конструктор Post, интерфейс:

Современная Front-End разработка. Объектно-ориентированное программирование в JavaScript. (Лекция 4)

Содержание

Работа с DOMЕсть такой фрагмент html:Из JavaScript кода мы имеем полный

Работа с DOMИз JS мы можем менять аттрибуты элементов:Вешаем события на

DOM событияНа элемент лучше вешать события с помощью метода addEventListener(type, eventListener),

DOM событияВ функцию eventListener передается аргумент event, содержащий информацию по событию,

Поиск элементов в DOMДля поиска элементов в DOM дереве можно пользоваться

Изменение и добавление элементов в DOMСоздание новых элементов:Клонирование элементов:NOTES: Клонированные элементы

AJAXОбъект XMLHttpRequest (или, как его кратко называют, «XHR») дает возможность из

AJAXПредыдущий вариант использования делает синхронный запрос, весь JavaScript "подвиснет", пока запрос

AJAXСостояния запроса(readyState):0; // начальное состояние1; // вызван open2; // получены заголовки3;

Наследование в JavaScriptНа уровне языка реализовано наследование на прототипах. С помощью

Наследование через прототипРеализуется наследование через неявную(внутреннюю) ссылку одного объекта на другой,

Наследование через прототипРасширяем прототип функции-конструктора:

Наследование на классах. Функция extendВ качестве решения для полноценного наследования, используется

Вызов родительских методовС помощью функции extend легко получить доступ к родительским

Вызов родительских методовОбязательно следить за контекстом, в данном случае использование this

Использование прототипов для расширения функционалаЗадача: нужно логировать время старта и время

Домашнее заданиеПримечание: для работы с файлами нужно запустить браузер со специальным

Домашнее заданиеНеобходимо обернуть XMLHttpRequest в сервис httpService, который экпортирует метод get(url,

Похожие презентации