Пример разработки Web-страницы с использованием dhtml:
Создаем фреймовую структуру. Размеры и взаимное расположение фреймов описывается в документе index.html
<html>
<HEAD>
<TITLE>Пример DHTML</TITLE>
</HEAD>
<frameset cols="30%,*"frameborder="2">
<frame name="one" src="menu.htm" frameborder="2" scrolling="no">
<frame name="two" src="test.htm" frameborder="2" scrolling="yes">
</frameset>
</html>
Исходным содержимым фрейма one будет документ menu.htm,а исходным содержимым фрейма two будет документ test.htm
Menu.Htm:
<html>
<body
bgcolor=Aquamarine> // цвет фона
</body>
<FONT FACE="Comic Sans MS"> //тип шрифта
<FONT SIZE=7> // размер шрифта
<FONT COLOR=orchid> // цвет шрифта
MENU:
</FONT>
</br> //отступ вниз на 1 строку
<FONT FACE="Comic Sans MS">
<FONT SIZE=4>
<FONT COLOR=violet>
<br>
<a href="test.htm" target=two>- психологический тест (пример DHTML)</a>
//ссылка на документ test.htm, который будет отображаться во фрейме two
<br>
<a href="script.htm" target=two>- примеры JavaScript</a>
// ссылка на документ script.htm, который будет отображаться во фрейме two
</FONT>
</br></br>
<IMG SRC="bear.jpg" ALIGN=top> // вставка рисунка
</html>
Данное окно будет иметь следующий вид:
Test.Htm:
<html>
<head>
<title>Тест на интеллект</title>
</head>
<body bgcolor="Plum" text="Black" link="#808080" vlink="#808080" alink="#000000"
leftmargin=0 topmargin=5 bgproperties="fixed">
<table align="center" width=570 border=0 cellpadding=5 cellspacing=5>
<tr align="center">
<td width="551">
<h1>Тест на интеллект</h1>
</td></tr></table>
<form name=Q action="" method=post>
<table align="center" width=468 border=0 cellpadding=5 cellspacing=5>
<tr><td colspan=2 width="448"><hr width="100%" size="1"></td></tr>
//горизонтальная полоса
<tr>
<td width="210"><b><font size="4">1. Может ли мужчина жениться на сестре своей вдовы? </font></b></td>
<td width="223">
<font size="4">
<input type=radio name=rb1 value="0" checked></font><b><font
size="4">да;</font></b><font size="4"><br>
<input type=radio name=rb1 value="1" ></font><b><font size="4">нет;</font></b><font
size="4"><br>
</font>
</td>
</tr>
/*Здесь задается текст первого вопроса и создаются две радиокнопки(rb1) для ответа: первой соответствует ответ «да» и значение 0 (количество баллов за ответ), второй соответствует ответ «нет» и значение 1. Вопросы 2 – 5 созданы аналогично.*/
<tr><td colspan=2 width="448"><hr width=100% size=1></td></tr>
<tr>
<td width="210"><b><font size="4">2. Есть ли 7 ноября в Австралии?</font></b></td>
<td width="223">
<font size="4">
<input type=radio name=rb2 value="1" checked></font><b><font
size="4">да;</font></b><font size="4"><br>
<input type=radio name=rb2 value="0" ></font><b><font size="4">нет;</font></b><font
size="4"><br>
</font>
</td>
</tr>
<tr><td colspan=2 width="448"><hr width=100% size=1></td></tr>
<tr>
<td width="210"><b><font size="4">3. Отец с сыном попали в автокатастрофу. Отец скончался в госпитале. К сыну в палату заходит хирург и говорит, показывая на него: "Это мой сын". Могут ли его слова быть правдой?</font></b></td>
<td width="223">
<font size="4">
<input type=radio name=rb3 value="1" checked></font><b><font
size="4">могут;</font></b><font size="4"><br>
<input type=radio name=rb3 value="0" ></font><b><font size="4">нет;</font></b><font
size="4"><br>
</font>
</td>
</tr>
<tr><td colspan=2 width="448"><hr width=100% size=1></td></tr>
<tr>
<td width="210"><b><font size="4">4. Археологи нашли монету, датируемую 35 годом до нашей эры. Возможно ли это?</font></b></td>
<td width="223">
<font size="4">
<input type=radio name=rb4 value="0" checked></font><b><font
size="4">да;</font></b><font size="4"><br>
<input type=radio name=rb4 value="1" ></font><b><font size="4">нет;</font></b><font
size="4"><br>
</font>
</td>
</tr>
<tr><td colspan=2 width="448"><hr width=100% size=1></td></tr>
<tr>
<td width="210"><b><font size="4">5. Одинокий ночной сторож умер днем. Получит ли он пенсию? </font></b></td>
<td width="223">
<font size="4">
<input type=radio name=rb5 value="0" checked></font><b><font
size="4">да;</font></b><font size="4"><br>
<input type=radio name=rb5 value="1" ></font><b><font size="4">нет;</font> </b>
<font size="4"> <br>
</font>
</td>
</tr>
<tr><td colspan=2 width="448"><hr width=100% size=1></td></tr>
</table>
</form>
<form name=L action="" method=post>
<input type=hidden name=l1 value="0">
<input type=hidden name=l2 value="2">
<input type=hidden name=l3 value="4">
</form>
<form name=H action="" method=post>
<input type=hidden name=h1 value="1">
<input type=hidden name=h2 value="3">
<input type=hidden name=h3 value="5">
</form>
/* При ответе на вопросы теста мы получаем 3 характеристики интеллекта. И в данной части программы мы задаем нижнюю и верхнюю границу трех диапазонов значений. Получаем диапазоны 0-1, 2-3, 4-5*/
<form name=D action="" method=post>
<input type=hidden name=tDtxt2 value="Наверное вы просто устали">
<input type=hidden name=tDtxt2 value="Вы нормальный человек со средними умственными способностями">
<input type=hidden name=tDtxt3 value="Вы настоящий интеллектуал!">
</form>
/*Интерпритация ответа. Например, человек, набравший 3 балла, получит ответ: "Вы нормальный человек со средними умственными способностями"*/
<script language="JavaScript">
<!--
function makeDiagnosis() {
tQcnt = 2;
// количество вариантов ответов на вопрос. В данном случае 2
tDcnt = 5;
// количество вопросов. В данном случае 2
summa = 0;
// исходная сумма баллов равна 0
for( j=0; j<document.Q.rb1.length; j++ ) {
if( document.Q.rb1[j].checked ) {
summa += eval(document.Q.rb1[j].value);
} }
for( j=0; j<document.Q.rb2.length; j++ ) {
if( document.Q.rb2[j].checked ) {
summa += eval(document.Q.rb2[j].value);
} }
for( j=0; j<document.Q.rb3.length; j++ ) {
if( document.Q.rb3[j].checked ) {
summa += eval(document.Q.rb3[j].value);
} }
for( j=0; j<document.Q.rb4.length; j++ ) {
if( document.Q.rb4[j].checked ) {
summa += eval(document.Q.rb4[j].value);
} }
for( j=0; j<document.Q.rb5.length; j++ ) {
if( document.Q.rb5[j].checked ) {
summa += eval(document.Q.rb5[j].value);
} }
/* данный фрагмент программы подсчитывает баллы, набранные за ответы, и прибавляет их к первоначальной сумме.*/
dx = -1;
for( i=0; i<tDcnt; i++ ) {
if( summa >= eval(document.L.elements[i].value) && summa <= eval(document.H.elements[i].value) ) {
dx = i;
break;
} }
document.C.tDiagnosis.value = document.D.elements[dx].value;
}
function clearForm()
{ document.Q.reset();
document.C.tDiagnosis.value = "";
}
// -->
</script>
<form name=C action="" method=post> <center>
<input type=button name=pbReset value="Сбросить и начать заново"
onClick="clearForm()">
//создается кнопка, которая очищает форму
<input type=button name=pbSubmit value=”Показать результат”
onClick=”makeDiagnosis()”>
// создается кнопка, которая отображает результат теста в текстовом поле
<br><br>
<textarea name=tDiagnosis rows=6 cols=75 wrap></textarea>
//задание текстового поля для отображения результатов теста
</form>
<table width="640">
</table>
</body>
</html>
Данное окно будет иметь следующий вид:
