Министерство образования и науки Российской Федерации

Федеральное государственное бюджетное образовательное учреждение высшего

профессионального образования

«НАЦИОНАЛЬНЫЙ ИССЛЕДОВАТЕЛЬСКИЙ ТОМСКИЙ

ПОЛИТЕХНИЧЕСКИЙ УНИВЕРСИТЕТ»

УТВЕРЖДАЮ

Зав. каф. ОСУ

Канд. техн. наук, доцент

______________О.Б.Фофанов

"_____" _____________________ 20__ г.

Компьютерный практикум

Методические указания к лабораторным работам

для студентов направления 230700 Прикладная информатика

2013

1

Оглавление

HTML-элементы для создания интерактивных приложений (формы). Внешние скрипты. ...............  3

JavaScript: работа с функциями. ................................................................................................................  3

Цель работы:............................................................................................................................................  3

Практическое задание...........................................................................................................................  14

Контрольные вопросы к лабораторной работе 6 ...............................................................................  15

2

ЛАБОРАТОРНАЯ РАБОТА № 6

HTML-элементы для создания интерактивных приложений (формы). Внешние скрипты.

JavaScript: работа с функциями.

Цель работы:

 знакомство с HTML-элементами для создания форм и меню;

 дальнейшее изучение языка JavaScript.

Теоретическая часть

Формы

Формы - замечательная возможность HTML, позволяющая с привлечением довольно

небольшого количества усилий разработчика организовать взаимодействие пользователей с

программами . Данные, введенные в форму, могут обрабатываться на стороне клиента с помощью

сценариев.

Создание формы

Для вставки формы в HTML-документ используется элемент FORM. Он задается парными

тегами <FORM> и </FORM>. Между этими тегами помещаются описания элементов управления

формы. Также здесь может быть помещен и другой текст с использованием разметки средства ми

HTML. Этот текст обычно используется для пояснения, какие данные и в какой элемент

управления нужно вводить.

Стандартные элементы управления

Стандартными являются все элементы управления, которые можно поместить на HTML-

форму (однострочное текстовое поле, поле для ввода пароля, флажки, переключатели, кнопки как

пользовательские, так и выполняющие стандартные действия, поля имен файлов и т.д.). Все

упомянутые элементы управления отображаются браузером Internet Explorer так, как показано на

рис. 1.

Рисунок 1 - Стандартные элементы управления

Для обозначения всех этих элементов управления используется один HTML-элемент -

INPUT. Этот элемент задается одиночным тегом <INPUT> и имеет следующие атрибуты:

type - принимает строку, задающую тип элемента управления (по умолчанию используется

строка text и создается соответственно поле для ввода текста), возможные значения и специфика

работы соответствующих элементов управления рассмотрены далее;

name - используется для задания имени элементу управления (строка, которая помимо

идентификации элемента управления добавляется в данные, отсылаемые серверу);

value - начальное значение для полей ввода текста и полей для указания имен файлов, так-

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

элементов управления, кроме флажков и переключателей;

checked — булевый атрибут, если он установлен, то флажок или переключатель считается

(и отображается браузером) установленным (см. рис. 1);

3

4

Таблица 1 - Значения атрибута type

Значения атрибута	Особенности
text	Создается однострочное текстовое поле. Значение атрибута value отображается в качестве текста по умолчанию. Атрибут size воспринимается как количество символов, которое может отображаться в поле без необходимости горизонтальной прокрутки текста. Атрибут maxlength задает максимальное количество символов,

disabled — булевый атрибут, установка которого не позволяет пользователю работать с эле-

ментом управления;

readonlу — булевый атрибут, позволяет запретить изменение состояния элемента

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

элементов управления лучше использовать атрибут disabled);

size — задает размер элемента управления (единицы измерения и действие специфичны для

разных элементов управления);

maxlength — задает максимальную длину текста, который может быть введен в текстовые

поля (положительное численное значение);

src — для элемента управления image задает расположение используемого изображения;

title — описание элемента управления (может отображаться браузерами как всплывающая

подсказка);

align — задает горизонтальное выравнивание элемента управления, работает так же, как и

для любого другого HTML-элемента, поддерживающего этот атрибут;

tabindex - номер элемента управления при навигации при помощи табуляции;

acсesskey - «горячая» клавиша для элемента управления (для перехода к элементу управ-

ления нужно нажать Аlt и заданную клавишу).

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

HTML-документа с формой, показанной на рис. 1.

Пример. Пример использования HTML-элемента INPUT

<TITLE>Типы элементов управления INPUT </TITLE>

<FORM>

Текстовое поле <INPUT type="text" name ="type_texf"> <BR>

Поле для ввода пароля: <INPUT type="password" name="type_password" alt =

"asfdsvdf"> <BR>

Флажок: <INPUT type="checkbox" name="type_check" value = "chk1" checked>

<BR>

два переключателя: <INPUT type="radio" name="type_radio" value="1" checked>

и <INPUT type="radio" name="type_radio" value="2" alt = "asfdsvdf"> <BR>

Поле с именами файлов: <INPUT type = "file" name = "type_file"> <BR>

<INPUT type = "submit" value = "Отправка данных"> <BR>

Щелчок на этом изображении также приведет к отправке данных:

<INPUT type = "image" src = "submit.gif" alt = "asfdsvdf"> <BR>

<INPUT type = "reset" value = "Сброс значений полей"> <BR>

<INPUT type = "button" value = "Пользовательская кнопка" alt = "asfdsvdf">

</FORM>

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

hidden. Поскольку использование каждого из значений атрибута type налагает различные ог -

раничения на применение других атрибутов HTML-элемента INPUT , то целесообразно рассмот -

реть влияние каждого значения подробно. Для краткости особенности использования каждого

значения сведены в таблицу (табл.1).

Атрибут size упоминался только для элементов управления, имеющих в своем составе

текстовые поля. Это потому, что хотя для остальных элементов управления этот атрибут и должен

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

но трудно найти браузер, который бы это поддерживал.

	которые могут быть введены в поле
password	Действие этого значения аналогично действию значения text, но дополнительно скрывается    вводимый    пользователем    текст    (заменяется    символами    «*»). Используется для ввода конфиденциальной информации типа паролей
checkbox	Создает элемент управления флажок. Задавать значение атрибута value нужно обязательно, так как именно это значение отправляется серверу, если флажок установлен. Можно использовать несколько элементов управления checkbox с одинаковым значением атрибута name для обеспечения возможности задания нескольких значений одного свойства
radio	Создает переключатель. Имеет смысл использовать как минимум два этих элемента управления вместе, объединенных в группу, с заданием одного и того же значения атрибута name. Тогда у пользователя появляется возможность выбора одного из нескольких вариантов (одновременно можно установить только один переключатель в группе). Значение атрибута value задавать также обязательно, оно используется аналогично элементу управления checkbox
file	Создает поле для ввода имени файла с возможностью выбора файла с помощью диалогового окна открытия файла или без него, что зависит от браузера. Содержимое выбранного файла или файлов пересылается вместе с формой, для корректной работы необходима установка значения атрибута method формы в post, a enctype — в multipart/form-data. Значение атрибута value используется как имя файла по умолчанию. Значение атрибута size задается и работает аналогично элементу управления text
submit	Создает кнопку, при нажатии которой браузер отправит форму. Значение атрибута value задает надпись на кнопке
image	Создает изображение, при щелчке на котором произойдет отправка формы браузером. При этом на сервер передаются также координаты указателя мыши относительно левого верхнего угла изображения. Атрибут src задает расположение используемого изображения
reset	Создает кнопку, при нажатии которой значения всех элементов управления будут заменены значениями по умолчанию. Значение value задает надпись на кнопке
button	Создает пользовательскую кнопку. При нажатии или другом действии с кнопкой может    выполняться    ассоциированный    сценарий.    Значение    атрибута    value используется     как     надпись     на     кнопке.     Подробно     создание     сценариев, ассоциирование их с элементами управления и не только будет рассмотрено далее
hidden	Создает скрытый элемент управления. Для него задаются атрибуты name и value. Пользователь не видит и не может изменить содержимое этого элемента управления. Однако данные скрытого элемента управления отправляются серверу вместе с остальными данными формы

Многострочное текстовое поле

Теперь рассмотрим, как вставить в форму более «продвинутый» элемент управления для

редактирования текста — многострочное текстовое поле. Обозначается этот элемент управления

HTML-элементом TEXTAREA и задается парными тегами <TEXTAREA> и </TEXTAREA>.

Главным отличием этого элемента управления от обычного текстового поля, кроме

возможности ввода текста, состоящего из большого количества строк, является то, что начальное

значение не задается атрибутом value, а записывается между тегами < TEXTAREA > и

</TEXTAREA>.

В целом для настройки элемента TEXTAREA используются те же атрибуты, что и для

настройки элемента INPUT со значением атрибута type, равным text или password. Однако размер

элемента управления задается не атрибутом size, а с помощью следующих атрибутов:

Rows – задает количество строк, которые отображаются без необходимости вертикальной

прокрутки;

5

Cols – задает максимальное количество символов в строке текстового поля, отображаемое

без переноса.

Пример. Создание многострочного текстового поля

<TEXTAREA name = "txtText" rows = 6 cols =40>

Первый перевод строки не учитывается

Все последующие переводы строки

учитываются

Учитываются также отступы от начала строки

Можно использовать зарезервированные символы HTML, типа <>& и прочие

</TEXTAREA>

Создание JavaScript – функций. Внешний скрипт.

Функция - это именованная последовательность операторов (инструкций). Любая функция

имеет следующий синтаксис:

function имя (){

оператор;

.......

оператор;

}

Сначала идет ключевое слово function, затем имя функции, затем в круглых скобках

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

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

запятой.

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

скриптов.

Создайте html-страницу, файл script.js для функций (данный файл можно создать в

Блокноте, только сохранить его с расширением js) и подключите файл внешнего скрипта к html-

странице с помощью тега <script>.

Поместим в html-страницу следующий код:

<html>

<head>

<title>Заголовок документа</title>

<script type="text/javascript" src="script.js"></script>

</head>

<body>

<div onClick="showMessage();">Щелкни меня</div>

</body>

</html>

В данном примере указали, что при щелчке пользователя по div (т.е. по словам "Щелкни

меня") должна быть вызвана функция с именем "showMessage". Теперь в файле script.js надо

написать саму функцию "showMessage". Открываем файл script.js и пишем:

function showMessage(){

alert ("Вы щелкнули по div");

}

Функция "showMessage" будет выполнять одно действие - отображать окно

предупреждений с текстом "Вы щелкнули по div".

Откройте html-страницу с помощью браузера и щелкните по div. На экране появиться окно

с сообщением «Вы щелкнули по div».

Таким образом, механизм работы обработки событий можно в общем виде представить так:

6

1. В html-странице привязываем к нужному элементу обработчик события (onClick,

onMouseUp и т.д.), в качестве значения которого указываем имя функции, которая и должна

сработать, когда настанет событие.

2. В файле с расширение .js пишем код этой функции, т.е. инструкции, которые должны

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

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

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

html-странице нужные элементы формы:

<html>

<head>

<title>Расчет площади прямоугольника</title>

<script type="text/javascript" src="script.js"></script>

</head>

<body>

<form name="forma1">

Введите длину прямоугольника <input type="text" name="t1" size="10"><br><br>

Введите ширину прямоугольника <input type="text" name="t2" size="10"><br><br>

<input type="button" name="button" value="Вычислить"><br><br>

Площадь прямоугольника равна <input type="text" name="res" size="10">

</form>

</body>

</html>

В браузере наша страница будет выглядеть так:

Итак, пользователь вводит значения ширины и длины и нажимает на кнопку "Вычислить".

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

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

вычисления площади назовем "areaRectangle":

.......

<input type="button" name="button" value="Вычислить"

onClick="areaRectangle();"><br><br>

.......

Теперь напишем саму функцию "areaRectangle". Для этого откроем файл script.js и

напишем заготовку для функции:

function areaRectangle(){

}

Теперь надо написать тело функции. Для начала объявим три переменные:

a - значение длины прямоугольника,

7

b - значение ширины прямоугольника,

s - площадь прямоугольника:

function areaRectangle(){

var a;

var b;

var s;

}

Значение (value) a должно браться из текущей страницы (document), из формы с именем

"forma1", из текстового поля с именем "t1". Так это и записывается document.forma1.t1.value,

т.е. перечисляются через точку имена объектов от родительского до нужного. Последним

указывается необходимое свойство объекта (value).

Аналогично запишем для значения b - document.forma1.t2.value.

Переменная s - есть произведение a на b. Запишем это в тело функции:

function areaRectangle(){

var a=document.forma1.t1.value;

var b=document.forma1.t2.value;

var s=a*b;

}

Осталось только написать инструкцию записи вычисленной площади в текстовое поле с

именем "res" на форме. Т.е необходимо, чтобы в текущую страницу, в форму с именем "forma1", в

текстовое поле с именем "res", в качестве значения (value) было присвоено значение s. Запишем

это в функции:

function areaRectangle(){

var a=document.forma1.t1.value;

var b=document.forma1.t2.value;

var s=a*b;

document.forma1.res.value=s;

}

Иными словами, сначала присвоили переменным a и b значения из формы, затем произвели

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

значение s.

Проверим работу html-страницы в браузере. Если все сделали правильно, то должно на

экране появиться следующее: