«Активные» картинки

В html-документе существует возможность создать «активную» картинку, в которой разные части картинки имеют различные гиперссылки, что является одним из механизмов навигации на веб-странице.

Для задания информации о гиперссылках в рисунке, которая включается в html-документ, используется атрибут usemap= в команде <img>. Сама информация о гиперссылках определяется командами <map> и <area>, как это показано ниже:

<map name="my-map"> <area shape="rect" coords="15,15, 75,60" href="s1.htm"> <area shape="circle" coords="140,50, 35" href="s2.htm"> <area shape="polygon" coords="25,125, 85,80, 140,130" href="s3.htm"> <area shape="rect" coords="160,100, 195,145" nohref> </map> <p><img border=0 src="risunok.gif" usemap="#my-map">

В этом примере на картинке были размечены:

• прямоугольник (rect) — он связан с html-документом s1.htm

• круг (circle) — связан с html-документом s2.htm

• многоугольник (polygon) — связан с html-документом s3.htm

• прямоугольник (rect), который ни с каким html-документом не связан (nohref)

Атрибут coords= задает список координат отмечаемой области:

• у прямоугольника (rect) — это x и y координаты левого верхнего и правого нижнего углов

• у круга (circle) — x и y координаты центра и радиус

• у многоугольника (polygon) — x и y координаты каждого из углов

Координаты задаются в пикселах. Для того, чтобы их узнать, необходимо открыть файл с картинкой в графическом редакторе Paint или Photoshop. В редакторе Paint достаточно выбрать инструмент Карандаш, и при движении мышкой по картинке, в правом нижнем углу окна указываются текущие x и y координаты курсора (в пикселах).

Если две или более областей пересекаются, то браузер выбирает первую из тех, что описаны в команде <map>, при щелчке по непомеченной области ничего не происходит.

Помимо гиперссылок на «активной» картинке можно использовать JavaScript-обработчик события onClick. А в обработчике указывается или стандартная или написанная вами функция.

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

Сначала рассмотрим, как из JavaScript можно адресоваться к изображениям, представленным на веб-странице. В рассматриваемом языке все изображения предстают в виде массива. Массив этот называется images и является свойством объекта document. Каждое изображение на веб-странице получает порядковый номер: первое изображение получает номер 0, второе — номер 1 и т.д. Таким образом, к первому изображению мы можем адресоваться записав document.images[0].

Каждое изображение в HTML-документе рассматривается в качестве объекта Image. Объект Image имеет определенные свойства, к которым и можно обращаться из языка JavaScript. Например, вы можете определить, который размер имеет изображение, обратившись к его свойствам width и height. То есть по записи document.images[0].width вы можете определить ширину первого изображения на веб-странице (в пикселах). К сожалению, отслеживать индекс всех изображений может оказаться затруднительным, особенно если на одной странице у вас их довольно много. Эта проблема решается назначением изображениям своих собственных имен. Так, если вы добавляете изображение с помощью тега

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

то вы сможете обращаться к нему, написав

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

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

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

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

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

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

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

document.myImage.src= hiddenImg.src;

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

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

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

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

Метод setTimeout выполняет действие, задаваемое первым атрибутом, по истечении указанного в миллисекундах промежутка времени, определенного вторым атрибутом. В рассмотренном примере в качестве первого атрибута задается функция succpict(), тем самым обеспечивается повторение вызова функции через каждые две секунды. Просмотр изображений будет прекращен после нажатия кнопки Остановить. Если просмотр изображений требуется продолжить, то следует щелкнуть по кнопке Начать снова.

Документ с описанным сценарием выглядит так, как представлено в листинге 2. 

Листинг 2. Использование функции setTimeout

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

При решении такой задачи воспользуемся свойством width объекта image. При каждом вызове функции succpict2() изменяется размер выводимого изображения и этим достигается эффект удаления от зрителя. Функция setTimeout ("succpict2()", 500) производит повторный вызов функции succpict2() через каждые полсекунды. Когда размер изображения уменьшится до заданного, движение прекратится.

Для каждого рисунка атрибуты уменьшения размера изображения и время обновления следует подобрать индивидуально. Сценарий описан в листинге 3.

Листинг 3. Эффект удаления изображения от зрителя

<HTML> 
<HEAD>
<TITLE>Удаляющееся изображение</TITLE> 
<script language="JavaScript"> 
function succpict2() 
{ 
var d = document;
var w = d.mypict.width 
if (w > 150)
{d.mypict.width = w-10
d.mypict.src = "msm.gif"
setTimeout("succpict2()", 500)
}  
} 
</script> 
</HEAD> 
<BODY>
<H4>При наведении курсора мыши над рисунком изображение начинает удаляться от зрителя</Н4> 
<IMG src="msm.gif" name="mypict" onMouseOver="succpict2()"> 
</BODY> 
</HTML>

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

Эта задача в некотором смысле является обратной к только что рассмотренной. Будем увеличивать при каждом вызове функции размер изображения до тех пор, пока оно не достигнет заданного размера. Повторные вызовы функции grpict() обеспечиваются функцией setTimeout, аргументы которой следует подобрать в зависимости от изображения.

Диаграмма

Аналогично управлению свойством width объекта image, допустимо менять и свойство height. Благодаря этому можно создавать динамические столбчатые диаграммы — гистограммы, в которых высота столбиков зависит от значений, введённых в форме.

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

Гистограмма представляется с помощью изображений. Сначала исходные данные путём умножения на 1 конвертируются в число, затем вычисляется величина каждого из столбцов, и нужные изображения помещаются в документ для формирования столбцов гистограммы. Столбцы гистограммы располагаются в ячейках таблицы, для каждого столбца выделена своя ячейка.

Приведем для этого случая HTML-код со сценарием (листинг 4).

Листинг 4. Анкета с диаграммой

<HTML>  
<HEAD> 
<TITLE>Анкета</TITLE> 
<script language=JavaScript>  

function graph(obj) { 
var kl = 0; 
var sutki = 24;
var lcTime = obj.lec.value*1  // Учеба
var rsTime = obj.rst.value*1  // Отдых
var slTime = obj.slp.value*1  // Сон
var tableHeight = 150;  
var d= document 
sumTime = lcTime+rsTime+slTime
if (sumTime > 24 ) alert("Вы точно уверены, что сутках больше 24 часов?")  
if (sumTime == 0 ) alert("Вы что, даже не спите?")

if ((sumTime > 0)&&(sumTime <= 24)) 
   { kl = tableHeight/sutki;  // масштабный множитель для столбцов гистограммы
     d.images[0].height=Math.round(lcTime*kl);  // округление до целого числа
     d.images[0].title=lcTime+" час.";  
     d.images[1].height=Math.round(rsTime*kl);  
     d.images[1].title=rsTime+" час.";  
     d.images[2].height=Math.round(slTime*kl);  
     d.images[2].title=slTime+" час.";  
     d.images[3].height=Math.round(sumTime*kl);  
     d.images[3].title=sumTime+" час.";  
   }
} // end graph
function CheckValHours(hours) { 
if (hours < 0)  alert("Недопустимо значение количества часов меньшее нуля!"); 
if (hours > 24) alert("В сутках вообще-то 24 часа!"); 
} 
</script>  
</HEAD> 
<BODY bgcolor=#crcccc>  
<h3>Анкета</h3>  
<i>После заполнения соответствующих полей для того,  
чтобы увидеть диаграмму, нажмите кнопку</i> <b>Показать</b>
<p><FORM name=data> 
<TABLE width=450 cellPadding=2 cellSpacing=2 border=0> 
<TR><TD align=left><b>Сколько времени в день вы учитесь</b> (часов)</TD>  
<TD align=left><input type=text name=lec size=5 value="" 
onChange="CheckValHours(this.value)"></TD>  
</TR> 
<TR><TD align=left><b>Сколько времени в день вы отдыхаете</b> (часов)</TD>  
<TD align=left><input type=text name=rest size=5 value="" 
onChange="CheckValHours(this.value)"></TD>  
</TR>  
<TR><TD align=left><b>Сколько времени вы спите</b> (часов)</TD> 
<TD align=left> <input type=text name=sleep size=5 value="" 
onChange="CheckValHours(this.value)"></TD> </TR> 
<TR align=center><TD colspan=2> 
<br><br><input type=button value="Показать" onClick="graph(data)"></TD></TR>  
</TABLE> 
</FORM> 
<h4>Гистограмма<h4> 
<TABLE height=190 cellPadding=0 cellSpacing=1 border=0>  
<TR valign=bottom align=center>  
<TD bgcolor=#aaaaaa height=150> 
<IMG src=1x1r.gif width=110 height=0 border=0></TD>  
<TD bgcolor=#aaaaaa height=150> 
<IMG src=1x1g.gif width=110 height=0 border=0></TD>  
<TD bgcolor=#aaaaaa height=150> 
<IMG src=1x1b.gif width=110 height=0 border=0></TD>  
<TD bgcolor=#aaaaaa height=150> 
<IMG src=1x1y.gif width=110 height=0 border=0></TD>  
</TR>  
<TR valign=top align=center> 
<TD height=40>Учеба</TD>  
<TD height=40>Отдых</TD>  
<TD height=40>Сон</TD>  
<TD height=40><b>Bceгo в сутки</b></TD>  
</TR>  
</TABLE>  
</BODY>  
</HTML>

Напишем сценарий, который реализует обмен рисунков в документе. Пусть в документе расположено четыре изображения, пронумерованных от 1 до 4. В текстовых полях указываются номера рисунков, которые необходимо поменять местами. Требуется, чтобы после нажатия кнопки Поменять местами изображения переместились на нужные места.

Сначала проверим, правильно ли заданы номера изображений, если это не так, то выдадим сообщение. Переменная z служит для запоминания адреса первого графического изображения. Доступ к изображению с номером r1 производится с помощью конструкции document.images[r1-1]. Для того чтобы на место изображения с номером r1 поместить изображение с номером r2, требуется выполнить оператор присваивания:

document.images[r1-1].src=document.images[r2-1].src

И, наконец, на место изображения с номером r2 помещается изображение, которое ранее было на месте с номером r1, и адрес которого запомнили в переменной z:

document.images[r2-1].src=z

Приведем полностью документ со сценарием (листинг 5).

Листинг 5. Перестановка изображений с помощью сценария

Встроенный объект Data применяется для представления и обработки даты и времени. Он не имеет свойств, но обладает несколькими методами, позволяющими устанавливать и изменять дату и время. В языке JavaScript дата определяется числом миллисекунд, прошедших с 1 января 1970 года.

Объект Data создается оператором new с помощью конструктора Data. Если в конструкторе отсутствуют параметры, то значением new Data() будет текущая дата и время.

Значением переменной my_data1, определенной следующим образом:

var my_data1 = new Data()

будет объект, соответствующий текущей дате и времени. 

Параметром конструктора new Data может быть строка формата
"месяц, день, год часы:минуты:секунды".

Опишем переменную my_data2 и приcвоим ей начальное значение:
var my_data2 = new Data("Feb, 12, 1978 16:45:10")

Переменная my_data2 определяет дату 12 февраля 1978 года и время 16 часов 45 минут и 10 секунд. Значения часов, минут, секунд можно опустить, в этом случае они будут равны нулю:
var my_data3 = new Data("Feb, 12, 1978")

Параметры конструктора new Data могут определять год, месяц, число, время, минуты, секунды с помощью чисел.
Дату 12 февраля 1978 года и время 16 часов 45 минут и 10 секунд можно задать так:
var my_data4 = new Data(78, 1, 12, 16, 45, 10)

Если время опустить, то описание будет следующим:
var my_data5 = new Data(78, 1, 12)

Все числовые представления даты нумеруются с нуля, кроме номера дня в месяце. Месяцы представляются числами от 0 (январь) до 11 (декабрь), поэтому второй атрибут при задании переменных my_data4 и my_data5 равен 1.

Методами объекта Date можно получать и устанавливать отдельно значения месяца, дня недели, часов, минут и секунд.

• Метод getDate возвращает число в диапазоне от 1 до 31, представляющее число месяца.
• Метод getHours возвращает час суток. Значение возвращается в 24-часовом формате от 0 (полночь) до 23.
• Метод getMinutes возвращает минуты как целое от 0 до 59.
• Метод getseconds возвращает число секунд как целое от 0 до 59.

В следующем примере эти методы используются для формирования текущего времени.

Определение текущего времени

Напишем сценарий, который определяет текущее время и выводит его в текстовое поле в формате "чч:мм:сс".

В переменной res формируется строка, которая затем будет отображена в поле rest формы с именем form1. Для того чтобы уточнить время, следует еще раз нажать кнопку Время и т.д. Полностью сценарий приведен в листинге 6.

Листинг 6. Определение времени

<HTML> 
<HEAD>
<TITLE>Определение времени</TITLE> 
<script language="JavaScript"> 
function cl() 
{ var d = document 
var t = new Date() 
var h = t.getHours() 
var m = t.getMinutes() 
var s = t.getSeconds() 
var res = "" 
if (h < 10)
res += "0" + h 
else res += h 
if (m < 10) res += ":0"+m 
else res += ":"+m 
if (s < 10) res += ":0"+s 
else res += ":"+s 
d.form1.rest.value = res 
}
</script> 
</HEAD>
<BODY bgcolor="#FFFFCC"> 
<CENTER>
<IMG src=alarm.gif><br>
При нажатии кнопки <В>Время</В>, вы узнаете, который час
(с точностью до секунды)
<P> <FORM name="form1">
<input type="button" value=Время onClick="cl()"> 
<input type="text" size=10 name="rest"> 
</FORM> 
</BODY> 
</HTML>

Определение года, месяца, числа, дня недели и времени

Объект Data обладает методами, которые позволяют определить день недели, номер месяца и год.

• Метод getDay возвращает день недели как целое число от 0 (воскресенье) до 6 (суббота).
• Метод getMonth возвращает номер месяца в году как целое число в интервале между 0 (январь) и 11 (декабрь). Обратите внимание, что номер месяца не соответствует стандартному способу нумерации месяцев.
• Метод getFullYear выдает год объекта в четырехзначном виде (сокращенный вариант getYear в браузере Firefox выдаёт неверное значение).

Использование описанных методов потребуется для решения следующей задачи.

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

Для того чтобы по номеру дня, определяемому методом getDay, вывести название дня, можно воспользоваться оператором выбора. Аналогично поступаем и в случае вывода названия месяца. При щелчке по соответствующей кнопке получаем требуемое значение. HTML-код с описанным сценарием представлен в листинге 7.

Листинг 7. Определение года, названия месяца, числа, дня недели и времени

<HTML> 
<HEAD>
<TITLE>Определение года, месяца, числа, дня недели и времени</TITLE> 
<script language="JavaScript"> 
var d = document 
var t = new Date() 
function fyear(obj) 
{ var year = t.getFullYear()
obj.fye.value = year 
}

function fmon(obj) 
{ var s
var mont = t.getMonth() 
switch (mont) {
case 0: s = "январь"; break; 
case 1: s = "февраль"; break; 
case 2: s = "март"; break; 
case 3: s = "апрель"; break; 
case 4: s = "май"; break; 
case 5: s = "июнь"; break; 
case 6: s = "июль"; break; 
case 7: s = "август"; break; 
case 8: s = "сентябрь"; break; 
case 9: s = "октябрь"; break; 
case 10: s = "ноябрь"; break; 
case 11: s = "декабрь"; break; 
}
obj.fm.value = s 
}

function fdate(obj) 
{ var d = t.getDate() 
obj.fdat.value = d 
}

function fday(obj) 
{ var day = t.getDay() 
var s
switch (day) {
case 0: s = "воскресенье"; break; 
case 1: s = "понедельник"; break; 
case 2: s = "вторник"; break;
case 3: s = "среда"; break; 
case 4: s = "четверг"; break; 
case 5: s = "пятница"; break; 
case 6: s = "суббота"; break; 
}
obj.fd.value = s 
}

function cl(obj) 
{ var h = t.getHours() 
var m = t.getMinutes() 
var s = t.getSeconds() 
var res = "" + h 
if (m < 10) res += ":0"+m 
else res += ":"+m 
if (s < 10) res += ":0"+s 
else res += ":"+s 
obj.clo.value = res 
} 

function aldate(obj)
{ obj.aldat.value = t } 
</script> 
</HEAD> 
<BODY bgcolor="#FFFFCC">
<Н4>Для получения информации нажмите соответствующую кнопку</Н4> 
<FORM name="form1">
<input type="button" value="Год" onClick="fyear(form1)">
<input type="text" size=20 name="fye"><br> 
<input type="button" value="Месяц" onClick="fmon(form1)"> 
<input type="text" size=20 name="fm"><br>
<input type="button" value="Число" onClick="fdate(form1)"> 
<input type="text" size=20 name="fdat"><br>
<input type="button" value="День" onClick="fday(form1)">
<input type="text" size=20 name="fd"><br> 
<input type="button" value="Время" onClick="cl(form1)"> 
<input type="text" size=20 name="clo"><HR> 
<input type="button" value="Дата" onClick="aldate(form1)"> 
<input type="text" size=40 name="aldat"><HR> 
<input type="reset" value=Отменить> 
</FORM> 
</BODY> 
</HTML>

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

Необходимо написать сценарий, который формирует сведения о текущей дате и времени в следующем виде:

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

Листинг 8. Время посещения страницы с использованием массивов

<HTML> 
<HEAD>
<script language="JavaScript"> 
// Названия месяцев:
NMonths = new Array("января", "февраля", "марта", "апреля", "мая", "июня", "июля", "августа", "сентября", "октября", "ноября", "декабря")
// Названия дней недели:
NDays = new Array("воскресенье", "понедельник", "вторник", "среда", "четверг", "пятница", "суббота") 

function DateTime() 
{ var now = new Date()
var minute = now.getMinutes()
var second = now.getSeconds()
var hour = now.getHours()
var min = ((minute < 10) ? ":0" : ":") + minute 
var sec = ((second < 10) ? ":0" : ":") + second 
var str = "Вы посетили эту страницу<br>" 
year = now.getFullYear() + " " 
month = now.getMonth() 
imonth = NMonths[month] 
day=now.getDay() 
iday= NDays[day]
str += now.getDate() + " " + imonth + " " + year + " года<br>" 
str += "в " + hour + min + sec + "<br>" 
str += "Сегодня - " + iday 
document.write(str) 
}
</script> 
</HEAD> 
<BODY>
<H4 align=center>Пример использования функций определения времени</Н4> 
<script language = "JavaScript">
DateTime() 
</script> 
</BODY> 
</HTML>

Использование картинок

Для отображения даты (и времени) можно использовать графические файлы, соответствующие цифрам. Пусть имена этих файлов, например, такие: dg0.gif, ..., dg9.gif, т.е. понятно, какой файл какой цифре соответствует. А файл dgp.gif — это картинка со знаком точки.

Поскольку объект Date() возвращает строку, то в данном случае необходимо использовать функцию charAt(i), которая возвращает i-ый символ из строки, а фактически цифру. Затем вместо этой цифры подставляется соответствующая картинка (листинг 9).

Листинг 9. Дата посещения страницы с использованием картинок

<HTML> 
<HEAD>
<TITLE>Дата посещения страницы с использованием картинок</TITLE> 
<BODY>
<script language="JavaScript">

document.write(setDate())

function setDate() {  
	var text = "" 
	var openImage = "<IMG SRC=dg"
	var closeImage = ".gif HEIGHT=21 WIDTH=16>"
	// openImage, closeImage - вспомогательные переменные 
	// для формирования пути к графическим файлам с цифрами
	var now = new Date()  // Создает объект, хранящий дату и время
	var date = now.getDate()
	var month = now.getMonth()
	var year = now.getFullYear()

	month++  // 0 - 11 => 1 - 12
                 // нумерация месяцев ВСЕГДА начинается с 0!!!
                 // поэтому ее приходится "подправлять"

	date += ""
	month += ""
	year += ""
	for (var i = 0; i < date.length; ++i) {
		text += openImage + date.charAt(i) + closeImage
	}
	text += openImage + "p.gif HEIGHT=21 WIDTH=9>" 
	for (var i = 0; i  month.length; ++i) {
		text += openImage + month.charAt(i) + closeImage
                                      // charAt(i) возвращает i-ый символ из строки,
                                      // а фактически цифру 
                // в целом вся конструкция формирует html-команду
                // вида <IMG SRC="dg + ЦИФРА +.gif" HEIGHT=21 WIDTH=16>
                // например, <IMG SRC="dg1.gif" HEIGHT=21 WIDTH=16>
	}
	text += openImage + "p.gif HEIGHT=21 WIDTH=9>" 
	// здесь формируется команда <IMG SRC="dgp.gif" HEIGHT=21 WIDTH=9>,
	// где dgp.gif - знак точки между днем, месяцем и годом
	
	for (var i = 0; i < year.length; ++i) {
		text += openImage + year.charAt(i) + closeImage
	}
	return text}
</SCRIPT>
</BODY>
</HTML>

Идущие часы

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

При загрузке документа вызывается функция clock_tik(), в которой реализован рекуррентный вызов её же через каждую секунду с помощью функции setTimeout (листинг 10).

Объект today — это строка вида «Mon Sep 2 10:10:10 ...», которая отображается в текстовом поле clo формы form1.

Листинг 10. Пример идущих часов

<HTML>  
<HEAD>  
<script language="JavaScript">  
function clock_tik()  
{ var d = document
window.setTimeout("clock_tik()",1000);
today = new Date();
d.form1.clo.value = today  
}
</script>  
</HEAD>  
<BODY onLoad="clock_tik()"> 
<FORM name="form1"> 
<input type="text" size=50 name="clo">  
</FORM>  
</BODY>
</HTML>

Примеры возможностей JavaScript

Ниже приведены несколько примеров, показывающих возможности JavaScript при реакции на событие onMouseMove. Правда, к сожалению, все эти примеры работают только в браузере Internet Explorer.

Создание окон

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

<html>
<head>
<script language="JavaScript">
function openWin() {
myWin = open("newpage.htm");
}
</script>
</head>
<body>
<form>
<input type="button" value="Открыть новое окно" onClick="openWin()">
</form>
</body>
</html>

В представленном примере в новое окно с помощью метода open() записывается страница newpage.htm.

Заметим, что в отличие от использования атрибута target= (в теге a), здесь вы имеете возможность управлять самим процессом создания окна. Например, вы можете указать, должно ли новое окно иметь строку статуса, панель инструментов или меню. Кроме того вы можете задать размер окна. Например, в следующем скрипте открывается новое окно размером 400×300 пикселов. Оно не имеет ни строки статуса, ни панели инструментов, ни меню.

<html>
<head>
<script language="JavaScript">
function openWin2()
{
myWin = open("page4.htm", "displayWindow",
"width=400,height=300,status=no,toolbar=no,menubar=no");
}
</script>
</head>
<body>
<form>
<input type="button" value="Открыть новое окно" onClick="openWin2()">
</form>
</body>
</html>

Как видите, свойства окна мы формулируем в строке
"width=400,height=300,status=no,toolbar=no,menubar=no".

Обратите внимание, что в этой строке не должно быть символов пробела!

Список свойств окна, которыми вы можете управлять:

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

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

<html>
<script language="JavaScript">
function closeIt()
{
close();
}
</script>
<center>
<form>
<input type=button value="Закрыть окно" onClick="closeIt()">
</form>
</center>
</html>

Если теперь в новом окне вы нажмете кнопку Закрыть окно, то оно будет закрыто.

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

В качестве примера рассмотрим HTML форму с полями ввода имени, адреса и телефона. HTML-документ с результатами заполнения формы будет показан в новом окне браузера.

<html>
<head>
<script language="JavaScript">
function openWin4() {
var inf = "";
myWin = open("", "displayWindow", "width=400,height=200,status=no,toolbar=no,menubar=no")

myWin.document.open() // открыть объект document для последующей печати

// генерировать новый документ
myWin.document.write("<html><head><title>Динамическое создание HTML-документа</title>")
myWin.document.write("<META HTTP-EQUIV='Content-Type' CONTENT='text/html;")
myWin.document.write("charset=windows-1251'></head><body>")
inf = inf+"<ul><li><b>Имя:</b> "+document.myform.yourname.value;
inf = inf+"<p><li><b>Адрес:</b> "+document.myform.youraddr.value;
inf = inf+"<p><li><b>Телефон:</b> "+document.myform.yourphone.value+"</ul>";
myWin.document.write(inf);
myWin.document.write("</body></html>")

myWin.document.close() // закрыть документ на запись(но не само окно!)
}
</script>
</head>
<body>
<form name="myform">
<p><b>Имя:</b> <input type=text length=20 name="yourname">
<p><b>Адрес:</b> <input type=text length=20 name="youraddr">
<p><b>Телефон:</b> <input type=text length=20 name="yourphone">
<input type=button value="Динамическое создание HTML-документа" onClick="openWin4()">
</form>
</body>
</html>

Рассмотрим функцию openWin4(). Очевидно, мы сначала открываем новое окно браузера. Поскольку первый аргумент функции open() — пустая строка (""), то это значит, что мы не желаем в данном случае открывать уже имеющийся html-файл. В данном случае браузер должен средствами JavaScript создать дополнительно новый документ.

В скрипте мы определяем переменную myWin. И с ее помощью можем получать доступ к новому окну. Значение второго аргумента — имя окна (displayWindow) тоже можно задать как пустую строку ("").

После того, как мы открыли окно, наступает очередь открыть для записи объект document. Делается это с помощью команды:

myWin.document.open()

Здесь мы обращаемся к open() — методу объекта document. Однако это совсем не то же самое, что метод open() объекта window! Эта команда не открывает нового окна — она лишь готовит document к предстоящему выводу в него. Кроме того, мы должны поставить перед document.open() приставку myWin, чтобы получить возможность писать в новом окне.
В последующих строках скрипта с помощью вызова document.write() формируется текст нового документа:

myWin.document.write("<html><head><title>Dinamic HTML"</title>)
myWin.document.write("</head><body background='bg.gif'>")
...

Как видно, здесь мы записываем в документ обычные теги языка HTML. То есть мы фактически генерируем разметку HTML! При этом вы можете использовать абсолютно любые теги HTML.

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

myWin.document.close()

В данном примере для открытия нового окна использовался обработчик события onClick(), находящийся в элементе html-формы. Однако, это не единственный вариант размещения onClick(). Например, этот обработчик события можно поместить в тег гиперссылки: