Лабораторная работа № 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-му любому из студентов.
Лабораторная работа № 6. Знакомство с SVG-графикой.
Рисование svg-фигур
Цель: изучить способы вставки SVG-изображения на web-страницу, принципы создания svg-фигур и svg-контуров; познакомиться с правилами применения трансформации и градиентной заливки к фигурам.
Теория
SVG (Scalable Vector Graphics – масштабируемая векторная графика) – стандарт векторной графики, разработанный консорциумом W3C.
Файлы с расширением .svg сохраняют двухмерную графику. Формат SVG базируется на расширяемом языке разметки XML. Именно поэтому, хотя в файле и хранится информация об изображении, он представлен в текстовом формате. SVG поддерживается всеми современными браузерами для ПК и мобильных телефонов.
Достоинства SVG.
Графика в формате SVG создается с использованием математических формул, которые при изменении размера изображения можно скорректировать. Таким образом, векторные изображения масштабируются лучше, чем растровые.
Размер векторной картинки обычно меньше, чем у сравнимых по качеству изображений в форматах JPEG, GIF или PNG.
SVG графика имеет текстовый формат, который можно и править в блокноте, и рисовать в графических векторных редакторах Adobe Illustrator, CorelDRAW.
Cкрипты и анимация в SVG позволяют создавать динамичную и интерактивную графику.
В SVG изображение можно добавлять ссылки.
К SVG формату можно подключать внешние таблицы стилей CSS, глобальные стили внутри контейнера <style>...</style> или добавлять внутренние стили с помощью атрибута style в тегах фигур и путей.