Добавил:
ivanov666
Опубликованный материал нарушает ваши авторские права? Сообщите нам.
Вуз:
Предмет:
Файл:Web-программирование. Интерактивность статических Интернет-сайтов с применением форм. Учебное пособие для СПО
.pdf
21
}
imns = imns+mmns[n];
}
}
if (vmns==0)
{
imns = "Не выделены элементы множественного списка";
}
// Получение данных из однозначного выбора
vodv = 0;
for (n=0;n<document.fnam.odv.length;n++)
{
if (document.fnam.odv[n].checked)
{
vodv++;
iodv = modv[n];
}
}
if (vodv==0)
{
iodv = "Не выделен элемент однозначного выбора";
}
// Получение данных из множественного выбора
vmnv = 0;
imnv = "";
for (n=0;n<document.fnam.mnv.length;n++)
{
if (document.fnam.mnv[n].checked)
{
vmnv++;
if (vmnv>1)
{
imnv = imnv+", ";
}
imnv = imnv+mmnv[n];
}
}
if (vmnv==0)
{
imnv = "Не выделены элементы множественного выбора";
}
document.writeln("<HTML><HEAD><TITLE>Программа 1: Результаты
обработки</TITLE></HEAD><BODY>");
document.writeln("<CENTER><B>Вывод результатов</B></CENTER>");
document.writeln("<OL type=1>");
document.writeln("<LI><B>Скрытый элемент:</B> "+ihdn+".</LI>");
document.writeln("<LI><B>Текстовое поле:</B> "+itp+".</LI>");
document.writeln("<LI><B>Текстовая область:</B> "+itob+".</LI>");
document.writeln("<LI><B>Поле пароля:</B> "+ips+".</LI>");
document.writeln("<LI><B>Загруженный файл:</B> "+ifl+".</LI>");
document.writeln("<LI><B>Однозначный список:</B> "+iods+".</LI>");
document.writeln("<LI><B>Множественный список:</B> "+imns+".</LI>");
document.writeln("<LI><B>Однозначный выбор:</B> "+iodv+".</LI>");
22
document.writeln("<LI><B>Множественный выбор:</B> "+imnv+".</LI>");
document.writeln("</OL>");
document.writeln("</BODY></HTML>");
}
</SCRIPT>
</BODY>
</HTML>
2.2. Реализация расчетов при обработке форм статических
Интернет-страниц с формированием нового документа
Программа предназначена для реализации пользователем операций по указанию
значений исходных данных в рамках формы статической Интернет-страницы, обработке
полученной информации с целью реализации необходимых расчетов и вывода значений
результатов в виде новой автоматически генерируемой Интернет-страницы. Обработка
значений исходных данных выполняется также с применением события, заключающегося в
нажатии кнопки отправки данных, при этом для наименований и значений элементов
однозначного и множественного списков и выбора используются отдельные одномерные
массивы, взаимосвязь между которыми осуществляется с применением индексации
элементов массивов.
Рис. 6. Указание значений исходных данных в форме статической Интернет-странице
23
Рис. 7. Вывод результатов обработки формы и расчетов в рамках новой Интернет-страницы
Исходный код программы представляется в следующем виде:
<HTML><HEAD>
<TITLE>Программа 2: Исходные данные</TITLE>
<SCRIPT language=JavaScript>
var n;
opods = new Array(4);
znods = new Array(4);
opmns = new Array(4);
znmns = new Array(4);
opodv = new Array(4);
znodv = new Array(4);
opmnv = new Array(4);
znmnv = new Array(4);
// Однозначный список
opods[1] = 'Вариант 11'; znods[1] = 11;
opods[2] = 'Вариант 12'; znods[2] = 12;
opods[3] = 'Вариант 13'; znods[3] = 13;
opods[4] = 'Вариант 14'; znods[4] = 14;
// Множественный список
opmns[0] = 'Вариант 21'; znmns[0] = 21;
opmns[1] = 'Вариант 22'; znmns[1] = 22;
opmns[2] = 'Вариант 23'; znmns[2] = 23;
opmns[3] = 'Вариант 24'; znmns[3] = 24;
// Однозначный выбор
opodv[0] = 'Вариант 31'; znodv[0] = 31;
opodv[1] = 'Вариант 32'; znodv[1] = 32;
opodv[2] = 'Вариант 33'; znodv[2] = 33;
opodv[3] = 'Вариант 34'; znodv[3] = 34;
// Множественный выбор
opmnv[0] = 'Вариант 41'; znmnv[0] = 41;
24
opmnv[1] = 'Вариант 42'; znmnv[1] = 42;
opmnv[2] = 'Вариант 43'; znmnv[2] = 43;
opmnv[3] = 'Вариант 44'; znmnv[3] = 44;
</SCRIPT>
<FORM name=fnam method=post>
<TABLE border=1 bordercolor=green cellspacing=0>
<TR align=center>
<TD colspan=2><B>Исходные данные</B></TD>
</TR>
<TR valign=top>
<TD>Скрытый элемент</TD>
<TD><INPUT type=hidden name=hdn value="Программа 2"></INPUT></TD>
</TR>
<TR valign=top>
<TD>Текстовое поле</TD>
<TD><INPUT type=text name=tp value=01></INPUT></TD>
</TR>
<TR valign=top>
<TD>Текстовая область</TD>
<TD><TEXTAREA rows=5 cols=40 name=tob>Введите текст</TEXTAREA>
</TD>
</TR>
<TR valign=top>
<TD>Поле пароля</TD>
<TD><INPUT type=password name=ps value="Введите пароль"></INPUT>
</TD>
</TR>
<TR valign=top>
<TD>Загрузка файла</TD>
<TD><INPUT type=file name=fl></INPUT></TD>
</TR>
<TR valign=top>
<TD>Однозначный список</TD>
<TD>
<SELECT name=ods>
<OPTION value="Выберите вариант">Выберите вариант</OPTION>
<SCRIPT language=JavaScript>
for (n=1;n<opods.length;n++)
{
document.writeln("<OPTION value="+n+">"+opods[n]+"</OPTION>");
}
</SCRIPT>
</SELECT>
</TD>
</TR>
<TR valign=top>
<TD>Множественный список</TD>
<TD>
<SELECT name=mns multiple>
<SCRIPT language=JavaScript>
for (n=0;n<opmns.length;n++)
{
document.writeln("<OPTION value="+n+">"+opmns[n]+"</OPTION>");
25
}
</SCRIPT>
</SELECT>
</TD>
</TR>
<TR valign=top>
<TD>Однозначный выбор</TD>
<TD>
<SCRIPT language=JavaScript>
for (n=0;n<opodv.length;n++)
{
document.writeln("<INPUT type=radio name=odv value="+n+">"+
opodv[n]+"</INPUT><BR>");
}
</SCRIPT>
</TD>
</TR>
<TR valign=top>
<TD>Множественный выбор</TD>
<TD>
<SCRIPT language=JavaScript>
for (n=0;n<opmnv.length;n++)
{
document.writeln("<INPUT type=checkbox name=mnv value="+n+">"+
opmnv[n]+"</INPUT><BR>");
}
</SCRIPT>
</TD>
</TR>
<TR align=center>
<TD>
<INPUT type=submit name=ras value="Расчет" onClick="rasf();">
</INPUT>
</TD>
<TD>
<INPUT type=reset value="Отмена"></INPUT>
</TD>
</TR>
</TABLE>
</FORM>
<SCRIPT language=JavaScript>
var n, eznhdn, ezntp, ezntob, eznps, eznfl, eopods, eznods,
eopmns, eznmns, eopodv, eznodv, eopmnv, eznmnv, vods, vmns, vodv,
vmnv, opres, znres;
// Расчет формы
function rasf()
{
opres = "<HTML><HEAD><TITLE>Программа 2: Результаты расчетов
</TITLE></HEAD><BODY>";
opres = opres+"\n<CENTER><B>Расчет параметров</B></CENTER>\n<BR>\n
<TABLE border=1 bordercolor=red cellspacing=0>";
znres = 0;
// Обработка данных из скрытого элемента
26
opres = opres+"\n<TR valign=top><TD>Скрытый элемент</TD>";
eznhdn = new String(document.fnam.hdn.value);
opres = opres+"\n<TD>"+eznhdn+".</TD>";
opres = opres+"\n</TR>";
// Обработка данных из текстового поля
opres = opres+"\n<TR valign=top><TD>Текстовое поле</TD>";
ezntp = parseInt(document.fnam.tp.value);
if (document.fnam.tp.value=="")
{
ezntp = 0;
ezntp = "Информация в текстовом поле отсутствует";
}
opres = opres+"\n<TD>"+ezntp+".</TD>";
znres = znres+ezntp;
// Обработка данных из текстовой области
opres = opres+"\n<TR valign=top><TD>Текстовая область</TD>";
ezntob = new String(document.fnam.tob.value);
if (document.fnam.tob.value=="")
{
ezntob = "Информация в текстовой области отсутствует";
}
opres = opres+"\n<TD>"+ezntob+".</TD>";
// Обработка данных из поля пароля
opres = opres+"\n<TR valign=top><TD>Поле пароля</TD>";
eznps = new String(document.fnam.ps.value);
if (document.fnam.ps.value=="")
{
eznps = "Информация в поле пароля отсутствует";
}
opres = opres+"\n<TD>"+eznps+".</TD>";
// Обработка данных из загрузки файла
opres = opres+"\n<TR valign=top><TD>Загружаемый файл</TD>";
eznfl = new String(document.fnam.fl.value);
if (document.fnam.fl.value=="")
{
eznfl = "Информация о загруженном файле отсутствует";
}
opres = opres+"\n<TD>"+eznfl+".</TD>";
// Обработка данных из однозначного списка
vods = 0;
eznods = 0;
opres = opres+"\n<TR valign=top><TD>Однозначный список</TD>";
opres = opres+"\n<TD>";
for (n=1;n<document.fnam.ods.length;n++)
{
if (document.fnam.ods[n].selected)
{
vods++;
eopods = new String(opods[n]);
eznods = parseInt(znods[n]);
opres = opres+"\n"+eopods+" - "+eznods+".";
znres = znres+eznods;
}
27
}
if (vods==0)
{
opres = opres+"\nНе выделен элемент однозначного списка.";
}
opres = opres+"</TD>";
// Обработка данных из множественного списка
vmns = 0;
opres = opres+"\n<TR valign=top><TD>Множественный список</TD>";
opres = opres+"\n<TD>";
imns = 0;
iznmns = 0;
eopmns = "";
for (n=0;n<document.fnam.mns.length;n++)
{
if (document.fnam.mns[n].selected)
{
vmns++;
imns++;
eopmns = new String(opmns[n]);
eznmns = parseInt(znmns[n]);
if (imns>1)
{
opres = opres+"\n<BR>";
}
opres = opres+imns+". "+eopmns+" - "+eznmns+".";
znres = znres+eznmns;
iznmns = iznmns+eznmns;
}
}
if (vmns==0)
{
opres = opres+"\nНе выделены элементы множественного списка.";
}
else
{
opres = opres+"\n<BR>Итого по множественному списку:
"+iznmns+".";
}
opres = opres+"\n</TD>";
// Обработка данных из однозначного выбора
vodv = 0;
eznodv = 0;
opres = opres+"\n<TR valign=top><TD>Однозначный выбор</TD>";
opres = opres+"\n<TD>";
for (n=0;n<document.fnam.odv.length;n++)
{
if (document.fnam.odv[n].checked)
{
vodv++;
eopodv = new String(opodv[n]);
eznodv = parseInt(znodv[n]);
opres = opres+"\n"+eopodv+" - "+eznodv+".";
28
znres = znres+eznodv;
}
}
if (vodv==0)
{
opres = opres+"\nНе выделен элемент однозначного выбора.";
}
opres = opres+"\n</TD>";
// Обработка данных из множественного выбора
vmnv = 0;
opres = opres+"\n<TR valign=top><TD>Множественный выбор</TD>";
opres = opres+"\n<TD>";
imnv = 0;
iznmnv = 0;
eopmnv = "";
for (n=0;n<document.fnam.mnv.length;n++)
{
if (document.fnam.mnv[n].checked)
{
vmnv++;
imnv++;
eopmnv = new String(opmnv[n]);
eznmnv = parseInt(znmnv[n]);
if (vmnv>1)
{
opres = opres+"\n<BR>";
}
opres = opres+imnv+". "+eopmnv+" - "+eznmnv+".";
znres = znres+eznmnv;
iznmnv = iznmnv+eznmnv;
}
}
if (vmnv==0)
{
opres = opres+"\nНе выделены элементы множественного выбора.";
}
else
{
opres = opres+"\n<BR>Итого по множественному выбору:
"+iznmnv+".";
}
opres = opres+"\n</TD>";
opres = opres+"\n<TR valign=top><TD><B>Итоговая сумма:</B></TD>";
opres = opres+"\n<TD>"+ezntp+"+"+eznods+"+"+iznmns+"+"+eznodv+"+"+
iznmnv+" = "+znres+".</TD></TR>";
opres = opres+"\n</TABLE></CENTER></BODY></HTML>";
document.writeln(opres);
}
</SCRIPT>
</BODY>
</HTML>
29
2.3. Реализация расчетов при обработке форм статических
Интернет-страниц с сохранением исходного документа
Программа предназначена для реализации пользователем в рамках единой формы
статической Интернет-страницы операций по вводу и выводу указываемых пользователем
значений исходных данных с применением различных элементов формы, а также
выполнения в автоматическом режиме определенных расчетов над исходными данными с
выводом необходимых результирующих компонентов. Обработка значений исходных
данных выполняется с применением события, заключающегося в нажатии кнопки
реализации расчетов, для отмены расчетов с целью возврата формы в исходное состояние
используется аналогичное событие для другой кнопки, при этом наименования и значения
элементов однозначного и множественного списков и выбора указываются с применением
одномерных массивов, взаимосвязь между которыми осуществляется с использованием
индексации элементов массивов.
Рис. 8. Указание значений исходных данных в единой форме
статической Интернет-страницы
30
Рис. 9. Вывод результатов обработки формы и расчетов в рамках единой статической
Интернет-страницы
Исходный код программы представляется в следующем виде:
<HTML><HEAD>
<TITLE>Программа 3: Исходные данные</TITLE>
<SCRIPT language=JavaScript>
var n;
opods = new Array(4);
znods = new Array(4);
opmns = new Array(4);
znmns = new Array(4);
opodv = new Array(4);
znodv = new Array(4);
opmnv = new Array(4);
znmnv = new Array(4);
// Однозначный список
opods[1] = 'Вариант 11'; znods[1] = 11;
Соседние файлы в предмете [НЕСОРТИРОВАННОЕ]