Лабораторная работа №5. Написание сценариев на языке JavaScript
Цели и задачи
Цель: Научиться использовать язык JavaScript для создания интерактивных web-страниц.
Задачи: Создать форму, из которой необходимо вызвать созданный по указанному варианту сценарий.
Теоретические сведения
Тип переменной зависит от хранимых в ней данных, при изменении типа данных меняется тип переменной. Определить переменную можно с помощью оператораvar, например:var test1.
В данном случае тип переменнойtest1не определен и станет известен только после присвоения переменной некоторого значения. Операторvarможно использовать и для инициализации переменной, например, конструкциейvar test2=276определяется переменнаяtest2и ей присваивается значение 276.
Значение переменной изменяется в результате выполнения оператора присваивания. Оператор присваивания может быть использован в любом месте программы и способен изменить не только значение, но и тип переменной. Оператор присваивания выглядит так:а=b, гдеа- переменная, которой мы хотим задать некоторое значение;b- выражение, определяющее новое значение переменной.
Для размещения сценария в HTML-документе следует написать следующее:
<script language="JavaScript">
</script>
Документ может содержать несколько тегов <script>. Все они последовательно обрабатываются интерпретатором JavaScript. В следующем примере в раздел <body> (в тело) HTML-документа вставлены операторы языка JavaScript.
Пример 1. Вычисление площади треугольника
|
|
|
Необходимо написать сценарий, определяющий площадь прямоугольного треугольника по заданным катетам. Сценарий разместим в разделе <body> HTML-документа (листинг 1).
Листинг 1. Первый сценарий в документе :
<HTML>
<HEAD>
<title>Первый сценарий в документе</title>
</HEAD>
<BODY>
<P>Страница, содержащая сценарий.</P>
<script>
var a=18; h=10 /*Инициализируются две переменные*/
document.write ("Площадь прямоугольного треугольника равна ", a*h/2,".") /*Для формирования вывода используется метод
write объекта document*/
</script>
<P>Конец формирования страницы, содержащей сценарий</P>
</body>
</html>
Функции в языке JavaScript
Основным элементом языка JavaScript является функция. Описание функции имеет вид
function F (V) {S},
где F - идентификатор функции, задающий имя, по которому можно обращаться к функции; V - список параметров функции, разделяемых запятыми; S - тело функции, в нем задаются действия, которые нужно выполнить, чтобы получить результат. Необязательный оператор return определяет возвращаемое функцией значение. Обычно все определения и функции задаются в разделе <head> документа. Это обеспечивает интерпретацию и сохранение в памяти всех функций при загрузке документа в браузер.
|
|
|
Пример 2. Нахождение площади треугольника.
В предыдущем примере пользователю не предоставлялась возможность вводить значения, и в зависимости от них получать результат. Интерактивные документы можно создавать, используя формы. Предположим, что мы хотим создать форму, в которой поля Основание и Высота служат для ввода соответствующих значений. Кроме того, в форме создадим кнопку Вычислить. При щелчке мышью по этой кнопке мы хотим получить значение площади треугольника. Действие пользователя (например, щелчок кнопкой мыши) вызывает событие. События в основном связаны с действиями, производимыми пользователем с элементами форм HTML. Обычно перехват и обработка события задается в параметрах элементов форм. Имя параметра обработки события начинается с приставки on, за которой следует имя самого события. Например, параметр обработки события click будет выглядеть как onclick.
Листинг 2.Реакция на событие Click.
<HTML>
<HEAD>
<title>Обработка значений из формы</title>
<script language="JavaScript">
function care (a, h)
{
var s=(a*h)/2;
document.write ("Площадь прямоугольного треугольника равна ",s);
return s
}
</script>
</HEAD>
|
|
|
<BODY>
<P>Пример сценария со значениями из формы</P>
<FORM name="form1">
Основание: <input type="text" size=5 name="st1"><hr>
Высота: <input type="text" size=5 name="st2"><hr>
<input type="button" value=Вычислить
onClick="care(document.form1.st1.value, document.form1.st2.value)"> /*Покликумышинакнопкевфункцию care передаютсядвапараметра - содержимоеполейввода*/
</FORM>
</body>
</html>
Дата добавления: 2018-04-04; просмотров: 2462; Мы поможем в написании вашей работы! |
Мы поможем в написании ваших работ!