Поделиться
Л3-00130.docx
Использование Javascript[1]
Покажем, как можно использовать язык программирования JavaScript для управления выводом данных из XML-файла на веб-страницу. Наша задача – сделать заголовки столбцов гиперссылками, щелчок по которым сортирует данные по выбранному столбцу.
Как вы знаете, сортировка данных задается в таблице стилей. Поэтому задача сводится к тому, чтобы после щелчка по гиперссылке динамически заменить таблицу стилей текущей веб-страницы. При этом нельзя, как мы делали раньше, жёстко связывать XML-файл со стилевым файлом, поэтому ссылку на стилевой файл в начале XML-документа нужно убрать.
Основным файлом будет HTML-страница, которую мы назовем europe.htm. После загрузки этой страницы на неё будут динамически подгружаться данные из XML-файла и некоторая таблица стилей (начальный вариант, без сортировки). После щелчка по гиперссылке таблица стилей должна заменяться. Это означает, что придётся создать несколько стилевых таблиц с расширением .xsl, которые будут отличаться только порядком сортировки данных.
1. Скопируйте файлы europe.css, europe2.xml и europe2.xsl в отдельный каталог (например, с именем JS).
2. Создайте веб-страницу europe.htm следующего содержания:
<html>
<head>
<link rel="stylesheet" href="europe.css" type="text/css" />
</head>
<body>
<div id="data">
</div>
</body>
</html>
На этой странице подключается стилевой файл europe.css и в теле документа размещен блок с идентификатором data, в который мы будем загружать данные из XML-файла.
3. Скопируйте в каталог JS файл loadxml.js, в котором записаны функции для динамической загрузки XML-документа и стилевой XSL-таблицы[2]. Подключите этот файл к веб-странице с помощью тэга script.
4. Удалите из файла europe2.xml строку, в которой подключается стилевой файл europe2.xsl.
5. Удалите из файла europe2.xsl строки, содержащие HTML-тэги (теперь они находятся в теле HTML-страницы), а также команды для сортировки и поиска.
6. Добавьте в тело веб-страницы скрипт с функцией init, которая загружает XML-документ europe2.xml и таблицу стилей europe2.xsl в блок с идентификатором data:
<script type="text/javascript">
function init() {
source = loadXMLDoc("europe2.xml");
loadStyle("europe2.xsl", "data");
return true;
}
</script>
и вызовите функцию init в обработчике события onLoad (он срабатывает сразу после загрузки страницы):
<body onLoad="init();">
Откройте веб-страницу europe.htm в браузере и убедитесь, что выводятся данные по всем странам.
7. Теперь осталось организовать сортировку. Заголовки столбцов таблицы находятся в стилевом файле europe2.xsl, их нужно сделать гиперссылками, так чтобы при щелчке по ним вызывались функции, выполняющие сортировку (подгружающие другую таблицу стилей). Например, вместо строки
<th>Страна</th>
нужно записать
<th>
<a href="#" onClick="loadStyle('europe2n.xsl','data');"
>Страна</a>
</th>
Вызов функции loadStyle в обработчике события onClick (при щелчке мышью) загружает таблицу стилей europe2n.xsl, которая должна выполнить сортировку по названию страны.
Тем же способом превратите все заголовки столбцов таблицы в гиперссылки. Конечно, имена таблиц стилей должны быть разными. Например, последняя буква названия XSL-файла может обозначать порядок сортировки: n (от англ. name) – по названию страны; c (от англ. capital) – по названию столицы; p (от англ. people) – по числу жителей; a (от англ. area) – по площади.
8. Скопируйте основную таблицу стилей europe2.xsl четыре раза, получив файлы с теми именами, которые указаны в гиперссылках. В каждый из них добавьте нужный вариант сортировки.
9. Откройте веб-страницу europe.htm в браузере и убедитесь, что все варианты сортировки работают правильно. Особое внимание обратите на сортировку по числовым данным (количеству жителей и площади).
Скачано с www.znanio.ru
[1] Дополнительное задание для любознательных.
[2] Изучая этот файл, вы заметите, что для браузера Internet Explorer предусмотрен особый вариант действий, потому что он не поддерживает команды, работающие в остальных браузерах.
![Использование Javascr i pt [1]](https://fs.znanio.ru/d5af0e/ad/af/ac62e07948acef73d3c0e71d8d5d0d271a.jpg)
Материалы на данной страницы взяты из открытых источников либо размещены пользователем в соответствии с договором-офертой сайта. Вы можете сообщить о нарушении.
