Строка состояния и таймеры

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

< html>

< head>

< script language=" JavaScript" >

function statbar(txt) {

window.status = txt;

}

< /script>

< /head>

< body>

< form>

< input type=" button" name=" look" value=" Писать! "

onClick=" statbar('Привет! Это окно состояния! '); " >

< input type=" button" name=" erase" value=" Стереть! "

onClick=" statbar(''); " >

< /form>

< /body>

< /html>

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

< a href=" dontclck.htm"

onMouseOver=" window.status='Don\'t click me! '; return true; " onMouseOut=" window.status=''; " > link< /a>

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

обработки события MouseOver. Как правило, в строке состояния браузер показывает URL соответствующей ссылки. Если же мы не возвратим значение true, то сразу же после того, как наш код был выполнен, браузер перепишет строку состояния на свой лад - то есть наш текст будет тут же затерт и читатель не сможет его увидеть. В общем случае, мы всегда можем отменить дальнейшую обработку события браузером, возвращая true в своей собственной процедуре обработки события.

 

Таймеры

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

< script language=" JavaScript" >

function timer() {

setTimeout(" alert('Время истекло! ')", 3000);

}

< /script>

< form>

< input type=" button" value=" Timer" onClick=" timer()" >

< /form>

Здесь setTimeout () - это метод объекта window. Первый аргумент при вызове - это код JavaScript, который следует выполнить по истечении указанного времени. Во втором аргументе указывается задержка в миллисекундах.

3.7. Предопределенные объекты
Объект Date

Давайте рассмотрим объект Date. Судя по названию, он позволяет Вам работать как со временем, так и с датой. Например, Вы можете легко определить, сколько дней еще остается до следующего рождества. Или можете внести в Ваш HTML-документ запись текущего времени.

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

 today= new Date()

Вновь созданный объект today будет указывать именно те дату и время, когда данная команда была выполнена.

Объект Date предоставляет нам кое-какие методы, которые теперь могут применяться к нашему объекту today. Например, это методы - getHours(), setHours(), getMinutes(), setMinutes(), getMonth(), setMonth() и так далее

Чтобы зафиксировать какое-либо другие дату и время, мы можем воспользоваться видоизмененным конструктором

Date(year, month, day, hours, minutes, seconds)

Заметьте, что месяцы нумеруются с нуля. Число 1 будет обозначать февраль, ну и так далее. Теперь мы напишем скрипт, печатающий текущие дату и время.

< script language=" JavaScript" >

now= new Date ();

document.write(" Time: " + now.getHours() + ": " + now.getMinutes() + " < br> " );

if(now.getYear() > 1999)

document.write(" Date: "

+now.getYear()+" /" +(now.getMonth()+1)+" /" +now.getDate());

else

document.write(" Date: "

+(1900+now.getYear())+" /" +(now.getMonth()+1)+" /" +now.getDate());
< /script>

В данном скрипте не выполняется проверки на тот случай, если количество минут окажется меньше, чем 10. Это значит, что Вы можете получить запись времени примерно в следующем виде: 14: 3, что на самом деле должно было бы означать 14: 03. Решение этой проблемы мы рассмотрим в следующем примере. Рассмотрим теперь скрипт, создающий на экране изображение работающих часов:

< html>

< head>

< script Language=" JavaScript" >

var timeStr, dateStr;

function clock() {

now= new Date();

hours= now.getHours ();

minutes= now.getMinutes();

seconds= now.getSeconds();

timeStr= " " + hours;

timeStr+= ((minutes < 10)? ": 0" : ": " ) + minutes;

timeStr+= ((seconds < 10)? ": 0" : ": " ) + seconds;

document.clock.time.value = timeStr;

date= now.getDate();

month= now.getMonth()+1;

year= now.getYear();

dateStr= " " + month;

dateStr+= ((date < 10)? " /0" : " /" ) + date;

if(now.getYear() > 1999) dateStr+= " /" + year;

else

dateStr+= " /" + (1900+year);

document.clock.date.value = dateStr; Timer= setTimeout(" clock()", 1000); }
< /script>
< /head>

< body onLoad=" clock()" > < form name=" clock" > Время:

< input type=" text" name=" time" size=" 8" value=" " > < br> Дата:

< input type=" text" name=" date" size=" 8" value=" " >

< /form>

< /body>

< /html>

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

Объект Math

Если Вам необходимо в скрипте выполнять математические рассчеты, то некоторые полезные методы для этого Вы найдете в объекте Math. Например, имеется метод синуса sin().

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

 

 

Объект Image

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

В JavaScript все изображения предстают в виде массива. Массив этот называется images и является свойством объекта document. Например, Вы можете определить, который размер имеет изображение, обратившись к его свойствам width и height. То есть по записи document.images[0].width Вы можете определить ширину первого изображения на web-странице (в пикселах).

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

< img src=" img.gif" name=" myImage" height=100>

то Вы сможете обращаться к нему, написав document.myImage или  document.images[" myImage" ].

Начиная с версии JavaScript 1.1, вы имеете возможность назначать новый адрес изображению, уже загруженному в web-страницу. И в результате, изображение будет загружено с этого нового адреса, заменив на web-странице старое. Рассмотрим к примеру запись:

< img src=" img1.gif" name=" myImage" >

Здесь загружается изображение img 1. gif и получает имя myImage. В следующей строке прежнее изображение img1. gifзаменяется уже на новое - img 2. gif _:

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

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

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

hiddenImg= new Image();

hiddenImg.src= " img3.gif";

В первой строке создается новый объект Image. Во второй строке указывается адрес изображения, которое в дальнейшем будет представлено с помощью объекта hiddenImg. Как мы уже видели, запись нового адреса в атрибуте src заставляет браузер загружать изображение с указанного адреса. Поэтому, когда выполняется вторая строка нашего примера, начинает загружаться изображение img 2. gif. Но как подразумевается самим названием hiddenImg (" скрытая картинка" ), после того, как браузер закончит загрузку, изображение на экране не появится. Оно будет лишь будет сохранено в памяти компьютера (или точнее в кэше) для последующего использования. Чтобы вызвать изображение на экран, мы можем воспользоваться строкой:

document.myImage.src= hiddenImg.src;

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

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

< a href=" #"

onMouseOver=" document.myImage2.src='img2.gif"

оnMouseOut=" document.myImage2.src='img1.gif" >

< img src=" img1.gif" name=" myImage2" height=50 border=0> < /a>

 

⇐ Предыдущая1234567Следующая ⇒

Поделиться: