Часть 4. «Создание динамических графиков»

В этом разделе рассмотрена программа для создания приближающегося рисунка. Рисунок после наведения на него указателя курсора начинает приближаться. Для этого используется функция gpict( ). Код программы для функции gpict( ) приведен ниже на Листинге III.7.

ЛистингIII.7 Код программы для функции gpict ( )

var d=documentvar w=100function gpict(){if (w< 300){w=w+10d.mypict.width = wsetTimeout(" gpict()", 500)}}

Функция gpict()это функция, создаваемая пользователем. Она использует стандартную функцию setTimeout(" gpict()", 500). При помощи функции setTimeout(" gpict()", 500) производится повторный вызов функции gpict() через каждые 500 миллисекунд (число 500 можно заменить на другое значение). При каждом повторном вызове функции ширина рисунка w увеличивается на 10. В данной программе начальная ширина w=100. Увеличение происходит до заданного значения. В данном примере это 300. Этим достигается эффект приближения рисунка. При достижении конечного значения процесс приближения прекращается. В сценарии также используется стандартная функция onMouseOver=" gpict()". При наведении указателя курсора на рисунок осуществляется вызов функции gpict (). Полностью код программы приведен на Листинге III.8.

Листинг III.8 Код программы для создания приближающегося

Изображения

< HTML> < HEAD> < TITLE> Увеличивающееся изображение < /TITLE> < script> <! --//var d=documentvar w=100function gpict(){if (w< 300){w=w+10d.mypict.width = wsetTimeout(" gpict()", 500)}}//--> < /script> < /Head> < BODY> < h4> При наведении курсора на изображение оно приближается < /h4> < img src=" p1.jpg" name=mypict width=100 onMouseOver=" gpict()" > < /Body> < /HTML> В листинге используется имя рисунка p1.jpg. В программе рисунку присваивается имя mypict. Метод setTimeout( ) создает таймер, который выполняется только один раз по истечении указанного времени. Этот метод использует синтаксис setTimeout(выражение или выполняемый код, временной интервал в миллисекундах). В нашем примере setTimeout(" gpict()", 500) указывает на выполнение функции gpict() с интервалом в 500 мсек. (стр. 716, толст.) Событие MouseOver имеет обработчик onMouseOver. Возникает при попадании указателя мыши на поверхность объекта. В нашем примере событие возникает при наведении указателя курсора на рисунок. (стр.262, Соколов)

Задание III.12. «Создание динамических графиков в Веб- документе»

Цель задания: Научиться создаватьдинамический рисунок вВеб – документе.

Задание:

Составить код программы для включения в Веб – документ динамического рисунка.

Выполнение:

1. Открыть Блокнот, выполняя команды Пуск ► Программы ► Стандартные ► Блокнот.

2. Набрать код программы в соответствии с Листингом 4.2.

3. Выбрать и поместить в свою папку рисунок с расширением .jpg или .gif. Для этого выполняются команды Пуск ► Поиск. В окне Результаты поиска выбираем Файлы и папки и в диалоговое окно вводим *.jpg или *.gif. Нажимаем кнопку Найти. В правом разделе диалогового окна появляется перечень рисунков с заданным расширением. Выбираем один из рисунков и помещаем его в свою папку.

4.В программе заменить p1.jpg на имя и расширение выбранного рисунка.

5. Сохранить программу в своей папке с расширением.txt, присвоив файлу имя JS5. В окошке Тип файла выбрать Текстовый файл (*.txt).

6. Сохранить программу в своей папке с расширением.htm, присвоив файлу имя JS5. В окошке Тип файла выбрать Все файлы.

7. Вызвать программу на выполнение, дважды щелкнув левой клавишей мыши на значке с именем JS5.htm. Проверить наличие эффекта приближающегося изображения. На рисунке III.7 показан рисунок до наведения на него указателя курсора. На рисунке III.8 показан рисунок в конце процесса приближения. Процесс приближения возникает при наведении указателя курсора на рисунок.

Рис. III.7 Рисунок до наведения указателя курсора

Рис. III.8 Рисунок в конце процесса приближения

В программе использован метод setTimeout (). Он создает таймер, который выполняется только один раз по истечении указанного времени.

Синтаксис метода

setTimeout (выражение или выполняемый код, временной интервал в миллисекундах)

В нашем примере setTimeout (“gpict()”, 500) выполняется функция gpict() c интервалом 500 миллисекунд.

Событие MouseOver имеет обработчик onMouseOver. Оно возникает при попадании указателя мыши на указываемый объект.

Часть 5. «Использование языка XML» XML (eXtensible Markup Language) − расширяемый язык разметки документов.При помощи XML выполняется наполнение создаваемого документа содержанием с указанием разметки, определяется структура документа, типы данных этого документа. Язык широко применяется при передаче данных в сетях Интернет и интранет.К основным характеристикам языка XML относятся: - при помощи языка создаются текстовые файлы структурированных данных, язык обеспечивает подготовку и настройку XML – документов со сложной структурой; -cинтаксис языка похож на синтаксис HTML, однако XML обладает более высокими возможностями. К ним относится возможность создавать собственные теги (флаги, дескрипторы), возможность помещать описание структуры документа и типов данных отдельно от документа, гибкость. В HTML- документе формат сайта и его содержимое находятся вместе в одном документе. В XML − документе имеется возможность информацию о компоновке размещать отдельно, что упрощает работу с Веб- документами, например, при изменении его вида; -язык понятен для понимания как человеку, так и компьютеру; - на базе языка образуется целое семейство языков разметки, учитывающих специфику предметной области, например, MathML и др. В электронной коммерции используется язык ebXML (electronic business XML) – это технология взаимодействия бизнес – процессов, предназначенная для упрощения ведения электронной коммерции и удешевления электронного обмена документами (EDI). При использовании ebXML производится кодирование коммерческих данных в форме XML – документов, реализуются стандартные сценарии, шаблоны и формы, например, формы заключения транзакции.- обеспечивает возможность контроля правильности документа.- в Веб-сервисах реализация возможностей языка XML осуществляется при помощи протоколов UDDI, WSDL, SOAP. UDDI (Universal Description and Discovery Protocol) – универсальный протокол описания и обнаружения местонахождения бизнесов ( компаний или частных лиц, осуществляющих электронную коммерцию) и интеграции бизнес – услуг. WSDL (Web Services Description Protocol) – протокол описания Веб – сервисов. При помощи WSDL описываются интерфейсы, параметры и требования к объединению. SOAP (Simple Object Access Protocol) –простой протокол доступа к объектам. Используется поверх HTTP (протокол, который используется между Веб - серверами и Веб – браузерами), а также может быть использован через ТСР, SMTP (Simple Mail Transfer Protocol) или IBM MQSeries. Синтаксис языка подобен синтаксису языка HTML. Каждому открывающему флагу (тегу, дескриптору) < тег> в программе должен соответствовать закрывающий тег < /тег>, или < тег/>. В последнем случае, при помощи тега < тег/> задается элемент без содержания. Тег задает элемент, содержит тип элемента, его имя и уникальный идентификатор, внутри тега могут размещаться атрибуты. Атрибуты указывают на дополнительные свойства элемента. Язык XMLпозволяет пользователю создавать собственные флаги. Например, для создания элемента Petrov в имени заказчика используется флаг (тэг) < CustomerName>.При записи кодов программы это выглядит так: < CustomerName> Петров< /CustomerName>.Для определения более полных реквизитов заказчика можетиспользоваться флаг < Customer>, включающий, кроме фамилии, телефон иназвание фирмы: < Customer> < CustomerName> Петров< /CustomerName> < phone > 123-45-67 < /phone > < Company > CompTek< /Company> < /Customer> Флаг < Customers> используется для ввода данных группы пользовате-лей.Особенностью языка XML является его зависимость от регистра. Все флаги, атрибуты и содержание зависят от регистра, на котором вводятсясимволы.Синтаксис языка XML поддерживается обозревателем InternetExplorer версий 4, 5 и 6.Пример кода программы HTML – документа, использующего синтаксис XML и вид документа, соответствующего этой программе, показан наприведенном Листинге III.9. Программа предназначена для составления списказаказчиков и их характеристик. Листинг III.9 Код программы простейшего HTML – документа, использующего синтаксис XML < HTML> < HEAD> < TITLE> XML< /TITLE> < /HEAD> < BODY> < CUSTOMERS> < HR SIZE=5 WIDTH=80% ALIGN=CENTER COLOR=" Green" > < CUSTOMER> < CUSTOMERName> Петров< /CUSTOMERName> < phone> 123-45-67< /phone> < Company> CompTek< /Company> < /CUSTOMER> < HR SIZE=5 WIDTH=80% ALIGN=CENTER COLOR=" Blue" > < CUSTOMER> < CUSTOMERName> Сидоров< /CUSTOMERName> < phone> 321-654-987< /phone> < Company> ВымпелКом< /Company> < /CUSTOMER> < /BODY> < /HTML> Вид документа Петров 123-45-67 CompTek Сидоров 321-654-987 ВымпелКом Задание III.13. «Создание простейшего HTML – документа, использующего синтаксис XML» Цель задания: Научиться создавать простейший HTML – документ, использующий синтаксис XMLЗадание: Создать HTML – документ, использующий синтаксис XML, со списком заказчиков и их характеристик.Выполнение: 1. Открыть Блокнот, выполняя команды Пуск ► Программы ► Стандартные ► Блокнот.2. Набрать код программы в соответствии с примером 5.1.3. Изменить фамилии заказчиков, названия фирм и телефонов по своему усмотрению.4. Сохранить программу в своей папке с расширением.txt, присвоив файлу имя JS6.5. Сохранить программу в своей папке с расширением.htm, присвоив файлу имя JS6.6. Вызвать программу на выполнение, дважды щелкнув левой клавишей мыши на значке с именем JS6.htm.7. Сохранить программу в своей папке. Структура и составляющие XML – документов. Документы XMLмогут быть двух типов − правильно построенные документы и действительныедокументы.Правильно построенные документы удовлетворяют специфике XML, но не имеют определения типа документа DTD. DTD (Document Type Definition) определение типа документа, описание типа (шаблона) документа.Пример правильного документа.<? xml version=”1.0”? > < body > Здесь записывается тело (содержание) правильного документа< /body > Действительные документы XML − документы состоят из двух частей − из определения используемого языка DTD и собственно документа. DTD – этопреамбула документа, где определяются его компоненты и структура.Пример действительного документа.<? xml version=”1.0”? > <! DOCTYPE body [<! ELEMENT body (#PCDATA)> ]> < body > Здесь записывается тело (содержание) правильного и действительногодокумента< /body > Определение типа документа DTD. Определение типа документа DTD (Document Type Definition) определяет части документа и указывает, каким образом они могут использоваться, что может быть в них размещено, требуются ли фрагменты документа.DTD может включать в себя набор объявлений элементов и атрибутов, сущности (entities), условные обозначения и комментарии. Различные объявления компонентов определяют, как документ будет структурирован и эта информация передается анализатору. Анализатор отправляет результаты в приложение, обеспечивающее просмотр данных.Определение типа документа DTD следует сразу после строки объявления XML: <? xml version=”1.0” encoding= “UTF=8”> Оно начинается со второй строки<! DOCTYPE имя документа[…….………]> Вторая строка служит для связывания XML-документа с соответствующим DTD. В квадратные скобки помещается объявление элементов документа, ихатрибутов и сущностей.Элемент. Объявления элементов записываются по следующему формату<! ELEMENT имя содержание>. Например, ниже приведено описание элемента DOC и составляющих его элементов SUBJECT, DATE, ADDRESS, MEMO. Для элементов SUBJECT, DATE, ADDRESS, MEMO указан тип (#PCDATA), указывающий на то, что содержимым элементов являются обычные текстовые данные.<! ELEMENT DOC (SUBJECT, DATE, ADDRESS, MEMO)> <! ELEMENT SUBJECT (#PCDATA)<! ELEMENT DATE (#PCDATA)<! ELEMENT ADDRESS (#PCDATA)<! ELEMENT MEMO (#PCDATA)В DTD кроме элементов могут использоваться атрибуты и сущности.Атрибут. Атрибуты используются для: - определения отдельных свойств элементов (размер, высота, вес, цвет и т.д.); - указания местоположения объекта (сноски, графики, ссылки); - определения сведений о форматировании отображаемых объектов, их виде.Формат представления атрибута имеет вид: < ATLIST имя_элемента имя_атрибута тип использовать_по_умолчанию> После указания имени элемента указывается присваиваемое атрибуту имя, его тип и возможность использовать атрибут по умолчанию.В указанном выше примере может быть продолжение: <! ELEMENT DOC (SUBJECT, DATE, ADDRESS, MEMO)> <! ELEMENT SUBJECT (#PCDATA)<! ELEMENT DATE (#PCDATA)<! ELEMENT ADDRESS (#PCDATA)<! ELEMENT MEMO (#PCDATA)<! ATTLIST SUBJECTsex CDATA #REQUIREDnumber CDATA #REQUIRED> Здесь указано, что элемент SUBJECT имеет атрибуты sex и number, которые имеют тип CDATA. Это значит, что их содержимым может быть строки из любых символов, кроме <, >, &, ”. Слово #REQUIRED означает, что атрибуты sex и number являются обязательными для элемента SUBJECT.Сущность. Сущности представляют собой текст или данные, которые могут быть заменены в документе на основании их объявления в сущности. Например, пусть в DTD имеется сущность вида: <! ENTITY Юпитер “Программное обеспечение фирмы ИВК для интеграции приложений”Если процессор XML встретит в тексте сущность & Юпитер, то он заменит его на текст Программное обеспечение фирмы ИВК для интеграции приложений.DTD может помещаться внутри и вне документа и может вообще отсутствовать, т.е. оно не является обязательным.В случае внешнего DTD оно может быть общедоступным и в этом случае используется ключевое слово PUBLIC. Например: <! DOCTYPE book PUBLIC “-//Company XYZ//DTD book//EN”http: //www.site.com/dtds/book.dtd> Начинается такое объявление со знака минус, далее следуют две косые черты, затем указывается владелец DTD. Это объявление не является стандартным, его владельцем является фирма XYZ. book – это имя DTD и оно расположено по адресу http: //www.site.com/dtds/book.dtd>.Если же DTD собственное и оно расположено на локальной машине, то ставится ключевое слово SYSTEM. Так, DTD расположенное на локальной машине будет иметь вид: <! DOCTYPE book SYSTEM “http: //www.site.com/dtds/book.dtd”>.В этом объявлении за ключевым словом SYSTEM следует адрес и имя файла, в котором хранится DTD. Двойные наклонные линии не ставятся и имя владельца не указывается.Факторы, влияющие на выбор типа DTD: 1) Большие документы требуют применения внешних DTD. В этом случае при помощи DTD создается приближение к стандартизации.2) Малые документы не требуют использования внешних DTD.3) В некоторых документах, предназначенных для интернет применение внешних DTD не целесообразно.4) XML- процессоры, не проверяющие действительности XML –документов, не требуют DTD. Задание III.14 Создание XML – документ без DTD.Цель задания: Научиться создавать простейший XML – документ без DTDЗадание: Создать XML – документ без DTDВыполнение: 1) Наберите код программы в соответствии с приведенным ниже Листингом III.10. Листинг III.10 Код программы XML – документа без DTD. <? xml version=" 1.0"? > < documents> < books> < book id=" Book1" > < title> Contest < /title> < author> Ivan Petrov < /author> < date> 21.08.05< /date> < /book> < book id=" Book2" > < title> Floriculture< /title> < author> P. Ivanov < /author> < date> 10.10.04< /date> < /book> < /books> < articles> < article id=" Article1" > < author> Nic. Sidorov < /author> < title> Electricity< /title> < date> 12.09.05< /date> < /article> < /articles> < /documents> 2) Сохраните документ в своей папке дважды. Один раз с расширением.txt и второй раз с расширением.xml, указав при этом кодировку Юникод, тип документа – все файлы.3) Выполните программу с расширением.xml. Cоздание XML –документ с внутренним DTD Приведем пример внутреннего DTD: <? xml version=”1.0”> <! DOCTYPE DOC [<! ELEMENT DOC (SUBJECT, DATE, ADDRESS, MEMO)> <! ELEMENT SUBJECT (#PCDATA)<! ELEMENT DATE (#PCDATA)<! ELEMENT ADDRESS (#PCDATA)<! ELEMENT MEMO (#PCDATA)<! ENTITY PUBLISHER “Solon”> ]> < DOC> < SUBJECT> Today’s Memo < /SUBJECT> < DATE> 01.10.05 < /DATE> < ADDRESS> MOSCOW< /ADDRESS> < MEMO> It is best Publisher < /MEMO> < /DOC> В этом коде программы запись <! ELEMENT DOC (SUBBJECT, DATE, ADDRESS, MEMO)> определяет список элементов для корневого элемента DOC. Оно сообщает анализатору, что корневой элемент DOC содержит элементы потомки SUBJECT, DATE, ADDRESS, MEMO и что эти элементы должны появиться в документе в этом же порядке. Если порядок будет нарушен, то будет сообщение об ошибке.<! ELEMENT SUBJECT (#PCDATA) – определяет элемент SUBJECT и указывает, что этот элемент будет содержать символьные данные, которые подлежит обрабатывать анализатором. Аналогично записываются другие элементы.<! ENTITY PUBLISHER “Solon”> определяет простую сущность и указывает, что значением этой сущности является издательство Solon. Пример 5.1 Пусть фирма осуществляет перевозки товаров автомашинами с прицепом (trailers). На каждую автомашину может быть помещен 20- или 30- футовый контейнер (container). В каждом контейнере находятся коробки (box) c товарами (contents). Для сопровождения товаров создается XML − документ с именем trailer. Описание типа документа помещается сразупосле строки с описанием версии языка XML и может иметь вид: <! DOCTYPE trailers [<! ELEMENT trailer(container, box+)> <! ELEMENT container(#PCDATA)> <! ELEMENT box( Type, content)> <! ELEMENT Type(#PCDATA)> <! ELEMENT content (#PCDATA)> ]В приведенном примере конструкция <! DOCTYPE trailers [..] задаетописание элементов и структуру документа trailers. После этой строкиследует строка <! ELEMENT trailer(container, box+)>. В этой строке описанэлемент trailer документа trailers. Он содержит элементы container и box+. Знак + после элемента box указывает на то, что таких элементов может быть болееодного. Запись <! ELEMENT container(#PCDATA)> описывает элемент сименем container, а атрибут #PCDATA указывает на то, содержимое элементамогут составлять символьные данные. Код программы приведен на Листинге III.11. Листинг III.11 Код программы простейшего XML – документа cиспользованием внутреннего DTD <? xml version=" 1.0"? > <! DOCTYPE trailers [<! ELEMENT trailer (identification, box+, content)> <! ELEMENT identification (trailer_type, container, customer)> <! ELEMENT trailer_type (#PCDATA)> <! ELEMENT container (#PCDATA)> <! ELEMENT customer (#PCDATA)> <! ELEMENT box (#PCDATA) > <! ELEMENT content (#PCDATA)> ]> < trailer> < identification> < number> KРАZ 77_95-03< /number> < container Type=" 20f" > 5674321< /container> < /identification> < customer> < CustomerName> Ivanov < /CustomerName> < phone> 432-76-51< /phone> < Company> IBMM< /Company> < /customer> < box Type=" Super Empire" > 100 box < /box> < content> video< /content> < /trailer> После работы программы создается XML – документ, показанный на рисунке III.9. Рисунок III.9 XML - документ Задание III.15. Cоздание XML –документ с внутренним DTD Цель задания: Научиться создавать простейший XML – документ с внутренним DTD Выполнение: 1)К коду программы, записанному в Листинге III.10, допишите внутреннее объявление типа документа DTD. Примите document в качестве корневого элемента, а входящими в него элементами book1, book2, article.3) Дважды сохраните документ в своей папке. Один раз с расширением.txt и второй раз с расширением.xml, задав при этом кодировку Юникод.4) Выполните программу с расширением.xml. Преимуществом XML – документов по сравнению с HTML – документами является их структурированность и наглядность, что следует из приведенных примеров. Для подтверждения этого на Листинге III.12 приведен код программы для создания XML – документа. Создается прайс – лист в соответствии с заданием III.4. В программе описаны только две первые строки прайс – листа с названием Компьютеры. Листинг III.12 Код программы прайс – листа на языке ХML <? xml version=" 1.0"? > <! DOCTYPE Computers [<! ELEMENT Computer (model, configuration, price)> <! ELEMENT model(#PCDATA)> <! ELEMENT configuration(#PCDATA)> <! ELEMENT price(#PCDATA)> ]> < Computers> < Computer> < model > М700< / model > < configuration > AMD DURON-700/DIMM 128/10WD/MIDI ATX A312< / configuration > < price > 9294< / price > < /Computer> < Computer> < model > М1400< / model > < configuration > AMD ATHLON-1400/DIMM 128/10WD/MIDI ATX A312< / configuration > < price > 11815< / price > < /Computer> < /Computers> Результатом работы программы является XML – документ, приведеный на рисунке III. 10. Рисунок III.10 Прайс – лист на языке XML Задание III.16. «Создание прайс – листа на языке XML» Цель задания: Научиться создавать простейший XML – документ, на примере прайс - листа. Выполнение: 1. Открыть Блокнот, выполняя команды Пуск ► Программы ► Стандартные ► Блокнот.2. Набрать код программы в соответствии с Листингом III.12. Данные принять из задания III.4 в соответствии со своим вариантом.3.. Сохранить программу в своей папке с расширением.txt, присвоив файлу имя Прайс - лист.5. Сохранить программу в своей папке с расширением xml., присвоив файлу имя Прайс – лист, формат Юникод.6. Вызвать программу на выполнение, дважды щелкнув левой клавишей мыши на значке с именем Прайс – лист.xml.7. Сохранить программу в своей папке В электронной коммерции для исследования покупательских предпочтений клиентов используются файлы cookie. При создании файлов cookie с помощью языка XML они становятся легко читаемыми, при этом возможно использование большего числа отображаемых параметров. Задание III.17. Создание файла cookie на языке XML Цель задания: Научиться создавать файл cookie на языке XML Выполнение: 1) В качестве корневого элемента примите Профиль файла (profile).2) В файле следует отразить фамилию (last_name), имя (first_name), дату последнего посещения электронного магазина (last_purchase), частоту посещений (frequency), а также покупательские предпочтения (interest). При этом подчиненными элементами элемента Предпочтения примите категории, подкатегории, темы. Категорию (category) предпочтений примите техническую (technical), подкатегорию (sub_category) –примите вычислительные машины (computer), тема (topic) – опишите три темы: применение Веб (Web-Development), электронная коммерция (e-commercе), интеграция (Integration).3) Язык XML допускает использование пустых элементов. Пустой элемент не содержит данных и (или) других элементов. Пустые элементы могут содержать атрибуты. Атрибуты пустых элементов могут содержать много полезных сведений. Для записи пустого элемента используется конструкция: < имя элемента атрибуты/>.В качестве примера запишем пустой элемент в создаваемом файле cookie. В качестве пустого элемента примем последнее посещение магазина (last_purchase). а в качестве атрибутов этого элемента примем дату (date) последнего посещения и частоту посещений (frequency). Отметим, что каждый элемент может содержать несколько атрибутов. При записи они разделяются пробелом. Запись этого пустого элемента может иметь вид: < last_purchase date=”01-01-05” frequency=”10”/ >.В создаваемом файле cookie, записанном на языке XML используйте пустой элемент.4) Сохраните документ в своей папке два раза – один раз с расширением.txt и и второй раз с расширением.xml.5) Вызовите файл с расширением.xml на выполнение.

Предыдущая 1 2 3 4 5 6 7 8910 11 Следующая