Добавил:

ivanov666 Опубликованный материал нарушает ваши авторские права? Сообщите нам.

Вуз:

Башкирский Государственный Аграрный Университет

Предмет:

[НЕСОРТИРОВАННОЕ]

Файл:

Web-программирование. Интерактивность статических Интернет-сайтов с применением форм. Учебное пособие для СПО

.pdf

Скачиваний:

Добавлен:

06.09.2026

Размер:

1 Мб

Скачать

☆

1 / 71 2 3 4 5 6 7 > Следующая >>>

СРЕДНЕЕ ПРОФЕССИОНАЛЬНОЕ ОБРАЗОВАНИЕ

Москва Ай Пи Ар Медиа

2026

Саратов

Профобразование

2026

В.В. Богун

WEB-ПРОГРАММИРОВАНИЕ.

ИНТЕРАКТИВНОСТЬ

СТАТИЧЕСКИХ ИНТЕРНЕТ-САЙТОВ

С ПРИМЕНЕНИЕМ ФОРМ

УЧЕБНОЕ ПОСОБИЕ ДЛЯ СПО

2-е издание, стереотипное

Рекомендовано Учебно-методическим отделом СПО в качестве учебного пособия

для использования в учебном процессе образовательными учреждениями

среднего профессионального образования по укрупненной группе специальностей

«Информатика и вычислительная техника»

УДК 004 ББК 32.97

Б74

Автор:

Богун В.В. — канд. пед. наук, доц. кафедры математического анализа

и теории и методики обучения математике Ярославского государственного

педагогического университета им. К.Д. Ушинского

Рецензенты:

Бытев Д.О. — д-р техн. наук, проф., зав. кафедрой прикладной математики

и вычислительной техники Ярославского государственного

технического университета;

Вейцман В.М. — канд. техн. наук, доц., директор института информационных технологий

Международного университета бизнеса и новых технологий

Богун, Виталий Викторович.

Б74

Web-программирование. Интерактивность статических Интернет-сайтов с применением форм : учебное пособие для СПО / В.В. Богун. — 2-е изд., стер. — Москва : Ай Пи Ар Медиа ; Саратов : Профобразование, 2026. — 65 с. — (Среднее профессиональное образование). — Текст : электронный.

ISBN 978-5-4497-0481-8 (Ай Пи Ар Медиа) ISBN 978-5-4488-0815-9 (Профобразование)

В учебном пособии рассмотрены различные алгоритмы обработки форм статических Интернет-страниц с использованием языка сценариев JavaScript. Представлены схемы их реализации в сопровождении необходимых комментариев.

Подготовлено с учетом требований Федерального государственного образовательного стандарта среднего профессионального образования.

Предназначено для студентов, обучающихся по укрупненной группе специальностей «Информатика и вычислительная техника», изучающих дисциплину «Web-программирование».

Учебное электронное издание

ISBN 978-5-4488-0815-9 (Профобразование) © ООО Компания «Ай Пи Ар Медиа», 2026

Содержание

Введение………………………………………………………………………………..

1.1.

Принципы создания визуальных форм в рамках статических Интернет-страниц с применением языка гипертекстовой разметки

HTML……………………………………………………………………….

1.2.

Основные особенности обработки форм в рамках статических Интернет-страниц с использованием языка сценариев JavaScript……..

Интернет-страниц……………………………………………………………….

2.1.

Обработка информации при отправке данных из форм статических Интернет-страниц с формированием нового документа………………..

2.2.

Реализация расчетов при обработке форм статических Интернетстраниц с формированием нового документа…………………………

2.3.

Реализация расчетов при обработке форм статических Интернетстраниц с сохранением исходного документа…………………………..

2.4.

Реализация расчетов при обработке форм статических Интернетстраниц с автоматизированной активацией элементов результатов…...

2.5.

Одномерная информационная система реализации расчетов при

обработке форм статических Интернет-страниц с автоматизированной активацией элементов исходных данных………..

2.6.

Двумерная информационная система реализации расчетов при

Задания для самостоятельной работы студентов………………………………...

Заключение……………………………………………………………………………

Список литературы…………………………………………………………………..

1. Основы создания и обработки форм в рамках

статических Интернет-страниц……...........................................................……

2. Схемы обработки информации в формах статических

Введение

При реализации процесса обучения различным учебным дисциплинам в учреждениях

СПО широко используются различные информационно-коммуникационные технологии,

которые позволяют успешно решать необходимые образовательные задачи. Актуальность

применения информационных средств обусловлена широкими возможностями как наглядного представления учебного материала с использованием различных

аудиовизуальных компонентов, так и реализации промежуточного и итогового контроля

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

и дистанционных систем обучения. [1…10].

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

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

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

учебным дисциплинам, тогда как практическое мышление ориентировано на решение

студентами конкретных практических, в том числе прикладных и профессиональноориентированных задач. Вне зависимости от материальной природы рассматриваемых в

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

основе анализа и синтеза полученных ранее теоретических знаний.

В результате освоения материала учебного пособия студенты должны:

- знать основные принципы получения, обработки, хранения и передачи информации

в рамках локальных и глобальных сетей с ее наглядным представлением;

- уметь реализовывать основные алгоритмы решения прикладных задач в рамках

локальных и глобальных сетей;

- владеть навыками написания интерактивных программных компонентов с

применением языка сценариев JavaScript

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

обработки формы при активации необходимых объектов, а также исходный код программы.

Рассмотрение каждого из методов обработки форм статических Интернет-страниц

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

элементов управления форм с произвольным выбором прикладной или профессионально-

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

деятельности и повышению мотивации к обучению в целом.

1. Основы создания и обработки форм в рамках

Интернет-страница (document)

Форма (имя_формы)

Элемент 1

(имя_элемента)

Элемент 2

(имя_элемента)

Свойство

(наименование_атрибута)

Свойство

(наименование_атрибута)

Значение свойства

(значение_атрибута)

Значение свойства

(значение_атрибута)

статических Интернет-страниц

1.1. Принципы создания визуальных форм в рамках статических

Интернет-страниц с применением языка гипертекстовой разметки HTML

В настоящее время при обработке информации в среде Интернет используются формы

в рамках статических и динамических Интернет-страниц и сайтов. Формы являются по своей

сути единственным инструментом, позволяющим осуществлять обратную связь между

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

При создании Интернет-страниц используется объектно-ориентированный подход

(ООП), суть которого заключается в разделении рассматриваемого конечного множества

объектов, которые выделяются в результате моделирования определенного процесса или

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

также результатами реализации событий.

Формы можно представить в виде представленной ниже схемы, которая отражает суть

доступа к значениям элементов формы, которые располагаются в теле Интернет-страницы:

Рис. 1. Применение объектно-ориентированного подхода к формам Интернет-страниц

Согласно данной схеме, для доступа к значениям свойств (атрибутов) объектов

необходимо сначала проникнуть в Интернет-страницу как документ, затем осуществить вход

внутрь формы с помощью указания её имени, после чего следует проникнуть в элемент

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

использованием наименования атрибута и в заключении получить или присвоить значение

атрибута элемента формы.

Таким образом, общий формат записи к доступам значениям атрибутов элементов

формы, располагаемой в рамках Интернет-страницы, имеет следующий вид:

Интернет-страница.Форма.Элемент.Свойство = Значение свойства.

При составлении соответствущего исходного кода инструкции рассматриваемого

действия могут быть представлены в следующей форме: document.имя_формы.

имя_элемента.наименование_атрибута = значение_атрибута.

В качестве примера реального программного кода можно указать следующую строку,

которая позволяет получить значение (атрибут value), представленное в текстовом поле с именем «st» в рамках формы с именем «fnam», располагаемой на текущей Интернетстранице: document.fnam.st.value = 20000.

Формы передают информацию программам-обработчикам в виде пар [имя

переменной]=[значение переменной]. Имена переменных следует задавать латинскими буквами. Значения переменных воспринимаются обработчиками как строки,

даже если они содержат только цифры.

Алгоритм создания форм в рамках статических Интернет-страниц с применением языка

гипертекстовой разметки HTML, состоит, как правило, из следующих этапов:

1. Необходимо создать форму в целом с обозначением необходимых свойств

(атрибутов).

2. Необходимо указать таблицу, включаемую в рамках формы, с обозначением

необходимых свойств (атрибутов).

3. Необходимо описать все необходимые элементы настройки формы в рамках

таблицы в сопровождении необходимыми комментариями с обозначением необходимых

свойств (атрибутов).

Для реализации статических Интернет-сайтов необходимо наличие только Интернет-

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

действий с объектами осуществляется с помощью событий, которые, как правило, связаны с функциями в рамках сценариев (скриптов).

Представим основные компоненты или элементы форм, реализуемых в рамках

статических Интернет-страниц.

1. Область расположения формы определяется форматом записи:

Атрибуты тега:

- name – имя формы;

- action – местоположение обработчика (файла) заполняемой формы;

- method – метод передачи данных формы («get» или «post»);

- enctype – метод кодировки передаваемых данных.

2. Область расположения таблицы определяется форматом записи:

<TABLE width=”” height=”” bgcolor=”” border=”” bordercolor=””

cellpadding=”” cellspacing=”” align=”” valign=”” nowrap> …</TABLE>

Атрибуты тега:

- width – ширина таблицы в пикселях или в процентах от ширины окна;

- height – высота таблицы в пикселях или в процентах от высоты окна;

- bgcolor – цвет заливки таблицы;

- border – ширина границ таблицы;

- bordercolor – цвет границ таблицы;

- cellpadding – величина отступа данных от границ ячеек в таблице;

- cellspacing – величина свободного пространства между границами соседних

ячеек в таблице;

- align – тип выравнивания данных по горизонтали в ячейках таблицы;

- valign – тип выравнивания данных по вертикали в ячейках таблицы;

- nowrap – отмена переноса слов по строкам в ячейках таблицы.

3. Область расположения строки в таблице определяется форматом записи:

Атрибуты тега в целом наследуются из атрибутов тега таблицы.

4. Область расположения столбца в строке таблицы определяется форматом

записи:

Атрибуты тега в целом наследуются из атрибутов тега таблицы, однако возможно

добавление следующих атрибутов:

- colspan – количество ячеек, объединяемых в рамках строки в таблице;

- rowspan – количество ячеек, объединяемых в рамках столбца в таблице.

5. Текстовое поле для ввода информации в форме определяется форматом записи:

…</INPUT>

Атрибуты тега:

- type=»text» – тип элемента ввода информации (текстовое поле);

- name – имя текстового поля;

- value – значение, указанное по умолчанию, в текстовом поле;

- syze – ширина окна текстового поля (количество текстовых символов);

- maxlength – максимальное количество вводимых символов в текстовом поле.

6. Поле пароля для ввода информации в форме определяется форматом записи:

…</INPUT>

Атрибуты тега:

- type=”password” – тип элемента ввода информации (поле пароля);

- name – имя поля пароля;

- value – значение, указанное по умолчанию, в поле пароля;

- syze – ширина окна поля пароля (количество текстовых символов);

- maxlength – максимальное количество вводимых символов в поле пароля.

7. Скрытый элемент для ввода информации в форме определяется форматом записи:

Атрибуты тега:

- type=»hidden» – тип элемента ввода информации (скрытый элемент);

- name – имя скрытого элемента;

- value – значение для скрытого элемента;

- syze – ширина окна скрытого элемента (количество текстовых символов).

8. Текстовая область для ввода информации в форме определяется форматом

записи:

Атрибуты тега:

- name – имя текстовой области;

- value – значение, указанное по умолчанию, в текстовой области;

- rows – высота текстовой области (количество текстовых строк);

- cols – ширина текстовой области (количество текстовых символов).

9. Элементы однозначного списка из редставленных вариантов информации в

форме определяется форматом записи:

Атрибуты тегов:

- name – имя элемента однозначного списка;

- value – значение, указанное по умолчанию, для вариантов однозначного списка;

- selected – признак выбранного варианта элементов однозначного списка.

10. Элементы множественного списка из представленных вариантов информации

в форме определяется форматом записи:

Атрибуты тегов:

- name – имя элемента множественного списка;

- multiple – признак множественного выбора значений;

- value – значение, указанное по умолчанию, для вариантов множественного списка;

- selected – признак выбранного варианта элементов множественного списка.

11. Элементы однозначного выбора из представленных вариантов информации в

форме определяется форматом записи:

<INPUT type=”radio” name=”” value=”” checked> …

Атрибуты тегов:

- type=»radio» – тип элемента ввода информации (однозначный выбор);

- name – имя элемента однозначного выбора (одно имя для всех вариантов);

- value – значение, указанное по умолчанию, для вариантов однозначного выбора;

- checked – признак выбранного варианта элементов однозначного выбора.

12. Элементы множественного выбора из представленных вариантов информации

в форме определяется форматом записи:

<INPUT type=”checkbox” name=”” value=””> …

Атрибуты тегов:

- type=»radio» – тип элемента ввода информации (множественный выбор);

- name – имя элемента множественного выбора (одно имя для всех вариантов);

- value – значение, указанное по умолчанию, для всех вариантов множественного

выбора;

- checked – признак выбранного варианта элементов множественного выбора.

13. Кнопка отправки информации на сервер в форме определяется форматом записи:

Атрибуты тега:

- type=»submit» – тип элемента ввода информации (кнопка отправки);

- name – имя кпопки отправки информации;

- value – значение надписи на кнопке отправки информации;

- onClick – событие нажатия для кнопки, связанное с программным кодом

обработки данного события.

14. Кнопка активации действий в форме определяется форматом записи:

Атрибуты тега:

- type=”button” – тип элемента ввода информации (кнопка активации действий);

- name – имя кпопки активации действий;

- value – значение надписи на кнопке активации действий;

- onClick – одно из возможных событий для кнопки, связанное с программным

кодом обработки данного события.

15. Кнопка отмены ввода информации в форме определяется форматом записи:

Атрибуты тега:

- type=”submit” – тип элемента ввода информации (кнопка отмены ввода

информации);

- name – имя кпопки отмены ввода информации;

- value – значение надписи на кнопке отмены ввода информации;

- onClick – одно из возможных событий для кнопки, связанное с программным

кодом обработки данного события.

Необходимо отметить, что для каждого элемента формы возможно указание

следующих доплнительных атрибутов:

- readonly – компонент доступен только для чтения с возможностями копирования

значения, однако изменить значение элемента в пользовательском режиме невозможно;

- disabled – компонент выключен и не может быть использован для установки,

копирования или изменения значений в пользовательском режиме.

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

Интернет-странице, без применения обработчиков событий.

Рис. 2. Исходный вид формы, представленной на Интернет-странице

Исходный код программы имеет следующий вид:

<HTML> <HEAD> <TITLE>Форма статической Интернет-страницы</TITLE> </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="Скрытый элемент"></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> <TD> <SELECT name=ods> <OPTION value="Выберите вариант">Выберите вариант</OPTION>

<OPTION value="Вариант 11">Вариант 11</OPTION> <OPTION value="Вариант 12">Вариант 12</OPTION> <OPTION value="Вариант 13" selected>Вариант 13</OPTION> <OPTION value="Вариант 14">Вариант 14</OPTION>

</SELECT> </TD> </TR> <TR valign=top> <TD>Множественный список</TD> <TD> <SELECT name=mns multiple> <OPTION value="Вариант 21">Вариант 21</OPTION> <OPTION value="Вариант 22" selected>Вариант 22</OPTION> <OPTION value="Вариант 23">Вариант 23</OPTION> <OPTION value="Вариант 24" selected>Вариант 24</OPTION> </SELECT> </TD> </TR> <TR valign=top> <TD>Однозначный выбор</TD>

1 / 71 2 3 4 5 6 7 > Следующая >>>

Соседние файлы в предмете [НЕСОРТИРОВАННОЕ]