Глава 3. Объекты клиента.

Глава 3
Объекты клиента

  Общие сведения

Во время интерпретации HTML-документа браузером создаются объекты JavaScript. При создании сценариев объекты языка JavaScript используются в качестве основных инструментальных средств. Многие свойства объектов определяются значениями параметров тегов языка HTML. Структура документа отражается в иерархической структуре объектов, соответствующих HTML-тегам. Родителем всех объектов является объект windows, расположенный на самом верхнем уровне иерархии, он представляет окно браузера и создается при запуске браузера. Для того чтобы открыть новое окно в сценарии JavaScript и отобразить в нем новый документ, применяется метод open, для закрытия окна можно воспользоваться методом close. Метод alert о объекта windows отображает диалоговое окно с текстом, переданным методу в качестве параметра. Данный метод используется в случаях проверки правильности вводимых данных с помощью формы. Свойства объекта windows относятся ко всему окну, в котором отображается документ.

Подчиненными объектами (или объектами нижнего уровня) являются объекты document, history, location, frame. Свойства объекта history представляют адреса ранее загружаемых HTML-страниц. Свойства объекта location связаны с URL-адресом отображаемого документа, объекта frame — со специальным способом представления данных.

Свойства объекта document определяются содержимым самого документа: шрифт, цвет фона, формы, изображения и т. д. Объект document в зависимости от своего содержимого может иметь объекты, являющиеся для него подчиненными или дочерними. В частности подчиненными для объекта document являются объекты form, image, link, area И др. Иерархическая структура объектов представлена на рис. 3.1.

Для каждой страницы создается один объект document, некоторые его свойства соответствуют параметрам тега <BODY>: bgColor, fgcolor, linkcolor, alinkcolor, vlinkColor. Методы write и writeln записывают в документ текст, задаваемый параметром.

Если документ содержит изображения, то доступ к объекту, определяющему изображение, можно получить с помощью переменной, указанной в параметре name тега <1мс>, как мы и поступали ранее. Объект image имеет свойство /images/, которое содержит ссылки на все изображения, расположенные в документе. Ссылки перенумерованы, начиная с нуля. Доступ к первому изображению можно получить с помощью составной конструкции document, /images/ [0], КО второму — document. /images/ [1]. Если на странице пять изображений, то доступ к последнему изображению можно получить, Воспользовавшись ссылкой document. /images/ [ 4 ].

Рис 3.1. Иерархическая структура объектов

Если на странице расположена форма, то все ее элементы являются подчиненными объектами этой формы. Тегу <FORM> соответствует объект form, являющийся подчиненным по отношению к объекту document. Доступ к форме можно осуществить с помощью значения, заданного в параметре name тега <FORM>. Объект form имеет свойство forms, в котором содержатся ссылки на все формы документа. Ссылки перенумерованы с нуля. Доступ к первой форме документа можно получить так: document.forms [0], ко второй — document, forms [1] и т. д. Вместо индекса в свойстве-массиве forms можно указывать строку, значение которой — имя переменной для формы. Все элементы формы порождают соответствующие объекты, подчиненные объекту родительской формы.

Рассмотрим примеры, в которых используются различные свойства объектов.

Напомним, что для встраивания изображений в HTML-документ служит тег <IMG>, имеющий обязательный параметр src, определяющий URL-адрес файла с изображением. Можно задавать размеры выводимого изображения. Значение параметра width определяет ширину изображения, значение параметра height — высоту изображения. Значения параметров ширины и высоты могут не совпадать с истинными размерами изображений, тогда при загрузке изображения автоматически выполняется перемасштабирование.

Изображение можно поместить в рамку. Для этого используется параметр border. Значением параметра должно быть число, определяющее толщину рамки в пикселах. По умолчанию рамка вокруг изображения отсутствует, если только изображение не является ссылкой.

Параметр alt определяет альтернативный текст. При наведении курсора мыши на изображение появляется комментарий.

  Изменение параметров изображения

Необходимо написать сценарий, который для изображения в документе позволяет менять значения* параметров ширины и высоты, создавать рамку вокруг изображения- и задавать альтернативный текст.

Рис 3.2. Изменение параметров изображения с помощью сценария

На рис. 3.2 представлены изображение и поля ввода, позволяющие задать значения, чтобы изменить некоторые параметры изображения. Следующие свойства объекта image: border, width, height, alt соответствуют атрибутам тега <IMG>: border, width, height, alt. В сценарии следует предусмотреть ситуацию, когда значение какого-либо из параметров не задано. Доступ к объекту image осуществляется с помощью значения, указанного в параметре name тега <1мс>. В рассмотренных ранее примерах изменялись такие свойства изображения, как width, чтобы создавать эффект приближения или удаления рисунка, и свойство src при организации смены изображений в документе. На рис. 3.3 приведен вид документа после задания параметров графического объекта и выполнения сценария.

Рис 3.3. Результат выполнения сценария

Приведенный пример иллюстрирует некоторые параметры тега <IMG>. Можно изменять параметры и сразу видеть, как в зависимости от их значений меняется изображение. Сначала в тегах HTML-документа зададим значение параметра name, затем в сценарии получим доступ к различным элементам, используя значение параметра.

HTML-код представлен в листинге 3.1, а.

Листинг 3.1, а. Изменение размеров изображения и толщины рамки вокруг него

<HTML> 

<HEAD>

<TITLE> Исследование свойств изображений </TITLE> 

<script> 

<!-—

function chpict(obj) 

{ var w=obj.wd.value 

var h= obj.hg.value 

if (w !=0) document.mypict.width=w 

if (h !=0) document.mypict.height=h 

document.mypict.border=obj.br.value 

document.mypict.alt=obj.al.value 

}

//--> 

</script> 

</HEAD>

<BODY bgcolor="F8F8FF"> 

<CENTER>

<НЗ>Встраиваемые изображения</НЗ> 

<IMG src=pl.gif name=mypict> 

<FORM name="form1">

Для изменения размеров изображения введите значения одного 

или двух параметров и нажмите кнопку <В>Просмотр</В><br> 

ширина (width): <input type="text" name="wd" size=8><br> 

высота (height): <input type="text" name="hg" size=8><br> 

Для задания рамки введите число, определяющее толщину рамки 

в пикселах, и нажмите на кнопку <В>Просмотр</В><br> 

толщина рамки (border): <input type="text" name="br"

size=8 value=0><br> 

Альтернативный текст (alt): <input type="text"

name="al" size=40><P>

<input type="button" value= "Просмотр" onclick="chpict(form1)"> 

<input type="reset" value="Отмениь"> 

</FORM>

</CENTER> 

</BODY>

</HTML>

В описанном документе имеется лишь одно изображение. Доступ к нему можно получить, воспользовавшись свойством /images/ объекта document, следующим образом: document./images/ [0]. Доступ же к различным свойствам изображения можно получить с помощью свойств самого изображения, например, так:

document./images/[0].width 

document./images/[0].height

document./images/[0].border

document./images/[0].alt

Диалог с пользователем обеспечивается с помощью формы. В последнем примере используется одна форма. Доступ к форме можно получить так: document, forms [0]. Форма содержит шесть элементов, четыре текстовых поля и две кнопки. Свойство elements формы хранит информацию обо всех ее элементах в том порядке, в каком они встречаются в HTML-документе. Получить доступ к объектам формы можно, воспользовавшись свойствами:

document.forms[0].elements[0]

document.forms[0].elements[1]

document.forms[0].elements[2]

document.forms[0].elements[3]

document.forms[0].elements[4]

document.forms[0].elements[5]

В следующем варианте решения задачи (листинг 3.1, б) доступ ко всем значениям осуществляется с помощью свойств /images/ и forms объекта document.

Листинг 3.1, б. Исследование свойств изображений

<HTML> 

<HEAD>

<TITLE> Исследование свойств изображений </TITLE>

<script>

<!--

function chpict1()

{ var w=document.forms[0].elements[0].value 

var h=document.forms[0].elements[1].value 

if (w !=0)

document./images/[0].width=w 

if (h !=0)

document./images/[0].height=h

document./images/[0].border=document.forms[0].elements[2].value

document./images/[0].alt= document.forms[0].elements[3].value 

}

//-—> 

</script> 

</HEAD>

<BODY bgcolor="F8F8FF"> 

<CENTER>

<НЗ>Встраиваемые иэображения</НЗ> 

<IMG src=pl.gif> 

<FORM>

Для изменения размеров изображения введите значения 

одного или двух параметров и нажмите на кнопку <В>Просмотр</В><br> 

ширина (width) : <input type="text" size=8><br> 

высота (height) : <input type="text" size=8><br> 

Для задания рамки введите число, определяющее толщину рамки 

в пикселах, и нажмите на кнопку <В>Просмотр</В><br> 

толщина рамки (border): <input type="text" size=8 value=0><br>

Альтернативный текст (alt): <input type="text" size=40><P> 

<input type="button" value= "Просмотр" onclick="chpict1()"> 

<input type="reset" value="Отменить"> 

</FORM> 

</CENTER> 

</BODY> 

</HTML>

Обратите внимание, что в этом варианте не заданы параметры name в HTML-тегах. В них нет необходимости, т. к. доступ к необходимым значениям осуществлялся на основе объектной модели JavaScript.

  Перестановка изображений

Напишем сценарий, который реализует обмен рисунков в документе. Пусть в документе расположено четыре изображения, пронумерованных от 1 до 4 (рис. 3.4). В текстовых полях указываются номера рисунков, которые необходимо поменять местами. Требуется, чтобы после нажатия кнопки Поменять местами изображения переместились на нужные места.

Рис 3.4. Обмен рисунков в документе

Сначала проверим, правильно ли заданы номера изображений, если это не так, то выдадим сообщение. Переменная z служит для запоминания адреса первого графического изображения. Доступ к изображению с номером r1 производится с помощью конструкции  document, /images/ [r1-1]. Для того чтобы на место изображения с номером ri поместить изображение с номером г2, требуется выполнить оператор присваивания:

document./images/[r1-1].src=document./images/[r2-l].src

И, наконец, на место изображения с номером г2 помещается изображение, которое ранее было на месте с номером ri, и адрес которого запомнили в переменной z:

document./images/[r2-l].src=z

Приведем полностью документ со сценарием (листинг 3.2).

Листинг 3.2. Перестановка изображений с помощью сценария

<HTML> 

<HEAD>

<TITLE>Перестановка изображений</TITLE> 

<script>

function chan(obj) 

{ var rl=Number(obj.al.value) 

var r2=Number(obj,a2.value)

if ((r1<1)||(r1>4)||(r2<1)||(r2>4))

alert ("Неверно заданы номера рисунков!") 

else 

{ var z=document./images/[rl-1] .src

document./images/[r1-1].src=document./images/[r2-1].src; 

document./images/[r2-l].src=z 

} )

</script> 

</HEAD> 

<BODY> 

<CENTER>

<Н4>Галерея рисунков</Н4><br> 

<IMG src="p1.gif" width="90" name="pic1"> 

<IMG src="p2.gif" width="90" name="pic2"> 

<IMG src="p3.gif" width="90" name="pic3"> 

<IMG src="p4.gif" width="90" name="pic4"><br><br> 

<FORM name=form1>

Рисунки с номерами<br> 

<input type="text" name="a1" size=1> и 

<input type="text" name="a2" size=1><P> 

<input type="button" value="Поменять местами"

onClick="chan(form1)"> 

</FORM> 

</CENTER> 

</BODY> 

</HTML>

  Простое вертикальное меню

Напишем сценарий, реализующий вертикальное графическое меню. При наведении курсора мыши на пункт меню меняется цветовая палитра, соответствующая выделенному пункту меню (рис. 3.5).

Такая задача уже решалась при обсуждении событий и реакции на них. Рассмотрим другие способы решения этой задачи.

Как и ранее, каждому пункту меню соответствует два изображения: первое изображение, когда пункт меню не выбран, второе — при выбранном пункте меню, цветовая палитра рисунка изменена. Графические изображения, соответствующие ситуации, когда пункты меню не выбраны, хранятся в файлах с именами pchl.gif, pch2.gif, pch3.gif, pch4.gif, pch5.gif. Соответствующие им графические изображения с измененной палитрой хранятся в файлах с именами wpchl.gif, wpch2.gif, wpch3.gif, wpch4.gif, wpch5.

Рис 3.5. Графическое вертикальное меню

Функция img имеет два параметра. Первый параметр задает выбор пункта меню, второй параметр — п — определяет номер пункта меню. От этого параметра зависит, какое изображение в документе требуется изменить (document, /images/ [n-1] .src), ("wpch"+n+".gif" или pch"+n+".gif). Имя файла формируется динамически и представляет собой конкатенацию строк, одна из составляющих которой — значение второго параметра. Если имена файлов не подчинены общему правилу, то в функции потребуется дополнительный анализ, какой файл подгрузить. Это сделать нетрудно, зная место в документе, из которого произошел вызов функции. Документ со сценарием, реализующий вертикальное графическое меню, представлен в листинге 3.3.

Листинг 3.3. Простое вертикальное меню

<HTML>

<HEAD>

<TITLE>Простое вертикальное меню</TITLE> 

<script language="JavaScript"> 

function img(n, action) 

{if (action)

{document./images/[n-1].src="wpch"+n+".gif"} 

else

{document./images/[n-1].src="pch"+n+".gif"} 

}

</script> 

</HEAD> 

<BODY background="fonl.jpg">

<H2><FONT соlоr="#0000ff">Содержание</FONT></Н2>

<A href="tchl.htm" onmouseover="img(1, 1)" onmouseout="img(1, 0)"> 

<IMG src="pchl.gif" аlt="форматирование текста" border="0"

width="103" height="35"></A><br>

<A href="tch2.htm" onmouseover="img(2, 1)" onmouseout="img(2, 0)"> 

<IMG src="pch2.gif" alt="co3naHne списков" border="0"

width="103" height="35"></A><br>

<A href="tch3.htm" onmouseover="img(3, 1)" onmouseout="img (3, 0)"> 

<IMG src="pch3.gif" alt="nocTpoeHne таблиц" border="0"

width="103" height="35"></A><br>

<A href="tch4.htm" onmouseover="img(4, 1)" onmouseout="img(4, 0)"> 

<IMG src="pch4.gif" а!Ъ="использование графики" border="0"

width="103" height="35"></A><br>

<A href="tch5.htm" onmouseover="img(5, 1)" onmouseout="img(5, 0)"> 

<IMG src="pch5.gif" аlt="создание фреймовой структуры"

border="0" width="103" height="35"></A> <br> 

</BODY> 

</HTML>

  Простое горизонтальное меню

Напишем сценарий, реализующий горизонтальное графическое меню. При наведении курсора мыши на пункт меню изменяется световая гамма так, как изображено на рис. 3.6.

При реализации горизонтального графического меню функция img выполняет те же действия, что и в предыдущем примере. Графические изображения, соответствующие пунктам меню, помещены в таблицу, которая состоит из одной строки и пяти ячеек. В каждую из ячеек помещено изображение для соответствующего пункта. Значения параметров ceilpadding и cellspacing тега <TABLE>, определяющих расстояние между ячейками таблицы и расстояние от содержимого ячейки и границы, равны нулю для того, чтобы создавалось впечатление единой графической панели. Сценарий, реализующий графическое меню, приведен в листинге 3.4.

Рис 3.6. Графическое горизонтальное меню

 Листинг 3.4. Просто горизонтальное меню :

<HTML> 

<HEAD>

<TITLE>Горизонтальное меню</TITLE> 

<script language="JavaScript"> 

function img(n, action) 

{if (action)

{document./images/[n-1],src="wpch"+n+".gif"} 

else

{document./images/[n-1].src="pch"+n+".gif"} 

}

</script> 

</HEAD> 

<BODY background="fonl.jpg">

<H2><FONT со1ог="#0000ff">Содержание</FONT></Н2> 

<TABLE border=0 cellpadding=0 cellspacing=0> 

<TR> 

<TD>

<A href="tchl.htm" onmouseover="img(1, 1)" 

onmouseout="img(1, 0)"> 

<IMG src="pchl.gif" alt="форматирование текста"

border="0" width="103" height="35"></A></TD> 

<TD>

<A href="tch2.htm" onmouseover="img(2, 1)" 

onmouseout="img(2, 0)">

<IMG src="pch2.gif" alt="создание списков" border="0" 

width="103" height="35"></A></TD>

<TD>

<A href="tch3.htm" onmouseover="img(3, 1)" 

onmouseout="img(3, 0)"> 

<IMG src="pch3.gif" alt="nocTpoeHne таблиц"

border="0" width="103" height="35"></A></TD> 

<TD>

<A href="tch4.htm" onmouseover="img(4, 1)" 

pnmouseout="img(4, 0)"> 

<IMG src="pch4.gif" аlt="использование графики"

border="0" width="103" height="35"></A></TD> 

<TD>

<A href="tch5.htm" onmouseover="img(5, 1)" 

onmouseout="img(5, 0)"> 

<IMG src="pch5.gif" alt="co3naHne фреймовой структуры"

border="0" width="103" height="35"></A></TD> 

</TR> 

</TABLE> 

</BODY> 

</HTML>

  Анкета "Нагрузка преподавателя"

Необходимо написать сценарий обработки анкеты преподавателя. В анкете заданы поля, в которые требуется ввести количество часов, отведенных на чтение лекций и проведение практических занятий, и число студентов. Если по предмету читаются лекции, то дополнительно планируется нагрузка: 10% времени от лекционных часов отводится на консультации, и для приема экзамена планируется по 30 минут на человека. Если по предмету проводятся практические занятия, то предусмотрена контрольная работа из расчета 15 минут на человека, зачет из расчета 20 минут на человека. Форма анкеты представлена на рис. 3.7.

Аналогичные задачи неоднократно решались, написать сценарий предлагается в качестве упражнения. Предположим, что нагрузку преподавателя требуется представить в виде диаграммы. В анкете преподавателя заполняются первые три поля, а затем после нажатия кнопки Вычислить в документе должна появиться диаграмма, построенная по значениям тех полей, которые вычислялись в анкете, а именно: контрольные работы, зачеты, консультация, экзамены. Диаграмма представляется с помощью изображений. Сначала в зависимости от исходных данных считаются значения требуемых величин, затем вычисляется величина каждого из столбцов, и нужные изображения помещаются в документ для формирования столбцов диаграммы. Столбцы диаграммы располагаются в ячейках таблицы, для каждого столбца выделена своя ячейка.

Рис 3.7. Пример заполнения анкеты

Рис. 3.8.  Нагрузка с диаграммой

Вторая строка таблицы содержит подписи к столбцам диаграммы. Если подвести курсор мыши к столбцу, то выводится числовое значение, соответствующее столбцу диаграммы. Документ с введенными полями и построенной диаграммой изображен на рис. 3.8.

Приведем для этого случая HTML-код со сценарием (листинг 3.5).

Листинг 3.5. Нагрузка преподавателя с диаграммой

<HTML> 

<HEAD>

<TITLE>Анкета "Нагрузка преподавателя" Posledov A.</TITLE>

<script language=JavaScript> 

<!--

function graph(obj) 

{ var k1 = 0;

var 1 = obj.lec.value 

var p = obj.pract.value 

var s = obj.stud.value 

var tableHeight = 150; 

var knTime=0; 

var eTime=0; 

var krTime=0; 

var zTime=0; 

var d= document

if (s == "") alert("Введите количество студентов?") 

if ((1 != "")&&(1 != "0"))

{ knTime=Math.round( 1*10/100); eTime=Math.round(s*30/60) } 

if ((p != "")&&(! != "0"))

{ krTime=Math.round(s*15/60); zTime=Math.round (s*20/60) } 

sTime = knTime+eTime+krTime+zTime 

kl = tableHeight/sTime;

d./images/[0].height=Math.round(krTime* kl); 

d./images/[0].alt=krTime+" часов"; 

d./images/[1].height=Math.round(zTime*kl); 

d./images/[l].alt=zTime+" часов"; 

d./images/[2].height=Math.round(knTime*kl); 

d./images/[2].alt=knTime+" часов"; 

d./images/[3].height=Math.round(eTime*kl); 

d./images/[3].alt=eTime+" часов";

d./images/[4].height=Math.round(sTime*kl); 

d./images/[4].alt=sTime+" часов"; 

}

function CheckValHours(hours) 

{ if (hours < 0)

alert("Недопустимо значение количества часов меньшее нуля!"); 

}

function CheckValNum(num) 

{ if (num <= 0)

alert("Недопустимо значение меньшее либо равное нулю!"); 

}

//-—> 

</script> 

</HEAD>

<BODY bgcolor=#crcccc> 

<CENTER>

<НЗ>Анкета Squot;Нагрузка преподавателя&quot;</h3> 

<SMALL>После заполнения соответствующих полей для того, 

чтобы увидеть диаграмму, нажмите кнопку <В>Вычислить</В></SMALL> 

<FORM name=data>

<TABLE bgcolor=#cccccc width=300 cellPadding=2

cellSpacing=2 border=l>

<TR><TD align=left><b>Лекции</b> <small>(часов)</small></TD> 

<TD align=left><input type=text name=lec size=5 value=""

onChange="CheckValHours(this.value)"></TD> 

</TR>

<TR><TD align=left><b>Практика</b> <small>(часов)</small></TD> 

<TD align=left><input type=text name=pract size=5 value=""

onChange="CheckValHours(this.value)"></TD> 

</TR> 

<TR><TD align=left><b>Число студентов</b>

<small> (человек) </small></TD> <TD align=leftxinput type=text name=stud size=5 value=""

onChange="CheckValNum(this.value)"></TD> </TR>

<TR align=center><TD colspan=2 bgcolor=#cccccc> <ihput type=button value="Вычислить"

onClick="graph(data)"></TD></TR> 

</TABLE>

</FORM>

<Н4>Диаграмма нагрузки по вычисленным полям<h4>

<TABLE width=212 height=190 cellPadding=0 cellSpacing=l border=0> 

<TR valign=bottom width=100 align=center> 

<TD bgcolor=#aaaaaa height=150>

<IMG src=lxl.gif width=75 height=0 border=0></TD> 

<TD bgcolor=#aaaaaa height=150>

<IMG src=lxl.gif width=75 height=0 border=0></TD> 

<TD bgcolor=|aaaaaa height=150>

<IMG src=lxl.gif width=75 height=0 border=0></TD> 

<TD bgcolor=#aaaaaa height=150>

<IMG src=lxl.gif width=75 height=0 border=0></TD> 

<TD bgcolor=#aaaaaa height=150>

<IMG src=lxl.gif width=75 height=0 border=0></TD> 

</TR> 

<TR valign=top align=center width=100>

<TD height=40><small>Контрольная</small></ТD> 

<TD height=40><small>Зачет</small></TD> 

<TD height=40><small>Консультации</small></TD> 

<TD height=40><small>Экзамен</small></TD> 

<TD height=40><small>Bceгo</small></TD> 

</TR> 

</TABLE> 

</CENTER> 

</BODY> 

</HTML>

  Диаграмма в анкете преподавателя

Необходимо написать сценарий обработки анкеты преподавателя. В анкете заданы поля и требуется вычислить те значения, которые определены в предыдущем примере. Кроме того, для дополнительной нагрузки необходимо построить диаграмму, которая изображена на рис. 3.9. При наведении курсора мыши на соответствующее поле выводится вычисленное значение.

Поля, соответствующие разным категориям нагрузки, имеют разный цвет. В этом случае в зависимости от полученных значений вычисляется ширина графического изображения для каждого из видов нагрузки. Считается, что ширина всей таблицы соответствует суммарной дополнительной нагрузке. Самостоятельно напишите сценарий и создайте документ.

Рис. 3.9.  Диаграмма дополнительной нагрузки

  Изменение таблицы при разных значениях ее параметров

Напишем сценарий, который позволяет продемонстрировать, как будет меняться таблица и ее ячейки при изменении значений параметров: border, cellspacing, cellpadding.

Напомним, что параметр border управляет видом рамки вокруг каждой ячейки, отображает линию сетки таблицы и вокруг всей таблицы. По умолчанию рамки не рисуются. Численное значение параметра определяет толщину рамок в пикселах, рисуемую вокруг всей таблицы. На толщину рамок вокруг каждой ячейки это значение не влияет. Параметр cellspacing используется в виде ceiispacing=n, где п— численное значение параметра, определяющее расстояние между рамками двух смежных ячеек, как по горизонтали, так и по вертикали. Значение задается в пикселах и по умолчанию принимается равным двум. При значении cellspacing=o рамки смежных ячеек сольются, создадут впечатление единой сетки таблицы. Параметр cellpadding применяется в виде celipadding=n, где п — численное значение параметра в пикселах, которое может быть опущено. Величина п указывает на размер отступа между рамкой ячейки и данными внутри ячейки. По умолчанию значение равно 1. Все три параметра действуют независимо друг от друга; если какой-либо параметр опущен, то его значение берется по умолчанию.

Пусть таблица состоит из четырех ячеек, в каждой из которых хранится изображение, как на рис. 3.10.

Рис. 3.10.  Изображения и таблицы

Для того чтобы воздействие параметров было наглядным, специально выбран разный фон для документа, таблицы и ячеек таблицы. Можно вводить значения для указанных параметров, изображение таблицы в документе будет изменено в соответствии с параметрами. В сценарии требуется изменить значения свойств таблицы.

Используем еще один способ доступа к элементам форм. При задании тегов можно применять параметр id. В теге <TABLE> задан параметр id="itab". Модификация размера рамки таблицы произойдет при изменении свойства document.all("itab") .border. Изменение других свойств таблицы произойдет лишь в случае, когда в соответствующих полях расположены числовые данные. Сценарий приведен в листинге 3.6.

Листинг 3.6. Изменение толщины рамки и полей внутри ячейки таблицы

<HTML> 

<HEAD>

<TITLE>Таблицы, толщина рамки, ширина отступов</TITLE>

<script>

<!-—

function rset(obj) 

{ document.all("itab").border=l

document.all("itab").cellSpacing=15 

document.all("itab").cellPadding=10 

obj.bor.value=l 

obj.cells.value=15 

obj.cellp.value=10 

}

function set(obj)

{ document.all("itab").border=Number(obj.bor.value) 

if (obj.cells.value != "")

document.all("itab").cellSpacing=Number(obj.cells.value) 

if (obj.cellp.value != "")

document.all("itab").cellPadding=Number(obj.cellp.value) 

}

//-—> 

</script> 

</HEAD> 

<BODY background="fon1.jpg">

<H4 align=center>Таблицы, границы, ширина отступов</Н4> 

<TABLE id="itab" border=l cellspacing=15 cellpadding=10

bgcolor=silver background="fon5.gif" align=center> 

<TR>

<TD bgcolor=silver><A href="ruins.gif">

<IMG src="ruins.gif" border="0" width="120"></A></TD> 

<TD bgcolor=silverXA href="sphinx.gif">

<IMG src="sphinx.gif" border="0" width="120"></A></TD></TR> 

<TR>

<TD bgcolor=silver><A href="b04.jpg">

<IMG src="b04.jpg" border="0" width="120"></A></TD>

<TD bgcolor=silver><A href="b07.jpg">

<IMG src="b07.jpg" border="0" width="120"></A></TD></TR> 

</TABLE>

Выберите значение параметров, которые требуется изменить, 

и нажмите кнопку <В>Выполнить</В> 

<FORM name="form1">

<PRE> 

BORDER      <input type="text" size=8 name=bor value=l> Толщина рамки

CELLSPACING <input type="text" size=8 name=cells value=15> Ширина промежутка между ячейками

CELLPADDING <input type="text" size=8 name=cellp value=10> Поля внутри ячейки

</PRE>

<input type="button" value= "Выполнить" onclick="set(form1)"> 

<input type="reset" value= "Обновить" onclick="rset(form1)"> 

</FORM> 

</BODY> 

</HTML>

Рис. 3.11.  Пример работы сценария создания компактной таблицы

Считается, что смежные ячейки таблицы имеют общую границу, однако, в HTML-таблицах по умолчанию между ячейками оставляется место. Для того чтобы казалось, что смежные ячейки имеют общую границу, надо установить параметр ceiispacing равным нулю.

Наиболее компактная таблица получится в случае, когда значения рассмотренных трех параметров равны 0. Тогда ячейки окажутся расположенными вплотную друг к другу. Если все ячейки таблицы содержат рисунки одинакового размера и эти рисунки требуется расположить вплотную друг к другу, то следует установить значения параметров равными нулю. Таблица примет вид как на рис. 3.11, если значения всех трех параметров задать равными нулю.

  Упражнения

1. В анкете для каждого из пяти сотрудников приводятся данные: фамилия, зарплата, количество детей. Требуется написать сценарий для определе-ния дохода в семье на человека. Кроме того, необходимо определить количество сотрудников, имеющих минимальный доход на человека. Постройте диаграмму, отражающую доход в семье на человека.

2. В анкете для каждого из шести сотрудников приводятся данные: фамилия и год приема на работу. Требуется написать сценарий вычисления стажа работы и определения максимального числа сотрудников с одинаковым стажем. Постройте диаграмму, отражающую стаж работы сотрудников.

3. В анкете для каждого из шести сотрудников приводится информация: фамилия и зарплата. Решено каждому из сотрудников назначить премию по принципу: если его зарплата меньше, чем средняя, то размер премии составляет 50% от зарплаты, в остальных случаях — 30% от зарплаты. Требуется написать сценарий определения суммы, выдаваемой сотруднику на руки (зарплата плюс премия). Кроме того, необходимо определить количество сотрудников, которые получили на руки максимальную сумму.

4. Приводятся данные о закупках пяти наименований товаров: цена за единицу и количество приобретенных экземпляров. Напишите сценарий, определяющий сумму, затраченную на приобретенные товары. Определите, имеются ли товары, на которые потрачена одинаковая сумма, и сколько их. Постройте диаграмму, отражающую затраченные суммы на приобретение разных товаров.

5. В анкете для каждого из десяти студентов приводится информация: фамилия и две оценки за контрольную работу. Студенты разделяются на несколько категорий. Категория "отличники",состоит из студентов, у которых обе контрольные написаны на оценку 5, к категории "хорошо успевающие" относятся студенты, у которых оценка за каждую контрольную — 4 или 5, но студент не отличник. Категорию "успевающие" составляют студенты, у которых хотя бы одна контрольная написана на 3, наконец "неуспевающие" — те студенты, которые имеют 2 хотя бы за одну контрольную. Требуется написать сценарий определения числа студентов в каждой категории. Постройте диаграмму распределения студентов по категориям.

6. В анкете заполняется информация о шести студентах: фамилия и четыре оценки за сессию. Напишите сценарий определения категории студента и количество человек в каждой категории. Категории определяются следующим образом: сдавшие все экзамены на 5 относятся к категории "отличники", имеющие хотя бы одну 2 — к категории "неуспевающие", все остальные студенты относятся к категории "успевающие".

7. По результатам тестирования заполняется анкета: фамилия и результат выполнения каждого теста (плюс, если успешно, и минус, если тест не выполнен). Если выполнены все тесты, то оценка за работу 5, если выполнены четыре теста, то оценка 4, если выполнены три теста, то оценка 3, в остальных случаях оценка 2. Напишите сценарий вычисления оценки и формирования сводки. В сводке содержатся сведения о количестве студентов, получивших за работу 5, 4, 3, 2.



Опубликовал admin
12 Авг, Четверг 2004г.



Программирование для чайников.