События и команды в JavaScript работают по одной схеме.
onMouseOver - запускает событие при наведении курсора на ссылку;
onMouseOut - запускает событие при уходе курсора со ссылки;
onClick - по щелчку на ссылке или кнопке;
Для примера, рассмотрим функцию alert('текст, который появится в окне')
Таким образом, получаем:
|
01
|
<a href="myweb.html" onClick="alert('Переход на веб-страничку!');">Мой сайт</a> |
<a href="myweb.html" onClick="alert('Переход на веб-страничку!');">Мой сайт</a>
Примечание: внутри одинарных кавычек нельзя употреблять слова с апострофами, иначе браузер поймет их, как окончание текста. Ошибка.
onFocus (на фокус) - команда, которая вызывает действие, когда пользователь «фокусируется» на элементе страницы. Это годится для форм: флажков (checkbox) и текстовых полей (textbox).
Пример:
|
01
02
03
|
<form> <input type="text" size="30" onFocus="window.status='Текст в строке состояния';"></form> |
<form>
<input type="text" size="30" onFocus="window.status='Текст в строке состояния';">
</form>
onBlur (на потерю фокуса) – команда позволяет сообщить пользователю о том, что он изменил свой ответ. Этот обработчик не так часто используется. В примере используется строка для ввода текста, в которой уже что-то написано. Измените текст и уведите курсор, как если бы вы перешли к следующему предмету в списке.
|
01
02
03
04
|
<form> <input type="text" size="45" value="Впишите свое имя и щелкните по другой строке" onBlur="alert('Вы изменили ответ — уверены, что он правильный?');"></form> |
<form>
<input type="text" size="45" value="Впишите свое имя и щелкните по другой строке"
onBlur="alert('Вы изменили ответ — уверены, что он правильный?');">
</form>
onChange (на изменение) - действие этой команды аналогично команде onBlur. Ее главная задача — проверка. Этот обработчик события проверяет, сделал ли пользователь то, что вы от него просили. Пример очень похож на предыдущий, но действует все-таки по-другому.
|
01
02
03
04
|
<form> <input TYPE="text" size="45" value="Измените текст и щелкните по другой строке" onChange="window.status='Текст был изменен';"></form> |
<form>
<input TYPE="text" size="45" value="Измените текст и щелкните по другой строке"
onChange="window.status='Текст был изменен';">
</form>
onSelect (на выделение) - команда отмечает, что в поле ввода произошли изменения, — в данном случае был выделен текст.
onSubmit (на отправку) - команда позволяет вызвать какое-либо действие при нажатии кнопки Submit (отослать, отправить). Например, надпись: «Спасибо, что вы нам написали» появляется после того, как пользователь нажимает на кнопку.
Формат такой:
|
01
02
03
|
<form> <input TYPE="submit" onSubmit="parent.location='thanksalot.html'";></form> |
<form>
<input TYPE="submit" onSubmit="parent.location='thanksalot.html'";>
</form>
Команда parent.location — это стандартная схема ссылки на другую страницу. (parent - источник, а location – местонахождение). В данном случае parent является свойством окна браузера, а location — объектом, который появится в этом окне. То есть для ясности просто имейте в виду, что parent.location='…' означает ссылку.
onLoad и onUnload (на вход и выход) – эти команды помещаются внутри строки HTML <BODY>. Они вызывают событие, когда страница открывается или закрывается, то есть когда вы уходите со страницы.
Задание:
Необходимо создать форму, которая будет взаимодействовать с пользователем. Форма должна иметь три элемента:
1. поле ввода с просьбой ввести имя;
2. два поля для флажков с вопросом о том, что больше нравится пользователю, мороженое или шоколад;
3. кнопку отправки данных.
С каждым элементом должно произойти следующее:
- При вводе имени в строке состояния должны появиться слова: «Впишите сюда свое имя».
- Два поля с флажками должны отослать в строку состояния слова: «Вы выбрали...» и выбор пользователя.
- При нажатии на кнопку должно выскочить окно предупреждения, благодарящее пользователя за участие в опросе.
Сценарии, написанные на языке JavaScript, мoгут располагаться непосредственно в HTML-документе между тегами <script> и </script>.
Одним из параметров тега <script> является параметр language, он определяет используемый язык сценариев. Для языка JavaScript значение параметра равно «JavaScript». Если используется язык сценариев VBScript, то значение параметра должно быть равным «VBScript». В случае использования языка JavaScript параметр language можно опускать, так как этот язык используется браузером по умолчанию.
Обычно браузеры, не поддерживающие какие-либо теги HTML, их просто игнорируют.Попытка браузера проанализировать содержимое непподдержанных тегов может привести к неверному отображению страницы.Чтобы избежать такой ситуации, рекомендуется помещать операторы языка JavaScript в теги комментария <!--...-->. Для правильной работы интерпретатора перед закрывающим тегом комментария --> следует поставить символы //.
Итак, для размещения сценария в HTML - документе следует написать следующее:
|
01
02
03
04
05
|
<script language="JavaScript"> <!-- операторы языка JavaScript //--></script> |
<script language="JavaScript">
<!--
операторы языка JavaScript
//-->
</script>
Документ может содержать несколько тегов <script>. Все они последовательно обрабатываются интерпретатором JavaScript.
Тег <noscript> определяет HTML-код, отображаемый на экране в случае, если JavaScript не поддерживается браузером или поддержка отключена.Этот тег следует после кода, заключенного в теги <script> и </script>. Если поддержка включена, то тег <noscript> игнорируется. В дальнейших примерах будем считать, что поддержка JavaScript включена.
При создании программы разумно выделить в ней логически независимые части (так называемые подпрограммы). Каждую часть при необходимости можно разбить на отдельные подпрограммы и т. д. Разбиение программы на подпрограммы облегчает процесс отладки, так как позволяет отлаживать каждую подпрограмму отдельно. Можно распределить работу по созданию сложной программы между отдельными программистами. Некоторые подпрограммы можно использовать для решения разных задач. Подпрограммы один раз описываются, а затем используются произвольное число раз.
Во многих языках программирования понятие подпрограммы реализуется с помощью конструкций процедур, функций, модулей и т.п.
Основным элементом языка JavaScript является функция. Описа-ние функции имеет вид: function F (V) {S}, где F - идентификатор функции, задающий имя, по которому можно обращаться к функции, V - список параметров функции, разделяемых запятыми, S - тело функции, в нем задаются действия, которые нужно выполнить, чтобы получить результат. Необязательный параметр return определяет возвращаемое функцией значение.
Описание функции не может быть вложено в описание другой функции. Параметры функции внутри ее тела играют ту же роль, что и обычные переменные, но начальные значения этим параметрам задаются при обращении к функции. Если описание функции имеет вид function F(v1,v2, ... ,vn){S}, то вызов функции должен иметь вид: F(е1,е2,...,еn), где е1,е2,...,еn - выражения, задающие фактические значения параметров. Параметры vl,v2,...,vn, указанные в описании функции, называются формальными параметрами, чтобы подчеркнуть тот факт, что они получают смысл только после задания в вызове функции фактических параметров е1,е2,...,еn, с которыми функция затем и работает. Если в функции параметры отсутствуют, то есть описание функции имеет вид function F{S}, то наличие скобок в операторе вызова функции обязательно, то есть вызов функции в этом случае должен иметь вид: F().
Обычно все определения и функции задаются в разделе <HEAD> документа. Это обеспечивает интерпретацию и сохранение в памяти всех функций при загрузке документа в браузер.
Пример. Сумма баллов
Создадим документ, в котором располагается форма для ввода оценок, при нажатии на кнопку вычисляется сумма баллов. Листинг решения данной задачи приведен ниже:
Листинг. Использование сценария с функцией
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
|
<HTML> <HEAD> <title>Формирование результата в поле формы</title> <SCRIPT LANGUAGE="JavaScript"> function val(obj) { var a1 = Number(obj.numl.value); var a2 = Number(obj.num2.value); var a3 = Number(obj.num3.value); var a4 = Number(obj.num4.value); var s = a1 + a2 + a3 + a4 obj.res.value = s } </SCRIPT> </HEAD> <BODY> Введите полученные оценки<br> <FORM name="forml"> <pre> алгебра: <INPUT type="text" size=3 name="numl"> геометрия: <INPUT type="text" size=3 name="num2"> история: <INPUT type="text" size=3 name="num3"> анализ:<INPUT type="text" size=3 name="num4"> Сумма баллов: <INPUT type="text" size=4 name="res"> </pre> <INPUT type="button" value="Вычислить" onClick="val(forml)"> <INPUT type="reset" value="Обновить "> </FORM> </BODY></HTML> |
<HTML>
<HEAD>
<title>Формирование результата в поле формы</title>
<SCRIPT LANGUAGE="JavaScript">
function val(obj) {
var a1 = Number(obj.numl.value);
var a2 = Number(obj.num2.value);
var a3 = Number(obj.num3.value);
var a4 = Number(obj.num4.value);
var s = a1 + a2 + a3 + a4
obj.res.value = s
}
</SCRIPT>
</HEAD>
<BODY>
Введите полученные оценки<br>
<FORM name="forml">
<pre>
алгебра: <INPUT type="text" size=3 name="numl">
геометрия: <INPUT type="text" size=3 name="num2">
история: <INPUT type="text" size=3 name="num3">
анализ:<INPUT type="text" size=3 name="num4">
Сумма баллов: <INPUT type="text" size=4 name="res">
</pre>
<INPUT type="button" value="Вычислить" onClick="val(forml)">
<INPUT type="reset" value="Обновить ">
</FORM>
</BODY>
</HTML>
Задание:
Написать сценарий для вычисления суммы, разности, произведения и частного четырех чисел а1, а2, а3, а4.
Листинг:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
|
<HTML> <HEAD> <title>Арифметика</title> <SCRIPT LANGUAGE="JavaScript"> function val(obj) { var a1 = Number(obj.numl.value); var a2 = Number(obj.num2.value); var a3 = Number(obj.num3.value); var a4 = Number(obj.num4.value); var s = a1 + a2 + a3 + a4 var r = a1 - a2 - a3 - a4 var p = a1 * a2 * a3 * a4 var d = a1 / a2 / a3 / a4 obj.res.value = s obj.res1.value = r obj.res2.value = p obj.res3.value = d } </SCRIPT> </HEAD> <BODY> Введите полученные оценки<br> <FORM name="forml"> <pre> число а1: <INPUT type="text" size=3 name="numl"> число а2: <INPUT type="text" size=3 name="num2"> число а3: <INPUT type="text" size=3 name="num3"> число а4: <INPUT type="text" size=3 name="num4"></pre> <HR> <pre> Сумма чисел: <INPUT type="text" size=6 name="res"> Разность чисел: <INPUT type="text" size=6 name="res1"> Произведение чисел: <INPUT type="text" size=6 name="res2"> Частное чисел: <INPUT type="text" size=6 name="res3"></pre> <hr> <INPUT type="button" value=Вычислить onClick="val(forml)"> <INPUT type="reset" value="Обновить "> </FORM> </BODY></HTML> |
<HTML>
<HEAD>
<title>Арифметика</title>
<SCRIPT LANGUAGE="JavaScript">
function val(obj) {
var a1 = Number(obj.numl.value);
var a2 = Number(obj.num2.value);
var a3 = Number(obj.num3.value);
var a4 = Number(obj.num4.value);
var s = a1 + a2 + a3 + a4
var r = a1 - a2 - a3 - a4
var p = a1 * a2 * a3 * a4
var d = a1 / a2 / a3 / a4
obj.res.value = s
obj.res1.value = r
obj.res2.value = p
obj.res3.value = d
}
</SCRIPT>
</HEAD>
<BODY>
Введите полученные оценки<br>
<FORM name="forml">
<pre>
число а1: <INPUT type="text" size=3 name="numl">
число а2: <INPUT type="text" size=3 name="num2">
число а3: <INPUT type="text" size=3 name="num3">
число а4: <INPUT type="text" size=3 name="num4"></pre>
<HR>
<pre>
Сумма чисел: <INPUT type="text" size=6 name="res">
Разность чисел: <INPUT type="text" size=6 name="res1">
Произведение чисел: <INPUT type="text" size=6 name="res2">
Частное чисел: <INPUT type="text" size=6 name="res3"></pre>
<hr>
<INPUT type="button" value=Вычислить onClick="val(forml)">
<INPUT type="reset" value="Обновить ">
</FORM>
</BODY>
</HTML>
В языке JavaScript определены некоторые стандартные объекты и функции, пользоваться которыми можно без предварительного описания. Одним из стандартных объектов является объект Math. В свойствах объекта Math хранятся основные математические константы, его методы можно использовать для вызова основных математических функций. С помощью методов объекта Math можно вычислить абсолютное значение, натуральный логарифм, наименьшее и наибольшее значение функции, двух аргументов, вычислить степень вещественного числа, вычислить квадратный корень.
Пример. Площадь треугольника
Напишем сценарий вычисления площади и периметра треугольника, заданного длинами сторон.
Для того чтобы вычислить площадь треугольника по длинам сторон, используется формула Герона. В формуле Герона требуется применить функцию извлечения квадратного корня, для этого воспользуемся методом sqrt объекта Math: Math.sqrt.
Вычисленные в функции значения помещаются в документ с помощью метода write.
Листинг. Использование сценария с функцией
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
|
<HTML> <HEAD> <title>Объект Math</title> <SCRIPT LANGUAGE="JavaScript"> function care(obj) { var a = Number(obj.st1.value); var b = Number(obj.st2.value); var c = Number(obj.st3.value); var s; p = a + b + c; document.writeln("Периметр треугольника равен - ", p, "<br>"); p = p / 2; s = Math.sqrt(p * (p - a) * (p - b) * (p - c)); document.writeln("Площадь треугольника равна - ", s); } </SCRIPT> </HEAD> <BODY> <p>Пример сценария с математической функцией</p> <p>Вычисление площади и периметра треугольника </p> <form name="form1"> Сторона а: <INPUT type="text" size=3 name="st1"><br> Сторона b: <INPUT type="text" size=3 name="st2"><br> Сторона c: <INPUT type="text" size=3 name="st3"><br> <hr> <INPUT type="button" value="Вычислить" onClick="care(form1)"> <INPUT type="reset" value="Обновить"> </FORM> </BODY></HTML> |
<HTML>
<HEAD>
<title>Объект Math</title>
<SCRIPT LANGUAGE="JavaScript">
function care(obj) {
var a = Number(obj.st1.value);
var b = Number(obj.st2.value);
var c = Number(obj.st3.value);
var s; p = a + b + c;
document.writeln("Периметр треугольника равен - ", p, "<br>");
p = p / 2;
s = Math.sqrt(p * (p - a) * (p - b) * (p - c));
document.writeln("Площадь треугольника равна - ", s);
}
</SCRIPT>
</HEAD>
<BODY>
<p>Пример сценария с математической функцией</p>
<p>Вычисление площади и периметра треугольника </p>
<form name="form1">
Сторона а: <INPUT type="text" size=3 name="st1"><br>
Сторона b: <INPUT type="text" size=3 name="st2"><br>
Сторона c: <INPUT type="text" size=3 name="st3"><br>
<hr>
<INPUT type="button" value="Вычислить" onClick="care(form1)">
<INPUT type="reset" value="Обновить">
</FORM>
</BODY>
</HTML>