Выдавать сообщение о размерах окна браузера например размеры окна браузера 600 х 400

Обновлено: 05.07.2024

Объектная модель браузера (BOM) позволяет JavaScript "общаться" с браузером.

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

Там нет никаких официальных стандартов для Browser Object Model (BOM).

Поскольку современные браузеры реализовали (почти) те же методы и свойства для интерактивности JavaScript, это часто называют методами и свойствами спецификации.

Объект Window

Объект window поддерживается всеми браузерами. Он представляет собой окно браузера.

Все глобальные объекты, функции и переменные JavaScript автоматически становятся членами объекта window.

Глобальные переменные - это свойства объекта window.

Глобальные функции - это методы объекта window.

Даже объект документа (HTML DOM) является свойством объекта window:

Размер window

Для определения размера окна браузера можно использовать два свойства window.

Оба свойства возвращают размеры в пикселях:

window.innerHeight - внутренняя высота окна браузера (в пикселях)
window.innerWidth - внутренняя ширина окна браузера (в пикселях)

Окно браузера (область просмотра) НЕ включает панели инструментов и полосы прокрутки.

На уроке будет рассмотрено начало темы: объектная модель документа (javaScript DOM) — основа динамического HTML, будут изучены методы доступа к объектам и рассмотрены способы обработки событий javascript

Объекты javascript и объектная модель документа

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

Ранее мы уже начали знакомство с понятием объекта в javascript.

Свойства и атрибуты объекта document в javaScript

Объект document представляет собой веб-страницу.

Важно: Для обращения к свойствам и методам объекта в javaScript, как и при работе с другими объектами, используется точечная нотация:

т.е. сначала пишется сам объект, затем через точку и без пробелов указывается его свойство, атрибут или метод

и определенный для него стиль css (даже два стиля, второй пригодится для задания):

// получаем доступ к объекту по его id MyElem.myProperty = 5; // назначаем свойство alert(MyElem.myProperty); // выводим в диалоговое окно

Следующее задание связано с атрибутом объекта. Атрибут объекта — это атрибуты тега. Т.е. в нашем случаем их два: атрибут class со значением small и атрибут id . Будем работать с атрибутом class .

Теперь добавим javascript-код для вывода значения атрибута нашего объекта. Код должен находиться после основных тегов:

// получаем доступ к объекту по его id alert(MyElem.getAttribute('class')); // выводим в диалоговое окно

Теперь подробнее рассмотрим использованные в примере методы для работы с атрибутами.

Методы для работы с атрибутами в JavaScript

Атрибуты можно добавлять, удалять и изменять. Для этого есть специальные методы:

let x = 'value'; elem.getAttribute(x)

Установить значения атрибутов также можно несколькими способами:

let x = 'key'; // key - название атрибута, val - значение для атрибута // 1. elem.setAttribute('key', 'val') // 2. elem.setAttribute(x, 'val') alert(elem.getAttribute('key')); // val

Свойства элемента body

Через объект document можно обратиться к телу документа — тегу body — с его некоторыми полезными свойствами.

Например, у тега body есть два свойства: ширина и высота клиентского окна:

document.body.clientHeight — высота клиентского окна
document.body.clientWidth — ширина клиентского окна

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

Дополнительные методы доступа к элементам документа в DOM javaScript

Для доступа к объектам или поиска объектов предусмотрено несколько вариантов:

Поиск по id (или метод getElementById ), возвращает конкретный элемент
Поиск по названию тега (или метод getElementsByTagName ), возвращает массив элементов
Поиск по атрибуту name (или метод getElementsByName ), возвращает массив элементов
Через родительские элементы (получение всех потомков)

Важно:
На сегодняшний день некоторые из перечисленных методов уже практически не используются; это методы: getElementsByTagName и getElementsByName

Рассмотрим каждый из вариантов подробнее.

Синтаксис: document.getElementById(id)

Метод getElementById() возвращает сам элемент, который можно затем использовать для доступа к данным

Необходимо: вывести значение его атрибута value

alert(document.getElementById("cake").value); // возвращает "кол-во тортов"

Можно выполнить то же самое, реализовав обращение к объекту через переменную:

let a=document.getElementById("cake"); alert (a.value); // выведем значение атрибута value, т.е. текст "кол-во тортов"

Синтаксис:
document.getElementsByTagName(name);

Необходимо: вывести значение его атрибута value

Метод getElementsByTagName через переменную организует доступ ко всем элементам input (т.е. к массиву элементов input), даже если этот элемент — единственный на странице. Чтобы обратиться к конкретному элементу, например к первому, то указываем его индекс (массив начинается с нулевого индекса).

let a =document.getElementsByTagName("input"); alert(a[0].value); // возвращает "кол-во тортов"

Синтаксис:
document.getElementsByName(name);

Метод getElementsByName(". ") возвращает массив объектов, у которых атрибут name равен указанному в качестве параметра метода значению. Если такой элемент только один на странице, то метод все равно возвращает массив (только с одним единственным элементом).

Необходимо: вывести значение value данного элемента

let element = document.getElementsByName('MyElem'); alert(element[0].value);

Важно: Метод работает только с теми элементами, для которых в спецификации явно предусмотрен атрибут name : это теги form , input , a , select , textarea и ряд других, более редких.

Метод document.getElementsByName не будет работать с остальными элементами типа div , p и т.п.

Доступ к потомкам в javascript происходит посредством свойства childNodes . Свойство принадлежит объекту-родителю.

Рассмотрим пример, в котором теги изображений помещены в контейнер — тег div . Таким образом, тег div является родителем данных изображений, а сами теги img , соответственно, являются потомками тега div :

Теперь выведем в модальное окно значения элементов массива с потомками, т.е. тегами img :

. // нежелательные и устаревшие методы доступа к элементам: alert(document.forms[0].name); // f alert(document.forms[0].elements[0].type); // text alert(document.forms[0].elements[2].options[1].id); // o2 alert(document.f.b.type); // button alert(document.f.s.name); // ss alert(document.f.s.options[1].id); // o2 // предпочтительные методы доступа к элементам alert(document.getElementById("t").type); // text alert(document.getElementById("s").name); // ss alert(document.getElementById("s").options[1].id); // 02 alert(document.getElementById("o3").text); // 4 .

Пояснение: скрипт необходимо вставить после тегов текстового поля и кнопки

t1.value="Привет!"; b1.style.background = 'red';

document.getElementById("t1").value = "Привет!"; document.getElementById("b1").style.backgroundColor = "red";

document.getElementById("t1").setAttribute('value','Привет!'); document.getElementById("b1").style.backgroundColor = "red";

Проверка правильности внесения данных формы

Не осталось ли поле пустым?

Вводимым пользователями данным доверять нельзя. Предполагать, что пользователи при вводе данных будут их проверять, неразумно. Значит необходимо для этого использовать javascript.

Для того, чтобы проверить, не осталось ли текстовое поле пустым (например, после заполнения пользователем данных какой-либо анкеты), следует обратиться к свойству value . Если значением свойства является пустая строка ( "" ), значит необходимо как-то оповестить об этом пользователя.

Т.е, проверка того, осталось ли поле пустым будет выглядеть так:

Кроме того, можно обойтись и без скрипта. У тега input текстового поля есть атрибут pattern . в качестве его значения указывается регулярное выражение для проверки данных в данном текстовом поле формы. Если присутствует атрибут pattern, то форма не будет отправляться, пока это текстовое поле не будет заполнено правильно.
Например, для проверки, не осталось ли поле пустым:

Т.о. если возвращено true , то необходимо оповестить пользователя о том, чтобы он ввел правильный формат, т.е. число.

Т.е. проверка будет выглядеть следующим образом:

И последнее, если все таки пользователь ввёл в текстовое поле, предназначенное для числа, и число и текст одновременно, то при помощи ранее изученной функции javascript parseInt можно вычленить из текста число:

Задание Js8_3. Дана страница с элементами для заполнения:

Фрагмент кода html:

Необходимо:
Дополните пустые места фрагмента кода, расположенного ниже, проверяющего правильность заполнения двух текстовых полей: имя ( id="name" ) и минут ( id="minutes" ). Используйте проверку на оставление поля пустым ( "" ) и правильного формата заполнения числового поля ( isNaN ).

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

Фрагмент скрипта:

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

Новым понятием для вас является вызов функции в качестве обработчика события кнопки:
onclick="placeOrder();"
По щелчку на кнопке будет вызываться функция placeOrder()

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

Текущие значения вашего браузера:

Ширина
document.body.clientWidth;
innerWidth;
outerWidth;
screen.availWidth.
screen.width;

Высота
document.body.clientHeight;
innerHeight;
outerHeight;
screen.availHeight.
screen.height;

document.body.clientWidth — ширина элемента body.
innerWidth — внутренняя рабочая часть браузера с сайтом.
outerWidth — размер с учётом полос прокрутки и рамок браузера.
screen.width — разрешение экрана по горизонтали.
screen.availWidth — доступная область эркана для окон. Не учитвает служебные панели операционной системы, например, панель задач в Windows.

Пример события для отслеживания изменения размеров окна браузера в реальном времени. Результаты выводятся в консоль браузера.

Объектная модель браузера (BOM от англ. Browser Object Model) позволяет JavaScript "общаться" с браузером.

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

Не существует каких-либо официальных стандартов для Объектной модели браузера (BOM).

Так как современные браузеры реализуют (почти) одни и те же методы и свойства для JavaScript интерактивно, их часто относят к методам и свойствам BOM.

Объект window

Объект window поддерживается всеми браузерами. Он представляет окно браузера.

Все глобальные JavaScript объекты, функции и переменные автоматически становятся членами объекта window.

Глобальные переменные являются свойствами объекта window.

Глобальные функции являются методами объекта window.

Даже объект document (в HTML DOM) является свойством объекта window:

то же самое что:

Размер окна

Чтобы определить размер окна браузера, можно использовать два свойства.

Оба свойства возвращают размер в пикселях:

window.innerHeight – внутренняя высота окна браузера (в пикселях)
window.innerWidth – внутренняя ширина окна браузера (в пикселях)

Окно браузера (область просмотра) не включает панель инструментов и полосу прокрутки.

Свойства для Internet Explorer 8, 7, 6, 5:

document.documentElement.clientHeight
document.documentElement.clientWidth

Практическое решение JavaScript (охватывает все браузеры):

В примере вычисляется высота и ширина окна браузера (не включая панель инструментов и полосу прокрутки).

Читайте также: