Проектирование Интернет приложений Лекция 1 -2 Кафедра «ОСУ» Весенний семестр 2009/2010 уч. года Уч. группы: 8561 и 8562 Основные Интернет технологии

План лекции Описание дисциплины Стандарты Web сети – HTTP протокол – HTML, CSS – DHTML, JavaScript, VBScript – ASP, PHP, JSP Технологии программирования – Клиентские – Серверные

Цель преподавания данной дисциплины дать основы проектирования и разработки web- приложений с использованием технологии ASP.Net и выполнения приложений Microsoft.Net и языка программирования C#, сформировать у студентов понимание создания и развертывания программного обеспечения, работающего в компьютерных сетях использованием Интернет технологий. на лабораторных занятиях студенты разрабатывают web приложения с помощью системы программирования Microsoft Visual Studio.Net.

Основными задачами изучения и изложения дисциплины являются изучение основ программирования ASP.Net для web-сети Интернет; изучение основ разработки графического интерфейса – web страниц; изучение методов поддержки состояния web приложения; изучение методов перехода (навигации) между разными элементами web приложения; изучение методов обеспечения безопасности работы приложения в сети Интернет; изучение методов взаимодействия web приложений с базами данных; приобретение практических навыков создания, отладки и развертывания web приложений с помощью системы программирования Microsoft Visual Studio.Net. (язык программирования C#).

Лектор: Тузовский Анатолий Федорович – профессор каф. ОСУ Рабочее место к. 316 КЦ ТПУ Консультация: Четверг с Лабораторные занятия: Губин Максим Юрьевич, ассистент каф. ОСУ

Курсы учебного плана, связанные с Интернет технологиями 1.Вычислительные системы, сети и телекоммуникации – 5 семестр (46 часов лекций, 36 часов лаб. раб.) 2.Мировые информационные ресурсы – 6 семестр (34 часа лекций, 34 часа лаб. раб.) 3.Проектирование Интернет приложений – 8 семестр (26 часов лекций, 26 часов лаб. раб.) 4.Сетевая экономика – 9 семестр (18 часов лекция, 18 часов практических) 5.Информационные технологии в электронной коммерции – 9 семестр (28 часов лекций, 28 часов лаб. раб.) Итого: Лекций – 152 часа; Лаб.работы – 72 часа; Практич. занятия – 18 часов.

Распределение учебного времени Лекции – 26 часов Лабораторные работы – 26 часов Самостоятельная работа – 52 часа Всего – 112 часов Экзамен

Материалы курса Материалы по курсу будут расположены в локальной сети по адресу \\Exilim\Info\Дисциплина - Проектирование Интернет Приложений (8561, 8562)

Литература в электронном формате \\Exilim\Info\Дисциплина - Проектирование Интернет Приложений (8561, 8562)/Библиотека – на русском – на английском книги по технологии ASP.Net – в библиотеке НТБ – в магазинах

Основные этапы развития web технологий Создание HTTP протокола и HTML языка. Добавление CSS и скриптов на стороне клиента (а также встраиваемых компонент Java и COM). Появление XML и скриптов на стороне сервера. Web сервисы. Облачные вычисления (cloud computing).

Кодирование документов на компьютере Для обработки документов компьютерами (отображении, обмене) потребовалось описывать их эффективным способом. Наиболее распространенным методом кодирования документов являлся формат ASCII (American Standard Code for Information Interchange), который использует для хранения символов 1 байт (7 бит для символа и 1 бит для исправления ошибок). – Всего с помощью 7 бит можно задать 128 значений, которых было достаточно для английского языка (для больших и маленьких букв, знаков препинания и чисел). – Первые 31 значения использовались для обозначения управляющих кодов (таких, как начало/окончание передачи данных, переход на новую строку и т.п.). – Пробел кодируется числом 32. – Буквы алфавита начинаются с числа 65 (65 = A, 66 = B, …).

Разметка (murkup) Кодировка ASCII работала хорошо для не форматированного текста (например, такого, как программный код), но не достаточен для описания документов, которые имеют типографскую (печатную) информацию. Для отображения на экране компьютера статьи из газеты или журнала требуется знать, как расположен текст, размеры букв, внешний вид букв (шрифт), расположение строк и колонок и т.п. Для решения этой проблемы были созданы языки разметки (murkup languages), которые включали в текст специальные инструкции. С их помощью в текст документа вставлялись дополнительные коды, которые не отображались при показе документа. Эти коды также записывались с помощью ASCII формата, но программы обрабатывал их не так, как содержание документа. Например, в ранних процессорах текста, пользователь должен был иметь набор «управляющих кодов» для задания того, как должен выглядеть текст. Эти коды расширяли уже существующий набор кодов. В языке разметки целые слова являлись инструкциями для компьютера. Чтобы отличать эти инструкции от самого текста документа было предложено заключать их в квадратные скобки ([], brackets). Такие слова назывались тегами (tags). Некоторые теги имели атрибуты – передаваемые им дополнительные значения. Например, тег для шрифта (font) обычно имел тег для описания типа шрифта и для задания размера. Описание документов является очень сложным делом – разные пользователи требовали свои собственные специальные функции. В связи с этим с 60-х годов появилось множество электронных систем разметки, которые были сильно не совместимыми между собой.

Язык SGML В конце 60-х годов Charles Goldfarb, который возглавлял группу специалистов IBM, исследовал системы электронных документов и создал полный язык, который описывал форматирование и разметку текста. Этот язык получил название GML (Generalized Markup Language, а также инициалы его создателей: Goldfarb, Mosher и Lorie). В связи с доминирующим положением фирмы IBM на рынке, GML широко использовался и рассматривался в качестве хорошей основы для построения более стандартных языков описания документов. Первый рабочий вариант нового языка Standard Generalized Markup Language (SGML) был разработан в 1980 году и окончательно был утвержден стандартом ISO в SGML это метаязык, т.е. язык, который используется для описания структуры других языков. В связи с этим, SGML не является в действительности языком описания документов, а должен рассматриваться как независимая от платформы основа для построения используемых языков разметки, имеющих общую структуру. Все языки разметки, которые используются сейчас, по существу являются подмножествами языка SGML. SGML структурирован таким образом, что базовая грамматика всех SGML языком должна быть одной и той же, меняется только смысл конкретных тегов.

Описание типа документа ( Document Type Definition, DTD ) Важным в SGML являлось то, что он позволяет разрабатывать описания типов документов (Document Type Definition, DTD), которые используются для описания того, как разметка выражает содержание и структуру текстового документа. Когда специалисты создают новый язык с помощью SGML, то они разрабатывали DTD, который пояснял, что должен делать каждый тег. С их помощью, программа, которая поддерживает SGML, могла отличать любое новое подмножество языка SGML, если оно ссылается на правильное DTD. Более того, так как SGML правила являются очень общими и предназначенными для описания данных и структур, то становится не важно, для чего документ просматривается. SGML документ может описывать данные, которые будут выводиться на печать, показываться на экране дисплея, пересылаться между компьютерами и никогда не просматриваться человеком. Таким образом SGML может использоваться в самых разных областях. Недостатком таких больших возможностей является то, что SGML не предназначался для использования в персональных компьютерах. Он имеет очень большое описание (спецификацию), разрабатываемую в течении десятилетия, и имеет особенности не подходящие для большинства пользователей.

Появление идей гипертекста В 1945 году один из ведущих ученых США Vannevar Bush написал статью «Как мы можем думать»(«As we may think»). В этом небольшом документе он изложил его идеи о том, как может выглядеть будущая мировая система поиска информации, называемая «Memex». Bush предполагал, что такая система позволит человеку, удобно расположившемуся за своим рабочим столом, получить электронный доступ к мировым библиотекам и легко выполнять переходы от одного документа к другому документу. Bush был одним из ранних сторонников электронных компьютеров и понимал, что может быть возможным в будущем, но для обычного читателя этой статьи идея небольшой электронной системы поиска информации казалась полностью из области научной фантастики. Намного позже (в 60-х годах) идеи описанные в статье «As we may think» оказало влияние на новое поколение специалистов, в частности на Douglas Englebart и Ted Nelson, которые помогли создать компьютерные системы, используемые в настоящее время. Douglas Englebart разрабатывал системы поиска информации и среди прочего, он изобрел первую компьютерную мышь и оконную систему – графический интерфейс пользователей (GUI), которые он показал в 1968 году. Ted Nelson был ярым сторонником персональных вычислений и простого интерфейса пользователей. Он предложил термин «гипертекст» (hypertext)/ Гипертекстовая система это система в которой (как и в Memex) документы обширно связаны между собой и пользователь может легко выполнять переходы между ними.

Появление Web сети Для больших гипертекстовых систем компьютерам требовались возможности аналогичные тем, которые были разработаны Englebart, но такие технологии стали доступными для обычных пользователей только в середине 80-х годов. (Apple Macintosh, Arari ST, Amiga, а позже стандарт Microsoft/Intel/IBM). В 1989 году исследователь, работающий в Европейской исследовательской организации физики частиц CERN, Tim Berners-Lee создал первую гипертекстовую систему для выполнения переходов между документами. Первая система Enquire, которую разработал Tim Berners-Lee, скоро развилась до прототипа того, что сейчас называется World Wide Web. (WWW, Web сеть) Сеть WWW использовала подмножество языка SGML, которое назвали HTML (HyperText Murkup Language). Web сеть стала частью сети Internet, с которой наиболее знаком обычный пользователь. Электронные документы просматриваются с помощью программы браузер (browser – просмотрщик, проистыватель). И каждый документ имеет набор (коллекцию) гиперссылок, которые связывают его с другими документами, страницами. Расположение страниц описывается с помощью специального адреса – URL (Uniform Resource Locator).

Современные Web стандарты XHTML 1.0 и выше CSS Level 1 & CSS Level 2 DOM Level 1 & DOM Level 2 ECMAScript 262 (текущий JavaScript)

XHTML это будущее XHTML 1.0 Transitional XHTML 1.0 Strict XHTML 1.1 XHTML 2.0 (W3C Working Draft) No more development of HTML!

Что такое Интернет приложение? Программа, использующая в своей работе сеть Интернет – Обмен сообщениями – Получение обновлений Web приложение – программа запускаемая на сервере с использованием технологий WWW В данном курсе будет использоваться второе определение – Web приложение

Web приложения Web приложение или webapp это приложение, с которым можно работать с помощью web браузера по сети Internet или intranet. Это также компьютерная прикладная программа, пользовательский интерфейс (UI) которой кодируется на языках понятных браузерам (например, HTML, CSS, JavaScript и пр.) и которая доверяет обычному браузеру возможность работы с ней. Web приложения стали очень популярными по следующим причинам: – браузеры стали доступными во всех операционных системах; – браузеры удобно использовать в качестве клиентов (иногда называемых «тонкими»); – возможности обновлять и поддерживать web приложения без без обновления ПО у пользователя; – возможность поддерживать разные компьютерные платформы (Intel, Sun, Apple …); К распространенным web приложениям относятся: – Почта (gmail.com) – Розничная торговля (ozon.ru) – Аукционы, – Открытые энциклопедии (wiki). – …

Web приложение Первоначально Web приложение рассматривалось, как реализация цикла запрос/ответ (request/response): – клиент (браузер) отправляет запроса Web серверу с любыми данными на текущей странице; – наличие кода на сервере, который формирует новую страницу; – отправка новой страницы назад клиенту и (наконец) браузер отображает всю новую страницу пользователю; – далее цикл запрос – ответ повторяется. Современное понимание Web приложений: – клиент также отправляет запрос на новую страницу; – но после формирования новой страницы, получения ее браузером и отображения пользователю, все последующие взаимодействия между страницей и сервером выполняется с использованием JavaScript и Web Сервисом (по крайней мере, до тех пор, пока пользователь не перейдет к новой странице.

World Wide Web (WWW) WWW = URL + HTTP + HTML ПО WWW = Браузер + Сервер

Основные этапы развития Web сети 1989 – Тим Бернерс Ли предложил использовать гипертекст 1990 появилась первая программа для работы с гипертекстом WWW Consortium - организация по разработке и поддержке стандартов сети Интернет

Основа архитектуры Web Web Server PC/Mac/Unix/... + Browser Клиент Сервер Запрос (Request): Ответ (Response): …. Сеть HTTP, TCP/IP

Web клиент - браузер Веб-бозрева́тель или бра́узер (browser) это программное обеспечение для запроса вебстраниц, для их обработки, вывода и перехода от одной страницы к другой. Обычно поддерживает разные протоколы (HTTP, FTP) Отображение разных видов ресурсов – основной - HTML документ – графика – мультимедиа документы Обрабатывает скрипты (обычно JavaScript) Реализует пользовательский интерфейс – формы (Form)

Web – сервер (HTTP сервер ) 1.Компьютерная программа, отвечающая за принятие HTTP запросов от клиента (например, web browsers), и отправляющая им HTTP ответ некоторым набором данных, которые обычно являются HTML документами или связанными с ними объектами (images, и т.п.).HTTPweb browsersHTML В HTTP запросе содержится указание на ресурс 1.HTML страница 2.Текстовый файл (txt, doc, pdf) 3.Графический файл 4.Мультимедиа файл (звук, видео) 5.Выполняемый файл (exe или dll) 6.Файл со скриптами (asp, aspx, php, jsp, …) Действия сервера – Отправка файла (для 1-4), – Запуск на выполнение exe программы или dll модуля и отправка полученного результата клиенту – Передача на обработку файла со криптами программам обработки скриптов на сервере (server-side script engine) и отправка клиенту полученного результата

Действия web-сервера Когда web-сервер получает запрос, он определяет, что делать: – отправить клиенту запрашиваемый файл; – запустить на выполнение программу: CGI программу (обычно на языке С); ISAPI расширение (вызвать функции из dll библиотеки); вызвать ISAPI расширение, которое обрабатывает страницы со скриптом (ASP); вызвать ISAPI расширение, которое создает рабочий процесс ASP.NET и вызывает версию CLR для выполнения Web- приложений, для каждого приложения создается свой Application domen, запускается ApplicationHost, которое создает web-page объекты и инициирует вызов обработчиков событий (ASP.Net); ASP.MVC ???

Запрос статических файлов Клиент Сервер File.htm File.asp File.exe Get file.htm file.htm Сеть интернет Get file.gif File.gif File.mp3 file.gif file.mp3 Get file.mp3 Рабочий каталог сервера

Запрос исполняемых модулей (CGI технология) Клиент Сервер File.htm File.asp File.exe Выполнение file.htm Get file.exe file.htm Сеть интернет Рабочий каталог сервера

Запрос динамических страниц Клиент Сервер File.htm File.asp file.htm File.exe запуск на обработку Get file.asp file.htm Server-side scrip engine Server-side scrip engine Server-side scrip engine Сеть интернет Рабочий каталог сервера File.php

Протокол HTTP

HTTP протокол Протокол HyperText Transfer Protocol (HTTP) является прикладным протоколом взаимодействия клиента с сервером, который определяет стандартный формат для точного описания запроса на получение ресурсов в сети Web. Это базовым компонентом, на котором основывается Web сеть. Надстройка над TCP/IP протоколом. HTTP был разработан в начале 1990-х годов с целью создания распределенных гипермедиа систем, которые предоставляют доступ к взаимосвязанным мультимедиа документам, хранящимся на компьютерах-серверах. Взаимодействие между клиентами и серверами выполняется с использованием протокола TCP/IP. С помощью протокола HTTP пользователь, использующий клиентское приложения (например, браузер) может сделать запрос на получение ресурсов доступных на удаленном сервере (Web сервере). Обычно с помощью HTTP протокола запрашиваются и передаются HTML страницы, т.е. мультимедиа документы, включающие гипертекстовые ссылки на другие HTML документа. C помощью HTTP может быть выполнен запрос на получение файла любого формата, который хранится на Web сервере или вызов на выполнение (invocation) программы, которая может быть выполнена на стороне сервера.

HTTP протокол Протокол обмена сообщениями в web сети HTTP протокол не поддерживает состояние сеанса связи (последовательности запросов к серверу) (stateless). После того, как HTTP запрос обработан, web сервер разрывает связь с браузером Браузер и сервер не хранят состояние сеанса связи, они знают только о поступивших запросах или документах. При выполнении следующего запроса к серверу браузер не рассчитывает, что он сохранил какую-то информацию из предыдущих запросов.

Универсальный Определитель местоположения Ресурса (Uniform Resource Locator ) Так как такие ресурсы распределены по сети Internet, то требуется способ идентификации для того, чтобы определить местоположение ресурсов и получить доступ к ним. Идентификатор для ссылки на ресурсы является строкой, которая называется Uniform Resource Locator (URL, Универсальный Определитель местоположения Ресурса), который указывает: – используемый протокол для передачи данного ресурса (например, HTTP для обмена Web страницами или другие протоколы, такие, как FTP, которые поддерживаются браузерами); – наименование IP адреса компьютера, который хранит данный ресурс; – (может быть) номер порта, указывающий доступ к конкретному сетевому порту сервера; – название документа и его расположение в файловой системе Web сервера. Например, URL : обозначает файл с именем «index.html», который хранится в каталоге (директории) с именем «resources/» в файловой системе, которая управляется Web сервером установленным на host с именем «osu.cctpu.edu.ru». Кроме этого, за URL адресом могут следовать параметры (так называемая «строка запроса»), например, для того, чтобы передавать инструкции или просто данные, предоставленные пользователем с помощью форм (forms). Например: ? q=Иванов & p = 25

Структура URL

Как работает HTTP Когда пользователь набирает URL адрес в адресной строке или когда пользователь щелкает ссылку на Web странице, которая представляет URL некоторого ресурса, программа браузер передает HTTP запрос (request). В строке заголовка HTTP запроса указывается: (1) HTTP метод, (2) URL запрашиваемого ресурса и (3)используемая версия протокола. Наиболее важными методами протокола HTTP являются GET и POST. – метод GET передает Web серверу простой запрос на получение ресурса и позволяет пользователю передать простые входные данные, включая их в строку запроса (query string). – метод POST передает запрос, который позволяет пользователю передать сложные входные данные (например, длинный текст или файл) для их обработки на сервере. При использовании метода POST, данные пользователя упаковываются в виде приложения к запросу и составляют так называемое тело запроса (request body). После получения HTTP запроса сервер ищет ресурс и отправляет ответ клиенту. В HTTP ответе (response message) включается строка состояния, которая содержит информацию о версии протокола и числовой код результата обработки запроса (numeric status code) с поясняющим сообщением (например, HTTP/ Not found). В основной части сообщения (message body) записывается содержание запрашиваемого ресурса. Чтобы дать возможность обмениваться дополнительной информацией, к запросы и ответу могут быть добавлены дополнительные поля (называемые заголовками).

HTTP запрос заголовок тело стартовая строка Метод URI HTTP/Версия HTTP/Версия КодСостояния Пояснение Host: example.org Accept: */* User-Agent: Mozilla/4.0 (compatible; MSIE 5.0; Windows 98) Referer:

HTTP протокол

Пример HTTP запроса на получение страницы GET /hello.htm HTTP/1.1 Accept: */* Accept-Language: en-us Accept-Encoding: gzip, deflate If-Modified-Since: Wed, 24 Oct :12:36 GMT If-None-Match: "50b0d3ee955cc11:a78" User-Agent: Mozilla/4.0.(compatible; MSIE.6.0; Windows NT 5.1) Host: room214.osu.cctpu.edu.ru Connection: Keep-Alive [blank line]

Пример HTTP ответа сервера HTTP/ OK Server: Microsoft-IIS/5.0 Date: Wed, 24 Oct :12:37 GMT Content-Type: text/html Accept-Ranges: bytes Last-Modified: Wed, 24 Oct :00:53 GMT ETag: "d02acf81975cc11:a78" Content-Length: 46 [blank line] Hello, world

Язык HTML Язык гипертекстовой разметки(«HyperText Markup Language», HTML) используется для описания содержания (контента) Web страницы и ее визуального форматирования. Язык HTML является языком «разметки» ("markup"). HTML страница состоит из смеси текста и изображений (рисунков) (содержания, которое показывается браузером), а также специальных элементов, называемых тегами (tags), которые разделяют содержание на части, чтобы пояснить браузеру, как эти части должны показываться или определяют связи элементов содержания с другими Web страницами. Описание Web страницы обрабатывается специальным компонентом, встроенным в Web браузер (processor), который на входе получает размеченное содержание, анализирует теги страницы и формирует документ, который показывается на экране. HTML теги являются строками заключенными в угловые скобки. Большинство тегов используется парами, которые отмечают начало и конец части содержания страницы.

История языка HTML/XHTML Версии языка HTML – 1992 – HTML first defined – 1994 – HTML 2.0 – 1996 – HTML 3.2, compromise version – 1997 – HTML 4.0, separates content from presentation – HTML 4.1 Вместо дальнейшего развития языка HTML было решено создать новый язык xHTML (переопределение языка HTML на языке XML) – 1998 – XML standard for writing Web languages – 2000 – XHTML 1.0, XML совместимый с HTML – 2002 – XHTML 1.1

XHTML 1.0 Переходный (Transitional): предназначен для лёгкой миграции из HTML 3.2 и для тех, кто использует инлайн-фрэймы. XHTML 1.0 Строгий (Strict): полностью отделяет содержание документа от оформления (которое теперь задаётся только через CSS), многие атрибуты (такие как, например, bgcolor и align) более не поддерживаются, их поведение можно задавать только через таблицу стилей. XHTML 1.0 Фрэймовый (Frameset): используется, если необходимо разделить окно браузера на несколько фрэймов. XHTML 1.1 Модульный (Module-based): авторы могут импортировать дополнительные свойства в их разметку. XHTML Основной (Basic): специальная облегчённая версия XHTML для устройств, которые не могут использовать полный набор элементов XHTML в основном используется в миниатюрных устройствах, таких как мобильные телефоны. Подразумевается, что он заменит WML и C-HTML. XHTML мобильного профиля (Mobile Profile): основанный на XHTML Basic, добавляет специфические элементы для мобильных телефонов. XHTML 2.0. Пока в разработке. Синтаксис еще больше приближен к синтаксису XML. Также является модульным языком.

Зачем нужен xHTML вместо HTML It can make our page size smaller and our code clearer to read. Our code can be used with all XML-aware processors (from authoring tools and validators through to XSLT, DOM, and SAX processors). It addresses issues regarding creating web pages so that they can be viewed on all the new devices that can now access the Internet, from phones to fridges, without each type of device requiring its own different language. XHTML processors can require less memory and power (which is essential for smaller devices). Some new browsers and devices are being written to only support XHTML.

Различия между XHTML и HTML Все элементы должны быть закрыты. Теги, которые не имеют закрывающего тега (например, или ) должны иметь на конце / (например, ). Булевы атрибуты записываются в развёрнутой форме. Например, следует писать или. Имена тегов и атрибутов должны быть записаны строчными буквами (например, вместо ). XHTML гораздо строже относится к ошибкам в коде; < и & везде, даже в URL, должны замещаться &lt; и &amp; соответственно. По рекомендации W3C браузеры, встретив ошибку в XHTML, должны сообщить о ней и не обрабатывать документ. Для HTML браузеры старались понять, что хотел сказать автор. Кодировкой по умолчанию является UTF-8 (в отличие от HTML, где кодировкой по умолчанию является ISO ). Для XHTML страниц рекомендуется задавать MIME-тип application/xhtml+xml, но это не является обязательным, более того браузер Internet Explorer 8 и младшие версии, не смогут обрабатывать страницу, поэтому с XHTML 1.0 традиционно используется MIME-тип для HTML text/html.

Также стандарт рекомендует указание перед DTD, но это не обязательно, более того браузер Internet Explorer воспринимает такое указание (как и любой другой текст перед ), как признак того, что данную страницу необходимо отображать в режиме обратной совместимости, а не согласно стандарту. Существует три типа документов XHTML: – strict, – transitional и – frameset. Наиболее употребительной и универсальной из версий XHTML является переходная (англ. transitional), поскольку она позволяет использовать iframe (включение содержимого одной веб-страницы в другую) и атрибут target у ссылок (для указания того, например, что ссылке необходимо открываться в новом окне). Фреймовая версия (англ. frameset) представляет собой расширенный вариант transitional, добавляя к нему, как следует из названия, возможность установки frameset вместо body. DTD строгой версии XHTML (англ. strict) не содержит многих тегов и атрибутов, описанных в DTD transitional, и признанных устаревшими.

Достоинства и недостатки языков Достоинства – SGML является полным и мощным языком. – HTML является простым и общепризнанным языком (более 100 млн. пользователей). Недостатки – SGML – обладает сложностью, которая является избыточной для обычных приложений. – HTML недостает средств описания данных (расширяемости), которые требуются для обработки данных. В связи с этим W3C организовал работу по созданию стандарта языков разметки, который был бы удобен для работы в сети Internet. Разработка основывалась на упрощенной версии SGML. Начальные концепции языка появились в 1996, а в 1998 году был принят официальный стандарт XML 1.0. Сам XML описывает структуру данных (как и SGML), но имеются набор связанных с ним технологий, которые описывают, как документ должен выглядеть (XSL) и даже как он должен связываться (hyperlink) с другими XML документами.

Отображение XML документа в браузерах Opera Internet Explorer

Простой XHTML файл Моя домашняя страница Моя домашняя страница Добро пожаловать на мою домашнюю страницу!

Объявление DOCTYPE Указывает на то, какая конкретная версия языка HTML или XHTML использовалась на данной странице. Используется браузером для того, чтобы определить, как обрабатывать эту страницу. Три типа – Transitional - снисходительный – Strict – требует строгого следования стандартам – Frameset – используется, если страница имеет фреймы Всегда должна быть первой в файле

Структура HTML разметки состоит из В общем случае HTML разметка состоит из: 1.Открывающего тега (open tag), отмечающего начало элемента страницы; 2.Набора атрибутов, являющиеся парами «имя=значение», которые описывают желаемое поведение или значение дополнительных свойств. Например, в теге описываются атрибуты face (для задания типа шрифта) и size (для задания размера текста, содержащегося в теге). 3.Некоторого содержания (текста). Например, содержанием заголовка, может быть строка A simple HTML page. 4.Закрывающего (close tag), который имеет такое же имя, как и начальный тег, но перед ним стоит специальный символ "/". Этот тег является не обязательным для некоторых элементов. Например, существуют некоторые пустые элементы, которые не имеет внутреннего содержания и поэтому не требует конечного тега, но должен завершаться символами "/>". Например, тег используется для задания в атрибуте имени файла с изображением и не требует. Например: …..

Структура HTML документа Любой HTML документ заключен в тег и состоит из двух разделов (sections): – Заголовок (header), выделен тегом, включает общую информацию о документе, например, the document title (delimited by the tag), or the keywords used by search engines for document indexing (delimited by the tag). – Тело (body), выделено тегом, включает реальное содержание (content) и разметку, описывающую свойства его отображения.

Примеры элементов HTML –

Теги ссылок и изображений Кроме тегов, которые форматируют текст, наиболее часто используемыми являются – теги для описания ссылки на другой ресурс; – тег для включения изображения для создания гипертекстовых мультимедийных документов в Web:

Включение в HTML страницу ссылок на другие страницы Тег закладки определяет начальную точку (т.е., закладку, привязку, anchor) гипертекстовой ссылки (с содержанием, например «Перейти к новой странице - Click here"). Адрес URL нового ресурса, который является целью гипертекстовой ссылки, задается в атрибуте href. Томский политехнический университет Текст заданный в теге показывается браузером специальным способом (например, подчеркнутым или выделенный цветом); щелчок мышки над этим текстом вызывает формирование HTTP запроса (request) для получения указанного ресурса и его отображения.

Пример HTML документа Предположим, что следующий HTML файл расположен на Web сервере с именем hello.htm, и его URL адрес имеет имя room214.osu.cctpu.edu.ru/hello.htm: Hello, world

Включение в HTML страницу изображений Тег описывает вставку в документ изображения (рисунка), чей URL адрес задается с помощью атрибута src. Когда браузер показывает HTML страницу и встречает тег, то тогда он посылает дополнительный HTTP запрос Web серверу для получения файла, адрес которого задан в атрибуте src. После того, как изображение будет получено, браузер показывает его в HTML странице.

Пример HTML Русская народная сказка о козлике Жил были у бабуси серенький козлик. три веселых гуся. Кафедра ОСУ ТПУ.

Часто используемые теги Блоковые элементы: используются для описания структуры документа. Примерами таких тегов являются: Списочные элементы: поддерживают описание списков. Табличные элементы: поддерживают описание таблиц для многомерных данных, упорядоченных по строкам и столбцам. Элементы формы: используются для описания форм, с помощью которых можно выполнять сбор данных, вводимых пользователями или взаимодействие с Web страницей. Элемент обычно содержит некоторые вложенные элементы, которые описывают Элементы Управления (controls) формы. Например, такие, как: Стоит отметить, что для повышения возможностей HTML для создания сложных и интерактивных Web страниц, не рекомендуется использовать теги для задания свойств, описывающих графическое представление и форматирование (таких, как или ), которые были введены в начальных версиях языка HTML.

Блоковые элементы Блоковые элементы: используются для описания структуры документа. Примерами таких тегов являются: – Тег для выделения абзаца (параграфа) – Тег для выделения заголовков различных уровней (например, тег для выделения заголовка самого верхнего уровня). – Тег - контейнер для участка HTML документа. – Тег - - контейнер для участка текста. Примеры …

Тэг div Для позиционирования любого элемента HTML, необходимо использовать и тэги. Divide and Conquer Divide and Conquer This text is not inside a div. But this text is. And so is this text. But this text is not.

Списочные элементы Списочные элементы: поддерживают описание списков. – Тег для описания пронумерованного перечня элементов (ordered lists) – Тег для описания перечня с нецифровым выделением элементов (bulleted lists).

Списочные элементы Нумерованный: тег - ввод списка тег текст - пункты списка Пример: text Ненумерованный: тег - ввод списка тег текст - пункты списка Пример: text Copyright Baltazar and Mirron corp

Табличные элементы Табличные элементы: поддерживают описание таблиц для многомерных данных, упорядоченных по строкам и столбцам. – В разделе тега включается множество элементов для описания сложной структуры таблицы. – Элемент группирует строки таблицы. – Тег используется для описания конкретной строки; каждый тег содержит элементы и для описания заголовков ячеек данных и самих данных ячейки, соответственно. – Другие не обязательные элементы позволяют описывать название таблицы, а также начальные (header) и конечные (footer) строки ( и ).

Атрибуты тега table Тег : Width=число – ширина Height =число – длина Border=число – толщина границ Bordercolor=#цвет- цвет границ Bgcolor=#цвет – фон Cellspacing=число- расстояние между ячейками Align=значение- центровка Copyright Baltazar and Mirron corp

Атрибуты строк и ячеек таблицы Вставка строки – тег Вставка ячейки – тег : Width=число – ширина Height =число – длина Border=число – толщина границ Bordercolor=#цвет- цвет границ Bgcolor=#цвет – фон Colspan=число- кол-во столбцов, которое занимает ячейка. Copyright Baltazar and Mirron corp

Пример описания таблицы Пример таблицы на языке HTML Состав команды ФИО Должность Иванов А.П. программист Петров В.А. проектировщик

Пример text text text Copyright Baltazar and Mirron corp

Описание структуры страницы с помощью таблиц С помощью таблиц можно создать хорошую схему (планировку таблицы). Не обязательно рисовать саму таблицу (толщина линии может быть = 0). Но таблицы являются позволяет задавать взаимное расположение элементов страницы относительно друг друга (что находится слева, справа и снизу, сверху). Однако, таблицы имеют следующие недостатки: – Таблицы требуют добавления большого количества кода. – Таблицы трудно удалить или изменить. Цель таблиц: Таблицы не должны использоваться только как средство для задания структуры документа, так как это может создавать проблемы, когда выполняется представление страницы на не визуализирующих устройствах (non-visual media). Кроме того, при использовании таблиц совместно с графикой, они могут вынуждать пользователей выполнять горизонтальный скроллинг для просмотра таблиц спроектированных для дисплеев большего размера. Для минимизации этих проблем, авторы страниц должны вместо таблиц использовать CSS для управления структурой (планировкой) страницы.

Разметка на основе таблиц

Задание HTML таблицы Mой заголовок Товары на складе Mоя итоговая строка

Формы web страницы Используются для описания частей страницы в которой пользователь может просматривать имеющиеся, корректировать и вводить новые данные Т.е. с помощью форм выполняется сбор данных, вводимых пользователями для взаимодействия Web приложением. Элемент обычно включает набор элементов управления (controls) формы. Например, такие, как: – Элемент для ввода пользователем данных; – Элемент для задания возможности выбора из списка альтернатив, – Элемент для ввода многострочного текста, – Элемент для создания кнопок submit (передать на сервер), reset (очистить поля формы) или простой кнопки)

Формы HTML Для передачи данных полученных браузером от пользователя на web сервер используются HTML формы. На форме содержатся специальные элементы типа Summit при нажатии на которые выполняется вызов некоторой web страницы

Описание формы в HTML документе Все формы начинаются тэгом и завершаются тэгом. Элементы_формы_и_другие_элементы_HTML Основные Атрибуты – METHOD - метод посылки сообщения с данными из формы. В зависимости от используемого метода вы можете посылать результаты ввода данных в форму двумя путями: GET: Информация из формы добавляется в конец URL, который был указан в описании заголовка формы в виде URL?парам1=знач1&парам2=знач2?.... POST: Данный метод передает всю информацию о форме немедленно после обращения к указанному URL. – ACTION - описывает URL, который будет вызываться для обработки формы. Данный URL почти всегда указывает на CGI-программу или ASP страницу.

Формы в HTML документах При обработке (интерпретации) формы браузером, создается специальные элементы управления GUI, такие, как – поля ввода, – checkboxes, – radiobuttons, – выпадающие меню, – скроллируемые списки, – кнопки и т.д. Когда пользователь заполняет форму и нажимает кнопку типа (тег - специальный тип кнопки, который задается при описании документа), информация, введенная пользователем в форму, посылается HTTP-серверу для обработки и передаче другим программам, работающим под сервером.

Управляющие элементы Пользователи взаимодействуют с формами с помощью именованных управляющих элементов. Каждый управляющий элемент имеет начальное и текущее значение, оба они являются символьными строками. Типы управляющих элементов Передать (type=submit) Очистить (type=reset) Скрытый (type=hidden) Пароли (type=password) Списки (Select) Поля ввода (type=text) Кнопки (type=button) Переключатели (type=radio) Флаги (type=checkbox) Кнопки-картинки (type=image)

Формы в HTML

Выпадающие списки. Выпадающий список: текст

Пример формы +

Отправка данных формы на сервер Если атрибута Method нет или задано "method=get" GET /calc.html?op1=2&op2=2 HTTP/ Connection: Keep-Alive [blank line] если тэг включает атрибут "method=post" POST /calc.html HTTP/ Content-Type: application/x-www-form-urlencoded Content-Length: 11 [blank line] op1=2&op2=2

Пример HTML формы HTML to Nowhere Please enter your name: Press the button to receive all of your hopes and dreams:

Замечание по обработке HTML форм При нажатии кнопки «submit» данные формы передаются на сервер – по адресу указанному в атрибуте ACTION="URL"; если атрибута нет, то передаются той же странице, в которой записана форма. Необходимо создать способ сохранения и обработки данных передаваемых на сервер. ASP.NET как раз предлагает такой механизм.

Предупреждение Для повышения возможностей создания сложных и интерактивных Web страниц с помощью языка HTML, не рекомендуется использовать следующие теги, которые были введены в начальных версиях языка HTML. – теги для задания свойств, описывающих графическое представление (например, ); – теги для форматирование (например, ).

Каскадные таблицы стилей Cascading Style Sheets, CSS

Каскадные таблицы стилей (Cascading Style Sheets, CSS) Особенностью версии языка HTML 4 является разделение содержания (контента) и способа ее отображения (представления) с помощью использования Каскадных таблиц стилей (Cascading Style Sheets, CSS). CSS дают возможность дизайнерам описать то, как будет выглядеть страница в браузере пользователя (наглядность и восприятие) отдельно от разметки и содержания HTML страницы. Таблица стилей (style sheet) это набор правил, который сообщают браузеру, как выполнять отображение документа. Каждое такое правило состоит из двух частей: – селектора (selector), который указывает HTML тег, к которому данное правило должно применяться; – описателя стиля (style declaration), которое описывает свойства того стиля, который должны присоединяться к указанному в селекторе HTML тегу. Например, следующий фрагмент кода описывает цвет и размер шрифта для тега : CSS Example H1 { font-size: 20pt; color: red } Правила стилей могут использоваться двумя спсобами – Встраиваться в HTML документ, для которого они используются, с помощью тега – Записываться в отдельный файл (расширение *.css), ссылка на который включается в HTML документом, с которым он используется. Тег например, может записываться в разделе заголовка HTML документа, и задавать ссылку на таблицу стилей named style.css: CSS Example

Каскадные таблицы стилей (CSS, Cascading Style Sheets) позволили совершенно по новому взглянуть на проектирование и разработку Web страниц. С помощью CSS можно полностью разделить текст, содержащийся в Web странице (который создается с помощью HTML кода) и информации, которая описывает, как показывать этот текст в окне браузера (которая описывается с помощью CSS). CSS был разработан для управления представлением содержания web страниц и для сокращения времени, которое требуется для выполнения этой работы. При этом CSS дает разработчику больше возможностей для управления отображением (оформлением) страницы. Например: некоторые Web страницы выделяют ссылки специальным способом. Ссылки используют цвет, который отличает их от другого текста, но если вы помещаете курсор мыши над ними, то они меняют цвет и становятся подчеркнутыми. Это делается без участия HTML кода, а с помощью задания их стиля.

Уже в первых версиях язык HTML поддерживал разные отображения текста с помощью таких тегов, как FONT, B (bold) или I (italic). Эти теги имеются в HTML и сегодня, но их возможности значительно меньше, чем те которые должна иметь Web страницы. CSS позволяет разработчику отделить оформление и порядок расположения Web страницы от ее содержания. Это является важным, так как часто может требоваться менять содержание страницы (например, страница с описаниями новостей), но не менять их оформление (структуру), или наоборот, менять оформление (структуру) для одного и того же содержания (например, для отображения одного и того же содержания на разных устройствах). CSS является стандартом World Wide Web Consortium (W3C). Практически все оформление стиля и структуры (схемы) web сайта может быть сохранено в CSS файлах, которые хранятся отдельно от HTML файлов, которые содержат данные и текст web сайта. При показе страницы в баузере, HTML код отвечает на вопрос «Что показывать?", а CSS код отвечает на вопрос «Как показывать?". При использовании CSS, разработчик описывает как показывать каждый элемент страницы. Например, можно задать, что весь текст в DIV элементах должен показываться голубым цветом все ссылки должны показываться курсивом (italic) и жирным шрифтом (bold), и т.п. С помощью CSS можно описать классы, которые сообщают браузеру, как отображать все элементы данного класса.

Например body { font-family: Verdana; font-size: 9pt; text-align: right; } div { font-family: Georgia; }.important { background-color: #ffffde; border: thin black ridge; font-family: Franklin Gothic Book; }... Body text goes here. Lorem ipsum dolor sit amet. Div text goes here. This text is written in a different font. Body text continued. This is very important! Body text continued. Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Каскадные таблицы стилей (Cascading Style Sheets) Первый шаг к созданию согласованного, единообразного web приложения заключается в создании согласованного визуального представления web страниц (шрифты, форма кнопок, и т.п.). Основным инструментом согласования деталей оформления страниц являются CSS (каскадные таблицы стилей). Каскадные таблицы стилей (Cascading Style Sheets, CSS) это средство хранения и упорядочения сведений о форматировании HTML-элементов, составляющих Web- формы. Благодаря централизованному хранению этих сведений использование таблиц стилей облегчает изменение облика Web-приложений.

в Web-приложениях форматирование применяется на трех уровнях. УровеньГде определяетсяНа что действует Глобальный (global) В файле таблицы стилей Все страницы, ссылающиеся на эту таблицу стилей Страничный (page)В страничном элементе head Все элементы текущей страницы Локальный (inline)Внутри HTML-элементаТолько текущий элемент Иерархия этих уровней напоминает иерархию уровней области видимости. Формат, определенный внутри элемента (локально), имеет приоритет перед форматом, заданным на уровне страницы, а тот перед форматом, определенным глобально (в таблице стилей). Эти правила и дали имя таблицам стилей, которые называются каскадными.

Правила описания стиля 1. Каждое CSS определение (правило) должно иметь definition has to have a имя (selector) и объявление (declaration). Объявление (declaration) записывается в фигурных скобках после имени (селектора, selector). 2. Объявление состоит из одного или нескольких свойств (property), разделенных точкой с запятой. 3. Каждое свойство (property) состоит из имени, двоеточия и значения. 4. Свойство (property) может иметь много значений, разделенных запятой (например, "Verdana, Arial, Franklin Gothic Book"). 5. Вместе со значение может быть задана единица изменения (например, "9pt", где "pt" стоит вместо points). Не допускается помещать пробелы между значением (value) и единицей измерения (например, записывать 9 pt). 6. При записи CSS кода можно использовать пробелы и переходы на новые строки так, чтобы код был более читабельным.

Правила таблицы стилей Таблица стилей состоит из правил (rules). Каждое правило определяет, как будет форматироваться один элемент web приложения. Например, для задания формата заголовка нужно начать определять правила с именем heading1. Каждое правило имеет две части. Часть до точки указывает HTML элемент, к которому это правило применяется. В этом примере ничего не задано перед точкой, что означает, что это правило может применяться к любому тэгу. Часть после точки это уникальное имя (имя CSS класса), которое задается для идентификации правила (не чувствительно к регистру). В правиле можно задать подходящую информацию по форматированию. Например, для задания large, bold текста с зеленым foreground цветом. Выбран шрифт Verdana (если доступен), Arial (если нет) или sans-serif (если ни Verdana ни Arial не установлены). Можно задать правила, которые применяются к HTML тэгам автоматически. Например, для описания всех заголовков второго уровня ( тэгов) на странице, которая использует данный stylesheet создаем правило:.heading1 { }.heading1 { font-weight: bold; font-size: large; color: lime; font-family: Verdana, Arial, Sans-Serif; } h2 {... }

Формирование стилей Обычная таблица стилей (stylesheet) описывает множество правил. Фактически таблица стилей часто используются для формального описания формата всех элементов интерфейса пользователя web приложения Например, следующий stylesheet описывает пять правил. Первое правило описывает элемент. Другие правила являются CSS классами и их нужно явно применить к тому элементу, с которым они будут использоваться..heading2 { font-weight: bold; font-size: medium; font-style: italic; color: #C0BA72; }.blockText { padding: 10px; background-color: #FFFFD9; border-style: solid; border-width: thin; } body { font-family: Verdana,Arial, Sans-Serif; font-size: small; }.heading1 { font-weight: bold; font-size: large; color: lime; }

Применение правил стилей Для использования правила на web странице нужно связать страницу с нужной таблицей с помощью элемента в разделе Например: Статический HTML элемент можно связать с правилом с помощью атрибута class. Например: This paragraph uses the blockText style.

Пример использования стилей WebForm Р { font-family: 'Comic Sans MS', Lucida Sans, sans-serif; font-size: medium: } The alignment is from the style sheet. The font is from the style in the page's head element, The italic is from the inline style.

Описание CSS не обязательно помещать в отдельный файл. Стили CSS можно вставить и в HTML страницу. В этом случае, все определения должны помещаться в элемент STYLE. Такой подход может использоваться для описания внешнего вида элементов, которые являются специфичными для некоторой страницы и не будут использоваться в других страницах. My title body { font-family: Verdana; font-size: 9pt; text-align: right; } div { font-family: Georgia; }.important { background-color: #ffffde; border: thin black ridge; font-family: Franklin Gothic Book; } My content

Третий способ описания CSS стиля заключается в задании атрибута style в HTML элементе. Например: My text

Использование контейнера Для позиционирования любого элемента HTML, необходимо использовать и тэги. Divide and Conquer Divide and Conquer This text is not inside a div. But this text is. And so is this text. But this text is not.

Позиционирование контейнера div Содержание тэга div можно позиционировать, используя атрибут style. Если дописать в тэге div этот атрибут

Скрытие Слои

Пример Например: для создания CSS объявления, которое будет помещать фиксированное и не повторяемое фоновое изображение в правую верхнюю часть страницы, нужно создать следующее объявление body { background-image: url(logo.gif); background-color: white; background-attachment: fixed; background-position: right top; background-repeat: no-repeat; } you can use a simple background property and put all those values in it. Look at the previous example written only using the background property. body { background: white url(logo.gif) no-repeat fixed right top; } This will save you from writing large blocks of code and will make your CSS much more readable. Although we've explained backgrounds using the BODY element, the logic is completely the same for any other element, whether it is a DIV, a TABLE or any other type of element.

Форматирование web страницы с использованием CSS для элементов Профессиональные web-разработчики предпочитают использовать более современные методы структурирования шаблона на основе CSS. Структура, основанная на CSS позволяет писать код разметки, который легче читать и легче изменять, что облегчает последующее сопровождение web приложения. Для структурирования шаблона с помощью CSS нужно поместить элементs web страницы в разные элементы с атрибутом задающим их id. Затем применить к каждому таблицу стилей с заданными атрибутами position, left, right, top и bottom.

Позиционирование: – гибкое «потоковое» позиционирование и – абсолютное позиционирование Задаются в атрибуте элемента style элемента страницы:... контейнер для других элементов HTML страницы. Фактически это плавающая прямоугольная часть экрана....

Использование CSS позиционирования Например, для разделения страницы на три колонки, из которых две крайние имеют фиксированный размер, а средняя колонка занимает оставшееся место. Для это можно использовать простую таблицу стилей, которая описывает две 150- пиксельные панели и одну панель переменного размера. Пример использования CSS leftPanel { position: absolute; top: 70px; left: 10px; width: 150px; }.rightPanel { position: absolute; top: 70px; right: 10px; width: 150px; }.centerPanel { margin-left: 151px; margin-right: 151px; padding-left: 12px; padding-right: 12px; } Таблица стилей:

Форматирование web-страниц с использованием таблиц и CSS Для задания структуры полей в странице шаблона используются – HTML таблицы – CSS позиционирование Использование HTML таблицы – С помощью HTML таблицы вся площадь страницы делится на колонки и строки. – Затем можно добавить отображаемые элементы в некоторую ячейку. Использования CSS позиционирования – Содержание страницы делиться с помощью тэгов на части. – С помощью CSS задается положение этих тэгов с применением абсолютных координат или прикрепляя их к одной из сторон страницы. – В тэги помещается содержание.

Разметка на основе таблиц

New Structures

Другой метод описания схемы страницы Теги DIV могут быть альтернативой тегам Разделы DIV являются контейнерами, аналогичными ячейкам таблицы С помощью CSS можно позиционировать (задать взаимное расположение) разделов DIV Например, раздел: xxx Можно описать с помощью следующего правила CSS: #article { width:250px; padding:5px; float:right; }

Описание страницы с помощью элементов DIV Нужно использовать теги для создания структуры своей страницы. – В этих XHTML разделах не должно быть информации о специфическом форматировании (цвет, размер, положение). – Цель: отделить информацию страницы от способа ее отображения (расположение, оформление). – Расположение частей информации должен полностью контролироваться с помощью CSS. Нужно выявить основные разделы страницы: – Главный заголовок (Masthead: Logo и Title) – Меню (Menu) – Содержание (Content) – Поиск (Search) – Нижняя часть – подвал (Footer). Не нужно излишне детально разделять содержание с помощью тегов. Не следует беспокоиться о позиционировании разделов XHTML!

Заключение по CSS Использование таблиц стилей позволяет решить две задачи – Во первых, быстро стандартизировать стиль элементов страниц, уменьшив количество ошибок и пропуск задания стилей. – Во-вторых, выделить информацию о форматировании, так чтобы ее совсем не было на web страницах, что позволяет изменять ее без изменения каждой страницы и перекомпиляции кода.

Скриптовые языки

Скриптовый язык (scripting language, язык сценариев) это язык программирования, который не преобразуется в машинные инструкции, а сразу выполняется специальной программой – интерпритатор; – script engine. Программный код записанный на скриптовом языке называется скриптом (сценарием). Существуют разные скриптовые языки: – JavaScript – VBScript – Shell script – Perl – Python – Ruby

Скрипты в web-приложениях В web-приложениях скрипты могут выполняться и на компьютере клиента (браузером) и на компьютере сервере (server-side scrip engine).

Скрипты браузера Скрипт браузера это выполняемая на стороне клиента программа, которая загружается вместе с документом HTML; В состав программы – браузер входит компонент выполнения скриптов – scrip engine. C помощью данного компонента скрипт выполняется на клиентской машине при загрузке документа или в другое время, когда возникнут некоторые события, например, если активируется гиперссылка. Скрипты позволяют расширить возможности документов HTML Скрипты могу запускаться событиями, происходящими в документе: – загрузка документа, – выгрузка, – передача фокуса элементу управления, – движение мыши и т.д. Скрипты могут быть связаны с ЭУ (напр., кнопками) для создания графического интерфейса пользователя. Скрипты языком HTML могут быть записаны на разных языках: – JavaScript – VBScript

Выполняемый браузером код (script) (VBScript) function aaa() { … }

Язык JavaScript синтаксис языка; объектные модели (BOM и DOM); события и обработчики событий.

Пример скрипта браузера function MySum() { //получаем объект frm = document.myForm; a = parseInt(frm.op1.value); b = parseInt(frm.op2.value); frm.sum.value = (a + b); } +

Динамический HTML Скриптовые языки на стороне клиентов позволили создать динамический HTML язык. Скриптовые языки представляют собой активную часть динамического HTML, в то время, как сам язык разметки HTML является статической частью, которые являются субъектом для динамической модификации с помощью скриптовой логики. Изменения или доступ к HTML документу выполняются с помощью Объектной Модели Документов (Document Object Model, DOM). DOM это объектная модель, независимая от платформы и языка, для представления HTML или XML документов. Модель DOM является интерфейсом, который предоставляет методы и свойства, с помощью которых скрипты могут получить динамический доступ и обновлять содержание, структуру и стиль документов. Точнее говоря, DOM предоставляет стандартный набор объектов для представления HTML и XML документов, стандартную модель того, как эти объекты могут объединяться и стандартный интерфейс для получения доступа к ним и манипулирования ими. Web браузеру не требуется DOM для отображения (показа) HTML документа. Однако, DOM требуется скриптам для динамической проверки или изменения Web страницы. Другими словами, модель DOM является способом для скриптов видеть состояние страницы, в которой они содержатся, и сотояние браузера. Объединение скриптов на стороне клиента, языка HTML и модели DOM предоставляет мощное решение для реализации динамического поведения (например, интерактивных возможностей и возможностей быстро реагировать на действия пользователей) браузера.

Dynamic HTML (DHTML) DHTML – термин, который используется для описания: – языки HTML и CSS – Cкрипты – DOM – объектная модель документа которые позволяют изменять документ Dynamic HTML основывается на объектной модели документа (которую должен создавать браузер) Объектная модель документа – множество объектов, которые создает браузер при получении HTML документа, с которыми можно работать в скриптах.

Объектная модель DHTML The DHTML Document Object Model (DOM) window historydocumentlocationscreen alllocationchildrenselectionformsbodylinks textbuttonradiotextareaselect password file checkboxsubmit reset option navigatorframesevent

Пример скрипта, включенного в раздел head HTML страницы На данном рисунке показана страница в которой функция JavaScript открывает окно предупреждения (alert box) показывающее сообщение "HELLO WORLD", когда пользователь щелкает по кнопке "Display message". HTML код страницы описывает кнопку (button) в блоке. С событием кнопки onClick связан вызов функции hello_message(); в результате этого при нажатии кнопки инициируется событие onClick, которое в свою очередь вызывает JavaScript функцию hello_message, описанную в теге, который помещен в разделе заголовка (head section) данного документа. Данная функция показывает окно предупреждения.

Пример формы +

Использование формы и обработки события function MySum() { //получаем объект frm = document.myForm; a = parseInt(frm.op1.value); b = parseInt(frm.op2.value); frm.sum.value = (a + b); } +

JavaScript Event Example function ShowMsg() { document.getElementById('targetDiv').innerHTML = "Hello, JavaScript!"; } Click this page to write message!

Пример содержания HTML страницы Shady Grove Aeolian Over the River, Charlie Dorian

В DOM таблица представляется следующим образом

In the DOM, documents have a logical structure which is very much like a tree; to be more precise, it is like a "forest, which can contain more than one tree. However, the DOM does not specify that documents must be implemented as a tree, nor does it specify how the relationships among objects be implemented. The DOM is a logical model that may be implemented in any convenient manner. In this specification, we use the term structure model to describe the tree-like representation of a document; we specifically avoid terms like "tree" or "grove" in order to avoid implying a particular implementation. One important property of DOM structure models is structural isomorphism: if any two Document Object Model implementations are used to create a representation of the same document, they will create the same structure model, with precisely the same objects and relationships. The name "Document Object Model" was chosen because it is an "object model" in the traditional object oriented design sense: documents are modeled using objects, and the model encompasses not only the structure of a document, but also the behavior of a document and the objects of which it is composed. In other words, the nodes in the above diagram do not represent a data structure, they represent objects, which have functions and identity. As an object model, the DOM identifies: – the interfaces and objects used to represent and manipulate a document – the semantics of these interfaces and objects - including both behavior and attributes – the relationships and collaborations among these interfaces and objects

Dynamic HTML (DHTML) Страница переданная от сервера браузеру вначале анализируется и создается ее объектная модель. В это модели каждому элементу HTML страницы в соответствие ставится объект некоторого класса. Объектами верхнего уровня являются: – window – объект высшего уровня в DHTML. Содержит ссылки на другие объекты. – window.document или просто document – объект соответствующий HTML странице. – location – объект соответствующий URL страницы. – screen – объект, содержащий информацию об экране. – … К этим объектам есть доступ в программном коде страницы – скрипте. Для описания обработки с помощью объектов DHTML может быть создан «скрипт», который встраивается в HTML страницу с помощью тэгов. Для составления скриптов можно использовать такие языки, как: – JavaScript (ECMAScript, JScript) для широкого использования – VBScript (поддерживается в Internet Explorer).

Доступ к элементам страницы с помощью DOM Получение ссылки на элемент документа с помощью значения атрибута id: var s = document.getElementById() Получение ссылки на элемент документа с помощью имени тега: document.getElementsByTagName() Получение ссылки на элемент документа с помощью имени их класса: getElementsByClassName()

Сценарий, содержащиеся в элементе Script, могут выполняться – в ходе анализа страницы; – в результате событий. Скрипт может содержать код для обработки возникающих в браузере событий. События – это уведомления, которые возникают, когда пользователь взаимодействует со страницей или когда изменяется состояние документа, например, когда документ загружается или пользователь сделал щелчок над элементом управления. При работе пользователя с браузером инициируется множество событий. Элементы HTML документа становится объектами, которые могут имеет события (например, onClick ). При описании этих элементов можно указать, какие функции скрипта будут вызываться на выполнение. Например: onClick =

Объект document Объект document создается браузером для каждой новой, просматриваемой HTML страницы (документа). В результате этого с помощью JavaScript предоставляется доступ к множеству свойств и методов, которые могут изменять документ различными способами. Document Object Model (DOM) позволяет скрипту на языке JavaScript (и на других языках) получить доступ к структуре документа в браузере. Каждый документ состоит из взаимосвязанных вершин (structured nodes) (например, тег body, представляется в виде вершины, а все элементы в элементе body будут представлены дочерними вершинами элемента body). При наличии такой структуры, скриптовый язык может получить доступ к элементам данного документа разными способами, что позволяет выполнять изменение этих элементов в документе.

Пример объектной модели документа My Page body h1 (дочерняя вершина body) img (дочерняя вершина body) My page (дочерняя вершина h1) src="myiage.jpg" alt="My Picture" (атрибутные вершины img)

The Properties of the Document Object activeElement - Returns a string holding the value of the active element in the document alinkColor - Returns the hexadecimal value of the active link color of the document anchors - An array of all the named anchors in the document async - Used to tell the browser whether to load a document with an asynchronous request or a synchronous request applets - An array of all the Java applets in a document bgColor - Returns the hexadecimal value of the background color of the document body - Returns the body or frameset element of the document characterSet - Returns a string value that represents the character set used to encode the document charset - Returns a string value that represents the character set used to encode the document childNodes - An array of all of the child nodes of the document compatMode - Returns the string BackCompat if the document is rendered in Quirks mode or the string CSS1Compat if the document is rendered in Strict mode contentType - Returns a string for the Content-Type from the MIME header of the document cookie - Used to set JavaScript cookies in a document defaultCharset - Returns a string value that represents the default character set used to encode the document defaultView - References the window object for the document designMode Returns a string value that provides information on whether or not the document can be edited dir - Returns a string value that represents the reading direction of the document doctype - Returns the doctype declaration associated with the document documentElement - Returns a string representing the root node of the document documentURIObject - Returns an object representing the URI of the document (only available to privileged JavaScript code) domain - Returns the domain name of the server for the document embeds - An array of all the embed tags in the document expando - Returns a Boolean value based on whether or not arbitrary variables can be created within the document fgColor - Returns the hexadecimal value of the default text color of the document fileCreatedDate - Returns the date the document was created

fileModifiedDate Returns the date the document was last modified formName Not a property itself, but creates a new property with each named form placed in the document forms An array of all the form tags in a document frames An array of all of the frames used in the document height Returns the height, in pixels, of the body element of the document images An array of all the image (img) tags in the document implementation Returns a string value representing the implementation object of the document inputEncoding Returns a string representing the documents encoding lastModified Returns the date of the last modification of the document layers An array of all the layer tags on the page (Netscape Navigator 4 only) all - Allows access to all the objects on a page linkColor Returns the hexadecimal value of the default link color for the document links An array of all the link ( ) tags in the document location Returns the URI of the document namespaces An array of all the namespaces in the document

parentWindow - Returns a reference to the parent window (the parent windows document object) plugins An array of all the plugins used in the document protocol Returns the protocol portion of the Web address (URL) of the document readyState Returns a string value that represents the current state of the document referrer Returns the URL of the document that referred the viewer to the current document scripts An array of all the script tags used in the document styleSheets An array of all the style sheets used in the document tags Sets the style of an HTML tag in the document title Returns the text used inside the title tags of the document uniqueID Returns a string value that represents a unique ID given to the document URL Returns the URL of the current document URLUnencoded Returns the URL of the document without any encoding vlinkColor Returns the hexadecimal value of the visited link color for the document width - Returns the width, in pixels, of the body element of the document

Методы объекта document attachEvent() Attaches a function to an event, so that the function runs when the event occurs (Internet Explorer only) createAttribute() Creates an attribute with a name that is sent to it as a parameter createAttributeNS() Creates a new attribute in a particular namespace createCDATASection() Creates a new CDATA section createComment() Creates a comment with the value that is sent to it as a parameter createDocumentFragment() Creates a new document fragment createElement() Creates an element of the type sent to it as a parameter createElementNS() Creates an element in a particular URI and a particular type sent to it as parameters createEntityReference() Creates a new entity reference createEvent() Creates an event createEventObject() Creates an event object for the purpose of passing event information createNodeIterator() Creates a node iterator object createNSResolver() Creates a namespace resolver createProcessingInstruction() Creates a processing instruction

createRange() Creates a range object createStyleSheet() Creates a style sheet for the document to use (Internet Explorer only) createTextNode() Creates a text string from the value sent to it as a parameter createTreeWalker() Creates a treewalker object detachEvent() Detaches a function from an event (Internet Explorer only) elementFromPoint() Returns the element object that appears at the location that is sent to it in two parameter values (pixels from left and pixels from top) evaluate() Returns a result based on the parameters sent to it execCommand() Executes a command on the document when the document is in design mode getElementById() Returns a reference to the object with the ID attribute that is sent to it as a parameter getElementsByClassName() Returns references to the elements with the class name that is sent to it as a parameter getElementsByName() Returns references to the objects with the name attribute that is sent to it as a parameter getElementsByTagName() Returns references to the elements with the tag name that is sent to it as a parameter getElementsByTagNameNS() Returns references to the elements with the tag name and namespace sent to it as parameters getSelection() Returns the value of a string of selected text in the document hasFocus() Returns a Boolean value based on whether or not the document has focus load() Loads an XML document mergeAttributes() Copies attributes from an object

open() Opens a new document that allows you to write its contents using write() or writeln() statements close() Closes a new document that has been opened with the open() method queryCommandEnabled() Returns a Boolean value based on whether or not a command sent to it as a parameter can be executed queryCommandIndeterm() Returns a Boolean value based on whether or not a command sent to it as a parameter is in the indeterminate state queryCommandState() Returns a Boolean value based on whether or not a command sent to it as a parameter has executed queryCommandSupported() Returns a Boolean value based on whether or not a command sent to it as a parameter is supported queryCommandValue() Returns the current value of the document for the command that is sent to it as a parameter recalc() Recalculates the dynamic properties in the document releaseCapture() Releases the mouse capture from the document setActive() Sets an object as active, but does not give it focus write() Allows you to write a string of text into an HTML document writeln() Allows you to write a string of text into an HTML document, but ends the line with a JavaScript newline character

Свойство innerHTML The innerHTML DOM node property allows you to change the HTML code that is inside of a given element. For instance, you could start out with the following HTML code: What is 2+2? Get the answer This code sets up a div element node with an id of div1, another div element node with an id of div2, and the link with an id of answer_link. Now, if you want to change the HTML code in the div1 element so that it displays the answer for the viewer when the link is clicked, you can use the click event on the link to start the script in motion and then change the innerHTML property on the div1 element node to change the contents of that element from the question to the answer: var d1 = document.getElementById("div1"); var a_link = document.getElementById("answer_link"); answer_link.onclick = function() { d1.innerHTML = "That is easy, the answer is 4 !"; return false; }; Recall that in order to keep this link from being followed when clicked, you add the return false statement after performing the desired actions. When run, this script changes the content inside the div1 element on the page, so that the HTML code would now be the following (though it will not be seen using the browsers View Source command): That is easy, the answer is 4 ! Get the answer As you can see, this can be a handy way to make dynamic changes to the content of a Web page.