HTML, XHTML и CSS на 100% - Игорь Квинт
Шрифт:
Интервал:
Закладка:
• availWidth – возвращает ширину полезной области экрана монитора без Панели задач и подобных ей элементов графического интерфейса операционной системы.
• colorDepth – возвращает глубину цвета. Для 16 цветов возвращается 2, для 256 – 8, для 16,7 миллионов цветов (режим High Color) – 32.
• updateInterval – возвращает интервал времени (в миллисекундах) между обновлениями экрана. Значение 0 позволяет браузеру выбирать среднее число, что обычно работает лучше всего.
Примечание
На значения свойств объекта Screen также влияют пользовательские настройки параметров видео в Панели управления.
В следующем примере приведен сценарий, который позволит вам определить параметры экрана монитора (листинг 10.13).
Листинг 10.13. Свойства объекта Screen<html>
<head>
<title>Свойства объекта Screen</title>
</head>
<body>
<script language=JavaScript>
<!– Маскировка сценария
document.write('width: '+window.screen.width+'<br>');
document.write('availWidth: '+window.screen.availWidth+'<br>');
document.write('height: '+window.screen.height+'<br>');
document.write('availHeight: '+window.screen.availHeight+'<br>');
document.write('colorDepth: '+window.screen.colorDepth+'<br>');
document.write('updateInterval: '+window.screen.updateInterval)
// Конец маскировки сценария –>
</script>
</body>
</html>
Результат работы сценария показан на рис. 10.12.
Рис. 10.12. Параметры экрана монитора
Размеры экрана монитора пользователя являются очень важными для разработчика. Создавая сайт под разрешение монитора 1280 х 720 пикселов, нужно помнить, что его будет очень неудобно просматривать на экране с разрешением 800 х 600. Используя свойства объекта Screen, в сценарии JavaScript можно изменять размер веб-страниц в зависимости от разрешения экрана монитора пользователя. Если вместе с этим приемом использовать сценарий для определения браузера пользователя, то ваш сайт будет прекрасно отображаться в окне любого браузера на экране с любым разрешением.
Объект History
Объект History является частью объекта Window. Он содержит информацию о посещенных пользователем веб-страницах за текущий сеанс путешествия по Сети. Эти URL-адреса можно загружать снова, то есть передвигаться по истории посещений. Основной целью объекта History является доступ к списку введенных в браузере адресов URL.
Внимание!
Поскольку объект History является частью объекта Window, доступ к нему осуществляется именно через этот объект: window, history, length.
У объекта History всего одно свойство – length. Оно определяет количество посещенных веб-страниц за текущий сеанс работы в браузере. Сценарий из листинга 10.14 показывает, сколько страниц вы посетили за сеанс.
Листинг 10.14. Определение количества посещенных веб-страниц<html>
<head>
<title>Количество посещенных страниц</title>
</head>
<body>
<script language=JavaScript>
<!– Маскировка сценария
function hislen() //функция
{
alert(window.history.length)
}
// Конец маскировки сценария –>
</script>
<!– Элементы страницы –>
<input type="button" onclick="hislen()" value="Показать количество посещенных страниц">
</body>
</html>
Данный сценарий содержит функцию hislen(), вызывающую окно Alert при нажатии кнопки формы. В окне отображается количество веб-страниц, посещенных за текущий сеанс работы с браузером. Если вы запускаете сценарий с жесткого диска, не удивляйтесь, если количество посещенных страниц будет равно нулю (рис. 10.13).
Рис. 10.13. Окно с указанием количества посещенных веб-страниц
Передвигаться по истории и загружать ранее посещенные пользователем веб-страницы позволяют следующие методы объекта History:
• go() – загружает веб-страницу с определенным номером относительно страницы, открытой в данный момент в браузере (текущая страница имеет индекс 0, предыдущая– 1, посещенная до этого страница–2 и т. д.);
• back() – загружает предыдущую веб-страницу, посещенную пользователем (эквивалентно go(-1));
• forward() – загружает следующую веб-страницу из списка истории, если таковая имеется (эквивалентно go(1)).
Например, чтобы перейти на две страницы назад, можно использовать сценарий из листинга 10.15.
Листинг 10.15. Перемещение по истории посещений<html>
<head>
<title>Перемещение по истории посещений</title>
</head>
<body>
<script language=JavaScript>
<!– Маскировка сценария
function goback() //функция
{
window.history.go(-2)
}
// Конец маскировки сценария –>
</script>
<!– Элементы страницы –>
<input type="button" onclick="goback()" value="Перейти на 2 страницы назад">
</body>
</html>
При нажатии кнопки формы (рис. 10.14) запускается функция goback(), позволяющая перейти на две страницы назад.
Рис. 10.14. Кнопка для запуска функции
Используя методы объекта History, вы сможете организовать удобную систему навигации по сайту. Учтите, что для этого пользователь должен просматривать все страницы вашего сайта в одном окне браузера. Как только какая-либо из страниц будет открыта в новом окне, история посещений применительно к этому окну браузера начнется с нуля.
Объект Location
Объект Location является частью объекта Window. Он содержит информацию об URL-адресе текущей страницы и его составляющих.
Использование объекта Location в сценарии JavaScript позволяет обновить текущую страницу или полностью поменять URL-адрес, то есть перейти на другую веб-страницу.
Свойства объекта Location содержат различную информацию о подключении пользователя к HTTP-серверу.
• href – полный URL-адрес текущей веб-страницы.
• hash – имя «якоря» в URL-адресе веб-страницы (значение атрибута name), если он есть.
• host – часть URL-адреса страницы, содержащая имя сервера в Интернете и номер порта.
• hostname – имя сервера в Сети, с которого загружена текущая веб-страница.
• pathname – путь к файлу на веб-сервере без имени сервера и порта.
• port – сообщает номер порта HTTP-сервера, через который идет обращение к веб-странице. Если порт не указан, возвращает номер 8 0 – стандартный порт, через который работает протокол HTTP.
• protocol – протокол передачи данных (HTTP, FTP и др.). Если протокол не указан, возвращает значение http:.
• search – строка параметров для серверных сценариев, начинается со знака?.
Команды host, hostname, port, search не работают, если просматривать страницу с жесткого диска компьютера. Результат может быть только в том случае, если веб-страница размещается на сервере в Интернете.
Внимание!
Поскольку объект Location является частью объекта Window, доступ к нему осуществляется именно через этот объект: window.location.property.
Рассмотрим использование свойств объекта Location на примере сценария из листинга 10.16.
Листинг 10.16. Свойство href объекта Location<html>
<head>
<title>URL текущего HTML-документа</title>
</head>
<body>
<script language=JavaScript>
<!– Маскировка сценария
document.write(location.href); //код JavaScript
// Конец маскировки сценария –>
</script>
</body>
</html>
Данный сценарий определяет полный URL-адрес текущего HTML-документа. При запуске сценария с жесткого диска вашего компьютера команда location. href покажет полный путь к файлу со сценарием (рис. 10.15).
Рис. 10.15. Путь к файлу со сценарием
Методы объекта Location позволяют перезагружать текущую веб-страницу или менять URL-адрес, загружать другую веб-страницу вместо предыдущей. При этом будет невозможен переход к предыдущей странице с помощью кнопки Назад в браузере пользователя. Возникает эффект, что страницы как бы подменяются друг другом.
Рассмотрим подробнее методы объекта Location.
• assign() – загружает другую страницу, меняя URL-адрес текущей веб-страницы на адрес, указанный в параметре метода.
• reload() – обновляет текущую веб-страницу (не всегда срабатывает правильно, поскольку некоторые браузеры все равно берут эту страницу из кэша, не обращаясь к серверу).
• replace() – замена текущей веб-страницы страницей, URL которой указан в параметре метода. При этом в списке истории браузера адрес предыдущего HTML-документа заменяется адресом нового.
В листинге 10.17 приведен пример сценария, содержащего один из методов объекта Location – метод replace().
Листинг 10.17. Использование метода replace()<html>
<head>
<title>Метод replace()</title>
<script language=JavaScript>
<!– Маскировка сценария
function replaceDoc()
{
window.location.replace("http://www.yandex.ru") //код JavaScript
}
// Конец маскировки сценария –>
</script>
</head>
<body>
<input type="button" value="Replace" onclick="replaceDoc()" /> //кнопка
</body>
</html>
Сценарий позволяет изменить текущую страницу в окне браузера на главную страницу сайта www.yandex.ru. За это отвечает функция replaceDoc(), которая вызывается при нажатии кнопки Replace (рис. 10.16).
Рис. 10.16. Кнопка Replace
