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

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

Результат представлен на рис. 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>

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

Содержание раздела