Стефан Кох - Введение в JavaScript для Мага
Здесь можно скачать бесплатно "Стефан Кох - Введение в JavaScript для Мага" в формате fb2, epub, txt, doc, pdf. Жанр: Программирование, год 1997. Так же Вы можете читать книгу онлайн без регистрации и SMS на сайте LibFox.Ru (ЛибФокс) или прочесть описание и ознакомиться с отзывами.
Название:
Введение в JavaScript для Мага
Автор:
Издательство:
неизвестно
Жанр:
Год:
1997
ISBN:
нет данных
Скачать:
Скачивание начинается... Если скачивание не началось автоматически, пожалуйста нажмите на эту ссылку.
Вы автор?
Жалоба
Жалоба
Все книги на сайте размещаются его пользователями. Приносим свои глубочайшие извинения, если Ваша книга была опубликована без Вашего на то согласия.
Напишите нам, и мы в срочном порядке примем меры.
Напишите нам, и мы в срочном порядке примем меры.
Как получить книгу?
Оплатили, но не знаете что делать дальше? Инструкция.
Описание книги "Введение в JavaScript для Мага"
Описание и краткое содержание "Введение в JavaScript для Мага" читать бесплатно онлайн.
<body onLoad="setInterval('move(), 20)">
<ilayer name=parentLayer left=100 top=0>
<layer name=layer1 z-index=10 left=0 top=-10>
Это первый слой
</layer>
<layer name=layer2 z-index=20 left=200 top=-10>
Это второй слой
</layer>
<br><br>
Это главный (родительский) слой
</ilayer>
<form>
<input type="button" value="Move/Stop parentLayer" onClick="startStop(0);">
<input type="button" value="Move/Stop layer1" onClick="startStop(1);">
<input type="button" value="Move/Stop layer2" onClick="startStop(2);">
</form>
</body>
</html>
Можно видеть, что внутри 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.
Посмотрим теперь, как можно задать выделяемую область. В следующем примере используется механизм вырезания и перемещение изображения. Чего этим мы хотим достичь — чтобы вырезаемая часть была зафиксирована, т. е. чтобы при перемещении всего изображения не происходила смена видимого на экране фрагмента.
Исходный код скрипта:
<html>
<head>
<script language="JavaScript">
<!- hide
var pos= 0; // начальное положение
var direction= false;
function moveNclip() {
if (pos<-180) direction= true;
if (pos>40) direction= false;
if (direction) pos+= 2
else pos-= 2;document.layers["clippingLayer"].layers["imgLayer"].top= 100 + pos;
}
// — >
</script>
</head>
<body onLoad="setInterval('moveNclip(), 20);">
<ilayer name="clippingLayer" z-index=0 clip="20,100,200,160" top=0 left=0>
<ilayer name="imgLayer" top=0 left=0>
<img name=davinci src="davinci.jpg" width=209 height=264>
</ilayer>
</ilayer>
</body>
</html>
И снова, можно видеть пример обращения к вложенному слою:
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. С помощью этого события Вы можете определить, был бы размер окна изменен читателем. Следующий скрипт демонстрирует, как это делается:
<html>
<head>
<script language="JavaScript">window.onresize= message;
function message() {
alert("Размер окна изменен!");
}
</script>
</head>
<body>
Пожалуйста, измените размер этого окна.
</body>
</html>
В строке window.onresize= message мы задаем процедуру обработки такого события. Точнее, функция message() будет вызываться всякий раз, как только пользователь изменит размер окна. Возможно, Вы не знакомы с таким способом назначения программ, обрабатывающих события. Однако JavaScript 1.2 ничего нового здесь не привносит. Например, если у Вас есть объект button, то Вы можете определить процедуру обработки события следующим образом:
<form name="myForm">
<input type="button" name="myButton" onClick="alert('Click event occured!)">
</form>
Однако Вы можете написать это и по-другому:
<form name="myForm">
<input type="button" name="myButton">
</form>
…
<script language="JavaScript>
document.myForm.myButton.onclick= message;
function message() {
alert('Click event occured!);
}
</script>
Можно подумать, что вторая альтернатива немного сложнее. Однако почему тогда именно ее мы используем в первом скрипте? Причина состоит в том, что объект window нельзя определить через какой-либо определенный тэг — поэтому нам и приходится использовать второй вариант.
Два важных замечания: Во-первых, Вам не следует писать window.onResize — я имею в виду, что Вы должны писать все прописными буквами. Во-вторых, Вы не должны ставить после message никаких скобок. Если Вы напишете window.onresize= message(), то браузер интерпретирует message() как вызов функции. Однако в нашем случае мы не хотим напрямую вызывать эту функцию — мы лишь хотим определить обработчик события.
Объект Event
В язык JavaScript 1.2 добавлен новый объект Event. Он содержит свойства, описывающие некое событие. Каждый раз, когда происходит какое-либо событие, объект Event передается соответствующей программе обработки.
В следующем примере на экран выводится некое изображение. Вы можете щелкнуть где-нибудь над ним клавишей мыши. В результате появится окошко сообщений, где будут показаны координаты той точки, где в этот момент находилась мышь:
Код скрипта:
<layer>
<a href="#" onClick="alert('x: + event.x + y: + event.y); return false;">
<img src="davinci.jpg" width=209 height=264 border=0></a>
</layer>
Как видите, в тэг <a> мы поместили программу обработки событий onClick, как это мы уже делали в предшествующих версиях JavaScript. Новое здесь заключается в том, что для создания окошка с сообщением мы используем event.x и event.y. А это как раз и есть объект Event, который здесь нам нужен, чтобы узнать координаты мыши.
К тому же я поместил все команды в тэг <layer>. Благодаря этому мы получаем в сообщении координаты относительно данного слоя, т. е. в нашем случае относительно самого изображения. В противном же случае мы получили бы координаты относительно окна браузера.
(инструкция return false; используется здесь для того, чтобы браузер обрабатывал далее данную ссылку)
Объект Event получил следующие свойства (их мы рассмотрим в следующих примерах):
Свойство — Описание
data — Массив адресов URL оставленных объектов, когда происходит событие DragDrop.
layerX — Горизонтальное положение курсора (в пикселах) относительно слоя. В комбинации с событием Resize это свойство представляет ширину окна браузера.
layerY — Вертикальное положение курсора (в пикселах) относительно слоя. В комбинации с событием Resize это свойство представляет высоту окна браузера.
modifiers — Строка, задающая ключи модификатора — ALT_MASK, CONTROL_MASK, META_MASK или SHIFT_MASK
На Facebook
В Твиттере
В Instagram
В Одноклассниках
Мы Вконтакте
Подписывайтесь на наши страницы в социальных сетях.
Будьте в курсе последних книжных новинок, комментируйте, обсуждайте. Мы ждём Вас!
Подписывайтесь на наши страницы в социальных сетях.
Будьте в курсе последних книжных новинок, комментируйте, обсуждайте. Мы ждём Вас!
Похожие книги на "Введение в JavaScript для Мага"
Книги похожие на "Введение в JavaScript для Мага" читать онлайн или скачать бесплатно полные версии.
Понравилась книга? Оставьте Ваш комментарий, поделитесь впечатлениями или расскажите друзьям
Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.
Отзывы о "Стефан Кох - Введение в JavaScript для Мага"
Отзывы читателей о книге "Введение в JavaScript для Мага", комментарии и мнения людей о произведении.