Создание формы документа
1. Откройте созданный файл в программе Блокнот.
2. Между тегами <body> и </body> добавьте теги <form name=”form1”> и </form>.
3. Элементы формы документа, которые будут созданы, необходимо поместить между тегами <form name=”form1”> и </form>.
4. Создайте текстовое поле: введите <input type=”text” name=”text1” size=20>
5. Создайте кнопку сброса: введите <input type=”reset” name=”button” value=”Сброс”>
6. Сохраните документ.
7. Вернитесь в программу Internet Explorer и щелкните на кнопке Обновить на панели инструментов.
Лабораторная работа № 10 изучение основ языка javascript.
Цель работы: Изучить основные функции, предопределенные переменные и свойства объектов языка JavaScript.
Теоретическая часть:
В ходе настоящей лабораторной работы нужно создать калькулятор, который выполняет простейшие арифметические операции. Калькулятор будет содержать следующие поля:
-
поле для ввода первого числа;
-
поле для ввода второго числа;
-
кнопку, по нажатии на которую производится сложение двух чисел, указанных в предыдущих полях;
-
поле для вывода результата;
Такие элементы, как поля для ввода текста, кнопки, выпадающие списки, флажки указываются внутри тега <form></form>. Например, для того, чтобы страница содержала поле для ввода текста, в ее тело необходимо поместить следующий код: <form name="form1"> <input type="text" name="field1" size=12> </form>
В окне браузера это будет выглядеть так:
Начало формы
Конец формы
Как только вы внесли все необходимые элементы (в нашем случае это три поля для ввода текста и одна кнопка), к ним можно привязать обработчики событий, написанные на языке JavaScript.
Рассмотрим пример.
<html>
<head>
<title>New Page 1</title>
Программа простейшего калькулятора
</head>
<script language="JavaScript">
function calc (obj) {
var a=1*obj.a1.value;
var b=1*obj.b1.value;
res=a+b;
obj.res1.value=res; }
</script>
<body>
<form name="form1">
Number 1: <input type="text" size=10 name="a1" onChange="calc(form1)"><br>
Number 2: <input type="text" size=10 name="b1" onChange="calc(form1)"><br>
Result: <input type="text" size=10 name="res1"><br>
<br>
<input type="reset" value="Cancel">
</form>
</body>
</html>
Начало формы
Конец формы
Ход работы:
1. Откройте Блокнот, сохраните текущую страницу как calc.html
2. На странице создайте четыре гиперссылки: Сложение, Вычитание, Умножение, Деление
3. Создайте четыре html – файла с гиперссылками на главную страницу (файл calc.html).
4. Включите их в созданные гиперссылки.
5. Для каждого файла создайте форму и сценарий для выполнения арифметических операций. Вначале сформировать тело страницы - в разделе body создайте форму, назовите ее form1. Внутри формы укажите три текстовых поля. После текстовых полей разместите кнопки Вычислить, Обновить.
6. В созданные файлы внесите сценарии, соответствующие выполняемым операциям.
-
Сохраните созданные документы, откройте их в браузере и проверьте работоспособность.