Изучаем Java EE 7 - [149]

Шрифт

Интервал

>

>APress — Изучаем Java EE 7

>

В листинге 10.3 код CSS встроен в страницу XHTML. В реальном приложении все стили были бы размещены в отдельном файле, который бы импортировался на веб-страницу. Веб-дизайнер может составить один или несколько наборов стилей CSS для различных групп страниц, а затем составители содержимого смогут создавать или изменять страницы без необходимости заботиться об их внешнем виде.

По сравнению со страницей на рис. 10.1 конечный результат отличается тем, что все ярлыки выделены курсивом и название окрашено в синий цвет (рис. 10.2).

Рис. 10.2. Графическое представление страницы newBook.xhtml после применения стилей CSS

DOM

Страница XHTML является XML-документом и таким образом имеет представление объектной модели документа (DOM). DOM — это спецификация W3C, предназначенная для получения доступа и изменения содержимого и структуры XML-документов, а также абстрактный API для обработки запросов, перемещения и манипулирования такими документами. DOM можно рассматривать как древовидное представление структуры документа. Рисунок 10.3 показывает, как страница newBook.xhtml может выглядеть в качестве представления DOM. В корне находится тег html, на один уровень ниже — head и body, а под body — таблица со списком тегов tr.

Рис. 10.3. Древовидное представление страницы newBook.xhtml

DOM обеспечивает стандартный способ взаимодействия с XML-документами. Вы можете обойти дерево и отредактировать содержимое узла (листа дерева). С помощью JavaScript вы можете сделать веб-страницы динамичными. Как вы увидите в главе 11, AJAX основан на JavaScript и взаимодействует с DOM-представлением веб-страницы.

JavaScript

До сих пор мы рассматривали разные языки, используемые для представления статического контента и графических деталей веб-страницы. Но зачастую веб-страницам необходимо взаимодействовать с конечным пользователем, показывая динамический контент. Как вы увидите, динамический контент может обрабатываться серверными технологиями, такими как JSF, но браузеры также могут обрабатывать его, выполнив JavaScript.

JavaScript — это язык сценариев, используемый на стороне клиента веб-разработки. Несмотря на свое название, он не имеет отношения к языку программирования Java, так как является интерпретируемым, слабо типизированным языком. JavaScript представляет собой мощный способ создания динамических веб-приложений путем написания функций, которые взаимодействуют с DOM на странице. W3C стандартизировал DOM, в то время как Европейская ассоциация производителей компьютеров (ECMA) стандартизировала JavaScript как спецификацию ECMAScript. Любая страница, написанная с помощью этих стандартов (XHTML, CSS и JavaScript), должна выглядеть и вести себя более или менее одинаково в любом браузере, который придерживается этих принципов.

Примером взаимодействия с JavaScript DOM является страница newBook.xhtml, показанная в листинге 10.4. На ней отображается форма, где вы можете ввести информацию о книге. Цена книги должна быть заполнена пользователем на стороне клиента прежде, чем она отправится на сервер. Чтобы указать цену нужной записи, вы можете создать функцию JavaScript (priceRequired()), которая проверяет, является ли поле с ценой пустым.

Листинг 10.4. Страница newBook.xhtml, использующая JavaScript

>

>········"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

>

>··Создать новую книгу


>··

>
>
>
Создать новую книгу
>
>
>··
>····
>····
>··
>··
>····
>····
>··
>··
>····
>····
>··
>··
>····
>····
>··
>··
>····
>····
>··
>··
>····
>····
>··
>
ISBN: 
Название: 
Цена: 
>······
>····
Описание: 
Количество страниц: 
Иллюстрации: 
>
>
>APress — Изучаем Java EE 7
>
>
В листинге 10.4 функция JavaScript priceRequired() встроена в страницу с помощью тега



        
          
            
              
                Добро пожаловать
              
              
                Наш сайт использует куки для сбора анонимной статистики.

ISBN:
Название:
Цена:	`>······` `>····`
Описание:
Количество страниц:
Иллюстрации: