Поможем в ✍️ написании учебной работы

Имя

Поможем с курсовой, контрольной, дипломной, рефератом, отчетом по практике, научно-исследовательской и любой другой работой

Выберите тип работыЧасть дипломаДипломная работаКурсовая работаКонтрольная работаРешение задачРефератНаучно - исследовательская работаОтчет по практикеОтветы на билетыТест/экзамен onlineМонографияЭссеДокладКомпьютерный набор текстаКомпьютерный чертежРецензияПереводРепетиторБизнес-планКонспектыПроверка качестваЭкзамен на сайтеАспирантский рефератМагистерская работаНаучная статьяНаучный трудТехническая редакция текстаЧертеж от рукиДиаграммы, таблицыПрезентация к защитеТезисный планРечь к дипломуДоработка заказа клиентаОтзыв на дипломПубликация статьи в ВАКПубликация статьи в ScopusДипломная работа MBAПовышение оригинальностиКопирайтингДругое

Нажимая кнопку "Продолжить", я принимаю политику конфиденциальности

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

//Пример 1 function MyFoo(x, y) { this.x = x; this.y = y; } //Корректный вызов. var obj1 = new MyFoo(1, 2); /* MyFoo является конструктором объекта obj1, this является ссылкой на этот объект, который получает свойства x и y со значениями 1 и 2. */ // Некорректный вызов. var obj2 = MyFoo(1, 2); /* MyFoo вызвана как обычная функция. Такой вызов осуществляется    в контексте объекта window. Объект window приобретает свойства x и y    со значениями 1 и 2, переменная obj2 значение undefined    (поскольку MyFoo не возвращает значения). */ //Пример 2 function SumSquares() { return this.x * this.x + this.y * this.y; } // Добавляем функцию SumSquares к методам объектов MyFoo. MyFoo.prototype.SumSquares = SumSquares; // Обратите внимание на отсутствие круглых скобок. //Корректный вызов. var a = obj1.SumSquares(); // Здесь круглые скобки обязательны //Некорректный вызов. var b = SumSquares(); /* Функция вызвана в контексте объекта window, у которого нет (не предполагается) свойств x и y. */ //Чтобы избежать ошибок как в примере 2,   //лучше задать метод SumSquares как анонимную функцию. MyFoo.prototype.SumSquares = function() { return this.x * this.x + this.y * this.y; }

Вопросы

1. Что такое событие?
2. Перечислите основные события.
3. Перечислите свойства объекта event.
4. Как получить доступ к объекту event в функции-обработчике события - в IE и других браузерах?
5. Как получить доступ к элементу-источнику события, имея объект event?
6. Как передать обработчику события ссылку на элемент-источник?
7. Как происходит связывание элемента-источника и события с функцией-обработчиком?
8. Какой смысл имеет ключевое слово this в функциях-обработчиках событий?

 

Лекция 17:

HTML-формы

 

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

 

Современный интернет немыслим без взаимодействия с пользователем. Форумы, веб-страницы электронной почты, электронная коммерция, все это требует отправки тех или иных данных от пользователя на веб-сервер. Этой цели служат HTML-формы.

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

Форма добавляется в документ посредством тэга form, который может располагаться внутри элемента body и вложенных в него элементов. В документе может быть несколько элементов form, но вложение одной формы в другую не допускается.

<form action="myform.aspx" method="post"> ... </form>

Помимо общих для большинства элементов атрибутов, таких как id, class, style, элемент form имеет ряд специфических атрибутов.

• Атрибут action задает URL (адрес), на который будут отправлены данные для обработки. В приведенном примере данные будут отправлены на страницу myform.aspx, находящуюся на том же сервере и в той же папке, что и документ, содержащий форму. Если атрибут action опущен, то данные будут отправлены на документ, содержащий форму.
• Атрибут method задает способ передачи данных на сервер. Возможны два значения:
• get – данные будут добавлены к URL, заданному в атрибуте action.
• post – данные будут отправлены через стандартный канал.
• Атрибут enctype задает MIME (Multipurpose Internet Mail Extensions) тип отправляемого содержимого. Значение по умолчанию этого атрибута application/x-www-form-urlencoded. Это значение подходит для большинства случаев, но если требуется загрузить файл на сервер, enctype="multipart/form-data" (и method="post").

Элементы управления

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

1. Элемент управления должен находиться внутри элемента form.
2. Элемент управления должен иметь атрибут name.

Данные из элементов управления, не соответствующих любому из этих требований, отправлены на сервер не будут.

<body> <form action="http://server.ru/myform.aspx" method="get"> Ваше имя: <input type="text" name="username"> <!-- Эти данные будут отправлены, т.к. требования выполнены --> Ваш любимый напиток: <select id="drink"> <option>чай</option> <option>кофе</option> <option>квас</option> </select> <!-- Эти данные не будут отправлены, т.к. отсутствует name --> <input type="submit" value="отправить"> </form> Ваше сообщение: <textarea name="message"></textarea> <!-- Эти данные не будут отправлены, т.к. находятся за пределами form --></body>

Всего три HTML-тэга, input, select, textarea и button, формируют все разнообразие элементов управления. Элемент input имеет 10 различных форм, select 2.

input type="text"

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

• Атрибут size задает число видимых символов в поле ввода (при условии моноширинного шрифта) и, соответственно, ширину самого объекта.
• Атрибут maxlength ограничивает число вводимых символов.
• Атрибут readonly устанавливает, может ли пользователь изменять содержимое элемента. Атрибут не требует значения. Если атрибут присутствует, то пользователь не может вводить текст или менять содержимое другим способом, но может получать фокус ввода.
• Атрибут disabled делает элемент недоступным. Атрибут не требует значения. Если атрибут присутствует, то элемент отображается с серым фоном и не может получать фокус ввода.
• Атрибут value содержит текст, который будет отображаться в поле ввода, может изменяться пользователем и будет отправлен на сервер.

<input type="text" name="testInput" size="15" value="">

Элемент не требует закрывающего тэга.

input type="password"

Этот элемент аналогичен input type="text", но вводимые пользователем символы отображаются звездочками или точками, в зависимости от браузера.

<input type="password" name="pwd" size="8" maxlength="10">

input type="hidden"

Как следует из типа, этот элемент не отображается в браузере, но хранит информацию, введенную в атрибут value на сервере или посредством Javascript на клиенте.

input type="checkbox"

Элемент отображается в виде маленького (12х12px) окошка, при щелчке по которому появляется или исчезает галочка. Данные этого элемента управления отправляются на сервер, только если стоит галочка. Атрибуты элемента:

• Атрибут value – это значение, которое будет отправлено на сервер, если стоит галочка. Если значение не задано, то по умолчанию "on".
• Атрибут checked задает, стоит ли галочка изначально. Атрибут не требует значения (для корректности XHTML значение должно быть checked).

<input type="checkbox" name="chkAgree" checked>

input type="radio"

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

Ваш возраст:<input type="radio" name="age" value="1">10 – 15 лет<input type="radio" name="age" value="2" checked>16 – 25 лет<input type="radio" name="age" value="3">26 – 40 лет<input type="radio" name="age" value="4">Старше 40 лет

Обратите внимание, что вся группа имеет одинаковое значение атрибута name. Атрибут checked задает начальный выбор. На сервер будет отправлено только значение выбранного элемента из группы.

input type="file"

Этот элемент отображается как текстовое поле с расположенной рядом кнопкой "Обзор" (или имеющей аналогичный смысл, в зависимости от браузера), при нажатии на которую открывается окно выбора файла для отгрузки на сервер. Для того, чтобы отгрузка файла произошла, должны быть выполнены следующие условия:

1. Элемент input type="file" должен находиться внутри элемента form.
2. Элемент должен иметь атрибут name.
3. Элемент form должен иметь атрибут method="post"
4. Элемент form должен иметь атрибут enctype="multipart/form-data"

<form action="upload.aspx" method="post" enctype="multipart/form-data"> Отгрузите Вашу картинку: <input type="file" name="picture"> <input type="submit" value="Отгрузить"></form>

Отгружаемый файл должен быть принят и обработан на сервере.

input type="submit"

Этот элемент отображается в виде кнопки, при нажатии на которую данные формы отправляются на сервер. Значение атрибута value используется как текст на кнопке. Если value не задано, текст на кнопке зависит от браузера ("Отправить", "Отправить запрос" и т.д.). Если в форме присутствует единственный элемент input type="submit", то нет необходимости задавать его атрибут name (и, соответственно, отправлять значение на сервер). Если элементов input type="submit" несколько, атрибут name позволит различить на сервере, какая кнопка была нажата.

Если фокус пользовательского ввода находится в форме и пользователь нажимает клавишу Enter, это эквивалентно нажатию кнопки submit. Если таких кнопок несколько, срабатывает первая в форме, если только фокус ввода не находился на любой другой кнопке submit.

input type="image"

Этот элемент позволяет заменить кнопку submit изображением, при нажатии на которое данные отправляются на сервер. Файл изображения задается в атрибуте src, альтернативный текст в атрибуте alt.

<input type="image" name="imgSubmit" src="images/submit.gif" alt="Отправить">

При отправке на сервер значение атрибута value игнорируется, вместо этого отправляются x и y координаты щелчка мыши внутри изображения ( imgSubmit.x=10 imgSubmit.y=15 ).

input type="reset"

Этот элемент отображается в виде кнопки, при нажатии на которую данные формы возвращаются к заданным изначально без отправки на сервер. Значение атрибута value используется как текст на кнопке. Если value не задано, текст на кнопке зависит от браузера ("Очистить", "Reset" и т.д.).

input type="button"

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

<input type="button" value="При пожаре нажмите кнопку" onclick="window.alert("Пожааааар!!!!);">

Элемент button

Элемент button является альтернативой кнопкам input type=submit, reset и button. Элемент имеет атрибуты name (для отправки данных на сервер), type со значениями submit, reset и button и value (отправляемое на сервер значение). Между открывающим и закрывающим тэгами элемента button находится HTML-содержимое, которое отображается на кнопке.

<button type="submit" name="MyButton" value="button1"> <b>Отправить запрос</b></button>

Элемент select

Этот элемент отображается как список опций или как раскрывающийся список, в зависимости от значения атрибута size. Внутри элемента располагаются опции и/или группы опций.

<select name="fruits"> <option selected>-Выберите любимый фрукт-</option> <option value="1">Яблоко</option> <option value="2">Груша</option> <option value="3">Банан</option> </select> <!-- size опущен или равен 1: раскрывающийся список.    Опция с атрибутом selected выбрана по умолчанию --> <!-- список из 6 видимых строк с прокруткой для остальных.    Выбирать можно только option. Группы (optgroup) создаются только для у добства пользователя. --> <select size="6" name="chemistry"> <optgroup label="Щелочные металлы"> <option>Литий (Li)</option> <option>Натрий (Na)</option> <option>Калий (K)</option> </optgroup> <optgroup label="Галогены"> <option>Фтор (F)</option> <option>Хлор (Cl)</option> <option>Бром (Br)</option> </optgroup> </select>

Пользователь может выбрать только одну опцию из раскрывающего списка. Значение ( value ) этой опции будет отправлено на сервер. Если атрибут value отсутствует, передается текст опции. Список опций допускает множественный выбор, если к элементу select добавлен атрибут multiple. Атрибут multiple не требует значения (в XHTML значение, как обычно в таких случаях, совпадает с именем атрибута) и автоматически превращает элемент select в список опций независимо от наличия или значения атрибута size. Пользователь делает множественный выбор, удерживая клавишу Shift (опции подряд) или Ctrl (опции вразбивку).

Выберите продукты для салата <select name="salad" multiple> <option>Лук</option> <option>Морковь</option> <option>Зелень</option> <option>Сметана</option> <option>Майонез</option> <option>Горчица</option> </select>

Элемент textarea

Элемент textarea отображается в браузере как поле для многострочного текстового ввода. Атрибуты cols и rows задают ширину (число символов) и высоту (число строк) элемента. Добавление атрибута readonly делает текст в поле доступным только для чтения. У элемента textarea нет атрибута maxlength или аналогичного, ограничивающего длину вводимого текста. Если ограничение необходимо, это следует делать программными средствами (см. ниже). В отличие от других элементов управления, нажатие клавиши Enter в textarea добавляет новую строку (в остальных случаях отправляет данные формы на сервер).

<textarea name="message" cols="60" rows="7"> Введите Ваше сообщение</textarea>