Библиотека knigago >> Литература по изданиям >> Самиздат, сетевая литература >> Введение в JavaScript для Мага


СЛУЧАЙНЫЙ КОММЕНТАРИЙ

# 1021, книга: Короли без короны
автор: Юлия Рудольфовна Белова

"Короли без короны" Юлии Беловой - захватывающий роман в жанре альтернативной истории, переносящий читателей в мир, где некогда могущественные королевские дома были свергнуты и забыты. Действие разворачивается в альтернативной России 21 века. Страна, некогда возглавляемая царями Романовых, теперь является республикой, управляемой олигархами. Однако судьба наносит неожиданный удар, когда потомок последнего царя, Иван, появляется из тени. Иван, выросший вдали от роскоши и власти,...

СЛУЧАЙНАЯ КНИГА

Ливень. Эдуард Юрьевич Шим
- Ливень

Жанр: Детская проза

Год издания: 1631

Серия: Книга за книгой

Стефан Кох - Введение в JavaScript для Мага

Введение в JavaScript для Мага
Книга - Введение в JavaScript для Мага. Стефан Кох - прочитать полностью в библиотеке КнигаГо
Название:
Введение в JavaScript для Мага
 Стефан Кох

Жанр:

 Самиздат, сетевая литература, Литература ХX века (эпоха Социальных революций), Учебники и самоучители по компьютеру, Программирование: прочее, Java, Java Script

Изадано в серии:

неизвестно

Издательство:

неизвестно

Год издания:

ISBN:

http://rummelplatz.uni-mannheim.de/~skoch/

Отзывы:

Комментировать

Рейтинг:

Поделись книгой с друзьями!

Помощь сайту: донат на оплату сервера

Краткое содержание книги "Введение в JavaScript для Мага"

Аннотация к этой книге отсутствует.

Читаем онлайн "Введение в JavaScript для Мага". [Страница - 28]

стр.
реакции на событие 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 — текущие координаты курсора мыши отображаются в окне состояния.

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


<html>

<script language="JavaScript">

<!-

window.captureEvents(Event.MOUSEMOVE);

window.onmousemove= displayCoords;

function displayCoords(e) {

status= "x: " + e.pageX + " y: " + e.pageY;

}

// — >

</script>

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

</html>


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

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

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


<html>

<script language="JavaScript">

<!-window.captureEvents(Event.MOUSEDOWN | Event.MOUSEUP);

window.onmousedown= startDrag;

window.onmouseup= endDrag;

window.onmousemove= moveIt;

function startDrag(e) {

window.captureEvents(Event.MOUSEMOVE);

}

function moveIt(e) {

// показывать координаты

status= "x: " + e.pageX + " y: " + e.pageY;

}

function endDrag(e) {

window.releaseEvents(Event.MOUSEMOVE);

}

// — >

</script>


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

</html>

Во-первых, мы заставляем объект 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. И мы можем приступить к рисованию на экране наших объектов.


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


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


<html>

<head>

<script language="JavaScript">

<!-

var dragObj= new Array();

var dx, dy;

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

window.onmousedown= startDrag;

window.onmouseup= endDrag;

window.onmousemove= moveIt;

function startDrag(e) {

currentObj= whichObj(e);

window.captureEvents(Event.MOUSEMOVE);

}

function moveIt(e) {

if (currentObj!= null) {

--">
стр.

Оставить комментарий:


Ваш e-mail является приватным и не будет опубликован в комментарии.

Книги схожие с «Введение в JavaScript для Мага» по жанру, серии, автору или названию:

Академия Одаренных Магов или Аом для попаданки. Анна Тучина
- Академия Одаренных Магов или Аом для попаданки

Жанр: Любовная фантастика

Серия: Попаданка Дарина. АОМ

Замок мага: Дикие земли. Иван Фаатович (Wisenheim)
- Замок мага: Дикие земли

Жанр: Самиздат, сетевая литература

Год издания: 2018

Серия: Земли Меча и Магии

Воровка для высшего мага. Селена Стенфилд
- Воровка для высшего мага

Жанр: Любовная фантастика

Год издания: 2022

Реванш (СИ). (Ie-rey)
- Реванш (СИ)

Жанр: Самиздат, сетевая литература