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

данном случае значением этого атрибута может быть что угодно— форма не

содержит кнопки отправки данных (
) как таковой.

Вместо нее используется «нейтральная» кнопка (
)

с надписью «Показать результаты». С этой кнопкой связан обработчик

события, заданный атрибутом onclick и вызывающий функцию showResuits

(«показать результаты») при нажатии на кнопку.

Форма предусматривает и другую кнопку — с надписью «Показать ответы».

При нажатии на нее, благодаря все тому же обработчику события onclick,

вызывается функция getHelp («получить помощь»), автоматически

заполняющая форму правильными ответами. (Мы же не на экзамене, тест-то для

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

возможность?)

Наша веб-форма также включает в себя кнопку сброса (

type=»reset»>), очищающую все поля. (Очистить форму вполне можно и при

помощи JavaScript, только вот ехать из Москвы в Питер через Сахалин

совершенно незачем.) Собственно, не будь этой кнопки, тег

совершенно необязательным.

Итак, как же производится проверка ответов?

Внутри функции showResuits сначала объявляется и инициализируется

переменная i — счетчик правильных ответов.

Далее выполняется пять условных операторов if, каждый из которых

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

ответом счетчик i инкрементируется (наращивается на единицу).

Рассмотрим некоторые условия подробнее.

Правильным ответом на первый вопрос является второй вариант из четырех

предложенных— иными словами, ответ на первый вопрос должен быть

засчитан в том случае, когда пользователь включил «радиокнопку» с

идентификатором choicei2. Условный оператор, проверяющий корректность ответа на

первый вопрос, будет таким:

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

if(document.getElementByld(‘choice12′).checked == true)

{

i++;

}

(Фигурные скобки здесь необязательны, но используются, опять же, для

унификации — мало ли, какие еще операторы будут добавлены в компанию к

инкрементированию счетчика в потенциальной перспективе.)

Булево СВОЙСТВО checked, характерное ДЛЯ объектов класса HTMLInputElement

(отражающего элементы HTML, заданные тегом
), хранит

информацию О ТОМ, активизирован ЛИ ТОТ ИЛИ ИНОЙ флаЖОК (
)

ИЛИ «радиокнопка» (
).

Пользователь при всем желании не сможет активизировать больше одной

«радиокнопки» одного и того же переключателя. С флажками ситуация

несколько сложнее— чтобы зачесть ответ на вопрос, предполагающий

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

или иного набора, получить, скажем так, полную картину. Вот как, например,

проверяется правильность ответа на третий вопрос теста:

if ((document.getElementById(‘choice31r).checked == true) &&

^> (document.getElementByld(‘choice32′).checked = false) &&

Q> (document.getElementByld(‘choice33′).checked == true) &&

Q> (document.getElementById(‘choice34′).checked == false))

{

i++;

}

Очевидно, ответ на этот вопрос засчитывается тогда и только тогда, когда

первый и третий флажки активизированы, а второй и четвертый — нет.

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

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

того же класса HTMLInputElement, предоставленного одноименным

интерфейсом DOM:

if(document.getElementByld(‘text5f).value == ‘typef)

{

i++;

}

Проверив все ответы, функция showResuits запрещает отображение блока

questions, содержащего веб-форму, а вместо него отображает блок results —

до сей поры не содержащий контента:

document.getElementByld(‘questions’).style.display = ‘none’;

document.getElementByld(‘results’).style.display = ‘block’;

366 Часть II.