Введение в JavaScript для Мага
Шрифт:
Однако при этом мы должны помнить еще и о том, что обязаны каждый раз вычеслять, какую часть текста следует показывать в строке состояния (как правило, объем текстового материала превышает размер строки состояния).
Итак, исходный код скрипта — я добавил к нему еще некоторые комментарии:
<html>
<head>
<script language="JavaScript">
<!- hide
// define the text of the scroller
var scrtxt = "Это JavaScript! " +
"Это JavaScript! " +
"Это JavaScript!";
var len = scrtxt.length;
var width = 100;
var pos = — (width + 2);
function scroll {
// напечатать заданный текст справа и установить таймер
// перейти на исходную позицию для следующего шага
pos++;
// вычленить видимую часть текста
var scroller = "";
if (pos == len) {
pos = — (width + 2);
}
// если текст еще не дошел до левой границы, то мы должны
// добавить перед ним несколько пробелов. В противном случае мы должны
// вырезать начало текста (ту часть, что уже ушла за левую границу
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);
}
// разместить текст в строке состо\яни\я
window.status = scroller;
// вызвать эту функцию вновь через 100 миллисекунд
setTimeout("scroll", 100);
}
// — >
</script>
</head>
<body onLoad="scroll">
Это пример прокрутки в строке состояния средствами JavaScript.
</body>
</html>
Большая часть функции scroll нужна для вычленения той части текста, которая будет показана пользователю. Я не буду объяснять этот код подробно — Вам необходимо лишь понять, как вообще осуществляется эта прокрутка.
Чтобы запустить этот процесс, мы используемся процедурой обработки события onLoad, описанной в тэге <body>. То есть функция scroll будет вызвана сразу же после загрузки HTML-страницы.
Через посредство процедуры onLoad мы вызываем функцию scroll. Первым делом в функции scroll мы устанавливаем таймер. Этим гарантируется, что функция scroll будет повторно вызвана через 100 миллисекунд. При этом текст будет перемещен еще на один шаг и запущен другой таймер. Так будет продолжаться без конца.
(В Netscape Navigator 2. x с таким типом скроллинга были некоторые проблемы — его выполнение иногда приводило к появлению ошибки 'Out of memory'. Я получил много писем, где объяснялось, что это возникает вследствие рекурсивного вызова функции scroll, что в конце концов приводит к выходу за пределы памяти. Но это не так. Данный вызов функции не является рекурсивным! Рекурсию мы получим, если будем вызывать функцию scroll непосредственно внутри самой же функции scroll. А этого здесь мы как раз и не делаем. Прежняя функция, установившая таймер, закончивается еще до того, как начинается выполнение новой функции. Проблема же состояла в том, что в действительности мы не могли в JavaScript выполнять коррекцию строк. И если Вы пробуете сделать это, то JavaScript просто-напросто создавал новый объект — но при этом не удалял старый. Именно таким образом происходило переполнение памяти.)
Скроллинг используется в Интернет довольно широко. И есть риск, что быстро он станет непопулярным. Я должен признаться, что и сам не очень его люблю. В большинстве страниц, где он применяется, особенно раздражает то, что из-за непрерывного скроллинга становится невозможным прочесть в строке состояния адрес URL. Эту проблему можно было бы решить, позаботившись о приостановке скроллига, если происходит событие MouseOver — и, соответственно, продолжении, когда финсируется onMouseOut. Если Вы хотите попытаться создать скроллинг, то пожалуйста не используйте стандартный его вариант — пробуйте привнести в него некоторые приятные особенности. Возможен вариант, когда одна часть текста приходит слева, а другая — справа. И когда они встречаются посередине, то в течение некоторых секунд текст остается неизменным. Воспользовавшись небольшой долей фантазии, Вы конечно же сможете найти еще несколько хороших альтернатив (некоторые примеры я привожу в своей книге).
Часть 6: Предопределенные объекты
Объект Date
В JavaScript Вам разрешено пользоваться некоторыми заранее заданными объектами. Примерами таких объектов могут служить Date, Array или Math. Есть еще несколько таких же объектов — полное описание см. в документации, предоставляемой фирмой Netscape.
Для начала давайте рассмотрим объект Date. Судя по названию, он позволяет Вам работать как со временем, так и с датой. Например, Вы можете легко определить, сколько дней еще остается до следующего рождества. Или можете внести в Ваш HTML-документ запись текущего времени.
Так что давайте начнем с примера, который высвечивает на экран текущее время. Сперва мы должны создать новый объект Date. Для этого мы пользуемся оператором new:
today= new Date
Здесь создается новый объект Date, с именем today. Если при создании этого нового объекта Date Вы не указали какой-либо определенной даты и времени, то будут предоставлены текущие дата и время. То есть, после выполнения команды today= new Date вновь созданный объект today будет указывать именно те дату и время, когда данная команда была выполнена.
Объект Date предоставляет нам кое-какие методы, которые теперь могут применяться к нашему объекту today. Например, это методы — getHours, setHours, getMinutes, setMinutes, getMonth, setMonth и так далее. Полное описание объекта Date и его методов Вы сможете найти в документации по JavaScript, предоставляемой фирмой Netscapes.
Обратите пожалуйста внимание, что объект Date лишь содержит определенную запись о дате и времени. Он не уподобляется часам, автоматически отслеживающим время каждую секунду, либо миллисекунду.
Чтобы зафиксировать какое-либо другие дату и время, мы можем воспользоваться видоизмененным конструктором (это будет метод Date, который при создании нового объекта Date вызывается через оператор new):
today= new Date(1997, 0, 1, 17, 35, 23)
При этом будет создан объект Date, в котором будет зафиксировано первое января 1997 года 17:35 и 23 секунд. Таким образом, Вы выбираете дату и время по следующему шаблону:
Date(year, month, day, hours, minutes, seconds)
Заметьте, что для обозначения января Вы должны использовать число 0, а не 1, как Вы вероятно думали. Число 1 будет обозначать февраль, ну и так далее.
Теперь мы напишем скрипт, печатающий текущие дату и время. Результат будет выглядеть следующим образом:
Сам же код выглядит следующим образом:
<script language="JavaScript">
<!- hide
now= new Date;
document.write("Time: " + now.getHours +":" + now.getMinutes + "<br>");
document.write("Date: " + (now.getMonth + 1) + "/" + now.getDate + "/" +
(1900 + now.getYear));
// — >
</script>
Здесь мы пользуемся такими методами, как getHours, чтобы вывести на экран время и дату, указанные в объекте Date с именем now. Можно видеть, что мы добавляем к записи года еще число 1900. Дело в том, что метод getYear указывает количество лет, прошедших после 1900 года. А стало быть, если сейчас 1997 год, то будет выдано значение 97, а если 2010 год — то 110, а не 10! Если мы так и будем всякий раз добавлять 1900, то у нас не будет проблемы 2000 года. Помните также, что мы обязаны увеличивать на единицу значение, получаемое от метода getMonth.