Оживляем веб-страничку

2004 г.

Оживляем веб-страничку

Олег Никитенко, Издательский Дом "КОМИЗДАТ"

Часть 1

Несколько простых примеров составления сценариев на JavaScript

После прохождения «курса молодого бойца» по оформлению веб-страничек («К+П» N 4–11/2001) у многих читателей, вероятно, появилось желание сделать их более оригинальными. Например, запустить «бегущую строку», запрограммировать реакцию на определенные действия пользователя или просто автоматизировать обновление страницы, чтобы на ней всегда стояло сегодняшнее число или чтобы браузер сам определял дату последнего обновления. А может быть, пускай страница сама дает рекомендации, каким браузером ее лучше просматривать?..

Почему бы и нет? Для этого нужно воспользоваться специальным языком программирования, который будет понятен браузеру. Именно такие возможности и предоставляет «язык сценариев» JavaScript (не путать с Java! Несмотря на созвучие, это разные языки).

Разработчиком JavaScript считается компания Netscape. Сейчас доступно несколько версий этого языка. Обычно каждый новый релиз браузера поддерживает и более свежую версию JavaScript (табл. 1).

Таблица 1. Соответствие между версиями JavaScript и Netscape Navigator

JavaScript Navigator

1.0 2.0

1.1 3.0

1.2 4.0-4.05

1.3 4.06-4.7x

1.4 —

1.5 6.0 Mozilla

По имеющимся данным, оба последних релиза (5.x и 6.0) браузера Opera поддерживают JavaScript не выше версии 1.3. Аналогичная ситуация сложилась и с Internet Explorer 5.

Прежде всего, хотелось бы отметить, что некоторые функции, несмотря на одинаковые названия, работают в разных браузерах по-разному. Поэтому веб-странички, отлаженные, например, в Internet Explorer, в Navigator или Opera, могут выглядеть совсем не так, как того вы хотели, или вообще никак не выглядеть. Некоторые различия наблюдаются даже для разных релизов одного и того же браузера. Для упрощения поставленной задачи мы будем ориентироваться на два браузера: Internet Explorer 5 (стандартная «начинка» подавляющего большинства ПК под управлением Windows 98) и Opera 5 (которому я отдаю предпочтение ввиду скорости работы и суперкомпактности). Одним из преимуществ JavaScript является то, что код выполняется всегда - независимо от того, поддерживает браузер язык Java или нет. Поддержка JavaScript реализована во многих современных браузерах: Internet Explorer, Netscape Navigator, Opera…

К сожалению, JavaScript (как, впрочем, и Java) не лишен недостатков. Основных минусов, на мой взгляд, два.

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

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

Как же работают странички с JavaScript? Структура веб-страницы с JavaScript практически не отличается от страницы без сценариев. Нужно только вставить в определенную область HTML-документа необходимый код. В общем случае структура HTML-страницы может иметь такой вид:

<HTML>
<HEAD>
<TITLE> Заголовок </TITLE>
<SCRIPT language="JavaScript">
function FFF1() {
<!—тело функции 1 -->
}
<!-- ..... -->
function FFFn() {
<!-- тело функции n -->
}
</SCRIPT>
</HEAD>
<BODY>
<!-- тело веб-страницы:-->
<!--обращение к функциям FFF1(),...FFFn() -->
</BODY>
</HTML>

Рассмотрим простейший вариант. Браузер загружает страницу, которая выдает какое-нибудь сообщение (рис. 1). Для этого можно использовать следующий код:

<HTML>
<HEAD>
<TITLE> Приветствие </TITLE>
<BODY>
<!-- Ваш комментарий... -->
<SCRIPT language="JavaScript">
alert('С Днем рождения!')
</SCRIPT>
</HEAD>
</BODY>
</HTML>

В данном случае использована стандартная функция alert. В качестве аргумента ей передается строковая переменная, содержимое которой отображается в отдельном окне. Кстати, в данном случае кавычки в строке <SCRIPT language="JavaScript"> можно опустить и вообще сократить код до минимума, оставив лишь <SCRIPT>.

Строка <SCRIPT language="JavaScript"> выполняет несколько функций. Во-первых, она информирует браузер, что фрагмент кода написан на языке JavaScript, а не на VBScript. Последний поддерживается далеко не всеми браузерами (за все время серфинга я встречал его только на сайте MP3.com).

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

Комментарии внутри скриптов не отличаются от обычного HTML. Началом служит комбинация символов . Однако можно использовать и стиль комментариев, принятый в C++, две косые (//).

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

В нашем примере фрагмент функции можно было бы записать так:

<SCRIPT language="JavaScript">
<!--
alert('С Днем рождения!')
//-->
</SCRIPT>

Данная «добавка» никоим образом не влияет на выполнение сценария. Однако для упрощения все последующие фрагменты кода будут без этих символов.

А теперь вернемся к самой программе. В ходе загрузки нашего HTML-файла откроется дополнительное окно с приветствием «С Днем рождения!» и единственной кнопкой OK. Однако если на страничке используется несколько различных функций, обращающихся то к одной, то к другой подпрограмме, то будет корректнее (и с точки зрения программирования, и для наглядности) использовать именно подпрограммы-функции. В таком случае данный фрагмент кода будет выглядеть немного иначе:

<HTML>
<HEAD>
<TITLE> Приветствие </TITLE>
<SCRIPT language="JavaScript">
function hellotoyou() {
alert('С Днем рождения!');
return true
}
</SCRIPT>
</HEAD>
<BODY>
<SCRIPT language="JavaScript">
<!-- вызов функции приветствия -->
hellotoyou()
</SCRIPT>
</BODY>
</HTML>

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

<BODY>
<P>Для отображения приветствия 
щелкни <A href="javascript:hellotoyou()"> здесь!</A>
</BODY>

Но после окончания работы функции некоторые браузеры (например, Internet Explorer) будут «ругаться», пытаясь загрузить из сети какой-то файл. А вот с Opera и Navigator 6 этого не произойдет (рис. 2).

Этот фрагмент кода можно сделать более корректным с точки зрения IE и Opera, немного изменив содержимое строки в основном теле программы, например, так:

<P>После нажатия появится еще одно окно... щелкни <A href="javascript:void(0);" onClick="hellotoyou();"> здесь!</A>

Теперь программа корректно функционирует и в Internet Explorer 5, и в Opera 5, и в Navigator 6. В более ранних версиях Opera (3.21-3.62) код также работоспособен, но там появляется «лишнее» окно с сообщением javascript execution failed. Впрочем, я думаю, что таким «дефектом» можно пренебречь. А если хотите от него избавиться - просто установите более новый релиз.

Вернемся к оператору return. Сделаем так, чтобы сообщение выводилось в текущем окне. Тогда код примера примет вид:

<HEAD>
<!-- ..... -->
<SCRIPT language="JavaScript">
function hellotoyou() {
return ('С Днем рождения!');
}
</SCRIPT>
</HEAD>
<BODY>
<SCRIPT>
document.write (hellotoyou());
</SCRIPT>
</BODY>

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

Попытаемся изменить код таким образом, чтобы сообщение выводилось не в теле основной программы, а в вызываемой функции. Как это сделать? Очень просто:

<SCRIPT language="JavaScript">
function hellotoyou() {
document.write('С Днем рождения!');
return true;
}
</SCRIPT>
 
 
</HEAD>
<BODY>
<SCRIPT>
hellotoyou();
</SCRIPT>
</BODY>

Стандартный черный текст на белом фоне не очень-то привлекателен. Добавим цвета. Цвета и размер шрифтов, цвет фона и ссылок, а также другие атрибуты достаточно «прописать» в том же операторе document.write(). Например, сделаем черный текст на фоне aquamarine, а отдельные слова приветствия выделим синим (рис. 3). Код будет выглядеть так:

<SCRIPT language="JavaScript">
function hellotoyou() {
document.write('<BODY text="#000000" link="#4040C0"
vlink="#0080FF" alink="#FF0000" bgcolor="#7FFFD4">');
document.write("<FONT face=Arial size=3>");
document.write('С Днем');
document.write("<FONT color=blue><U><B> рождения,</B></U></FONT>, программер!");
document.write("</FONT></BODY>");
return true;
}
</SCRIPT>

Для того чтобы иметь возможность использовать кавычки в тексте, выводимом через функцию document.write(), можно поступить так. Общее «обрамление» сделать с помощью двойных кавычек, а апострофы и т. п. внутри текста - одинарными или наоборот. Хотя можно использовать и зарезервированные условные обозначения некоторых символов. Так, двойным кавычкам соответствует комбинация (так называемое внутреннее представление ESC-кода) \u0022, одинарным - \u0027, обратной косой черте - \u005c. К сожалению, при просмотре страничек в Opera такой вариант «не проходит». Чтобы удовлетворить одновременно оба браузера, можно использовать следующие ESC-последовательности: соответственно \", \' и \. Для двойных кавычек во всех трех браузерах можно использовать символ ". Эти рекомендации справедливы и для Navigator 6.2.

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

<SCRIPT language="JavaSсrit"> вместо JavaSсript ,

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

Раз окно, два окно…

Теперь попробуем сделать собственное окно с приветствием. Размер и содержимое придумаем сами. Передвинем сообщение немного вниз - на 50 пикселей (topMargin=50) - и «отцентрируем». Для этого напишем следующий код:

<BODY text="#000000" bgcolor="#7FFFD4" topmargin=50 marginwidth=10 marginheight=0>
<A name="_top"></A>
<CENTER>
<SCRIPT language="JavaScript">

</SCRIPT>
<BR>
<FORM name="ss" method=post action="programr.htm" target="top_">
<INPUT type="hidden" name="doc_number" value="" ></input>
</FORM>
<PRE class="left">
<FONT size=3>
С Днем рождения, <A href="javascript:OpenWin()"><U><B>программер!</B></U></A>
</FONT>
</PRE>
</BODY>

При загрузке странички появится уже знакомое нам приветствие. Выделение слова «программер» намекает посетителю на то, что, если по нему щелкнуть, откроется второе окно. Например, с пояснением для новичков, что оно означает… О назначении функции OpenWin(), надеюсь, вы и сами догадались. Правильно, она использует стандартную функцию window.open() для создания и открытия окна шириной 500 и высотой 400 пикселей. Для удобства и «сжатия» этого окна мы отключили отображение нижней строки состояния, где обычно выводятся сообщения о загрузке страницы, а также окно с навигационными кнопками. Подробнее о параметрах страницы речь пойдет позже.

Если щелкнуть на слове «программер», откроется файл programr.htm. Его HTML-код может быть, например, таким:

<HTML>
<HEAD>
<TITLE> Словарик </TITLE>
</HEAD>
<BODY text="#000000" bgcolor="#FFFFFF">
<P> <U><B>Программер</B></U> (жарг.) - программист.
</BODY>
</HTML>

Правда, здесь есть один недостаток. Для того чтобы закрыть «словарь», необходимо зайти в меню и выбрать команду Файл * Закрыть. Согласитесь, это довольно неудобно. Можно ли автоматизировать этот процесс? Конечно. Для этого нужно создать, например, радиокнопку, которая будет вызывать соответствующую функцию (которая называется window.close()):

<BODY text="#000000" bgcolor="#FFFFFF">
<P> <U><B>Программер</B></U> (жарг.) - программист.
<CENTER><FORM>
<INPUT type="button" value="Закрыть" onClick="window.close()">
</FORM></CENTER>
<NOSCRIPT>
<I>Используйте кнопку "Возврат"/"BACK" вашего браузера для возврата на предыдущую страницу.</I>
</NOSCRIPT><BR clear="all">
</BODY>

Вместо функции window.close() можно использовать self.close().Обе отлично справляются со своими обязанностями и в Internet Explorer, и в Opera. Кстати, для Opera можно написать просто close().

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

<HTML>
<HEAD>
<TITLE> Словарик с кнопкой закрытия окна. Вариант с запросом. </TITLE>
<SCRIPT language="JavaScript">

</SCRIPT>
</HEAD>
<BODY text="#000000" bgcolor="#FFFFFF">
<P> <U><B>Программер</B></U> (жарг.) — программист.
<CENTER><FORM>
<INPUT type="button" value="Закрыть" onClick="OnExit()">
</FORM></CENTER>
<NOSCRIPT>
<I>Используйте кнопку "Возврат"/"BACK" вашего браузера для возврата на предыдущую страницу.</I>
</NOSCRIPT><BR clear="all">
</HEAD>
</BODY>
</HTML>

Для обработки запроса здесь используется стандартная функция confirm(). За вызов функции-обработчика запроса OnExit() отвечает оператор onClick.

А можно ли организовать навигацию по веб-страницам - например, возврат на предыдущую страницу - без использования стандартных кнопок браузера? Конечно. Для этого достаточно «повесить» на каждую страничку соответствующую кнопку перехода:

<CENTER><FORM>
<INPUT type="button" value="Возврат" onClick="history.go(-1)">
</FORM></CENTER>
<NOSCRIPT>
<I>Используйте кнопку "Возврат"/"BACK" вашего браузера для возврата на предыдущую страницу.</I>
</NOSCRIPT><BR clear="all">

Вместо оператора history.go(-1) можно использовать history.back(1). Результат будет одинаковым и в IE, и в Opera.

Теперь, похоже, все в порядке. Кстати, что означает текст между тегами <NOSCRIPT> и </NOSCRIPT>? Дело в том, что некоторые браузеры не поддерживают JavaScript и, следовательно, могут не отобразить нашу кнопку. И это относится не к какой-то экзотике, а к обычным браузерам. Например, если отключить выполнение JavaScript, указанная строка не будет видна в старой версии 3.x и в новой 5.x Internet Explorer. В таком случае нужно дать пользователю «руководство к действию».

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

Таблица 2.

Параметр Значение Описание

width 500 ширина окна в пикселях

height 400 высота окна в пикселях

status no не показывать строку состояния, в которой отображаются сообщения о загрузке страницы

toolbar no отключить панель навигационных кнопок. Этот режим работает в IE5 и Navigator 6.2, но не в Opera, так как в этом браузере открывается новое окно, а не копия старого (как в IE)
menubar 0 не отображать строку меню. Как и предыдущий параметр, работает в IE и Navigator (так как открывается еще одна копия браузера), однако в Opera (3 и 5) эффекта не дает
scrollbars yes отображать полосы прокрутки

resizable yes разрешение изменять размер окна. В Opera эффекта не дает

location yes показывать URL, по которому обращается браузер (в т. ч. локальные имена файлов). Имеет смысл использовать в IE и Opera версии не ниже 5, но не в Opera 3 (там адресная строка всегда доступна)
directories yes отображать в строке адреса меню ссылок (только для Internet Explorer и Navigator)

Теперь немного изменим текст программы, демонстрирующей открытие окна. Пусть текст приветствия будет доступен только при загрузке страницы с отключенной графикой. Если же графика включена, на месте приветствия будет небольшая картинка (назовем ее abc.gif), по которой нужно будет щелкнуть для просмотра «словарика».

<HTML>
<HEAD>
<TITLE> Приветствие </TITLE>
<SCRIPT language="JavaScript">

</SCRIPT>
</HEAD>
<BODY bgcolor="#FFFFF0" marginwidth=0 marginheight=0 topmargin=0 leftmargin=0 text="#000000" link="#000000">
<A href="#" onClick="mw_open()";>
<NOSCRIPT>
<A href="program2.htm" target="_new">
</NOSCRIPT>
<IMG src="image/abc.gif" width=80 height=50 border=0
vspace=0 hsapce=0 alt="С Днем рождения, программер!">
</A>
<BR> <BR>
</SCRIPT>
</BODY>
</HTML>

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

Как это сделать? Добавить к тегу <A> два атрибута: onMouseOver и onMouseOut:

<HTML>
<HEAD>
<TITLE> Подсказка для "несмышленой" мышки </TITLE>
<BODY>
<P>С днем рождения,
<A anchor definition
onMouseOver="self.status='поздравления с Yahoo';
return true;"
onMouseOut="self.status='';
return true;"
href="http://www.yahoo.com">
<U>программер!</U></A>
<P>Еще раз с днем рождения,
<A anchor definition
onMouseOver="self.status='поздравления с AltaVista'
return true;"
onMouseOut="self.status='';
return true;"
href="http://www.altavista.com">
<U>программер!</U></A>
<P>И еще раз с днем рождения,
<A anchor definition
onMouseOver="self.status='поздравления с Рамблера';
return true;"
onMouseOut="self.status='';
return true;" href="http://www.rambler.ru">
<U>программер!</U></A>
</HEAD>
</BODY>
</HTML>

В self.status записывается текст. onMouseOver работает, когда курсор мыши попадает на URL, а onMouseOut очищает строку после того, как курсор покидает ссылку.

Подводим курсор к слову «программер» и… вместо URL браузер сообщает о новых поздравлениях от Yahoo, Altavist'ы и Рамблера!

Существует целый набор событий, которые можно связать со сценариями. Кроме упоминавшихся onClick, onMouseOver и onMouseOut, есть также onLoad, onChange, onUnload, onBlur, onReset, onFocus, onSubmit и др. Попробуйте поэкспериментировать с ними самостоятельно. Мы же перейдем к работе с параметрами в JavaScript.

Параметры в пользовательских функциях

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

Код может быть, например, таким:

<HTML>
<HEAD>
<TITLE> Приветствие в отдельном окне </TITLE>
<SCRIPT language="JavaScript">

}
else {
frame1.document.write ('<P>неизвестный параметр!');

}
document.write('<P>Этот текст в первом окне!</P>');
frame1.document.write('<P>А этот текст во втором (новом) окне!</P>');
frame1.document.write('</body></html>');
frame1.document.close();
frame1.focus();
}
//-->
</SCRIPT>
</HEAD>
<BODY bgcolor="#FFFFF0" marginwidth=0 marginheight=0 topmargin=0
leftmargin=0 text="#000000" link="#000000">
<A href="#" onClick="openWindow2 (500, 400, 'swf', 'IMAGE/ABC.GIF',
120, 100, 'Окно 2', 'С днем рождения, программер!', 0, 0)";>
<NOSCRIPT>
<A href="program2.htm" target="_new">
</NOSCRIPT>
<img src="image/abc.gif" width=80 height=50 border=0
vspace=0 hsapce=0 alt "С Днем рождения, программер!">
</A>
<BR> <BR>
</SCRIPT>
</BODY>
</HTML>

По щелчку на картинке (или надписи, если графика отключена) вызывается функция openWindow2(), которая формирует новое окно размером 500 * 400, открывает его и печатает текстовое сообщение. В качестве параметров мы передаем в подпрограмму: ширину и высоту окна в пикселях; параметр swf, в зависимости от значения которого выполняется код по одному из определенных в программе условий; название картинки (с указанием пути), которая появится в новом окне (abc.gif); размеры картинки (мы растянем ее до 120 * 100); название открываемого окна (Окно 2); текст, который будет отображаться при отключенной графике вместо картинки (С днем рождения, программер!); начальные смещения нового окна (0,0).

Оператор сравнения == «решает», какой код выполнять. В нашем случае напечатается строка «обработка параметра...».

Конечно, не помешало бы добавить кнопку закрытия нового окна. Для этого можно воспользоваться рассмотренным выше кодом. Просто вставьте его в frame1.document.write() и разместите в функции openWindow2 между строками frame1.document.write ('<P>А этот текст во втором (новом) окне!'); и frame1.document.write ('</body></html>');. Сам код будет выглядеть так

frame1.document.write ('<CENTER> <FORM> <INPUT type="button" value="закрыть" onClick="window.close()"> </FORM> </CENTER>');
frame1.document.write('<NOSCRIPT>');
frame1.document.write ('<I>Используйте кнопку "Возврат"/"BACK" вашего браузера для возврата на предыдущую страницу.</I>’);
frame1.document.write ('</NOSCRIPT> <BR clear="all">');

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

<HTML>
<HEAD>
<SCRIPT language="JavaScript">

return (z1+z2); // 6305
}
//-->
</SCRIPT>
</HEAD>
<BODY bgcolor="#FFFFF0" text="#000000">
<SCRIPT language="JavaScript">
var res = calculate_something(10,20,30)*10;
document.write ("<P> Результат: " + res); // печатаем вычисленное значение (63050)
</SCRIPT>
</BODY>
</HTML>

Как видим, код довольно простой. Функции передаются три числа и вычисляется некоторое новое значение, которое возвращается вызывающей программе. Результат присваивается переменной res и выводится на экран. При желании вы можете поэкспериментировать с логическими и символьными переменными. А мы переходим к следующему разделу.

Часть 2

Полезные функции и скрипты

Помните, мы говорили о том, что браузеры могут проверять версию языка JavaScript? И в зависимости от результатов выполнять тот или иной код. Когда это нужно? Например, в последней версии JavaScript появились новые функции, и вы хотели бы использовать их на своей страничке. Но во всех ли браузерах это будет работать? Для этого достаточно проверить, поддерживает ли данный браузер соответствующую версию JavaScript. Это можно сделать, например, с помощью такого кода:

<!-- ..... -->
<!-- По умолчанию принимаем, что минимальная версия,-->
<!--которая поддерживается браузером,-->
<!-- — это JavaScript 1.0. -->
<!—Begin
	jsver = "1.0";
// End -->
</SCRIPT>
<SCRIPT LANGUAGE="JavaScript1.1">
<!—Begin
	jsver = "1.1";
// End -->
</SCRIPT>
<SCRIPT Language="JavaScript1.2">
<!—Begin
	jsver = "1.2";
// End -->
</SCRIPT>
<SCRIPT Language="JavaScript1.3">
<!-- Begin
	jsver = "1.3";
// End -->
</SCRIPT>
<SCRIPT Language="JavaScript1.4">
<!-- Begin
	jsver = "1.4";
// End -->
</SCRIPT>
<SCRIPT Language="JavaScript1.5">
<!-- Begin
	jsver = "1.5";
// End -->
</SCRIPT>
<!-- ..... -->
<!-- проверить версию визуально... -->
document.write ("Javascript Version: " + jsver + "");
<!-- проверить версию программно... -->
<!-- ..... -->

Здесь есть, правда, один недостаток. В старых версиях Opera (3.2x) приведенный код безболезненно выполняется до конца, в результате чего переменная jsver получает значение 1.5. Остается лишь порекомендовать пользователям обновить свой софт…

Полезным будет также и код для определения платформы:

<HTML>
<HEAD>
<TITLE>Определение используемой платформы.</TITLE>
<SCRIPT language=JavaScript>
 function test_os() {
  var isMac, isPC, machine;
  if (parseInt(navigator.appVersion)>=4) {
   isMac = (navigator.platform == "MacPPC");
   isPC = (navigator.platform == "Win32");
   if (isMac)
   machine="Mac";
   if(isPC)
   machine="Win"
  }
  document.write("Вы используете платформу: " + machine);
 }
</SCRIPT>
</HEAD>
<BODY>
<SCRIPT language=JavaScript>
 test_os()
</SCRIPT>
</BODY>
</HTML>

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

<HTML>
<HEAD>
<TITLE>Определение версии ОС. 
Расширенный вариант.</TITLE>
<SCRIPT language=JavaScript>
 function test_os() {
  if ((navigator.userAgent.indexOf ('Win') != -1) &&
    (navigator.userAgent.indexOf('98') != -1))
    { var OpSys = "Windows 98"; }
  else if((navigator.userAgent.indexOf('Win') != -1) &&
    (navigator.userAgent.indexOf('95') != -1))
    { var OpSys = "Windows 95"; }
  else if(navigator.appVersion.indexOf("16") !=-1)
   { var OpSys = "Windows 3.1"; }
  else if (navigator.appVersion.indexOf ("NT") !=-1)
   { var OpSys= "Windows NT"; } 
  else if (navigator.appVersion.indexOf ("Linux") !=-1)
   { var OpSys = "Linux"; } 
  else if (navigator.userAgent.indexOf ('Mac') != -1)
   { var OpSys = "Macintosh"; }
  else { var OpSys = "other"; }
   return OpSys;
 }
</SCRIPT>
</HEAD>
<BODY>
<SCRIPT language=JavaScript>
 var OpSys = test_os();
 document.write("Вы используете ОС: " + OpSys);
</SCRIPT>
</BODY>
</HTML>

К сожалению, в версиях Opera 3.2x оба варианта программы работать не будут. Придется вам подумать самостоятельно, как решить эту проблему.

На следующем примере показано, как определить версию браузера пользователя. Вам наверняка попадались сайты с рекомендациями просматривать оные только в Navigator и/или IE версии не ниже n.nn. В противном случае сайт вам покажут с ограничениями или вообще не покажут. Для определения версии браузера в начале кода странички обычно помещается специальный скрипт. Например, такой:

К сожалению, и здесь не обошлось без «подводных камней». Например, последний релиз Navigator 6.2.1 идентифицируется как Mozilla/5.0. Пришлось пойти на хитрость, объединив версии 5 и 6 в одном операторе document.write("Navigator 5 или выше (в т.ч. 6.2+). А в Opera, начиная с 5-го релиза, пользователь вообще может самостоятельно указывать, как следует идентифицировать этот браузер (как Opera, Navigator или Internet Explorer). Дело в том, что многие сайты «не признают» Opera, вот и приходится «притворяться» Navigator или IE.

А теперь допустим, что у нас есть несколько страниц, размещенных в интернете, и на каждую из них мы хотим ставить дату последнего обновления. Делать это вручную? Нет уж, увольте… Достаточно «повесить» на страничку небольшой код, который бы информировал о последних изменениях. Например, такой:

<HTML>
<HEAD>
<TITLE> Последнее обновление... 
              или не последнее? </TITLE>
<SCRIPT language="JavaScript">
<!--
 function last_update() {
  document.write ("<P>Последний раз страничка 
   обновлялась ... " + document.lastModified);
	}
//-->
</SCRIPT>
</HEAD>
<BODY bgcolor="#FFFFF0" text="#000000">
<SCRIPT language="JavaScript">
	last_update();
</SCRIPT>
</BODY>
</HTML>

Рис. 5. Автоматическое проставление даты последнего обновления страницы Результат представлен на рис. 5. Поскольку была использована англоязычная версия Navigator 6.2, дата обновления странички также проставлена на английском.

Обратите внимание, что функция document.lastModified регистрозависима! Если по ошибке поставить в названии функции прописные буквы, код работать не будет.

Можно добавить на веб-страницу и другую полезную информацию, например, о текущей дате или дне недели (рис. 6). Рассмотрим пример такого кода, а заодно попытаемся его оптимизировать:

<HTML>
<HEAD>
<TITLE> Текущая дата на страничке </TITLE>
</HEAD>
<SCRIPT LANGUAGE="JavaScript">
 function cur_date() {
  var day = "";
  var month = "";
  var myweekday = "";
  var year = "";
  mydate = new Date();
  myday = mydate.getDay();
  mymonth = mydate.getMonth();
  myweekday = mydate.getDate();
  weekday = myweekday;
  myyear = mydate.getYear();
  year = myyear
  if (myday == 0)
   day = " Воскресенье, " 
  else if (myday == 1)
   day = " Понедельник, "
  else if ………
  else if(myday == 6)
   day = " Суббота, "
  if (mymonth == 0)
   month = "Январь "
  else if (mymonth ==1)
   month = "Февраль "
  else if ………
  else if (mymonth ==11)
   month = "Декабрь "
  if ((navigator.appName == "Microsoft Internet 
       Explorer") && (year < 2000))
   year="19" + year;
  if (navigator.appName == "Navigator")
   year=1900 + year;
  return ("<FONT face=Verdana size=2 color=BLUE>
         Сегодня ... " + day + month + myweekday + ", 
         " + year + "</FONT>")
 }
</SCRIPT>
<BODY bgcolor="#FFFFF0" text="#000000">
<H3> С днем рождения, программер!</H3>
<SCRIPT language="JavaScript">
	document.write (cur_date());
</SCRIPT>
</BODY>
</HTML>

Рис. 6. Вывод на страницу текущей даты В этом примере использованы стандартные функции getDay(), getMonth() и getDate(), возвращающие, соответственно, номер дня недели, месяца и дату. Специфика их работы заключается в том, что отсчет ведется от нуля, а отсчет дней недели — еще и от воскресенья. Функция getYear() возвращает год после 1900.

Длинную и нудную конструкцию if … else можно заменить оператором switch:

switch (myday) {
	case 0: {day = "Воскресенье"; break;}
	………
	case 6: {day = "Суббота"; break;}
	default: 
}
switch (mymonth) {
case 0: {month = "Январь"; break;}
………
case 11: {month = "Декабрь"; break;}
default: 
}
<!—..… -->
return ("<FONT face=Verdana size=2 color=BLUE>
	Сегодня ... " + day + ", " + month + " " +
		myweekday + ", " + year + "</FONT>")

Все равно мы никуда не делись от длинного перечисления. Можно ли еще ужать код? Да, если воспользоваться массивом. Внесем небольшие изменения и получим следующую программу, которая выполняет те же функции: См. пример.

Код стал куда компактнее. Если убрать комментарии, то, по сравнению с первым вариантом, программа «похудела» более чем на 430 байт.

Тот, кто знаком с языком C, наверняка спросит: нельзя ли присвоить элементам массива значения сразу при объявлении? И правда, напрашивается решение вроде:

days[] = {" ", "Воскресенье", "Понедельник", ...
        ... "Суббота"};

Да, нечто подобное можно сделать:

function cur_date() {
 // в обоих массивах нулевой элемент не используется
 var months = new Array(" ", "Январь", ... 
                    ... "Декабрь"); // массив месяцев
 var days = new Array(" ", "Воскресенье", ... 
                ... "Суббота"); // массив дней недели
 <!—..… -->
}

Теперь добавим информацию о текущем времени. Изменения в программе сводятся к дополнительной функции (назовем ее cur_time()) и изменении оператора вывода в основном теле программы:

function cur_time() {
 var now = new Date();
 var hours = now.getHours();
 var minutes = now.getMinutes();
 var seconds = now.getSeconds()
 var timeValue = "" + ((hours >12) ? hours -12 :hours)
 if (timeValue == "0") timeValue = 12;
 timeValue += ((minutes < 10) ? ":0" : ":") + minutes
 timeValue += ((seconds < 10) ? ":0" : ":") + seconds
 timeValue += (hours >= 12) ? " P.M." : " A.M."
 return (timeValue);
}
<!-- ... -->
<BODY …>
<SCRIPT language="JavaScript">
 document.write (cur_date() + "<P>Время: " + cur_time());
</SCRIPT>

Как и в описанном выше случае, здесь используются стандартные функции getHours(), getMinutes() и getSeconds(), которые возвращают, соответственно, часы от 0 до 23, минуты от 0 до 59 и секунды от 0 до 59.

Те, кто проверяет работу примера в Opera 5, могут заметить, что год отображается довольно странно. Дело в том, что, начиная с пятой версии, в Опере предусмотрено несколько вариантов идентификации этого браузера: как Opera (год 102), как MSIE5 (год 19102) и как браузер семейства Mozilla. В последнем случае год отображается правильно.

Наверняка вам привычнее воспринимать время в «нашем» формате (например, 23:50), а не в английском (11:50 P.M.). Для этого достаточно убрать из кода «лишние» операторы:

function cur_time() {
 var now = new Date();
 var hours = now.getHours();
 var minutes = now.getMinutes();
 var seconds = now.getSeconds()
 var timeValue = "" + hours;
 var timeValue = "" + hours;
 timeValue += ((minutes < 10) ? ":0" : ":") + minutes
 timeValue += ((seconds < 10) ? ":0" : ":") + seconds
 return (timeValue);
}

Теперь попробуем поместить на веб-страничку «бегущую строку». Это можно сделать, например, так:

<HTML>
<HEAD>
<TITLE> Движущееся приветствие в строке status 
браузера </TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!--
 function scrollit_r2l(seed) {
  var m1 = " С днем рождения, программер! ";
  var m2 = " Вас приветствует сайт www.yahoo.com ;-) ";
  var msg=m1+m2;
  var out = " ";
  var c = 1;
  if (seed > 100) {
   seed--;
   var cmd="scrollit_r2l(" + seed + ")";
   timerTwo=window.setTimeout(cmd,100);
  }
  else if (seed <= 100 && seed > 0) {
   for (c=0 ; c < seed ; c++) {
    out+=" ";
   }
   out+=msg;
   seed--;
   var cmd="scrollit_r2l(" + seed + ")";
   window.status=out;
   timerTwo=window.setTimeout(cmd,100);
  }
  else if (seed <= 0) {
   if (-seed < msg.length) {
    out+=msg.substring(-seed,msg.length);
    seed--;
    var cmd="scrollit_r2l(" + seed + ")";
    window.status=out;
    timerTwo=window.setTimeout (cmd,100);
   }
   else {
    window.status=" ";
    timerTwo=window.setTimeout ("scrollit_r2l(100)",75);
   }
  }
 }
//---->
</SCRIPT>
</HEAD>
<BODY background="" bgcolor=white text=#000000 
link=#0000FF vlink=#8000FF alink=#FF0000 onLoad=
"timerONE=window.setTimeout('scrollit_r2l(100)',500);">
<BASEFONT size=3>
<CENTER>
<H3> С днем рождения, программер!</H3>
</CENTER>
<P>
<SMALL>Если вы используете IE5, Opera 3.x/5 или 
Navigator 6, обратите внимание на строку, где 
отображается состояние загрузки странички ;-)
<BR><HR>
</BODY>
</HTML>

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

<HTML>
<HEAD>
<TITLE> Движущееся приветствие в 
окне браузера.</TITLE>
</HEAD>
<BODY background="" bgcolor=white text=#000000 
link=#0000FF vlink=#8000FF alink=#FF0000>
<TABLE border=1 cellpadding=8 width=468 
bordercolor=#B4B8BE>
<TR>
<TD bgcolor=#E8EDF3 valign=top align=CENTER>
<FONT size=2 color=#77A0D7><b>
<MARQUEE width=100% direction=left behavior=scroll 
loop=infinite scrollamount=2 scrolldelay=20>
<A href=http://www.yahoo.com target=_blank>
С днем рождения, программер! 
Вас приветствует сайт www.yahoo.com ;-)
</A></MARQUEE></B></FONT>
</TD></TR></TABLE>
</BODY>
</HTML>

К сожалению, такая программа корректно выполняется только в среде Internet Explorer. В Navigator 6 и в Opera картинка будет неподвижной.

Вам, конечно, хотелось бы попробовать применить скрипты на практике. Нет ничего проще. Рассмотрим программу, которая выполняет некоторые вычисления и отображает их в окне браузера:

См. пример использование функции для расчета параметров

Рис. 7. Скрипты в действии Обратите внимание на контекст функции calc_my_val(). Если вы хотите, чтобы программа корректно работала не только с последними релизами Navigator, IE и Opera, но и с более ранними версиями (например, Opera 3.x), то начало и конец блока with (Math) следует убрать.

Аналогичное замечание относится и к строке

document.form.sqrt_val.value=sqrt_val_.

Opera 3 «не понимает» промежуточных значений, совпадающих с именами полей и др. (в нашем случае это sqrt_val). Пришлось заменить эту переменную на sqrt_val_. Результат (для примера выбрано число 50) представлен на рис. 7.

А как же с проверкой вводимых данных? Можно сделать и ее. Рассмотрим это на другом примере - вводе телефонного номера (рис. 8):

Рис. 8. Ввод телефонного номера с проверкой корректности

Для проверки введенных данных используется функция valF(). Из нее, в свою очередь, вызывается функция isNum(), где, собственно, и проверяются вводимые числа. Как ясно из текста программы, максимальная длина полей (код региона и номер телефона) составляет, соответственно, 3 и 7 цифр. Если поля остаются пустыми или пользователь вводит вместо цифр хотя бы один символ, программа выдает сообщение об ошибке.