Отправляет email-рассылки с помощью сервиса Sendsay
  Все выпуски  

JavaScript для начинающих. Изучаем с нуля. выпуск девятнадцатый


Информационный Канал Subscribe.Ru

Рассылка для всех, кто желает освоить JavaScript

JavaScript для начинающих

Выпуск #19
Письмо автору
Хостинг от 1.2$ в месяц
Скрипты для web-мастера HTML для чайников

Очистка и обновление содержимого Web-страницы

Для объекта document определены методы open и close. Несмотря на существование подобных методов в объекте window, объект document использует их для выполнения других операций. Эти методы используются не для открытия или закрытия документов или окон браузера, как может показаться вначале. Метод open открывает новый поток, очищающий содержимое документа и подготавливающий его для добавления данных с помощью методов write и writeln.

При использовании метода document.open содержимое текущего документа удаляется. Любые данные, отображаемые в нем, теряются безвозвратно. После этого вы можете приступать к отображению в документе новых данных.

Данные, добавляемые в документ после метода document.open, не отображаются до тех пор, пока не использован метод document.close, закрывающий поток. После нахождения этого оператора JavaScript приступает к выполнению блока операторов write, введенных между указанными методами.

Если применять метод document.open к текущему окну, то сценарий, как часть программы будет прерван и очищен. Именно поэтому данный метод хорошо использовать при управлении несколькими окнами и фреймами.

В команде document.open можно дополнительно определить тип данных MIME. Это позволит создавать документ любого типа, включая рисунки и документы, используемые приложениями.

MIME - это аббревиатура от Multipurpose Internet Mail Extensions (Многоцелевые расширения электронной почты в Internet). Это стандарт Internet для используемых типов документов. Web-сервер посылает в браузер сведения о типе MIME документа, чтобы тот мог правильно отобразить Web-документ. Типичный документ имеет тип HTML (соответствует типу text/html).

Использование ссылок и анкеров

Еще один дочерний объект объекта document, о котором хотелось рассказать - это link. В одном объекте document одновременно может существовать несколько объектов link. Каждый из них содержит сведения о ссылке на другую страницу или анкер.

Анкер (или якорь) - это именованный элемент документа HTML. Он определяется следующим дескриптором: <A NAME="part2">. Ссылка на него задается так: <A HREF="#part2">.

Объект link управляется с помощью массива links. Каждый элемент массива представляет собой объект link текущей страницы. Свойство массива document.links.length определяет количество ссылок на странице.

Каждый объект link (или элемент массива links) имеет целый набор свойств, определяющих адрес страницы, на которую добавлена ссылка. Эти же свойства имеет и объект location. В свойствах объекта link указывается также номер ссылки и ее название. В приведенном ниже примере адрес URL первой ссылки определяется переменной link1:

link1 = links[0].href;

Объекты анкеров также выступают в роли дочерних по отношению к объекту document. Каждый объект анкера соответствует анкеру документа HTML - именованному элементу документа HTML.

Подобно ссылкам, анкеры управляются с помощью массива anchors. Каждый элемент этого массива - это отдельный объект anchor. Свойство document.anchors.length определяет количество анкеров документа HTML.

Получение сведений о работе браузера

Самый интересный дочерний объект объекта window - это, пожалуй, history. Этот объект содержит сведения о страницах, которые отображались и отображаются в окне браузера, а также содержит методы перехода к ним.

Объект history обладает четырьмя свойствами.

history.length - указывает длину списка адресов посещаемых страниц, сохраняемых в объекте history. Другими словами, это количество посещаемых за текущий сеанс вэб-страниц.

history.current - содержит одно значение - адрес URL текущей страницы, открытой в браузере.

history.next - тоже содержит одно значение - адрес URL страницы, к которой перейдет пользователь, если щелкнет на панели инструментов браузера на кнопке Forward (Вперед). Поскольку эта кнопка не активна до тех пор, пока хотя бы один раз не воспользоваться кнопкой Back (Назад), это свойство до определенного момента использовать нельзя.

history.previous - тоже содержит одно значение - адрес URL страницы, к которой перейдет пользователь, если щелкнет на панели инструментов браузера на кнопке Back (Назад).

Объект history можно также обрабатывать и как массив. Каждый элемент массива содержит адрес URL из списка посещаемых страниц. Текущая страница представлена элементом history[0].

Кроме свойств объект history имеет три метода.

history.go - открывает страницу по указанному адресу в списке адресов посещаемых страниц. Положительные и отрицательные числа соответствуют расположению адресов в массиве history. Например, элемент history.go(-2) соответствует двойному нажатию на кнопке Back (Назад).

history.back - загружает страницу, которая отображалась в окне браузера перед текущей. Этот метод аналогичен нажатию кнопки Back (Назад).

history.forward - загружает страницу, которая отображается в списке адресов посещаемых страниц после текущей (если она указана). Этот метод аналогичен нажатию на кнопке Forward (Вперед).

Методы history.back и history.forward в некоторых версиях Netscape Navigator выполняются неправильно. По этой причине лучше всегда использовать метод history.go (history.go(-1) и history.go(1)).

Объект location

Третий дочерний объект объекта window - это location. Этот объект содержит сведения о документе HTML, который в текущий момент открыт в окне. Например, следующий оператор дает указание загрузить страницу в текущем окне:

Wind0ws.Location.Href="http://www.yahoo.com";

Свойство href, используется в операторе, содержит полный адрес URL страницы, загруженной в окне. Вы можете при необходимости указывать только часть адреса URL, например location.protocol определяет протокольную часть адреса (чаще всего http:).

Хотя свойство location.href содержит тот же адрес URL, что и свойство document.URL, последнее изменить вы не можете. Для загрузки новой страницы всегда используйте свойство location.href.

Объект location имеет два метода.

location.reload - перезагружает текущий документ. Аналогичен по функции кнопке Reload (Обновить).

location.replace - замещает текущую страницу указанной. Действует аналогично указанию свойств объекта location вручную. Разница состоит в том, что этот метод не изменяет историю браузера. Другими словами, кнопку Back (Назад) нельзя будет использовать для перехода к исходной странице.

Получение сведений о браузере

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

Объект navigator назван в честь браузера Netscape Navigator, который изначально был единственным, поддерживающим JavaScript. Несмотря на свое название, этот объект поддерживается и в Internet Explorer.

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

Создание кнопок Back и Forward

Одно из самых частых применений методов back и forward - это добавление на Web-страницу соответствующих кнопок, позволяющих перемещаться по списку посещаемых страниц.

В качестве примера использования объекта history приведем сценарий, отображающий в документе HTML кнопки Back и Forward, позволяющие улучшить навигацию пользователя в Web. В качестве кнопок Back и Forward будем использовать графические объекты. Выберите из вашего архива две картинки со стрелками влево и вправо. Если у вас таких нет, то можно сделать текстовые ссылки.

Ниже приведена часть кода, соответсвующая кнопке Back:

<A HREF="javascript:history.go(-1);">
<IMG BORDER="0" SRC="left.gif">
</A>

В этом коде используется метод javascript:URL, позволяющий отображать предыдущую страницу после щелчка на кнопке Back. В качестве кнопки Back используется рисунок со стрелкой влево. Код задания кнопки Forward почти такой же:

<A HREF="javascript:history.go(1);">
<IMG BORDER="0" SRC="right.gif">
</A>

Вот и все, остальное вы уже знаете. Добавьте теги HTML. Листинг 19.1 содержит готовый код документа HTML с кнопками Back и Forward.

Листинг 19.1. Документ HTML, содержащий кнопки перемещения по загруженным страницам


1:    <HTML><HEAD><TITLE>Кнопки Back и Forward</TITLE></HEAD>
2:    <BODY>
3:    <H1>Использование кнопок Back и Forward</H1>
4:    <HR>
5:    Вы можете перемещаться по уже отображенным
6:    страницам с помощью кнопок Back и Forward.
7:    Они подобны кнопкам на панели инструментов.
8:    <HR>
9:    <A HREF="javascript:history.go(-1);">
10:   <IMG BORDER="0" SRC="left.gif">
11:   </A>
12:   <A HREF="javascript:history.go(1);">
13:   <IMG BORDER="0" SRC="right.gif">
14:   </A>
15:   <HR>
16:   </BODY>
17:   </HTML>

Если у вас нет картинок, замените их обычным текстом, например для кнопки Back вот так:

<A HREF="javascript:history.go(-1);">Назад</A>


Вопросы для самоконтроля

1. Какой из приведенных объектов позволяет загрузить страницу с новым URL в окне браузера?

document.url
window.location
window.url

2. Какие сведения сохранены в объекте navigator?

О типе и версии браузера
Имя пользователя и его контактная информация
О предыдущей и следующей страницах в списке адресов посещаемых страниц

3. Какой метод позволяет заменить страницу другой в окне браузера без записи адреса этой страницы в историю history?

document.url
location.replace
window.reload

(Если в почтовой программе кнопка не срабатывает, сохраните страницу на диск и откройте в браузере.)


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

Оставайтесь с нами. До встречи!

Ведущий рассылки: Виталий Прохоренко


Самый легкий способ обрести финансовую независимость или как зарабатывать 1000-2000$ в месяц имея лишь мобильный телефон и отойти от дел молодым и богатым уже через год

Письмо автору
Хостинг от 1.2$ в месяц
Скрипты для web-мастера HTML для чайников

© NBUSINESS.RU


Subscribe.Ru
Поддержка подписчиков
Другие рассылки этой тематики
Другие рассылки этого автора
Подписан адрес:
Код этой рассылки: inet.webbuild.javascripts
Отписаться
Вспомнить пароль

В избранное