НазадСодержаниеВперед

Переключатели

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

Данные удобно представлять с помощью элемента управления "переключатель" (или "радиокнопка") в том случае, когда из нескольких вариантов может быть выбран лишь один. Например, для указания возраста можно задать интервалы:

Пользователь может выбрать тот интервал, который определяет его возраст. Оценки, полученные на экзамене, также удобно представить переключателем, т. к. каждый студент способен получить лишь одну из оценок (2, 3, 4 или 5). Для представления информации о полученном зачете достаточно двух радиокнопок. С помощью переключателя можно представлять информацию о семейном положении, образовании и многое другое.

Предположим, что некоторая фирма принимает заказы на изготовление витражей. Заказчик должен выбрать форму витража, количество, указать размеры, материал и др. Требуется определить стоимость заказа. Мы рассмотрим лишь фрагмент, в котором выбирается форма витража. Этот выбор осуществляется с помощью переключателя (или радиокнопки). Элемент "переключатель" отображается в виде круглой кнопки и существует только в составе группы подобных элементов. Может быть осуществлен выбор лишь одного элемента группы. Все элементы группы должны иметь одинаковое значение параметра name. Обязательный параметр value должен иметь уникальное значение для каждого элемента группы.

Пусть для выбора фигуры задана следующая форма:

<FORM name="forml"> 

Введите значение

<input type="text" name="data" size=10><hr> 

Укажите форму:<br> 

<input type="radio" name="fv" value=l>квадрат<br>

<input type="radio" name="fv" value=2>Kpyr<br> 

<input type="radio" name="fv" value=3>треугольник<hr> 

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

Площадь: <input type="text" name="res" size=10> 

</FORM>

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

Так как объект forms имеет свойство-массив elements , в котором содержатся ссылки на элементы формы в порядке их перечисления в теге <FORM> , то получить доступ к первому элементу формы можно либо с помощью значения параметра name этого элемента (document.formi.data), либо используя объектную модель JavaScript ( document.forms[0].elements[0] ). Второй элемент рассматриваемой формы можно получить, если воспользоваться конструкцией document.forms[0].elements[1] . Это элемент-переключатель, определенный в составе группы элементов. В рассматриваемом примере группа элементов состоит из трех переключателей. В одну группу входят элементы с одинаковым значением параметра name. Доступ к следующим элементам группы может быть осуществлен так: document.forms[0].elements[2], document.forms [0] . elements [3] . Обязательный параметр value должен иметь уникальное значение для каждого элемента группы. Пользователь может выбрать только один вариант.

  Вычисление площади фигуры

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

Площадь рассматриваемых фигур считается по формуле kxа 2 , где k — коэффициент, зависящий от формы выбранной фигуры; а — задаваемое пользователем значение. Вычисления будут проще, если коэффициент k указать в качестве значения параметра value соответствующего переключателя. Щелчок на элементе "переключатель" соответствует событию click, обработка которого заключается в вызове функции test. Функция имеет единственный параметр, значение параметра — value переключателя, которое служит для вычисления площади фигуры.

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

Листинг 4.1. Вычисление площади выбранной с помощью переключателя фигуры

<HTML> 

<HEAD>

<TITLE>Данные из формы типа "переключатель". Событие Click</TITLE>

<script language="JavaScript">

<!—-//

function test (k) 

{ var a= form1.data.value 

if (a !="" )

form1.res.value= k*Math.pow(a,2) 

else alert ("Введите значение") 

}

//-—> 

</script> 

</HEAD> 

<BODY>

<FORM name="form1"> 

Введите значение

<input type="text" name="data" size=10> 

<hr>

Укажите форму <br> 

<input type="radio" name="fv" value=l

onClick="test(forml.elements[1].value)">квадрат<br> 

<input type="radio" name="fv" value=3.14

onClick="test(forml.elements[2].value)">круг<br> 

<input type="radio" name="fv" value=0.42

onClick="test(forml.elements[3].value)">треугольник<hr> 

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

Площадь: <input type="text" name="res" size=10> 

</FORM> 

</BODY> 

</HTML>

Перепишем функцию test, осуществляющую доступ к элементам формы через свойство-массив elements.

function test (k)

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

if (a !="" )

document.forms[0].elements[5].value= k*Math.pow(a,2) 

else alert ("Введите значение") 

}

В следующем примере проверяется правильность обработки данных элемента управления "переключатель". Объект radio имеет свойства name, type, value. Событие FOCUS возникает, когда элемент формы получает фокус. При получении фокуса переключателем в поле для многострочного текста отображаются значения свойства для выбранного переключателя.

  Свойства переключателя

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

Рис 4.1. Свойства переключателя

Группа элементов состоит из четырех переключателей, пятый элемент формы — поле ввода многострочного текста. При выполнении сценария формируется строка s, содержащая требуемые значения. Фактическим параметром функции обработки события test является элемент формы — переключатель, а не значение параметра value выбранного переключателя, как в предыдущем примере. Далее в сценарии для получения свойств переключателя ИСПОЛЬЗУЮТСЯ конструкции obj. value, obj.name, obj.type. В этом примере в качестве значения параметра value в переключателе применяется строковый литерал.

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

Листинг 4.2. Свойства выбранного элемента-переключателя

<HTML> 

<HEAD>

<TITLE>Данные из формы типа "переключатель". Событие Focus</TITLE> 

<script language="JavaScript"> 

<!—- //

function test -(obj)

{ var з="свойство value: " + obj.value + "\n\r" + 

"свойство name: " + obj.name + "\n\r" + 

"свойство type: " + obj.type 

form1.elements[4].value=s 

}

//--> 

</script> 

</HEAD> 

<BODY>

<FORM name="form1">

Выберите форму витража<br>

<input type="radio" name="fv" value="прямоугольник

onFocus=test(forml.elements[0])>прямоугольник<br> 

<input type="radio" name="fv" value="квaдpaт"

onFocus=test(forml.elements[1])>квадрат<br> 

<input type="radio" name="fv" value="тpeyгoльник"

onFocus=test(forml.elements[2])>треугольник<br> 

<input type="radio" name="fv" value="Kpyr"

onFocus=test(forml.elements[3])>круг<br> 

Тест: <br>

<textarea name="res" cols=55 rows=5></textarea><br> 

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

</FORM> 

</BODY> 

</HTML>

Объект "переключатель" содержит свойство form, значение которого соответствует форме, где расположен переключатель. Это обеспечивает доступ к объекту-родителю, а, следовательно, и к его свойствам.

  Свойства формы

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

Если, как в предыдущем примере, в функцию test будем передавать в качестве параметра выбранный элемент. Тогда в сценарии, выполняя конструкцию obj. form, мы получим доступ к форме, на которой расположен элемент. Чтобы определить имя формы и количество элементов на ней, следует обратиться к свойствам obj. form.name и obj. form, length. Поле ввода многострочного текста в форме является пятым элементом управления, для изменения значения value которого в сценарии можно воспользоваться оператором присваивания

obj.form.elements[4].value=s

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

Листинг 4.3. Свойства формы, в которой расположен переключатель

<HTML> 

<HEAD>

<TITLE>Данные из формы типа "переключатель". Событие Blur</TITLE> 

<script language="JavaScript"> 

<!—- //

function test (obj)

{ var s="свойство value переключателя: " + obj.value + "\n\r" + 

"свойство name формы: "+obj.form.name + "\n\r" + 

"Число элементов формы: " + obj.form.length 

obj.form.elements[4],value=s 

}

//-—> 

</script> 

</HEAD> 

<BODY>

<FORM name="form1">

Выберите форму витража<br>

<input type="radio" name="fv" value="прямоугольник"

onBlur="test(forml.elements[0])">прямоугольник<br>

<input type="radio" name="fv" value="квадрат"

onBlur="test(forml.elements[1])">квадрат<br> 

<input type="radio" name="fv" value="тpeyгoльник"

onBlur="test(forml.elements[2])">треугольник<br> 

<input type="radio" name="fv" value="Kpyr"

onBlur="test(forml.elements[3])">круг<br> 

Тест: <br>

<textarea name="res" cols=45 rows=5></textarea><br> 

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

</FORM> 

</BODY> 

</HTML>

На рис. 4.2 приведен вид документа, когда третий переключатель формы потерял фокус.

Рис 4.2. Свойства формы с переключателем

  Определение выделенного элемента

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

Свойство checked переключателя возвращает логическое значение true, если тот установлен, и false — в противном случае. Выяснить, установлен ли переключатель, являющийся первым элементом формы с именем forml, можно по значению следующего выражения:

(document.forml.elements[0]).checked

Приведем программу, которая демонстрирует работу с переключателем (листинг 4.4).

Листинг 4.4. Определение выделенного элемента в переключателе

<HTML>

<HEAD>

<TITLE>Данные из формы типа "переключатель". Выделенный элемент</TITLE> 

<script language="JavaScript"> 

<!-— //

function vid() 

{ var d=document 

var k=0; 

if ((d.forml.elements[0]).checked)

k=(d.forml.elements[0]).value 

else

if ((d.forml.elements[1]).checked)

k=(d.forml.elements[1]).value 

else

if ((d.forml.elements[2]).checked) 

k=(d.forml.elements[2]).value

else

if ((d.forml.elements[3]).checked)

k=(d.forml.elements[3]).value 

d.forml.elements[6].value=k 

}

//--> 

</script> 

</HEAD> 

<BODY>

<FORM name="form1">

Выберите форму витража<hr>

<input type="radio" name="fv" value=l>прямоугольник<br> 

<input type="radio" name="fv" value=2>квадрат<br> 

<input type="radio" name="fv" value=3>тpeyгoльник<br>

<input type="radio" name="fv" value=4>Kpyr<hr> 

<input type="button" value="Bьшoлнить" onClick="vid()"> 

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

Тест: <input type="text" name="res"> 

</FORM> 

</BODY> 

</HTML>

В следующем примере продемонстрируем использование параметра id для анализа данных, задаваемых с помощью переключателя.

  Уникальные имена

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

Листинг 4.5. Уникальные имена

<HTML> 

<HEAD>

<TITLE>Данные, представленные переключателем. Идентификаторы</TITLE> 

<script language="JavaScript"> 

<!-—//

function vid() 

{ var d=document 

var k=0;

if (d.all("i1").checked) k=l 

else

if (d.all("i2").checked) k=2 

else

if (d.all("i3").checked) k=3 

else

if (d.all("i4").checked) k=4 

d.all("resch").value=k 

}

//-—> 

</script> 

</HEAD>

<BODY>

<FORM name="form1">

Выберите форму витража<hr>

<input type="radio" name="fw" value=l id="i1">пpямoyгoльник<br> 

<input type="radio" name="fw" value=2 id="i2">квадрат<br> 

<input type="radio" name="fw" value=3 id="i3">треугольник<br> 

<input type="radio" name="fw" value=4 id="i4">Kpyr<br> 

<hr>

<input type="button" value="Выполнить" onClick="vid()"> 

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

<input type="text" name="res" id="resch"> 

</FORM> 

</BODY> 

</HTML>

  Выбор параметров обтекания изображения текстом

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

Если значение параметра align равно Left, то изображение прижимается к левому краю окна просмотра браузера, а текст или другие элементы документа "обтекают" изображение с правой стороны. Текст, размещаемый рядом с изображением, может занимать несколько строк. В примере на рис. 4.3. значение параметра align задано равным Right, поэтому изображение прижато к правому полю окна браузера, а текст обтекает изображение слева. Текст занимает несколько строк. Для того чтобы изображение и текст не "сливались", можно задать параметры, значения которых определяют величину отступа текста от изображения по горизонтали и вертикали. В приведенном примере значения этих величин равны 15 и 10 соответственно. По умолчанию значение параметра align равно Left, а.значение отступов — 0. При нажатии на кнопку Обновить для изображения и текста будут установлены значения параметров, принимаемых по умолчанию.

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

Рис. 4.3.   Обтекание текстом изображения

Листинг 4.6. Обтекание текстом изображения

<HTML> 

<HEAD>

<TITLE>Изображение и текст. Обтекание</TITLE>

<script>

<!-—

function chpict(obj) 

{ var h=obj.hsp.value

var v=obj.vsp.value 

document.mypict.hspace=h 

document.mypict.vspace=v 

if ((obj.elements[0]).checked)

document.mypict.align="Left" 

else

document.mypict.align="Right"

)

function rset(obj) 

{ document.mypict.align="Left" 

document.mypict.hspace=0 

document.mypict.vspace=0 

obj.hsp.value=0 

obj.vsp.value=0 

}

//-—> 

</script> 

</HEAD> 

<BODY>

<CENTER>

<Н4>Изображение и текст.

Обтекание и отделение текста от изображения</Н4> 

</CENTER> 

<FORM name="form1">

Выберите значение параметра выравнивания 

и введите значения отступов по горизонтали и вертикали, 

нажмите кнопку <В>Просмотр</В>.<br> 

<PRE>

<input type="radio" name="alg" checked value=ld>(left) изображение выравнивается по левому краю

<input type="radio" name="alg" value=rd>(right) изображение выравнивается по правому краю

отступ по горизонтали (HSPASE): <input type="text" name="hsp" size=8 value=0>

отступ по вертикали (VSPASE): <input type="text" name="vsp" size=8 value=0>

</PRE>

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

<input type="reset" value="Отменить" onclick="rset(form1)"> </FORM>

<TABLE bgcolor="F8F8FF">

<ТR><TD>Иван Иванович Шишкин является одним из основоположников 

русского национального пейзажа. 

<IMG src=pl.jpg name=mypict align=left border=3 width=310>

В полотне "Рожь" Шишкин создал образ большой эпической силы 

и подлинно монументального звучания. Могучая, полная 

богатырских сил природа, богатый, привольный край. 

Создавая это произведение, Шишкин удачно сочетал в нем 

точность характеристики форм природы с широкой, обобщенной 

их трактовкой."Картины Шишкина покоряют пониманием 

характера родной природы, своей спокойной эпической силой 

и широким размахом, которые подстать всему строю 

привольного русского пейзажа. (Т. Юрова) 

</TD></TR> 

</TABLE> 

</BODY> 

</HTML>

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

  Размещение изображения относительно строки

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

Параметр align в рассматриваемом случае может принимать одно из шести значений, которые задаются переключателем. На рис. 4.4 приведен документ в случае, когда выбрано значение параметра align равное ТЕХТТОР.

При задании пользователем значения параметра выравнивания выбранный элемент получает фокус, и как реакция на это событие, выполняется функция set. В функции set с параметром obj анализируется значение obj .value, и переменной s присваивается соответствующее значение.

Рис 4.4. Параметры горизонтального выравнивания

HTML-код, содержащий сценарий, обеспечивающий описание действий в зависимости от значения параметра, приведен в листинге 4.7.

Листинг 4.7. Расположение изображения относительно строки

<HTML> 

<HEAD>

<TITLE>Расположение изображения относительно строки</TITLE>

<script>

<!-—

var s1="Верхняя граница изображения выравнивается " +

"по самому высокому элементу текущей строки" 

var s2="Верхняя граница изображения выравнивается " +

"по самому высокому текстовому элементу текущей строки" 

var s3="Выравнивание середины изображения " +

"по базовой линии текущей строки" 

var s4="Выравнивание середины изображения " +

"по середине текущей строки" 

var s5="Выравнивание нижней границы изображения по базовой линии " +

"текущей строки"

var s6="Выравнивание нижней границы изображения " + 

"по нижней границе текущей строки"

var s=""

function set(obj) 

{ switch (Number(obj.value)) 

{ 

case 0: s=sl; break; 

case 1: s=s2; break; 

case 2: s=s3; break; 

case 3: s=s4; break; 

case 4: s=s5; break; 

case 5: s=s6; break; 

}

obj.form.elements[6].value=s 

}

//--> 

</script> 

</HEAD> 

<BODY bgcolor="F8F8FF">

<H3 align=center>Расположение изображения относительно строки</НЗ> 

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

<TABLE border=2>

<TR><TD align=center><H4>Значение параметра выравнивания align</H4> 

<TD align=center><H4>Действия при выбранном значении

параметра</Н4></ТR> 

<TR><TD>

<FORM name="form1">

<input type="radio" name="ln" value=0 checked

onFocus="set(forml.elements[0])">TOP<br> 

<input type="radio" name="ln" value=l

onFocus="set(forml.elements[1])">TEXTTOP<br> 

<input type="radio" name="ln" value=2

onFocus="set(forml.elements[2])">MIDDLE<br> 

<input type="radio" name="ln" value=3

onFocus="set(forml.elements[3])">ABSMIDDLE<br> 

<input type="radio" name="ln" value=4

onFocus="set(forml.elements[4])">BOTTOM или BASELINE<br> 

<input type="radio" name="ln" value=5

onFocus="set(forml.elements[5])">ABSBOTTOM<br> 

<FORM name="form1"> 

</TD> 

<TD align=center> <textarea name="res" cols=30 rows=4>

Верхняя граница изображения выравнивается по самому высокому 

элементу текущей строки </textarea><br></TD></TR>

</TABLE> 

<Р>

<input type="reset" value="Обновить"> 

</BODY> 

</HTML>

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

  Изображение как часть строки

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

Рис. 4.5.   Расположение изображения относительно строки

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

Документ, содержащий HTML-код для решения задачи, представлен в листинге 4.8.

Листинг 4.8. Изображение как часть строки. Параметры выравнивания

<HTML> 

<HEAD>

<TITLE>Расположение изображения относительно строки</TITLE>

<script>

<!-—

function set(obj)

{ if(obj.elements[0].checked) document.mypict.align="TOP" 

else

if(obj.elements[1].checked) document.mypict.align="TEXTTOP" 

else

if(obj.elements[2].checked) document.mypict.align="MIDDLE" 

else 

if(obj.elements[3].checked)

document.mypict.align="ABSMIDDLE" 

else

if(obj.elements[4].checked)

document.mypict.align="BOTTOM" 

else

if(obj.elements[5].checked)

document.mypict.align= "ABSBOTTOM" }

//--> 

</script> 

</HEAD>

<BODY bgcolor="F8F8FF"> 

<CENTER> 

<H3 align=center>Расположение изображения относительно строки</Н3>

Выберите значение параметра и нажмите кнопку <В>Просмотр</В>.

<TABLE border=2> 

<TR>

<ТD><Н4>Значения параметра выравнивания align</H4> 

</TR> 

<TR><TD>

<FORM name="form1">

<input type="radio" name="im" value="top" checked>TOP<br> 

<input type="radio" name="im" value="texttop">TEXTTOP<br> 

<input type="radio" name="im" value="middle">MIDDLE<br> 

<input type="radio" name="im" value="absmiddle">ABSMIDDLE<br> 

<input type="radio".name="im" value="botton">

BOTTOM или BASELINE <br>

<input type="radio" name="im" value="absbotton">ABSBOTTOM<br> 

</FORM> 

</TD></TR> 

</TABLE><br>

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

<input type="reset" value="Обновить"><P> 

</CENTER> 

<TABLE border=2 bgcolor="#FFDCDC">

<ТR><TD>Параметры выравнивания <IMG src="p511.jpg" name="mypict"

align=TOP>

задают расположение изображения относительно строки текста. 

В этом случае изображение является обычным элементом строки.

</TD></TR></TABLE> 

</BODY> 

</HTML>

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

  Расположение текста и изображения в ячейке таблицы

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

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

Рис. 4.6.  Расположение изображения внутри ячейки

После нажатия кнопки Просмотр выполняется функция, анализирующая, какие параметры выбраны, и присваивает определенные значения атрибутам выравнивания содержимого ячейки. В правой части документа изображение занимает определенное параметрами выравнивания место в ячейке таблицы. Доступ к ячейке таблицы осуществляется по значению параметра id. При нажатии кнопки Обновить изображение требуется вернуть на место. По умолчанию горизонтальное выравнивание предполагает расположение содержимого по левому краю, вертикальное выравнивание — по верхней границе. HTML-код, содержащий сценарии, представлен в листинге 4.9.

Листинг 4.9. Расположение текста или изображения внутри ячейки таблицы

<HTML> <HEAD>

<TITLE>Расположение текста или изображения

внутри ячейки таблицы</TITLE> 

<script> 

<!-—

function set(obj) 

{ var d=document

if(obj.elements[0].checked) {d.all("itab").align="LEFT"} 

else

if(obj.elements[1].checked) {d.all("itab").align="MIDDLE"} 

else

if(obj.elements[2].checked) {d.all("itab").align="RIGHT"} 

if(obj.elements[3].checked) {d.all("itab").vAlign="TOP"} 

else

if(obj.elements[4].checked) {d.all("itab").vAlign="MIDDLE"} 

else

if(obj.elements[5].checked) {d.all("itab").vAlign="BOTTOM"} 

}

function rset(obj) 

{ var d=document

d.all("itab").align="LEFT" 

d.all("itab").vAlign="TOP" 

}

//—> 

</script> 

<BODY bgcolor="F8F8FF">

<H3 align=center>Pacпoлoжeниe текста или изображения

внутри ячейки</Н3>

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

и нажмите кнопку <В>Просмотр</В>. 

<TABLE border=2>

<TR>

<TD><H4 align=center>Значения параметров выравнивания

таблицы</Н4> 

<TD><H4 align=center>Действия при выбранных значениях

параметров</Н4> 

</TR> 

<TR> 

<TD>

<FORM name="form1">

Горизонтальное выравнивание<br>

<input typ'e="radio" name="al" value=0 checked>LEFT<br> 

<input type="radio" name="al" value=l>CENTER<br> 

<input type="radio" name="al" value=2>RIGHT<P> 

Вертикальное выравнивание<br>

<input type="radio" name="vl" value=3 checked>TOP<br> 

<input type="radio" name="vl" value=4>MIDDLE<br> 

<input type="radio" name="vl" value=5>BOTTOM<br> 

</FORM> 

</TD> 

<TD id="itab" bgcolor=blue background="firering.jpg" height=160

valign=TOP align=LEFT>

<IMG src="6rkranim.gif" border=2 height=120> 

</TD> 

</TR>

</TABLE><P>

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

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

</BODY> 

</HTML>

Таблицы в HTML используются не только для представления табличных данных, но и как средство размещения на странице различных текстовых и графических объектов. Можно задать цвет фона таблицы или фоновое изображение, отличное от цвета фона или фонового изображения всего документа. Рамку с тенью можно указать, варьируя толщину рамки таблицы. Интересные эффекты получаются, если в таблицу поместить изображение, а затем подбирать для нее цвет фона. При выборе фона изображение каждый раз будет в разном обрамлении.

  Фоновое изображение таблицы

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

Варианты для выбора фонового изображения расположим в документе слева, а справа поместим таблицу, для которой определяется фон, и которая содержит изображение (рис. 4.7).

Рис. 4.7.   Выбор фона таблицы и толщены рамки

Атрибут CELLSPACING назначает ширину промежутка между ячейками. В рассматриваемом примере чем больше значение этого параметра, тем шире рамка вокруг изображения. Задание фонового изображения для таблицы определяет цвет рамки вокруг изображения. Имена графических файлов, используемых в качестве фонового изображения: fonl.gif, fon2.gif, ..,, fon8.gif . Все графические файлы содержатся в текущей папке.

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

Листинг 4.10. Выбор фонового изображения для таблицы и задание толщины рамки

<HTML> 

<HEAD>

<TITLE><Таблицы, графика, фон</TITLE>

<script>

<!-—

function gr(m)

{ document.all("tab").background="fon"+m+".-gif" } 

function set(obj) 

{ if (obj.bor.value != "")

document.all("tab").border=obj.bor.value} 

function rset()

{ document.all("tab").background="fon4.gif" 

document.all("tab").border=15 

form1.bor.value=15 

}

//--> 

</script> 

</HEAD>

<BODY background="fonl.gif" bgcolor=green> 

<H3 align=center>Taблицы, графика, фон</НЗ> 

<TABLE border=l align=center> 

<TR><TD>

<FORM name="form1">

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

value=15 onChange="set(forml)"><br> 

Выберите фон для таблицы<br> 

<TABLE border=2 align=center> 

<TR>

<TD align=center><IMG src="fonl.gif"

width=20 height=50></TD> 

<TD align=center><IMG src="fon2.gif"

width=20 height=50> </TD> 

<TD align=center><IMG src="fon3.gif"

width=20 height=50></TD> 

<TD align=center><IMG src="fon4.gif"

width=20 height=50></TD> 

<TD align=center><IMG src="fon5.gif"

width=20 height=50></TD> 

<TD align=center><IMG src="fon6.gif"

width=20 height=50></TD>

<TD align=center><IMG src="fon7 .gif"

width=20 height=50></TD> 

<TD align=center><IMG src="fon8 .gif"

width=20 height=50></TD> 

</TR> 

<TR>

<TD align=center><input type="radio" name="op" value=l

onfocus="gr(1) "></TD> 

<TD align=center><input type="radio" name="op" value=2

onfocus="gr(2)"></TD> 

<TD align=center><input type="radio" name="op" value=3

onfocus="gr (3) "></TD> 

<TD align=center><input type="radio" name="op" value=4

onfocus="gr(4)"></TD> 

<TD align=center><input type="radio" name="op" value=5

onfocus="gr(5)"></TD> 

<TD align=center><input type="radio" name="op" value=6

onfocus="gr(6)"></TD> 

<TD align=center><input type="radio" name="op" value=7

onfocus="gr(7)"></TD> 

<TD align=center><input type="radio" name="op" value=8

onfocus="gr (8) "></TD> 

</TR> 

</TABLE> 

</FORM><br> 

<CENTER>

<input type="reset" value="Обновить " onClick="rset{)"> 

</TD> 

<TD align=center >

<TABLE id="tab" border=15 cellspacing=30 cellpadding=10

height=160 bgcolor=green align=center> 

<TR><TD bgcolor=silver><IMG src="bfly.gif" alt="Поздравление"

align=center></TD></TR> 

</TABLE> 

</TD></TR> 

</TABLE> 

</BODY> 

</HTML>

  Фоновое изображение документа, таблицы и ячейки таблицы

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

Как и в предыдущем случае, фоновое изображение задается с помощью кнопок-переключателей. В верхней части документа располагается таблица, состоящая из строки из трех ячеек. В каждую из ячеек помещено одно и то же изображение, размеры которого различны. Далее располагается таблица, в которой задаются параметры с помощью переключателей. Если выбрана ячейка таблицы, то фоновое изображение назначается всем ячейкам. На рис. 4.8. заданы фоновые изображения для всех элементов документа.

Рис. 4.8.   Фон для документа, таблицы и ячейки

Доступ к документу, таблице и ячейкам таблицы осуществляется с помощью параметра id. При попадании фокуса на переключатель функции обработки события передается параметр, который используется при формировании имени графического файла, соответствующего выбранной кнопке. Если имена графических файлов не удовлетворяют описанному условию, то сценарий несколько усложнится. Задавать фоновое изображение отдельным частям документа можно в произвольном порядке. На рис. 4.8. приведена таблица, толщина рамки которой равна нулю. Приведем HTML-код документа, изображенного на рисунке (листинг 4.11).

Листинг 4.11. Фоновое изображение документа, таблицы, ячейки

<HTML> 

<HEAD>

<TITLE>Фоновое изображение документа, таблицы, ячейки</TITLE>

<script>

<!-—

function gr(i) 

{ var d=document

if (d.forml.bor.value !="")

{ d.all("itab").border=Number(d.forml.bor.value) } 

if (d.forml.elements[1].checked) 

{ d.all("doc").background="fon" +i+".gif" )

else

if (d.forml.elements[2].checked)

{ d.all("itab").background="fon" +i+".gif" } 

else

if (d.forml.elements[3].checked) 

{ d.allC'itabl").background="fon" +i+".gif" 

d.all("itab2").background="fon" +i+".gif" 

d.all("itabS").background="fon" +i+".gif" 

}  

}

//--> 

</script> 

</HEAD> 

<BODY id="doc">

<H4 align=center>Фоновое изображение документа, таблицы, ячейки</Н4> 

<TABLE id="itab" border=l cellspacing=20 

cellpadding =10 align=center>

<TR><TD id="itabl" bgcolor=silver><IMG src="pl.gif" width=30></TD> 

<TD id="itab2" bgcolor=silver><IMG src="pl.gif" width=50></TD> 

<TD id="itab3" bgcolor=silver><IMG src="pl.gif" width=100></TD> 

</TR> 

</TABLE> 

<FORM name="form1"><CENTER>

Введите значение толщины рамки (BORDER) 

<input type="text" size=8 name=bor

onChange='document.all("itab").border=l*(document.form1.bor.value)'<br>

Для изменения фонового изображения выберите, в какой части 

документа хотите его изменить, выберите фон<br> 

<TABLE border=2 align=center> 

<TR><TD colspan=8>

<input type="radio" name= "fp" value="doc">документ

<input type="radio" name= "fp" value="tab">тaблицa 

<input type="radio" name= "fp" value="ct">ячейка

</TD></TR> 

<TR>

<TD align=centerxiMG src="fonl.gif" width=20 height=50></TD> 

<TD align=center><IMG src="fon2.gif" width=20 height=50></TD> 

<TD align=center><IMG src="fon3.gif" width=20 height=50></TD> 

<TD align=center><IMG src="fon4.gif" width=20 height=50></TD> 

<TD align=center><IMG src="fon5.gif" width=20 height=50></TD> 

<TD align=center><IMG src="fon6.gif" width=20 height=50></TD> 

<TD align=center><IMG src="fon7.gif" width=20 height=50></TD> 

<TD align=center><IMG src="fon8.gif" width=20 height=50></TD> 

</TR> 

<TR><TD align=center>

<input type="radio" name="op" value=1 onfocus="gr(1)"></TD> 

<TD align=center>

<input type="radio" name="op" value=2 onfocus="gr(2)"></TD> 

<TD align=center>

<input type="radio" name="op" value=3 onfocus="gr(3)"></TD> 

<TD align=center>

<input type="radio" name="op" value=4 onfocus="gr(4)"></TD> 

<TD align=center>

<input type="radio" name="op" value=5 onfocus="gr(5)"></TD> 

<TD align=center>

<input type="radio" name="op" value=6 onfocus="gr(6)"></TD> 

<TD align=center>

<input type="radio" name="op" value=7 onfocus="gr(7)"></TD> 

<TD align=center>

<input type="radio" name="op" value=8 onfocus="gr(8)"></TD> 

</TR>

</TABLE><br>

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

</FORM> 

</BODY> 

</HTML>

  Упражнения

1. Напишите сценарий, который позволяет продемонстрировать изменения размеров и положения на странице горизонтальной линии так, как показано на рис. 4.9.
Рис 4.9. Исследование свойств горизонтальной линии

2. Разработайте анкету, определяющую характер человека. Пользователю предлагается ответить "да" или "нет" на следующие вопросы.

• Считаете ли Вы, что у многих ваших знакомых хороший характер?

• Раздражают ли Вас мелкие повседневные обязанности?

• Верите ли Вы, что ваши друзья преданы Вам?

• Неприятно ли Вам, когда незнакомый человек делает Вам замечание?

• Способны ли Вы ударить собаку или кошку?

• Часто ли Вы принимаете лекарства?

• Часто ли Вы меняете магазин, в который ходите за продуктами?

• Продолжаете ли Вы отстаивать свою точку зрения, поняв, что ошиблись?

• Тяготят ли Вас общественные обязанности?

• Способны ли Вы ждать более 5 минут, не проявляя беспокойства?

• Часто ли Вам приходят в голову мысли о Вашей невезучести?

• Сохранилась ли у Вас фигура по сравнению с прошлым?

• Можете ли Вы с улыбкой воспринимать подтрунивание друзей?

• Нравится ли Вам семейная жизнь?

• Злопамятны ли Вы?

• Находите ли Вы, что стоит погода, типичная для данного времени года?

• Случается ли Вам с утра быть в плохом настроении?

• Раздражает ли Вас современная живопись?

• Надоедает ли Вам присутствие чужих детей в доме более одного часа?

Поставьте плюс, если вы ответили "да" в вопросах с номерами 3, 9, 10, 13, 14, 19 и "нет" в вопросах с номерами 1, 2, 4, 5, 7, 8, 11, 12, 14, 16, 17, 18. Посчитайте сумму набранных очков. Если она оказалась более 15, то у вас покладистый характер; если сумма в интервале от 8 до 15, то вы не лишены недостатков, но с вами можно ладить; если сумма менее 8 очков, то вашим друзьям можно посочувствовать.

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

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

Рис 4.10. Показатели качества преподавания

4. Разработайте анкету для анализа ответов на вопросы по теме "Графический редактор: назначение и применение". Для заданных в анкете вопросов пользователь должен выбрать один из правильных ответов. Ответы должны быть представлены с помощью переключателей. Напишите сценарий обработки результатов опроса.

Выберите один правильный ответ из данных.

• Графика с представлением изображения в виде совокупности отрезков прямых называется...

  • Фрактальной
  • Векторной
  • Прямолинейной
  • Растровой

• Разрешающая способность экрана в текстовом режиме определяется количеством...

  • Байтов на символ
  • Символов в строке экрана
  • Пикселов по горизонтали и вертикали
  • Строк и столбцов на экране
  • Строк на экране

• При работе дисплея в текстовом режиме одну позицию экрана занимает...

  • Один пиксел
  • Один символ
  • Одно слово
  • Часть символа
  • Восемь пикселов

• Информация о графическом изображении в видеопамяти формируется...

  • Графическим процессором
  • Центральным процессором
  • Графическим адаптером
  • Дисплейным процессором
  • Дисплеем

• Разрешающая способность экрана в графическом режиме определяется количеством...

  • Строк на экране и количеством символов в строке
  • Пикселов по вертикали
  • Объемом видеопамяти на пиксел
  • Пикселов на единицу длины

• Пиктограмма — это...

  • Точка на графическом экране
  • Рисунок на рабочем поле графического редактора
  • Файл, в котором сохранено графическое изображение
  • Текстовая информация в рабочем поле графического редактора
  • Условный рисунок, элемент меню графического редактора

• Цвет точки на экране цветного монитора формируется из сигналов основных цветов:

  • Красного, синего, зеленого
  • Белого и черного
  • Красного, синего, зеленого, коричневого
  • Белого, черного и яркости

• Разрешающая способность — это...

  • Число точек экрана
  • Количество пикселов на один квадратный дюйм
  • Число точек на единицу длины
  • Ступенчатый характер изображения
  • Ничто из перечисленного выше не верно

• Минимальным объектом, используемым в векторном графическом редакторе, является...

  • Точка экрана (пиксел)
  • Объект (прямоугольник, круг и т. д.)
  • Палитра цветов
  • Знакоместо (символ)

• Минимальным объектом, используемым в растровом графическом редакторе, является...

  • Точка экрана (пиксел)
  • Объект (прямоугольник, круг и т. д.)
  • Палитра цветов
  • Знакоместо (символ)
НазадСодержаниеВперед
Сайт создан в системе uCoz