тображение XML-документов с использованием связывания данных.

ХАІ.603.№ 621п.13В.050103.(№ 116306).ПЗ

Виконав студент гр. 621п Каранда А. Ю.

________________ (№ групи) (П.І.Б)

(підпис, дата)

Перевірив:_ Фролова Г.А._______________

(наукова ступінь, вчене звання)

____________________________________

(підпис, дата) (П.І.Б)

Цель работы:

Научиться привязать XML-документ к HTML-странице; сцеплять элементы HTML с элементами XML, использовать сценариии, которые используют в качестве базового объекта программирования связанные данные.

Задание

Создайте XML-документ (например, dz_m.xml), который содержит один корневой элемент и не менее 20 вложенных элементов типа запись, в свою очередь каждый вложенный элемент типа запись состоит из 7 вложенных элементов типа поле.

Визуализируйте документ XML с помощью CSS. Количество используемых стилей – не менее 9.

Создайте HTML-документ (например, dz_str.html). Используя сцепление HTML-элемента TABLE с данными документа XML, реализуйте постраничный вывод записей в браузере (по пять записей на одной странице) и кнопки постраничного перехода.

Описание тэгов и управляющих конструкций, использованных при выполнении задания

Самый простой способ отобразить XML-документ, который состоит из группы записей – это сцепить HTML-элемент TABLE с данными XML таким образом, чтобы в таблице автоматически отображались сразу все записи (или одна страница записей за раз, если установить режим постраничного отображения).

Можно использовать один HTML-элемент TABLE для отображения XML-документа, составленного по следующим правилам:

· корневой элемент содержит множество элементов типа запись;

· каждый элемент типа запись содержит одинаковый набор элементов типа полей;

· каждый элемент типа поле содержит только символьные данные.

Сцепление элемента TABLE с данными XML требует следующего синтаксиса:

<TABLE datasrc=”#[ссылка]”>

<TR>

<TD> </TD>

… инструкции для каждого поля …

</TR>

</TABLE>

Элемент TABLE страницы сцеплен со всем XML-документом путем присвоения атрибуту DATASRC элемента идентификатора (ID) фрагмента данных, предваренного символом #:

Таблица определена с одной строкой (элемент TR). Каждая ячейка в этой строке (т.е. каждый элемент TD) состоит из элемента SPAN, который сцеплен с одним из полей XML-документа таким образом, что этот элемент отображает содержимое поля.

Так как элемент TD не является связываемым HTML- элементом, то он не может быть непосредственно сцеплен с полями XML, поэтому необходимо использовать элемент SPAN в качестве контейнера для данных XML. Атрибут datafld этого элемента, задает конкретное поле, которое должно связываться. Например, для связывания элемента SPAN с элементом FAMILY из документа file_1.xml можно использовать следующую строку:

Не смотря на то, что в элементе TABLE определена только одна строка, когда браузер отображает таблицу, он повторяет строковый элемент для каждой записи в XML- документе.

Для обеспечения заголовков всех столбцов таблицы можно использовать раздел стандартного заголовка:

<TH> Фамилия </TH>

… инструкции для каждого заголовка…

</THEAD>

Если XML-документ содержит много записей, можно использовать постраничный вывод группы записей за один раз вместо отображения всех записей одновременно в огромной таблице. Для активизации постраничного отображения в обычной связанной таблице выполняются следующие действия.

· Для сцепленного элемента TABLE добавляется атрибут DATAPAGESIZE, значение которого равное максимальному числу записей, отображаемых за раз. Каждая страница записей будет содержать заданное число записей;

· Для сцепленного элемента TABLE добавляется атрибут ID и присвоить ему уникальный идентификатор;

· Для перемещения между записями таблицы вызывать методы элемента TABLE, с использованием его значения его уникального идентификатора в качестве объекта, вызывающего метод.

Использование методов элемента TABLE

Отображает первую страниц записей	ID_таблицы.firstPage ()
Отображает предыдущую страницу записей	ID_таблицы.previousPage()
Отображает следующую страницу записей	ID_таблицы.nextPage()
Отображает последнюю страницу записей	ID_таблицы.lastPage()

В простейшем случае обращения к методам элемента TABLE заключается в присвоении метода атрибуту ONCLICK HTML-элемента BUTTON.

Листинг

Laba_9.html

<html>

<head>

</head>

<body>

Страница была обновлена

Задача 1 Написать функцию решения указанной задачи. Исходные данные получить при помощи датчика случайных чисел.

Вариант 6. Дана последовательность чисел а1, а2,..., ап. Указать наименьшую длину числовой оси, содержащую все эти числа.

Исходные данные:

n =

a =

Наименьшая длина числовой оси, содержащая все эти числа:

Задача 2 Написать функцию решения указанной задачи. Исходные данные должны задаваться внутри кода как константы.

Вариант 6. Дана строка, содержащая слова разделенные пробелами. Вывести на экран слова из трех букв.

Исходные данные:

Текстовая строка:

Наденые слова из трех букв:

</body>

// вывод времени

var curr_datetime = new Date();

curr_datetime = curr_datetime.toLocaleString();

display('curr_datetime', curr_datetime);

</script>

</html>

Script.js

// task 1

var nMin = 4;

var nMax = 20;

var aMin = 1;

var aMax = 50;

var n;

var a;

function calc() {

n = random(nMin, nMax);

a = new Array(n);

fill_a();

var min_axis_len = get_min_max(a);

display('n_element', n);

display('a_element', '['+a.join(', ')+']');

var leng = min_axis_len[1] - min_axis_len[0] + 1;

display('len', leng);

}

function fill_a() {

var len = a.length;

for(i = 0; i < len; i++){

a[i] = random(aMin, aMax);

}

function get_min_max(mas) {

var max = Math.max.apply(Math, mas);

var min = Math.min.apply(Math, mas);

return new Array(min, max);

}

function random(min, max) {

return parseInt(Math.random() * (max - min) + min);

}

// task 1 END

// task 2

var stroka = new String('Мне приснился интересный сон про то как плавал кит')

function find_words() {

var probelReg = /\s+/ig;

var wordReg = /^[А-я]{3}$/ig;

//alert(stroka);

var wordsArray = stroka.split(probelReg);

var result = new Array();

var len = wordsArray.length;

for(i = 0; i < len; i++){

if (wordsArray[i].search(wordReg)!= -1) {

result.push(wordsArray[i]);

}

display('stroka', stroka);

display('result', result.join(', '));

}

// task 2 END

function display(elem_id, text) {

document.getElementById(elem_id).innerHTML = text;

}

Отображение в окне браузера

Выводы:

В ходе выполнения лабораторной работы были получены практические навыки работы со стандартными объектами и функциями JavaScript, изучены функции в JavaScript.