2015-05-10
519ЛАБОРАТОРНАЯ РАБОТА № 3
Цель работы: Изучить основы создания сценариев 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>
<html>
<head>
<title> New page 1 </title>
<body background="1112.bmp">
<h1>Сложение</h1>
</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">
Число 1:<input type="text" size=10 name="a1" onChange="calc(form1)"><br>
Число 2:<input type="text" size=10 name="b1" onChange="calc(form1)"><br>
Результат:<input type="text" size=10 name="res1"><br>
<br>
<input type="reset" value="Отменить">
</form>
</body>
</html>
<html>
<head>
<title> New page 1 </title>
<body background="11.bmp">
<h1>Вычитание</h1>
</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">
Число 1:<input type="text" size=10 name="a1" onChange="calc(form1)"><br>
Число 2:<input type="text" size=10 name="b1" onChange="calc(form1)"><br>
Результат:<input type="text" size=10 name="res1"><br>
<br>
<input type="reset" value="Отменить">
</form>
</body>
</html>
<html>
<head>
<title> New page 1 </title>
<body background="111.bmp">
<h1>Умножение</h1>
</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">
Число 1:<input type="text" size=10 name="a1" onChange="calc(form1)"><br>
Число 2:<input type="text" size=10 name="b1" onChange="calc(form1)"><br>
Результат:<input type="text" size=10 name="res1"><br>
<br>
<input type="reset" value="Отменить">
</form>
</body>
</html>
<html>
<head>
<title> New page 1 </title>
<body background="11112.bmp">
<h1>Деление</h1>
</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">
Число 1:<input type="text" size=10 name="a1" onChange="calc(form1)"><br>
Число 2:<input type="text" size=10 name="b1" onChange="calc(form1)"><br>
Результат:<input type="text" size=10 name="res1"><br>
<br>
<input type="reset" value="Отменить">
</form>
</body>
</html>
<html>
<head>
<title>new page 1</title>
<base target=right>
</head>
<body>
выберите Действие<br>
<a href="фрейм_2.htm">сложение</a> <br>
<a href="фрейм_3.htm">вычитаниег</a> <br>
<a href="фрейм_4.htm">умножение</a> <br>
<a href="фрейм_5.htm">деление</a>
</body>
</html>
