JavaScript   ООП   PHP  

ООП в JavaScript. Лабораторная работа 3
Форма, кнопка, текстовое поле

Вернемся к самому первому примеру:

Пример №1

Введите свое имя и нажмите кнопку

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

Формы размещаются в web-документе с помощью тега <form> </form>. Ввести элементы формы и определить их свойства можно с помощью тега <input>. В общем виде код для ввода элемента формы выглядит следующим образом:

<form id="имя формы " name="имя формы ">
<input type=
"тип элемента" id="имя-индентификатор элемента " name="имя элемента" value="надпись" />
</form>

Ключевое слово type определяет тип объекта (text - текстовое поле, button - кнопка и т.п.),
ключевое слово id задает имя-идентификатор объекта формы, также как и ключевое слово name;
value
- текст, отображаемый в (на) объекте (одно из свойств объекта).

Обратите внимание, что объект форма сам обладает параметрами id и name.

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

Виды элементов форм:

1) текстовое поле

Однострочное текстовое поле. Используется для ввода простейшей информации: имена, адреса и пр. Выглядит так:

<input type="text" id="Text1" size="30" value="Начальное значение поля" / >

Результат - на web-странице появляется следующий объект:

2) кнопка

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

<input type="button" id="button1" value="Нажми меня!" />

Данным кодом мы вводим кнопку с надписью "Нажми меня!", однако при ее нажатие ничего не произойдет, так как любую желаемую реакцию интерфейса нужно программировать. Т.е. нужно ввести событие нажатие на кнопку onmousedown и написать что должно при этом произойти. например измениться свойство кнопки value.

<input type="button" id="button2" value="Нажми меня!" onmousedown="this.value='ну нажми еще раз...' "/>

В результате получим следующее:

Часто необходимо, чтобы при нажатии кнопки появлялось на экране диалоговое окно. Для этого можно использовать метод alert():

<input type="button" id="button3" value="Нажмите кнопку " onmousedown="alert('Добро пожаловать!')"/>

В примере 1 необходимо было изменить текст в текстовом поле, т.е. изменить свойство объекта текстовое поле. Для изменения свойства любого объекта необходимо записать следующее:

объект.свойство="новое значение свойства"

Но как обратиться к объекту текстовое поле? Для обращения к объекту формы служит id ( идентификатор объекта). Т.е. если мы задали id объекта - Text1, то следующая запись должна изменить его свойство - к старому тексту содержащемуся в объекте слева и справа будет добавлен текст "Здравствуйте" и "!"соответственно:

"Text1.value='Здравствуйте, '+ Text1.value + ' !' "

Но такое обращение к объекту можно использовать только в пределах одной формы, т.е. если объект текстовое поле и кнопка, содержатся внутри одного тега <form></form>! A если текстовое поле содержится в другой форме, то нужно соблюдать иерархию объектов. Т.е. сначала нужно обратится к объекту форма, а уже затем к объекту текстовое поле:

объект.вложенный объект.свойство вложенного объекта="новое значение свойства"

"Form1.Text1.value='Здравствуйте, '+ Form1.Text1.value + ' !' "

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

Только для Internet Explorer!!!!

<script type="text/javascript">
function PR1()
{
Text1.value="Здравствуйте,"+Text1.value + "!"
}
</script>

Для остальных браузеров, для того чтобы обратиться к элементу, нужно воспользоваться методом getElementById() объекта document:

document.getElementById("Text1").value="Здравствуйте,"+document.getElementById("Text1").value + "!"

Задание №1

1) Создайте файл, соответствующий стандарту XHTML 1.1 или XHTML 1.0 Strict
2) Создайте код для примера №1 всеми описанными выше способами.

 

Другие объекты формы

элемент

описание

text

Однострочное поле ввода текста (принято по умолчанию). Атрибут value задает начальное значение текста, size - размер поля ввода в символах, а maxlength - максимально возможное количество символов в данном поле. Атрибут readonly запрещает изменение текста поля.

password

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

checkbox

Флажок. Атрибут value задает значение этого элемента, когда он выбран, а атрибут checked - выбран ли первоначально.

radio

Переключатель. Атрибут value задает значение этого элемента, когда он выбран, а атрибут checked - выбран ли первоначально.

reset

Кнопка сброса формы. Необязательный атрибут value перекрывает текст кнопки, принятый по умолчанию.

submit

Кнопка пересылки формы. Необязательный атрибут value перекрывает текст кнопки, принятый по умолчанию. Если форма содержит несколько таких кнопок, то атрибут name используется для передачи имени кнопки обработчику формы, что позволяет последнему осуществлять различные действия в зависимости от того, какая из кнопок пересылки формы была нажата.

image

Графическая кнопка пересылки формы. Атрибут src задает URI графического образа кнопки, а alt - альтернативный текст надписи на кнопке. При щелчке мышью по такой кнопке происходит пересылка формы, причем координаты щелчка мыши передаются серверу в виде name.x=x-value и name.y=y-value, где name - имя кнопки, а x-value и y-value - координаты в пикселях относительно верхнего левого угла образа. Атрибут usemap указывает на клиентскую карту ссылок и его значением должно быть имя закладки, заданное атрибутом name соответствующего элемента MAP. Атрибут ismap указывает на серверную карту ссылок.

button

Кнопка общего вида. Атрибут value задает текст кнопки, а атрибут onclick должен задавать сценарий, вызываемый при нажатии этой кнопки.

file

Селектор файлов. Атрибут value задает начальное имя файла, но обозреватели обычно игнорируют его из соображений безопасности. Необязательный атрибут accept задает список типов файлов, разделенных запятыми, которые поддерживаются сервером обработчика формы. Этот список может использоваться для отфильтровки только допустимых файлов, но современные обозреватели обычно игнорируют этот атрибут. Форма, содержащая селектор файлов, должна иметь атрибуты method=post и enctype="multipart/form-data".

 

JavaScript   ООП   PHP  
Знаете ли Вы, что cогласно релятивистской мифологии "гравитационное линзирование - это физическое явление, связанное с отклонением лучей света в поле тяжести. Гравитационные линзы обясняют образование кратных изображений одного и того же астрономического объекта (квазаров, галактик), когда на луч зрения от источника к наблюдателю попадает другая галактика или скопление галактик (собственно линза). В некоторых изображениях происходит усиление яркости оригинального источника." (Релятивисты приводят примеры искажения изображений галактик в качестве подтверждения ОТО - воздействия гравитации на свет)
При этом они забывают, что поле действия эффекта ОТО - это малые углы вблизи поверхности звезд, где на самом деле этот эффект не наблюдается (затменные двойные). Разница в шкалах явлений реального искажения изображений галактик и мифического отклонения вблизи звезд - 1011 раз. Приведу аналогию. Можно говорить о воздействии поверхностного натяжения на форму капель, но нельзя серьезно говорить о силе поверхностного натяжения, как о причине океанских приливов.
Эфирная физика находит ответ на наблюдаемое явление искажения изображений галактик. Это результат нагрева эфира вблизи галактик, изменения его плотности и, следовательно, изменения скорости света на галактических расстояниях вследствие преломления света в эфире различной плотности. Подтверждением термической природы искажения изображений галактик является прямая связь этого искажения с радиоизлучением пространства, то есть эфира в этом месте, смещение спектра CMB (космическое микроволновое излучение) в данном направлении в высокочастотную область. Подробнее читайте в FAQ по эфирной физике.

Bourabai Research Institution home page

Bourabai Research - Технологии XXI века Bourabai Research Institution БОРОВСКОЕ ИССЛЕДОВАТЕЛЬСКОЕ УЧРЕЖДЕНИЕ - Технологии XXI века