На этом уроке мы познакомимся с объектом screen
, который может использоваться для получения информации об экране пользователя.
Назначение объекта screen
Объект screen
- это один из дочерних объектов window
, который может предоставить некоторую информацию об экране пользователя. Доступ к данному объекту осуществляется как к свойству объекта window
, т.е. через точку.
window.screen
Для получения различных характеристик экрана пользователя объект screen
предоставляет для разработчика JavaScript следующие свойства: screen.width
, screen.height
, screen.availWidth
, screen.availHeight
, screen.colorDepth
.
Свойства width
и height
объекта screen
Свойства screen.width
и screen.height
возвращают соответственно ширину и высоту экрана пользователя в пикселях.
Например, вывести в элемент div
ширину и высоту экрана пользователя:
<div id="userScreen" class="alert alert-warning"></div> <script> var userScreen; userScreen = "Ширина экрана пользователя: <strong>" + screen.width + "</strong>"; userScreen += "<br />"; userScreen += "Высота экрана пользователя: <strong>" + screen.height + "</strong>"; window.document.getElementById("userScreen").innerHTML = userScreen; </script>
Свойства availWidth
и availHeight
объекта screen
Свойства screen.availWidth
и screen.availHeight
возвращают ширину и высоту, которое может занять окно браузера. Например, в операционной системе Windows свойство screen.availHeight
равно разнице между высотой экрана и высотой "Панели задач".
Например, вывести в элемент div
доступную ширину и высоту экрана пользователя:
<div id="availSizeWindow" class="alert alert-warning"></div> <script> var availSizeWindow; availSizeWindow = "Доступная (свободная) ширина экрана: <strong>" + screen.availWidth + "</strong>"; availSizeWindow += "<br />"; availSizeWindow += " Доступная (свободная) высота экрана: <strong>" + screen.availHeight + "</strong>"; window.document.getElementById("availSizeWindow").innerHTML = availSizeWindow; </script>
Свойство colorDepth
объекта screen
Свойства screen.colorDepth
возвращает количество бит, которые требуются для отображения одного цвета.
Например, вывести в элемент div
качество цветопередачи устройства пользователя:
<div id="colorDepth" class="alert alert-warning"></div> <script> var colorDepth; colorDepth = "Качество цветопередачи: <strong>" + screen.colorDepth + "</strong>"; window.document.getElementById("colorDepth").innerHTML = colorDepth; </script>
планируешь после курса по JavaScript, написать курс по jQuery и созданию не сложных скриптов для сайта?
Да, после окончания курса по JavaScript, планирую написать курс по jQuery.
интересуют небольшие скрипты типа:
— менюха при скроллинге прикрепляется к верху сайта
— при скроллинге появляются кнопки вверх/вниз
— создание своих модальных окон, галерей, слайдеров
— паралакс,
— появление картинок при сроллинге
— счетчик окончания даты и т.д.
вообщем обычных стандартных вещей которые сейчас юзаются на сайтах.