1744
.pdfВ приведенном примере описана форма, состоящая из одной кнопки, на которую назначен обработчик события onClick. Если происходит событие click (нажатие кнопки), то компьютер выполнит инструкцию alert('Спасибо!'). Эта инструкция – фрагмент JavaScript, выводящий на экран диалоговое окно с сообщением.
Замечание: в команде alert мы использовали одиночные кавычки. Почему? Вообще говоря, можно пользоваться как двойными, так и одиночными кавычками. Если мы напишем onClick="alert("Спасибо!")", то компьютер не поймет, какая часть относится к onClick, а какая – нет.
Для того, чтобы не возникали недоразумения такого рода, необходимо использовать разные типы кавычек, при этом нет никакой разницы, в каком порядке они будут применяться. Ту же команду можно переписать в другом виде, поменяв кавычки местами: onClick='alert ("Спасибо!")'.
Очень удобным средством для управления событием является использование функций.
Пример
Рассмотрим программу, которая будет проверять правильность заполнения формы, в которой присутствуют поля: ФИО, адрес и e- mail, а также кнопки «Отослать» и «Отменить». Необходимо проверить, нет ли пустых строк и правильно ли введен адрес e-mail (правильность определяется наличием знака @).
<html>
<head>
<title>Использование формы</title> <script language="JavaScript"> function doClear(){ if(confirm('Очистить поля формы?')) document.user.reset()
}
function doSend(){
var s=document.user.email.value var Prov=s.indexOf("@",1) if(document.user.fio.value==""){
alert('Вы должны заполнить поле ФИО') document.user.fio.focus()
}
if(document.user.adres.value==""){
60
alert('Вы должны заполнить поле адреса') document.user.adres.focus()
}
if(document.user.email.value==""){ alert('Вы должны заполнить поле e-mail') document.user.email.focus()
}
if(Prov==-1){
alert('Адрес e-mail указан неверно') document.user.email.select() document.user.email.focus()
}
else document.user.submit()
}
</script>
</head>
<body>
<p align="center"><font size=3>Данные о пользователе</font> <form name="user">
<b>Пожалуйста, укажите данные о себе:</b> <br>
ФИО: <input type="text" name="fio" size="35"><br> Адрес: <input type="text" name="adres" size="35"><br> E-mail: <input type="text" name="email" size="35"><br> <input type="button" value="Отослать" onClick="doSend()">
<input type="button" value="Отменить" onClick="doClear()"> </form>
</body>
</html>
На рис.36 показано, как будет выглядеть форма в окне браузера. При нажатии на кнопку «Отослать»(обработчик события onClick)
вызывается функция doSend, выполняющая следующие действия: если какие-то поля будут пустые, то отобразится сообщение о необходимости заполнения соответствующего поля формы и фокус будет размещен в пустом поле. Если же все поля заполнены, но в поле ввода e-mail отсутствует символ @, то выдается сообщение о неправильном e-mail адресе и фокус будет размещен в этом поле. При нажатии на кнопку «Отменить»(обработчик события onClick)
61
вызывается функция doClear, которая выдает сообщение с вопросом об очистке формы, и при утвердительном ответе (кнопка «ОК») все поля формы очищаются.
Рис. 36. Вид Web-страницы в окне браузера
Пример
Заданы значения х и y. Вычислить выражение z = x/y, при этом организовать проверку от ошибки деления на 0, а также проверку того, что в x и y занесены данные. Вводимые и выводимые данные организовать в виде полей формы.
<html>
<head> <title>Вычисление</title> <script language="JavaScript"> function doClick(){
var d=window.document.Rez if(d.x.value=='' || d.y.value==''){
alert('Поля x и y не были заполнены. Заполните поля.') return false
}
else
var x=parseFloat(d.x.value) var y=parseFloat(d.y.value) if(y==0){
alert('Делить на ноль нельзя, y не может быть равен 0') return false
}
62
else d.z.value=x/y
}
</script>
</head>
<body>
<form name="Rez"> <pre>
Вычисление z= x/y
Введите значения переменных x и y: x= <input type="text" name="x" size="6"> y= <input type="text" name="y" size="6">
Результат:
z= <input type="text" name="z" size="6">
<input type="button" name="Otvet" value="Результат" onClick="doClick()">
<input type="reset" name="reset" value="Сброс"> </form>
</body>
</html>
На рис.37 показано, как будет выглядеть форма в окне браузера после выполнения описанного сценария.
Рис. 37. Вид Web-страницы в окне браузера
63
При нажатии на кнопку «Результат» (обработчик события onClick) вызывается функция doClick, в которой проверяются поля x
иy (если они пустые, то выводится соответствующее сообщение), затем проверяется значение y на равенство нулю (выдается соответствующее сообщение), и при условии, что поля x и y не пусты
изначение y не равно 0, вычисляется значение z и выводится в соответствующее поле на форме.
4.3.3. Использование объекта Date в формах
Рассмотрим пример, в котором используется объект Date (свойства и методы рассмотрены в п.3.4) в элементах форм с обработчиками событий.
Пример
Вывести в окно браузера в поле формы текущую дату в формате ДД/ММ/ГГГГ день недели.
<html>
<head> <title>Дата</title>
<script language="JavaScript"> function f(){
//получим текущую дату var D=new Date() //получим день недели var Dw=D.getDay()
dayN=new Array ("воскресенье", "понедельник", "вторник", "среда", "четверг", "пятница","суббота")
//получим день var Day=D.getDate() //получим месяц
var M=D.getMonth()+1 //получим год
var Y=D.getYear()
//сформируем текущую дату в нужном формате t=Day+"/"+M+"/"+Y+" "+dayN[Dw]
// выводим дату в поле с именем clock на форме c именем d document.d.clock.value=t
}
</script>
64
</head>
<body onLoad="f()"> <center>
<font size=5><b>
Текущая дата</b></font> <form name="d">
<input type="text" name="clock" value="x" size="25"> </form>
</center>
</body>
</html>
На рис.38 показано, как будет выглядеть форма в окне браузера после выполнения описанного сценария.
Рис. 38. Вид Web-страницы в окне браузера
4.3.4.Использование метода setTimeout() объекта window
вформах
Метод setTimeout(функция/код, задержка) выполняет код(или функцию), указанный в первом аргументе, асинхронно, с указанной задержкой в миллисекундах. Этот метод позволяет организовать сценарий, в котором действия происходят через установленный в задержке промежуток времени.
Рассмотрим примеры, в которых используется метод setTimeout().
Пример
Вывести в окно браузера текущее время в виде надписи на кнопке формы.
<html>
<head> <title>часы</title>
65
<script language="JavaScript"> function f(){
//получим текущую дату var time=new Date() //получим число часов var h=time.getHours() //получим число минут
var minute=time.getMinutes() //получим число секунд var sec=time.getSeconds() //покажем часы
var temp=h
//покажем минуты (прибавим символ 0, если минуты от 0 до 9) temp+=((minute<10)?":0":":")+minute
//покажем секунды (прибавим символ 0, если секунды от 0 до 9) temp+=((sec<10)?":0":":")+sec
//отобразим время на кнопке с именем clock формы с именем d document.d.clock.value=temp
//будем показывать время каждую секунду i=setTimeout("f()",1000)
}
</script>
</head>
<body onLoad="f()"> <center>
<font size=5><b>
Дата и время на JavaScript </b></font>
<form name="d">
<input type="button" name="clock" value="x"> </form>
</center>
</body>
</html>
На рис.39 показано, как будет выглядеть форма в окне браузера после выполнения описанного сценария.
Сначала мы создаем новый экземпляр объекта Date, позволяющий нам получить текущую дату и время. Затем с помощью методов объекта Date мы извлекаем необходимые нам данные,
66
прибавляем символ «0» к значением минут и секунд, которые меньше 10 (для отображения двух символов, например, вместо 5 минут отобразится 05), и отображаем время как значение подписи на кнопке.
Для того, чтобы часы работали, используем метод setTimeout() объекта window. Чтобы новое время, выводимое функцией f(), в нашем примере обновлялось каждую секунду, мы задаем задержку в 1000 миллисекунд.
Рис. 39. Вид Web-страницы в окне браузера
Пример
Рассмотрим, как можно создать таймер. Реализация таймера схожа с реализацией вывода текущего времени, рассмотренной выше, и базируется на использовании метода setTimeout(). Отличие заключается в том, что при выводе текущего времени за точку отсчета берется текущее время, установленное на клиентском компьютере, а в таймере время отсчитывается от 0.
<html>
<head> <title>таймер</title> </head>
<body>
<form name="f">
<center>Вы находитесь на этой странице уже<br> <input type="text" name="timer" size="16">
секунд(ы) </center> </form>
<script language="JavaScript"> var ms=0
67
var sc=0 document.f.timer.value='0' function up()
{
if (ms>=9)
{
ms=0
sc+=1
}
else
{
ms+=1
}
document.f.timer.value=sc+'.'+ms
setTimeout("up()",100)
}
up()
</script>
</body>
</html>
В программе текущее значение таймера обновляется в поле с именем timer в форме с именем f каждые 1/10 секунды.
На рис.40 показано, как будет выглядеть форма в окне браузера после выполнения описанного сценария.
Рис. 40. Вид Web-страницы в окне браузера
4.3.5.Использование объекта document в формах
Уобъекта document есть свойства, связанные с цветом, которые приведены в табл. 6. С помощью этих свойств можно получать и изменять цвета текста и фона страницы, а такжегиперссылок.
68
Таблица 6
|
Свойства объекта document |
|
|
|
|
Свойство |
|
Описание |
bgColor |
|
Цвет фона документа |
fgColor |
|
Цвет текста документа |
linkColor |
|
Цвет гиперссылки |
alinkColor |
|
Цвет активной гиперссылки |
vlinkColor |
|
Цвет ранее посещавшейся гиперссылки |
Рассмотрим примеры использования свойств объекта document в формах.
Пример
На форме расположены 5 кнопок с названиями цветов. При нажатии на какой-либо кнопке цвет фона документа меняется на указанный на кнопке.
<html>
<head>
<title>Цвет фона</title> </head>
<body text='#000000' bgcolor='#ffffff'> <table border='0' align='center'> <tr><td><form>
<input type=button value="КРАСНЫЙ" onClick="document.bgColor='#ff0000'"> <input type=button value="ЖЕЛТЫЙ" onClick="document.bgColor='#ffff00'"> <input type=button value="СИНИЙ" onClick="document.bgColor='#0000ff'"> <input type=button value="ГОЛУБОЙ" onClick="document.bgColor='#87ceeb'"> <input type=button value="КОРАЛЛОВЫЙ" onClick="document.bgColor='#ff7f50'"> </form></td>
</tr></table>
</body>
</html>
На рис.41 показано, как будет выглядеть форма в окне браузера после выполнения описанного сценария.
69