 |
Создание сценариев с использованием фреймов
|
|
|
|
Цель работы: Изучить основы создания сценариев JavaScript с использованием фреймов.
Теоретическая часть:
Информацию на Web – странице можно помещать в прямоугольные области (окна), называемые фреймами. Фреймы соприкасаются друг с другом, в каждую можно загрузить отдельный HTML – документ и работать с этим документом независимо от загруженных в другие области документов. Между фреймами можно организовать взаимодействия, например выбор ссылки в одном из фреймов позволит изменить содержимое другого фрейма. Фреймы часто используются в случаях, когда возникает необходимость загрузить документ в одну из областей при работе в другой области или когда требуется расположить информацию, которая должна постоянно находиться на экране.
Для всех фреймов должны быть заданы адреса нахождения данных.
Фреймы определяются в структуре, заключенную в теги <frameset> и </frameset>. Тег <frameset> имеет два параметра – rows (строки) и cols (столбцы). В общем случае запись тега следующая:
<frameset rows= «список значений» cols= «список значений»>. Список значений параметров rows и cols представляет собой, разделенный запятыми список значений, которые могут задаваться: в пикселях, в процентах, в относительных единицах. Например: <frameset rows=”100, 220, 160”> - окно просмотра разбивается по горизонтали на три области размером 100, 220, 160 пикселей, соответственно. <frameset cols=”20%, 50%, 30”> - окно просмотра разбивается по вертикали на три области, размер которых по отношению к общему окну 20, 50, 30% соответственно.
Тег <frame> определяет одиночный фрейм. Он должен располагаться внутри пары тегов <frameset></frameset>. Тег <frame> имеет шесть параметров:
Src – определяет URL – адрес документа, который будет загружен в заданный фрейм;
|
|
|
Name - определяет имя фрейма, которое он может использовать для ссылки к данному фрейму. Значение этого параметра может использоваться в сценариях JavaScript при организации доступа к содержимому фрейма.
Marginwidth, marginheigth – дают возможность устанавливать ширину полей фрейма. Они определяют пространство, в пределах которого не будет располагаться никакая информация.
Scrolling – отображает полосы прокрутки. Если значение параметра равно auto – полосы прокрутки будут автоматически отображаться на экране, если содержимое фрейма не полностью отображается в окне. Также значение этого параметра может равно yes (полосы прокрутки отображаются) и no (полосы не отображаются).
Пример простой фреймовой структуры. Создается документ, который разбивает область экрана на две части. Левая содержит оглавление разделов, правая содержит документ со сценариями вычисления площадей различных фигур.
<html>
<head>
<title>New Page 1</title>
</head>
<frameset cols="40%,60%">
<frame name="left" src="фрейм_glav.htm" scrolling="auto" target="right">/*загружвает документ с оглавлением
<frame name="right" src="empty.htm" scrolling="auto"> /* загружается пустой документ
</frameset>
</html>
Файл фрейм_glav.htm
<html>
<head>
<title>new page 2</title>
<base target=right>
</head>
<body>
Выберите фигуру<br>
<a href="фрейм_2.htm">квадрат</a> <br> /* загружвает файлы со сценарием вычисления площади выбранной фигуры
<a href="фрейм_3.htm">круг</a> <br>
<a href="фрейм_4.htm">треугольник</a>
</body>
</html>
Файл фрейм_2.htm
<html>
<head>
<title>new page 3</title>
<script language="JavaScript">
function test (k) {
var a=form1.a1.value;
if (a!=" ")
form1.res.value=Math.pow(a,2)
else aletr ("Введите значение") }
</script>
</head>
<body>
<form name="form1">
Введите значение стороны квадрата
<input type="text" name="a1" size=10><hr>
|
|
|
<input type="button" name="k1" value="Вычислить площадь"
onClick="test(form1.elements[1].value)"><br>
Площадь квадрата: <input type="text" name="res" size=10>
<input type="reset" value="Отмена">
</form>
</body>
</html>
Файл фрейм_3.htm
<html>
<head>
<title>new page 4</title>
<script language="JavaScript">
function test (k) {
var a=form1.a1.value;
if (a!=" ")
form1.res.value=3.14*Math.pow(a,2)
else aletr ("Введите значение") }
</script>
</head>
<body>
<form name="form1">
Введите значение радиуса круга
<input type="text" name="a1" size=10><hr>
<input type="button" name="k1" value="Вычислить площадь"
onClick="test(form1.elements[0].value)"> <br>
Площадь круга: <input type="text" name="res" size=10>
<input type="reset" value="Отмена">
</form>
</body>
</html>
Файл фрейм_4.htm
<html>
<head>
<title>new page 5</title>
<script language="JavaScript">
function test (k) {
var a=form1.a1.value;
if (a!=" ")
form1.res.value=0.42*Math.pow(a,2)
else aletr ("Введите значение") }
</script>
</head>
<body>
<form name="form1">
Введите значение стороны треугольника
<input type="text" name="a1" size=10><hr>
<input type="button" name="k1" value="Вычислить площадь"
onClick="test(form1.elements[0].value)"> <br>
Площадь треугольника: <input type="text" name="res" size=10>
<input type="reset" value="Отмена">
</form>
</body>
</html>
Задание на работу:
В ходе выполнения лабораторной работы нужно составить сценарий с использованием фреймов, реализующие работу простейшего калькулятора.
Ход работы:
1. Откройте Блокнот, сохраните текущую страницу.
2. Создайте фрейм, состоящий из нескольких фреймов. Первый фрейм должен содержать оглавление со ссылками на файлы, реализующие сложение, вычитание, умножение, деление.
3. Для каждого файла создайте сценарий для выполнения арифметических операций.
4. В формах создайте текстовые поля для ввода значений и вывода результата, а также кнопку Отмена
5. Сохраните документ, откройте его в браузере и проверьте работоспособность.
ПРИЛОЖЕНИЕ 1
|
|
|
