TML, CSS, СКРИПТЫ: практика создании сайтов

Применение веб-технологий стороны клиента для создания сайтов

Содержимое блока results формируется динамически. Доступ к HTML-

разметке, находящейся внутри того или иного элемента-контейнера,

обеспечивается благодаря свойству innerHTML, присущего объектам класса

HTMLElement.

Записываем результаты теста внутрь блока results:

document.getElementByld(f resultsf).innerHTML = ‘

Результаты

% тестап2>\пКоличество правильных ответов: f + i +

% ‘.

‘;

На этом выполнение функции showResults можно было бы и завершить, но

сделаем еще пару красивых штрихов.

Пусть отличный результат тестирования (когда пользователь правильно

ответил на все пять вопросов) сопровождается поздравлением, а плохой (если

число корректных ответов не превышает двух) — противоположным по

характеру сообщением:

if(i == 5)

{

document.getElementByld(‘results’).innerHTML += f

^> #сОО»Ж сожалению, результат очень плохой.р>‘;

}

Операция, определяемая символами «+=», сочетает в одном лице

конкатенацию строк (или, в числовом контексте, сложение) и присваивание. Иначе

говоря, оператор

а += Ь;

аналогичен более привычной, но нерационально длинной конструкции

а = а + Ь;

Напоследок не мешало бы обеспечить для пользователя возможность «начать

все сначала», т. е. вернуться к форме с вопросами. С этой целью добавим к

содержимому блока results кнопку, по щелчку на которой вызывается уже

знакомая нам функция showQuestions, скрывающая блок results и

включающая отображение блока questions:

document.getElementByld(f results’).innerHTML += ‘

^ class=»buttons,,xinput type^’button» value=»Вернуться к

Q> вопросам» onclick=»showQuestions();» />

‘;

Глава 7. Создание интерактивных сайтов при помощи языка сценариев JavaScript 367

На рис. 7.15 показано, как выглядит страница с результатами тестирования в

случае прохождения теста на «отлично».

Результаты теста

Количество правильных ответов: 5.

Поздравляем с отличный результатом!

Рис. 7.15. Отображение результатов тестирования: тест пройден на «отлично»

Как видите, возможности, предоставляемые технологиями динамического

HTML, позволяют совершать с веб-страницей совершенно фантастические по

меркам недавнего прошлого вещи. Де-факто, переключаясь между формой с

вопросами и результатами тестирования, пользователь видит две совершенно

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

подчинено его действиям. Немаловажно и то, что все сколько-либо

распространенные на сегодняшний день браузеры поддерживают эти возможности

на вполне приемлемом уровне, что позволяет создавать вполне

работоспособные и ориентированные на весьма широкую аудиторию интерактивные

приложения без обязательного привлечения серверных технологий.

Мы всесторонне обсудили работу описанного в листинге 7.10

интерактивного теста, не затронув лишь внутреннее устройство функции getHeip. Как уже

было сказано выше, ее задача— автоматически заполнить форму и тем

самым продемонстрировать правильные ответы.

Эта функция использует уже знакомые нам свойства checked и value,

присущие объектам класса HTMLinputEiement, устанавливая им требуемые значения.

Полагаю, на данном этапе код тела функции getHeip для читателя уже

совершенно прозрачен.

Наш интерактивный тест, а также другие примеры, рассмотренные в

пронумерованных листингах этой главы, читатель, как и обычно, найдет на

компакт-диске, поставляемом с книгой, в каталоге, соответствующей номеру

368 Часть II. Применение веб-технологий стороны клиента для создания сайтов

главы — \examples\07. Обсуждаемое в этом разделе приложение, описанное в

листинге 7.10, находится, соответственно, в каталоге \examples\07\10. И, как

всегда, наше электронное оглавление, хранящееся в файле \index.html,

позволит открыть нужный пример в считанные секунды.

Вместо заключения

…Разработанный нами тест, конечно, не лишен объективных недостатков.

Так, например, для того чтобы дополнить его новыми вопросами или

модифицировать существующие, нужно быть не просто пользователем, а, во

всяком случае, иметь некоторое представление о HTML, CSS и JavaScript.

Кроме того, функции getHelp и showResuits требуют, по сути дела,

дублирования одних и тех же правил, что не слишком практично.

Разумеется, организовать хранение информации о вопросах и правильных

ответах можно намного более эффективно — например, в виде массива или

объекта; к тому же, логичнее использовать для данных обособленный от

основного скрипта файл.