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

Фронтенд разработка на языке JavaScript. -> Домашнее задание.

Домашнее задание.

  1. Создадть функцию filter которая принимает массив и функцию обратного вызова.

filter(arr,fn)

Функция fn возвращает true или false и в зависимости от этого filter будет исключать из массива элементы.

  1. Создать страницу с кнопкой “Отобразить камеру” по нажатию на который отобразить камеру размером 200 на 100.

  2. Создать страницу с двумя кнопками Вперед, Назад которая перебрасывает нас по истории просмотра браузера.

  3. Создать страницу с полем ввода где пользователь вводит URL и по нажанию на кнопку загружается соответствующая страница.

Фронтенд разработка на языке JavaScript. -> Объектная модель браузера и документа.

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

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

Поскольку коды JavaScript обрабатываются и выполняются браузером, они не могут прямо управлять самим браузером, лишь в той степени, в которой браузер это позволяет.

Основные ограничения.

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

Инструкции JavaScript не имеют прямого доступа к файлам компьютера.

Из скриптов одной вкладки нельзя управлять содержимым других вкладок.

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

Командами JavaScript нельзя закрыть или запустить браузер, свернуть его главное окно или изменить его размеры.

Взаимодействие с браузером и системой всё же необходимо для хорошо построенных сайтов. Например, могут возникнуть задачи вернуться на предыдущую просмотренную страницу, открыть новую страницу (или новый сайт) в текущей или новой вкладке браузера, а также получить данные о типе браузера или операционной системе, в которой он запущен.

Возможности, которые предоставляет браузер для использования кодами JavaScript, составляют основу Брау­зерной Объектной Модели

Согласно с этой моделью, работа с браузером и, через него, с операционной системой заменяется работой со специальным объектом «window»

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

Структура объекта windows.

start page

Группу ресурсов (Resources) формируют объекты и функции, обеспечивающие вспомогательные задачи, такие как:

  • таймер и отложенный запуск функций (Timing);

  • диалоговые окна (Popup), (alert, prompt, confirm);

  • асинхронный обмен данными через объект «XML­Http­Request».

Объект «document» является основой объектной модели документа (Document Object Model, DOM).

В нем собирается информация о структуре HTML страницы.

Объект window.

Этот объект «представляет» окно браузера как главный контейнер для веб-страницы.

Всё, что присутствует на этой веб-странице, так или иначе, попадает в объект «window» и становится доступным для программного управления.

Кроме HTML элементов страницы в объекте «window» также собираются все переменные и функции, объявленные в различных скриптах страницы.

Основные свойства объекта «window» определяют размеры и положение текущего окна (вкладки) браузера.

innerHeight - Высота контента окна (без панелей браузера)

innerWidth - Ширина контента окна

outerHeight - Высота окна браузера (включая панели)

outerWidth - Ширина окна браузера

screenLeft, screenX - Отступ от левого края окна браузера до начала содержимого страницы (контента)

screenTop, screenY - Отступ от верхнего края окна браузера до начала содержимого страницы (контента)

scrollX, scrollY - Величина (в пикселях) сдвига контента за счет полос прокрутки

Все эти свойства доступны только для чтения.

Основные методы объекта «window», позволяющие управлять самими окнами.

open() - Открывает новое пустое окно браузера

open(addr,id,attr) - Открывает новое окно и загружает страницу с адресом addr. Окну присваивается имя «id» и применяются атрибуты «attr»

stop() - Прекращает загрузку окна

close() - Закрывает окно

moveTo(X,Y) - Перемещает окно в точку экрана с заданными координатами

moveBy(dX,dY) - Сдвигает позицию окна по каждой координате

resizeTo(W,H) - Устанавливает размеры окна на заданные

resizeBy(dW,dH) - Прибавляет к размерам окна переданные значения

Открыть вкладку.

window.open();

Для того чтобы открыть окно передаем атрибута «resizable».

newWin=window.open("https://itstep.org", "StepWin", "resizable");

Закрываем.

newWin.close()

Объект Navigator.

Объект «navigator» используется для сбора информации от операционной системы, параметрах, настройках и состоянии браузера.

Информацию, содержащуюся в объекте «navigator», не следует использовать как однозначно достоверную.

Из полезных свойств.

getUser­Media() - Доступ к медиаресурсам

Пример захвата камеры.

<video autoplay="true" id="videoElement"></video>

<script>

var video = document.querySelector("#videoElement");

if (navigator.mediaDevices.getUserMedia) {
  navigator.mediaDevices.getUserMedia({ video: true })
    .then(function (stream) {
      video.srcObject = stream;
    })
    .catch(function (err0r) {
      console.log("Something went wrong!");
    });
}

</script>

start page

Некоторые свойства объекта «navigator» рассчитаны на использовании в составе мобильных устройств. Например, свойство «battery» или метод «getBattery()»

Свойство «connection» может быть использовано для получения информации о типе сетевого подключения.

start page

Объект Screen. Свойства экрана

Информация, содержащаяся в объекте «window.screen», определяет параметры экрана монитора, такие как глубина цвета и ориентация, а также его размеры в пикселях.

Наиболее достоверными и часто применимыми свойствами объекта «screen» являются те, которые отвечают за размеры экрана монитора. Среди них можно выделить две группы свойств: «width» и «height» — определяющие полные размеры экрана (ширину и высоту, соответственно), а также «availWidth» и «availHeight» — отвечающие за доступные (от англ. available) размеры, то есть за свободную часть окна, без учета панели задач, строк состояния, док-панелей и т.п.

Объекты Location и History. Перемещение по страницам

Объекты «location» и «history» в структуре ВОМ обеспечивают управление адресами веб-страниц, которые отображаются на данной вкладке браузера. При помощи этих объектов можно перемещаться по различным страницам.

Объект «location» собирает в себе данные об вебадресе текущей страницы, открытой в данный момент в данной вкладке. С его помощью можно узнать об этом адресе и его составных частях, а также загрузить в текущей вкладке страницу с другим адресом.

Структура адреса.

https://www.google.com/search?q=itstep&oq=itstep#anchor

протокол+домен+uri+параметры#якорь

У объекта «location» существует несколько методов, предназначенных для управления адресом отображаемой страницы.

assign(addr) - Перейти по адресу addr.

reload() - Обновить (перезагрузить) страницу

reload(true) – перезагрузить с сервера

reload(false) или reload() – из кеша браузера

replace(addr) Сменить адрес на addr

При replase история не хранится.

Объект «location» предусматривает возможность сокращенной формы вызова метода «assign» при помощи оператора присваивания:

window.location = "https://itstep.org"

Изменить протокол.

window.location.protocol = "https:"

Происходит перезагрузка страницы.

History.

Методы.

length - Количество страниц в истории текущей вкладки

back() - Переход к предыдущей странице в истории просмотров Аналогичен go(-1)

forward() Переход к следующей странице в истории просмотров Аналогичен go(1)

go(n) - Переместиться на n шагов в истории просмотров n>0 — вперед по истории n<0 — назад по истории

pushState(state, title, addr) - Добавить запись в историю После добавления происходит переход на добавленную страницу

replaceState(state, title, addr) - Заменить запись в истории

Фреймы.

Фреймы являются «окнами в окне» — для них, так же как и для основной страницы, создается объект «window» со всеми свойствами и методами, со своей моделью ВОМ.

<iframe src='https://itstep.org'></iframe>.

Все фреймы страницы хранятся в специальном объекте-коллекции «window.frames».

Задание имени фрейма.

<iframe name='itstepFrame' src='https://itstep.org'></iframe>

window.frames.itstepFrame

Установка локации.

window.frames[0].location='https://itstep.org'

Объектная модель документа.

Для введения общих правил обработки HTML кода и построения из него страницы, World Wide Web Consortium (W3C) подготовил и опубликовал требования, известные нам под названием «объектная модель документа» (Document Object Model, DOM).

Что же такое DOM? Это набор требований к тому, как веб-страница должна быть представлена в виде управляемой информационной системы, каким образом элементы HTML должны превратиться в программные элементы (элементы DOM), при помощи каких команд ими можно управлять, на какие события они должны реагировать и так далее.

ВОМ - является программным «представителем» браузера, включая операционную систему, в которой он работает. В свою очередь, модель документа (DOM) «представляет» саму веб-страницу, открытую в браузере.

Одна страница в разных ОС будет иметь разный BOM.

Задачи DOM практически никак не касаются самого браузера и нацелены на построение содержимого веб-страницы.

Основным элементом модели является узел (node). Дочерние узлы хранятся в его коллекции «childNodes», родительский узел доступен через свойство «parentNode».

Основные теги документа.

document.documentElement.childNodes

Иерархия элементов.

start page

Изменение DOM.

Создание элементов.

document.createElement(tagName)

document.createElement('div')

Установка атрибутов.

clickedElement.style.opacity = '0.5';

Добавление элементов.

removeChild(е) — удаляет дочерний узел «е», пере- данный как аргумент функции;

appendChild(е) — добавляет дочерний узел «е» в ко- нец существующей коллекции дочерних узлов;

insertBefore(е1, е2) — вставляет узел «е1» в коллекцию дочерних элементов перед узлом «е2».

Эти функции присутствуют в каждом узле дерева DOM и позволяют оперировать с собственной коллекцией дочерних элементов.

Поиск элементов.

Методы поиска элементов - getElementById, getElementsByName, getElements­By­ClassName и getElementsByTagName.

getElementById может быть вызван только у объекта «document», а остальные методы могут вызываться в любом узле дерева элементов DOM.

Наиболее широкие возможности поиска элементов обеспечивает метод «querySelectorAll».

Формат вызова.

document.querySelectorAll("LI")

ссылка на описание селекторов