42248

Использование форм в Web-страницах. Вставки форм в Web-страницах

Лабораторная работа

Информатика, кибернетика и программирование

Использование форм в Webстраницах Целью работы является знакомство с элементами вставки форм в Webстраницах. Программное обеспечение: операционная система Windows Webбраузер Internet Explorer версии 6. Модуль Bsic Forms Формы HTML первоначально были предназначены для пересылки данных от удаленного пользователя к Webсерверу.

Русский

2013-10-28

267.5 KB

6 чел.

 21 -

Лабораторная Шонин В.А. работа 2-12

Использование форм в Web-страницах 

1. Цель работы

Целью работы является знакомство с элементами вставки форм в Web-страницах.   

2. Состав рабочего места

2.1. Оборудование: IBM-совместимый   персональный компьютер (ПК).

2.2. Программное обеспечение: операционная система Windows, Web-браузер Internet Explorer версии 6.0 и выше.

3. Краткие теоретические сведения

3.1. Модуль Basic Forms

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

В состав модуля Basic Forms входят основные элементы HTML, связанные с обработкой форм: <form>, <input>, <label>, <option>, <select> и <textarea>.

3.1.1. Элемент <form>

В документе HTML для задания формы используется контейнер <form>...</form>. Документ может содержать несколько форм, но они не могут быть вложены одна в другую. Помимо общих атрибутов class, dir, id, lang, style и title, для элемента <form> можно задавать атрибуты, приведенные в табл. 12.1.

Таблица 12.1. Атрибуты элемента <form>

Имя атрибута

Что определяет

Значение по умолчанию

accept

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

нет

accept-charset

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

нет

action

Адрес ресурса, содержащего обработчик формы.

нет

enctype

Метод кодирования данных, отправляемых формой в виде MIME-типа.

application/x-www-form-urlencoded

method

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

get

name

Имя формы.

нет

target

Имя фрейма, в который будут выводиться результаты обработки формы.

нет

Значением атрибута action является URL-адрес программы, которая будет обрабатывать информацию, извлеченную из данной формы. В значении атрибута могут быть также заданы параметры вызова программы, например:

action="http://localhost/hello.asp?login=ivanov&pass=stud1"

Атрибут method определяет метод пересылки данных, содержащихся в форме, от Web-браузера к Web-серверу. Он может принимать два значения: get (по умолчанию) и post.

Значением атрибута enctype является MIME-тип, определяющий формат кодирования данных при передаче их от Web-браузера к серверу (Web-браузер кодирует данные, чтобы исключить их искажение в процессе передачи).

Для пересылки форм используются два метода кодирования информации, содержащейся в форме:

  •  стандартный метод application/x-www-form-urlencoded, используемый по умолчанию;
  •  дополнительный multipart/form-data.

Если обработка данных формы производится в Web-браузере (с помощью сценария), параметры action, method и enctype задавать не надо.

Второй метод нужен только в том случае, если к содержимому формы присоединяется локальный файл, выбранный при помощи элемента формы <input type="file">. В остальных случаях следует использовать метод кодирования по умолчанию.

Атрибуты  accept и accept-charset задают списки соответственно MIME-типов и кодировок данных, которые должен воспринимать Web-сервер, чтобы обработать данные формы.

Допустимыми значениями атрибута  autocomplete являются on (автоматическое заполнение форм включено) или off (автоматическое заполнение форм выключено).

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

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

Для создания полей формы средствами языка HTML существуют специальные элементы: <label>, <input>, <select> и <textarea>. Эти элементы употребляются только внутри элемента <form>.

3.1.2. Элемент <label>

Контейнер <label>…</label> задает сопроводительную надпись для элемента формы. Для элемента <label> можно задавать  общие атрибуты class, dir, id, lang, style и title. Обязательным атрибутом элемента <label> является атрибут for, значением которого является значение атрибута name или id того элемента формы, для которого задается сопроводительная надпись.

Для элемента <label> можно задавать  стили шрифта, текста, цвета и фона, а также стили полей, границ и отступов блоковой модели документа.

3.1.3. Элемент <input>

Одиночный элемент <input> определяет тип элемента формы и его параметры. Помимо общих атрибутов class, dir, id, lang, style и title, для элемента <input> можно задавать атрибуты, приведенные в табл. 12.2.

Таблица 12.2. Атрибуты элемента <input>

Имя атрибута

Что определяет

Значение по умолчанию

accept

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

нет

align

Выравнивание элемента формы (если элементом формы является изображение).

left

alt

Альтернативный текст (если элементом формы является изображение).

нет

checked

Задание включения переключателя или радиокнопки (атрибут задается по имени, без значения).

переключатель или радиокнопка выключены

disabled

Отключает управление элемента формы (атрибут задается по имени, без значения).

управление элемента формы включено

ismap

Элемент формы является серверной картой-изображением

нет

maxlength

Максимальное количество символов, которые пользователь может ввести в элемент формы.

не ограничено

name

Имя элемента формы.

нет

readonly

Доступность элемента только для чтения (атрибут задается по имени, без значения).

элемент формы можно модифици-ровать

size

Начальная ширина поля (в пикселях или символах).

зависит от Web-браузера

src

Адрес ресурса (если элементом формы является изображение).

нет

type

Тип элемента формы.

text

usemap

Определение внутренней ссылки на имя карты ссылок (атрибут name в элементе <map>) (если элементом формы является изображение).

нет

value

Начальное значение элемента формы.

зависит от элемента формы

Тип элемента формы задает атрибут type, который может иметь значения, приведенные в табл. 12.3.

Таблица 12.3. Допустимые значения атрибута type элемента <input>

Значение атрибута

type

Что задает

Дополнительные атрибуты (кроме общих атрибутов, атрибутов disabled и readonly)

button

Кнопку.

name, value

checkbox

Переключатель.

name, value, checked

file

Запрос для передачи файла на Web-сервер.

name

hidden

Скрытое поле.

name, value

image

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

name, src, align, usemap или ismap

radio

Радиокнопку (кнопку с альтернативным выбором)

name, value, checked

reset

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

name, value

password

Текстовое поле для ввода пароля.

name, maxlength, size

submit

Кнопку передачи данных формы на Web-сервер.

name, value

text

Однострочное текстовое поле (значение по умолчанию).

name, maxlength, size

3.1.4. Кнопки (type="button")

Элемент <input> со значением type="button"  задает кнопку с идентификатором, задаваемым значением атрибута name или id. Надпись на кнопке задается с помощью атрибута value.

Для кнопки можно задать стили шрифта, текста, цвета и фона, а также стили полей, границ и отступов блоковой модели документа. Свойство text-align действует только в Internet ExplorerFirefox, Opera и Netscape надпись на кнопке всегда выровнена по центру). Свойство background-image (использование в кнопке изображения в качестве фона) не действует в Internet Explorer.

3.1.5. Переключатели (type="checkbox") и радиокнопки (type="radio")

Элемент <input> со значением type="checkbox"  или type="radio" задает переключатель или радиокнопку с двумя состояниями (включен/выключен) и с идентификатором, задаваемым значением атрибута name или id. Переключатели и радиокнопки можно объединить в группу, присвоив им одинаковые значения в атрибуте name. Различие между переключателями и радиокнопками заключается в том, что для группы переключателей можно задать включенными несколько элементов, а для радиокнопок – только один (поэтому радиокнопки называют также альтернативными переключателями). По умолчанию переключатель и радиокнопка первоначально находятся в выключенном состоянии. Для того, чтобы задать первоначальное состояние элемента как включенное, используется атрибут checked (если для радиокнопок несколько элементов имеют атрибут checked, то включенным окажется последний элемент).  Значение атрибута value для переключателей и радиокнопок должно задавать уникальное значение для каждого переключателя или радиокнопки (именно по значению этого атрибута выполняется анализ состояния данного переключателя или радиокнопки).

Стили цвета, фона и блоковой модели документа для переключателей или радиокнопок задавать не рекомендуется. В Firefox, и Netscape они не действуют, в Opera действуют, а в Internet Explorer они также действуют, но по-другому, чем в Opera.

3.1.6. Текстовые поля (type="text") и пароли (type="password")

Элемент <input> со значением type="text" (или без атрибута type) задает текстовое поле для ввода строки текста (текстового поля) с идентификатором, задаваемым значением атрибута name или id. Атрибут maxlength задает максимальное количество символов, разрешенных в текстовом поле, а атрибут size – максимальное  количество отображаемых в поле символов. Атрибут value позволяет задать начальное значение текстового поля, которое можно модифицировать, если не заданы атрибуты disabled и/или readonly (по умолчанию в текстовом поле ничего не выводится).   

Элемент <input> со значением type="password" также создает элемент ввода строки текста, отличающийся от предыдущего поля только тем, что все вводимые символы представляются в виде символа "*".

Для текстового поля или пароля можно задать стили шрифта, текста (в Opera не действует свойство text-decoration), цвета и фона, а также стили полей, границ и отступов блоковой модели документа.

3.1.7. Передача файлов на Web-сервер (type="file")

Элемент <input> со значением type="file" создает текстовое поле для ввода имени локального файла, сопровождаемое кнопкой Browse (Обзор). Выбранный файл присоединяется к содержимому формы при пересылке на сервер. Имя файла можно ввести непосредственно или, воспользовавшись кнопкой Browse(Обзор), выбрать его из диалогового окна, отображающего список локальных файлов. Для корректной передачи присоединенного файла следует установить значения атрибутов формы в виде enctype="multipart/form-data" и method="post". В противном случае будет передана введенная строка, то есть маршрутное имя файла, а не его содержимое. Единственным дополнительным атрибутом является атрибут name, задающий имя элемента.

Стили шрифтов, текста, цвета, фона и блоковой модели документа для текстового поля и кнопки выбора файлов задавать не рекомендуется. Во всех Web-браузерах (Internet Explorer, Firefox, Opera и Netscape) можно задать только цвет текста и цвет фона в поле. В Internet Explorer и Opera дополнительно можно задать стили шрифта в текстовом поле (в opera этим шрифтом будет выводиться также надпись на кнопке.  В этих Web-браузерах можно также задавать стили блоковой модели документа.  В Internet Explorer, Firefox и Netscape можно задать дополнительно стили текста в текстовом поле.  В Internet Explorer в качестве фона в текстовом поле можно задать изображение.

3.1.8. Скрытое текстовое поле (type="hidden")

Элемент <input> со значением type="hidden" создает скрытый элемент, не отображаемый пользователю с  идентификатором, задаваемым значением атрибута name или id. Информация, хранящаяся в скрытом поле, всегда пересылается на сервер. Скрытое поле можно использовать, например, в следующем случае. Пользователь заполняет форму и отправляет ее серверу. Сервер посылает пользователю для заполнения вторую форму, которая частично использует информацию, содержащуюся в первой форме. Сервер не хранит историю диалога с пользователем, он обрабатывает каждый запрос независимо, и при получении второй формы не будет знать, как она связана с первой. Чтобы повторно не вводить уже введенную информацию, можно заставить программу, обрабатывающую первую форму, переносить необходимые данные в скрытые поля второй формы. Они не будут видимы пользователем и, в то же время, доступны серверу. Значение скрытого поля определяется атрибутом value.

3.1.9. Кнопка сброса (type="reset")

Элемент <input> со значением type="reset" создает кнопку сброса, нажатие которой отменяет все сделанные изменения, восстанавливая значения полей формы на тот момент, когда она была загружена. По умолчанию отображается в виде кнопки с надписью Reset. Надпись можно изменить при помощи дополнительного атрибута value. Поскольку имя кнопки не посылается на Web-сервер, атрибут name для нее можно не задавать.

Для кнопки сброса можно задать те же стили, что и для обычной кнопки.

3.1.10. Кнопка пересылки данных (type="submit")

Элемент <input> со значением type="submit" создает кнопку передачи, нажатие которой вызывает пересылку на сервер всего содержимого формы. По умолчанию отображается в виде кнопки с надписью Submit (или Submit Query). Дополнительный атрибут value позволяет изменить надпись на кнопке. Атрибут name для данного элемента может быть опущен. В этом случае значение кнопки не включается в список параметров формы и не передается на сервер. Если атрибуты name и value присутствуют, например,

<input type="submit" name="submit_button" value="OK">,

то в список параметров формы, передаваемых на сервер, включается параметр submit_button="OK". Внутри формы могут существовать несколько кнопок передачи.

Примеры использования кнопок пересылки данных будут рассмотрены при рассмотрении объектной модели документа, а также в разделе обработки данных на сервере.

Для кнопки передачи можно задать те же стили, что и для обычной кнопки.

3.1.11. Графическая кнопка пересылки данных (type="image")

Элемент <input> со значением type="image" создает элемент в виде графического изображения, действующий аналогично кнопке submit. Обязательный атрибут src задает адрес изображения, а дополнительные атрибуты alt и align задают соответственно  текст для изображения и выравнивание изображения относительно окружающих элементов. Для атрибута align определены те же значения, что и для аналогичного атрибута элемента <img>: left, right, top, texttop, middle, absmiddle, baseline, bottom и absbottom.

Если на изображении элемента щелкнуть мышью, то координаты указателя мыши в виде имя-элемента.x=n&имя-элемента.y=m (где имя-элемента – значение атрибута name, а m и n – значения координат x и y) включаются Web-браузером в список атрибутов формы, посылаемых на сервер. При обработке карты-изображения на стороне клиента необходимо задать значение атрибута usemap.

Для всех Web-браузеров для кнопки-изображения можно задать стили блоковой модели документа. Для Internet Explorer, Firefox и Netscape можно дополнительно задать цвет фона.

3.1.12. Элементы <select> и <option>

Контейнер <select>…</select> предназначен для того, чтобы организовать внутри формы выбор из нескольких вариантов без применения элементов типа checkbox и radio. Это связано с тем, что если элементов выбора много, то представление их в виде флажков или кнопок-переключателей увеличивает размеры формы, делая ее труднообозримой. С помощью элемента <select> варианты выбора более компактно представляются в окне Web-браузера в виде элементов ниспадающего меню или списка прокрутки. Помимо общих атрибутов class, dir, id, lang, style и title, для элемента <select> можно задавать атрибуты, приведенные в табл. 12.4.

Таблица 12.4. Атрибуты элемента <select>

Имя атрибута

Что определяет

Значение по умолчанию

disabled

Отключает управление элемента формы (атрибут задается по имени, без значения).

управление элемента формы включено

multiple

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

из списка можно выбрать один элемент

name

Имя меню (обязательный параметр).

нет

size

Количество видимых строк меню (если количество элементов в меню больше, то выводятся полосы прокрутки).

1

В элементе <select> можно задать стили шрифтов и текста (в Internet Explorer не действует стиль text-align). Для этого элемента можно задать также стили цвета и фона во всех Web-браузерах, однако стиль  background-image действует только в Firefox и Netscape. Стили блоковой модели документа можно задать в Firefox и Netscape.

Элементы меню задаются внутри контейнера <select>…</select> при помощи контейнера <option>…</option>.  Помимо общих атрибутов class, dir, id, lang, style и title, для элемента <option> можно задавать атрибуты, приведенные в табл. 12.5.

Таблица 12.5. Атрибуты элемента <option>

Имя атрибута

Что определяет

Значение по умолчанию

disabled

Отключает управление элемента меню (атрибут задается по имени, без значения).

управление элемента меню включено

selected

Начальный выбор пункта меню.

пункт меню не выбран

value

Текст пункта меню.

содержимое контейнера <option>…</option>

Атрибут value содержит строку, которая пересылается серверу, если данный элемент выбран из меню или списка. Если значение этого атрибута не задано, то по умолчанию оно устанавливается равным значению содержимого контейнера  <option>…</option>. Например, элементы

<option value="Red">Red</option>.  

<option>Red</option>

имеют одно значение "Red". В первом случае оно установлено явно при помощи атрибута value, во втором – по умолчанию.

В элементе <option> можно задать те же стили, что и в элементе <select> и с теми же ограничениями. Для этого элемента не действует стиль  background-image.

3.1.13. Элемент <textarea>

Контейнер <textarea>…</textarea> создает внутри формы поле для ввода многострочного текста, отображаемое в окне Web-браузера в виде прямоугольной области с горизонтальной и вертикальной полосами прокрутки. Помимо общих атрибутов class, dir, id, lang, style и title, для элемента <textarea> можно задавать атрибуты, приведенные в табл. 12.6.

Таблица 12.6. Атрибуты элемента <textarea>

Имя атрибута

Что определяет

Значение по умолчанию

cols

Количество символов в строке.

зависит от Web-браузера

disabled

Отключает управление элемента меню (атрибут задается по имени, без значения).

управление элемента меню включено

name

Имя текстовой области.

нет

readonly

Доступность элемента только для чтения (атрибут задается по имени, без значения).

текстовую область можно

модифицировать

rows

Количество строк в текстовой области.

зависит от Web-браузера

При вводе данных в текстовую область можно вводить несколько строк (с помощью клавиши Enter). Для пересылки на сервер каждая введенная строка дополняется символами "%0D%0A" (ASCII-символы «Возврат каретки» и «Перевод строки» с предшествующим символом "%"). Полученные строки объединяются в одну строку, которая и отправляется на сервер под именем, задаваемым атрибутом name.

В контейнере <textarea>…</textarea> можно поместить текст, который будет первоначально отображаться в текстовой области.

Для текстовой области можно задать стили шрифта, текста (в Opera не действует свойство text-decoration), цвета и фона, а также стили полей, границ и отступов блоковой модели документа.

3.2. Модуль Forms

Модуль Forms является расширенным вариантом модуля Basic Forms и содержит, помимо элементов, рассмотренных выше, элементы <button>, <fieldset>, <legend> и <optgroup>.

3.2.1. Элемент <button>

Контейнер <button>…</button> позволяет добавить простую кнопку в Web-страницу. Текст, расположенный между открывающим и закрывающим элементом, выводится в виде надписи на кнопке. Для элемента <button>, помимо общих атрибутов class, dir, id, lang, style и title, определены атрибуты, приведенные в табл. 12.7.

Таблица 12.7. Атрибуты элемента <button>

Имя атрибута

Что определяет

Значение по умолчанию

disabled

Отключает управление кнопкой (атрибут задается по имени, без значения).

управление кнопкой включено

name

Имя кнопки.

нет

type

Тип кнопки.

button

value

Значение, посылаемое на Web-сервер при нажатии кнопки.

Атрибут type в элементе <button> может принимать следующие значения:

  •  button – простая кнопка (значение по умолчанию);
  •  reset – кнопка сброса;
  •  submit – кнопка отправки данных на Web-сервер.

В отличие, от кнопки, формируемой элементом <input> со значением type="button", кнопка, создаваемая с помощью элемента <button> может быть задана в любом месте документа HTML, а не только в форме.

Для элемента <button> можно задать стили шрифта, текста, цвета и фона, а также стили полей, границ и отступов блоковой модели документа. Свойство text-align действует только в Internet ExplorerFirefox, Opera и Netscape надпись на кнопке всегда выровнена по центру). Свойство background-image (использование в кнопке изображения в качестве фона) не действует в Internet Explorer.

3.2.2. Элементы <fieldset> и <legend>

Контейнер <fieldset>…</fieldset>  группирует элементы формы аналогично тому, как это делает  контейнер <div>…</div> по отношению к элементам Web-страницы, причем контейнеры <fieldset>…</fieldset>  могут также быть вложенными. Для  элемента  определены общие атрибуты class, dir, id, lang, style и title.

Контейнер <legend>…</legend> внутри контейнера <fieldset>…</fieldset>   задает надпись для группы полей. Для элемента <legend> также определены общие атрибуты class, dir, id, lang, style и title.

Для элементов  <fieldset> и <legend>  можно задать стили шрифта, текста, цвета текста и фона, а также стили блоковой модели документа. Стили для фона, а также стили блоковой модели документа элемента <fieldset> действуют для всей группы элементов, а стили шрифта и текста – для всех надписей (элементов <legend>) внутри группы. Стили, заданные для элемента <legend>, действуют только для надписи. Стиль text-align (выравнивание надписи по горизонтали) не действует ни в одном Web-браузере, однако в элементе <legend> можно задать атрибут align со значениями "left" – выравнивание влево, "center" – выравнивание по центру или "right" – выравнивание вправо (этот атрибут не действует в Opera).

3.2.3. Элемент <optgroup>

Контейнер <optgroup>…</optgroup> позволяет группировать элементы внутри контейнера <select>…</select> для формирования иерархического меню. Помимо общих атрибутов class, dir, id, lang, style и title, для элемента <optgroup>, определены атрибуты, приведенные в табл. 12.8.

Таблица 12.8. Атрибуты элемента <optgroup>

Имя атрибута

Что определяет

Значение по умолчанию

disabled

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

управление группой включено

label

Имя для группы пунктов.

нет

Для элемента  <optgroup>  можно задать стили шрифта, текста, цвета текста и фона, а также (в Firefox и Netscape) стили блоковой модели документа.

3.3. Объект navigator

Объект navigator служит для получения характеристик Web-браузера клиента.

Поддерживаемые объектом navigator свойства отличаются в разных Web-браузерах. В табл. 12.9 приведены те свойства, которые поддерживаются всеми Web-браузерами.

Таблица 12.9. Свойства объекта navigator

Свойство

Описание

appCodeName

Возвращает имя кода программы Web-браузера.

appName

Возвращает имя программы Web-браузера.

appVersion

Возвращает версию программы Web-браузера.

cookieEnabled

Возвращает true, если Web-браузеру разрешен пользователем прием cookie, иначе возвращает false.

platform

Возвращает название клиентской платформы, например, "Win32".

userAgent

Возвращает строку, идентифицирующую Web-браузер клиента. Является комбинацией значений свойств appCodeName и appVersion.

Объект navigator поддерживает, кроме того, метод javaEnabled(), возвращающий true, если Web-браузеру разрешено пользователем выполнение сценариев JavaScript.

Наиболее часто используются свойства appName и appVersion, позволяющие создавать сценарии, учитывающие используемый Web-браузер и его версию. Например, следующая последовательность предложений

if (navigator.appName == "Microsoft Internet Explorer")

{

 действия, которые необходимо выполнить для Internet Explorer 

}

else if (navigator.appName == "Netscape")

{

 действия, которые необходимо выполнить для Netscape и Firefox 

}

else if (navigator.appName == "Opera")

{

 действия, которые необходимо выполнить для Opera

}

выполнит некоторые операции, которые по-разному реализуются в разных Web-браузерах.

3.4. Обработка событий

До появления операционных систем с графическим интерфейсом (типа Windows) было распространено так называемое «процедурное» программирование, суть которого заключается в том, что программа жестко определяет, когда и в какой последовательности вызываются те или иные процедуры, составляющие программу (языками такого типа являются, например, C, Pascal или Basic). Программист должен был заранее разработать и реализовать алгоритм выполнения своей программы. При ее запуске она жестко следовала инструкциям вызова соответствующих процедур.

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

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

События, возникающие в системе, в спецификации DOM2 Events разбиты на три группы:

  •  события графического интерфейса, связанные с взаимодействием с пользователем (UI Events);
  •  события графического интерфейса, не связанные с взаимодействием с пользователем (UI Logical Events);
  •  события, связанные с изменением структуры документа (Mutation Events).

К событиям, связанным с взаимодействием с пользователем, относятся события обработки нажатия клавиш и клавиатуры или кнопок мыши. Эти события представлены в табл. 12.10.

Таблица 12.10. События обработки нажатия клавиш и клавиатуры или кнопок мыши

Имя события

Описание

click

Наступает при щелчке мышью на элементе страницы или на самой странице.

dblclick

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

keydown

Наступает, когда пользователь нажимает и удерживает клавишу на клавиатуре.

keypress

Наступает, когда пользователь нажимает клавишу на клавиатуре. От keydown отличается тем, что возвращает значение кода символа в кодировке Unicode.

keyup

Наступает, когда пользователь отпускает нажатую ранее клавишу на клавиатуре.

mousedown

Наступает, когда пользователь нажимает кнопку мыши на элементе страницы или на самой странице.

mousemove

Наступает, когда пользователь перемещает мышь над элементом страницы или над самой страницей. Это событие вызывается при любом перемещении мыши.

mouseout

Наступает, когда пользователь убирает мышь с элемента страницы.

mouseover

Наступает, когда пользователь помещает мышь над элементом страницы.

mouseup

Наступает, когда пользователь отпускает ранее нажатую кнопку мыши.

Как видно из таблицы, многие  события вызываются подряд друг за другом. Например, при перемещении мыши над элементом страницы последовательность наступления событий будет такой:

mouseover, mousemove, mouseout.

Следует отметить, что mousemove наступает при любом, даже самом малом перемещении мыши.

При щелчке мышью на объекте последовательность событий будет следующей:

mousedown, mouseup, click.

т. е. код, привязанный к mousedown и mouseup, будет выполняться прежде кода, привязанного к click.

Если пользователь щелкает дважды, то последовательность событий следующая:

mousedown, mouseup, click, dblclick.

Как видно, при двойном щелчке раньше события dblclick наступает click. Это можно использовать в сценариях и, вместе с тем, придется это учитывать, чтобы не прореагировать на обычный щелчок, если нужна реакция на двойной щелчок.

При нажатии клавиши на клавиатуре последовательность наступления событий такова:

keydown, keypress, keyup.

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

События, не связанные  с взаимодействием с пользователем, приведены в табл. 12.11.

Таблица 12.11. События, не связанные  с взаимодействием с пользователем

Имя события

Описание

Для каких элементов используется

abort

Наступает при приостановке загрузки Web-страницы до окончательной загрузки изображения.

<img>

blur

Наступает при потере фокуса элементом.

<button>, <input>, <label>, <select>, <textarea>

change

Наступает при потере фокуса элементом после  изменения его содержимого.

<input>, <select>, <textarea>

error

Наступает при ошибке во время загрузки изображения или выполнения сценария.

<img>, <script>

focus

Наступает при приобретении фокуса элементом.

<button>, <input>, <label>, <select>, <textarea>

load

Наступает при окончании загрузки документа.

<body>, <frameset>

reset

Наступает при сбросе содержимого формы.

<form>

resize

Наступает при изменении размеров документа.

<body>, <frameset>

scroll

Наступает при прокрутке документа.

<body>, <frameset>

select

Наступает при выделении текста

<input>, <textarea> 

submit

Наступает при отправке формы на Web-сервер.

<form>

unload

Наступает при удалении элемента из окна или фрейма.

<body>, <frameset>

События, связанные с изменением структуры документа пока по-разному реализуются в разных Web-браузерах.

Для обработки событий в документе HTML можно использовать несколько способов.

Первый, самый распространенный, способ – задание атрибута обработки события в элементе элемента документа HTML.

Имена атрибутов обработки событий образуются из имени события с добавлением префикса "on". Значением атрибута являются предложение или предложения языка сценариев, реализующие обработку события, например:

<button id="b1" onclick="alert('Нажата кнопка 1')">

Кнопка 1</button>

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

function buttonEvent()

{

alert('Нажата кнопка 1')

}

...

<button id="b1" onclick="buttonEvent()">

Кнопка 1</button>

Второй способ – прямое объявление функции, обрабатывающей событие заданного типа в документе или элементе документа (эта функция называется обработчиком событияevent handler). Объявление функции-обработчика имеет следующий вид:

document.элемент-документа.onимя-события = имя-функции;

Если элемент-документа опущен, то обработка события будет выполняться в теле документа.

Объект event, имеет два общих свойства: свойство type (только для чтения), возвращающее строковое значение имени события, например, click и свойство, содержащее объект, в котором произошло событие. Это свойство называется srcElement в Internet Explorer и target в DOM2 Events.

Для событий мыши определены свойства, приведенные в табл. 12.12.

Таблица 12.12. Дополнительные свойства для событий мыши

Имя свойства

Описание

altKey

Возвращает true, если была нажата клавиша Alt.

button

Возвращает номер кнопки мыши, нажатой пользователем (В Internet Explorer: 1 – левая кнопка, 4 – средняя кнопка и 2 – правая кнопка; в DOM:   0 – левая кнопка, 1 – средняя кнопка и 2 – правая кнопка).

clientX

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

clientY

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

ctrlKey

Возвращает true, если была нажата клавиша Ctrl.

screenX

Возвращает горизонтальную координату курсора мыши относительно экрана.

screenY

Возвращает вертикальную координату курсора мыши относительно экрана.

shiftKey

Возвращает true, если была нажата клавиша Shift.

Для событий клавиатуры, помимо свойств altKey, ctrlKey и shiftKey определено также свойство, возвращающее десятичное значение кода нажатой клавиши в кодировке Unicode. В Internet Explorer это свойство называется keyCode, а в остальных Web-браузерах называется which.

Следует отметить, что если внутри функции-обработчика события необходимо использовать свойства объекта event, доступ к этим свойствам по-разному выполняется в Internet Explorer и в остальных Web-браузерах.

В  Internet Explorer при возникновении любого события динамически создается свойство event объекта window, входящего в объектную модель и представляющего окно Web-браузера. Это свойство и является объектом, соответствующим сгенерированному событию. Методов объект event в  Internet Explorer не имеет. Поэтому доступ, например, к свойству clientX в любом сценарии документа HTML выполняется следующим образом:

window.clientX

В остальных Web-браузерах при вызове функции-обработчика события первым параметром (или единственным) должен быть указан объект event, например:

<button id="b1" onclick="buttonEvent(event)"

value="Кнопка 1"></button>

и свойства в теле функции-обработчика задаются как свойства этого параметра.

Если элемент, который является источником (мишенью) события, имеет текстовое содержимое, например,

<p id="p1">Абзац текста</p>

то Internet Explorer и остальные Web-браузеры по-разному определяют элемент, вызвавший событие. Для Internet Explorer это будет элемент <p>, а для остальных Web-браузеров – дочерний текстовый элемент элемента <p>. Поэтому для того, чтобы получить, например, значение идентификатора элемента, вызвавшего событие, и в Internet Explorer и в Netscape Navigator, необходимо задать следующую последовательность предложений:

if (browserName == "Microsoft Internet Explorer")

elementId = event.srcElement.id;

else if (browserName == "Netscape")

elementId = evt.target.parentNode.id;

4. Порядок выполнения работы

Создайте интерактивную Web-страницу с использованием форм и обработки событий по одному из приведенных ниже вариантов.  

Вариант 12-01

Создайте Web-страницу, в которой определяется средний балл студента. В первом текстовом поле должны быть введены фамилия и инициалы учащегося, в раскрывающемся  меню задаются наименования дисциплин обучения, а во втором раскрывающемся  меню – полученная оценка по дисциплине.  При нажатии кнопки "Добавить" дисциплины обучения и полученные оценки выводятся в текстовой области (каждая дисциплина обучения и оценка – в отдельной строке). При нажатии кнопки "Средний балл" в третьем текстовом поле выводится средний балл студента.

Вариант 12-02

Создайте Web-страницу, в которой выполняются арифметические действия над двумя числовыми операндами. Операнды вводятся в двух текстовых полях. При нажатии одной из кнопок: "+", "-", "*" или "/" над операндами выполняется соответствующая арифметическая операция, и результат выводится в третьем текстовом поле. Если хотя бы один из введенных операндов не является числом, в третьем текстовом поле выводится сообщение "Ошибка".

Вариант 12-03

Создайте Web-страницу, в которой определяется количество прожитых лет, месяцев, часов, минут и секунд. Дата рождения вводится следующим образом: номер дня в месяце и наименование месяца – в раскрывающихся меню, а год – в текстовом поле. При нажатии кнопки "Статистика"  в пяти текстовых полях выводится соответственно количество прожитых лет, месяцев, часов, минут и секунд.   Если введен ошибочный год, то в текстовом поле для года  выводится сообщение "Ошибка".

Вариант 12-04

Создайте Web-страницу, в которой выводится горизонтальная линия с заданными атрибутами (первоначально  горизонтальная линия выводится со значениями, которые равны значениям по умолчанию). С помощью радиокнопки можно задать значение атрибута align: left, center или right, с помощью раскрывающегося меню с несколькими цветами можно задать значение атрибута color и с помощью двух текстовых полей можно задать значение атрибутов width и size.      При нажатии кнопки "Выполнить" линия (с помощью сценария JavaScript и средств DOM) выводится с заданными значениями атрибутов.   

Вариант 12-05

Создайте Web-страницу, в которой выполняет преобразование представления числа в заданную систему счисления. В первом текстовом поле вводится  целое десятичное  число. При нажатии одной из кнопок: "Hex", "Oct"  или "Bin" число переводится соответственно в шестнадцатеричное, восьмеричное или двоичное представление и результат выводится во втором текстовом поле. Если введенный операнд не является целым десятичным числом, во втором текстовом поле выводится сообщение "Ошибка".

Вариант 12-06

Создайте Web-страницу, в которой выполняется выбор изображения из заданного списка. В раскрывающемся меню выводится список наименований изображений (в раскрывающемся меню). При выборе пункта меню текущее изображение заменяется на выбранное изображение (сначала выводится первое изображение в списке изображений).

Вариант 12-07

Создайте Web-страницу, в которой выполняются арифметические действия над двумя операндами. В первом текстовом поле вводятся  два числовых операнда, между которыми должен находиться один из знаков арифметических действий:   "+", "-", "*" или "/". При нажатии кнопки "Вычислить"  выполняется  соответствующая арифметическая операция, и результат выводится во втором текстовом поле. Если введенный операнд не является правильным арифметическим выражением, во втором текстовом поле выводится сообщение "Ошибка".

Вариант 12-08

Создайте Web-страницу, в которой подсчитывается стоимость купленных товаров. В трех текстовых полях задается наименование товара, количество единиц товара и цена единицы товара. Наименование товара и цена товара заносится в текстовое поле после выбора товара из раскрывающегося меню наименований товаров,  количество товара должно быть введено в текстовое поле (по умолчанию значением этого поля является 1).   При нажатии кнопки "Добавить" товар добавляется в список купленных товаров, а при нажатии кнопки "Подсчитать" в четвертом текстовом поле выводится суммарная стоимость купленных товаров. Если количество единиц товара не является целым положительным числом,  во втором текстовом поле выводится сообщение "Ошибка".

Вариант 12-09

Создайте Web-страницу, в которой выполняется вывод изображения и «обтекающего» его текста при различных значениях атрибута align, vspace и hspace в дескрипторе <img> для изображения.  Значение align (left или right) задается с помощью радиокнопок, а значения vspace и hspace – в текстовых полях. Изменение параметров «обтекания» изображения выполняется при нажатии кнопки "Просмотр".  Если значения vspace и hspace не являются целыми положительными числами,  в соответствующем текстовом поле выводится сообщение "Ошибка".

Вариант 12-10

Создайте Web-страницу, в которой производится сравнение значений двух введенных операндов. В двух текстовых полях вводятся  два числовых операнда. При нажатии одной из кнопок: "<", ">", ">=", "<=", "!=", или "==" над операндами выполняется соответствующая операция сравнение, и результат выводится в третьем текстовом поле в виде сообщений "true" или "false". Если хотя бы один из введенных операндов не является числом, в третьем текстовом поле выводится сообщение "Ошибка".

Вариант 12-11

Создайте Web-страницу, в которой подсчитывается количество рабочих дней в месяце для заданного месяца и года (суббота и воскресенье считаются выходными днями). Значение года задается в текстовом поле (по умолчанию в этом поле выводится текущий год), а значение месяца – из раскрывающегося меню. При нажатии кнопки "Определить" результат выводится во втором текстовом поле. Если значение года задано неверно, во втором  текстовом поле выводится сообщение "Ошибка".

Вариант 12-12

Создайте Web-страницу для перевода значений единиц длины: пунктов, дюймов, футов и миль в значения в метрических единицах (миллиметрах, сантиметрах, метрах и километрах). Исходное значение задается в первом текстовом поле, а единицы длины для исходного значения – в раскрывающемся меню. Единицы длины для результата выбираются из другого раскрывающегося меню. При нажатии кнопки "Перевести" результат выводится во втором текстовом поле. Если исходное значение не является положительным числом, во втором  текстовом поле выводится сообщение "Ошибка". Данные для перевода значений длины: 1 пункт = 0.351 мм, 1 дюйм = 2.54 см, 1 фут = 30.48 см, 1 миля = 1.609 км.

Вариант 12-13

Создайте Web-страницу, в которой определяется день недели для заданной даты. Номер дня в месяце и наименование месяца вводятся  в раскрывающихся меню, а год – в текстовом поле. При нажатии кнопки "Определить день недели" в текстовом поле выводится день недели, на который приходится соответствующая дата.   Если введен ошибочный год, то в текстовом поле для года  выводится сообщение "Ошибка".

Вариант 12-14

Создайте Web-страницу, в которой подсчитывается стоимость подписки на газеты и журналы. Наименование журнала или газеты и количество месяцев подписки (от 1 до 12)  задаются с помощью раскрывающихся меню. При нажатии кнопки "Добавить" журнал или газета товар добавляется в список подписки, а при нажатии кнопки "Подсчитать" в текстовом поле выводится суммарная стоимость подписки.

Вариант 12-15

Создайте Web-страницу, в которой выполняется преобразование введенного числа в десятичную систему счисления. В первом текстовом поле вводится  целое шестнадцатеричное, восьмеричное или двоичное число. Система счисления задается с помощью радиокнопок "Hex", "Oct"  и "Bin". При нажатии кнопки "Перевести" число переводится в десятичное представление, и результат выводится во втором текстовом поле. Если введенный операнд не является числом в соответствующей системе счисления, во втором текстовом поле выводится сообщение "Ошибка".

Вариант 12-16

Создайте Web-страницу, в которой выводится заголовок заданного уровня. В начале страницы выводится заголовок первого уровня "Вывод заголовка". Текст заголовка задается в текстовом поле, а уровень заголовка задается с помощью раскрывающегося меню (h1-h6). Выравнивание заголовка (center, left, right или justify) задается с помощью радиокнопок. При нажатии кнопки "Вывод" заголовок в начале Web-страницы заменяется заданным заголовком (для этого удаляется старый заголовок и на его место вставляется новый заголовок).

Вариант 12-17

Создайте Web-страницу, в которой подсчитывается количество заданных слов в тексте (словом считается строка, перед которой и после которой стоит один из символов разделителей: пробел, переход на новую строку, точка, запятая, точка с запятой, восклицательный знак или вопросительный взгляд). Исходный текст вводится в текстовую область, а слово вводится в текстовом поле. При нажатии кнопки "Определить" во втором текстовом поле выводится количество повторений заданного слова в исходном тексте.

Вариант 12-18

Создайте Web-страницу, в которой определяется количество дней между двумя заданными датами. Для каждой даты номер дня в месяце и наименование месяца вводятся  с помощью раскрывающихся меню, а год – в текстовом поле. При нажатии кнопки "Определить количество дней" результат выводится в текстовом поле.   Если введен ошибочный год, то в текстовом поле для года  выводится сообщение "Ошибка".

Вариант 12-19

Создайте Web-страницу, в которой выводится таблица с заданными параметрами (содержание таблицы является произвольным). Для таблицы в трех текстовых полях задается толщина рамки (атрибут border), расстояние между ячейками (атрибут cellspacing) и поля внутри ячейки (атрибут cellpadding). Кроме того, с помощью двух раскрывающихся меню  задаются цвета рамки и цвета фона таблицы. При нажатии кнопки "Просмотр" параметры таблицы изменяются на заданные (первоначально таблица выводится со значениями атрибутов, равными значениям по умолчанию).   

Вариант 12-20

Создайте Web-страницу, в которой угадывается заданное слово. Первоначально в первом текстовом поле выводятся символы "*", количество которых равно длине заданного слова. Во втором текстовом поле вводится символ и, при нажатии кнопки "Проверить", выполняется проверка наличия введенного символа в поле. Если введенный символ есть в заданном поле, то в первом текстовом поле соответствующие символы "*" заменяются введенными символами. Когда угаданы все символы слова, в третьем текстовом поле выводится количество попыток угадывания слова.  

Вариант 12-21

Создайте Web-страницу, в которой вычисляется тригонометрическая функция для заданного значения. Единицы для вводимого значения (градусы или радианы) задаются с помощью радиокнопок. Вводимое число задается в первом текстовом поле. При нажатии одной из кнопок: "sin", "cos" или "tg" результат выводится во второе текстовое поле. Если введено не число, то во втором текстовом поле выводится сообщение "Ошибка".

Вариант 12-22

Создайте Web-страницу, в которой по заданной дате и времени начала события продолжительности события определяется дата и время его окончания. Дата начала события с помощью двух раскрывающихся меню (для дня в месяце и месяца) и текстового поля (для года). Время начала события задается в двух текстовых полях (значение часов и минут). Продолжительность события задается с помощью трех текстовых полей: для дней, часов и минут (в качестве начальных значений этих полей задаются нули, поэтому можно задавать только отдельные компоненты времени, например, задавать продолжительность события в часах). При нажатии кнопки "Определить" результат выводится в пять текстовых полей: день месяца, месяц, год, час, минута.  Если в данных содержатся ошибки, то в соответствующем текстовом поле выводится сообщение "Ошибка".

Вариант 12-23

Создайте Web-страницу, в которой выводится ячейка таблицы с заданной шириной и высотой и с заданным форматированием по вертикали и горизонтали (содержание ячейки таблицы является произвольным). Для ячейки таблицы в двух текстовых полях задается ширина (атрибут width), высота (атрибут height), а также в двух раскрывающихся меню значения соответственно горизонтального (center, left или right)  и вертикального (top, middle или bottom) выравнивания содержимого ячейки. При нажатии кнопки "Просмотр" параметры ячейки таблицы изменяются на заданные (первоначально ячейка таблица выводится с произвольным значением ширины и высоты, а содержимое ячейки расположено сверху по центру).

Вариант 12-24

Создайте Web-страницу, в которой выполняется кодирование заданной строки. В первом текстовом поле вводится заданная строка. При нажатии кнопки "Кодировать" во втором текстовом поле (только для чтения)  выводится текущий символ строки,  а третьем текстовом поле необходимо ввести код текущего символа (один или несколько символов). Если в строке несколько одинаковых символов, то операция кодирования выполняется только для первого вхождения символа. После кодировки всех символов в четвертом текстовом поле выводится закодированная строка.   

Вариант 12-25

Создайте Web-страницу, в которой выполняются арифметические вычисления с использованием памяти. Операнд вводится в первом текстовом поле. При нажатии кнопки "MS" операнд помещается в память. При нажатии одной из кнопок "M+", "M-", "M*" или "M/" выполняется соответствующая арифметическая операция, в котором первым операндом является текущее число в первом текстовом поле, а вторым – число в памяти. Результат операции выводится во втором текстовом поле. Если введено не число, то во втором текстовом поле выводится сообщение "Ошибка".

Вариант 12-26

Создайте Web-страницу, в которой определяется результат константного логического выражения. В первом текстовом поле формируется  логическое константное выражение с помощью кнопок "true", "false", "&" (И), "|" (ИЛИ), "!" (НЕ) и "^" (исключающее ИЛИ) (например, true & !false | true). Выполнение операции производится при нажатии кнопки "Вычислить".  Результат выполнения операции (true или false) выводится во второе текстовое поле.

Вариант 12-27

Создайте Web-страницу, в которой подсчитывается количество заданных символов в тексте. Исходный текст вводится в текстовую область, а символ вводится в текстовом поле. При нажатии кнопки "Определить" во втором текстовом поле выводится количество повторений заданного символа в исходном тексте. Если в первом текстовом поле введено больше одного символа, во втором текстовом поле выводится сообщение "Ошибка".

Вариант 12-28

Создайте Web-страницу, в которой выводится заголовок первого уровня с заданными параметрами (первоначально выводится заголовок черного цвета размера 4, выровненный по центру). С помощью радиокнопки можно задать выравнивание заголовка (center, left, right или justify),  с помощью раскрывающегося меню с несколькими цветами можно задать цвет заголовка и с помощью текстового поля можно задать размер заголовка.   При нажатии кнопки "Выполнить" заголовок (с помощью сценария JavaScript и средств DOM) выводится с заданными значениями атрибутов align в дескрипторе <h1>, color и size в дескрипторе <font>.

Вариант 12-29

Создайте Web-страницу, в которой выводится изображение и два текстовых поля, в которых задается ширина и высота изображения. При нажатии кнопки "Изменить" изображение выводится с заданной шириной и высотой.

Вариант 12-30

Создайте Web-страницу, в которой вычисляется результат логической операции a операция b. Значения a и b (true или false) задаются с помощью радиокнопок, а логическая операция – с помощью кнопок "&" (И), "|" (ИЛИ) и "^" (исключающее ИЛИ). Выполнение операции производится при нажатии кнопки "Вычислить".  Результат выполнения операции (true или false) выводится во втором текстовом поле.

 

5. Содержание отчета

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

6. Вопросы для самоконтроля

  1.  Как в форме задается программа, обрабатывающая форму, и параметры этой программы?
  2.  Для каких целей используется элемент <label>?
  3.  Какие элементы форм определены в JavaScript? Дайте краткую характеристику каждого элемента.
  4.  С помощью какого элемента формы можно передать файл на Web-сервер?
  5.  Для каких целей используются скрытые поля формы?
  6.  Чем отличается текстовое поле от текстовой области?
  7.  Чем отличается описание кнопки с помощью элемента <button> от описания с помощью элемента формы?
  8.  Для каких целей используются элементы <fieldset> и <legend>?
  9.  Для каких целей используется элемент <optgroup>?

Файл: file:///web/5fan/public_html/www/files/8/5fan_ru_42248_74447592d55c452cd966fedc46ea5216.doc   Создан: 2007-04-11T16:01:00Z Модифицирован: 2007-04-11T16:01:00Z     Автор:


 

А также другие работы, которые могут Вас заинтересовать

53641. Понятие информации. Характеристика информации 39.5 KB
  Итак тема нашего сегодняшнего урока Информация Кто-нибудь из вас может попробовать сказать мне что такое информация Ученики: выводят определение информации. А теперь давайте запишем определение информации научным языком. А сейчас мы с вами рассмотрим свойства информации.
53642. Компьютерная графика, комбинированный урок 42 KB
  Здравствуйте Отмечаю отсутствующих. Контроль знаний 10 минут Учитель: Сейчас у вас будет проверочная работа в виде теста. Все поняли задание Дети: Да Показываю презентацию дети отвечают на вопросы на каждый вопрос 1 минута Учитель: Теперь сдаем листочки. Учитель: Теперь открываем на рабочем столе документ txt вы видите 2 стихотворения.
53643. У порога и начало первой русской революции 1905-1907 гг 38 KB
  Эти события получили название первая русская революция. Что такое революция В чем она проявляется Дети понимают что им нужно узнать что же такое революция. Учитель предлагает ребятам рассказать как они понимают слово революция для более глубокого осмысления понятия а затем записать грамотное определение понятию революция. Итак ребята что нового мы узнали сегодня на уроке 1Узнали что в 19051907 гг в России произошла революция 2Опираясь на ранее изученный материл вспомнили что такое революция 3Поняли причины произошедшей...
53644. Мы рисуем осень 127.5 KB
  Тема урока: Мы рисуем осень Цель урока: создать условия для сознательного выбора учащимися применения ими выразительных средств для передачи характерных признаков разных периодов осени. Я нарисовал осень и вот что у меня получилось показывает рисунок. А я с ним не согласен я всё знаю Осенью всегда грязно холодно тоскливо всегда идёт дождь никакого настроения нет Ведь правда Учитель: В осени три месяца. Неужели они все одинаковые Осень называют капризным временем года и не случайно.
53645. Декоративно-прикладное искусство в жизни человека 69.08 KB
  Тема урока. Триединая цель урока: воспитание уважения к русским традициям через знакомство с символикой древних славян в ДПИ и применение знаний в практической работе Древо жизни Задачи. Формировать умение работать с бумагой технике вытынанки Тип урока: комбинированный урок Формы организации работы: Общеклассная и индивидуальная.
53646. В музеях хранятся картины. Натюрморт 37.5 KB
  Натюрморт. Сегодня мы как раз поговорим про натюрморт и выполним первые работы для вашего классного музея. Кто запомнил что такое натюрморт Это предметы объединённые одной темой. Если натюрморт чайный какие предметы будут входить в натюрморт Какие бывают натюрморты кто знает Слайд.
53647. Урок внеклассного чтения в 9 классе по рассказу Э. Хемингуэя «Кошка под дождём» 55 KB
  Структура урока Организационный момент Актуализация мотивация и целеполагание Слово учителя Беседа по тексту Итог урока Рефлексия Тип урока изучение и первичное закрепление нового материала. Ход урока. Структура урока Деятельность учителя Деятельность ученика Организационный момент 1 минута Приветствует учащихся рассаживает их по партам создает доброжелательную рабочую атмосферу проверяет готовность учащихся к работе и наличие у каждого ученика художественного текста.
53648. Стоимость источников заемного капитала, собственного капитала. Средневзвешенная стоимость капитала 32.5 KB
  Основными элементами заемного капитала являются ссуды банка и выпущенные предприятием облигации. Стоимость такого источника финансирования как банковские ссуды зависит в первую очередь от процентной ставки по кредиту.
53649. Художественная культура Античности 340.5 KB
  Ученики отвечают на вопросы Ученики вставляют пропущенные слова Ученики пишут современное значение крылатых выражений Ученики отгадывают загадки о древнегреческих богах Ученики отгадывают ребусы Ученики отвечают на вопросы Ученики вставляют пропущенные слова Ученики пишут современное значение крылатых выражений Ученики отгадывают загадки древнегреческих богах Ученики отгадывают ребусы 1 вариант Древнеримская культура Определите соответствие между древнегреческими и древнеримскими богами их функциями Зевс Марс 1 бог любви Арес...