Рубанчик В.Б. |
Лабораторная работа: "Использование объектов Array. Проверка правильности заполнения форм" |
|
Лабораторная работа
Тема: "Использование объектов Array. Проверка правильности заполнения форм"
Цель работы: Изучить основы использования объектов типа Array. Ознакомиться с методами проверки правильности заполнения форм перед отсылкой.
Объекты Array
В JavaScript массивы как базовый тип данных не определены. Вместо этого имеется стандартный класс объектов Array, который реализует свойства, причем даже более широкие, чем у обычных массивов.
Замечание.
В этой работе используются массивы в их классическом понимании — группа элементов с общим именем, различающихся числовыми индексами. Ассоциативные массивы будут рассмотрены позже.
Чтобы начать работать с массивом, нужно сначала создать объект типа Array, причем возможна одновременная инициализация элементов массива.
Отличием объектов Array от обычных массивов является то, что это не просто пронумерованные совокупности одноименных значений. Массив в JavaScript — это набор индексированных числами свойств объекта типа Array.
Так как в JavaScript свойства к объектам можно добавлять в любой момент времени (прямо присваивать новому свойству значение без специального определения этого свойства), то объекты Array можно рассматривать также как динамические массивы (в том числе, не ограниченные некоторым заданным числом элементов).
Объекты типа Array обладают свойством length, позволяющим выяснить, какова текущая "длина" массива. Если массив обычный, то значение свойства — количество элементов в массиве.
Но массивы в JavaScript могут быть разряженными (т.е. иметь не все элементы подряд). В этом случае значение свойства length вычисляется путем прибавления единицы к наибольшему значению индекса.
Для создания объектов типа Array применяется несколько форм синтаксиса.
1. Использование операции new для создания массива с неинициализированными элементами.
При создании объекта можно указать, какое число элементов предполагается в массиве, а можно и не указывать:
arr1 = new Array(<количество_элементов>)
arr2 = new Array()
Здесь аргумент <количество_элементов> — число (но не строка).
Во втором случае исходная длина массива не определена.
После создания объекта массива в него можно добавлять элементы. "Длина" будет вычисляться, исходя из наибольшего числового индекса созданного элемента. Например,
arr2 = new Array()
arr2[5]=1 // элементы можно добавлять не подряд!
alert(arr2.length) // 6, индексы отсчитываются от нуля
Замечание.
Тем же способом можно было определять элементы в ранее описанном массиве arr1.
2. Использование операции new для создания массива с одновременной инициализацией элементов.
arr = new Array(аргумент1, аргумент2...)
Исходная длина массива определяется по числу инициализаторов. Как и ранее, после определения массива в него можно добавлять новые элементы. Замечание по поводу длины массива из предыдущего пункта сохраняется.
Замечание. Обратите внимание на различие двух записей:
arr1 = new Array(5) //массив из шести элементов, см. пункт 1!
arr1 = new Array("5") //массив из одного элемента
3. Упрощенная синтаксическая форма (начиная с IE5 и NS4).
Для создания массива можно использовать более компактную форму записи с квадратными скобками:
arr = [] // аналог arr= new Array();
arr = [знач1, знач2...] // аналог arr= new Array(знач1, знач2...);
4. Многомерные массивы.
Двумерные (и многомерные) массивы трактуются как одномерные массивы одномерных массивов. Для их определения можно использовать разные формы синтаксиса, в том числе и упрощенную. Например,
arr = [
[1,"2",3,4],
["a","b","c"]
]
Здесь определен двумерный массив, у которого в первой строке четыре элемента, а во второй — три. Так как JavaScript не типизированный язык, то элементы массива могут иметь разные типы. Можно определять как длины отдельных строк (arr[0].length=4, arr[1].length=3), так и длину "внешнего" массива (arr.length=2).
ЗАДАНИЕ 1.
1. Описание содержания формы задается в виде двумерного массива.
Каждая строка массива содержит информацию об отдельном элементе формы (в виде массива символьных строк), в которую включены следующие данные:
а) тип элемента (атрибут type тега input),
б) имя элемента (атрибут name тега input),
в) значение элемента по умолчанию (атрибут value тега input),
г) поясняющий текст, выводимый рядом с элементом.
Например,
["text", "userName","","<b>Имя пользователя</b>"]
2. Двумерный массив с описанием содержания формы передается через аргумент функции createForm, которая генерирует html-содержание формы по ее описанию. Для простоты предполагается использование только элементов типа input.
Предполагается также, что тег <form> создается в теле документа обычным "ручным" образом.
Так как поясняющий текст нужен не всегда, например, для кнопок submit и reset в нем нет необходимости, то последний элемент массива может не задаваться. Поэтому при генерации элемента формы нужно вычислять длину информационной строки и действовать в зависимости от ситуации.
Внутри функции createForm вначале определяется число создаваемых элементов формы. Затем в цикле поочередно генерируется код для вставки каждого элемента.
Примечания.
а) Имеет смысл накапливать текст кода элемента в специальной переменной, а в конце тела цикла вставлять его в документ вызовом document.write.
б) Необходимо предусмотреть в коде случай, когда значение атрибута value может состоять из нескольких слов с пробелами между ними.
3.Содержание формы (массив) определяется в заголовочной части документа.
4. В теле документа содержание формы создается вызовом функции createForm. В приведенном ниже примере предполагается, что строки формы образуются как строки таблицы с двумя ячейками — поясняющий текст и элемент:
<form ...>
<table width=”400” cellpadding=”5”>
<script type=”text/javascript”>
createForm(formInfo)
</script>
</table>
</form>
Здесь formInfo — массив с описанием содержания формы.
Код проверить на примере формы
