Отправляет email-рассылки с помощью сервиса Sendsay

Лучшие статьи о Компьютерах и Программах

Подписаться Бесплатная «Серебряная» новостная рассылка . Подписчиков 4.858 RSS
←   Август 2002   →
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31


За последние 60 дней ни разу не выходила


Сайт рассылки: http://www.webfile.ru/
Открыта: 28-01-2002
Адрес автора: comp.paper.bestarticles-owner@subscribe.ru

Автор
Фёдор Сорекс

Статистика

4.858 подписчиков
0 за неделю
←   Все выпуски   →

Лучшие статьи журнала ╚Компьютеры+Программы╩


Информационный Канал Subscribe.Ru

Олег НИКИТЕНКО,
fm@comizdat.com

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

(Окончание. Начало в предыдущем выпуске)

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

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

<HTML>
<HEAD>
<TITLE> Приветствие в отдельном окне </TITLE>
<SCRIPT language="JavaScript">
<!--
 function openWindow2 (WindWidth, WindHeight,
  imageType, imageName, imageWidth, imageHeight,
  altwindname, alttext, posLeft, posTop) {
  var frame1 = window.open ("", "frame1",
  "width="+WindWidth+", height="+WindHeight+",
  copyhistory=0, directories=0,
  height=500, location=yes, menubar=0,
  scrollbars=yes, status=0, toolbar=0,
  left="+posLeft+", top="+posTop);
  document.write
   ('<P>Подпрограмма вызвана!</P>');
  frame1.document.open();
  frame1.document.write ('<html>
  <title>'+altwindname+'</title>
  <body bgcolor="BLUE" text="YELLOW" leftmargin="0"
  topmargin="0" marginheight="0" marginwidth="0"
  onReset="self.close()">');
  frame1.document.write ('<img src=\"'+imageName+'\"
  width='+imageWidth+' height='+imageHeight+'border=0
  vspace=0 hsapce=0 alt=\"'+alttext+'\">');
  if (imageType == "swf") {
   frame1.document.write('<P>обработка параметра...
   '+imageType);
   <!-- ... выполнение действий, определенных
   пользователем -->
  }
   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(), которая формирует новое окно размером 500x400, открывает его и печатает текстовое сообщение. В качестве параметров мы передаем в подпрограмму: ширину и высоту окна в пикселях; параметр swf, в зависимости от значения которого выполняется код по одному из определенных в программе условий; название картинки (с указанием пути), которая появится в новом окне (abc.gif); размеры картинки (мы растянем ее до 120x100); название открываемого окна (Окно 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">
<!--
 function calculate_something(a,b,c) {
  var z1 = (a+b+c)*5; // 300
  var z2 = (a*b*c)+5; // 6005
  <!-- ... выполнение действий, определенных пользователем -->
  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 и выводится на экран. При желании вы можете поэкспериментировать с логическими и символьными переменными. А мы переходим к следующему разделу.

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

Помните, мы говорили о том, что браузеры могут проверять версию языка 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. В противном случае сайт вам покажут с ограничениями или вообще не покажут. Для определения версии браузера в начале кода странички обычно помещается специальный скрипт. Например, такой: 

<HTML>
<HEAD>
<TITLE> Определение версии браузера</TITLE>
<SCRIPT language=JavaScript>
 function check_browser() {
  var version = 0;
  if (navigator.userAgent.indexOf ("MSIE 5") != -1)
   document.write ("Internet Explorer 5.0");
  else if (navigator.userAgent.indexOf("MSIE 4") != -1)
   document.write ("Internet Explorer 3.0!");
  else if (navigator.userAgent.indexOf ("MSIE 4.5") != -1)
   document.write ("Microsoft Internet Explorer 4.5
    for Macintosh");
  else if (navigator.userAgent.indexOf ("Opera") != -1)
   document.write("Opera");
  else if (navigator.userAgent.indexOf ("Mozilla/5.0")
   != -1)
    document.write ("Navigator 5 или выше
     (в т.ч. 6.2+)");
  else if (navigator.userAgent.indexOf
   ("Mozilla/4.7") != -1)
    document.write ("Navigator 4.7");
  else if ………
  else version = 8;
   return true;
 }
// -->
</SCRIPT>
</HEAD>
<BODY>
<SCRIPT language=JavaScript>
 document.write("Вы используете браузер: ");
 check_browser();
</SCRIPT>
</BODY>
</HTML>

К сожалению, и здесь не обошлось без "подводных камней". Например, последний релиз 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>

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

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

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

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

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

<HTML>
<HEAD>
<TITLE> Текущая дата на страничке. Оптимизация 2. </TITLE>
</HEAD>
<SCRIPT LANGUAGE="JavaScript">
 function cur_date() {
  var months = new Array(13); // массив месяцев
  var days = new Array(8); // массив дней недели
  // в обоих массивах нулевой элемент не используется
  months[1]="Январь"; … months[12]="Декабрь";
  days[1]="Воскресенье"; … days[7]="Суббота";
  var time=new Date();
  var lmonth=months[time.getMonth() + 1];
  var ldate=days[time.getDay() + 1];
  var date=time.getDate();
  var year=time.getYear();
  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>
   Сегодня ... " + ldate + "," + lmonth + "
    " + date + ", " + year);
 }
</SCRIPT>
<BODY bgcolor="#FFFFF0" text="#000000">
<H3> С днем рождения, программер!</H3>
<SCRIPT language="JavaScript">
 document.write(cur_date());
</SCRIPT>
</BODY>
</HTML>

Код стал куда компактнее. Если убрать комментарии, то по сравнению с первым вариантом программа "похудела" более чем на 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 картинка будет неподвижной. Вам, конечно, хотелось бы попробовать применить скрипты на практике. Нет ничего проще. Рассмотрим программу, которая выполняет некоторые вычисления и отображает их в окне браузера: 

<HTML>
<HEAD>
<TITLE> Использование функции для расчета параметров
 в интерактивном режиме.</TITLE>
</HEAD>
<BODY>
<CENTER><FONT size=+4>Угадай число ;-)</FONT>
<HR width="100%"></CENTER>
<CENTER><TABLE>
<TR>
<TD>Загаданное программой число - целое,</TD>
</TR>
<TR>
<TD>находится в интервале от 10 до 1000000.</TD>
</TR>
<TR>
<TD>В случае угадывания программа сообщит об этом ;-)</TD>
</TR>
<TR>
<TD>Одновременно программа вычисляет и отображает квадрат
 и куб числа, которое вы ввели.</TD>
</TR>
</TABLE>
<I>Copyright © 2002 by Oleg Nikitenko.</I>
</CENTER>
<CENTER>
<HR width="100%"></CENTER>
<SCRIPT language="Javascript">
<!--
 function calc_my_val() {
 // Расчет квадрата и куба числа
  var kilos=document.form.my_val.value
  with (Math) { // убрать, если планируется
   // использовать Opera 3.x!
  jj = kilos;
  sqrt_val_ = jj*jj;
  kub_val = jj*jj*jj
  } // убрать, если планируется
     // использовать Opera 3.x!
  document.form.sqrt_val.value=sqrt_val_; 
  // эта строка в Opera 3.x тоже работать не будет
  document.form.kub.value=kub_val
 }
 function check_val() {
// Проверка введенного числа
  var kilos=document.form.my_val.value
  if (kilos==50) {
   document.form.sqrt_val.value='Угадал!';
   document.form.kub.value='Угадал!'
  }
  else {
   document.form.sqrt_val.value='Не угадал!';
   document.form.kub.value='Не угадал!'
  }
 }
// -->
</SCRIPT>
<FORM name="form">
<TABLE>
<TR>
<TD>Введите число:</TD>
<TD><INPUT type="text" name="my_val"></TD>
<TD><INPUT type="button" OnClick="check_val()"
 value="Предлагаю такой вариант!"></TD>
</TR>
<TR>
<TD><FONT size=2><U>Для расчета
щелкни кнопку справа:</U></FONT</TD>
<TD><FONT size=2><U>
Для угадывания - другую кнопку ;-)</U></FONT></TD>
<TD><INPUT type="button" OnClick="calc_my_val()"
 value="Рассчитать квадрат и куб числа!"></TD>
</TR>
<TR>
<TD><B>Квадрат числа:</B></TD>
<TD><INPUT type="text" name="sqrt_val"></TD>
</TR>
<TR>
<TD><B>Куб числа:</B></TD>
<TD><INPUT TYPE="text" NAME="kub"></TD>
</TR>
</TABLE>
</FORM>
</BODY>
</HTML>

Обратите внимание на контекст функции calc_my_val(). Если вы хотите, чтобы программа корректно работала не только с последними релизами Navigator, IE и Opera, но и с более ранними версиями (например, Opera 3.x), то начало и конец блока with (Math) следует убрать. Аналогичное замечание относится и к строке document.form.sqrt_val.value=sqrt_val_. Opera 3 "не понимает" промежуточные значения, совпадающие с именами полей и др. (в нашем случае это sqrt_val). Пришлось заменить эту переменную на sqrt_val_.

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

<HTML>
<HEAD>
<TITLE>Проверка значений заполняемых полей.</TITLE>
<SCRIPT language="javaScript">
<!--
 function valF() {
  formObj = document.WhatAreRates;
  if (formObj.txtNPA.value ==
   ""||!isNum(formObj.txtNPA.value)) {
    alert ("Неверный код города!
     Попытайтесь еще раз.");
    formObj.txtNPA.focus();
    return false;
  }
  if (formObj.txtNXX.value ==
   ""||!isNum(formObj.txtNXX.value)) {
    alert ("Неверный номер телефона!
     Попытайтесь еще раз");
    formObj.txtNXX.focus();
    return false;
  }
  return true;
 } //EOF valF
 function isNum(passedVal) {
  for (i=0; i<passedVal.length; i++) {
   if (passedVal.charAt(i) < "0") return false
   if (passedVal.charAt(i) > "9") return false
  }
  return true
 }//EOF isNum
//-->
</SCRIPT>
</HEAD>
<BODY bgcolor="#FFFFFF">
<FORM name="WhatAreRates" method="post"
 action="https://www.secretsite.com/user.asp"
 onSubmit="return valF();">
<TABLE width="600" border="0" cellspacing="0"
 cellpadding="0" align="center">
<TR>
<TD bgcolor="#006633">
<FONT size="2" face="Arial" color="#FFFF66">
 <B>Тип телефона:</B></FONT>
</TD>
</TR>
<TR>
<TD>
<INPUT name=rdoBusOrRes type=radio
 value=Residential checked>
<FONT face="Arial" size="2">Home</FONT>
<INPUT name=rdoBusOrRes type=radio value=Business>
<FONT face="Arial" size="2">Business</FONT>
</TD>
</TR>
<TR>
<TD height="69">
<P>Введите код области (3 цифры) и 7 цифр вашего телефона:
<BR>
Пример:(044) 2233559   (
<INPUT type="text" name="txtNPA" size="3" maxlength="3"> )
<INPUT type="text" name="txtNXX" size="7" maxlength="7">
       
<INPUT type="button" OnClick="return valF();" value="Подтверждаю!">
<INPUT type="hidden" name="txtLine" size="4" maxlength="4" value="">
</P>
</TD>
</TR>
</TABLE>
</FORM>
</BODY>
<BR><BR>
</TD>
</TR>
</TABLE>
</CENTER>
</HTML>

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

Это лишь некоторые, простейшие, варианты применения скриптов на веб-страницах. Читатели, которых заинтересовала данная тема, могут присылать в редакцию свои вопросы. Мы с удовольствием на них ответим.

Олег НИКИТЕНКО,
fm@comizdat.com

Подписаться на дискуссионный лист
Послать письмо на дискуссионный лист
Задать вопрос
Прислать свою статью для публикации в журнале
Просто поговорить
Получить именной бланк подписки на "бумажную" версию

До следующего выпуска!
Елена Полонская, редактор "К+П"
www.comizdat.com

Перепечатка материалов этой рассылки разрешается только по согласованию с редакцией журнала "Компьютеры+Программы"

http://subscribe.ru/
E-mail: ask@subscribe.ru 		Отписаться
Убрать рекламу
В избранное