Текст книги "Введение в JavaScript для Мага"

Автор книги: Стефан Кох

сообщить о нарушении

Текущая страница: 5 (всего у книги 6 страниц)

Часть 10: Слои II

Мы уже обсудили основные понятия новой технологии слоев. В этой же части будут рассмотрены следующие темы:

· Вырезка из слоя

· Вложенные слои

· Различные эффекты с прозрачными слоями

Вырезка из слоя

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

(Здесь я приписал параметры left=0 и top=0, поскольку в противном случае, если этого не сделать, то с моей версией Netscape (PR3 on WinNT) возникают некоторые проблемы)

Хотя само изображение и имеет размеры 209x264 пикселов, мы можем видеть лишь его малую часть:

Данный фрагмент изображения имеет размер 90x70 (пикселов). Первые два значения, указанные в атрибуте clip (атрибуте HTML-тэга или ), указывают верхний левый угол вырезаемой части. Следующие два значения указывают нижний правый угол. Сказанное можно проиллюстрировать следующим рисунком:

Еще более интересных результатов можно добиться, управляя вырезанной частью с помощью языка JavaScript. Точнее, Вы можете изменять значения свойств clip.left, clip.top, clip.right и clip.bottom объекта Layer. Достаточно всего лишь занести в одно из этих свойств новое значение, как фрагмент тут же будет кадрирован соответствующим образом. В следующем примере параметры вырезанной части изображения меняются динамически, и в результате у пользователя создается впечатление, будто изображение медленно «растет»:

Код соответсвующего скрипта:

Кнопка, представленная в разделе , вызывает функцию start(). Сначала мы должны определить точку, с которой нам следует начать работу – фактически это будет некий пиксел в центре нашего изображения. Значения координат x и y этого пиксела мы помещаем в переменные middleX и middleY. После этого мы вызываем функцию show(), которая задает размеры вырезаемой части изображения в зависимости от значений переменных middleX, middleY и параметра pos. При этом значение переменной pos автоматически увеличивается при каждом вызове функции show(). То есть размер вырезаемой части изображения с каждым разом становится все больше и больше. В самом конце процедуры show() мы устанавливаем таймер с помощью вызова setTimeout() – и благодаря этому функция show() вызывается вновь и вновь. И этот процесс остановится только тогда, когда изображение будет показано целиком.

Заметим, что размер изображения мы получаем в самом начале функции start():

var width= document.layers["imgLayer"].document.davinci.width;

var height= document.layers["imgLayer"].document.davinci.height;

С помощью конструкции document.layers["imgLayer"] мы можем обратиться к слою с именем imgLayer. Однако почему после document.layers["imgLayer"] мы ставим document? Дело в том, что каждый слой имеет свою собственную HTML-страницу – то есть, каждый слой имеет свой объект document. Чтобы получить доступ к изображению внутри слоя imgLayer, нам необходимо получить доступ к этому объекту document. В приведенном выше примере такое изображение носило название davinci. Все остальное поле листа должно быть чистым.

Вложенные слои

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

В первом примере используется слой (называемый parentLayer), в который вложено еще два других слоя (layer1 и layer2).

После открытия страницы мы видим три кнопки. Эти кнопки могут запускать и останавливать движение слоев. Также можно видеть, что перемещение слоя parentLayer сопровождается перемещением и двух других слоев, тогда как перемещение слоя layer1 (или layer2) ни на что другое не влияет. Этот пример демонстрирует возможность объединения группы объектов с помощью механизма вложенных слоев.

Рассмотрим теперь исходный код скрипта:

Это первый слой

Это второй слой

Это главный (родительский) слой

Можно видеть, что внутри parentLayer мы определили два слоя. Это как раз и есть вложенные слои. Как получить к этим слоям доступ в языке JavaScript? Как это делается, можно посмотреть в функции move():

document.layers["parentLayer"].left= 100 + pos0;

…

document.layers["parentLayer"].layers["layer1"].top= 10 + pos1;

…

document.layers["parentLayer"].layers["layer2"].top= 10 + pos2;

Чтобы получить доступ к вложенным слоям, Вам недостаточно будет просто написать document.layers["layer1"] или document.layers["layer2"], поскольку слои layer1 и layer2 лежат внутриparentLayer.

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

Исходный код скрипта:

И снова, можно видеть пример обращения к вложенному слою:

document.layers["clippingLayer"].layers["imgLayer"].top= 100 + pos;

С остальными элементами этого скрипта Вы уже должны быть знакомы.

Различные эффекты с вложенными слоями

Интересные эффекты могут быть созданы с помощью (частично) прозрачных слоев. Сочетание специально подобранных изображений с прозрачными областями может создавать совершенно потрясающий результат. Не все форматы изображений поддерживают работу с прозрачными частями. В настоящее время лучший из отвечающих этому условию форматов – gif89a. Большинство новых графических программ поддерживает этот формат. Помимо этого, в Internet доступны некоторые свободно распространяемые инструменты для работы с графикой.

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

Давайте рассмотрим такого эффекта:

В данном примере используются два изображения (сплошные серые зоны здесь на самом деле являются прозрачными):

Сам скрипт несильно отличается от других примеров – так что я не буду здесь его распечатывать (впрочем, Вы конечно можете увидеть его, выбрав в меню Вашего браузера пункт 'View document source').

В Сети можно найти множество замечательных страниц, основанных на сочетании слоев с прозрачными частями. Некоторые из таких примеров Вы можете найти на моей странице с примерами JavaScript (она является частью home page моей книги о JavaScript и находится по адресу http://www.dpunkt.de/javascript /) – сама страница доступна как в английском, так и в немецком варианте.

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

Part 11: Модель событий в JavaScript 1.2

Новые события

Наступило время, рассмотреть одну из новых особенностей Netscape Navigator 4.x – модель событий JavaScript 1.2. Приведенные здесь примеры будут работать только в Netscape Navigator 4.x (хотя большинство из них работают также и в предварительных версиях этого браузера).

В JavaScript 1.2 поддерживается обработка следующих событий (если Вы хотите узнать побольше об этих событиях, обратитесь к документации JS 1.2 от фирмы Netscape):

Изучая таблицу, можете увидеть, что была реализована обработка некоторых новых событий. На этом уроке мы и рассмотрим некоторые из них.

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

Пожалуйста, измените размер этого окна.

В строке window.onresize= message мы задаем процедуру обработки такого события. Точнее, функция message() будет вызываться всякий раз, как только пользователь изменит размер окна. Возможно, Вы не знакомы с таким способом назначения программ, обрабатывающих события. Однако JavaScript 1.2 ничего нового здесь не привносит. Например, если у Вас есть объект button, то Вы можете определить процедуру обработки события следующим образом:

Однако Вы можете написать это и по-другому:

…

"Кликните" по этой ссылке.

Как видно, мы не указываем программы обработки событий в тэге . Вместо этого мы пишем

window.captureEvents(Event.CLICK);

с тем, чтобы перехватить событие Click объектом window. Обычно объект window не работает с событием Click. Однако, перехватив, мы затем его переадресуем в объект window.

Заметим, что в Event.CLICK фрагмент CLICK должен писаться заглавными буквами. Если же Вы хотите перехватывать несколько событий, то Вам следует отделить их друг от друга символами |. Например:

window.captureEvents(Event.CLICK | Event.MOVE);

Помимо этого в функции handle(), назначенной нами на роль обработчика событий, мы пользуемся инструкцией return true;. В действительности это означает, что браузер должен обработать и саму ссылку, после того, как завершится выполнение функции handle(). Если же Вы напишете вместо этого return false;, то на этом все и закончится.

Если теперь в тэге Вы зададите программу обработки события onClick, то поймете, что данная программа при возникновении данного события вызвана уже не будет. И это не удивительно, поскольку объект window перехватывает сигнал о событии еще до того, как он достигает объекта link. Если же Вы определите функцию handle() как

function handle(e) {

alert("Объект window перехватывает это событие!");

window.routeEvent(e);

return true;

}

то компьютер будет проверять, определены ли другие программы обработки событий для данного объекта. Переменная e – это наш объект Event, передаваемый функции обработки событий в виде аргумента.

Кроме того, Вы можете непосредственно послать сигнал о событии какому-либо объекту. Для этого Вы можете воспользоваться методом handleEvent(). Это выглядит следующим образом:

"Кликните" по этой ссылке

onClick="alert('Обработчик событий для второй ссылки!);">Вторая ссылка

Все сигналы о событиях Click, посылаются на обработку по второй ссылке – даже если Вы вовсе и не щелкнули ни по одной из ссылок!

Следующий скрипт демонстрирует, как Ваш скрипт может реагировать на сигналы о нажатии клавиш. Нажмите на какую-либо клавишу и посмотрите, как работает этот скрипт.

Часть 12: Drag & Drop

Что такое drag & drop?

С помощью новой модели событий в языке JavaScript, 1.2 и механизма слоев мы можем реализовать на нашей web-странице схему drag & drop («перетащил и оставил»). Для этого Вам понадобится по крайней мере Netscape Navigator 4.0, поскольку мы будем пользоваться особенностями языка JavaScript 1.2.

Что такое drag & drop? Например, некоторые операционные системы (такие как Win95/NT или MacOS) позволяют Вам стирать файлы, просто перетаскивая их в мусорную карзину. Иными словами, Вы щелкаете клавишей мыши над изображением файла, перетаскиваете его (то есть держите клавишу нажатой и просто двигаете мышь) – drag – в мусорную карзину, а затем отпускаете – drop – его там.

Механизм drag & drop, который мы хотим здесь реализовать, ограничивается web-страницей. Поэтому Вы не можете использовать представленный здесь код, чтобы переносить объекты с HTML-страницы на жесткий диск вашего компьютера или другие подобные действия. (Начиная с версии 4.0 браузера Netscape Navigator ваш скрипт может реагировать на событие с названием DragDrop, событие, когда кто-либо перетаскивает файл на окно вашего браузера. Но это не совсем то, о чем мы здесь хотим поговорить)

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

Также можно рассмотреть пример, предоставленный компанией Netscape. Найти его Вы сможете по адресу: http://home.netscape.com/comprod/products/communicator/user_agent_vacation.html

Язык JavaScript не поддерживает напрямую механизм drag & drop. Это значит, что у нас нет возможности назначить объекту image свойство dragable (перемещаемый) или что-либо в этом роде. Поэтому мы должны сами писать необходимый для этого код. Впрочем, Вы увидите, что это не так сложно.

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

События при работе с мышью в JavaScript 1.2

Какие события, происходящие при работе с мышью, нам следует использовать? У нас нет такого события, как MouseDrag, однако того же самого мы можем достичь, отслеживая события MouseDown, MouseMove и MouseUp. В версии 1.2 языка JavaScript используется новая модель событий. И без нее мы не смогли бы решить нашу задачу. Я уже говорил об этой новой модели на предыдущем уроке. Однако давайте взглянем на некоторые важные ее части еще раз.

Пользователь нажал клавишу мыши в каком-либо месте на окне браузера. Наш скрипт должен зафиксировать это событие и вычислить, с каким объектом (то есть слоем) это было связано. Нам необходимо знать координаты точки, где произошло это событие. В JavaScript 1.2 реализован новый объект Event, который сохраняет координаты этой точки (а также еще и другую информацию о событии).

Другой важной момент заключается в перехвате событий. Если пользователь, например, щелкает по клавише мыши, то сигнал о соответствующем событии посылается непосредственно объекту button. Однако в нашем примере необходимо, чтобы событие обрабатывалось объектом window (окно). Поэтому мы позволяем объекту окна перехватывать сигнал о событии, связанном с мышью, т. е. чтобы именно объект window фиксировал это событие и имел возможность на него реагировать. Это демонстрируется в следующем примере (на примере события Click). Вы можете щелкнуть в любом месте окна браузера. При этом возникнет окно сообщения, где будут показаны координаты точки, где это событие имело место.

Код этого примера:

"Кликните" клавишей мыши где-нибудь в этом окне.

Сперва мы сообщаем, что объект window перехватывает сигнал о событии Click. Для этого мы пользуемся методом captureEvent(). Строка

window.onclick= displayCoords;

говорит о том, что должно происходить, когда случается событие Click. Конкретнее, здесь сообщается, что в качестве реакции на событие Click браузер должен вызвать процедуру displayCoords() (Заметим, что Вам при этом не следует ставить скобки после слова displayCoords). В свою очередь, displayCoords() – это функция, которая определяется следующим образом:

function displayCoords(e) {

alert("x: " + e.pageX + " y: " + e.pageY);

}

Как видите, эта функция имеет аргумент (мы назвали его e). На самом деле это объект Event, который передается на обработку функции displayCoords(). Объект Event имеет свойства pageX и pageY (наряду с другими), из которых моно получить координаты точки, где произошло событие. Окно с сообщением лишь показывает эти значения.

MouseDown, MouseMove и MouseUp

Как я уже говорил, в языке JavaScript нет события MouseDrag. Поэтому мы должны пользоваться событиями MouseDown, MouseMove и MouseUp, реализуя механизм drag & drop. В следующем примере демонстрируется применение MouseMove – текущие координаты курсора мыши отображаются в окне состояния.

Можно видеть, что код скрипта почти такой же, как и в предыдущем примере:

Координаты мыши отображаются в строке состояния.

Заметьте, что Вам необходимо написать именно Event.MOUSEMOVE, где слово MOUSEMOVE обязательно должно быть написано заглавными буквами. А указывая, какая функция должна быть вызвана, когда произойдет событие MouseMove, Вы должны писать ее строчными буквами: window.onmousemove=…

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

Код этого примера выглядит следующим образом:

Нажмите на клавишу мыши и, не отпуская ее, передвиньте саму мышь. Координаты курсора будут отображаться в строке состояния.

Во-первых, мы заставляем объект window перехватывать сигналы о событиях MouseDown and MouseUp:

window.captureEvents(Event.MOUSEDOWN | Event.MOUSEUP);

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

window.onmousedown= startDrag;

window.onmouseup= endDrag;

В следующей строке кода определяется, что происходит, когда объект window получает сигнал о событии MouseMove:

window.onmousemove= moveIt;

Однако постойте, мы же не определили Event.MOUSEMOVE в window.captureEvents()! Это означает, что данное событие не будет перехватываться объектом window. Тогда почему мы указываем объекту window вызывать moveIt(), раз сигнал об этом событии никогда не достигает объекта window? Ответ на этот вопрос можно найти в функции startDrag(), которая вызывается сразу после того, как произойдет событие MouseDown:

function startDrag(e) {

window.captureEvents(Event.MOUSEMOVE);

}

Это означает, что объект window начнет перехватывать событие MouseMove, как только будет нажата клавиша кнопка мыши. И мы должны прекратить перехватывать событие MouseMove, если произойдет событие MouseUp. Это делается в функции endDrag() с помощью метода releaseEvents():

function endDrag(e) {

window.releaseEvents(Event.MOUSEMOVE);

}

Функция moveIt() записывает координаты мыши в окно состояния.

Теперь у нс есть все элементы скрипта, необходимые для регистрации событий, связанных с реализацией механизма drag & drop. И мы можем приступить к рисованию на экране наших объектов.

Показ движущихся объектов

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

Object 0

Object 1

Object 2

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

function init() {

// задать 'перемещаемые' слои

dragObj[0]= document.layers["layer0"];

dragObj[1]= document.layers["layer1"];

dragObj[2]= document.layers["layer2"];

}

Массив dragObj влючает все слои, которые пользователь может перемещать. Каждый такой слой получает в множестве dragObj некий номер. Его мы рассмотрим попозже.

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

window.captureEvents(Event.MOUSEDOWN | Event.MOUSEUP);

window.onmousedown= startDrag;

window.onmouseup= endDrag;

window.onmousemove= moveIt;

К функции startDrag() я добавил следующую сроку:

currentObj= whichObj(e);

Функция whichObj() определяет, по какому объекту был произведен щелчок. Возвращает она номер соответствующего слоя. Если ни один слой не был выделен, то возвращается значение null. Полученное значение хранится в переменной currentObj. Это означает, что из currentObj можно извлечь номер слоя, который в данный момент необходимо перемещать (либо это будет null, если никакого слоя перемещать не надо).

В функции whichObj() для каждого слоя мы проверяем свойства left, top, width и height. По этим значеням мы и можем проверять, по которому из объектов пользователь щелкнул клавишей.