конспект курса Java Script. Программирование клиентской части Интернет приложений с использованием JavaScript
 Скачать 1.49 Mb.
|
|
Часть II. Среда клиента Урок 10. Объектная модель MS Internet Explorer Как отмечалось в уроке 2 при обсуждении языков сценариев, последние используются для расширения возможностей некоторой среды, которая для этих целей "поставляет" ряд объектов, доступных из сценариев. В рамках клиентского Web-программирования такой средой является программа просмотра Интернета. 75 Если она поддерживает программирование на каком-либо языке сценариев, то она предоставляет ряд объектов для взаимодействия с ней из сценариев. Раскрываемые браузером MS Internet Explorer объекты представляют собой иерархию, во главе которой расположен объект window, соответствующий окну браузера. Ряд объектов (navigator, history, location) непосредственно связан с функциональностью самого браузера, тогда как другие объекты (семейство frames и объект document) позволяют получить доступ к отображаемому в данный момент в окне браузера документу HTML. window document history location frames plugins applets anchors scripts images embeds forms selection all navigator plugin mimetype links document screen styleSheets body text button radio checkbox password hidden reset submit file textarea select option Объект window Объект window создается автоматически при запуске браузера. Для выполнения его методов или установки и получения значений свойств указывать его не обязательно, хотя и рекомендуется для лучшей читаемости кода сценария. Заметим, что любое окно браузера или отображаемый в нем фрейм представлен объектом этого типа. Свойства объекта window Свойство Описание opener Ссылка на окно, открывшее данное. parent Ссылка на родительское окно в иерархии объектов. top Ссылка на верхний родительский объект. name Имя окна. 76 screenLeft, screenTop Координаты левого верхнего угла окна отображения браузера относительно левого верхнего угла экрана. status Текст в строке состояния. Из всех перечисленных свойств объекта window сейчас мы остановимся на трех последних. Изменяя значения свойств screenLeft и screenTop объекта window (задаются в пикселях) можно изменить положение окна браузера относительно верхнего левого угла экрана монитора компьютера клиента. Свойство status полезно для получения в сценарии строки, отображающейся в строке состояния окна браузера, а также для отображения информации для пользователя, например, что документ HTML обработан и загружен: window.status = "Документ загружен." Методы объекта window У этого объекта есть много полезных методов, но основным можно считать метод open() , с помощью которого создается новое окно браузера (загружается еще одна его копия). Синтаксис этого метода представлен ниже: переменная = window.open([имя_файла],[имя_ссылки_окна], [строка_параметров]) В переменной хранится возвращаемая методом ссылка на новое окно, которую можно использовать для доступа к нему из сценария JavaScript. Первым параметром имя_файла определяется полный или относительный URL- адрес открываемого в окне документа (если задана пустая строка, то открывается пустая станица). Второй параметр имя_ссылки_окна позволяет задать имя вновь открытого окна, которое можно использовать в документе HTML в атрибуте target гипертекстовой ссылки для указания загрузки в него документа. Параметр строка_параметров — строка, представляющая список параметров вновь создаваемого окна со значениями. Каждый параметр задается в виде параметр=значение. Все параметры вместе со своими значениями в строке отделены друг от друга запятыми. Допустимые параметры: height=высота — определяет высоту окна в пикселях; width=ширина — определяет ширину окна в пикселях; left=значение — определяет горизонтальную координату верхнего левого окна в пикселях; top=значение — определяет вертикальную координату верхнего левого окна в пикселях; resizable={yes|no|1|0} — может ли пользователь изменять размеры окна; location={yes|no|1|0} — отображается ли адресная строка; menubar={yes|no|1|0} — отображается ли строка меню; 77 scrollbars={yes|no|1|0} — отображаются ли полосы прокрутки; titlebar={yes|no|1|0} — отображается ли строка заголовка окна (только для HTML-приложений); toolbar={yes|no|1|0} — отображается ли панель инструментов; status={yes|no|1|0} — отображается ли строка состояния. Например, следующий вызов, создаст новое окно браузера без панели инструментов и полос прокрутки, загрузив в него документ с указанным первым параметром абсолютным адресом. В любом документе HTML, для ссылки на это окно можно использовать имя linkWin. В сценарии ссылаться на это окно можно с помощью переменной winExample. winExample = window.open( "http://www.bhv.ru/library/index.html", "linkWin", "toolbar=no,scrollbars=yes") Вывод во вновь открытое окно осуществляется методом write() объекта document этого окна. Закрывается окно методом close() без параметров: window.close() В сценарии можно использовать специальное имя self для ссылки на текущее окно или использовать переменную, хранящую ссылку на требуемое окно: self.close() newWindow.close() Пример 14. Открытие нового окна и запись в него Создадим страницу HTML, открывающую новое окно браузера при щелчке в любом месте документа. Для этого обработчику onclick объекта document присвоим ссылку на функцию openNewWindow(), в которой открывается новое окно newWind и в него записывается абзац: 78 Щелчок в области документа откроет новое окно. 79 confirm(сообщение) окно с сообщением и двумя кнопками (возвращает true, если нажата кнопка Yes, и false, если нажата кнопка No); Метод setTimeout() запускает выполнение кода JavaScript, задаваемого первым строковым параметром, через определенный промежуток времени после выполнения метода. Метод setInterval() запускает периодический "процесс" выполнения кода JavaScript, задаваемого первым строковым параметром, с интервалом, указанным вторым параметром. переменная = window.setTimeout(строка_кода, интервал, [язык]) переменная = window.setInterval(строка_кода, интервал, [язык]) Интервал задается в миллисекундах (1000 соответствует 1 секунде). Необязательный параметр язык определяет язык сценария для выполняемого кода (JavaScript, VBScript). По умолчанию предполагается язык JavaScript. Для остановки запущенных процессов используются соответственно методы и , параметрами которых является переменная, в которой сохранен результат запуска "процесса": window.clearTimeout(переменная) window.clearInterval(переменная) Одновременно можно запустить много "процессов". Обычно метод setInterval() используется для создания страницы HTML с движущимися элементами. Пример 15. Периодический "процесс" Ниже приведен код страницы HTML, после загрузки которой каждые три секунды будет появляться сообщение, генерируемое вызовом функции myMessage(): Каждые три секунды будет появляться сообщение 80 Область отображения браузера разбивается на несколько частей (фреймов) с помощью вложенных в элемент FRAMESET элементов FRAME, в которых и отображаются соответствующие документы HTML. Контейнер 81 Во фрейм Frame1 загрузим файл frame1.html.: При щелчке на кнопке Запись во фрейм Frame2 второй фрейм будет заполняться содержимым, определенным в качестве параметра метода write объекта document этого фрейма. Если загружаемый во фрейм документ сам содержит набор фреймов, то объектная модель немного усложняется. В этом случае получить доступ ко всем фреймам через объект top нельзя. фреймы, отображаемого в заданном фрейме документа, являются подчиненными этому фрейму, который, в свою очередь, порождается от объекта верхнего уровня top. Пример 17. Взаимодействие вложенных фреймов Загружаемая страница с фреймами frame.html: Файл frame2.html (названия фреймов могут быть такими же, как и в главной странице!): Файл frame1-1.html, предоставляющий запись во фрейм Frame1 страницы frame2.html: Можно на фрейм Frame1 файла frame2.html сослаться и так: top.frames[1].frames[0] 82 Является свойством объекта window и предоставляет информацию об используемом клиентом браузере. Свойства appCodeName Название кода браузера. appName Название браузера. appVersion Версия браузера. browserLanguage Текущий используемый язык браузера. cookieEnabled Поддерживает ли браузер сохранение cookies. userAgent Заголовок, посылаемый клиентом серверу при обмене данными по протоколу HTTP. cpuClass Строка, характеризующая используемый процессор компьютера. onLine Браузер в режиме работы с сетью или в автономном. platform Строка, характеризующая операционную систему компьютера. systemLanguage Используемый по умолчанию язык операционной системы компьютера. Методы javaEnabled() Возвращает true, если возможен в браузере запуск Java-апплета. В противном случае false. Объект location Объект location также является свойство объекта window и связан с URL- адресом отображаемого в браузере документа. Синтаксис URL-адреса имеет следующий вид: protocol//host:port/pathname#hash?search Примеры URL-адресов http://localhost:8080/doc/url.html#path http://www.net.org/tutorial/cgi/url.pl?name=search и соответствие их частей указанным в синтаксисе обозначениям: Синтаксис URL Адрес 1 Адрес 2 protocol http: http: host localhost www.net.org port 8080 pathname doc/url.html tutorial/cgi/url.pl hash path search name=search 83 Свойства href возвращает полный адрес загруженного документа. Если его изменить, то будет загружен новый документ. Является свойством по умолчанию, поэтому для загрузки нового документа из сценария можно использовать следующую конструкцию: window.location = "http://microsoft.com/index.asp"; Остальные свойства hash, host, hostname, pathname, port , protocol, search соответствуют частям адреса загруженного документа, используемые как для получения, так и для изменения соответствующих частей адреса. Методы reload() Перезагружает в браузер текущую страницу. replace(URL) Загружает в окно браузера страницу, адрес которой задан в качестве его параметра. Объект history Объект history (свойство объекта window) содержит список адресов документов HTML, ранее загружавшихся в браузер. Его свойство length хранит общее количество адресов в этом объекте. Метод go() этого объекта загружает страницу из списка посещенных. Текущая страница имеет индекс 0, предыдущие по отношению к текущей страницы индексируются отрицательными целыми числами, а последующие положительными целыми числами: history.go(-3) Для перемещения на одну страницу назад и на одну страницу вперед относительно текущей в списке посещенных можно использовать соответственно методы back() и forward() этого объекта. Упражнения 1. Видоизменить программу примера 14, добавив на страницу две кнопки — одну для открытия окна, другую для закрытия. 2. Создать страницу с кнопкой, при щелчке на которой окно будет смещаться на 20 пикселей по горизонтали и по вертикали. 3. При загрузке страницы запустить два процесса, отображающие каждый свое сообщение. На странице предусмотреть кнопку, при нажатии на которую отображается диалоговое окно с просьбой ввести идентификатор процесса. После его ввода процесс останавливается. 4. В цикле определить все свойства объектов navigator и location и отобразить их в браузере в виде таблиц: 84 название свойства значение 5. Создать три страницы HTML. На первой странице расположена гиперссылка на страницу с именем history.html. На этой странице три кнопки: первая реализует метод back(), вторая метод forward() и третья метод go(). Также на этой странице должна быть гиперссылка на третью страницу HTML со ссылкой на history.html. Загружаем первую страницу и переходим по ссылке на страницу history.html. С нее переходим по ссылке на третью страницу HTML и возвращаемся на страницу history.html нажатием кнопки Назад панели инструментов браузера. Теперь при нажатии кнопок, реализующих методы back() и forward() мы должны попасть соответственно на первую и третью страницы, а при нажатии на кнопку, реализующую метод go(), в диалоговом окне следует указать на какую страницу мы хотим перейти (ее номер относительно текущей). Урок 11. Объекты доступа к странице и ее элементам Объект document Этот объект содержит информацию о текущей загруженной странице. Для каждой страницы создается один объект document. Свойства Часть свойств соответствуют атрибутам тега-контейнера : background, bgColor, fgColor (атрибут text), linkColor (атрибут link), alinkColor (атрибут alink) и vlinkColor (атрибут vlink). Другие свойства не соответствуют атрибутам указанного тега. Например, URL хранит адрес загруженного документа, parentWindow предоставляет ссылку на окно- родитель. Семейства all Содержит ссылки на все объекты, представляющие элементы HTML anchors Содержит объекты, соответствующие тегам в порядке их появления в документе applets Содержит объекты, соответствующие тегам 85 images Содержит объекты, соответствующие тегам Содержит объекты, соответствующие тегам HREF="..."> и , а также объекты link, созданные методом link() в порядке их появления в документе scripts Содержит объекты, соответствующие тегам Сама процедура задается следующим кодом (объект event в IE доступен просто по своему имени): // В IE function showEventType() { alert("Произошло событие: " + event.type) } Второй, неявный вызов процедуры обработки события требует задания обращения к ней в атрибуте onmousedown в открывающем теге элемента INPUT: Событийная модель Любое событие имеет свой "жизненный" цикл: от момента возникновения действия или условия, являющегося причиной генерирования события, до выполнения последнего оператора обработчика события или финальных действий 92 браузера. Цикл жизни любого типичного события JavaScript включает следующие этапы: 1. Происходит действие пользователя или возникает условие, которое возбуждает событие 2. Тотчас же корректируется объект event, чтобы отразить параметры возникшего события 3. Событие генерируется – это и есть истинное сообщение о возникшем событии 4. Вызывается обработчик событий элемента-источника события, который выполняет определенные программистом действия и завершает свою работу 5. Событие передается вверх по иерархии объектов (bubble up) и вызывается обработчик события объекта, являющегося родителем объекта-источника события. Это "всплытие" вверх по иерархии объектов продолжается, пока не будет достигнут самый верхний объект иерархии – объект window, или обработчик события какого-либо объекта не аннулирует событие 6. Выполняются заключительные действия по умолчанию, если таковые определены, но при условии, что событие не было аннулировано. Пример 19. "Всплытие" события В этом примере щелчок на любом элементе HTML страницы приводит к отображению диалогового окна с надписью "Не надо щелкать". |