Лабораторная работа № 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 в тегах фигур и путей.