Чтение онлайн

ЖАНРЫ

Холзнер Стивен

Шрифт:

<HEAD>

 <МЕТА http-equiv="Content-Type" content="text/html; charset=utf-8">

 .

 .

 .

При помощи атрибутов

doctype-public
или
doctype-system
можно вывести объявление типа документа непосредственно перед первым элементом, как мы увидим при преобразовании XML в XHTML.

Таковы правила вывода HTML. Ниже приведен пример преобразования из XML в HTML с небольшими отклонениями. В этом случае таблица стилей будет фактически генерировать код JavaScript, демонстрируя создание JavaScript

при помощи XSLT. В частности, мы прочитаем
planets.xml
и создадим новый документ HTML, отображающий три кнопки — по одной для каждой из трех планет в
planets.xml
. При щелчке на кнопке на странице будет выведена масса соответствующей планеты.

Все, что нам понадобится (листинг 6.1), — это два элемента

<xsl:for-each>
: один для прохода в цикле по трем планетам и создания для каждой кнопки HTML; и один для прохода по планетам и создания для каждой функции JavaScript. В качестве имен функций JavaScript я воспользуюсь названием планет; при вызове функция выведет массу соответствующей планеты. Заметьте, что для создания нужного кода JavaScript нужно всего лишь применить элемент
<xsl:value-of>
для получения названий и масс планет. Я также применю два новых элемента XSLT,
<xsl:element>
и
<xsl:attribute-set>
, которые мы рассмотрим позже в этой главе, для создания нового элемента и задания для него набора атрибутов.

Листинг 6.1. Преобразование в JavaScript

<?xml version="1.0"?>

<xsl:stylesheet version="1.0"

 xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

 <xsl:output method="html"/>

 <xsl:template match="/PLANETS">

<HTML>

<HEAD>

<TITLE>

The Mass Page

</TITLE>

<SCRIPT LANGUAGE='javascript'>

<xsl:for-each select="PLANET">

<xsl:text>

function </xsl:text><xsl:value-of select="NAME"/><xsl:text> {

display.innerHTML = 'The mass of </xsl:text>

<xsl:value-of select="NAME"/>

<xsl:text> equals </xsl:text>

<xsl:value-of select="MASS"/>

<xsl:text> Earth masses.'</xsl:text>

}

</xsl:for-each>

</SCRIPT>

</HEAD>

<BODY>

<CENTER>

<H1>The Mass Page</H1>

</CENTER>

<xsl:for-each select="PLANET">

<P/>

<xsl:element name="input" use-attribute-sets="attribs"/>

</xsl:for-each>

<P/>

<P/>

<DIV ID='display'></DIV>

</BODY>

</HTML>

 </xsl:template>

 <xsl:attribute-set name="attribs">

<xsl:attribute name="type">BUTTON</xsl:attribute>

<xsl:attribute name="value"><xsl:value-of select="NAME"/></xsl:attribute>

<xsl:attribute name="onclick><xsl:value-of select="NAME"/></xsl:attribute>

 </xsl:attribute-set>

</xsl:stylesheet>

Результат,

включая элемент
<SCRIPT>
для нового кода JavaScript (листинг 6.2).

Листинг 6.2. Результирующий документ с JavaScript

<HTML>

 <HEAD>

<TITLE>

The Mass Page

</TITLE>

<SCRIPT LANGUAGE="javascript">

function Mercury {

display.innerHTML = 

'The mass of Mercury equals .0553 Earth masses.'

}

function Venus {

display.innerHTML = 'The mass of Venus equals .815 Earth masses.'

}

function Earth {

display.innerHTML = 'The mass of Earth equals 1 Earth masses.'

}

</SCRIPT>

 </HEAD>

 <BODY>

<CENTER>

<H1>The Mass Page</H1>

</CENTER>

<input type="BUTTON" value="Mercury" onclick="Mercury">

<input type="BUTTON" value="Venus" onclick="Venus">

<input type="BUTTON" value="Earth" onclick="Earth">

<DIV ID="display"></DIV>

 </BODY>

</HTML>

Как видите, при помощи XSLT я написал код JavaScript для прохода в цикле по планетам. Этот документ HTML показан на рис. 6.1. При щелчке на кнопку выводится масса соответствующей планеты.

Поделиться с друзьями: