2015-04-30
662
В языке JavaScript определены объекты, которые называются объектами браузера. Каждый объект соответствует некоторому элементу Web- страницы: окну, документу, изображению, ссылке и т.п. Управлять частями документа можно с помощью методов браузера. Объекты браузера имеют иерархическую структуру. На самом верхнем уровне располагается объект window. Он является родителем остальных объектов. Объект window представляет окно браузера. Свойство window.status можно использовать для изменения вида строки состояния. Для отображения диалоговых сообщений объект window имеет три метода.
Метод alert
Метод window.alert отображает диалоговое окно, в которое помещается сообщение для пользователя. Этот метод часто используется при обработке полей формы. Если в какое-либо из полей формы введено неверное значение, то пользователю посылается сообщение, которое изображено на рис. 3.1.
Рис. 3.1. Метод alert при анализе введенных данных
Документ, HTML- код которого представлен в листинге 3.1, содержит сценарий, при работе которого проверяется правильность введенных данных.
|
|
|
| Листинг 3.1. Метод alert для проверки введенных данных |
<HTML>
<HEAD>
<TITLE>Вычисление среднего балла за сессию</TITLE>
<SCRIPT LANGUAGE=”JavaScript">
<!-- //
function msgot()
{ window.status = "неверно введены данные";
alert ('Проверьте правильность введенных оценок')
window.status = ""}
function st (obj)
{ var a = Number(obj.num1.value);
var b = Number(obj.num2.value);
var c = Number(obj.num3.value);
var d = Number(obj.num4.value);
if ((a < 2) || (a > 5) || (b < 2) || (b > 5)||
(c < 2) || (c > 5) || (d < 2) || (d > 5))
{msgot()}
else
obj.ball.value=(a+b+c+d)/4
}
//-->
</SCRIPT>
</HEAD>
<BODY>
<h4>Вычисление среднего балла по результатам сессии</h4>
<h4>Введите полученные оценки в любом порядке</h4>
<FORM name="form1">
Оценка 1: <INPUT type="text" size=1 name="num1"><BR>
Оценка 2: <INPUT type="text" size=1 name="num2"><BR>
Оценка 3: <INPUT type="text" size=1 name="num3"><BR>
Оценка 4: <INPUT type="text" size=1 name="num4"><BR>
Для определения среднего балла нажмите на кнопку:<HR>
<INPUT type="button" value=Определить onClick="st(form1)"><HR>
Средний балл: <INPUT type="text" size=5 name="ball"><HR>
<INPUT type="reset" value=Отменить>
</FORM></BODY></HTML>
Метод confirm
Метод confirm отображает диалоговое окно подтверждения выполнения операции. Оно содержит две кнопки OK и Cancel (Отмена), позволяющие выбрать один из вариантов. Если пользователь щелкнул по кнопке OK, то возвращается значение true, после щелчка по кнопке Отмена возвращается значение false. В функции quest() листинга 3.2 анализируется возвращаемое методом confim значение и выполняются соответствующие действия.
| Листинг 3.2. Метод сonfirm объекта window |
<HTML>
<HEAD>
<TITLE>Отгадка задуманного числа</TITLE>
<SCRIPT LANGUAGE=”JavaScript">
<!-- //
function test (obj)
{ var i=Number(obj.num1.value)
var j=Number(obj.num2.value)
var k
var s=" "
var p
while (i < j)
{ if ((i+j)%2== 0)
k=(i+j)/2
else
k=(i+j-1)/2
s="Задуманное число меньше или равно "+k+"?"
p=confirm(s)
if (p)
j=k
else
i=k+1
}
obj.res.value=i
}
function cont (obj)
{ if (obj.res.value!= obj.num.value)
alert ("Кто-то обманывает")
else
alert ("Все хорошо!")
}
//-->
</SCRIPT>
</HEAD>
<BODY>
<h4>Задумайте число в интервале</h4>
<FORM name="form1">
<input type="text" name="num1" size=4> и
<input type="text" name="num2" size=4><br>
Для проверки введите задуманное число
<input type="password" name="num" size=4><br>
<HR>
Ответьте на вопросы после нажатия кнопки <b>Отгадай</b><br>
<input type="button" value="Отгадай" onclick="test(form1)"><br>
Задуманное число: <input type="text" name="res" size=10><br>
<input type="button" value="Проверка" onclick="cont(form1)">
<input type="reset" value="Очистить">
</FORM></BODY></HTML>
|
|
|
На рис. 3.2 документ, HTML-код которого хранится в листинге 3.2.
Рис. 3.2. Диалог с пользователем с помощью метода confim.
Метод prompt
Метод promt используется для вывода диалогового окна запроса данных. При щелчке по кнопке OK введенные пользователем в текстовое поле данные отображаются в документе. Если выбрано значение Cancel, то возвращается значение Null. Метод promt имеет второй параметр, с помощью которого задается значение по умолчанию.
| Листинг 3.3. Диалоговое окно запроса данных |
<HTML>
<HEAD>
<TITLE>Метод prompt объекта window</TITLE>
<SCRIPT>
function reg (obj)
{ var s= window.prompt ("Введите Ваше имя", "")
obj.regname.value = s
}
</SCRIPT>
</HEAD>
<BODY>
<form name="form1">
<input type=text name=regname>
<input type="button" value="Регистрация" onClick= "reg(form1)">
</form></BODY></HTML>
Рис. 3.3. Диалоговое окно запроса данных
Создание нового окна
При выполнении сценария пользователь может создавать новые окна, загружать в них различные документы и др. Новое окно браузера создается с помощью метода windows.open.
Рассмотрим присваивание
wint = window.open ("calcul.htm","mywin","").
Рассмотрим оператор присваивания, в правой части которого используется метод windows.open:
wint = window.open ("calcul.htm","mywin","")
Переменная wint используется для хранения данных о новом окне (объект window). Эту переменную можно использовать для получения свойств и методов нового созданного окна. В качестве первого параметра при создании нового окна задается адрес документа, загружаемого в создаваемое окно. Если значение первого параметра не указано, то созданное окно будет пустым. Второй параметр определяет название окна, это значение соответствует свойству name нового объекта window. В простейшем случае третий параметр можно не указывать, тогда при создании окна его параметры будут использовать значения по умолчанию. HTML- код документа, приведенного на рис. 3.4 хранится в листинге 3.4,а.
Рис. 3.4. Окно, определяемое пользователем
| Листинг 3.4,а. Окна, определяемые пользователем |
<HTML>
<HEAD>
<TITLE>Окна, определяемые пользователем</TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!--
var wint
function opnewWin()
{ wint = window.open ("calcul.htm","myWin","") }
function propwin(obj)
{ obj.t0.value= wint.name }
//-->
</SCRIPT>
</HEAD>
<BODY>
<h4>Окна, определенные пользователем</h4>
<FORM name="form1">
<input type=button value="Открыть окно" onClick="opnewWin()">
<input type=button value="Закрыть окно" onClick="wint.close()">
</FORM>
<h5>Свойства созданного окна</h5>
<pre>
<FORM name="form2">
<input type=button value="Посмотреть" onClick="propwin(form2)"<br>
<input type=text name=t0> name
</FORM></BODY></HTML>
При щелчке по кнопке Открыть окно создается новое окно, в которое помещается документ с именем calcul.htm.
Рис. 3.5 соответствует ситуации после открытия нового окна, в которое помещается документ с построителем логических формул.
Рис. 3.5. Окно с построителем, созданное пользователем
Для того чтобы закрыть новое окно можно щелкнуть по второй кнопке. В качестве значения параметра обработки события вызывается метод close(). Одно из свойств нового окна выводится в текстовое поле формы.
|
|
|
Третий параметр содержит список необязательных опций. С их помощью можно определить вид нового окна, например, задать первоначальную ширину окна в пикселях, наличие или отсутствие меню в верхней части окна, наличие панели инструментов и др. Если ни один из параметров не указан, как в предыдущем случае, то используются значения по умолчанию.
Рассмотрим некоторые свойства объекта window, которые можно задавать при открытии окна. Свойство location содержит текущий адрес страницы, загруженной в окно, status- строка состояния в нижней части окна, menubar- меню браузера, toolbar- панель инструментов, directories- набор кнопок для статических ссылок, scrollbar- полосы прокрутки, если документ не помещается на экран.
При задании третьего параметра опции (соответствующие свойствам окна) могут принимать одно из двух значений yes (1) или no (0).
Для того чтобы создать окно с первоначальной заданной шириной в 400 пикселей и высотой в 300 пикселей следует воспользоваться методом open с параметрами
wint = window.open ("calcul.htm", "myWin", "width=400, height=300").
Для задания окна, не содержащего меню браузера и URL- адреса страницы, загруженной в окно, следует выполнить
wint = window.open ("calcul.htm", "myWin", "menubar=no, location=no").
Документ с именем calcul.htm, загружаемый в новое окно, содержит сценарий, облегчающий ввод логических формул, содержащих логические константы, круглые скобки, знаки логических операций. После того как формула построена, можно вычислить ее значение. HTML- код документа со сценарием обработки логических формул приведен в листинге 3.4,б.
| Листинг 3.4,б. Построитель логических формул |
<HTML>
<HEAD>
<TITLE>Построитель логических формул</TITLE>
<SCRIPT>
<!--
var s=""
//функция вычисляет значение формулы
function val(obj)
{ s=obj.m1.value; obj.res.value=eval(s) }
//функция добавляет символ к формуле
function valbut (c)
{ s=document.form1.m1.value+c; document.form1.m1.value=s }
//-->
</SCRIPT>
</HEAD>
<BODY>
<center>
<h4>Логическая формула</h4>
<table border=1 cellspacing=2 cellpadding=2>
<tr valign=top>
<td>
<form name ="form1">
<textarea name="m1" cols=25 rows=4></textarea></td>
</tr>
<tr valign=middle>
<td>
<input type=button value=true onclick="valbut('true')">
<input type=button value=false onclick= "valbut('false')">
<input type=button value=и onclick="valbut(' && ')">
<input type=button value=или onclick="valbut(' || ')">
<input type=button value=не onclick="valbut('! ')">
<input type=button value=(onclick="valbut('(')">
<input type=button value=) onclick="valbut(')')"></td>
</tr>
<tr valign=middle>
<td >
<input type=button value=Вычислить onclick="val(form1)"></td>
</tr>
<tr valign=middle>
<td >
Значение: <input type=text name="res"></td>
</tr>
<tr valign=middle>
<td>
<input type=reset value=Отменить onclick="s=''"></td>
</tr>
</form>
</table>
</center></BODY></HTML>
|
|
|
