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

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

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

<!—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">

</SCRIPT>
<SCRIPT Language="JavaScript1.4">

</SCRIPT>
<SCRIPT Language="JavaScript1.5">

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

</SCRIPT>
</HEAD>
<BODY bgcolor="#FFFFF0" text="#000000">
<SCRIPT language="JavaScript">
last_update();
</SCRIPT>
</BODY>
</HTML>

Поскольку была использована англоязычная версия 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>

В этом примере использованы стандартные функции 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">

</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 картинка будет неподвижной.

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

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

Обратите внимание на контекст функции 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.

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

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

Оживляем Web-страничку - Часть 2

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