- •Введение
- •Глава1. Html и css
- •1.1. Лабораторная работа № 1. Знакомство с html
- •1.4. Лабораторная работа № 4. Блоковая модель
- •1.5. Лабораторная работа № 5. Новые возможности в css3
- •1.6. Лабораторная работа № 6. Анимация. Создание выпадающего меню
- •Глава 2. Java script
- •2.2. Лабораторная работа №2. Функции. Операторы цикла. Объекты Math, Number
- •2.3. Лабораторная работа №3. Встроенные объекты JavaScript
- •2.4. Лабораторная работа № 4. Пользовательские объекты js. Специальные операторы
- •2.5. Лабораторная работа № 5. Объектная модель документа. Доступ к элементам web-страницы
- •2.6. Лабораторная работа № 6. Объектная модель браузера (bom)
- •2.7. Лабораторная работа № 7. Работа с формами
- •2.8. Лабораторная работа № 8. События. Динамические эффекты на js
- •2.9. Лабораторная работа № 9. Движение объектов и графика на JavaScript
- •2.10. Лабораторная работа № 10. Знакомство с jQuery
- •Глава 3. Xml
- •3.1. Лабораторная работа № 1. Создание xml-документа
- •3.2. Лабораторная работа № 2. Создание валидных xml-документов
- •Xml схема
- •3.3. Лабораторная работа № 3. Отображение xml с использованием xslt
- •3.6. Лабораторная работа № 6. Знакомство с svg-графикой.
- •3.7. Лабораторная работа № 7. Svg-анимация
- •Глава 4. Использование возможностей html5
- •4.1. Лабораторная работа № 1. Знакомство с html5. Элементы video и audio. Геолокация. Элемент canvas.
- •4.2. Лабораторная работа № 2. Использование новых элементов и атрибутов в html5 формах
3.3. Лабораторная работа № 3. Отображение xml с использованием xslt
XSL является приложением XML, т. е. XSL-таблица представляет собой корректно сформированный XML-документ, который отвечает правилам XSL. Подобно любому XML-документу, XSL-таблица стилей содержит простой текст, и вы можете создать ее с помощью вашего любимого текстового редактора.
Связывание XSL-таблицы стилей с XML-документом. Вы можете связать XSL-таблицу стилей с XML-документом, включив в документ инструкцию по обработке xml-stylesheet, которая имеет следующую обобщенную форму записи:
<?xml-stylesheet type="text/xsl" href="3.xslt"?>
Таблица стилей при этом должна размещаться на том же домене, что и XML-документ, с которым вы ее связываете.
Если вы не связали XML-документ ни с CSS-таблицей, ни с XSL-таблицей стилей, Internet Explorer 5 отобразит документ с помощью встроенной XSL-таблицы, которая используется по умолчанию. Эта таблица стилей отображает исходный XML-текст в виде дерева с возможностью свертывания/развертывания уровней.
В отличие от CSS, содержащей правила, XSL-таблица стилей включает один или несколько шаблонов, каждый из которых содержит информацию для отображения в определенной ветви элементов в XML-документе.
Каждая XSL-таблица стилей должна иметь элемент Документ, известный как корневой элемент, является XML-элементом верхнего уровня, который содержит все остальные элементы.
<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheetversion="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
Элемент Документ xsl:stylesheet служит не только хранилищем других элементов, но также идентифицирует документ как XSL-таблицу стилей. Все XSL-элементы принадлежат пространству имен xsl – т. е. вы предваряете имя каждого XSL-элемента префиксом xsl:, обозначающим пространство имен.
Элемент Документ xsl:stylesheet XSL-таблицы стилей должен содержать один или несколько шаблонов элементов, которые для краткости будем называть шаблонами.
<xsl:template match="/">
<!-- дочерние элементы … -->
</xsl:template>
Браузер использует шаблон для отображения определенной ветви элементов в иерархии XML-документа, с которым вы связываете таблицу стилей. Атрибут match шаблона указывает на определенную ветвь.
Значение атрибута match носит название образца (pattern). Образец в данном примере ("/") представляет корневой элемент всего XML-документа.
Каждая XSL-таблица стилей должна содержать один и только один шаблон с атрибутом match, который имеет значение "/".
Корневой образец ("/") не представляет элемент Документ (или корневой элемент) XML-документа. Он представляет весь документ, для которого элемент Документ является дочерним. (Т. е. он аналогичен корневому узлу Document в объектной модели документа DOM)
Пример использования XSL-таблицы стилей для предоставления информации в виде таблицы:
<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:template match="/">
<html>
<body>
<h2> Список специальностей факультета ИТ</h2>
<table border="1">
<tr bgcolor="#9acd32">
<th style="text-align:center">Специальность</th>
<th style="text-align:center">Срок обучения</th>
<th style="text-align:center">Предметы ЦТ</th>
<th style="text-align:center">План набора</th>
<th style="text-align:center">Проходной балл</th>
</tr>
<xsl:for-each select="FACULTY/SPECIALIZATION">
<tr>
<td><xsl:value-of select="NAME"></td>
<td><xsl:value-of select="TIME"></td>
<td><xsl:value-of select="EXAM"></td>
<td><xsl:value-of select="PAGES"></td>
<td><xsl:value-of select="PASSING"></td>
</tr>
</xsl:for-each>
</table>
</body>
</html>
</xsl:template>
</xsl:stylesheet>
Оператор пути в значении атрибута select относится к текущемуэлементу. Каждый контекст внутри XSL-таблицы стилей относится к текущему элементу. Если вы опустите атрибут select для XSL-элемента value-of, элемент будет осуществлять вывод текстового содержимого плюс текстовое содержимое всех дочерних элементов в текущий элемент.
Порядок элементов value-of в шаблоне определяет порядок, в котором браузер отображает эти элементы. Таким образом, даже из этой простой таблицы стилей вы можете понять, что XSL-таблица стилей является гораздо более гибкой, чем CSS, которая всегда отображает элементы в том порядке, в котором они следуют в документе.
Элемент for-eachвыполняет две основные задачи:
осуществляет вывод блока элементов, содержащихся внутри элемента for-each, повторяя его для каждого XML-элемента в документе, отвечающего образцу, присвоенному атрибуту select элемента for-each;
внутри элемента for-each задает текущий элемент, устанавливаемый атрибутом select элемента for-each.
Не нужно включать в XSL-шаблон элементы, представляющие элементы HTML или BODY, которые являются стандартными составными частями HTML-страницы, поскольку браузер сам эффективно их формирует.
Каждый из элементов, представляющих HTML-разметку, должен быть корректно сформированным XML-элементом, а также стандартным HTML-элементом. Не забывайте, что XSL-таблица стилей является XML-документом.
Задание к лабораторной работе № 3
Оформите задание лабораторной работы № 1 через подключение XSLT.
Лабораторная работа № 4. Использование сортировки с условием
Сортировка задается с помощью элементов xsl:sort, данных как непосредственный потомок элемента xsl:apply-templates или xsl:for-each.
Атрибуты:
select–обязательныйатрибут, значением которого является выражение, называемое также ключевым выражением. Это выражение вычисляется для каждого узла обрабатываемого множества, преобразуется в строку и затем используется как значение ключа при сортировке. По умолчанию значением этого атрибута является ".", что означает, что в качестве значения ключа для каждого узла используется его строковое значение;
order–необязательныйатрибут, определяет порядок, в котором узлы должны сортироваться по своим ключам. Этот атрибут может принимать только два значения – "ascending", указывающее на восходящий порядок сортировки, и "descending", указывающее на нисходящий порядок. Значением по умолчанию является "ascending", то есть восходящий порядок;
lang–необязательныйатрибут, определяет язык ключей сортировки. Дело в том, что в разных языках символы алфавита могут иметь различный порядок, что, соответственно, должно учитываться при сортировке. Атрибутlangв XSLT может иметь те же самые значения, что и атрибутxml:lang(например: "en", "en-us", "ru" и т. д.). Если значение этого атрибута не определено, процессор может либо определять язык исходя из параметров системы, либо сортировать строки исходя из порядка кодов символовUnicode;
data-type–необязательныйатрибут, определяет тип данных, который несут строковые значения ключей.
К сожалению, сортировкой нельзя управлять динамически. Все атрибуты элемента xsl:sort должны обладать фиксированными значениями;
При обработке xsl:choose процессор поочередно вычисляет выражения, содержащиеся в атрибутах test элементов xsl:when, приводит их к булевому типу и выполняет содержимое первого (и только первого) элемента, тестовое выражение которого будет равно true. В случае если ни одно из тестовых выражений не обратилось в "истину" и в xsl:choose присутствует xsl:otherwise, процессор выполнит содержимое этого элемента. xsl:chooseсостоит из последовательности элементов xsl:when, за которой следует необязательный элемент xsl:otherwise. Каждый элемент xsl:when имеет единственный атрибут test, который задает некое выражение.
<xsl:choose>
<xsl:when test="условие1">
шаблон1
</xsl:when>
<xsl:when test="условие2">
шаблон2
</xsl:when>
<!-- ... -->
<xsl:when test="условиеN">
шаблонN
</xsl:when>
<xsl:otherwise>
шаблонМ
</xsl:otherwise>
</xsl:choose>
Задание к лабораторной работе № 5
Задание 1. Создайте XML-документ, в котором будет расположена информация о ваших одногруппниках. Например: фамилия, имя, отчество, проходной балл, год рождения. Произведите сортировку по году рождения, выделите красным цветом имена тех одногруппников, которые имеют средний балл меньше 6, и зелeным тех, которые имеют средний балл равный 6.
Лабораторная работа № 5. Использование XML DOM
XML DOM определяет объекты и свойства для всех XML элементов, а также методы (интерфейс) доступа к ним. XML DOM – это стандарт того, как получать, изменять, добавлять или удалятьXML элементы.
Пусть у нас есть некоторый XML-документ, в котором содержится информация о факультетах и их специальностях. Необходимо вывести эту информацию в окне браузера. Для этого необходимо использовать XML DOM.
Пусть имеется некоторая переменная xml, в которой содержится нашXML-документ в строковом формате. Для того, чтобы превратить эту строку в объект форматаxml, используется следующая конструкция:
if (window.DOMParser) // Включаем обработчик XML структуры
{ // Firefox, Chrome, Opera и др.
parser=new DOMParser();
xmlDOC=parser.parserFromString(xml, "text/xml");
}
else //Internet Explorer
{
xmlDOC=new ActiveXObject("Microsoft.XMLDOM");
xmlDoc.async=false;
xmlDoc.loadXML(xml);
}
ActiveXObject – стандартный объект обработки XML DOM, интегрированный в IE, для других браузеров используется DOMParser. В результате мы получим объект корневого элемента XML-структуры. Данный объект имеет метод getElementsByTagName, который возвращает массив объектов, имеющий тот тег, что указан в качестве аргумента данного метода, и являющиеся дочерними к объекту, к которому применён данный метод.
Например, мы хотим вывести название всех факультетов, имеющихся в XML-документе. Для этого используем следующий код:
facultyList = xmlDoc.getElementsByTagName("FACULTY"); //Получаем массив всех факультетов
for (var i=0; i < facultyList.length; i++) {
var facultyName = facultyList[i].getElementByTagName ("FACULTY_NAME") [0].innerHTML;
output.innerHTML += facultyName + "<br/>"; //Выводим название ф-та
}
Теперь осталось только загрузить XML-документ. Используем
<input type="file" onchange="processFiles(this.files)">
function processFiles(files) { // После загрузки файла
var file = files[0];
var reader = new FileReader(); // Читаем файл
reader.onload = function (e) {
xml = e.target.result; // Записываем в переменную содержимое файла// Совершаем действия над строкой xml
}
reader.readAsText(file); // Указываем, что данный файл предназначен для чтения текста
}
Таким образом будет выведено в окне браузера следующее:
Рис. 3.2.
Задание к лабораторной работе № 6
Составьте несколько XML-документов, в которых будет храниться информация о студентах. При помощи XML DOM выведите по 1-му любому из студентов.