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

Таким образом, мы получаем

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

определенных для него атрибутов и CSS-свойств.

( Примечание )

Не менее часто, чем getElementByld, используется другой похожий метод —

getEiementByName, обеспечивающий доступ к свойствам объекта,

соответствующего тому или иному элементу HTML, идентифицируемого по значению

атрибута name.

Вообще же, оба этих метода применимы для объектов класса HTMLElement,

отражающего произвольные элементы HTML и определяемого соответствующим

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

Итак, блок с идентификатором nodhtmi тоже пропадает из поля зрения, и на

странице не остается ничего, кроме заглавия. Но после этого происходит

вызов функции с обнадеживающим названием showQuestions («показать

вопросы»). И действительно, в результате выполнения этой функции блок

questions становится видимым в окне браузера:

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

Но почему нельзя было отобразить блок questions сразу? Дело в том, что в

блоке nodhtmi содержится сообщение об ошибке (рис. 7.14), которое должно

оставаться на экране в том случае, если пользователь отключил JavaScript или

же браузер не поддерживает DOM и CSS2 в той мере, в какой это необходимо

для работы нашего приложения. При этом крайне желательно, чтобы формы

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

Следует отметить, что наш тест исправно функционирует в Internet

Explorer 5.0 и более поздних версиях, Opera 6.0 и выше, Firefox l.Ox. (В указанных

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

браузерах работа приложения явно проверялась — велика вероятность, что и

с другими современными браузерами проблем не будет.) А вот в Netscape 4

наш тест работать уже не станет, ибо этот браузер не поддерживает DOM

В понимании W3C (в чаСТНОСТИ, NN4 не воспринимает Метод qetElementByld)

и игнорирует CSS-свойство display. DOM в нужной мере не поддерживается

и браузером Opera 5.

Ошибка I

И Ваш браузер в полной мере не поддерживает технологии I

г динамического HTML. Вероятно, вы отключили JavaScript или I

| используете устаревшую версию браузера, не поддерживающую 1

| DOM и/или CSS2. К сожалению, это приложение не будет корректно 1

II работать в вашем браузере. 1

li 11 ¦ №. ‘И 1 ¦ I i! i ¦ i i i .1 ^ IПI П i .1IM! М ii i П i!! i I’M!! i i I ii’! it, il I! I i’i i 11 i i 1 ¦!! Г. IM ! i! i i 1 i 1 i’ i! ii li!! M! I ¦ :V i I!! ГIM ¦ M ¦ 4! ¦ I i ^ iiiniini Г ¦ 111 i l] i 11 ¦ I i ¦ i I ll I ¦ i 11 i ¦ i I i ¦ i ¦ I ¦ Г’ llfil lliil if mirtlffihllilNliilifmilllilifr УНиГГи м» I

Рис. 7.14. Сообщение об ошибке, возникающее в устаревшем к настоящему моменту

браузере Opera 5

Веб-форма, содержащаяся в блоке questions, содержит поля, позволяющие

ответить на пять вопросов теста.

Первые два вопроса предполагают по одному варианту ответа из нескольких

предложенных — для реализации возможности выбора используются

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

посредством атрибута паше — так, все «радиокнопки» переключателя,

соответствующего первому вопросу теста, характеризуются значением questioni

атрибута паше, а элементы переключателя, соответствующего второму

вопросу — значением question2.

Атрибут паше применительно к элементам формы больше нигде не

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

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

метода getElementByld.

Третий и четвертый вопросы подразумевают множественный выбор, поэтому

здесь используются флажки, определяемые тегами
.

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

(
).

Первые четыре вопроса подразумевают по четыре варианта ответа (хотя,

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

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

«Радиокнопки» и флажки, соответствующие тем или иным вариантам ответа,

в целях унификации характеризуются идентификаторами формата choiceXY,

где х — порядковый номер вопроса, a y — номер варианта ответа.

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

идентификатор texts.