Броузеры, не поддерживающие JavaScript

Как выглядит наша страница, если броузер не понимает JavaScript? Броузеры не поддерживающие JavaScript не знают тег <script>. Он игнорирует тег и выводит весь последующий код, как обычный текст. Это означает, что пользователь будет видеть JavaScript-код нашей программы внутри HTML-документа. Конечно, это не наша цель. Есть способ скрытия исходного текста из старых броузеров. Мы воспользуемся HTML-комментарием . Наш новый исходный текст выглядит так:

<html> <body> <br> This is a normal HTML document. <br> <script language="JavaScript"> <!-- hide from old browsers

document.write("This is JavaScript!")

// --> </script> <br> Back in HTML again. </body> </html>

Результат в броузере не поддерживающем JavaScript будет выглядеть следующим образом:

This is a normal HTML document. Back in HTML again.

Без HTML-комментария результатом сценария в броузере не поддерживающем JavaScript будет:

This is a normal HTML document. document.write("This is JavaScript!") Back in HTML again.

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

Функции

Мы используем функции в большинстве наших JavaScript программ. Следовательно я расскажу относительно этого важного понятия сейчас.

В основном функции - путь для связывания нескольких команд вместе. Давайте напишем сценарий, который выводит некоторый текст три раза. Рассмотрите следующий подход:

<html> <script language="JavaScript"> <!-- hide

document.write("Welcome to my homepage!<br>"); document.write("This is JavaScript!<br>");

// --> </script> </html>

Который выводит текст

Welcome to my homepage! This is JavaScript!

три раза. Рассмотрите исходный текст - повторение кода три раза делает нужный результат. Но это очень эффективно? Нет, мы можем решить это лучшим способом. Посмотрите на этот код, который делает тоже самое:

<html> <script language="JavaScript"> <!-- hide

function myFunction() { document.write("Welcome to my homepage!<br>"); document.write("This is JavaScript!<br>"); }

myFunction(); myFunction(); myFunction();

// --> </script> </html>

В этом сценарии мы определяем функцию. Это выполняется в следующих строках:

function myFunction() { document.write("Welcome to my homepage!<br>"); document.write("This is JavaScript!<br>"); }

Команды внутри {} принадлежат функции myFunction(). Это означает, что две наши команды document.write() связаны вместе и могут быть выполнены через обращение к функции. В нашем примере мы имеем три обращения к функции. Вы видите, что мы пишем myFunction()

три раза, прямо ниже определения функции. Это три обращения к функции. Это означает, что содержание функции выполняется три раза.

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

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

<html> <head>

<script language="JavaScript">  </script>

</head> <body>

<form> <input type="button" value="Calculate" onClick="calculation()"> </form>

</body> </html>

Здесь вы можете проверить работу примера:

Кнопка вызывает функцию calculation(). Вы видите, что функция делает некоторые вычисления. Для этого мы используем переменные x, y и result. Мы можем определять переменную ключевым словом var. Переменные могут использоваться, чтобы хранить различные значения - например числа, текстовые строки и т.д. Строка var result= x + y; сообщает, чтобы броузер создал переменную result и сохранил в ней результат x + y (т.е. 5 + 12). После этой операции переменная result is 17. Командаalert(result)

является в этом случае аналогом alert(17). Это означает, что мы получаем всплывающее окно с номером 17 в нём. .

[Содержание] [следующее]

©1996,1997 by Stefan Koch

e-mail:skoch@rumms.uni-mannheim.de

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

My JavaScript-book

JavaScript это не Java!

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

Для дальнейшей информации относительно этой темы пожалуйста, прочитайте введение, предоставленное Netscape

или моей книгой :-)

и обработчики события очень важны

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

Мы хотим, чтобы наша JavaScript программа реагировала на некоторые события. Это может быть сделано с помощью обработчиков события. Кнопка могла бы создавать всплывающее окно когда она нажимается. Это означает, что окно должно появиться как реакция на Click-событие. Обработчик события, который мы должны использовать, называется onClick. Он сообщает компьютеру, что делать, если это событие происходит. Следующий код показывает простой пример обработчика события onClick:
<form> <input type="button" value="Click me" onClick="alert('Yo')"> </form>

В этом коде есть несколько новых вещей - так давайте рассмотрим их шаг за шагом. Вы видите, что мы создаем форму с кнопкой (это в основном проблема HTML, так что я не буду рассматривать это здесь). Новая часть - onClick="alert('Yo')" внутри тега <input> . внутри тега . Как мы уже сказали, это определяет то, что происходит, когда нажимается кнопка. Значит, если Click-событие происходит, компьютер должен выполнить alert('Yo'). Это - JavaScript-код (Пожалуйста обратите внимание, что мы не используем тег <script> в этом случае).

alert() позволяет Вам создавать всплывающие окна. Внутри скобок Вы должны определить строку. В нашем случае это 'Yo'. Это текст, который должен показываться во всплывающем окне. Так что, наш сценарий создает окно с содержанием 'Yo'
когда пользователь нажимает на кнопку.

Одна вещь могла бы внести путаницу: В команде document.write ()мы использовали двойные кавычки ", а в комбинации с alert() мы используем только одиночные кавычки ' - почему? В основном Вы можете использовать оба способа. Но в последнем примере мы записали onClick="alert('Yo')" - Вы видите, что мы использовали, и двойные и одиночные кавычки. Если мы записали onClick="alert("Yo")", компьютер запутается, поскольку не ясно, которая часть принадлежит обработчику события onClick, а которая нет. Так что в этом случае, Вы должны чередовать кавычки. Это не имеет значение, в котором порядке Вы используете кавычки - сначала двойные кавычки и затем одиночные кавычки или наоборот. Это означает, что Вы можете также написать onClick='alert("Yo")'.
Есть много различных обработчиков события, которые Вы можете использовать. Мы узнаем некоторые из этого учебника - но не все. Так пожалуйста обратитесь к справочнику, если Вы хотите знать какой тип других обработчиков события существует.
Если Вы используете Netscape Navigator , всплывающее окно будет содержать текст JavaScript alert. Это - защитное ограничение. Вы можете создавать подобное всплывающее окно с помощью метода prompt(). Это окно допускает ввод. Злонамеренный сценарий мог бы подражать сообщениям системы и запросить о некотором пароле. Текст во всплывающем окне показывает, что окно исходит из вашего броузера, а не из вашей операционной системы. Поскольку это защитное ограничение, Вы не можете удалить этот текст.

Вложение JavaScript в HTML-страницу

Код JavaScript встроен непосредственно в HTML-страницу. Чтобы понять, как это работает, мы рассмотрим простой пример:

<html> <body> <br> This is a normal HTML document. <br> <script language="JavaScript"> document.write("This is JavaScript!") </script> <br> Back in HTML again. </body> </html>

На первый взгляд это напоминает нормальный HTML-файл. Единственная новая вещь, эта часть:

Это JavaScript. Чтобы увидеть работу данного сценария, сохраните этот код как нормальный HTML-файл и загрузите его в ваш JavaScript-броузер. Ниже представлен результат, выданный файлом (если Вы используете JavaScript-броузер, Вы увидите 3 строчки):

This is a normal HTML document.

Back in HTML again.

Я должен признать, что этот сценарий не очень полезен - это можно было написано на чистом HTML намного легче. Я только хотел показать Вам тег <script>. Все между <script> и тегом </script> - распознаётся как код JavaScript. Здесь Вы видите использование document.write() - одной из наиболее важных команд в программировании на JavaScript. document.write()

используется, чтобы вывести что-либо в текущий документ (в этом случае, это является HTML- документ). Так что наша небольшая программа JavaScript пишет текст This is JavaScript! в HTML-документ.

Запуск JavaScript

Что необходимо, чтобы выполнить сценарии, написанные на JavaScript? Вам необходим броузер поддерживающий JavaScript - например Netscape Navigator (версия 2.0 или выше) или Microsoft Internet Explorer (MSIE - начиная с версии 3.0). Так как эти два броузера широко распространены, большинство людей способно выполнить сценарии, написанные на JavaScript. Это конечно важный момент при выборе JavaScript, для улучшения ваших web-страниц. Естественно, Вам необходимо основные знания HTML перед чтением этого учебника. Вы можете найти многих действительно хороших интерактивных ресурсов, перекрывающих HTML. Лучше всего Вам сделать интерактивный поиск 'html' в Yahoo, чтобы получить большее количество информации относительно HTML.

Фреймы и JavaScript

Теперь нам необходимо рассмотреть, как JavaScript "видит" фреймы в окне броузера. Для этого мы создадим два фрейма, как показано в первом примере этой части.

Мы видели, что JavaScript организовывает все элементы на интернет-странице в иерархии. То же самое с фреймами. Следующий рисунок показывает иерархию первого примера этой части:

Сверху иерархии - окно броузера. Это окно дробится на два фрейма. Окно - родитель в этой иерархии, а два фрейма - потомки. Мы дали двум фреймам уникальные имена frame1 and frame2. С помощью этих имен мы можем обмениваться информацией между двумя фреймами.

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

Мы должны рассмотреть три случая:

Родительское окно/фрейм обращается к порожденному фрейму.

Порожденный фрейм обращается к родительскому окну/фрейму.

Порожденный фрейм обращается к другому порожденному фрейму.

С точки зрения окна два фрейма назваются frame1

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

frame2.document.write("A message from the parent window.");

Иногда Вам необходимо обратиться к родительскому окну из фрейма. Например, это необходимо, если Вы хотите удалить фреймы. Удаление фреймов означает только загрузку новой страницы вместо страницы, которая создала фреймы. В нашем случае это страница в родительском окне. Мы можем обращаться к родительскому окну (или родительскому фрейму) из порожденных фреймов с помощью parent. Чтобы загрузить новый документ, мы должны назначить новый URL в location.href. Поскольку мы хотим удалить фреймы, мы должны использовать location-объект родительского окна. Поскольку каждый фрейм может загружать собственную страницу, мы имеем различный location-объект для каждого фрейма. Мы можем загрузить новую страницу в родительское окно командой:

parent.location.href= "http://...";

Очень часто перед Вами будут стоять проблемы, обратиться к однму порожденному фрейму из другого порожденного фрейма. Итак, как Вам записать кое-что из первого фрейма во второй фрейм - это означает, какую команду Вы должны использовать в HTML-странице, с именем page1.htm? На нашем рисунке Вы можете видеть, что не имеется никакого прямого соединения между двумя фреймами. Это означает, что мы не можем просто вызывать frame2 из фрейма frame1, поскольку этот фрейм не знает ничего относительно существования второго фрейма. С точки зрения родительского окна второй фрейм называется frame2, а родительское окно называется parent, и видно из первого фрейма. Так что мы должны написать следующее, чтобы обратиться к document-объекту втором фрейме:

parent.frame2.document.write("Hi, this is frame1 calling.");

Панель навигации

Давайте посмотрим на панель навигации. У нас есть несколько ссылок в одном фрейме. Если пользователь нажимает на эти ссылки, страницы не будут появляться в том же самом фрейме - они будут загружены во второй фрейм.

Посмотрите пример:

Сначала нам неоходим сценарий, который создаст фреймы. Этот текст напоминает первый пример, который был в этой части:

frames3.htm

Страница start.htm - начальная страница, которая будет отображаться во фрейме main сначала. Не существует никаких специальных требований для этой страницы.

Следующая страница загружена во фрейм menu:

menu.htm

<html> <head> <script language="JavaScript"> <!-- hide

function load(url) { parent.main.location.href= url; }

// --> </script> </head> <body>

<a href="javascript:load('first.htm')">first</a> <a href="second.htm" target="main">second</a> <a href="third.htm" target="_top">third</a>

</body> </html>

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

<a href="javascript:load('first.htm')">first</a>

Вы видите, что мы позволяем броузеру выполнять код JavaScript, вместо того, чтобы загрузить другую страницу - мы должны использовать javascript: в свойстве href. Вы видите, что мы пишем 'first.htm'

внутри скобок. Эта строка передается в функцию load(). Функция load() определена через:

function load(url) { parent.main.location.href= url; }

Здесь можете видеть, что мы пишем url внутри скобок. Это означает, что строка 'first1.htm' хранится в переменной url. Теперь внутри load() мы можем использовать эту переменную. В дальнейшем мы рассмотрим последующие примеры этого важного понятия передачи переменной.

Вторая ссылка использует свойство target. Фактически это не JavaScript. Это - HTML-свойство. Вы видите, что мы должны только определить имя фрейма. Пожалуйста обратите внимание, что мы не помещаем parent перед именем фрейма. Это может немного спутать. Причина этого то, что target это HTML, а не JavaScript.

Третья ссылка показывает Вам, как удалить фреймы с помощью свойства target.

Если Вы хотите удалить фреймы функцией load()(), Вам просто надо написать parent.location.href= url

внутри функции.

Итак, который путь Вы должны выбрать? Это зависит от вашего сценария и что Вы хотите сделать. Свойство target очень просто. Вы могли бы использовать его, если Вы хотите только загрузить страницу в другой фрейм. Решение на JavaScript (то есть первая ссылка) обычно используется, если Вы хотите сделать несколько вещей как реакцию на щелчок на ссылке. Одна общая проблема состоит в том, чтобы загрузить две страницы сразу в двух различных фреймах. Хотя Вы могли бы решить её свойством target используя напрямую функцию JavaScript. Давайте условимся, что Вы имеете три фрейма, названные frame1,frame2 и frame3. Пользователь нажимает на ссылку в frame1. Затем Вы хотите загрузить две различных страницы в два других фрейма. Например, Вы можете использовать эту функцию:

function loadtwo() { parent.frame1.location.href= "first.htm"; parent.frame2.location.href= "second.htm"; }

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

function loadtwo(url1, url2) { parent.frame1.location.href= url1; parent.frame2.location.href= url2; }

Затем, Вы можете вызывать эту функцию с помощью loadtwo("first.htm", "second.htm") или loadtwo("third.htm", "forth.htm"). Передачу переменную делает вашу функцию более гибкой. Вы можете использовать её много раз в различных контекстах.

[предыдущая] [содержание] [следущая]

©1996,1997 by Stefan Koch

e-mail:skoch@rumms.uni-mannheim.de

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

My JavaScript-book

Создание оперативных документов

Сейчас Мы дошли до замечательного свойства JavaScript - создание оперативных документов. Это означает, что Вы можете позволить вашему JavaScript коду создать новую HTML-страницу. Кроме того Вы можете создавать другие документы - подобно VRML-сценам и т.д. Вы можете выводить эти документы в отдельном окне или во фрейме.

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

<html> <head> <script language="JavaScript"> <!-- hide

function openWin3() { myWin= open("", "displayWindow", "width=500,height=400,status=yes,toolbar=yes,menubar=yes");

// open document for further output myWin.document.open();

// create document myWin.document.write("<html><head><title>On-the-fly"); myWin.document.write("</title></head><body>"); myWin.document.write("<center><font size=+3>"); myWin.document.write("This HTML-document has been created "); myWin.document.write("with the help of JavaScript!"); myWin.document.write("</font></center>"); myWin.document.write("</body></html>");

// close the document - (not the window!) myWin.document.close(); }

// --> </script> </head> <body>

</body> </html>

Давайте посмотрим на функцию winOpen3(). Вы можете видеть, что мы открываем новое окно броузера сначала. Как Вы видете, что первый параметр - пустая строка " " - это значит, что мы не определяем URL. Окно просмотра не просто должно выбрать существующий документ - JavaScript создаст новый документ.

Мы определяем переменную myWin. С помощью этой переменной мы можем обращаться к новому окну. Пожалуйста обратите внимание, что мы не можем использовать имя окна (displayWindow) для этой задачи.

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

// open document for further output myWin.document.open();

Мы вызываем метод open() document-объекта - отличающийся метод от open() window-объекта! Эта команда не открывает новое окно - она готовит документ для дальнейшего вывода.

Мы должны поместить myWin перед document.open()

чтобы обратиться к новому окну.

Следующие строки создают документ с помощью document.write():

// create document myWin.document.write("<html><head><title>On-the-fly"); myWin.document.write("</title></head><body>"); myWin.document.write("<center><font size=+3>"); myWin.document.write("This HTML-document has been created "); myWin.document.write("with the help of JavaScript!"); myWin.document.write("</font></center>"); myWin.document.write("</body></html>");

Вы видите, что мы пишем обычные HTML-теги в документ. Мы создаем HTML-код! Вы можете писать здесь любые HTML-теги.

После вывода, мы снова должны закрыть документ. Следующий код делает это:

// close the document - (not the window!) myWin.document.close();

Как я уже говорил Вам ранее, Вы можете создавать оперативные документы и также отображать их во фрейме. Например, если Вы имеете два фрейма с именами frame1 и frame2, и хотите создать новый документ во frame2, который Вы можете написать следующее во frame1:

parent.frame2.document.open();

parent.frame2.document.write("Here goes your HTML-code");

parent.frame2.document.close();

Создание оперативных VRML-сцен

Чтобы показать гибкость JavaScript, мы теперь собираемся создать оперативную VRML-сцену. VRML расшифровывается как Vitual Reality Modelling Language. Это - язык для создания 3-мерных сцен. Итак, возьмите ваши стерео очки, и наслаждайтесь зрелищем... Нет, это просто пример - синий куб.

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

Ниже представлен исходный код:

<html> <head> <script language="JavaScript"> <!-- hide

function vrmlScene() { vrml= open("", "displayWindow", "width=500,height=400,status=yes,toolbar=yes,menubar=yes");

// open document for further output vrml.document.open("x-world/x-vrml");

vr= vrml.document;

// create VRML-scene vr.writeln("#VRML V1.0 ascii");

// Light vr.write("Separator { DirectionalLight { "); vr.write("direction 3 -1 -2.5 } ");

// Camera vr.write("PerspectiveCamera { position -8.6 2.1 5.6 "); vr.write("orientation -0.1352 -0.9831 -0.1233 1.1417 "); vr.write("focalDistance 10.84 } ");

// Cube vr.write("Separator { Material { diffuseColor 0 0 1 } "); vr.write("Transform { translation -2.4 .2 1 rotation 0 0.5 1 .9 } "); vr.write("Cube {} } }");

// close the document - (not the window!) vrml.document.close(); }

// --> </script> </head> <body>

</body> </html>

Этот исходный текст совершенно аналогичен последнему примеру. Сначала мы открываем новое окно. Затем мы должны открыть документ, чтобы подготовить его к выводу. Рассмотрите этот код:

// open document for further output vrml.document.open("x-world/x-vrml");

В последнем примере мы ничего не писали в скобках. Что означает "x-world/x-vrml"? Это MIME-тип файла, который мы хотим создать. Итак, здесь мы сообщаем броузеру, какие данные последуют. Если мы ничего не пишем в скобках, MIME-тип установлен в "text/html" по умолчанию (это MIME-тип HTML-файлов).

( Имеются различные способы, чтобы узнать определённый MIME-тип - броузер имеет у себя список известных MIME-типов. Вы можете найти этот список в меню preferences или option.)

Мы должны написать vrml.document.write() для создания 3-мерной сцены. Это очень длинно, следовательно мы определяем vr= vrml.document. Теперь мы можем писать vr.write()

вместо of vrml.document.write().

Теперь мы можем вывести обычный VRML-код. Я не собираюсь описывать элементы VRML-сцены. Имеются несколько хороших VRML источников, вышедшие в Internet. Простой VRML-код выглядит так:

#VRML V1.0 ascii

Separator {

DirectionalLight { direction 3 -1 -2.5 }

PerspectiveCamera { position -8.6 2.1 5.6 orientation -0.1352 -0.9831 -0.1233 1.1417 focalDistance 10.84 }

Separator { Material { diffuseColor 0 0 1 } Transform { translation -2.4 .2 1 rotation 0 0.5 1 .9 } Cube {} } }

Это код, который мы выводим через команду document.write().

Конечно совершенно бессмысленно создать оперативную сцену, которая также может быть загружен как нормальный VRML-файл (cube.wrl). Это становится более интересным, если Вы например делаете форму, где пользователь может вводить различные объекты - типа сфера, цилиндр, конус и т.д. - и JavaScript создает сцену из этих данных (я имею ввиду пример в моей JS-книге).

[предыдущая] [содержание] [следующая]

©1996,1997 by Stefan Koch

e-mail:skoch@rumms.uni-mannheim.de

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

My JavaScript-book

Закрытие окон

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

<html> <script language="JavaScript"> <!-- hide

function closeIt() { close(); }

// --> </script>

</html>

Если Вы нажмёте кнопку в новом окне, окно закроется.

open() и close() - методы window-объекта. Обычно мы думаем, что мы должны написать window.open() и window.close()

вместо open() и close(). вместо open() и close(). Это правда - но window-объект - исключительная ситуация. Вы не должны писать window, если Вы хотите вызывать метод window-объекта (это - справедливо только для данного объекта).

Прокрутчик

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

Прокрутчик очень просто выполняется. Давайте подумаем, над тем, как мы могли реализовать перемещающийся текст в строке состояния. Мы должны записать текст в стоку состояния. После короткого промежутка времени мы должны писать тот же самый текст в стоку состояния - но мы должны переместить его немного влево. Если мы повторим это несколько раз, пользователь получит впечатление бегущей стоки.

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

Эта кнопка открывает новое окно и отображать прокрутчик:

Вот исходный текст - я добавил некоторые комментарии:

<html> <head> <script language="JavaScript"> <!-- hide

// define the text of the scroller var scrtxt = "This is JavaScript! " + "This is JavaScript! " + "This is JavaScript!"; var length = scrtxt.length; var width = 100; var pos = -(width + 2);

function scroll() {

// display the text at the right position and set a timeout

// move the position one step further pos++;

// calculate the text which shall be displayed var scroller = ""; if (pos == length) { pos = -(width + 2); }

// if the text hasn't reached the left side yet we have to // add some spaces - otherwise we have to cut of the first // part of the text (which moved already across the left border if (pos < 0) { for (var i = 1; i <= Math.abs(pos); i++) { scroller = scroller + " ";} scroller = scroller + scrtxt.substring(0, width - i + 1); } else { scroller = scroller + scrtxt.substring(pos, width + pos); }

// assign the text to the statusbar window.status = scroller;

// call this function again after 100 milliseconds setTimeout("scroll()", 100); }

// --> </script> </head>

<body onLoad="scroll()"> Your HTML-page goes here. </body> </html>

Основная часть функции scroll() необходима для вычисления, какая часть текста отображается. Я не объясняю код подробно - Вы только должны понять, как этот прокрутчик работает вообще.

Чтобы запустить прокрутчик, мы используем обработчик события onLoad тега <body>. Это означает, что функция scroll() будет вызываться сразу после загрузки HTML-страницы.

Мы вызываем функцию scroll() с помощью свойства onLoad. Первый шаг прокрутчика - вычисление и отображение. В конце функции scroll() мы устанавливаем время ожидания (таймаут). Это заставляет функцию scroll() выполняться снова после 100 миллисекунд. Текст перемещается на один шаг вперед и устанавливается другое время ожидания. Это продолжается бесконечно.

(Имелись некоторые проблемы с этим видом прокрутчика в Netscape Navigator 2.x. . Это иногда вызывало ошибку 'Out of memory'. Я получил много писем, объясняющие это как рекурсивное обращение к функции scroll() - в заключение ведущие к переполнению памяти. Но это не правда. Это не рекурсивное обращение к функции! Мы получаем рекурсию, если мы вызываем функцию scroll()непосредственно из функции scroll(). Но это не то, что мы делаем здесь. Старая функция, которая устанавливает время ожидания, заканчивается прежде, чем новая функция выполняется. Проблема состояла в том, что строки действительно не могли быть изменены в JavaScript. Если Вы пробовали делать это, JavaScript просто создал новый объект - без того, чтобы удалить старый. Это и заполняло память.)

Прокрутчики широко используются в Internet. Есть риск, что они быстро станут непопулярными. Я должен признать, что мне они не слишком нравятся. Особенно раздражает на большинстве страниц то, что URL больше не может отображаться при перемещении указателя поверх ссылки. Это может решиться через остановку прокрутчика, когда событие MouseOver происходит - Вы можете запустить его снова с onMouseOut. Если Вам нужен прокрутчик, постарайтесь не использовать стандартый прокрутчик - попробуйте добавлять какой-нибудь изящный эффект. Например, одна часть текста перемещается слева а другая часть исходит справа - когда они встречаются в середине, текст останавливается на несколько секунд. С некоторой долей фантазии Вы можете найти хорошие варианты (некоторые примеры есть в моей книге).

[предыдущая] [содержание] [следущая]

©1996,1997 by Stefan Koch

e-mail:skoch@rumms.uni-mannheim.de

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

My JavaScript-book

Таймауты

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

Сценарий выглядит примерно так:

function timer() { setTimeout("alert('Time is up!')", 3000); }

// --> </script>

...

setTimeout()

является методом window-объекта. Он устанавливает время ожидания - я думаю, что Вы так и предположили. Первый параметр - код JavaScript, который должен быть выполнен после некоторого времени. В нашем случае этот параметр - "alert('Time is up!')". Пожалуйста обратите внимание, что код JavaScript должен быть внутри кавычек.

Второй параметр сообщает компьютер, когда код должен быть выполнен. Вы должны определить время в миллисекундах (3000 миллисекунд = 3 секунды).

Math-объект

Если Вы должны производить математические вычисления, Вы найдете некоторые методы в Math-объекте, который далее мог бы Вам помочь. Имеется например метода синуса sin(). Вы найдете полную справку в документации Netscape.

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

Если Вы вызовете Math.random() Вы получите произвольное число между 0 и 1. Ниже представлен результат работы document.write(Math.random()) (число изменится при перезагрузке страницы):

[предыдущая] [содержание] [следующая]

e-mail:skoch@rumms.uni-mannheim.de

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

My JavaScript-book

Концентрация на некотором элементе формы

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

function setfocus() { document.first.text1.focus(); }

Этот сценарий концентрирует внимание на первом текстовом элементе в сценарии, который я показал выше. Вы должны определить имя полной формы - которая названа здесь firstи имя одиночного элемента формы - здесь text1. Если Вы хотите сконцентрировать внимание на этом элементе, когда страница загружается, Вы можете добавлять onLoad-свойство в ваш тег <body>. Это выгладит так:

Мы можем улучшить ето с помощью следующего кода:

function setfocus() { document.first.text1.focus(); document.first.text1.select(); }

Просто попробуйте этот код:

Вы видите, что текстовый элемент активен, и выделен введенный текст.

[предыдущая] [содержание] [следующая]

e-mail:skoch@rumms.uni-mannheim.de

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

My JavaScript-book

Отсылка формы ввода

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

Если Вы хотите, чтобы форма ввода была обработана сервером, Вы должны использовать CGI (Common Gateway Interface). Это позволит Вам обрабатывать формы ввода автоматически. Сервер мог бы например создавать базу данных из ввода, полученного от некоторых заказчиков. Другой пример - поисковая страница типа Yahoo. Они обычно имеют форму для выполнения поиска в их базе данных. Пользователь получает ответ сразу после того, как нажималась кнопка отправить. Он не должен ждать, пока люди, поддерживающие эту станцию прочитают ввод и затем найдут запрошенную информацию. Это выполняется сервером автоматически. JavaScript не может делать вещи типа этого.

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

Этот сценарий ниже - простой HTML. Так что никакой необходимости в JavaScript здесь нет! Только, конечно, если Вы хотите проверять, ввод перед отсылкой формы, Вам будет необходим JavaScript. Я должен добавить, что mailto-команда не работает везде - например Microsoft Internet Explorer 3.0 не поддерживает её.

<form method=post action="mailto:your.address@goes.here" enctype="text/plain"> Do you like this page? <input name="choice" type="radio" value="1">Not at all.<br> <input name="choice" type="radio" value="2" CHECKED>Waste of time.<br> <input name="choice" type="radio" value="3">Worst site of the Net.<br> <input name="submit" type="submit" value="Send"> </form>

Свойство enctype="text/plain" используется, чтобы послать простой текст без закодированных частей. Это делает намного проще читение почты.

Если Вы хотите проверить форму прежде, чем она будет послана через сеть, Вы можете использовать обработчик события onSubmit. Вы должны поместить этот обработчик события в тег <form>. Это выглядит так:

function validate() { // check if input ok // ...

if (inputOK) return true else return false; }

...

...

С этим кодом форма не была бы послана через Internet, если ввод формы был неправилен.

Проверка на некоторые символы

Иногда Вы хотите ограничивать форму ввода некоторыми символами или числами. Подумайте о номере телефона - ввод должен содержать только цифры (мы предполагаем, что номер телефона не содержит никакие символы). Мы могли бы проверить, является ли ввод числом. Но большинство людей использует различные символы в их номере телефона - например: 01234-56789, 01234/56789 или 01234 56789 (с пробелом между ними). Пользователь не должен быть вынужденным ввести номер телефона без этих символов. Так что мы должны расширить наш сценарий, чтобы проверить цифры и некоторые символы. Это показывается в следующем примере, который взят из моей книги JavaScript:

Telephone:

Here is the source code:

<html> <head> <script language="JavaScript"> <!-- hide

// ****************************************************** // Script from Stefan Koch - Voodoo's Intro to JavaScript // http://rummelplatz.uni-mannheim.de/~skoch/js/ // JS-book: http://www.dpunkt.de/javascript // You can use this code if you leave this message // ******************************************************

function check(input) { var ok = true;

for (var i = 0; i < input.length; i++) { var chr = input.charAt(i); var found = false; for (var j = 1; j < check.length; j++) { if (chr == check[j]) found = true; } if (!found) ok = false; }

return ok; }

function test(input) {

if (!check(input, "1", "2", "3", "4", "5", "6", "7", "8", "9", "0", "/", "-", " ")) {

alert("Input not ok."); } else { alert("Input ok!"); } }

// --> </script> </head>

<body> <form> Telephone: <input type="text" name="telephone" value=""> <input type="button" value="Check" onClick="test(this.form.telephone.value)"> </form> </body> </html>

Функция test() определяет, какие символы имеют силу.

Изменение изображений по событиям, инициированных пользователем

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

Исходный текст для этого примера выглядит следующим образом:

Однако этот код вызывает некоторые проблемы:

Пользователь может использовать броузер ниже JavaScript 1.1.

Второе изображение предварительно не загружено.

Мы должны перезаписать код для каждого изображения на web-странице.

Нам нужен сценарий, который может использоваться во многих web-страницах много раз без существенных изменений.

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

Имеются два требования для сохранения гибкости этого сценария:

Неопределенное число изображений - не имеет значение, используется 10 или 100 изображений

Неопределенный порядок изображений - это необходимо для того, чтобы изменить порядок изображений не изменяя код

Здесь Вы можете видеть, как работает код:

Взгляните на код (я добавил некоторые комментарии):

// ok, we have a JavaScript browser var browserOK = false; var pics;

// --> </script>

<script language="JavaScript1.1">  </script>

<script language="JavaScript">  </script> <head>

<body> <a href="link1.htm" onMouseOver="on('link1')" onMouseOut="off()"> <img name="link1" src="link1f.gif" width="140" height="50" border="0"></a>

<a href="link2.htm" onMouseOver="on('link2')" onMouseOut="off()"> <img name="link2" src="link2f.gif" width="140" height="50" border="0"></a>

<a href="link3.htm" onMouseOver="on('link3')" onMouseOut="off()"> <img name="link3" src="link3f.gif" width="140" height="50" border="0"></a> </body> </html>

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

preload("link1", "img1f.gif", "img1t.gif");

Это означает, что сценарий должен загрузить два изображения img1f.gif и img1t.gif. Первое изображение должно отображаться, когда курсор вне области изображения. Когда пользователь перемещает курсор по области изображения, показывается второе изображение. С первым параметром "img1" при вызове функции preload() мы определяем, какой Image-объект на web-странице принадлежит двум предварительно загруженным изображениям. Если Вы посмотрите на часть <body> нашего примера, Вы найдете изображение с именем img1. Мы используем имя изображения (а не номер) для того, чтобы можно было изменить порядок изображений без изменения сценария.

Две функции on() и off() вызваны через обработчики события onMouseOver и onMouseOut. Поскольку изображения не могут реагировать на события MouseOver и MouseOut, мы должны поместить ссылку в изображения.

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

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

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

[предыдущая] [содержание] [следующая]

©1996,1997 by Stefan Koch

e-mail:skoch@rumms.uni-mannheim.de

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

My JavaScript-book

Предварительная загрузка изображений

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

присвоения нового адреса свойству src. Поскольку изображение - предварительно не загружено, требуется некоторое время, пока новое изображение не восстановится через Internet. В некоторых ситуациях это нормально, но зачастую задержки, вызванные этим процессом - не приемлемы. Так что мы можем сделать относительно этого? Да, предварительная загрузка изображения является решением. Для этой цели мы должны создать новый Image-объект. Рассмотрите эти строки кода:

hiddenImg= new Image(); hiddenImg.src= "img3.gif";

Первая строка создает новый Image-объект. Вторая строка определяет адрес изображения, которое должно представляться через объект hiddenImg. Мы уже видели, что присвоение нового адреса свойству src вынуждает броузер загружать изображение с указанным адресом. Так что изображение img2.gif загружается, когда выполняется вторая строка этого кода. Итак, имя hiddenImg

подразумевает, что изображение не отображается после того, как броузер закончил загружать его. Оно только сохраняется в памяти (или лучше в кэше), для того, чтобы воспользоваться им позднее. Чтобы отобразить его, мы можем теперь использовать эту строку:

document.myImage.src= hiddenImg.src;

Теперь изображение берётся из кэша и сразу отображается. Таким образом Мы управляем предварительной загрузкой изображения.

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

Если Вы имеете быстрое Internet подключение, Вы могли бы задаться вопросом, о чем весь этот разговор. Относительно какой задержки этот парень говорит все время? Но все еще попадаются люди, сидящие за 14.4 модемом (Нет, не я. Я улучшил свои возможности только до 28.8 - о да...).

Загрузка новых изображений

Хотя полезно знать, как получить размер изображения на web-странице, но не это является целью нашего урока. Мы хотим изменять изображения на web-странице. Для этой цели мы нуждаемся в src свойстве. Итак в теге <img> свойство src, представляет адрес отображаемого изображения. Теперь, с помощью JavaScript 1.1 Вы можете присваивать новые адреса уже загруженному изображению на web-странице. Результатом является то, что загружается изображение, размещенное по новому адресу. Это новое изображение заменяет старое изображение на web-странице. Рассмотрите этот пример:

Изображение img1.gif загружается и получает имя myImage. Следующая строка кода заменяет старое изображение img1.gif на новое изображение img2.gif:

document.myImage.src= "img2.src";

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

Перемещение слоёв

Свойства left and top определяют позицию слоя. Вы можете присвоить новые значения к этим свойствам, чтобы установить позицию слоя. Следующая строка устанавливает горизонтальную позицию уровня в 200 (в пикселях):

document.layers["myLayer2"].left= 200;

Теперь мы переходим к программе перемещающей слой - это напоминает прокрутчик внутри окна броузера.

This text is inside a layer

Сценарий выглядит следующим образом:

<html> <head> <script language="JavaScript"> <!-- hide

function move() { if (pos < 0) direction= true; if (pos > 200) direction= false;

if (direction) pos++ else pos--;

document.layers["myLayer2"].left= pos; }

// --> </script> </head> <body onLoad="setInterval('move()', 20)">

<ilayer name=myLayer2 left=0> <font size=+1 color="#0000ff"><i>This text is inside a layer</i></font> </ilayer>

</body> </html>

Мы создаем слой, с именем myLayer2. Вы можете видеть, что мы используем onLoad внутри тега <body>. Нам надо запустить прокрутку слоя, как только загрузится страница. Мы используем setInterval()

внутри onLoadобработчика события. Это - новый метод JavaScript 1.2 (то есть JavaScript версия, которая выполнена в Netscape Navigator 4.0). Он может использоваться, чтобы вызвать функцию много раз в течении некоторого временного интервала. Для этого на последних уроках мы использовали setTimeout()

for this in the last lessons. setInterval() работает почти так же, но Вам нужно вызвать ее только один раз.

Через setInterval() мы вызываем функцию move()

каждые 20 миллисекунд. Функция move()

устанавливает слой на некоторую позицию. Поскольку мы вызываем эту функцию, много раз мы получаем быструю прокрутку текста. Все, что мы должны делать в функции move() это вычислить позицию слоя и присвоить это значение document.layers["myLayer2"].left= pos.

Если Вы изучите исходный текст этой части учебника, Вы найдёте, что мой код выглядит немного по другому. Я написал код так, чтобы люди с более ранними версиями JavaScript-броузеров не получили никаких ошибок. Как это может быть достигнуто? Следующий код будет выполнен только броузерами, которые понимают JavaScript 1.2:

Это - та же самая проблема, которая была у нас с Image-объектом. Мы можем переписать код подобным образом. Установка переменной browserOK решает проблему.

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

This text is inside a layer

[предыдущая] [содержание] [следующая]

e-mail:skoch@rumms.uni-mannheim.de

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

My JavaScript-book

Слои и JavaScript

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

Сначала мы должны узнать, как слои представляются в JavaScript. Как обычно существует несколько путей. Лучше всего присвоить имя каждому слою. Если мы определяем уровень с

мы можем обратиться к этому уровню через document.layers["myLayer"]. Согласно документации, предоставленной Netscape мы можем также писать document.myLayer, но это приводит к сбою моего броузера. Несомненно, это проблема preview-версии броузера и будет решена в финальной версии (в настоящее время я использую Netscape Navigator 4.0 PR3 в WinNT). Кажется, нет никаких проблем с document.layers["myLayer"]

- так что мы собираемся использовать этот вариант.

Вы также можете обращаться к слоям через целочисленный индекс. Чтобы обращаться к самому нижнему слою, Вы можете писать document.layers[0]. Пожалуйста обратите внимание, что индекс не тоже самое, что и свойство z- index. Если Вы имеете например два слоя, названные layer1 и layer2 у которых z-индексом являются числа 17 и 100, Вы можете обращаться к этим уровням через document.layers[0] и document.layers[1], а не через document.layers[17] и document.layers[100].

Существует несколько свойств слоя, которые могут быть изменены с помощью JavaScript. Следующий пример предоставляет кнопку, которая позволяет Вам скрывать и отображать один слой.(требуется Netscape Navigator 4.0 или выше!).

This text is inside a layer

Исходный текст выглядит так:

<html> <head> <script language="JavaScript"> <!-- hide

function showHide() { if (document.layers["myLayer"].visibility == "show") document.layers["myLayer"].visibility= "hide" else document.layers["myLayer"].visibility= "show"; }

// --> </script> </head> <body>

<ilayer name=myLayer visibility=show> <font size=+1 color="#0000ff"><i>This text is inside a layer</i></font> </ilayer>

</body> </html>

Кнопка вызывает функцию showHide(). Вы можете видеть, что эта функция обращается к свойству visibility

layer-объекта myLayer. Через присвоение "show"

или "hide" в document.layers["myLayer"].visibility

Вы можете показать или скрыть слой. Пожалуйста обратите внимание, что строки "show" и "hide"

не зарезервированные слова, то есть Вы не можете писать document.layers["myLayer"].visibility= show.

Я использовал <ilayer> тег вместо тега <layer>, потому что я хотел поместить слой в поток документа.

Создание слоёв

Для создания слоя нам нужен любой тег <layer> или <ilayer>. Вы можете использовать следующие свойства:

name="layerName"	Имя слоя
left=xPosition	Горизонтальная позиция верхнего левого угла
top=yPosition	Вертикальная позиция верхнего левого угла
z-index=layerIndex	Порядковый номер слоя
width=layerWidth	Ширина слоя в пикселях
clip="x1_offset, y1_offset, x2_offset, y2_offset"	Определяет область в которой слой будет отображаться
above="layerName"	Определяет, над каким слоем этот слой будет отображаться
below="layerName"	Определяет, ниже какого слоя этой слой будет отображаться
Visibility=show\|hide\|inherit	Видимость этого слоя
bgcolor="rgbColor"	Цвет фона - вводится название стандартного цвета или rgb-значение
background="imageURL"	Фоновое изображение

Тег <layer> используется для слоев, которые могут быть установлены в позицию явным образом. Если Вы не определяете позицию (со свойствами left

и top) слой будет помещён в верхний левый угол окна.

Тег <ilayer> создает слой, позиция которого зависит от потока документа.

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

The text is displayed above the image Вот исходный код:

<html>

<layer name=txt z-index=1 left=200 top=100> <font size=+4> <i> Layers-Demo </i> </font> </layer>

</html>

Вы можете видеть, что мы определяем два слоя с тегом <layer>. Оба слоя установлены в позицию 200/100 (определенны через left и top). Все между тегом <layer> и </layer> (или тегом <ilayer> и </ilayer>) принадлежит этому слою.

Вы видите, что мы используем свойство z-index. Оно определяет в каком порядке появляются слои, то есть в нашем случае Вы сообщаете броузеру - текст появится выше или ниже изображения. Слой с самым высоким номером z-index будет выше. Вы не должны использовать 0 и 1 для z-index, а использовать любое положительное целое число.

Если Вы пишете z-index=100 в первом теге <layer> текст будет отображаться ниже изображения - поскольку слой текста имеет меньший z-index number (z-index=1). Вы можете видеть текст через изображение, потому что я использовал прозрачный фон (формат gif89a).

The text is displayed below the image

VOODOO'S INTRODUCTION TO JAVASCRIPT © 1996, 1997 by Stefan Koch

Часть 9: Слои I

Что такое слои?

Слои - одно замечательное новое свойство Netscape Navigator 4.0. Оно позволяет устанавливать абсолютную позицию объектов типа изображений. Помимо этого Вы можете перемещать объекты по вашей HTML-странице. Вы также можете скрыть объекты.

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

В настоящее время Вы можете использовать слои только с Netscape 4.0 Navigator 4.0!

Как обычно я не буду описывать все детали различных тегов. Существует хороший документ, описывающий все элементы слоев в Netscape Navigator 4.0 по адресу http://home.netscape.com/comprod/products/communicator/index.html

- по этому нет никакой потребности переписывать его.

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

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

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

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

Интересные эффекты могут быть созданы с помощью прозрачных слоев. Особенно крутой эффект могут создавать изображения с прозрачными частями. Не все форматы изображения могут обрабатывать прозрачные части. В настоящее время самый лучший для этого формат - gif89a. Большинство новых графических программ поддерживает этот gif-формат. Имеются также некоторые инструментальные средства свободно распространяемого программного обеспечения, доступные в сети.

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

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

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

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

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

(которая является частью домашней страницы моей книги JavaScript по адресу http://www.dpunkt.de/javascript/) - эта страница доступна на английском

или немецком.

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

[previous] [index] [next]

e-mail:skoch@rumms.uni-mannheim.de

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

My JavaScript-book

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

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

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

This is the first layer This is the second layer

This is the parent layer

Вы можете видеть три кнопки. Кнопки, которые запускают и останавливают движение слоев. Вы можете видеть, что перемещение слоя parentLayer

также воздействует на другие два слоя. Но перемещение слоя layer1 (или layer2) воздействует только на этот слой. Это показывает, что Вы можете определять группы объектов через вложенные слои.

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

// starting position var pos0= 0; var pos1= -10; var pos2= -10;

// moving? var move0= true; var move1= false; var move2= false;

// direction? var dir0= false; var dir1= false; var dir2= true;

function startStop(which) { if (which == 0) move0= !move0; if (which == 1) move1= !move1; if (which == 2) move2= !move2; }

function move() {

if (move0) { // move parentLayer if (dir0) pos0-- else pos0++;

if (pos0 < -100) dir0= false;

if (pos0 > 100) dir0= true;

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

if (move1) { // move parentLayer if (dir1) pos1-- else pos1++;

if (pos1 < -20) dir1= false;

if (pos1 > 20) dir1= true;

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

if (move2) { // move parentLayer if (dir2) pos2-- else pos2++;

if (pos2 < -20) dir2= false;

if (pos2 > 20) dir2= true;

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

}

// --> </script> </head>

<ilayer name=parentLayer left=100 top=0> <layer name=layer1 z-index=10 left=0 top=-10> This is the first layer </layer>

<layer name=layer2 z-index=20 left=200 top=-10> This is the second layer </layer>

<br><br> This is the parent layer

</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">  </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;

Вы должны познакомится со всеми другими элементами в этом сценарии.

Click

window.captureEvents(Event.CLICK);

window.onclick= handle;

function handle(e) { alert("The window object captured this event!"); return true; // i.e. follow the link }

Click on this link

window.captureEvents(Event.CLICK);

window.onclick= handle;

function handle(e) { document.links[1].handleEvent(e); }

Click on this link

Second link

Фиксация События

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

Давайте посмотрим на пример, чтобы увидеть применение фиксации события:

window.captureEvents(Event.CLICK);

window.onclick= handle;

function handle(e) { alert("The window object captured this event!"); return true; // i.e. follow the link }

</script> </head> <body> <a href="test.htm">Click on this link</a> </body> </html>

Вы видите, что мы не определяем драйвер события внутри тега <a>. Вместо этого мы используем

window.captureEvents(Event.CLICK);

чтобы фиксировать событие Click через window-объект. Обычно window-объект не знает событие Click

через фиксацию события мы можем переназначать его к объекту окна.

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

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

Вы можете видеть, что мы используем return true;

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

Если Вы определите обработчик события onClick

внутри<a> тега, вы поймете, что этот драйвер события не будет вызыватся. Это очевидно, поскольку объект окна фиксирует событие прежде

), чем оно достигает объекта связи. Если Вы определиете функцию handle() следующм образом

Объект Event

В JavaScript1.2. был добавлен новый объект Event. Он содержит свойства, которые описывают событие. Каждый раз, когда происходит событие, объект Event передается в обработчик события.

Если Вы используя Netscape Navigator 4.x, щелкните где-нибудь на следующем изображении, появится всплывающее окно, показывающее координаты события мыши:

Вот исходный текст:

Вы видите, что мы используем драйвер события onClick

внутри тега <a> >, как мы сделали бы в предшествующих версиях 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
pageX	Горизонтальное положение курсора в пикселях относительно окна броузера.
pageY	Вертикальное положение курсора в пикселях относительно окна броузера.
screenX	Горизонтальное положение курсора в пикселях относительно экрана.
screenY	Вертикальное положение курсора в пикселях относительно экрана.
target	Строка, представляющая объект, к которому первоначально послано событие.
type	Строка, представляющая тип события.
which	ASCII-значение нажатой клавиши или номер кнопки мышки.
x	Аналогично layerX
y	Аналогично layerY

MouseDown, MouseMove и MouseUp

Поскольку я уже сообщил Вам, что JavaScript не знает событие MouseDrag. Следовательно мы должны использовать события MouseDown, MouseMove и MouseUp

, чтобы выполнять drag & drop. Следующий пример показывает использование MouseMove. В строке состояния отображаются текущие координаты курсора мыши.

Вы можете видеть, что этот код - почти такой же, как и в предыдущем примере:

<html>

window.captureEvents(Event.MOUSEMOVE);

window.onmousemove= displayCoords;

function displayCoords(e) { status= "x: " + e.pageX + " y: " + e.pageY; }

// --> </script>

Mouse coordinates are displayed on the statusbar.

</html>

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

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

Код для этого примера выглядит так:

<html>

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) { // display coordinates status= "x: " + e.pageX + " y: " + e.pageY; }

function endDrag(e) { window.releaseEvents(Event.MOUSEMOVE); }

// --> </script>

Push the mouse button and move the mouse. The coordinates are being displayed on the statusbar.

</html>

Сначала мы указываем Window-объекту фиксировать события MouseDown и 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. Теперь мы можем перейти к показу объектов на экране. .

Mousedrg

Push the mouse button and move the mouse. The coordinates are being displayed on the statusbar.

Отображение перемещяющихся объектов

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

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) { dragObj[currentObj].left= e.pageX - dx; dragObj[currentObj].top= e.pageY - dy; } }

function endDrag(e) { currentObj= null; window.releaseEvents(Event.MOUSEMOVE); }

function init() { // define the 'dragable' layers dragObj[0]= document.layers["layer0"]; dragObj[1]= document.layers["layer1"]; dragObj[2]= document.layers["layer2"]; }

function whichObj(e) {

// check which object has been hit

var hit= null; for (var i= 0; i < dragObj.length; i++) { if ((dragObj[i].left < e.pageX) && (dragObj[i].left + dragObj[i].clip.width > e.pageX) && (dragObj[i].top < e.pageY) && (dragObj[i].top + dragObj[i].clip.height > e.pageY)) { hit= i; dx= e.pageX- dragObj[i].left; dy= e.pageY- dragObj[i].top; break; } } return hit; }

// --> </script> </head> <body onLoad="init()">

<layer name="layer0" left=100 top=200 clip="100,100" bgcolor="#0000ff"> <font size=+1>Object 0</font> </layer>

<layer name="layer1" left=300 top=200 clip="100,100" bgcolor="#00ff00"> <font size=+1>Object 1</font> </layer>

<layer name="layer2" left=500 top=200 clip="100,100" bgcolor="#ff0000"> <font size=+1>Object 2</font> </layer>

</body> </html>

Вы можете видеть, что мы определяем три слоя в части <body> этой HTML-страницы. После того, как страница полностью загружена, функция init()

вызвается через обработчик события onLoad в теге <body>:

function init() { // define the 'dragable' layers 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 для каждого слоя. С помощью этих значений мы можем проверить на какой объект нажал пользователь.

Отпускание объектов

Теперь у нас есть все, что нам надо, чтобы выполнить технологию drag & drop. С нашим сценарием, пользователь может перемещать объекты на нашей web-странице. Но мы все же не говорили относительно отпускания объектов. Давайте предположим, что Вы хотите создать интерактивный магазин. У Вас есть несколько элементов, которые могут быть помещены в корзину для покупки. Пользователь должен перетащить эти элементы к корзине и оставить их там. Это означает, что мы должны регистрировать, когда пользователь отпускает объект на корзине, что означает, что он хочет купить это.

Какую часть кода мы должны изменить, чтобы выполнить это? Мы должны проверить позицию объекта после события MouseUp - то есть мы должны добавить некоторый код к функции endDrag(). Мы могли бы например проверять находятся ли координаты события мыши внутри некоторого прямоугольника. Если это истинно, Вы вызываете функцию, которая регистрирует все элементы, которые будут куплены (Вы может быть захотите поместить их внутрь массива). Затем Вы могли бы показать элемент внутри корзины для покупок.

Какие события мыши мы должны

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

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

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

Это код для приведенного выше примера:

<html>

<script language="JavaScript">  </script>

Click somewhere inside the browser window.

</html>

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

window.onclick= displayCoords;

определяет, что должно произойти при событии Click. Она сообщает броузеру, что должно быть вызвана displayCoords(), как реакция на событие Click (Пожалуйста обратите внимание, что в этом случае Вы не должны использовать скобки после displayCoords). displayCoords()

- функция, которая, описывается наподобие этого

function displayCoords(e) { alert("x: " + e.pageX + " y: " + e.pageY); }

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

Усовершенствования

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

Я не думаю, что вы будете удовлетворены, поднимая красные, зеленые и синие прямоугольники на нашей web-странице. Добавьте графику покруче, и пользователи запомнят вашу страницу. Вы можете поместить что-нибудь внутри объектов. Например поместите там один тег <img>, если Вы хотите, чтобы ваш объект отображался как изображение.

[предыдущая] [содержание]

e-mail:skoch@rumms.uni-mannheim.de

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

My JavaScript-book