PHP Delphi CSS HTML JavaScript Perl API ASP MySQL XML С++ VBasic WEB разработка *NIX CouchDB Hack Python
Главная Статьи JavaScript JavaScript: сценарист по призванию-2
Главная
 Главная  Контакты
 
Программинг
Статьи Книги ЧаВО
 
xBOOKi
Fresh Books Операционки Сети
 
Поиск
-------
 
Counters
Яндекс цитирования
Rambler's Top100
-------
 
CryptDisk.4h
Программа которая позволяет создать виртуальный шифрованный логический диск.

cryptdisk.4hack.com

-------
 
 

JavaScript: сценарист по призванию-2

Константин Носов

Объектная модель JavaScript

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

Главными элементами в объектной модели JavaScript являются объекты window и document. Чтобы понять, за какие элементы интерфейса они отвечают, запустите свой браузер и взгляните на экран. К объекту window относится все, что принадлежит собственно браузеру: меню, командные кнопки, строка состояния и т. д. К объекту document, как несложно догадаться, относится сама загруженная страница — текст, графика, встроенные в страницу элементы управления и поля ввода.

Объекты JavaScript, как и в каждой объектно-ориентированной платформе, имеют свойства, методы и события. Надеюсь, что сегодня уже нет необходимости подробно объяснять, что означают эти понятия, но для полноты описания дадим их краткое определение.

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

Синтаксис доступа к свойствам и методам в JavaScript организован так же, как и в большинстве других объектно-ориентированных языков. Чтобы обратиться к свойству/методу, указывают его полное имя, т. е. имя, снабженное префиксом, состоящим из имени объекта и точки. Например, строка состояния окна изменяется путем присваивания свойству status объекта window нового значения:

Объект document является свойством родительского объекта — window. Это вполне соответствует реальному механизму функционирования браузера: документ в нем может быть выведен только в окне, но никак не самостоятельно.

С объекта window, как главного в объектной иерархии JavaScript, и начнем. Свойства этого объекта дают доступ к таким важным параметрам открытого окна браузера, как загруженный в него документ, фреймы, название окна и строка статуса, подчиненные объекты-свойства history, location и navigator.

С методами window мы уже частично познакомились. Это описанные в первой статье процедуры вызова диалоговых окон alert, confirm и prompt. В JavaScript допускается использование сокращенного синтаксиса их вызова (без ссылки на порождающий объект), которым мы и пользовались. Следующими важнейшими методами являются open и close. Как несложно догадаться, они служат для открытия (вызова) нового окна или закрытия существующего. Для иллюстрации их работы проще рассмотреть небольшой пример.

В HTML-документ поместим две кнопки, одна из которых будет открывать новое окно просмотра, а другая закрывать. С командными кнопками мы встречались в предыдущей статье, поэтому сейчас без подробных комментариев выпишем соответствующие тэги (помещаем их в <BODY>-секцию документа):

Как мы помним, эта запись означает, что в форму помещены две кнопки, каждая из которых связывается со своей процедурой обработки нажатия: первая кнопка вызывает функцию OpenW, вторая — CloseW. Выпишем теперь сами функции. Как указывалось ранее, код функций лучше помещать в <HEAD>-раздел документа.

Тело функции OpenW демонстрирует использование метода open объекта window. Синтаксис вызова этого метода несложен: в первом аргументе записывается адрес URL вызываемой страницы (если в него подставить пустую строку, открывается окно с пустым документом), второй аргумент содержит имя окна, а в третьем аргументе передаются настройки открываемого окна. Как видим, они задаются в виде строки, в которой через запятую без пробелов соответствующим атрибутам присваиваются значения. С помощью этой строки вы можете настроить вид вызываемого окна: задать высоту и ширину, координаты окна, контролировать вывод полос скроллинга, меню, строки статуса, полей ввода адреса URL, панелей инструментов и некоторых других элементов. Например, в приведенном выше примере при нажатии кнопки «ОТКРЫТЬ ОКНО» появится окно, отображающее главную страницу Microsoft Corp., не содержащее панели инструментов (toolbar=no), размером 250х100 пикселей (height=100,width=250), без заголовка (titlebar=no) и т. д.

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

Открытое окно начинает жить своей жизнью и с ним можно манипулировать таким же образом, как и с любым окном обозревателя, открытым с помощью меню. Однако наш пример демонстрирует также механизм управления одним окном из другого. В теле функции OpenW создается не только новое окно, а присваивается ссылка на него переменной W1. Эту переменную желательно объявить до начала работы с нашими функциями, например, в <HEAD>-секции документа. Получив ссылку на открытое окно, можем легко им управлять с помощью JavaScript-кода (в нашем примере с помощью кнопки «ЗАКРЫТЬ ОКНО» открытое окно закрывается).

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

Для демонстрации описанных возможностей немного модифицируем наш пример. А именно — создадим сценарий, по нажатию кнопки открывающий динамически заполняемое новое окно. Для этого достаточно изменить только тело функции OpenW. После модификации код будет выглядеть примерно так:

Теперь при нажатии кнопки «ОТКРЫТЬ ОКНО» мы увидим не главную страницу Microsoft'а, а страницу, полностью — от первого до последнего тэга, — созданную с помощью JavaScript. Как видим, создание динамической страницы в JavaScript практически не требует усилий.

Смысл написанного кода состоит в следующем. Как и в предыдущем примере, открываем новое окно браузера с помощью метода open объекта window. В методе open на этот раз задаем пустой список аргументов, т. к. сейчас нам достаточно открыть пустое окно с настройками по умолчанию. Затем (вторая строка) с помощью метода open подготавливаем для приема данных относящийся к созданному окну объект document. Подчеркнем, что следует различать, к какому объекту применяется метод open: если это window, то он открывает новое окно, если document — подготавливает браузер для приема информации. Следующие строки демонстрируют использование метода write для передачи данных в окно. Как видим, данными являются HTML-тэги, которые воспринимаются браузером совершенно так же, как и статическая страница, загруженная с сервера или диска. Используя метод write, вы можете передать браузеру любые данные, в том числе и сценарии, написанные на JavaScript (в нашем примере мы так и сделали — динамически сформировали окно, содержащее закрывающую его кнопку. Для корректной динамической передачи сценария также нельзя забывать правило «чередующихся кавычек»). Обратите внимание, что объект document не выступает в данном сценарии самостоятельно, а в соответствии со сказанным выше фигурирует как свойство родительского объекта window. Наконец, в последней строке объект document закрывается — браузер понимает, что информация для отображения передана полностью.

Кроме наиболее важного объекта document, window имеет несколько других полезных объектов-свойств, использование одного из которых мы сейчас продемонстрируем. Для организации навигации по страницам предназначен объект history, содержащий информацию об адресах, ранее загружавшихся в данное окно страниц. Используя его, можно создавать удобные пользовательские навигационные панели. Поместим на страницу небольшой фрагмент:

В результате получим четырехкнопочную панель, дающую возможность перейти к первой, предыдущей, следующей или последней посещенной странице. Кратко поясним, как организовываются эти переходы. Объект имеет три метода — back, forward и go, которые обеспечивают передвижение по списку посещенных страниц вперед, назад и к странице с произвольным номером. Первые два метода могут вызываться без аргумента, что соответствуют переходу к предыдущей или следующей странице. Если же аргумент задан, он показывает, на сколько страниц назад или вперед будет произведено перемещение. Метод go дает переход к произвольной странице, для чего в аргументе указывают ее номер. Последняя кнопка задает переход к странице с номером, равным количеству посещенных страниц (оно хранится в свойстве length объекта history), т. е. к последней странице.

Кроме того, объектная модель позволяет управлять цветовой схемой загруженных страниц (устанавливать цвет гиперссылок, текста, фона и т. д.), контролировать заполнение форм (как мы помним, именно для этого и был создан предшественник JavaScript — LiveScript), отслеживать загрузку рисунков, поддерживать смену страниц в фреймах и выполнять еще много полезных функций, рассказать о которых сейчас нет возможности.

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

(Продолжение следует)

Источник: http://www.mycomp.com.ua/

 



Свежее
Резервное копирование rsync-ом
DNS Amplification (DNS усиление)
Алгоритм Шинглов — поиск нечетких дубликатов текста
Metasploit Framework. Обзор
Использование CouchDB
-------



 
Copyright © 2003-2009   Frikazoid.
Rambler's Top100