Веб-орієнтована розробка програмного забезпечення ЗПі-81-20210115T104851Z-001 / Практична робота №7_JAVA_SCRIPT 23.11.20

Практична робота №7.

Тема: “Работа с массивами.”

Теоретические сведения.

Массивы и их обработка (Класс массива Array)

Массивы представляют собой набор последовательно проиндексированных элементов.

Создание массивов

Массивы можно заполнить при инициализации или после объявления переменной.

Смена типа данных переменной

Как Вы помните .на ECMAScript тип данных переменной определяется при присвоении ей какого-либо значения. Массивы определяются точно таким же образом.

Для создания массива переменной присваивается конструкция «new Array()».

var a; // Объявляем переменную.

a = new Array(); // Указываем её тип.

Создать массив можно и сразу же при инициализации переменной.

var a = new Array(); // Инициализируем переменную.

Заполнение массива данными

По умолчанию массив создаётся безмерным, то есть его размер никак не указывается и определяется лишь при заполнении массива. Другими словами, при выполнении такого кода размер массива «a» будет составлять два элемента, а массива «b» — 4 элемента (к конкретному элементу массива можно обратиться, взяв его индекс в квадратные скобки).

var a; // Объявляем переменную.

a = new Array(); // Указываем её тип.

a[0] = 10; // Заполняем массив данными.

a[1] = true;

var b = new Array(); // Инициализация переменной.

b[0] = 'Some text'; // Сохранение значений в массиве.

b[1] = 10 + 20;

b[2] = false;

b[3] = a; // Сохранение в массиве ещё одного массива.

Обратите внимание, что индексы элементов массива исчисляются от нуля, то есть в массиве «a» длиной в два элемента первый элемент имеет индекс нуль, а второй — один. Другими словами, индекс последнего элемента массива всегда на 1 меньше длины массива.

Ещё важно то, что разные элементы массива могут сохранять данные различных типов, например, у нас в массиве «a» сохранены число и логическое значение, а в массиве «b» — строка, число, логическое значение и целый массив. Поскольку в ECMAScript типов данных нет, всё перечисленное является возможным.

Также, обратите внимание, что третьему элементу массива «b[3]» сопоставлен массив «a». Вы можете обратиться к элементам вложенного массива таким образом:

b[3][1] = false; // Обращение к вложенному массиву.

То есть, если какой-либо из элементов массива представляет собой массив, перечисляем индексы последовательно в квадратных скобках.

Массивы можно заполнять и при инициализации. Для этого в круглых скобках через запятую перечисляются значения элементов массива.

var c = new Array('Текст', 10 / 3, new Array(5, 15)); // Заполнение массива при инициализации.

Теперь у нас создан массив на три элемента, и последний второй элемент массива представляет собой ещё один массив на два элемента.

Обработка массивов

Удобнее всего работать с массивами используя циклы. Узнать длину массива можно с помощью свойства «length». Свойство «length» возвращает длину массива, то есть количество элементов в массиве.

Создав пройстой цикл for от нуля до (массив.length - 1), можно получить доступ ко всем элементам массива. Ещё помните, что индекс последнего элемента массива всегда на единицу меньше длины массива?

var d = new Array('Текст', 10 / 3, 5 * 2); // Заполняем массив значениями.

for (var i = 0; i < d.length; i++) // Создаём цикл.

alert(d[i]);//Выводим элемент массива в диалоговом окне.

Вы можете посмотреть, как же выполнится приведённый код.

При выполнении такого цикла будут выведены три окошка alert с содержимым элементов массива. В первом из окошек будет выведен строковой литерал, сохранённый в нулевом элементе, во втором — число, сохранённое в первом элементе, в третьем — число, сохранённое во втором эелменте. Обратите внимание, что в цикле у нас переменная «i» меняется от нуля до двух, так как «d.length» равно трём.

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

Сортировка массивов

Массивы сортируются с помощью метода «sort()».

Метод «sort()» возвращает массив, отсортированный по алфавиту. То есть, если мы хотим получить отсортированный массив, мы должны присвоить возвращаемое значение какой-либо переменной. Например:

var e = new Array('Понедельник', 'Вторник', 'Среда', 'Четверг', 'Пятница', 'Суббота', 'Воскресенье'); // Заполняем массив значениями.

var f = e.sort(); // Сохраняем в новой переменной отсортированный по алфавиту массив.

for (var i = 0; i < f.length; i++) // Создаём цикл.

alert(f[i]);//Выводим элемент массива в диалоговом окне.

Вы можете посмотреть, как же выполнится приведённый код.

При выполнении такого цикла будут выведены семь окошка alert с днями недели, отсортированными по алфавиту.

Резюме:

• Массивы определяются как последовательно проиндексированные значения.

• Длина массива на единицу больше индекса последнего элемента.

• Массивы удобно обрабатывать в циклах.

• Массивы сортируются методом «массив.sort()».

Практическое задание №1

Создайте функцию, которая будет перечислять элементы массива в виде, привычном человеку. То есть, если у нас есть массив на один элемент, она вернёт только его. Если элементов в массиве два, то они будут связаны союзом «и». Если элементов три, то после нулевого будет поставлена запятая, а последние два будут выведены через союз «и». Если элементов больше, то первые будут перечислены через запятую, а последние два — через союз «и».

Другими словами, после выполнения приведённого ниже кода будут выведены три диалоговых окна.

function showArrayContent(arrayToShow) {

// Тут идёт код функции.

}

var a = new Array('Текст'); // Определяем массивы.

var b = new Array('день', 'ночь');

var c = new Array('зима', 'весна', 'лета', 'осень');

alert(showArrayContent(a)); // Выводим содержимое массивов, используя созданную выше функцию.

alert(showArrayContent(b));

alert(showArrayContent(c));

Окна будут выглядеть так:

Итак, Ваша задача определить функцию, которая перечисляет элементы массива в зависимости от его размера. Для этого стоит воспользоваться оператором условного перехода и свойством «массив.length».

Задержки и интервалы при выполнении кода

В ECMAScript можно легко указать время запуска определённых функций.

Задержки

Задержку выполнения какой-либо функции легко организовать с помощью метода setTimeout(). У этого метода два обязательных аргумента: функция и задержка выполнения в миллисекундах.

Итак, предположим, что нам нужно вывести окошко alert через 1½ секунды от открытия Веб-страницы.

Создадим специальную функцию, которая будет выводить это окошко. Далее установим задержку в 1500 мс.

function showAlert() { // Объявляем функцию.

alert('Это примерный текст.');//Определяем тело функции.

}

setTimeout(showAlert, 1500); // Устанавливаем задержку.

Вы можете посмотреть, как же выполнится приведённый код.

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

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

Интервалы

Интервалы устанавливаются аналогично задержкам методом setInterval(). Но если с помощью задержки первое и последнее выполнение функции задерживается (а Вы что ожидали услышать?), то при использование интервалов функция выполняется множество раз через определённые промежутки. Проще пояснить на примере.

Итак, нам нужно выводить окошко alert каждые 10 секунд.

Создадим специальную функцию, которая будет выводить это окошко. Далее установим интервал в 10000 мс.

function showAlert() { // Объявляем функцию.

alert('Это примерный текст.');//Определяем тело функции.

}

setInterval(showAlert, 10000); // Устанавливаем интервал.

Вы можете посмотреть, как же выполнится приведённый код.

Ничего не вывелось? А подождать 10 секунд?

Обратите внимание, что и тут функция-аргумент указывается без скобок.

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

Строка состояния

Содержимое строки состояния определяется свойством status. Каждый раз, когда Вы меняете свойство status, соответствующим образом меняется текст строки состояния.

Например, выведем в строку состояния какой-то текст.

status = 'Это примерный текст.'; // Изменяем текст строки состояния.

Вы можете посмотреть, как же выполнится приведённый код.

Не знаете, где строка состояния? Строка состояния — это серая полоса внизу окна. Там написано что-то вроде «Готово» и «Мой компьютер».

Практическое задание №2

Реализуйте мигание текста в строке состояния. То есть, в строке состояния есть какой-то текст. Через секунду он пропадает. Ещё через секунду появляется снова. И опять пропадает. Теперь пропадает. Появляется. Пропадает. И так далее.

Задание:

1. Исследовать все доступные методы для класса массива Array и продемонстрировать их на примерах (описание методов есть в электронном варианте книги Дронова).

2. Выполнить практические задания №1 и №2.

3. Модифицировать программу для выполнения задачи №2 из лабораторной работы №1 следующим образом: вопросы должны храниться не в отдельных переменных, а в массиве, который должен быть инициализирован в начале программы; на каждый ответ должно отводиться определенный промежуток времени (например, 20 сек.), после которого ответ должен считаться ложным (тестируемого надо об этом предупредить); в строке состояния (или в другом месте экрана) должно постоянно быть написано, сколько осталось времени на ответ на текущий вопрос.