Этот тип состоит из единственного значения undefined. Значение с неопределенным типом – это значение, которое имеет переменная после ее создания до момента присваивания.

WEB-ТЕХНОЛОГИИ

10. Формы в HTML-документе. Тег <FORM>. Теги: <METHOD>, <ACTION>, <INPUT> и <SELECT>. Атрибуты тегов.

11. Управляющие элементы. Тэг <INPUT>. Его параметры. Создание области многострочного текста. Меню. Тэг <SELECT>.

12. Скрипты, языки для создания скриптов. Типы данных (VBScript, JavaScript на выбор). Переменные, массивы и константы. Операторы и встроенные функции в скритповых языках.

13. Организация подпрограмм. Условные и циклические конструкции (VBScript, JavaScript на выбор).

14. Объектная модель браузера Microsoft Internet Explorer. Основные свойства, методы и события объекта Window.

 

Формы в HTML-документе

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

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

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

[имя переменной]=[значение переменной]

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

Форма открывается тегом <FORM> и заканчивается тегом </FORM> .

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

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

Тег <FORM>

Атрибуты

action - адрес программы или документа, который обрабатывает данные формы.

<form action="URL">...</form>

autocomplete - включает автозаполнение полей формы. Автозаполнение производит браузер, который запоминает написанные при первом вводе значения, а затем подставляет их при повторном наборе в поля формы. При этом автозаполнение может быть отключено в настройках браузера и не может быть в таком случае изменено при помощи атрибута autocomplete.

<form autocomplete="on | off">...</form>

Значения

On - включает автозаполнение формы.

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

method - сообщает серверу о методе запроса. Значение атрибута method не зависит от регистра. Различают два метода — GET и POST. По умолчанию значение get.

Значения

GET. Этот метод является одним из самых распространенных и предназначен для получения требуемой информации и передачи данных в адресной строке. Пары «имя=значение» присоединяются в этом случае к адресу после вопросительного знака и разделяются между собой амперсандом (символ &). Удобство использования метода GET заключается в том, что адрес со всеми параметрами можно использовать неоднократно, сохранив его, например, в закладки браузера, а также менять значения параметров прямо в адресной строке.

POST. Метод POST посылает на сервер данные в запросе браузера. Это позволяет отправлять большее количество данных, чем доступно методу GET, поскольку у него установлено ограничение в 4 Кб. Большие объемы данных используются в форумах, почтовых службах, заполнении базы данных, при пересылке файлов и др.

<form method="get | post">...</form>

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

<form name="имя">...</form>

novalidate - отменяет встроенную проверку данных формы на корректность ввода. Такая проверка осуществляется браузером автоматически при отправке формы на сервер. Атрибут не имеет значений, его достаточно просто указать.

<form novalidate>...</form>

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

Значения

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

_blank - загружает страницу в новое окно браузера.

_self - загружает страницу в текущее окно.

_parent - загружает страницу во фрейм-родитель, если фреймов нет, то это значение работает как _self.

_top - отменяет все фреймы и загружает страницу в полном окне браузера, если фреймов нет, то это значение работает как_self.

<form target="имя окна">...</form>

Тэг <INPUT>. Его параметры.

Тег <input> является одним из разносторонних элементов формы и позволяет создавать разные элементы интерфейса и обеспечить взаимодействие с пользователем. Главным образом <input> предназначен для создания текстовых полей, различных кнопок, переключателей и флажков. Хотя элемент <input> не требуется помещать внутрь контейнера <form>, определяющего форму, но если введенные пользователем данные должны быть отправлены на сервер, где их обрабатывает серверная программа, то указывать <form> обязательно. То же самое обстоит и в случае обработки данных с помощью клиентских приложений, например, скриптов на языке JavaScript.

Основной атрибут тега <input>, определяющий вид элемента — type. Он позволяет задавать следующие элементы формы: текстовое поле (text), поле с паролем (password), переключатель (radio), флажок (checkbox), скрытое поле (hidden), кнопка (button), кнопка для отправки формы (submit), кнопка для очистки формы (reset), поле для отправки файла (file) и кнопка с изображением (image). Для каждого элемента существует свой список атрибутов, которые определяют его вид и характеристики.

Атрибуты

accesskey - переход к элементу с помощью комбинации клавиш. Браузеры при этом используют различные комбинации клавиш. Например, для accesskey="s" работают следующие сочетания.

· Internet Explorer: Alt + S

· Chrome: Alt + S

· Opera: Shift + Esc, S

· Safari: Alt + S

· Firefox: Shift + Alt + S

<input accesskey="c">

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

Значения

Bottom - выравнивание нижней границы изображения по окружающему тексту.

Left - выравнивает изображение по левому краю окна.

Middle - выравнивание середины изображения по базовой линии текущей строки.

Right - выравнивает изображение по правому краю окна.

Top - верхняя граница изображения выравнивается по самому высокому элементу текущей строки

<input type="image" align="bottom | left | middle | right | top">

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

<input type="image" alt="Текст">

autocomplete - включает или отключает автозаполнение.

<input type="text" autocomplete="on | off">

border - толщина рамки вокруг изображения.

<input type="image" border="толщина рамки">

checked - предварительно активированный переключатель или флажок.

<input type="radio" checked>

<input type="checkbox" checked>

disabled - блокирует доступ и изменение элемента.

<input type="..." disabled>

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

Значения

_blank - загружает страницу в новое окно браузера.

_self - загружает страницу в текущее окно.

_parent - загружает страницу во фрейм-родитель, если фреймов нет, то это значение работает как _self.

_top - отменяет все фреймы и загружает страницу в полном окне браузера, если фреймов нет, то это значение работает как_self.

<input type="submit" formtarget="<имя окна> | _blank | _self | _parent | _top">

list - указывает на список вариантов, которые можно выбирать при вводе текста.

<input list="<идентификатор>">

<option value="Текст1">

<option value="Текст2">

</datalist>

max - верхнее значение для ввода числа или даты.

<input type="number" max="максимальное число">

maxlength - максимальное количество символов разрешенных в тексте.

<input type="text" maxlength="число">

min - нижнее значение для ввода числа или даты.

<input type="number" min="минимальное число">

name - имя поля, предназначено для того, чтобы обработчик формы мог его идентифицировать.

<input type="..." name="имя">

pattern - устанавливает шаблон ввода.

<input type="email" pattern="выражение">

Placeholder - выводит подсказывающий текст.

<input placeholder="строка">

Readonly - устанавливает, что поле не может изменяться пользователем.

<input type="text" readonly>

Required - обязательное для заполнения поле.

<input required>

Size - ширина текстового поля.

<input type="text" size="ширина">

Src - адрес графического файла для поля с изображением.

<input type="image" src="URL">

Step - шаг приращения для числовых полей.

<input type="number" step="число">

Tabindex - определяет порядок перехода между элементами с помощью клавиши Tab.

<input tabindex="число">

Type - сообщает браузеру, к какому типу относится элемент формы.

<input type="button|checkbox|file|hidden|image|password|radio|reset|submit|text">

Value - значение элемента. В зависимости от типа элемента атрибут value выступает в следующей роли:

· для кнопок (input type="button | reset | submit") устанавливает текстовую надпись на них;

· для текстовых полей (input type="password | text") указывает предварительно введенную строку. Пользователь может стирать текст и вводить свои символы, но при использовании в форме кнопки Reset пользовательский текст очищается и восстанавливается введенный в атрибуте value;

· для флажков и переключателей (input type="checkbox | radio") уникально определяет каждый элемент, с тем, чтобы клиентская или серверная программа могла однозначно установить, какой пункт выбрал пользователь.

· для файлового поля (input type="file") не оказывает влияние.

<input type="..." value="значение">

Создание области многострочного текста

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

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

Синтаксис создания поля следующий:

<textarea атрибуты>

Текст

</textarea>

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

Атрибуты:

Cols - ширина поля в символах.

<textarea cols="число">

Disabled - блокирует доступ и изменение элемента.

<textarea disabled></textarea>

Maxlength - максимальное число символов текста, которое можно ввести.

<textarea maxlength="число">

</textarea>

Name - имя поля, предназначено для того, чтобы обработчик формы мог его идентифицировать.

<textarea name="имя">

</textarea>

Readonly - устанавливает, что поле не может изменяться пользователем.

<textarea readonly></textarea>

Rows - высота поля в строках текста.

<textarea rows="число"></textarea>

Wrap - параметры переноса строк.

Значения

Soft - длинный текст, который самостоятельно не помещается в поле по ширине, будет автоматически перенесен на новую строку, однако передаваться на сервер будет как одна строка. Нажатие клавиши Enter устанавливает перенос текста, который сохраняется при отправке формы.

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

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

<textarea wrap="soft | hard">

</textarea>

Меню

Тег <menu> предназначен для отображения списка пунктов меню. Аналогично тегам <ol> и <ul> внутри контейнера <menu> список формируется с помощью тегов <li>.

В HTML4 тег <menu> вышел из употребления, вместо него рекомендуется использовать тег <ul>. В HTML5 тег <menu> вновь включен, но уже в другом качестве. Теперь он выступает контейнером для тега <command> и создания меню.

<menu>

<li>пункт меню</li>

<li>пункт меню</li>

</menu>

Атрибуты

label - устанавливает видимую метку для меню.

type - задает тип меню.

Тэг <SELECT>

Тег <select> позволяет создать элемент интерфейса в виде раскрывающегося списка, а также список с одним или множественным выбором, как показано далее. Конечный вид зависит от использования атрибута size тега <select>, который устанавливает высоту списка. Ширина списка определяется самым широким текстом, указанным в теге<option>, а также может изменяться с помощью стилей. Каждый пункт создается с помощью тега <option>, который должен быть вложен в контейнер <select>. Если планируется отправлять данные списка на сервер, то требуется поместить элемент <select> внутрь формы. Это также необходимо, когда к данным списка идет обращение через скрипты.

<select>

<option>Пункт 1</option>

<option>Пункт 2</option>

</select>

Атрибуты

autofocus - устанавливает, что список получает фокус после загрузки страницы.

disabled - блокирует доступ и изменение элемента.

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

name - имя элемента для отправки на сервер или обращения через скрипты.

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

size - количество отображаемых строк списка.

tabindex - определяет последовательность перехода между элементами при нажатии на клавишу.

Скрипты

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

<script> может располагаться в заголовке или теле HTML-документа в неограниченном количестве. В большинстве случаев местоположение скрипта никак не сказывается на работу программы. Однако скрипты, которые должны выполняться в первую очередь, обычно помещают в заголовок документа.

<script type="тип">

...

</script>

<script type="тип" src="URL"></script>

Атрибуты

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

language - устанавливает язык программирования на котором написан скрипт.

src - адрес скрипта из внешнего файла для импорта в текущий документ.

type - определяет тип содержимого тега <script>.

Типы данных JavaScript

В JavaScript всего существует шесть типов данных: Boolean (логический), Number (числовый), String (строковый), Null (нулевой), Undefined (неопределенный), и Object (объектный). Это относительно небольшое количество типов позволяет, тем не менее, создавать полноценные сценарии для выполнения многих функций.

Тип Boolean (логический)

Логический тип данных состоит только из двух логических значений: true (истина) и false (ложь).

Тип Number (числовой)

JavaScript поддерживает числовые типы: целые числа и числа с плавающей точкой. Целые числа могут быть положительными, 0 или отрицательными; числа с плавающей точкой могут содержать либо десятичную точку, либо букву «e» (строчную или прописную), которая используется для написания «десять в степени», как это делается в научной записи. Эти числа подчиняются стандарту IEEE 754 для числового представления. И, наконец, есть специальные значения:

NaN, или нет числа

Positive Infinity (положительная бесконечность)

Negative Infinity (отрицательная бесконечность)

Positive 0 (положительный 0)

Negative 0 (отрицательный 0)

Целые числа могут десятичными (по умолчанию), восьмеричными и щестнадцатиричными:

Восьмеричные целые числа начинаются с «0″, и они могут содержать цифры от 0 до 7. Если число имеет в начале «0″, но содержит цифры «8″ и/или «9″, то оно будет считаться десятичным. Число, которое является восьмеричным, но содержит букву «e» (или «E») генерирует ошибку.

Шестнадцатиричные («hex») целые числа начинаются с «0x» («X» может быть строчной или прописной), и они могут содержать цифры от 0 до 9 и буквы от A до F (или строчные, или прописные). Буква «e» – разрешенная цифра в шестнадцатиричной записи, но она не означает экспоненту.

Восьмеричные и шестнадцатиричные числа могут быть отрицательными, но не могут быть дробными. Числа, которые начинаются «0″ и содержат десятичную точку, являются десятичными числами с плавающей запятой; если число, которое начинается с «0x» или «00″, содержит десятичную точку, то все, что находится справа от десятичной точки, игнорируется.

.003, 0.003, 3e-3, 3.0e-3 //Четыре числа с плавающей точкой, эквивалентные друг другу.

4.45e3 //Число с плавающей точкой, эквивалентное 4450.

103 //Целое число.

0377 // Восьмеричное целое число, эквивалентное 255.

00.0006 //Так как восьмеричное число не может иметь десятичную точку, то это число эквивалентно 0.

04108 //Целое число, эквивалентное 4108 (Число хоть и начинается с 0 но содержит цифру 8, и поэтому считается десятичным.

0Xff //Шестнадцатеричное число, эквивалентное 255.

0x37CF //Шестнадцатеричное число, эквивалентное 14287.

0x3e7 //Шестнадцатеричное число, эквивалентное 999.

0x7.45e2 //Так как шестнадцатеричные числа не могут иметь дробную часть, то это число эквивалентно 7.

Тип String (строковый)

Этот тип состоит из всех возможных текстовых строк. Строки заключатся в двойные или одинарные кавычки. Каждая строка представляет собой упорядоченный массив из нуля или более символов Unicode (т. е. 16 -битовых целых чисел без знака), называемых элементами строки. Элементы строки нумеруются, начиная с нуля. Длина строки — это количество элементов в ней; пустая строка состоит из нуля элементов.

var str = 'It\'s a String'; // в переменной str будет записана строка

Тип Null (нулевой)

Этот тип состоит из единственного значения null. Это значение означает нулевую, пустую или несуществующую ссылку.

Тип Undefined (неопределенный)

Этот тип состоит из единственного значения undefined. Значение с неопределенным типом – это значение, которое имеет переменная после ее создания до момента присваивания.