Добавил:
ivanov666
Опубликованный материал нарушает ваши авторские права? Сообщите нам.
Вуз:
Предмет:
Файл:Web-программирование. Интерактивность статических Интернет-сайтов с применением форм. Учебное пособие для СПО
.pdf
11
<TD>
<INPUT type=radio name=odv value="Вариант 31" checked>Вариант 31
</INPUT><BR>
<INPUT type=radio name=odv value="Вариант 32">Вариант 32
</INPUT><BR>
<INPUT type=radio name=odv value="Вариант 33">Вариант 33
</INPUT><BR>
<INPUT type=radio name=odv value="Вариант 34">Вариант 34
</INPUT>
</TD>
</TR>
<TR valign=top>
<TD>Множественный выбор</TD>
<TD>
<INPUT type=checkbox name=mnv value="Вариант 41">
Вариант 41</INPUT><BR>
<INPUT type=checkbox name=mnv value="Вариант 42" checked>
Вариант 42</INPUT><BR>
<INPUT type=checkbox name=mnv value="Вариант 43" checked>
Вариант 43</INPUT><BR>
<INPUT type=checkbox name=mnv value="Вариант 44">
Вариант 44</INPUT>
</TD>
</TR>
<TR align=center>
<TD><INPUT type=submit value="Отправка данных"></INPUT></TD>
<TD><INPUT type=reset value="Отмена"></INPUT></TD>
</TR>
</TABLE>
</FORM>
</BODY>
</HTML>
1.2. Основные особенности обработки форм в рамках статических
Интернет-страниц с использованием языка сценариев JavaScript
Обработка форм, представленных в рамках статических Интернет-страниц,
подразумевает использование различных обработчиков событий, активация которых связана
с реализацией программного кода, представленного на языке создания сценариев JavaScript.
Язык сценариев JavaScript, во-первых, является объектно-ориентированным языком
программирования, поскольку для ввода и вывода информации используются объекты
браузера, для которых существуют статические свойства (атрибуты) и динамические
свойства (события)). Во-вторых, он относится к интерпретируемым языкам
программирования, так как исходный код сценариев напрямую доступен пользователю,
тогда как его обработка с целью отображения результатов осуществляется внешним
приложением в виде любого Интернет-браузера, который изначально разрабатывается под
конкретную операционную систему стационарных или переносных электронновычислительных устройств. В третьих, JavaScript является языком программирования со
свободной типизацией данных, то есть переменные могут содержать значения любого типа
данных, однако для корректности обработки данных значений необходимо осуществлять их
перевод в определенный тип данных.
12
Обработка событий для различных элементов формы, представленных на статических
Событие
Атрибут HTML
Условие возникновения события
События для для большинства объектов Интернет-страницы
Обработка событий указателя мыши
mouseMove
onMouseMove
Перемещение указателя мыши
mouseOut
onMouseOut
Помещение указателя мыши за пределами объекта
mouseOver
onMouseOver
Помещение указателя мыши на объект
Click
onClick
Щелчок указателя мыши на объекте
dblClick
onDdlClick
Двукратный щелчок указателя мыши на объекте
mouseDown
onMouseDown
Нажатие указателя мыши на объекте
mouseUp
onMouseUp
Отпускание указателя мыши на объекте
dragDrop
onDragDrop
Отпускание указателя мыши на объекте при
перетаскивании внешних объектов
Обработка событий клавиш клавиатуры
keyDown
onKeyDown
Нажатие клавиши клавиатуры
keyPress
onKeyPress
Нажатие и удерживание клавиши клавиатуры
keyUp
onKeyUp
Отпускание клавиши клавиатуры
Уникальные события для тела документа
Load
onLoad
Завершение загрузки документа
Unload
onUnload
Загрузки нового документа
Уникальные события для окна или фрейма
move
onMove
Перемещение окна или фрейма
resize
onResize
Изменение размеров окна или фрейма
Blur
onBlur
Потеря фокуса окном или фреймом
Focus
onFocus
Получение фокуса окном или фреймом
Уникальное событие для изображений
Abort
onAbort
Отмена загрузки изображения
Уникальное событие для формы
Submit
onSubmit
Передача данных формы
Уникальные события для объектов формы (текстовые поля ввода (text), поля
паролей (password), текстовые области (textarea), список элементов (select))
Blur
onBlur
Потеря фокуса ввода элементом формы
Focus
onFocus
Получение фокуса ввода элементом формы
Select
onSelect
Выделение содержимого элемента формы
Change
onChange
Изменение содержимого элемента формы
Уникальные события для объектов формы (кнопки отправки данных (submit),
кнопки действий (button), кнопки отмены (submit), элементы однозначного выбора
(radio), элементы множественного выбора (checkbox))
Интернет-страницах, может осуществляться в двух форматах:
1. Для активации действий пользователем используются необходимые атрибуты для
тегов HTML согласно записи:
<Имя_тега событие = ”инструкции на JavaScript;”>
2. Для активации действий в рамках скрипта используются события в скрипте
JavaScript согласно записи:
Имя_элемента(с учетом иерархии объектов).имя_события();
В таблице 1 ниже приведены возможные события в рамках Интернет-страниц с
указанием соотвествующих наименований событий для JavaScript и атрибутов для HTML.
Таблица 1
События для элементов статических Интернет-страниц
13
Рассмотрим в рамках одной программы реализацию основных типов алгоритмов
(линейные, ветвления и циклические) с использованием языка сценариев JavaScript.
Суть задачи заключается в том, что над вводимыми в текстовые поля значениями трех
целых чисел осуществляются следующие операции:
- Получение значений исходных данных с целью формирования соотвествующего
одномерного массива.
- Расчет суммы и произведения первого и второго чисел (использование линейного
алгоритма).
- Расчет суммы второго и третьего чисел, если второе число больше третьего, или
произведение данных чисел в обратном случае; расчет количества, суммы и произведения
числовых элементов массива.
Рис. 3. Визуальное отображение программы в браузере
Исходный код программы имеет следующий вид:
<HTML>
<HEAD>
<TITLE>Язык сценариев JavaScript</TITLE>
</HEAD>
<BODY>
<FORM name=chis>
<TABLE cellspacing=0 border=1 bordercolor=red>
<TR>
<TD colspan=2 align=center><B>Исходные данные</B></TD>
</TR>
14
<SCRIPT language=JavaScript>
var n;
mch = new Array(3);
for (n=0;n<mch.length;n++)
{
document.writeln("<TR><TD>Число "+(n+1)+"</TD><TD><INPUT type
=text name=fmch></INPUT></TD></TR>");
}
</SCRIPT>
<TR align=center>
<TD>
<INPUT type=button value="Реализация расчетов" onClick="rasch();">
</INPUT>
</TD>
<TD>
<INPUT type=reset value="Отмена">
</INPUT>
</TD>
</TR>
<TR>
<TD colspan=2 align=center><B>Результаты вычислений</B></TD>
</TR>
<TR align=center>
<TD colspan=2>Линейные алгоритмы</TD>
</TR>
<TR>
<TD>Сумма чисел 1 и 2</TD>
<TD><INPUT type=text name=fsm></INPUT></TD>
</TR>
<TR>
<TD>Произведение чисел 1 и 2</TD>
<TD><INPUT type=text name=fpr></INPUT></TD>
</TR>
<TR align=center>
<TD colspan=2>Алгоритмы ветвления</TD>
</TR>
<TR>
<TD>Тип операции</TD>
<TD><INPUT type=text name=fop></INPUT></TD>
</TR>
<TR>
<TD>Результат</TD>
<TD><INPUT type=text name=fres></INPUT></TD>
</TR>
<TR align=center>
<TD colspan=2>Циклические алгоритмы</TD>
</TR>
<TR>
<TD>Количество чисел</TD>
<TD><INPUT type=text name=fcol></INPUT></TD>
</TR>
<TR>
<TD>Сумма чисел</TD>
15
<TD><INPUT type=text name=fsum></INPUT></TD>
</TR>
<TR>
<TD>Произведение чисел</TD>
<TD><INPUT type=text name=fpro></INPUT></TD>
</TR>
</TABLE>
</FORM>
<SCRIPT language=JavaScript>
var ch1, ch2, sm, pr, op, res, col, sum, pro, n;
function rasch()
{
// Получение исходных данных
for (n=0;n<mch.length;n++)
{
mch[n] = parseInt(document.chis.fmch[n].value);
}
// Реализация линейных алгоритмов
sm = mch[0]+mch[1];
pr = mch[0]*mch[1];
document.chis.fsm.value = sm;
document.chis.fpr.value = pr;
// Реализация алгоритмов ветвления
if (mch[1]>mch[2])
{
op = "Сложение чисел 2 и 3";
res = mch[1]+mch[2];
}
else
{
op = "Умножение чисел 2 и 3";
res = mch[1]*mch[2];
}
document.chis.fop.value = op;
document.chis.fres.value = res;
// Реализация циклических алгоритмов
col = 0;
sum = 0;
pro = 1;
for (n=0;n<mch.length;n++)
{
col = col+1;
sum = sum+mch[n];
pro = pro*mch[n];
}
document.chis.fcol.value = col;
document.chis.fsum.value = sum;
document.chis.fpro.value = pro;
}
</SCRIPT>
</BODY>
</HTML>
16
При решении описанных в пособии задач используются следующие основные
принципы представления и обработки информации:
1. Все формы располагаются в рамках таблиц, состоящих из двух столбцов, в первом
столбце которой указаны наименования элементов, а во втором столбце – непосредственно
элементы или компоненты формы.
2. Значения элементов однозначного и множественного списков и выбора указываются
с применением одномерных или двумерных массивов, что позволяет оптимизировать
процессы ввода значений исходных данных, реализации расчетов и вывода значений
результатов обработки данных компонентов формы.
3. При активации события для определенного объекта статической Интернет-страницы
(например, нажатие на кнопке) реализуется взаимосвязь между наименованием функции,
указываемой в событии для объекта, и одноименной функции в рамках скрипта,
создаваемого с использованием языка сценариев JavaScript, с целью выполнения
необходимых программных конструкций, соответствующих корректной обработки значений
исходных данных для получения и вывода значений результатов обработки и необходимых
вычислений.
4. При обработке элементов однозначного или множественного списка или выбора
применяется сочетание циклического и условного операторы, при этом циклы используются
для реализации переходом между значениями элементов формы с применением индексной
адресации, а условный оператор позволяет распознавать выделенные значения элементов
также на основе индексной адресации.
5. Доступ к значениям элементов для ввода или вывода информации осуществляется
согласно объектной модели браузера на стороне клиента, построенной на основе применения
принципа объектно-ориентированного подхода.
17
2. Схемы обработки информации в формах
статических Интернет-страниц
2.1. Обработка информации при отправке данных из форм статических
Интернет-страниц с формированием нового документа
Программа предназначена для обработки указываемых пользователем в форме
статической Интернет-страницы значений исходных данных с применением различных
элементов формы с целью последующей отправки данных и отображением значений
результатов в виде автоматически генерируемой новой статической Интернет-страницы.
Обработка значений исходных данных осуществляется с использованием события,
заключающегося в нажатии кнопки отправки данных.
Рис. 4. Указание значений исходных данных в форме статической Интернет-странице
Рис. 5. Вывод результатов обработки форм в виде новой Интернет-страницы
18
Исходный код программы имеет следующий вид:
<HTML><HEAD>
<TITLE>Программа 1: Исходные данные</TITLE>
<SCRIPT language=JavaScript>
var n;
mods = new Array(4);
mmns = new Array(4);
modv = new Array(4);
mmnv = new Array(4);
// Однозначный список
mods[1] = 'Вариант 11';
mods[2] = 'Вариант 12';
mods[3] = 'Вариант 13';
mods[4] = 'Вариант 14';
// Множественный список
mmns[0] = 'Вариант 21';
mmns[1] = 'Вариант 22';
mmns[2] = 'Вариант 23';
mmns[3] = 'Вариант 24';
// Однозначный выбор
modv[0] = 'Вариант 31';
modv[1] = 'Вариант 32';
modv[2] = 'Вариант 33';
modv[3] = 'Вариант 34';
// Множественный выбор
mmnv[0] = 'Вариант 41';
mmnv[1] = 'Вариант 42';
mmnv[2] = 'Вариант 43';
mmnv[3] = 'Вариант 44';
</SCRIPT>
</HEAD>
<BODY>
<FORM name=fnam method=post>
<TABLE border=1 bordercolor=green cellspacing=0>
<TR valign=top>
<TD>Скрытый элемент</TD>
<TD><INPUT type=hidden name=hdn value="Программа 1"></INPUT></TD>
</TR><TR valign=top>
<TD>Текстовое поле</TD>
<TD><INPUT type=text name=tp value="Введите текст"></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>
19
<TD><SELECT name=ods>
<OPTION value="Выберите вариант">Выберите вариант</OPTION>
<SCRIPT language=JavaScript>
for (n=1;n<mods.length;n++)
{
document.writeln("<OPTION value="+n+">"+mods[n]+"</OPTION>");
}
</SCRIPT>
</SELECT></TD>
</TR><TR valign=top>
<TD>Множественный список</TD>
<TD><SELECT name=mns multiple>
<SCRIPT language=JavaScript>
for (n=0;n<mmns.length;n++)
{
document.writeln("<OPTION value="+n+">"+mmns[n]+"</OPTION>");
}
</SCRIPT>
</SELECT></TD>
</TR><TR valign=top>
<TD>Однозначный выбор</TD>
<TD>
<SCRIPT language=JavaScript>
for (n=0;n<modv.length;n++)
{
document.writeln("<INPUT type=radio name=odv value="+n+">"+
modv[n]+"</INPUT><BR>");
}
</SCRIPT>
</TD>
</TR><TR valign=top>
<TD>Множественный выбор</TD>
<TD>
<SCRIPT language=JavaScript>
for (n=0;n<mmnv.length;n++)
{
document.writeln("<INPUT type=checkbox name=mnv value="+n+">"+
mmnv[n]+"</INPUT><BR>");
}
</SCRIPT>
</TD>
</TR><TR align=center>
<TD><INPUT type=submit value="Отправка данных" onClick="obr();">
</INPUT>
</TD>
<TD><INPUT type=reset value="Отмена"></INPUT>
</TD>
</TR>
</TABLE>
</FORM>
<SCRIPT language=JavaScript>
var n, ihdn, itp, itob, ips, ifl, iods, imns, iodv, imnv, vods,
vmns, vodv, vmnv;
20
function obr()
{
// Получение данных из скрытого элемента
ihdn = document.fnam.hdn.value;
// Получение данных из текстового поля
itp = document.fnam.tp.value;
if (itp=="")
{
itp = "Информация в текстовом поле отсутствует";
}
// Получение данных из текстовой области
itob = document.fnam.tob.value;
if (itob=="")
{
itob = "Информация в текстовой области отсутствует";
}
// Получение данных из поля пароля
ips = document.fnam.ps.value;
if (ips=="")
{
ips = "Информация в поле пароля отсутствует";
}
// Получение данных из загрузки файла
ifl = document.fnam.fl.value;
if (ifl=="")
{
ifl = "Информация о загруженном файле отсутствует";
}
// Получение данных из однозначного списка
vods = 0;
for (n=1;n<document.fnam.ods.length;n++)
{
if (document.fnam.ods[n].selected)
{
vods++;
iods = mods[n];
}
}
if (vods==0)
{
iods = "Не выделен элемент однозначного списка";
}
// Получение данных из множественного списка
vmns = 0;
imns = "";
for (n=0;n<document.fnam.mns.length;n++)
{
if (document.fnam.mns[n].selected)
{
vmns++;
if (vmns>1)
{
imns = imns+", ";
Соседние файлы в предмете [НЕСОРТИРОВАННОЕ]