Часы в строке статуса

Понятие объектной модели применительно к JavaScript

Размещение кода на HTML-странице

Размещение кода внутри HTML-документа

объекты характеризуются событиями. Собственно, суть

URL-схема JavaScript

Условная генерация HTML-разметки на стороне браузера

Вставка (контейнер SCRIPT - принудительный вызов интерпретатора)

Вступление

Введение в JavaScript

Фреймы (Frames)

Иерархия фреймов

Именование фреймов

История посещений (History)

Методы

Передача фокуса во фрейм

Поле location

Поле статуса

Microsoft Internet Explorer

Программируем defaultStatus

Программируем status

что браузер отображает страницу, расположенную

Тип браузера (объект Navigator)

Управление окнами

Window.alert()

Window.clearTimeout

Window.close()

Window.confirm()

Window.focus()

Window.open()

Window.prompt()

Window.setTimeout()

Введение в JavaScript

Action

Cookies

Единственное поле в форме

Elements[]

Encoding

Изменение значения поля ввода

Картинки

Кнопка Submit

Кнопки

Контейнер FORM

Length

Method

Метод submit()

Объект Option

Обмен данными

OnChange

OnReset

OnSubmit

Options[]

в качестве an

Reset()

Selected

SelectedIndex

Списки и выпадающие меню

Submit()

Target

Текст в полях ввода

Text

Value

Защита поля ввода

Введение в JavaScript

Графика и обработка событий

Графика и таблицы

: (открыть) 

  



Рис. 16.2.  

Использование такого меню требует определения на нем гипертекстовых ссылок, что приводит к следующему эффекту: (открыть) 

  



Рис. 16.3.  

Этого можно достичь за счет применения атрибута BORDER равного 0: (открыть) 

  





Рис. 16.4.  


 Теперь попробуем тем же способом реализовать многострочное меню: (открыть) 


Пример 16.1.


(html, txt)



Рис. 16.5.  


Сплошной картинки не получается, так как высота строки не равна высоте картинки. Подогнать эти параметры практически невозможно. Каждый пользователь настраивает браузер по своему вкусу. Решение заключается в использовании таблицы:(открыть) 


Пример 16.2.


(html, txt)



Рис. 16.6.  


В данном случае все картинки удается сшить без пропусков и тем самым достичь непрерывности навигационного дерева. Пропуски устраняются путем применения атрибутов BORDER, CELLSPACING и CELLPADDING. Первый устраняет границы между ячейками, второй устанавливает расстояние между ячейками равным 0 пикселов, третий устанавливает отступ между границей ячейки и элементом, помещенным в нее, в 0 пикселов. 


Изменение картинки
Изменить картинку можно, только присвоив свойству src встроенного объекта Image новое значение. На странице "Программирование графики" показано, как это делается в простейшем случае. Очевидно, что медленная перезагрузка картинки с сервера не позволяет реализовать быстрое листание. Попробуем решить эту проблему. 

Собственно, решение заключается в разведении по времени подкачки картинки и ее отображения. Для этой цели используют конструктор объекта Image: 

 ... 

 Фрагмент кода показывает типовой прием замещения и восстановления картинки при проходе курсора мыши. Естественно, что менять можно не одну, а сразу несколько картинок. 

Главное, тем не менее, не в том, что картинки замещаются, а в том, с какой скоростью они это делают. Для достижения нужного результата в начале страницы создаются массивы картинок, в которые перед отображением перекачивается графика (обратите внимание на строку статуса при загрузке страницы): 

color = new Array(32); mono = new Array(32); for(i=0;i<32;i++) { mono[i] = new Image(); color[i] = new Image(); if(i.toString().length==2) { mono[i].src = "images0"+i+".gif"; color[i].src = "images0"+i+".gif"; } else { mono[i].src = "images00"+i+".gif"; color[i].src = "images00"+i+".gif"; } }

Еще один характерный прием — применение функции отложенного исполнения JavaScript-кода (eval()): 

function def() { for(i=0;i<32;i++) { eval("document.m"+i+".src=mono["+i+"].src"); } for(i=0;i<5;i++) { eval("document.r"+i+".src=rm["+i+"].src"); } }

В данном случае eval() избавляет нас от необходимости набирать операции присваивания (32 строки — это не фунт изюму). 



Мультипликация
Естественным продолжением идеи замещения значения атрибута SRC в контейнере IMG является мультипликация, т.е. последовательное изменение значения этого атрибута во времени. Для реализации мультипликации используют метод объекта Window — setTimeout(). 
 Собственно, существует два способа запуска мультипликации: 
onLoad(); 
onClick(), onChange() ...


Наиболее популярный — setTimeout() при onLoad(). 


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

on_load_lecture()



Дальше "



  Если Вы заметили ошибку - сообщите нам.   


Страницы:

" |

1

|

2

|

3

|

4

|

вопросы | "


|

учебники

|

для печати и PDA










Курсы | Учебные программы | Учебники | Новости | Форум | Помощь


Телефон: +7 (495) 253-9312, 253-9313, факс: +7 (495) 253-9310, email: info@intuit.ru


© 2003-2007, INTUIT.ru::Интернет-Университет Информационных Технологий - дистанционное образование






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

Программирование графики в JavaScript опирается на объект Image, который характеризуется следующими свойствами, методами и событиями: 
СвойстваМетодыСобытия


border
complete
height
hspace
name
src
vspace
width
lowsrc


нет


onAbort
onError
onLoad




Несмотря на такое обилие свойств, их абсолютное большинство можно только читать, но не изменять. Об этом свидетельствует, прежде всего, отсутствие методов. Но два свойства все же можно изменять: src и lowsrc. Этого оказывается достаточно для множества эффектов с картинками. 
 Все объекты класса Image можно разделить на встроенные и порожденные программистом. Встроенные объекты — это картинки контейнеров IMG. Если эти картинки поименовать, к ним можно обращаться по имени: 

  

Картинка активна. Если на нее нажать, получим имя контейнера IMG. Обращение document.images[0].name позволяет распечатать это имя в окне предупреждения. При этом само имя указано как name=intuit в контейнере IMG. 
 К встроенному графическому объекту можно обратиться и по индексу: 

document.images[0];

 В данном случае images[0] — это первая картинка документа. 


Оптимизация отображения
При программировании графики следует учитывать множество факторов, которые влияют на скорость отображения страницы и скорость изменения графических образов. При этом обычная дилемма оптимизации программ — скорость или размер занимаемой памяти — решается только путем увеличения скорости. О размере памяти при программировании на JavaScript думать как-то не принято. 
 Из всех способов оптимизации отображения картинок мы остановимся только на нескольких: 
оптимизация отображения при загрузке; 
оптимизация отображения за счет предварительной загрузки;
оптимизация отображения за счет нарезки изображения.


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


Оптимизация при загрузке
 Практически в любом руководстве по разработке HTML-страниц отмечается, что при использовании контейнера IMG в теле HTML-страницы следует указывать атрибуты WIDTH и HEIGHT. Это продиктовано порядком загрузки компонентов страницы с сервера и алгоритмом работы HTML-парсера. Первым загружается текст разметки. После этого парсер разбирает текст и начинает загрузку дополнительных компонентов, в том числе графики. При этом загрузка картинок, в зависимости от типа HTTP-протокола, может идти последовательно или параллельно. 
 Также параллельно с загрузкой парсер продолжает свою работу. Если для картинок заданы параметры ширины и высоты, то можно отформатировать текст и отобразить его в окне браузера. До тех пор, пока эти параметры не определены, отображения текста не происходит. 
 Таким образом указание высоты и ширины картинки позволит отобразить документ раньше, чем картинки будут получены с сервера. Это дает пользователю возможность читать документ или задействовать его гипертекстовые ссылки до момента полной загрузки (событие load). 
 С точки зрения JavaScript, указание размеров картинки задает начальные параметры окна отображения графики внутри документа. Это позволяет воспользоваться маленьким прозрачным образом, для того, чтобы заменить его полноценной картинкой. Идея состоит в передаче маленького объекта для замещения его по требованию большим объектом. 


Предварительная загрузка
 Замена одного образа другим часто бывает оправдана только в том случае, когда это происходит достаточно быстро. Если перезагрузка длится долго, то эффект теряется. Для быстрой подмены используют возможность предварительной загрузки документа в специально созданный объект класса Image. 
 Реальный эффект можно почувствовать только при отключении кэширования страниц на стороне клиента (браузера). Кэширование часто используют для ускорения работы со страницами Web-узла. Как правило, загрузка первой страницы — это достаточно длительный процесс. Самое главное, чтобы пользователь в этот момент был готов немного подождать. Поэтому, кроме графики, необходимой только на первой странице, ему можно передать и графику, которая на ней не отображается. Но зато при переходе к другим страницам узла она будет отображаться без задержки на передачу с сервера. 
 Описанный выше прием неоднозначен. Его оправдывает только то, что если пользователь нетерпелив, то он вообще отключит передачу графики. 


Пример IMG SRC=tree.gif 

     
 

Пример 16.1. 
Закрыть окно



 

Пример 16.2. 
Закрыть окно



 

Пример 16.3. 
Закрыть окно



 

Пример 16.4. 
Закрыть окно



 

Пример 16.5. 
Закрыть окно





 

Пример 16.6. 
Закрыть окно
Событие onLoad()
Событие onLoad() наступает в момент окончания загрузки документа браузером. Обработчик события указывается в контейнере BODY: 

...  ...

В нашем случае при загрузке документа должен начать выполняться цикл изменения картинки: 

function movie() { eval("document.images[0].src='clock"+ i+".gif';"); i++;if(i>6) i=0; setTimeout("movie();",500); } ...  ...

В примере используется бесконечный цикл, хотя можно реализовать и конечное число подмен: 

function movie() { eval("document.images[0].src='clock"+ i+".gif';"); i++; if(i<7) { setTimeout("movie();",500);} } ... 

 В обоих примерах следует обратить внимание на использование метода setTimeout(). На первый взгляд, это просто рекурсия. Но в действительности все несколько сложнее. JavaScript разрабатывался для многопоточных операционных систем, поэтому правильнее будет представлять себе исполнение скриптов следующим образом: 
Скрипт получает управление при событии onLoad().
Заменяет картинку. 
Порождает новый скрипт и откладывает его исполнение на 500 миллисекунд.
Текущий скрипт уничтожается JavaScript-интерпретатором.


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


Src и lowsrc
Свойства src и lowsrc определяют URL изображения, которое монтируется внутрь документа. При этом lowsrc определяет временное изображение, обычно маленькое, которое отображается, пока загружается основное изображение, чей URL указывается в атрибуте SRC контейнера IMG. Свойство src принимает значение атрибута SRC контейнера IMG. Программист может изменять значения и src, и lowsrc. Рассмотрим пример с src: 

document.i2.src="images2.gif";

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


Вертикальные и горизонтальные меню
Практически все, что изложено в разделах "Графика и таблицы" и "Графика и обработка событий" касается вопросов построения одноуровневых меню. Поэтому в данном разделе мы постараемся привести более или менее реальные примеры таких меню. Графическое меню удобно тем, что автор может всегда достаточно точно расположить его компоненты на экране. Это, в свою очередь, позволяет и другие элементы страницы точнее располагать относительно элементов меню: (открыть) 

Пример 16.4.

(html, txt)


Рис. 16.7.  

В данном случае стрелочка бежит точно над тем элементом, на который указывает мышь. По большому счету, применение атрибута ALT у IMG и его дублирование в строке статуса является гораздо более информативным, чем добавление нового графического элемента. Правда, отображается содержание ALT с некоторой задержкой: (открыть) 

Рис. 16.8.  

Посмотрим теперь на реализацию вертикального меню, построенного на основе графических блоков текста, как сейчас это принято делать: (открыть) 

Пример 16.5.

(html, txt)


Рис. 16.9.  

При движении мыши у соответствующего компонента, попавшего в фокус мыши, "отгибается уголок". В данном случае "уголок" — это самостоятельная картинка. Все уголки реализованы в правой колонке таблицы. Для того чтобы гипертекстовая ссылка срабатывала по обеим картинкам (тексту и "уголку"), применяются одинаковые контейнеры A, охватывающие графические образы. В этом решении есть один недостаток: при переходе от текста к "уголку" последний "подмигивает". Картинки можно разместить и в одной ячейке таблицы, но тогда нужно задать ее ширину, иначе при изменении размеров окна браузера картинки могут "съехать". Чтобы убрать "подмигивание", необходимо сделать полноценные картинки замены. 
 "Подмигивание" происходит при переходе с одного элемента разметки контейнера на другой. При этом заново определяются свойства отображения элемента. 



Пример 16.4.



Рис. 16.7.  


 В данном случае стрелочка бежит точно над тем элементом, на который указывает мышь. По большому счету, применение атрибута ALT у IMG и его дублирование в строке статуса является гораздо более информативным, чем добавление нового графического элемента. Правда, отображается содержание ALT с некоторой задержкой: (открыть) 


Рис. 16.8.  


Посмотрим теперь на реализацию вертикального меню, построенного на основе графических блоков текста, как сейчас это принято делать: (открыть) 







Пример 16.5.



Рис. 16.9.  


При движении мыши у соответствующего компонента, попавшего в фокус мыши, "отгибается уголок". В данном случае "уголок" —  это самостоятельная картинка. Все уголки реализованы в правой колонке таблицы. Для того чтобы гипертекстовая ссылка срабатывала по обеим картинкам (тексту и "уголку"), применяются одинаковые контейнеры A, охватывающие графические образы. В этом решении есть один недостаток: при переходе от текста к "уголку" последний "подмигивает". Картинки можно разместить и в одной ячейке таблицы, но тогда нужно задать ее ширину, иначе при изменении размеров окна браузера картинки могут "съехать". Чтобы убрать "подмигивание", необходимо сделать полноценные картинки замены. 

 "Подмигивание" происходит при переходе с одного элемента разметки контейнера на другой. При этом заново определяются свойства отображения элемента. 


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

Пример 16.6.

(html, txt)


Рис. 16.10.  

В этом примере вложенное меню расположено справа от основного. Эффект вложенности достигается за счет изменения цвета. Подчиненность меню можно подчеркнуть изменением его положения относительно основного меню: (открыть) 

Рис. 16.11.  

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

При использовании слоев можно создать настоящее выпадающее меню. 

Запуск и остановка мультипликации
 Перманентная мультипликация может быть достигнута и другими средствами, например многокадровыми графическими файлами. Однако движение на странице — не всегда благо. Часто возникает желание реализовать запуск и остановить движения по требованию пользователя. Удовлетворим это желание, используя предыдущие примеры (запустить или остановить мультипликацию): 

var flag1=0; function movie() { if(flag1==0) { eval("document.images[0].src='clock"+ i+".gif';"); i++;if(i>6) i=0; } setTimeout("movie();",500); } ...  ... 
  


В данном случае мы просто обходим изменение картинки, но при этом не прекращаем порождение потока. Если мы поместим setTimeout() внутрь конструкции if(), то после нажатия на кнопку Start/Stop поток порождаться не будет, и запустить движение будет нельзя. 
 Существует еще один способ решения проблемы остановки и старта мультипликации. Он основан на применении метода clearTimeout(). Внешне все выглядит по-прежнему, но процесс идет совсем по-другому: 

var flag1=0; var id1; function movie() { eval("document.images[0].src='clock"+ i+".gif';"); i++;if(i>6) i=0; id1 = setTimeout("movie();",500); } ...  ... 
  


Обратите внимание на два изменения. Во-первых, объявлен и используется идентификатор потока (id1); во-вторых, применяется метод clearTimeout(), которому, собственно, идентификатор потока и передается в качестве аргумента. Чтобы остановить воспроизведение функции movie() достаточно "убить" поток. 



Введение в JavaScript

Изменение части URL
Гипертекстовая ссылка — это объект класса URL. У этого объекта можно изменять и другие свойства. Проиллюстрируем эту возможность при частичном изменении ссылки. Распечатаем сначала свойство, которое не зависит от протокола (в нашем случае от javascript) document.all.next.pathname: href:--> http://intuit.ru/help/index.html

pathname:--> help/index.html Изменим теперь pathname: document.all.next.pathname="test"; document.write( window.document.all.next.pathname); href:--> http://intuit.ru:80/test pathname--> test

Обратите внимание, что Internet Explorer самостоятельно добавил в ссылку номер порта. По этой причине использовать свойства, отличные от href, в ссылках, где используется схема javascript, не рекомендуется.

Массивы встроенных гипертекстовых ссылок
К встроенным гипертекстовым ссылкам относятся собственно ссылки (...) и ссылки "чувствительных" графических картинок. Они составляют встроенный массив гипертекстовых ссылок документа (document.links[]).
К сожалению, обратиться по имени к гипертекстовой ссылке нельзя. Точнее такое обращение не рекомендуется в силу различий между браузерами. Поэтому обращаться к ним можно только как к массиву встроенных ссылок. В качестве примера распечатаем гипертекстовые ссылки некоторого документа:

for(i=0;i");

Список ссылок:

http://www.intuit.ru/help/index.html http://www.intuit.ru/help/terms.html http://www.intuit.ru/help/shop.html

Вставим в документ контейнер MAP:



И снова распечатаем массив ссылок:

links[0]:http://www.intuit.ru/help/index.html links[1]:http://www.intuit.ru/help/terms.html links[2]:http://www.intuit.ru/help/shop.html links[3]:javascript:window.alert('Area_Link_1');void(0); links[4]:javascript:window.alert('Area_Link_2');void(0);

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


Объект URL
Объект класса URL обладает свойствами, которые определены схемой URL. В качестве примера рассмотрим ссылку на применение атрибута SRC в контейнере IMG:

http://intuit.ru/help/index.html Значения свойств


href:

http://intuit.ru/help/index.html


protocol:

http:


hostname:

intuit.ru


host:

intuit.ru:80


port:

80


pathname:

help/index.html


search:

 


hash:

 


Обращение к свойству объекта класса URL выглядит как:

имя_объект_класса_URL.свойство

Например, так:

document.links[0].href document.location.host document.links[2].hash

Свойства объекта URL дают программисту возможность менять только часть URL – объекта (гипертекстовой ссылки, например). Наиболее интересно это выглядит в объекте Location , когда при изменении свойства происходит перезагрузка документа. Однако и при работе с обычными гипертекстовыми ссылками такая технология более предпочтительна, чем изменение всего URL целиком.
Здесь следует заметить, что чаще всего все-таки меняют весь URL. Это связано с тем, что такое действие более понятно с точки зрения HTML-разметки. Ведь у контейнера A нет атрибута PROTOCOL, но зато есть атрибут HREF.


Обработка событий Mouseover и Mouseout
Эти два события из всех событий, которые обрабатываются на страницах Web, используются чаще всего. Именно они позволяют обесцвечивать и проявлять картинки, а также менять содержание поля status. Первое событие генерируется браузером, если курсор мыши указывает на гипертекстовую ссылку, а второе — когда он покидает гипертекстовую ссылку. Рассмотрим пример с записной книжкой, но только для проявления меню второго уровня будем использовать обработчик события onMouseover:

 ... 

В качестве обработчика события мы вызываем функцию line2(), которая идентична line1() из предыдущего примера. В примере IMG перенесен на новую строку для наглядности. На самом деле так поступать не следует — при интерпретации HTML-парсером могут появиться неучтенные пропуски, которые не предусмотрены автором страницы. (открыть) 

Рис. 17.2.  
Мы рассмотрели редкий пример, в котором не требуется возврата предыдущего значения после прохода мыши по гипертекстовой ссылке. По этой причине в гипертекстовой ссылке не применялся второй обработчик onMouseout. В большинстве случаев, например при расцвечивании картинки, он требуется:

 

Рассматривая предыдущий пример, мы не обсудили использование функции return. При работе с графикой значение, которое возвращает обработчик события, на результат отображения не влияет. Но если изменять значение поля статуса браузера, то изменения произойдут только в случае возврата значения true. Более подробно об этом рассказано в разделе "Поле статуса".


Обработка события click
Вообще говоря, обработчик события click в современном JavaScript не нужен. Можно прекрасно обойтись URL-схемой javascript, которая была специально придумана для перехвата события гипертекстового перехода. Обработчик onClick следует рассматривать как реликт, доставшийся нам в наследство от предыдущих версий языка, который поддерживается в версиях Netscape Navigator и Internet Explorer.
Основная задача обработчика данного события — перехват события гипертекстового перехода. Если функция обработки данного события возвращает значение true, то переход происходит, при значении false — не происходит:
Отменим переход в начало страницы описания события обработчика onClick:

onClick

А теперь дадим пользователю право выбора перехода в начало страницы посредством окна подтверждения:

 переход в начало страницы

Обратите внимание на место применения функции window.confirm() — аргумент команды return. Логика проста: функция возвращает значение true или false, и именно оно подставляется в качестве аргумента. Если просто написать функцию без return, то ничего работать не будет.
Можно ли вообще обойтись одним обработчиком onClick без использования атрибута HREF? Видимо, нет. Первое, что необходимо браузеру — это определение типа контейнера A. Если в нем есть только атрибут NAME, то это якорь, если присутствует атрибут HREF — ссылка. Это два разных объекта. Они имеют различные составляющие, в том числе и обработчики событий. В контексте текущего раздела нам нужна именно ссылка, т.е. контейнер A с атрибутом HREF. Проверим наше предположение:

 Нет атрибута HREF 

Текст "Нет атрибута HREF" — это якорь. Обработчик на нем не работает, так как на него нельзя указать мышью.

 Нет атрибута HREF 

Теперь мы указали пустую ссылку (см. поле статуса). Содержание окна — это база URL.


Схема URL- "javascript:..."
Для программирования гипертекстовых переходов в спецификацию универсального идентификатора ресурсов (URL) разработчики JavaScript ввели отдельную схему по аналогии со схемами http, ftp и т.п. — javascript. Эта схема URL упоминается в разделе "Размещение JavaScript-кода" в контексте передачи управления JavaScript-интерпретатору от HTML-парсера. Кроме того, о программировании гипертекстового перехода рассказано в разделе "Обработка события click". Теперь мы рассмотрим более общий случай обработки события гипертекстового перехода при выборе гипертекстовой ссылки.
Схема URL javascript в общем виде выглядит следующим образом:

... 


Одним словом, в любом месте, где мы используем URL, вместо любой из стандартных схем можно применить схему javascript. Единственное исключение составляет контейнер IMG. URL в нем используется в атрибуте SRC. Принять определенное значение SRC может при помощи либо назначения в IMG, либо обращения к свойству IMG. По большому счету, применение JavaScript в SRC может только проинициализировать картинку. Дальнейшее ее изменение описано в разделе "Программируем графику". Рассмотрим пример простой гипертекстовой ссылки:

 Заменили обычную ссылку 

Можно выполнить аналогичную операцию, но над картинкой:

var flag=0; function ichange() { if(flag==0) { document.i1.src="image1.gif"; flag=1; } else { document.i1.src="image2.gif"; flag=0; } } ...   

Попробуем теперь выполнить JavaScript-код применительно к контейнеру FORM:

Введите текст для отображения в окне и нажмите ввод:  



Замена атрибута HREF
В разделе "Программируем ссылки" мы перечислили свойства объекта класса Link. Теперь покажем, как при помощи JavaScript-кода можно ими управлять. Рассмотрим меню типа "записная книжка": (открыть) 

Рис. 17.1.  
Конечно, это не настоящая "записная книжка". Поле формы заполняется только при выборе гипертекстовой ссылки, расположенной над этим полем. Единственная цель данного примера — показать, как изменяется значение атрибута HREF (оно отображается в поле status окна браузера). Изменение производится посредством вызова функции:

Пример 17.1.

(html, txt)

В данном случае мы работаем с тремя элементами массива встроенных гипертекстовых ссылок: all['lo0'], all['lo1'] и all['lo2']. У каждого из них при вызове функции со значением аргумента a, равным 0, 1 и 2, соответственно, изменяем значение свойства href. Это свойство мы меняем целиком. URL можно менять и частично.



Введение в JavaScript

Break
Оператор break позволяет досрочно покинуть тело цикла. Распечатаем только title документа: 

for(v in window.document) if(v=="title") { document.write(v+":"+eval('document.'+v)+" "); break; }

Результат исполнения: 

title:Web-engineering (Introduction to the JavaScript. Operators.).

В пример распечатки свойств объекта   document мы вставили break при просмотре свойства title и получили искомый результат. 


Continue
Того же результата, что и при использовании break, можно было бы достичь при помощи оператора continue: 

for(v in window.document) { if(v!="title") continue; document.write(v+":"+eval('document.'+v)); break; }

Результат исполнения: 

title:Web-engineering (Introduction to the JavaScript. Operators.)

Этот оператор позволяет пропустить часть тела цикла (от оператора до конца тела) и перейти к новой итерации. Таким образом мы просто пропускаем все свойства до title и после этого выходим из цикла.


Фокус в полях формы
Управление фокусом в полях формы, кроме этого раздела, описано еще и в разделе "Текст в полях ввода". Здесь мы рассматриваем этот вопрос в контексте общего применения методов blur() и focus(). Эти методы определены для любого поля формы, а не только для полей ввода. Рассмотрим простой пример. 
Попробуйте изменить в этой форме значение любого из полей. Вряд ли это вам удастся. Обработчик события Focus (onFocus) уводит фокус из поля на произвольное место страницы. 

For ... in
Данный оператор позволяет "пробежаться" по свойствам объекта. Рассмотрим пример: 

for(v in window.document) { document.write(v+"
"); }

Все свойства текущего объекта "документ": 

Пример 18.4.

(html, txt)

Данный документ состоит из нескольких разделов. Обращение "window.document" позволяет обратиться к общему документу, а не к отдельно взятому разделу. Поэтому распечатанные свойства — это свойства всего документа. 


For
Оператор for — это еще один оператор цикла. В общем случае он имеет вид: 

for (инициализация переменных цикла; условие; модификация переменных цикла) оператор;

Оператор в теле цикла может быть блоком. Рассмотрим типичный пример использования этого оператора: 

for(i=0;i"); } http://intuit.ru/help/index.html http://intuit.ru/help/shop.html#choice http://intuit.ru/help/payment.html

Подобные примеры разбросаны по всем разделам курса. 


Функции
Язык программирования не может обойтись без механизма многократного использования кода программы. Такой механизм обеспечивается процедурами или функциями. В JavaScript функция выступает в качестве одного из основных типов данных. Одновременно с этим в JavaScript определен объект   Function. 
В общем случае любой объект JavaScript определяется через функцию. Для создания объекта используется конструктор, который в свою очередь вводится через Function. Таким образом, с функциями в JavaScript связаны следующие ключевые вопросы: 


функция — тип данных; 


функция — объект; 
конструкторы объектов. 


Именно эти вопросы мы и рассмотрим в данном разделе. 


Функция — объект
У любого типа данных JavaScript существует объектовая "обертка" — Wrapper, которая позволяет применять методы типов данных к переменным и литералам, а также получать значения их свойств. Например, длина строки символов определяется свойством length. Аналогичная "обертка" есть и у функций — объект   Function. 
Например, увидеть значение функции можно не только при помощи метода valueOf(), но и используя метод toString(): 

function f_name(x,y) { return x-y; } document.write(f_name.toString()+"
");

Результат распечатки: 

function f_name(x,y) { return x-y; }

Свойства функции доступны для программиста только тогда, когда они вызываются внутри функции. При этом обычно программисты имеют дело с массивом аргументов функции (arguments[]), его длиной (length), именем функции, вызвавшей данную функцию (caller)и прототипом (prototype). 
Рассмотрим пример использования списка аргументов функции и его длину: 

function my_sort() { a = new Array(my_sort.arguments.length); for(i=0;i");

Результат исполнения: 

b[0]=2 b[1]=3 b[2]=5 b[3]=7 b[4]=9

Если функция может быть вызвана из других функций, то в этом случае используется свойство caller: 

function slave() { document.write(slave.caller+""); return slave.caller; } function master1() { slave(); } function master2() { slave(); } ... master1(); master2();

Результат исполнения двух последних строк: 

function master1() { slave(); } function master2() { slave(); }

Еще одним свойством объекта   Function является prototype, но это общее свойство всех объектов, поэтому и обсуждать его мы будем в контексте типа данных   Object. Упомянем только о конструкторе объекта   Function: 

f = new Function(arg_1,...,arg_n, body)

Здесь f — это объект класса Function. Его можно использовать и как обычную функцию. Конструктор используют для получения безымянных функций, которые назначают или переопределяют методы объектов. Здесь мы вплотную подошли к вопросу конструирования объектов. Дело в том, что переменные внутри функции можно рассматривать в качестве ее свойств, а функции – в качестве методов: 


Функция — тип данных
Определяют функцию при помощи ключевого слова function: 

function f_name(arg1,arg2,...) { /* function body */ }

Здесь следует обратить внимание на следующие моменты. Во-первых, function определяет переменную f_name. Эта переменная имеет тип "function": 

document.write("Тип переменной f_name:"+ typeof(f_name));

Тип переменной f_name: function. Во-вторых, этой переменной присваивается значение: 

document.write("Значение i:"+i.valueOf()); document.write("Значение f_name:"+ f_name.valueOf());

Значение переменной f_name: 10. Значение переменной f_name:function f_name(a) { if(a>=0) return true; else return false; }. В данном случае метод valueOf() применяется как к числовой переменной i, так и к f_name. По этой причине функции можно назначить синоним путем присваивания ее значения другой переменной: 

function f_name(a) { if(a>=0) return true; else return false; } document.write("Значение переменной f_name:"+ f_name(1)+""); b = f_name; document.write("Значение переменной b:"+ b(1)+""); Значение переменной f_name:true Значение переменной b:true

Очевидно, что если функцию можно присвоить переменной, то ее можно передать и в качестве аргумента другой функции. Все это усиливается при использовании функции eval(), которая позволяет реализовать отложенное исполнение JavaScript-кода. Отложенное исполнение — это возможность изменения программы по ходу ее исполнения. Типичным использованием eval() является сокращение кода за счет генерации однотипных строк: 

for(i=0;i<5;i++) { eval("document.write('test"+i+"
')"); }

Результат исполнения кода: 

test0 test1 test2 test3 test4

При непосредственном кодировании пришлось бы написать пять строк кода. Данный подход использовался в разделе "Изменение картинки" для инициирования массивов картинок, имена которых построены по принципу индексации ячеек таблицы. 


If
Условный оператор применяется для ветвления программы по некоторому логическому условию. Общий синтаксис: 

if (логическое выражение) оператор1; [else оператор2;]

Логическое выражение — это выражение, которое принимает значение true или false. Если оно равно true, то оператор 1 исполняется. В квадратных скобках необязательная составляющая оператора if — альтернатива основной ветви вычислений: 

if (navigator.appName=="Netscape") { window.location.href= "http://intuit.ru/netscape.htm"; } else { window.location.href= "http://intuit.ru/explorer.htm"; }

Примеры использования условного оператора можно найти, например, в разделе "Тип браузера". 


Код во внешнем файле
Попав на данную страницу, вы уже использовали программу из внешнего файла. Чтобы убедиться в этом, достаточно посмотреть на HTML-разметку данной страницы: 

 
 ...  ...   ...  

Контейнер SCRIPT определяет внешний файл размещения скриптов. Функция jump() расположена именно в этом файле. Она анализирует ссылку на данный документ, и если в ней есть компонент hash(#), то она продергивает файл до якоря, указанного в hash. Чтобы в этом убедиться, перейдите по любой внутренней ссылке, например, из меню разбивки раздела на подразделы, а после этого перезагрузите документ по Ctrl+R. Сначала документ будет загружен, а потом прокручен до указанного якоря. 


Литералы
Литералом называют данные, которые используются в программе непосредственно. При этом под данными понимаются числа или строки текста. Все они рассматриваются в JavaScript как элементарные типы данных. Приведем примеры литералов: 

числовой литерал: 10 числовой литерал: 2.310 числовой литерал: 2.3e+2 строковый литерал: 'Это строковый литерал' строковый литерал: "Это строковый литерал"

Литералы используются в операциях присваивания значений переменным или в операциях сравнения: 
var a=10; var str = 'Строка'; if(x=='test') window.alert(x);

Два варианта строковых литералов необходимы для того, чтобы использовать вложенные строковые литералы. Вообще говоря, есть подозрение, что равноправие "..." и '...' мнимое. Если внимательно посмотреть на реализацию страниц программирования гипертекстовых ссылок (href.htm, path.htm и mouse.htm), можно заметить, что вместо прямого переназначения гипертекстовой ссылки литералом типа '...' там используется косвенное переназначение через функцию литералом "...": 

... function line(a) { ... window.document.main.document.links[4].href= "javascript:data(0);void(0);"; ... } ...   

вместо: 

  

Это связано с особенностями реализации Netscape. Дело в том, что прямое переназначение неправильно отображает кириллицу в win32, а вот косвенное работает. Похоже, что "..." разрешает анализ информации внутри строкового литерала JavaScript-интерпретатором, а '...' — нет. 
Если быть более точным, то следует сказать, что строка — это объект. У этого объекта существует великое множество методов. Строчный литерал и строчный объект — далеко не одно и то же. При применении к строчным литералам методов строчных объектов происходит преобразование первых в последние. 


Массивы
Массивы делятся на встроенные (document.links[], document.images[],...) и определяемые пользователем (автором документа). Встроенные массивы мы подробно обсуждаем в разделах "Программируем картинки", "Программируем формы" и "Программируем гипертекстовые переходы". Поэтому подробно остановимся на массивах, определяемых пользователем. Для массивов задано несколько методов: 


join(); 


reverse(); 


sort(); 


и свойство length, которое позволяет получить число элементов массива. Это свойство активно используется в примерах данного раздела. В частности, при обсуждении метода join(). 
Для определения массива пользователя существует специальный конструктор: 

a = new Array(); b = new Array(10); c = new Array(10,"Это значение");

Пример использования: 

 
 


Как видно из этого примера, массив может состоять из разнородных элементов. Массивы не могут быть многомерными. 
Для работы с массивами в JavaScript применяются методы join(), reverse(), sort(). Кроме того, массивы обладают свойством длины, length. 


Метод join()
Метод join() позволяет объединить элементы массива в одну строку. Он является обратной функцией методу split(), который применяется к объектам типа STRING. Рассмотрим пример преобразования локального URL в URL схемы http: 

window.location: http://intuit.ru/help/index.html

Выполнили: 

b = window.location.href.split('/');

Получили массив b: 

b[0]=http: b[1]= b[2]=intuit.ru b[3]=help b[4]=index.html

Заменили схему и вставили "host:port": 

for(i=0;i
Получили массив b: 

b[0]=http: b[1]= b[2]=intuit.ru b[3]=help b[4]=index.html

Слили элементы массива b: 
l=b.join("/");

Получили в результате: 

http://intuit.ru/help/index.html

Другой пример использования метода join() — замена символа в строке: 

str = "document.img1.src= 'http://images/imagе1.gif';" document.write(str);

Исходная строка: 

document.img1.src='http://images/imagе1.gif';

Заменяем в строке все единицы на двойки: 

b = str.split('1'); str = b.join('2');

Получаем следующий результат: 

document.img2.src='http://images/imagе2.gif';

Последний пример показывает, что массив пользователя можно получить и без явного применения конструктора массива. Массив элементов строки получается просто как результат действия функции split(). 


Метод reverse()
Метод reverse() применяется для изменения на противоположный порядка элементов массива внутри массива. Предположим, массив натуральных чисел упорядочен по возрастанию: 
a = new Array(1,2,3,4,5);

Упорядочим его по убыванию: 

a.reverse(); a[0]=5 a[1]=4 a[2]=3 a[3]=2 a[4]=1

Можно, наверное, придумать и более внятный пример, но, к сожалению, на практике встречаться с этим методом мне приходилось нечасто. 


Метод sort()
Как принято в современных интерпретируемых языках, например в Perl, метод sort() позволяет отсортировать элементы массива в соответствии с некоторой функцией сортировки, чье имя используется в качестве аргумента метода: 

a = new Array(1,6,9,9,3,5); function g(a,b) { if(a > b) return 1; if(a < b) return -1; if(a==b) return 0; } b = a.sort(g);

В результате выполнения этого кода получим массив следующего вида: 

b[0]=1 b[1]=3 b[2]=5 b[3]=6 b[4]=9 b[5]=9

Возможность использования произвольной функции сортировки позволяет выполнять подробный анализ строковых объектов. Одним из таких примеров может служить анализ строки атрибута SRC контейнера IMG, если картинка подставляется скриптом, и сортировка полей формы по значениям: 

document.image.src = "http://www.intuit.ru:80/cgi-bin/ image?x=10&y=20&z=15";

Выделим x и y. Затем отсортируем их: 

str = "http://www.intuit.ru:80/cgi-bin/ image?x=10&y=20&z=15"; s = str.split('?'); s1 = s[1].split('&'); s2 = s1.sort(g); for(i=0;i"); s2[0]='x=10' s2[1]='z=15' s2[2]='y=20'

Аналогичные манипуляции можно проделать с любым массивом. Если не указывать функции в аргументе метода сортировки, то элементы массива сортируются в лексикографическом порядке. Это значит, что они сначала преобразуются в строки и только потом сортируются. 

Методы объекта Object
Object — это объект и, следовательно, у него могут быть методы. Таких методов мы рассмотрим три: toString(), valueOf() и assign(). 
Метод toString() осуществляет преобразование объекта в строку символов. Он используется в JavaScript-программах повсеместно, но неявно. Например, при выводе числа или строковых объектов. Интересно применение toString() к функциям: 

document.write(prot.toString()+"
");

Результат исполнения: 

function prot() { a = this.src.split(':'); protocol = a[0]+":"; return protocol; }

Здесь мы используем функцию   prot() из примера с прототипом. Если распечатать таким же образом объект   Image, то получим следующее: 

картинка:[object]

Таким образом, далеко не всегда метод toString() возвращает строковый эквивалент содержания объекта. Он может просто вернуть его тип. Internet Ехplorer при этом возвращает "Object", в то время как Netscape Navigator — "object Image". 
Аналогично ведет себя и метод valueOf(). Этот метод позволяет получить значение объекта. В большинстве случаев он работает подобно методу toString(), особенно если нужно выводить значение на страницу: 

document.write(prot.valueOf()+"
");

Результат исполнения: 

function prot() { a = this.src.split(':'); protocol = a[0]+":"; return protocol; }

Как видим, результат тот же, что и в методе toString(). 
В отличие от двух предыдущих методов, assign() позволяет не прочитать, а переназначить свойства и методы объекта. Данный метод используется в контексте присваивания объекту некоторого значения: 

object = value; <=> object.assign(value);

Рассмотрим пример: 

c = new Image(); c.src = "image1.gif"; b =new Image(); b.src = "image2.gif"; Image.prototype.assign = new Function("a","this.src = a.src;"); ... Покрасить картинку

В данном примере мы применяем метод assign() не внутри JavaScript-кода, а в обычной HTML-разметке. При этом перед использованием метода мы переопределили его своей функцией. Пользователей Internet Explorer следует предупредить, что здесь мы их немножко обманываем, так как переназначить прототип Image в Internet Explorer мы в данном случае не можем. 


Модель безопасности
При программировании на JavaScript потенциально существует возможность доступа из программы к персональной информации пользователя. Такая проблема возникает всегда, когда нечто, запускаемое на компьютере, имеет возможность самостоятельно организовать обмен данными по сети с удаленным сервером. 
От версии к версии управление защитой таких данных постоянно совершенствуется, но всегда нужно иметь в виду, что множество "следопытов" исследует эту проблему и постоянно открывает все новые и новые возможности обхода механизмов защиты. 
Объясним только основные моменты в принципах защиты информации в JavaScript, а поиск потенциально слабых мест оставим в качестве домашнего задания для наиболее пытливых читателей. 
По умолчанию к защищенным в JavaScript данным относятся: 
ОбъектСвойства
Document
cookie, domain, forms[], lastModified, links[], location, referer, title, URL
Form
action
document.forms [].elements[]
checked, defaultChecked, defaultValue, name, selectedIndex, toString, value
History
current, next, previous, toString(), all array elements
Location, Link, Area
hash, host, hostname, href, pathname, port, protocol, search, toString()
Option
defaultSelected, selected, text, value
Window
defaultStatus, status


Защищенными эти данные являются с той точки зрения, что программа не может получить значения соответствующих атрибутов. Главным образом речь здесь идет о программе, которая пытается получить доступ к данным, которые определены на другой странице (не на той, в рамках которой данная программа исполняется). Например, к данным из другого окна. 
В настоящее время известны три модели защиты: запрет на доступ (Navigator 2.0), taint model (Navigator 3.0), защита через Java (Navigator 4.0). Применение моделей и соответствующие приемы программирования — это отдельный сложный вопрос, требующий знаний и навыков программирования на языке Java, поэтому в рамках данного курса мы его рассматривать не будем. 
Отметим только, что к большинству свойств объектов текущей страницы и окна программист имеет доступ. Они становятся защищенными только в том случае, если относятся к документу в другом окне и загруженному из другого Web-узла. Поэтому ограничения, накладываемые системой безопасности JavaScript, достаточно гибкие и не очень сильно мешают разработке страниц с применением этого языка программирования. 


Невидимый фрейм
Технология программирования в невидимом фрейме основана на том, что при описании фреймовой структуры можно задать конфигурацию типа: 

   

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


Невидимый код
Вопрос доступности JavaScript-кода рассматривается с двух точек зрения: идентификация, как следствие — необходимость сокрытия кода, и безопасность пользователя, следовательно — доступность кода. 
Приемы программирования со скрытым кодом позволяют решить еще несколько задач, которые не связаны с безопасностью. 
Мы будем рассматривать возможность использования скрытого кода без выдачи вердиктов о преимуществе того или иного подхода. Рассмотрим несколько вариантов: 
невидимый фрейм; 
код во внешнем файле; 


обмен данными посредством встроенной графики. 


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


Объекты
Объект — это главный тип данных JavaScript. Любой другой тип данных имеет объектовую "обертку" — Wrapper. Это означает, что прежде чем можно будет получить доступ к значению переменной того или иного типа, происходит конвертирование переменной в объект, и только после этого выполняются действия над значением. Тип данных   Object сам определяет объекты. 
В данном разделе мы остановимся на трех основных моментах: 
понятие объекта; 


прототип объекта; 
методы объекта   Object. 


Мы не будем очень подробно вникать во все эти моменты, так как при программировании на стороне браузера чаще всего обходятся встроенными средствами JavaScript. Но поскольку все эти средства — объекты, нам нужно понимать, с чем мы имеем дело. 


Обмен данными посредством встроенной графики
Данный прием основан на двух идеях: возможности подкачки графического образа без перезагрузки страницы и возможности подкачки этого графического образа не через указание URL графического файла, а через CGI-скрипт, который возвращает Content-type: image/... или осуществляет перенаправление. 
При этом следует учитывать, что использовать метод, отличный от GET, можно только в формах, а мы хотим просто менять значение свойства src: 

... function change_image(x) { s = "http://intuit.ru/cgi-bin/image_script?"+ document.cookie; document.x.src= s; ...   

Эта безобидная последовательность операторов JavaScript позволит нам узнать получил ли клиент cookie. "Волшебные ключики" могут не поддерживаться по разным причинам. В данном случае программа передает на сервер выставленные им "ключики" в качестве параметра скрипта под видом изменения картинки. 


Операторы языка
В этом разделе будут рассмотрены операторы JavaScript. Основное внимание при этом мы уделим операторам декларирования и управления потоком вычислений. Без них не может быть написана ни одна JavaScript-программа. 
Общий перечень этих операторов выглядит следующим образом: 


var; 


{...}; 


if; 


while; 


for; 


for ... in; 


break; 


continue; 


return. 


Сразу оговоримся, что этот список неполный. 


Переменные
Переменные в JavaScript могут быть определены назначением или при помощи оператора var: 

i=10; var i; var i=10; var id = window.open(); var a = new Array();

Как видно из примеров, переменные могут принимать самые разные значения, при этом тип переменной определяется контекстом. 
Переменная является свойством окна. Например, мы можем открыть окно, определить в нем новую переменную и использовать ее: 

Пример 18.1.

(html, txt)

Существуют ли в JavaScript различные типы переменных? По всей видимости, да. При объявлении переменной тип не указывается. Тип значения определяется контекстом, поэтому можно было бы предположить, что все переменные — одного и того же типа. Однако очевидно, что присваивание переменной значения объекта окна (window.open()) или объекта потока (setTimeout()), вызывает создание в памяти совершенно разных структур. 
Поставим вопрос несколько иначе. Может ли одна и та же переменная принимать значения разных типов? Для ответа на этот вопрос рассмотрим следующий пример: 

Пример 18.2.

(html, txt)

Можно в любом порядке нажимать на кнопки формы, и все будет работать правильно. При этом переменная cid используется и как идентификатор потока, и как идентификатор окна. Это означает, что JavaScript все-таки поддерживает полиморфизм, т.е. существует два разных объекта с одинаковыми именами, и система в них не путается. 

Понятие объекта
Сначала рассмотрим пример произвольного, определенного пользователем объекта, потом выясним, что же это такое: 
function Rectangle(a,b,c,d) { this.x0 = a; this.y0 = b; this.x1 = c; this.y1 = d; this.area = new Function( "return Math.abs(this.x0-this.x1)* Math.abs(this.y0-this.y1)"); this.perimeter = new Function( "return (Math.abs(this.x0-this.x1) + Math.abs(this.y0-this.y1))*2"); } c = new Rectangle(0,0,100,100); document.write(c.area());

Результат исполнения: 
10000

Этот же пример использовался в разделе "Функции" для иллюстрации применения конструктора функции. Здесь мы рассмотрим его в более общем контексте. 

Функция   rectangle() — это конструктор объекта класса Rectangle, который определяется пользователем. Конструктор позволяет создать реальный объект данного класса. Ведь функция — это не более чем описание некоторых действий. Для того чтобы эти действия были выполнены, необходимо передать функции управление. В нашем примере это делается при помощи оператора new . Он вызывает функцию и тем самым генерирует реальный объект. 
Создается четыре переменных: x0, y0, x1, y1 — это свойства объекта   Rectangle. К ним можно получить доступ только в контексте объекта данного класса, например: 

up_left_x = c.x0; up_left_y = c.y0;

Кроме свойств мы определили внутри конструктора два объекта типа Function(), применив встроенные конструкторы языка JavaScript, — area и perimeter. Это методы объекта данного класса. Вызвать эти функции можно только в контексте объекта класса Rectangle: 

sq = c.area(); length = c.perimeter();

Таким образом, объект — это совокупность свойств и методов, доступ к которым можно получить, только создав при помощи конструктора объект данного класса и использовав его контекст. 
На практике довольно редко приходится иметь дело с объектами, созданными программистом. Дело в том, что объект создается функцией-конструктором, которая определяется на конкретной странице и, следовательно, все, что создается в рамках данной страницы, не может быть унаследовано другими страницами. Нужны очень веские основания, чтобы автор Web-узла занялся разработкой библиотеки классов объектов пользователя. Гораздо проще писать функции для каждой страницы. 


Закрыть окно' 

wid = window.open("","test","width=200,height=100,statusbar"); wid.document.open(); wid.document.write("
"); wid.document.write(""); wid.document.write(""); wid.document.write("Новое окно
"); wid.document.write("
"); wid.document.write("
"); wid.document.write(""); wid.document.close(); ... ... 

Пример 18.1. 
Закрыть окно



 var flag= 0; var cid=null; function clock() { flag=1; d = new Date(); window.document.main.document.f0.fi1.value= d.getHours()+":"+d.getMinutes()+":"+d.getSeconds(); cid = setTimeout("clock();",10000); } function stop() { if(cid!=null) { clearTimeout(cid); cid=null; flag=0; } } function wo() { cid = window.open("","test","width=400,height=100"); cid.document.open(); cid.document.write("
"); cid.document.write("
"); cid.document.write(""); cid.document.close(); cid.focus(); } ... 
    
 

Пример 18.2. 
Закрыть окно



function prot() { a = this.src.split(':'); protocol = a[0]+":";  return protocol; } function host() { a = this.src.split(':'); path = a[1].split('/'); return path[2]; } function pathname() { a = this.src.split(':'); path = a[1].split('/'); b = new array(); for(i=3;i
"); document.write(document.i1.src+"
"); document.write(document.i1.protocol()+"
"); document.write(document.i1.host()+"
"); document.write(document.i1.pathname()+"
"); 

Пример 18.3. 
Закрыть окно



namespaces:[object] lastModified:07/16/2002 21:22:53 onmousedown:null URLUnencoded:http://intuit.ru/help/index.html fileCreatedDate:07/16/2002 onbeforeeditfocus:null bgColor:#ffffff oncontextmenu:null onrowexit:null embeds:[object] scripts:[object] mimeType:HTML Document alinkColor:#0000ff onmousemove:null onselectstart:null oncontrolselect:null body:[object] protocol:HyperText Transfer Protocol onkeypress:null onrowenter:null vlinkColor:#800080 URL:http://intuit.ru/help/index.html onreadystatechange:null applets:[object] domain:intuit.ru fileModifiedDate:07/16/2002 onmouseover:null dir: media: defaultCharset:windows-1251 plugins:[object] ondragstart:null oncellchange:null cookie:hotlog=1; hotlog=1; b=b documentElement:[object] ondatasetcomplete:null nameProp:Web-engineering (Introduction to the JavaScript. Operators.) referrer:http://intuit.ru/help/index.html onrowsdelete:null onerrorupdate:null onselectionchange:null ondblclick:null onkeyup:null location:http://intuit.ru/help/index.html forms:[object] title:Web-engineering (Introduction to the JavaScript. Operators.) onrowsinserted:null onmouseup:null onkeydown:null fgColor:#000080 ondatasetchanged:null onmouseout:null parentWindow:[object] fileUpdatedDate:01/01/1601 onpropertychange:null onstop:null onhelp:null linkColor:#0000ff images:[object] readyState:interactive frames:[object] all:[object] onclick:null childNodes:[object] anchors:[object] selection:[object] onbeforeupdate:null security: This type of document does not have a security certificate. fileSize:15911 ondataavailable:null styleSheets:[object] activeElement:null links:[object] onafterupdate:null sea001:[object]onafterupdate:null down:[object]onafterupdate:null 

Пример 18.4. 
Закрыть окно
Прототип
Обычно мы имеем дело со встроенными объектами JavaScript. Собственно, все, что изложено в других разделах курса — это обращение к свойствам и методам встроенных объектов. В этом смысле интересно свойство объектов, которое носит название prototype. Прототип — это другое название конструктора объекта конкретного класса. Например, если мы хотим добавить метод к объекту класса String: 

String.prototype.out = new Function("a", "a.write(this)"); ... "Привет!".out(document);

Результат исполнения: 

Привет!

Для объявления нового метода для объектов класса String мы применили конструктор Function. Есть один существенный нюанс: новыми методами и свойствами будут обладать только те объекты, которые порождаются после изменения прототипа объекта. Все встроенные объекты создаются до того, как JavaScript-программа получит управление, что существенно ограничивает применение свойства prototype. 
Тем не менее покажем, как можно добавить метод к встроенному в JavaScript классу объектов. Примером будет служить встроенный поименованный Image. Задача состоит в том, чтобы разобрать URL картинки таким же образом, как и URL объекта класса Link: 

Пример 18.3.

(html, txt)

Основная идея заключается в том, чтобы переопределить конструктор раньше, чем он будет использован. HTML-парсер разбирает HTML и создает встроенные объекты раньше, чем запускается JavaScript-интерпретатор. Из этого следует, что объект на странице нужно создать через JavaScript-код. В этом случае сначала происходит переопределение объекта   Image, а уже после этого создается встроенный объект данного класса. При работе с Internet Explorer все иначе. Если на свойство prototype у строкового объекта он не "ругается", то для Image такое свойство уже не определено. 


Return
Оператор return используют для возврата значения из функции или обработчика события (см. разделы "Поле статуса", "Обмен данными"). Рассмотрим пример: 

  


В данном примере return используется для маскирования передачи данных на сервер. 

Скрытая передача данных из форм
Обмен данными в Web-технологии подробно рассматривается в другой главе — "CGI и формы". Программирование элементов форм обсуждается в разделе "Программируем формы". В этом разделе мы рассмотрим вопрос о возможности передачи скрытых от пользователя данных. 
Рассмотрим следующий пример. Нажмите на кнопку "Подписка" и посмотрите на строку location своего браузера. Вы обнаружите там два поля, которых нет в заполняемой вами форме: h1 и h2. Это уже неприятно, хотя сама информация в них отнюдь не криминальная (location.href и document.referer). Это означает, что в тексте страницы есть вызов функции со строками типа: 



Теперь посмотрим другой пример. Если начать вводить данные в левом фрейме окна примера, то, как только вы переходите от поля к полю, в правом фрейме заполняются соответствующие поля. Cкрипт из правого фрейма читает данные из полей левого фрейма. В кодах это будет выглядеть примерно так: 

function ask() { document.forms[0].elements[0].value= window.top.frames[0].document.forms[0 ].elements[0].value; document.forms[0].elements[1].value= window.top.frames[0].document.forms[0 ].elements[1].value; document.forms[0].elements[2].value= window.top.frames[0].document.forms[0 ].elements[2].value; document.forms[0].elements[3].value= window.top.frames[0].document.forms[0 ].elements[3].value; setTimeout("ask();",100); } ... 

Это означает, что данные из одного окна могут быть считаны программой из другого окна. Вопрос только в том, хотите ли вы, чтобы это происходило. Как решаются эти вопросы, рассказано в разделе "Модель безопасности". 
Еще один пример — отправка данных по событию без наличия какой-либо формы в документе вообще. 

  
   Нажми на ссылку 

Результат исполнения: 

Нажми на ссылку

Согласно примеру при нажатии на гипертекстовую ссылку произойдет не только выдача сообщения, которое в этой ссылке указано, но и событие Submit для формы. В итоге вы получите два окна предупреждения. Но второе окно вы не заказывали! 
Конечно, бесконтрольной передачи данных на сервер можно избежать, введя режим подтверждения отправки. Но, во-первых, многие пользователи его отключают, а во-вторых, можно использовать не формы, а, например, графику. И эту возможность мы рассматриваем в разделе "Невидимый код". 


Типы и структуры данных
Как и любой другой язык программирования, JavaScript поддерживает встроенные типы и структуры данных. Все их многообразие подразделяется на: 
литералы и переменные; 
массивы, функции и объекты. 


При этом все они делятся на встроенные и определяемые программистом. Функции и объекты рассматриваются в разделах "Функции" и "Объекты". Поэтому здесь мы остановимся на литералах, переменных и массивах. 


Управление фокусом во фреймах
Фрейм — это такое же окно, как и само окно браузера. Точнее — это объект того же класса. К нему применимы те же методы, что и к обычному объекту "окно": 

var flag=1; function clock() { if(flag==0) { d=new Date(); s=d.getHours()+':'+d.getMinutes()+':'+ d.getSeconds(); window.document.forms[0].elements[0].value=s; } setTimeout('clock();',100); } window.onblur = new Function('this.flag = 1;'); window.onfocus = new Function('this.flag = 0;'); window.onload = clock;

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


Управление фокусом
Фокус — это характеристика текущего окна, фрейма или поля формы. В каждом из разделов, описывающем программирование этих объектов, мы, так или иначе, касаемся вопроса фокуса. Под фокусом понимают возможность активизации свойств и методов объекта. Например, окно в фокусе, если оно является текущим, т.е. лежит поверх всех других окон и исполняются его методы или можно получить доступ к его свойствам. 
В данном разделе мы рассмотрим управление фокусом в 
окнах; 
фреймах; 
полях формы. 


Следует сразу заметить, что фреймы — это тоже объекты класса Window, и многие решения, разработанные для окон, справедливы и для фреймов. 


Управляем фокусом в окнах
Для управления фокусом у объекта класса "окно" существует два метода: focus() и blur(). Первый передает фокус в окно, в то время как второй фокус из окна убирает. Рассмотрим простой пример: 

function hide_window() { wid=window.open("","test", "width=400,height=200"); wid.opener.focus(); wid.document.open(); ... wid.document.close(); }

В данном примере новое окно открывается и сразу теряет фокус; прячется за основным окном-родителем. Если при первичном нажатии на кнопку оно еще всплывает и только после этого прячется, то при повторном нажатии пользователь не видит появления нового окна, так как оно уже открыто и меняется только его содержимое. 
Для того чтобы этого не происходило, нужно после открытия передавать фокус на новое окно: 

function visible_window() { wid=window.open("","test", "width=400,height=200"); wid.focus(); wid.document.open(); ... wid.document.close(); }

Если теперь нажимать попеременно кнопки "Скрытое окно" и "Видимое окно", окно будет то появляться, то исчезать. При этом новых окон не появляется, так как с одним и тем же именем может быть открыто только одно окно. 
Невидимое окно может доставить пользователю неприятности, из которых самая безобидная — отсутствие реакции на его действия. Код просто записывается в невидимое окно. Но ведь в скрытом окне можно что-нибудь и запустить. Для этого стоит только проверить, существует ли данное окно или нет, и если оно есть и не в фокусе, то активизировать в нем какую-нибудь программу. 
Для реализации такого сценария достаточно использовать метод окна onblur(). Его можно также задать в контейнере BODY в качестве обработчика события onBlur, но в этом случае он видим пользователю. Мы воспользуемся этим методом "в лоб": 

window.onblur = new Function("window.defaultStatus = 'Background started...';"); window.onfocus = new Function("window.defaultStatus = 'Document:Done';");

Обратите внимание на поле статуса браузера. Оно демонстрирует возможность выполнения функции в фоновом режиме. Кроме того, onblur() в этом виде не отрабатывает в Internet Explorer. Причина кроется в прототипе объекта и возможности его переназначения программистом. 
Конечно, когда разработчики создавали всю эту конструкцию, думали не о том, как насолить пользователю, а о том, как сократить ресурсы, необходимые браузеру для отображения нескольких окон. Ведь можно выполнить все то же самое с точностью до наоборот: запускать, например, часы в фокусе и останавливать их в фоне. Но этот пример мы рассмотрим в контексте фреймов. 


Var
Оператор var служит для объявления переменной. При этом переменная может принимать значения любого из разрешенных типов данных. На практике довольно часто обходятся без явного использования var. Переменная соответствующего типа создается путем простого присваивания: 

var a; var a=10; var a = new Array(); var a = new Image();

Все перечисленные выше примеры использования var верны и могут быть применены в JavaScript-программе. Область действия переменной определяется блоком (составным оператором), в котором используется переменная. Максимальная область действия переменной — страница. 


While
Оператор while определяет цикл. Определяется он в общем случае следующим образом: 

While (логическое выражение) оператор;

Оператор, в том числе и составной, — тело цикла. Тело исполняется до тех пор, пока верно логическое условие: 

while (flag==0) { id=setTimeout ("test();",500); }

Обычно цикл этого типа применяют при выполнении периодических действий до некоторого события. 



    Бизнес: Предпринимательство - Малый бизнес - Управление

Бизнес

Разновидности бизнеса

Планирование бизнеса

Управление бизнесом



Предпринимательство

Русское предпринимательство

Управление и предпринимательство



Малый бизнес

Виды малого бизнеса

Русский малый бизнес

Управление малым бизнесом

Posix для малого бизнеса



Телефония как малый бизнес

Телефония на Java для малого бизнеса