Заглавная страница
Избранные статьи
Случайная статья
Познавательные статьи
Новые добавления
Обратная связь

ТОП 10 на сайте

Приготовление дезинфицирующих растворов различной концентрации

Техника нижней прямой подачи мяча.

Франко-прусская война (причины и последствия)

Организация работы процедурного кабинета

Смысловое и механическое запоминание, их место и роль в усвоении знаний

Коммуникативные барьеры и пути их преодоления

Обработка изделий медицинского назначения многократного применения

Образцы текста публицистического стиля

Четыре типа изменения баланса

Задачи с ответами для Всероссийской олимпиады по праву

Мы поможем в написании ваших работ!

ЗНАЕТЕ ЛИ ВЫ?

Влияние общества на человека

Приготовление дезинфицирующих растворов различной концентрации

Практические работы по географии для 6 класса

Организация работы процедурного кабинета

Изменения в неживой природе осенью

Уборка процедурного кабинета

Сольфеджио. Все правила по сольфеджио

Балочные системы. Определение реакций опор и моментов защемления

Главная Избранные Случайная статья Познавательные Новые добавления Обратная связь FAQ

Программный интерфейс XML DOM

⇐ ПредыдущаяСтр 5 из 7Следующая ⇒

В рамках DOM модели XML можно рассматривать как множество узловых объектов. Доступ к ним осуществляется с помощью JavaScript или других языков программирования. Программный интерфейс DOM включает в себя набор стандартных свойств и методов.

Свойства представляют некоторые сущности (например, <day>), а методы - действия над ними (например, добавить <lesson>).

В XML DOM используются практически те же свойства и методы, что и в HTML DOM.

Например, результатом выполнения следующего ниже JavaScript кода будет текстовой содержимое элемента <subject> в файле timetable.xml.

txt = xmlDoc.getElementsByTagName("subject")[0].childNodes[0].nodeValue;

Результат: "Deutsch ".

В рамках DOM XML возможны 3 способа доступа к узлам:

· С помощью метода getElementsByTagName(name). При этом возвращаются все узлы с указанным именем тэга (в виде индексированного списка). Первый элемент в списке имеет нулевой индекс.

· Путем обхода узлов дерева с использованием циклических конструкций.

· Путем перемещения по дереву с использованием отношений между узлами.

Для определения длины списка узлов используется свойство length.

Перемещение между узлами дерева

В XML DOM отношения между узлами определены в виде следующих свойств узлов:

· parentNode

· childNodes

· firstChild

· lastChild

· nextSibling

· previousSibling

Характер отношений между узлами представлен на следующем рисунке:

Рис.3. Характер отношений

Игнорирование пустых текстовых узлов

Firefox и некоторые другие браузеры воспринимают неотображаемые символы как текстовые узлы (в отличие от Internet Explorer). Такая ситуация приводит к проблемам при использовании свойств firstChild, lastChild, nextSibling, previousSibling. Для того, чтобы игнорировать такие пустые текстовые узлы можно использовать следующий прием:

function get_nextSibling(n)

{y = n.nextSibling;

while (y.nodeType!=1)

{ y = y.nextSibling; }

return y;}

Поскольку узлы элементов имеют тип 1, то в том случае, когда узел-потомок не является узлом элемента, будет происходить перемещение к следующему узлу до тех пор, пока не будет найден узел элемента.

Изменение значения атрибута

Узлы атрибутов могут принимать текстовые значения. Изменение этого значения реализуется либо через метод setAttribute(), либо через свойство узла атрибута nodeValue

Метод setAttribute() изменяет значение существующего атрибута или создает новый атрибут. Например:

xmlDoc = loadXMLDoc("timetable.xml");

x = xmlDoc.getElementsByTagName('lesson');

x [0]. setAttribute (" type "," lab ");

Свойство nodeValue можно использовать для изменения значения атрибута узла:

xmlDoc = loadXMLDoc("timetable.xml");

x = xmlDoc.getElementsByTagName("lesson")[0];

y = x.getAttributeNode("type");

y.nodeValue = "lab";

Удаление узла из дерева реализуется с помощью метода removeChild():

xmlDoc=loadXMLDoc("timetable.xml ");

y=xmlDoc.getElementsByTagName("lesson")[0];

xmlDoc.documentElement.removeChild(y);

Объект Node

Объект Node представляет собой узел XML-документа. Все свойства и методы объекта Nodeперечислены в таблице 1.

Таблица1. Свойства и методы объекта Node

IE: Internet Explorer, F: Firefox, O: Opera, W3C: (Стандарт)

Свойство

Описание

W3 C

Версия

baseURI

Возвращает абсолютный URI узла

Нет

Да

childNodes

Возвращает свойство NodeList (список дочерних узлов)

Да

firstChild

Возвращает первый дочерний узел

Да

lastChild

Возвращает последний дочерний узел

Да

localName

Возвращает локальную часть имени узла

Нет

Да

namespaceURI

Возвращает URI узла в пространстве имен

Нет

Да

nextSibling

Возвращает следующий дочерний узел

Да

nodeName

Возвращает имя узла в зависимости от типа

Да

nodeType

Возвращает тип узла

Да

nodeValue

Устанавливает или возвращает значение узла в зависимости от типа

Да

ownerDocument

Возвращает корневой элемент (объект document) для узла

Да

parentNode

Возвращает родительский узел

Да

prefix

Устанавливает или возвращает префикс пространства имен узла

Нет

Да

previousSibling

Возвращает непосредственно предшествующий узел

Да

textContent

Устанавливает или возвращает текстовое содержимое узла

Нет

Да

xml

Возвращает XML код узла

Нет

Метод

Описание

W3C

appendChild()

Добавить новый узел в конец списка дочерних узлов

Да

cloneNode()

Клонирование узла

Да

compareDocumentPosition()

Сравнение позиций двух узлов

Нет

Да

getFeature(feature,version)

Возвращает объект DOM, реализующий специализированный API

Нет

Да

getUserData(key)

Возвращает объект, ассоциирующийся с ключем текущего узла. Перед этим объект должен быть ассоциирован с текущим узлом путем вызова setUserData с тем же ключем

Нет

Да

hasAttributes()

Возвращает истинное значение, если узел имеет атрибуты

Нет

Да

hasChildNodes()

Возвращает истинное значение, если узел имеет дочерние узлы

Да

insertBefore()

Вставляет новый узел перед существующим узлом

Да

isDefaultNamespace(URI)

Определяет, является ли указанный namespaceURI значением по умолчанию

Нет

Да

isEqualNode()

Проверяет равенство двух узлов

Нет

Да

isSameNode()

Проверяет идентичность двух узлов

Нет

Да

isSupported(feature,version)

Определяет поддерживается ли указанная характеристика узлом

Да

removeChild()

Удаляет дочерний узел

Да

replaceChild()

Заменяет дочерний узел

Да

setUserData(key,data,handler)

Ассоциирует объект с ключем в узле

Нет

Да

Задание:

Создать форму на HTML странице, позволяющую вводить данные для заполнения двух таблиц (структуру и тип данных брать из ранее разработанной БД). Заполнение данных должно производиться с учётом следующих условий:

· на форме изначально должны присутствовать шапки таблиц с подписями;

Задания к лабораторным работам и требования к структуре и содержанию отчётов по ним

· при заполнении строки должны нумероваться автоматически;

· учёт связи по ключевым полям необязателен;

· предусмотреть блокирование или сокрытие тех полей формы, которые не относятся к заполняемой в текущий момент таблице.

Реализация механизма заполнения должна быть построена с использованием двух методов (стандартный и DOM). На форме должен быть предусмотрен выбор использования конкретного метода.

Задачи:

1. Изучить команды стандартного подхода для работы документами, имеющими иерархическую структуру

2. Изучить возможности (достоинства и недостатки) стандартного подхода

3. Изучить команды подхода DOM для работы документами, имеющими иерархическую структуру

4. Изучить возможности (достоинства и недостатки) подхода DOM

5. Изучить расширенные возможности работы с формами в HTML

Ст руктура отчёта:

1. Титульный

2. Содержание

3. Описание целей и задач

4. Описание системы

5. Файлы HTML и JavaScript

Пример лабораторной работы №4:

XML файл: остается без изменений

XSLT файл: описываем формы для добавления новых значений в таблицы client и employee.

<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

<xsl:template match="/">

<html>

<head>

<script>

function show(obj){

if(document.getElementById("sel").value==1){

document.form1.style.display='block';

document.form2.style.display='none'; }

if(document.getElementById("sel").value==2){

document.form2.style.display='block';

document.form1.style.display='none'; }}

</script>

<title>Fitness</title>

</head>

<body>

<select name="select" id="sel" onchange="show(this);">

<option value="1">client</option>

<option value="2">employee</option>

</select>

<form name="form1" method="post" action="client.php"

id="form1" style="display:block">

<input type="text" name="name" id="name"/><br/>

<input type="text" name="birth" id="birth" /><br/>

<input type="text" name="IDcard" id="IDcard" /><br/>

<input type="text" name="telephone" id="telephone" /><br/>

<input type="submit" name="submit1" value=" Добавить запись "/>

</form>

<form name="form2" method="post" action="employee.php"

id="form2" style="display:none">

<input type="text" name="name" id="name"/><br/>

<input type="text" name="position" id="position" /><br/>

<input type="text" name="telephone" id="telephone" /><br/>

<input type="text" name="email" id="email" /><br/>

<input type="submit" name="submit2" value=" Добавить запись "/>

</form>

<h2>Client</h2>

<table border="1" id='client'>

<thead>

<tr bgcolor="purple" >

<th>№</th>

<th>name</th>

<th>birth</th>

<th>IDcard</th>

<th>telephone</th>

</tr>

</thead>

<tbody>

<xsl:for-each select="fitness/list1/client">

<tr>

<xsl:if test="position() mod 2 = 1">

<xsl:attribute name="style">background-color: pink;</xsl:attribute>

</xsl:if>

<td>

<xsl:value-of select="position()"/>

</td>

<td><xsl:value-of select="name"/></td>

<td><xsl:value-of select="birth"/></td>

<td><xsl:value-of select="IDcard"/></td>

<td><xsl:value-of select="telephone"/></td>

</tr>

</xsl:for-each>

</tbody>

</table>

<p> Всего элементов: <xsl:value-of select="count(fitness/list1/client)"/></p>

<h2>Employee</h2>

<table border="1">

<tr bgcolor="purple">

<th>name</th>

<th>position</th>

<th>telephone</th>

<th>email</th>

</tr>

<xsl:for-each select="fitness/list2/employee">

<tr>

<xsl:if test="position() mod 2 = 1">

<xsl:attribute name="style">background-color: pink;</xsl:attribute>

</xsl:if>

<td><xsl:value-of select="name"/></td>

<td><xsl:value-of select="position"/></td>

<td><xsl:value-of select="telephone"/></td>

<td><xsl:value-of select="email"/></td>

</tr>

</xsl:for-each>

</table>

<p> Всего элементов:<xsl:value-of select="count(fitness/list2/employee)"/></p>

<h2>Contract</h2>

<table border ="1">

<tr bgcolor="purple">

<th>IDcard</th>

<th>contract_date</th>

<th>term</th>

</tr>

<xsl:for-each select="fitness/list3/contract">

<tr>

<xsl:if test="position() mod 2 = 1">

<xsl:attribute name="style">background-color: pink;</xsl:attribute>

</xsl:if>

<td><xsl:value-of select="IDcard"/></td>

<td><xsl:value-of select="contract_date"/></td>

<td><xsl:value-of select="term"/></td>

</tr>

</xsl:for-each>

</table>

<p> Всего элементов: <xsl:value-of select="count(fitness/list3/contract)"/></p>

</body>

</html>

</xsl:template>

</xsl:stylesheet>

PHP добавление client:

Описание: создается для того, чтобы обрабатывать и сохранять данные, добавленные в форму client.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title></title>

</head>

<body>

<?php

$dom = new DOMDocument();

$dom = DOMDocument::load('fit.xml');

$clients = $dom->createElement('list1');

$client = $dom->createElement('client');

$name = $dom->createElement('name');

$birth = $dom->createElement('birth');

$IDcard = $dom->createElement('IDcard');

$telephone = $dom->createElement('telephone');

$name_text = $dom->createTextNode($_POST['name']);

$name->appendChild($name_text);

$client->appendChild($name);

$birth_text = $dom->createTextNode($_POST['birth']);

$birth->appendChild($birth_text);

$client->appendChild($birth);

$IDcard_text = $dom->createTextNode($_POST['IDcard']);

$IDcard->appendChild($IDcard_text);

$client->appendChild($IDcard);

$telephone_text = $dom->createTextNode($_POST['telephone']);

$telephone->appendChild($telephone_text);

$client->appendChild($telephone);

$clients->appendChild($client);

$dom->documentElement->appendChild($clients);

$ dom -> save (' fit. xml ');

echo 'Запись добавлена!';

<meta http-equiv="refresh" content="0; url=fit.xml">

</body>

</html>

PHP добавление employee:

Описание: создается для того, чтобы обрабатывать и сохранять данные, добавленные в форму employee.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title></title>

</head>

<body>

<?php

$dom = new DOMDocument();

$dom = DOMDocument::load('fit.xml');

$employees = $dom->createElement('list2');

$employee = $dom->createElement('employee');

$ename = $dom->createElement('name');

$position = $dom->createElement('position');

$etelephone = $dom->createElement('telephone');

$email = $dom->createElement('email');

$ename_text = $dom->createTextNode($_POST['ename']);

$ename->appendChild($ename_text);

$employee->appendChild($ename);

$position_text = $dom->createTextNode($_POST['position']);

$position->appendChild($position_text);

$employee->appendChild($position);

$etelephone_text = $dom->createTextNode($_POST['etelephone']);

$etelephone->appendChild($etelephone_text);

$employee->appendChild($etelephone);

$email_text = $dom->createTextNode($_POST['email']);

$email->appendChild($email_text);

$employee->appendChild($email);

$employees->appendChild($employee);

$dom->documentElement->appendChild($employees);

$ dom -> save (' fit. xml ');

echo 'Запись добавлена!';

<meta http-equiv="refresh" content="0; url=fit.xml">

</ body >

</ html >

Рис. 5. Добавление записи

Л абораторная № 5

Т ема: «Изучение регулярных выражений»

Ц ель: Изучить принцип работы с регулярными выражениями в JavaScript

Теоретические основы:

Регулярные выражения — это мощное средство для обработки входящих данных. Задача, требующая замены или поиска текста, может быть красиво решена с помощью этого "языка внутри языка". И хотя максимальный эффект от регулярных выражений можно добиться при использовании серверных языков, всё же не стоит недооценивать возможности этого приложения и на стороне клиента.

Примечание

Синтаксис регулярных выражений является достаточно сложным и его изучение требует серьёзных усилий. Наилучшим руководством по регулярным выражением на сегодняшний день является книга Дж. Фридла "Регулярные выражения", позволяющая, по словам автора, "научиться мыслить регулярными выражениями".

Основные понятия

Регулярное выражение (regular expression) — средство для обработки строк или последовательность символов, определяющая шаблон текста.

Модификатор — предназначен для "инструктирования" регулярного выражения.

Метасимволы — специальные символы, которые служат командами языка регулярных выражений.

Регулярное выражение задаётся как обычная переменная, только вместо кавычек используется слэш, например: var reg=/рег_выражение/

Под простейшими шаблонами будем понимать такие шаблоны, которые не нуждаются в каких-либо специальных символах.

Допустим, нашей задачей является замена всех букв "р" (малых и заглавных) на латинскую большую букву "R" в словосочетании Регулярные выражения.

Создаём шаблон var reg=/р/ и воспользуясь методом replace осуществляем задуманное:

<script language="JavaScript">

var str=" Регулярные выражения "

var reg=/ р /

var result=str.replace(reg, "R")

document.write(result)

</script>

В результате получим строку — РегуляRные выражения, замена произошла только на первом вхождении буквы "р" с учётом регистра.

Но под условия нашей задачи этот результат не подходит... Тут нам понадобятся модификаторы "g" и "i", которые могут использоваться как отдельно, так и совместно. Эти модификаторы ставятся в конце шаблона регулярного выражения, после слэша, и имеют следующие значения:

Модификатор "g" — задаёт поиск в строке как "глобальный", т.е. в нашем случае замена произойдет для всех вхождений буквы "р". Теперь шаблон выглядит так: var reg=/р/g, подставим его в наш код:

<script language="JavaScript">

var str=" Регулярные выражения "

var reg=/ р /g

var result=str.replace(reg, "R")

document.write(result)

</script>

получим строку — РегуляRные выRажения.

Модификатор "i" — задаёт поиск в строке без учёта регистра, добавив этот модификатор в наш шаблон var reg=/р/gi, после выполнения скрипта получим искомый результат нашей задачи — RегуляRные выRажения.