Презентации по курсу лекций

Технологии разработки
пользовательских
интерфейсов
Вичугов Владимир Николаевич
доцент каф. АиКС ИК ТПУ
Томск 2013
Платформа Mozilla Application Framework
- набор программных компонентов для разработки кроссплатформенных
приложений.
Разработан организацией Mozilla Foundation, распространяется под
лицензиями GNU GPL и Mozilla Public License.
Состав:
- браузерный движок Gecko (XHTML 1.1, HTML 4.0, HTML 5 (частично), CSS 2.1,
CSS 3 (частично), XML 1.0, JavaScript 1.8, DOM 1/2, DOM 3 (частично), Unicode,
SVG, MathML, RDF, HTTP, FTP, SSL)
- поддержка языка XUL (XML User Interface Language) - языка разметки для
создания динамических пользовательских интерфейсов на основе XML
- кросплатформенная объектная модель компонентов XPCOM (Cross
Platform Component Object Model)
- сетевая технология добавления к ПО новых компонентов (XPI-пакетов)
XPInstall
Платформа Mozilla Application Framework
Последняя реализация платформы:
XULRunner
Предыдущие реализации платформы:
Gecko Runtime Environment
Mozilla Suite
Примеры приложений:
Firefox
Thunderbird
Sunbird
Komodo Edit
Платформа Mozilla Application Framework
Firefox и Sunbird построены на базе платформы XULRunner
Платформа Mozilla. Структура файлов
Платформа Mozilla. Структура файлов
Платформа Mozilla. Структура файлов
Режим доступа chrome:
- повышенные привилегии;
- “прозрачная” локализация и работа
с темами.
chrome://приложение/раздел/файл
приложение – из файла *.manifest
раздел – content (пользовательский
интерфейс и скрипты), skin (тема) или
locale (локализация).
Платформа Mozilla. Режим доступа chrome
Примеры URL адресов с режимом доступа chrome:
chrome://xulapp/content/messenger.xul
chrome://xulapp/content/scripts/attach.js
chrome://xulapp/skin/icons/folder-inbox.gif
chrome://xulapp/locale/messenger.dtd
короткие URL:
chrome://xulapp/content/
= chrome://xulapp/content/xulapp.xul
chrome://xulapp/skin/
= chrome://xulapp/skin/xulapp.css
chrome://xulapp/locale/
= chrome://xulapp/locale/xulapp.dtd
Платформа Mozilla. Структура файлов
Файлы manifest описывают расположение
разделов XUL-приложений на диске
Формат:
раздел приложение [параметры] путь
параметры:
для раздела локализации – название локали (ru
или en-US),
для раздела темы – название и версия темы
(например, classic/1.0)
Платформа Mozilla. Файл manifest
Примеры содержимого файла manifest:
content xulapp content/
или
content xulapp file://c:/xulapp/chrome/content/
skin global classic/1.0 jar:classic.jar!/skin/classic/global/
skin mozapps classic/1.0 jar:classic.jar!/skin/classic/aero/mozapps/
content cookie jar:comm.jar!/content/cookie/
locale alerts en-US jar:en-US.jar!/locale/en-US/alerts/
Файл jar = архив zip
Платформа Mozilla. Структура файлов
Файл crome.manifest в корневой папке
приложения используется в версиях
Gecko >= 2.0
В более ранних версиях Gecko
считываются файлы *.manifest из
директории chrome
Платформа Mozilla. Структура файлов
Платформа Mozilla. Запуск XUL-приложения
start.bat:
c:\xulrunner\xulrunner.exe c:\xulapp\application.ini
start2.bat:
"c:\program files\mozilla firefox\firefox" -app c:\xulapp\application.ini
start.sh
/usr/lib/firefox-3.6.13/firefox -app /tmp/xulapp/application.ini
Платформа Mozilla. Элементы управления.
Атрибуты элементов управления
Общие атрибуты:
id - уникальное имя элемента управления
class - название класса элемента
width - ширина (в точках)
minwidth - минимальная ширина (CSS: min-width)
maxwidth - максимальная ширина (CSS: max-width)
height - высота (в точках)
minheight - минимальная высота (CSS: min-height)
maxheight - максимальная высота (CSS: max-height)
style - стиль элемента
disabled – недоступность элемента
Платформа Mozilla. Элементы управления.
Использование таблиц стилей
Платформа Mozilla. Элементы управления.
Использование таблиц стилей
Платформа Mozilla. Модель коробки (Box Model)
Контейнер - элемент управления, который может содержать другие
элементы управления.
Самый простой вариант контейнера: коробка box.
Основной атрибут: orient, значения: horizontal (по умолчанию) или
vertical
Платформа Mozilla. Модель коробки (Box Model)
<box> = <box orient=“horizontal”> = <hbox>
<box orient=“vertical”> = <vbox>
Атрибут pack (упаковать) – выравнивание в контейнере по основному
направлению
Значения: start – сдвинуть в начало контейнера, end – сдвинуть в конец
контейнера, center – элементы расположены по центру
<hbox pack="start">
<hbox pack="end">
<hbox pack="center">
Платформа Mozilla. Модель коробки (Box Model)
<vbox pack="center">
<vbox pack="start">
<vbox pack="end">
Платформа Mozilla. Модель коробки (Box Model)
Атрибут align (выровнять) – выравнивание в контейнере по
вспомогательному направлению
Значения: start – сдвинуть в начало контейнера, end – сдвинуть в конец
контейнера, center – элементы расположены по центру, baseline –
выровнять по линии текста, stretch (значение по умолчанию) – растянуть
элементы
<hbox align="start">
<hbox align="end">
<hbox align="center">
<hbox align=“stretch">
Платформа Mozilla. Модель коробки (Box Model)
<hbox align="start">
<hbox align="end">
<hbox align="center">
<hbox align=“stretch">
Платформа Mozilla. Модель коробки (Box Model)
Платформа Mozilla. Модель коробки (Box Model)
Платформа Mozilla. Модель коробки (Box Model)
Атрибут flex (flexible - гибкий) определяет насколько элемент будет
растягиваться. Значение – целое число.
Платформа Mozilla. Элементы управления
Кнопка button
Вместо image="img/ok.png" можно
использовать CSS-свойство list-style-image:
style="list-styleimage:url('img/ok.png')"
Атрибуты:
label – текст на кнопке
image – URL картинки (можно задать CSS-свойством list-style-image)
orient=horizontal|vertical – положение картинки относительно текста
dir=normal|reverse – положение картинки относительно текста
disabled=false|true
accesskey – клавиша быстрого доступа
Платформа Mozilla. Элементы управления
Кнопка button
Платформа Mozilla. Элементы управления
Картинка (image)
Атрибуты:
src – URL адрес картинки
validate=always|never – способ работы с кэшем: always – не кэшировать
изображение; never - кэшировать
Платформа Mozilla. Элементы управления
Текстовое поле (textbox)
Атрибуты:
value – текст в поле
multiline=false|true – многострочное или однострочное
type=text|password|number – содержимое (текст, пароль, число)
maxlength – максимальная длина текста
rows, cols – для многострочного поля
min, max, increment, decimalplaces – для числового поля
Платформа Mozilla. Элементы управления
Группировка элементов (groupbox)
Платформа Mozilla. Элементы управления
Независимый переключатель (checkbox)
Атрибуты:
checked=false|true – элемент выделен
label – надпись
accesskey – клавиша быстрого доступа
Платформа Mozilla. Элементы управления
Зависимый переключатель (radio)
Атрибуты:
selected=false|true – элемент выделен
label – надпись
accesskey – клавиша быстрого доступа
Платформа Mozilla. Элементы управления
Элемент управления scale (ползунок)
Атрибуты:
min, max – минимальное и максимальное значение
value – текущее значение
increment – шаг изменения величины
orient=horizontal|vertical – расположение элемента
movetoclick=false|true – передвинуть ползунок к месту нажатия
Платформа Mozilla. Элементы управления
Индикатор выполнения операции
Атрибуты:
max – максимальное значение (по умолчанию 100)
value – текущее значение
mode=determined|undetermined – вид индикатора: с определенным
значением/без определенного значения
Платформа Mozilla. Элементы управления
Выбор даты и времени
Атрибуты datepicker:
value – текущее значение YYYY-MM-DD
type=normal|grid|popup – вид элемента
firstdayofweek – первый день недели (от 0 до 6)
readonly=false|true – только чтение
Платформа Mozilla. Элементы управления
Выбор цвета (colorpicker)
Атрибуты:
color – текущее значение цвета
type=button – элемент в виде кнопки
Платформа Mozilla. Элементы управления
Список (listbox)
Атрибуты listbox:
rows – количество рядов
seltype=single|multiple – способ выделения элементов
Атрибуты listitem:
label - текст
selected=false|true – элемент выделен
Платформа Mozilla. Элементы управления
Список с несколькими колонками (listbox)
Платформа Mozilla. Элементы управления
Выпадающий список (menulist)
Атрибуты:
editable=false|true – редактируемый элемент (если true, то можно указать
атрибут label)
Платформа Mozilla. Элементы управления
Выпадающий список (button)
Платформа Mozilla. Добавление HTML-элементов
<window id="wnd"
xmlns:html="http://www.w3.org/1999/xhtml"
xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.
is.only.xul">
...
<html:table>
<html:tr>
<html:td>HTML-таблица</html:td>
</html:tr>
</html:table>
Платформа Mozilla. Элементы управления
Таблица (grid)
Платформа Mozilla. Элементы управления
Таблица (grid)
Платформа Mozilla. Элементы управления
Таблица (grid)
Платформа Mozilla. Элементы управления
Таблица (grid)
Платформа Mozilla. Элементы управления
Cтек (stack)
Атрибуты страниц:
top – смещение от верхней границы (в
точках);
left – смещение от левой границы (в
точках);
Платформа Mozilla. Элементы управления
deck
Атрибуты:
selectedIndex – индекс активной
страницы (от 0)
Платформа Mozilla. Элементы управления
deck
Платформа Mozilla. Элементы управления
tabbox
Платформа Mozilla. Элементы управления
tabbox
Платформа Mozilla. Элементы управления
tabbox
Платформа Mozilla. Элементы управления
iframe
Платформа Mozilla. Элементы управления
Разделитель (splitter)
Платформа Mozilla. Элементы управления
Разделитель (splitter)
Платформа Mozilla. Элементы управления
Разделитель (splitter)
Платформа Mozilla. Элементы управления
Разделитель (splitter)
Атрибуты:
resizebefore=closest|farthest – изменять размер слева/сверху для
ближайшего или самого удаленного элемента
resizeafter=closest|farthest|grow – изменять размер справа/снизу для
ближайшего или самого удаленного элемента, либо для родительского
элемента/окна
collapse=none|before|after – при нажатии на разделитель
скрывать/раскрывать элемент слева/выше (before), справа/ниже (after),
либо не скрывать (none). В разделитель следует поместить элемент
grippy.
state=open|collapsed – начальное состояние скрываемого элемента:
раскрыт (open), либо скрыт (collapsed).
Платформа Mozilla. Элементы управления
Панель управления (toolbox)
Платформа Mozilla. Элементы управления
Меню (menubar)
Платформа Mozilla. Элементы управления
Контекстное меню (popup)
Платформа Mozilla. Элементы управления
Переключатели в меню
Независимые переключатели
Зависимые переключатели
Платформа Mozilla. Элементы управления
Подсказки (tooltip)
Платформа Mozilla. Элементы управления
Подсказки (tooltip)
Платформа Mozilla. Элементы управления
Заполнитель (spacer)
- не рекомендуется
Платформа Mozilla. Элементы управления
Заполнитель (spacer)
Платформа Mozilla. Элементы управления
Дерево (tree)
Платформа Mozilla. RDF
RDF (Resource Description Framework) – модель для представления
метаданных (данных о данных), разработанная консорциумом
Всемирной паутины.
Факт = (субъект, предикат, объект)
Предикат = отношение субъекта к объекту
Пример факта: Роман «Война и мир» написал Л.Н. Толстой
Вариант А:
Субъект = Л.Н. Толстой
Предикат = написал
Объект = роман «Война и мир»
Вариант Б:
Субъект = роман «Война и мир»
Предикат = был написан
Объект = Л.Н. Толстой
Платформа Mozilla. RDF
Субъект = Ресурс
Предикат = Атрибут ресурса
Объект = Значение атрибута
Пример:
Ресурс (субъект) = http://www.example.org/index.html
Атрибут (предикат) = язык ресурса
Объект = ru
Представление фактов в виде XML
<?xml version="1.0"?>
<RDF:RDF
xmlns:RDF="http://www.w3.org/1999/02/22-rdf-syntax-ns#">
...
</RDF:RDF>
или
<?xml version="1.0"?>
<RDF
xmlns="http://www.w3.org/1999/02/22-rdf-syntax-ns#">
...
</RDF>
Платформа Mozilla. RDF
Для описания одного факта используется тег Description:
<Description about="РЕСУРС">
<АТРИБУТ>ЗНАЧЕНИЕ</АТРИБУТ>
<АТРИБУТ>ЗНАЧЕНИЕ</АТРИБУТ>
…
<АТРИБУТ>ЗНАЧЕНИЕ</АТРИБУТ>
</Description>
Пример:
<?xml version="1.0"?>
<RDF xmlns="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:dc="http://purl.org/dc/elements/1.1/">
<Description about="http://www.example.org/index.html">
<dc:language>en</dc:language>
<dc:creator
resource="http://www.example.org/staffid/85740"/>
</Description>
</RDF>
Платформа Mozilla. RDF
Файл db.rdf
Платформа Mozilla. RDF
Файл db.rdf
Платформа Mozilla. RDF
Файл db.rdf
Платформа Mozilla. RDF
Файл db.rdf
Платформа Mozilla. RDF. Шаблоны
Платформа Mozilla. RDF. Шаблоны
Платформа Mozilla. RDF. Шаблоны
Платформа Mozilla. RDF. Шаблоны. Правила
Платформа Mozilla. RDF. Шаблоны. Правила
Платформа Mozilla. RDF.
Иерархическая структура данных
Платформа Mozilla. RDF.
Иерархическая структура данных
Файл db.rdf
Платформа Mozilla. XPCOM.
XPCOM (Cross Platform Component Object Model) - кросплатформенная
компонентно-ориентированная модель разработки ПО от Mozilla.
Компоненты
Службы
Классы
КОМПОНЕНТ.createInstance()
КОМПОНЕНТ.getService()
Определить интерфейс объекта
ОБЪЕКТ.QueryInterface(ИНТЕРФЕЙС)
или указать интерфейс при создании/получении
объекта:
КОМПОНЕНТ.createInstance(ИНТЕРФЕЙС)
КОМПОНЕНТ.getService(ИНТЕРФЕЙС)
XPConnect – программный слой между XPCOM и JavaScript. Реализован
в виде объекта Components
Платформа Mozilla. XPCOM.
Список компонентов содержится в массиве Components.classes.
В браузере Firefox в меню «Инструменты» выбрать «Консоль ошибок» и
выполнить JavaScript-код
var str = ""; for (var i in Components.classes) { str +=
i + "\n" }; str
Платформа Mozilla. XPCOM.
Список интерфейсов содержится в объекте Components.interfaces.
В браузере Firefox в меню «Инструменты» выбрать «Консоль ошибок» и
выполнить JavaScript-код
var str = ""; for (var i in Components.interfaces) { str
+= i + "\n" }; str
Платформа Mozilla. XPCOM.
Документация по классам и интерфейсам, полученная на основе
исходных кодов компонентов:
http://www.oxymoronical.com/experiments/xpcomref/
Документация по классам и интерфейсам в среде Eclipse Spket:
Платформа Mozilla. XPCOM.
Запись в локальный файл
1) Создать объект класса @mozilla.org/file/local;1 с интерфейсом
nsILocalFile:
var Cc = Components.classes;
var Ci = Components.interfaces;
var file =
Cc["@mozilla.org/file/local;1"].createInstance(Ci.nsILoca
lFile);
file.initWithPath("c:\\text.txt");
Получить атрибуты файла, размер, скопировать файл, переместить
файл, удалить файл, запустить файл, проверить его существование.
if (!file.exists())
{ file.create(Ci.nsIFile.NORMAL_FILE_TYPE, 0640) };
Платформа Mozilla. XPCOM.
Запись в локальный файл
2) Создать объект класса @mozilla.org/network/file-output-stream;1 с
интерфейсом nsIFileOutputStream:
var ostream = Cc["@mozilla.org/network/file-outputstream;1"].createInstance(Ci.nsIFileOutputStream);
ostream.init(file, 0x04 | 0x08 | 0x20, 0640, 0);
Флаги для операций ввода/вывода:
0x01 – только чтение
0x02 – только запись
0x04 – чтение и запись
0x08 – создание файла если он не существует
0x10 – добавить в конец файла (append)
0x20 – обрезать файл (truncate)
Запись двоичных данных:
ostream.write(data, data.length);
ostream.close();
Платформа Mozilla. XPCOM.
Запись в локальный файл
3) Создать объект класса @mozilla.org/intl/converter-output-stream;1 с
интерфейсом nsIConverterOutputStream:
var cstream = Cc["@mozilla.org/intl/converter-outputstream;1"].createInstance(Ci.nsIConverterOutputStream);
cstream.init(ostream, "UTF-8", 0, 0);
cstream.writeString(data);
cstream.close();
Платформа Mozilla. XPCOM.
Чтение из локального файла
1) Создать объект класса @mozilla.org/file/local;1 с интерфейсом
nsILocalFile:
var file =
Cc["@mozilla.org/file/local;1"].createInstance(Ci.nsILoca
lFile);
file.initWithPath("c:\\text.txt");
Получить атрибуты файла, размер, скопировать файл, переместить
файл, удалить файл, запустить файл, проверить его существование.
if (!file.exists()) return;
Платформа Mozilla. XPCOM.
Чтение из локального файла
2) Создать объект класса @mozilla.org/network/file-input-stream;1 с
интерфейсом nsIFileInputStream:
var istream = Cc["@mozilla.org/network/file-inputstream;1"].createInstance(Ci.nsIFileInputStream);
istream.init(file, 0x01, 0, 0);
Флаги для операций ввода/вывода:
0x01 – только чтение
0x02 – только запись
0x04 – чтение и запись
0x08 – создание файла если он не существует
0x10 – добавить в конец файла (append)
0x20 – обрезать файл (truncate)
istream.available() – количество доступных байт в потоке
Платформа Mozilla. XPCOM.
Чтение из локального файла
3) Создать объект класса @mozilla.org/intl/converter-input-stream;1 с
интерфейсом nsIConverterInputStream:
var cstream = Cc["@mozilla.org/intl/converter-inputstream;1"].createInstance(Ci.nsIConverterInputStream);
cstream.init(istream, "UTF-8", 0, 0);
var data = {};
cstream.readString(-1, data);
cstream.close();
data – объект, данные доступны в поле value:
alert(data.value);
Платформа Mozilla. XPCOM.
Воспроизведение звукового файла
1) Создать объект класса @mozilla.org/file/local;1 с интерфейсом
nsILocalFile:
var file =
Cc["@mozilla.org/file/local;1"].createInstance(Ci.nsILoca
lFile);
file.initWithPath("c:\\windows\\media\\tada.wav");
2) Получить ссылку на объект класса @mozilla.org/network/ioservice;1 с интерфейсом nsIIOService:
var ioService = Cc["@mozilla.org/network/ioservice;1"].getService(Ci.nsIIOService);
var fileURI = ioService.newFileURI(file);
3) Создать объект класса @mozilla.org/sound;1 с интерфейсом
nsISound:
var sound =
Cc["@mozilla.org/sound;1"].createInstance(Ci.nsISound);
sound.play(fileURI);
Платформа Mozilla.
Обработка событий
Добавить обработчик события:
document.getElementById("btnsave").addEventListener("command", save,
false);
Обработчиков может быть несколько:
document.getElementById("btnsave").addEventListener("command", info,
false);
Обработчик можно исключить из списка:
document.getElementById("btnsave").removeEventListener("command",
save, false);
WWW (World Wide Web) – всемирная паутина
Гипертекст (Hypertext) - …
1989 г. Тим Бернерс-Ли, Европейская лаборатория
физики элементарных частиц (CERN)
WWW (World Wide Web) - …
4 основные идеи:
1) гипертекст;
2) универсальная идентификация
ресурсов;
3) клиент/серверная архитектура;
4) языки разметки.
HTML (Hypertext Markup
Language) - …
91
URI и URL
URI (Uniform Resource Identifier) – единообразный
идентификатор ресурса. Формат:
МЕТОД_ДОСТУПА:ИДЕНТИФИКАТОР[?ЗАПРОС][#ФРАГМЕНТ]
Примеры:
urn:ISBN:0-395-36341-1
http://aics.ru/index.shtml?a=showboard
ftp://ftp.admin.tomsk.ru/pub/distr/
file://C:\Windows\temp\txt.html#chapter2
mailto:president@moscow.ru
news:comp.news.tomsk.ru
tel:+1-868-123-3423
telnet://192.168.0.1:4352
URL (Universal Resource Locator) – универсальный
адрес ресурса – подмножество URI, которое
содержит информацию о местонахождении ресурса
для доступа через сеть Интернет.
92
Пример URL:
Абсолютные и относительные URL
Текущий URL
(абсолютный URL)
Относительный URL
Результат
http://aics.ru/text/doc1.html /files/logo.gif
http://aics.ru/files/logo.gif
http://aics.ru/text/doc1.html doc3.txt
http://aics.ru/text/doc3.txt
http://aics.ru/text/doc1.html ./doc4.txt
http://aics.ru/text/doc4.txt
http://aics.ru/text/doc1.html ../img/./first.jpg
http://aics.ru/img/first.jpg
http://ya.ru/cat/ed/1.html
http://ya.ru/main/2.html
../../main/../2.html
93
Развитие WWW (World Wide Web):
1) Символьный гипертекст (текстовый браузер LineMode,
1991 г.)
2) Графически-ориентированные статические HTMLдокументы (графический браузер Mosaic, 1993 г.)
3) Динамические HTML-документы (SSI, CGI, Perl, PHP,
ASP)
4) Активные HTML-документы (с 1995 г. - Java, JavaScript,
Flash)
94
HTTP (Hypertext transfer protocol)
– протокол передачи гипертекста
HTTP-запрос:
Заголовок
Тело запроса
Первая строка заголовка: метод запроса, URL
запрашиваемого ресурса, версия протокола HTTP
Остальные строки – поля заголовка: пары имя:
значение
Методы запроса:
GET – запрос данных (вместе с HTTP-заголовками)
HEAD – запрос HTTP-заголовков без данных.
95
POST – отправка данных на сервер.
Пример HTTP-запроса (метод GET):
GET http://tpu.ru/img/ushi/tom.gif HTTP/1.1
Accept: */*
Referer: http://tpu.ru/
User-Agent: Mozilla/4.0 (compatible; MSIE 6.0;
Windows NT 5.1)
Host: tpu.ru
Connection: close
(пустая строка)
96
Пример HTTP-запроса (метод POST):
POST http://acs.cctpu.edu.ru/temp/test.php HTTP/1.1
Host: acs.cctpu.edu.ru
Content-Type: application/x-www-form-urlencoded
Content-Length: 9
var1=abcd
97
HTTP-ответ:
Заголовок
Тело ответа
Первая строка заголовка – строка состояния: версия
протокола и трехзначный код состояния
Остальные строки – поля заголовка: пары имя:
значение
98
Пример HTTP-ответа (статический документ):
HTTP/1.1 200 OK
Date: Wed, 14 Sep 2005 00:31:03 GMT
Server: Apache/1.3.29 (Unix) PHP/4.3.5
Last-Modified: Thu, 11 Mar 2004 02:24:02 GMT
ETag: "1509a-14e-f865835b"
Content-Length: 8686
Content-Type: text/html; charset=WINDOWS-1251
<html>...
Пример HTTP-ответа (динамический документ):
HTTP/1.1 200 OK
Date: Sun, 02 Mar 2003 15:56:19 GMT
Server: Apache/2.0.40 (Win32)
X-Powered-By: PHP/5.0.3
Content-length: 62
Connection: close
Content-Type: text/html; charset=WINDOWS-1251
<html>...
99
HTML (Hypertext Markup Language)
– язык разметки гипертекста
HTML является одним из приложений SGML (Structured
Generalized Markup Language – обобщенный
структурированный язык разметки, 1986 г.)
Конструкции языка HTML:
1) Элементы (абзацы, ссылки, списки, таблицы …)
начальный тег (обязательный <имя_элемента>),
содержимое, конечный тег (</имя_элемента>).
Пример: <strong>Это жирный текст</strong>, <br>
2) Атрибуты – свойства элементов, в начальном теге
пары атрибут/значение.
Пример: <div class=“cont” >текст</div>
<td nowrap> ... </td>
100
3) Ссылки на символы – числовые или символьные
имена символов. & ... ;
Примеры:
<
= <
© = ©
€ = €
4) Комментарии
<!–- текст комментария -->
101
XHTML (Extensible Hypertext Markup Language) –
расширяемый язык разметки гипертекста.
Преимущества:
1) обработка проще и быстрее, чем HTML;
2) доступны технологии, разработанные для XML.
Требования:
1) все элементы должны быть закрыты;
<br> = <br />
2) у атрибутов обязательно должно быть значение,
заключенное в кавычки;
<td nowrap> = <td nowrap="nowrap">
3) имена тегов – строчными буквами;
<B> = <b>
4) при нарушении структуры возникает ошибка.
102
Документ в формате HTML состоит из трех частей:
1. Строка с версией HTML
2. Раздел заголовков (элемент HEAD).
3. Тело документа (элемент BODY или элемент FRAMESET)
Разделы 2 и 3 должны находиться в элементе HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Заголовок документа</title>
</head>
<body>
<p>Первый HTML-документ.
</body>
</html>
103
Версии HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<!DOCTYPE html>
104
Элемент HEAD (+/+ - начальный и конечный теги
обязательны) – вспомогательная информация о документе,
которая не является содержимым документа (название,
кодировка, информация для поисковых машин). Может
содержать элементы TITLE, META, LINK, BASE, STYLE.
Элемент TITLE (+/+ - начальный и конечный теги
обязательны) – название документа, отображается в
заголовке окна браузера.
Элемент МЕТА (+/ – - начальный тег обязателен, конечный
запрещен) – неотображаемая информация и инструкции
для браузера.
<meta http-equiv="имя" content="содержимое">
<meta name="имя" content="содержимое">
105
Элемент МЕТА (продолжение)
<meta http-equiv="Expires" content="Wed, 14 Feb 2006 12:24:57
GMT"> (HTTP/1.0)
<meta http-equiv="Pragma" content="no-cache"> (HTTP/1.0)
<meta http-equiv="Content-type"
content="text/html; charset=koi-8r">
= HTTP-заголовку Content-type: text/html; charset=koi-8r
<meta http-equiv="Refresh" content="3, URL=http://ya.ru">
<meta http-equiv="Cache-Control" content="no-cache">
106
Элемент МЕТА (продолжение)
<meta name="Robots" content="noindex, follow">
index, noindex, follow, nofollow, all="index, follow",
none="noindex, nofollow"
<meta name="Description" content="Документ содержит описание
элементов HTML">
<meta name="Keywords" content="элементы, тэги, метаданные">
<meta name="Author" content="Петров А.М.">
<meta name="Copyright" content="копирование запрещено!!!">
<meta name="Generator" content="MSHTML 6.00.2800.1106" >
107
Элемент BASE (+/-) – указание базового URL-адреса,
относительно которого будут определяться относительные
адреса
Пример:
<base href='http://domain.com/img/'>
cars/volvo.jpg
=
http://domain.com/img/cars/volvo.jpg
108
Элемент LINK (+/-) – указание отношений документов: ссылки
на следующий, предыдущий, главный документы, ссылки на
внешние таблицы стилей, ссылки для поисковых машин на
альтернативные версии документа (другие языковые версии,
версии для другого носителя (например, PDF или проектор))
Пример:
<link href="/main.css" rel="stylesheet"
type="text/css">
href – URL связанного ресурса
type – тип связанного ресурса
rel - тип связи
109
Разделение структуры документа и представления
Без разделения:
....
<h1>
<font color="red">
Заголовок
</font>
</h1>
....
С разделением:
<style
type="text/css">
h1 { color: red; }
</style>
....
<h1>Заголовок</h1>
....
110
Преимущества разделения структуры документа и
представления
1. Повторное использование стилей.
2. Возможность изменения стилей без изменения документа.
3. Возможность выбора пользователем одной из возможных
таблиц стилей.
111
Элемент BODY (+/+) – определяет содержимое документа
Атрибуты:
background = URL (устаревший)
COLOR = white, black,
text = COLOR
(устаревший)
... или #RRGGBB от
link = COLOR
(устаревший)
#000000 до #FFFFFF
vlink = COLOR
(устаревший)
alink = COLOR
(устаревший)
bgcolor = COLOR (устаревший)
style = ...
id = ...
class = ...
onload = ... (также onunload, onclick, ondblclick, onfocus,
onblur, onkeydown, onkeyup, onkeypress, onmousedown,
onmouseup, onmousemove, onmouseover, onmouseout ...)
Пример:
<body onload="check_user();" class="cont small_txt"
style="color:#a0a0a0;border:1px solid navy">
112
Элементы DIV и SPAN (+/+) – группировка элементов
Атрибуты:
title = ...
align = ...
(left, right, center, justify) (устаревший)
style = ...
id = ...
class = ...
onclick = ... (и другие обработчики)
Пример:
<div title='Группа элементов' id='news_header'>
Первый второй третий четвертый
</div>
113
Элементы H1, H2, …, H6 (+/+ head) – определяют заголовки
текста
Пример: <h1>Заголовок</h1>
Элемент P (+/? paragraph) – определяет параграф (абзац) текста
Пример: <p>Первый параграф<p>Второй параграф
Элемент BR (+/─ break line) – переход на следующую строку
Элементы STRONG и B (+/+ bold) – жирный текст
Элементы EM и I (+/+ emphasize, italics) – курсивный шрифт
114
Элемент UL (+/+ unordered list) ненумерованный список.
Атрибуты: основные атрибуты +
TYPE (=disc, circle, square) - стиль элементов
списка.
Элементы LI (+/? list item) – элементы списка.
Пример:
<ul><li>Первый <li>Второй <ul><li>Гл. 2.1.
<li>Гл. 2.2. </ul><li>Третий </li></ul>
115
Элемент OL (+/+ ordered list) - нумерованный
список.
Атрибуты: основные атрибуты +
TYPE (=1, a, A, i, I) - стиль нумерации;
START (число) - начальный номер первого
элемента.
Элементы LI (+/? list item) – элементы списка.
Пример:
<ol><li>Первый <li value=5>Пятый <ol type=a
start=10><li>Введение <li>Заключение
</ol><li>Шестой </li></ol>
116
Элемент PRE (+/+ preformatted) форматированный текст.
В документе сохраняются пробелы и перевод
строки.
Пример:
<pre>Этот текст
Ф О Р М А
ТИРОВАН</pre>
117
Элемент IMG (+/- image) - изображение.
Атрибуты: основные атрибуты +
alt - кратное описание (обязателен);
src (source) - URI изображения;
width, height - ширина и высота изображения;
align (=left, right, middle, bottom, top) выравнивание изображения в документе (устаревший);
border - ширина рамки в пикселях (устаревший).
Пример:
<img src='http://aics.ru/img/logo.gif' alt='лого'>
118
Элемент A (+/+ anchor) - ссылка на другой ресурс
либо на другую часть текущего HTML-документа
(внутренняя ссылка).
Атрибуты: основные атрибуты +
href (hypertext reference) - URL связанного
ресурса;
accesskey - клавиша быстрого доступа (ALT +
клавиша);
tabindex - положение в последовательности
перехода;
target – имя окна, в котором будет загружаться
ресурс (_blank – в новом окне)
name - имя внутренней ссылки (устаревший в
HTML5);
119
Элемент TABLE (+/+) - таблица (позволяет
упорядочить данные в строки и столбцы ячеек).
Атрибуты: основные атрибуты +
cellspacing – ширина поля между границами таблицы и границами
ячеек (и между границами ячеек) (устаревший в HTML5);
cellpadding – ширина поля между границами ячеек и их содержимым
(устаревший в HTML5);
width – ширина всей таблицы (устаревший);
align (=left, center, right) – выравнивание таблицы относительно
документа (устаревший);
bgcolor – цвет фона (устаревший);
border – ширина 3D-границы (устаревший);
120
Элемент TABLE (продолжение)
Элемент TR (+/?) (Table Row) определяет ряд
элементов.
Атрибуты: основные атрибуты +
valign (=top, middle, bottom) – выравнивание содержимого ячеек по
вертикали (устаревший);
bgcolor – цвет фона ячеек (устаревший);
align (=left, center, right, justify) – выравнивание содержимого ячеек по
горизонтали (устаревший);
121
Элемент TABLE (продолжение)
Элемент TD (+/?) (Table Data) определяет
элемент таблицы.
Атрибуты: основные атрибуты +
rowspan – количество рядов, охваченных текущей ячейкой;
colspan – количество столбцов, охваченных текущей ячейкой;
width – рекомендуемая ширина ячейки;
height – рекомендуемая высота ячейки.
align, valign, bgcolor – как в TR (устаревшие);.
122
Каскадные таблицы стилей
Способы задания:
1. В элементе HEAD:
<html><head>
<style type='text/css'>...</style>
2. Подключение внешнего файла:
<link href="/main.css" rel="stylesheet" type="text/css">
3. Как атрибут элементов:
<h1 style='color:red; font-size:80%;'>...
123
Каскадные таблицы стилей
Задание стиля:
СЕЛЕКТОР1 {
свойство1: значение1;
свойство2: значение2;
}
Виды селекторов:
Типы элементов:
div { ... }
a { ... }
* { ... } – все элементы
Классы элементов:
.myclass1 { ... }
Идентификаторы элементов:
#myid1 { ... }
124
Каскадные таблицы стилей
Свойства:
Тип шрифт:
font-family: Verdana, Arial;
Вес шрифта (жирный шрифт):
font-weight: bold; (normal)
Курсив:
font-style: italic; (normal, oblique)
Размер шрифта:
font-size: 10px;
Цвет текста:
color: #ad38a4;
color: #abc; (=#aabbcc)
Цвет фона:
background-color: green;
Изображение фона:
background-image: url('http://aics.ru/img/logo.gif');
background-repeat: repeat-x; (repeat; repeat-x; repeat-y;
125
no-repeat)
Каскадные таблицы стилей
Свойства:
Декоративные эффекты текста:
text-decoration: underline (none; overline;
blink)
Рамка:
border: 1px solid #800;
Расстояние от содержимого до рамки:
padding: 10px;
padding-left: 2px;
Расстояние от рамки до внешних границ:
margin: 20px;
margin-top: 4px;
Высота содержимого элемента:
height: 20px;
Ширина содержимого элемента:
width: 20px;
126
Каскадные таблицы стилей
Свойства:
Расположение элемента (абсолютное):
position: absolute;
top: 10px; left: 20px;
Расположение элемента (относительное):
position: relative;
top: -5px; left: 5px;
Расположение элемента (фиксированное):
position: fixed;
127
Каскадные таблицы стилей
Иерархические селекторы:
E1 E2 { ... } –
для элемента/класса/идентификатора E2,
находящегося в элементе/классе/идентификаторе E1
(любой уровень вложенности);
E1>E2 { ... } –
для элемента/класса/идентификатора E2,
находящегося в элементе/классе/идентификаторе E1
(первый уровень вложенности);
128
Каскадные таблицы стилей
Иерархические селекторы:
E1~E2 { ... } –
для элемента/класса/идентификатора E2,
следующего за элементом/классом/идентификатором
E1;
E1+E2 { ... } –
для элемента/класса/идентификатора E2,
непосредственно следующего за
элементом/классом/идентификатором E1;
129
Каскадные таблицы стилей
Псевдоклассы:
div:hover { ... } –
вид элемента при наведении указателя мыши;
input:focus { ... } Вид элемента при получении им фокуса;
a:link { ... } –
вид ссылки на непосещенный ресурс;
a:visited { ... } –
вид ссылки на посещенный ресурс;
img:first-child { ... } –
вид картинки, которая является первым дочерним
элементом для своего родительского элемента
img:last-child { ... }
130
Каскадные таблицы стилей
Псевдоэлементы:
p:fist-letter { ... } –
вид первой буквы параграфа;
p:first-line { ... } вид первой строчки параграфа;
div:before { content: "..."; ... } –
добавляет псевдоэлемент как первый дочерний
элемент элемента div;
div:after { content: "..."; ... } –
добавляет псевдоэлемент как последний дочерний
элемент элемента div;
131
SSI (Server Side Include)
Включения на стороне сервера
- набор команд, позволяющий включить в
страницу информацию, недоступную средствами
HTML
Веб-сервер обрабатывает HTML-документ c SSIдирективами, выполняет их, результат
возвращает клиенту.
.shtml – HTML-документ с SSI-директивами
<!--#SSI_директива ПАРАМЕТР1="ЗНАЧЕНИЕ1"
ПАРАМЕТР2="ЗНАЧЕНИЕ2" -->
132
SSI (Server Side Include)
Директивы set, echo, printenv
set – установить значение переменной окружения
параметр var – имя переменной
параметр value – значение переменной
<!--#set var="Email" value="admin@site.com" ->
echo – вывод значения переменной окружения
параметр var – имя переменной
<!--#echo var="HTTP_USER_AGENT" -->
printenv – вывод всех переменных окружения
<!--#printenv -->
133
SSI (Server Side Include)
Некоторые переменные окружения
REMOTE_ADDR – IP адрес клиента
REMOTE_USER – имя клиента (если была проведена
аутентификация)
HTTP_USER_AGENT – браузер клиента
HTTP_REFERER – ссылающаяся страница
QUERY_STRING – строка запроса
SERVER_NAME – имя сервера
134
SSI (Server Side Include)
Директивы условий (if, elif, else, endif)
<!--#if expr="УСЛОВИЕ1" -->
HTML-код, который будет выводиться, если УСЛОВИЕ1
истинно
<!--#elif expr="УСЛОВИЕ2" -->
HTML-код, который будет выводиться, если УСЛОВИЕ1
ложно,
а УСЛОВИЕ2 истинно
<!--#else -->
HTML-код, который будет выводиться, если все условия
ложны
<!--#endif -->
Обязательно двойные кавычки в условии.
Условие - это либо строка, которая является истинной, если непустая, или
набор операторов сравнения строк.
Операторы: =,!=,<,<=,> и >=
К переменным окружения добавляется знак $
Поиск подстроки: $MyName=/Vas/
Объединение условий с помощью скобок и операторов && (И) и || (ИЛИ)
135
<!--#if expr="$Name='Ivan' || $HTTP_USER_AGENT=/Mozilla/"-->
...
SSI (Server Side Include)
Директива include
include - включение содержимого файла
параметр file – имя файла относительно текущего каталога
или
параметр virtual - имя файла относительно текущего
каталога или относительно корня сайта.
file: нельзя переходить в родительский каталог
virtual: можно переходить в родительский каталог
<!--#include
<!--#include
<!--#include
<!--#include
<!--#include
<!--#include
<!--#include
<!--#include
file='email.txt' -->
file='./dir1/email.txt' -->
file='../dir1/email.txt' --> - нельзя!
file='/ch1/ch1.html' --> - нельзя!
virtual='email.txt' -->
virtual='./dir1/email.txt' -->
virtual='../dir1/email.txt' -->
virtual='/ch1/ch1.html' -->
136
Скриптовый язык программирования JavaScript
JavaScript - это язык управления сценариями просмотра HTMLдокументов на стороне клиента.
Разработан в 1995 г. специалистами компании Netscape.
Основная идея – возможность изменения значений атрибутов тегов и свойств
среды в процессе просмотра HTML-страницы пользователем.
Netscape – JavaScript
Microsoft – JScript
ECMAScript (1997 г.)
Скриптовый язык тесно связан с объектной моделью документа (DOM –
document object model)
137
JavaScript
DOM (Document Object Model) – объектная модель документа
Объектная модель документа DOM – это представление HTML-документа
(XML-документа или другого документа) в виде иерархии объектов,
которые характеризуются своими свойствами, методами и событиями
Процесс обработки HTML-документа браузером:
1. HTML-документ загружается с сайта и размещается в памяти компьютера.
2. Производится анализ документа, в результате которого он разбивается на
составляющие.
3. Элементы, из которых состоит HTML-документ (<body></body>,
<head></head>, <p></p> и т.д.), размещаются во временной базе данных в
соответствии с DOM.
4. База данных становится доступной другим программам, в частности скриптам – программам на скриптовом языке JavaScript.
138
JavaScript
Пример представления HTML-документа в соответствии с DOM
<TABLE><TBODY>
<TR>
<TD>Shady Grove</TD>
<TD>Aeolian</TD>
</TR>
<TR>
<TD>Over the River, Charlie</TD>
<TD>Dorian</TD>
</TR>
</TBODY> </TABLE>
139
JavaScript
Структура объектной модели документа DOM
document – главный объект HTML-документа (объект)
• title – заголовок документа (строка);
• referrer – URI адрес ссылающейся страницы (строка);
• URL – адрес данного HTML-документа (строка);
• body – HTML-элемент BODY (объект);
• images – коллекция изображений (массив);
• anchors – коллекция ссылок (массив);
• forms – коллекция форм (массив);
• getElementById(id) – функция возвращает ссылку на элемент
с указанным уникальным именем.
140
JavaScript
Способы размещения функций
1) В HTML-документе
<script type="text/javascript">
<!-function somefunction()
{
// здесь располагается код функции
}
//-->
</script>
2) В отдельном файле
<script type="text/javascript" src="/inc/main.js"></script>
В файле main.js:
function somefunction()
{
// здесь располагается код функции
}
141
JavaScript
Способы функционального применения скриптов
1) гипертекстовая ссылка (вместо URL);
2) обработчик события (HANDLER);
3) вставка (элемент SCRIPT).
Гипертекстовая ссылка
Применяется в следующих элементах:
- А (атрибут href)
- FORM (атрибут action)
- IMG (атрибут src) (небезопасно)
Вместо URL указывается строчка: javascript:КОД_ПРОГРАММЫ
КОД_ПРОГРАММЫ – вызов функции или набор операторов
<a href="javascript:alert('Вы нажали на ссылку');">Ссылка</a>
<form action="javascript:alert('Подтверждение формы');">
<input type="submit" value="Submit"></form>
142
JavaScript
Способы функционального применения скриптов
Обработчик события
JavaScript-код указывается в качестве значения соответствующего
атрибута элемента: onСОБЫТИЕ="КОД_ПРОГРАММЫ"
<div onmouseover="alert('ничего нет')">Здесь ничего нет</div>
Вставка
JavaScript-код помещается в элементе SCRIPT. Обычно в заголовке
документа HEAD размещают объявления переменных и функций, а в
основной части документа – исполняемый код
<script type="text/javascript">
function f1() {
// код функции
}
alert('вставка');
</script>
143
JavaScript
Обращение к объектам, их свойствам и методам
Обращение к объектам осуществляется в соответствии со структурой
объектной модели документа:
ОБЪЕКТ_1.ОБЪЕКТ_2. … .ОБЪЕКТ_N
ОБЪЕКТ_1.ОБЪЕКТ_2. … .ОБЪЕКТ_N.СВОЙСТВО1. … СВОЙСТВОM
ОБЪЕКТ_1.ОБЪЕКТ_2. … .ОБЪЕКТ_N.МЕТОД
<form name="Fm1"><input name="Txt1" size="30"></form>
Обращение к объекту:
document.forms[0].elements[0] (НЕВЕРНО: Document.FORMS[0].Elements[0])
document.Fm1.Txt1
Fm1.Txt1
document.getElementById("PicId")
144
JavaScript
Обращение к свойству объекта:
document.forms[0].elements[0].style.backgroundColor='red';
Fm1.Txt1.style.backgroundColor='red';
document.images[0].style.display='none';
document.getElementById("news").style.backgroundColor='red';
//изменение цвета фона
document.getElementById("news").style.display='none';
//изменение видимости объекта
document.getElementById("news").innerHTML='Другой текст';
//изменение HTML-кода, содержащегося в объекте
Обращение к методу объекта:
Fm1.Txt1.click(); (НЕВЕРНО: Fm1.Txt1.Click();)
Fm1.submit();
145
JavaScript
-
Типы и структуры данных
литералы и переменные;
массивы, функции и объекты.
Литералы
числовой литерал: 42
числовой литерал: 1.432
числовой литерал: 1.432e+2
строковый литерал: 'Это строковый литерал'
строковый литерал: "Это строковый литерал"
Переменные
Определяются при помощи оператора var
var i;
var i=20;
var w=window.open();
Регистр букв имеет значение. Тип переменной определяется
контекстом.Узнать тип переменной можно с помощью функции
typeof(ИМЯ_ПЕРЕМЕННОЙ). Результат функции – строка
'undefined', 'number', 'string', 'object' или 'function'.
146
alert(typeof(i));
JavaScript
Операторы сравнения
== равно != не равно – если типы сравниваемых операндов
не равны, происходит преобразование типов
=== строго равно, !== строго не равно – сравниваются как
типы операндов, так и их значения
"10" == 10 // true
"10" === 10 // false
"1" == true // true
"1" === true // false
0 == '' // true
0 == ' \r\n ' // true
0 === ' \r\n ' // false
null == undefined // true
null === undefined // false
147
JavaScript
Явное и неявное преобразование типов
10 + 20 // 30
10 + "20"// "1020"
10 + parseInt("20")// 30
10 + parseInt("020")// ??
10 + parseInt("020", 10)// 30
10 + parseInt("20.5")// 30
10 + parseFloat("20.5")// 30.5
var i = 20;
10 + i.toString() // "1020"
148
JavaScript
Типы и структуры данных
Можно сразу задать переменную без оператора var:
i = 10;
При объявлении переменной оператором var ей присваивается значение null:
var i;
if (i == null) alert('i is null'); // +
if (i === undefined) alert('undefined'); // +
alert(typeof(i)); // undefined
var i = '';
if (i == null) alert('i is null'); // if (i === undefined) alert('undefined'); // alert(typeof(i)); // string
var i = null;
if (i == null) alert('i is null'); // +
if (i === undefined) alert('undefined'); // alert(typeof(i)); // object
149
JavaScript
Типы и структуры данных
Массивы
var a = new Array(); //объявление массива
var b = [];
alert(typeof(b)); // 'object'
var c = new Array(10); //объявление массива со значениями
var d = new Array(12.32, "строчка");
var e = [12.32, "строчка"];
alert(e[1]); //'строчка', индексация c 0
e[10]='новая строчка';
alert(e.length); //определение количества элементов150(11)
Функции
function f_name(arg1,arg2,...)
{
/* function body */
return result;
}
function add(a, b) {
return a+b;
}
alert(add("10","20")); //появится сообщение «1020»
Анонимные функции
obj1.onmousedown = function () { /* function body */
obj2.onmousedown = obj1.onmousedown;
(function() {
var a = 10, b = 20;
alert(a+b);
})();
151
}
JavaScript
Операторы условия и цикла
Оператор условия if
if (логическое выражение) оператор1;
[else оператор2;]
if (i==null) { alert('i is null'); }
else { alert('i is not null'); }
Оператор цикла while
while (логическое выражение)
оператор;
var i=1;
while (i<10) {
alert(i); i+=2; }
Оператор цикла for
for (инициализация переменных цикла;
условие; модификация переменных цикла)
оператор;
for (var i=0; i<10; i++,j++) { alert(i); }
152
JavaScript
eval(строчка) – аргумент выполняется как код программы;
eval('ale'+'rt("'+'eval'+'");'); //появится сообщение
«eval»
Определение всех свойств и методов объекта
for(v in ОБЪЕКТ)
{
document.write(
v + " : " +
eval("typeof(ОБЪЕКТ." + v + ")") + " : " +
eval("ОБЪЕКТ."+v)+"<br>");
}
На экране для каждого свойства и метода будут выведены
его тип и значение.
153
JavaScript
Функции для работы с таймером
ПЕРЕМЕННАЯ=setTimeout('КОД_ПРОГРАММЫ', ВРЕМЯ);
Код программы выполнится через указанное время (в
милисекундах)
var t=setTimeout('alert("Таймер")', 1000); или
var t=setTimeout("alert('Таймер')", 1000);
Через 1 секунду появится сообщение «Таймер»
Сброс таймера по идентификатору:
clearTimeout(ИДЕНТИФИКАТОР)
154
JavaScript
Функции для работы с таймером
var t=setInterval('КОД_ПРОГРАММЫ', ВРЕМЯ);
Код программы будет выполняться периодически с указанным
интервалом (в милисекундах)
var t=setInterval('alert("Таймер")', 1000);
Через каждую секунду будет появляться сообщение «Таймер»
155
JavaScript
Работа с графическими изображениями
document.images[0] – первое изображение в HTML-документе
document.images[0].src='http://aics.ru/img/logo.gif'; изменение изображения (загрузка с сервера aics.ru)
document.getElementById('logo').src='http://aics.ru/img/lo
go.gif';
var img1=new Image; - создание нового объекта-изображения
img1.src='http://aics.ru/img/logo.gif'; - загрузка
изображения в объект
document.images[0].src = img1.src; - изменение изображения
в HTML-документе (загрузка из кэша браузера)
document.getElementById('logo').src = img1.src;
156
JQuery
JavaScript-библиотека, позволяющая упростить
взаимодействие с DOM, обработку событий, использование
визуальных эффектов (в т.ч. анимации) и AJAX-запросов.
Преимущества:
• Отделение логики веб-приложения от содержимого и дизайна
• Кроссбраузерность
• Исключение повторения кода
Подключение JQuery
1) Использование Google Hosted Libraries
<!DOCTYPE html>
<html>
<head>
<title>JQuery</title>
<meta charset='utf-8'>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js">
</script>
</head>
<body>
</body>
</html>
2) Загрузить библиотеку с http://jquery.org
<script src="jquery-1.8.2.min.js"></script>
Использование JQuery
Работа с JQuery осуществляется с помощью функции $,
которая принимает селектор и возвращает JQuery-объект.
<body>
...
<script>
$(document).ready(function() {
// код
});
</script>
</body>
или
<script>
$(function() {
// код
});
</script>
Базовые селекторы
$("*")
$("ЭЛЕМЕНТ")
$("#ИДЕНТИФИКАТОР")
$(".КЛАСС")
Иерархические селекторы
$("E1 E2")
$("E1>E2")
$("E1~E2")
$("E1+E2")
Базовые фильтры
$("СЕЛЕКТОР:odd") – элементы с нечетными индексами
(индекс с 0)
$("СЕЛЕКТОР:even") – элементы с четными индексами
$("СЕЛЕКТОР:gt(N)") – элементы с индексами >
N
$("СЕЛЕКТОР:lt(N)") – элементы с индексами <
N
$("СЕЛЕКТОР:eq(N)") – элемент с индексом N
$("СЕЛЕКТОР:first") – первый элемент
$("СЕЛЕКТОР:last") – последний элемент
Базовые фильтры
$("СЕЛЕКТОР:not(СЕЛЕКТОР2)") – элементы, не
подпадающие под описание СЕЛЕКТОР2
$("СЕЛЕКТОР:header") – элементы-заголовки (h1, h2,
…)
$("СЕЛЕКТОР:animated") – элементы, анимируемые в
настоящий момент
Объединение фильтров
$("СЕЛЕКТОР:ФИЛЬТР1:ФИЛЬТР2:ФИЛЬТР3")
$("СЕЛЕКТОР").filter(":ФИЛЬТР1").filter(":ФИЛЬТР2"
).filter(":ФИЛЬТР3")
Фильтры содержимого и видимости
$("СЕЛЕКТОР:visible") – элементы, видимые в
настоящий момент
$("СЕЛЕКТОР:hidden") – элементы, скрытые в
настоящий момент
$("СЕЛЕКТОР:parent") – элементы, имеющие дочерние
элементы
$("СЕЛЕКТОР:empty") – пустые элементы (без
содержимого)
$("СЕЛЕКТОР:has(СЕЛЕКТОР2)") – элементы,
содержащие дочерние элементы, подпадающие под
описание СЕЛЕКТОР2
$("СЕЛЕКТОР:contains(ТЕКСТ)") – элементы,
содержащие ТЕКСТ
Действия с JQuery-объектом
height, width
css
addClass, removeClass, toggleClass
toggle, hide, show
slideToggle, slideUp, slideDown
fadeOut, fadeIn, fadeTo
animate
html
text
on, off
События: click, dblclick, focus, blur, change,
keypress, keydown, keyup, mousedown, mouseup,
mousemove, hover, mouseenter, mouseleave
Программирование для Web
CGI (Common Gateway Interface)
CGI - это спецификация обмена данными между прикладной
программой, выполняемой по запросу пользователя, и HTTPсервером, который данную программу запускает.
166
Программирование для Web
CGI (Common Gateway Interface)
Часть информации заголовка HTTP-запроса преобразует в
переменные окружения, которые доступны для анализа CGIскриптом. Если запрос имеет тело, то оно становится
доступным скрипту через поток стандартного ввода.
CGI-скриптом называют программу, написанную на любом языке
программирования или командном языке, которая осуществляет
обмен данными с HTTP-сервером в соответствии со
спецификацией Common Gateway Interface.
Наиболее популярные языки программирования: PHP, Perl, Python,
Ruby, C.
переменные окружения
аргументы командной строки
стандартный поток ввода
стандартный поток вывода
HTTP-сервер
CGI-приложение
167
Программирование для Web
CGI (Common Gateway Interface)
Метод GET:
GET /cgi-bin/temp/a.cgi?a=1&b=2 HTTP/1.1
Referer: http://tpu.ru/
User-Agent: Mozilla/4.0 (compatible; MSIE 6.0; Windows NT
5.1)
Host: aics.ru
<пустая строка>
Переменные окружения:
REQUEST_METHOD = GET
QUERY_STRING = a=1&b=2
HTTP_REFERER = http://tpu.ru/
HTTP_USER_AGENT = Mozilla/4.0 (compatible; MSIE 6.0;
Windows NT 5.1)
REMOTE_ADDR = 195.208.176.1
Стандартный поток ввода: ничего
168
Программирование для Web
CGI (Common Gateway Interface)
Метод POST:
POST /cgi-bin/temp/a.cgi?a=1&b=2 HTTP/1.1
Referer: http://tpu.ru/
User-Agent: Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1)
Host: aics.ru
Content-Type: application/x-www-form-urlencoded
Content-Length: 8
<пустая строка>
PostData
Переменные окружения:
REQUEST_METHOD = POST
QUERY_STRING = a=1&b=2
CONTENT_TYPE = application/x-www-form-urlencoded
CONTENT_LENGTH = 8
HTTP_REFERER = http://tpu.ru/
HTTP_USER_AGENT = Mozilla/4.0 (compatible; MSIE 6.0; Windows NT
5.1)
REMOTE_ADDR = 195.208.176.1
Стандартный поток ввода: PostData (8 байт)
169
Программирование для Web
CGI (Common Gateway Interface)
Самое простое CGI-приложение на Perl:
#!/usr/bin/perl
print "Content-type: text/html\n\nHello";
HTTP-ответ, который получает пользователь:
HTTP/1.1 200 OK
Date: Tue, 20 Nov 2005 17:54:02 GMT
Server: Apache/2.0.52 (FreeBSD) PHP/5.0.3
Connection: close
Content-Type: text/html
<пустая строка>
Hello
170
Программирование для Web
CGI (Common Gateway Interface)
Более сложное CGI-приложение на Perl:
#!/usr/bin/perl
print "Content-type: text/html; charset=windows-1251\n";
print "Server: microsft.com\n";
print "X-Powered-By: PERL\n\n";
print "Hello";
HTTP-ответ, который получает пользователь:
HTTP/1.1 200 OK
Date: Sat, 11 Nov 2006 04:51:38 GMT
Server: Apache
Connection: close
X-Powered-By: PERL
Content-Type: text/html; charset=windows-1251
<пустая строка>
Hello
171
Программирование для Web
CGI (Common Gateway Interface)
Самое простое CGI-приложение на C:
#include <stdio.h>
int main(void) {
printf("Content-Type: text/plain;charset=windows-1251\n\n");
printf("Hello");
return 0;
}
172
Программирование для Web
CGI (Common Gateway Interface)
Самое простое CGI-приложение на PHP:
<?php print "Hello"; ?>
HTTP-ответ, который получает пользователь:
HTTP/1.1 200 OK
Date: Tue, 20 Nov 2005 17:56:41 GMT
Server: Apache/2.0.52 (FreeBSD) PHP/5.0.3
X-Powered-By: PHP/5.0.3
Content-Length: 5
Connection: close
Content-Type: text/html
<пустая строка>
Hello
173
Программирование для Web
Язык программирования PHP
PHP – PHP: Hypertext Preprocessor (или Personal Home Page Tools)
– «Гипертекстовый препроцессор» - язык сценариев общего
назначения, предназначенный в первую очередь для быстрого
создания динамически генерируемых страниц для Web.
Преимущества:
1) PHP может использоваться на всех крупных платформах.
2) Для большинства существующих веб-серверов существуют модули
PHP.
3) Встроенная поддержка наиболее популярных СУБД, сессий,
cookies, переменных запроса.
4) PHP – более безопасный язык для написания CGI-приложений по
сравнению с Perl и C.
5) Встроенная поддержка вывода сообщений об ошибках и
предупреждений напрямую в браузер.
174
Программирование для Web
Язык программирования PHP
Недостатки:
Несогласованный синтаксис функций:
strlen($s); //string length
str_replace(‘a’, ‘b’, $s); //string replace
strpos($s, ‘a’); //string position
ltrim($s); //left trim
isset($v)
curl_getinfo
is_null($v)
ftp_get_option
mssql_fetch_array
htmlspecialchars($s);
mssql_free_result
html_entity_decode($s);
mssql_rows_affected
get_html_translation_table();
pdf_open_memory_image
pdf_set_layer_dependency
pdf_open_pdi_document
175
Программирование для Web
Язык программирования PHP
Скрипт (файл с расширением php):
<html><head><title>Заголовок</title></head>
<body>My name is <?php
$a='PHP'; //это комментарий в тексте скрипта
print $a; /* это тоже комментарий*/ ?></body>
</html>
Результат:
<html><head><title>Заголовок</title></head>
<body>My name is PHP</body>
</html>
176
Программирование для Web
Язык программирования PHP
Вставить содержимое файла links.html:
<html><head><title>Заголовок</title></head>
<body><?php include('links.html'); ?></body>
</html>
Результат:
<html><head><title>Заголовок</title></head>
<body>Links: <a href='http://aics.ru'>AICS</a></body>
</html>
177
Программирование для Web
Язык программирования PHP
Основные типы:
1) логический (True, False) <?php $a=True; ?>
2) целые числа <?php $a=10; ?>
3) вещественные числа <?php $a=4.32; ?>
4) строки <?php $a='str'; $b="str2"; ?>
5) массивы <?php $a=array('frist', 'second', 'third'); ?>
Тип переменной является контекстно-зависимым:
<?php $a='str'; $a=10.2; $a=False; ?>
Проверка типа переменной:
$a=10; if (is_int($a)) { print "Целое число"; }
$a=10.1; if (is_float($a)) { print "Вещественное число"; }
$a='str'; if (is_string($a)) { print "Строчка"; }
$a=array(1,2); if (is_array($a)) { print "Массив"; }
$a="123.3"; if (is_numeric($a)) { print "Число"; }
$a=123.3; if (is_numeric($a)) { print "Число"; }
178
Язык программирования PHP
Операторы сравнения
== равно != не равно – если типы сравниваемых операндов
не равны, происходит преобразование типов
=== строго равно, !== строго не равно – сравниваются как
типы операндов, так и их значения
"10" == 10 // true
"10" === 10 // false
"1" == true // true
"1" === true // false
0 == '' // true
0 == ' \r\n ' // true
0 === ' \r\n ' // false
179
Программирование для Web
Язык программирования PHP
Оператор условия:
if (is_string($a)) {
print "Строчка";
$res=$a;
}
elseif (is_array($a)) {
print "Массив";
}
elseif ($a==$b && ($c>=$d || $f<$x)) {
print $a;
}
else {
print $b;
}
180
Программирование для Web
Язык программирования PHP
Операции со строками
Объединение строк:
$a='First'; $b='Second'; $c=$a.$b; print $c;
FirstSecond
Нахождение подстроки:
$s2 = substr("abcdef", 1, 3); //в $s2 записано "bcd"
//параметры: исходная строка, начальный символ (счёт с
0), количество символов
$s2 = substr("abcdef", 2); //в $s2 записано "cdef" - до
конца строки
$s2 = substr("abcdef", -3); //в $s2 записано "def" отчёт от конца строки
$s2 = substr("abcdef", 1, -1); //в $s2 записано "bcde" со второго символа до предпоследнего
181
Программирование для Web
Язык программирования PHP
Операции со строками
Кавычки: " или '
$a='str';
$b='___ $a ___'; //$b содержит ___ $a ___
$c="___ $a ___"; //$c содержит ___ str ___
Определение длины строки:
print strlen($str);
Замена подстроки в строке:
$str=str_replace('ple', '!', 'example');
//аргументы: что заменять, на что заменять, где заменять
//$str содержит exam!
182
Программирование для Web
Язык программирования PHP
Операции со строками
Сформировать массив из строки:
$b=explode('*', 'abc*de*f');
//аргументы: строка-разделитель, исходная строка
//$b - это массив из 3-х элементов: 'abc', 'de', 'f'
Сформировать строку из массива:
$mas=array('a','b','c');
$a=implode('|', $mas);
//аргументы: строка-разделитель, исходный массив
//в $a содержится строка 'a|b|c'
183
Программирование для Web
Язык программирования PHP
Операции с массивами
Добавление нового элемента:
$a=array();
$a[]=1; //первый элемент с индексом 0
$a[10]=2;
$a[]=3; //элемент с индексом 11
print $a[11]; //на экране 3
Перебор всех элементов:
foreach ($a as $v) {
print $v. '-';
}
//на экране 1-2-3$a=array(1,2,3);
for ($i=0; $i<count($a); $i++) { print $a[$i].'-'; }
//на экране 1-2-3184
Программирование для Web
Язык программирования PHP
Операции с файлами
Чтение текстового файла в массив:
$ar=file('data.txt');
$fp=fopen('data.txt', 'r');
while (!feof($fp)) {
$ar[]=fgets($fp);
}
fclose($fp);
Запись массива в текстовый файл:
$fp=fopen('data.txt', 'w');
foreach ($ar as $v) { fputs($fp, $v); }
fclose($fp);
185
Программирование для Web
Язык программирования PHP
Обработка форм
Переменные окружения:
getenv('REMOTE_ADDR')
getenv('HTTP_USER_AGENT')
Данные, переданные из формы методом GET:
$_GET['user']
$_GET['fieldname1']
Проверка, что переменная определена и имеет значение,
отличное от NULL:
if (isset($_GET['fieldname1'])) { print
$_GET['fieldname1']; }
Данные, переданные из формы методом POST:
$_POST['user']
$_POST['fieldname1']
186
Программирование для Web
Язык программирования PHP
Дата и время
Функция time() – возвращает текущее время, выраженное в
количествах секунд, прошедших с 1 января 1970 г.
print time(); //1133923633
Функция date(string format[, int time]) – возвращает
время time (или текущее время) в виде строки, заданным
форматом format
Некоторые символы строки формата:
d - день месяца (число, 2 символа);
m - месяц (число, 2 символа);
Y - год (4 цифры);
y - год (2 цифры);
h - час, 12-часовой формат (2 символа);
H - час, 24-часовой формат (2 символа);
i - минуты (2 символа);
s - секунды (2 символа).
print date('d/m/Y', 1133923633); //07/12/2005
187
Программирование для Web
Cookies
Cookies – это текстовые переменные, которые
устанавливаются на компьютере клиента и передаются в
HTTP-заголовке.
Устанавливаются в заголовке HTTP-ответа:
Set-Cookie: name=value; expires=дата; domain=имя_хоста;
path=путь; secure; HttpOnly
HTTP-ответ:
HTTP/1.1 200 OK
Date: Wed, 05 Dec 2005 16:11:56 GMT
Server: Apache/2.1.4 (FreeBSD) PHP/5.0.3
X-Powered-By: PHP/5.0.3
Set-Cookie: ct=1133925116
Content-Length: 726
Connection: close
Content-Type: text/html
<html>...
188
Программирование для Web
Cookies
HTTP-ответ:
HTTP/1.1 200 OK
Date: Wed, 05 Dec 2005 16:11:56 GMT
Server: Apache/2.1.4 (FreeBSD) PHP/5.0.3
X-Powered-By: PHP/5.0.3
Set-Cookie: ct2=1133925364; expires=Thu, 05-Dec-2006 16:16:04 GMT
Content-Length: 726
Connection: close
Content-Type: text/html
<html>...
189
Программирование для Web
Cookies
Cookies передаются на сервер браузером в заголовке HTTPзапроса:
Cookie: name1=value1; name2=value2
HTTP-запрос:
GET /~temp/cook.php HTTP/1.0
Host: client5.acs.cctpu.edu.ru
Keep-Alive: 300
Referer: http://client5.acs.cctpu.edu.ru/~temp/cook2.php
Cookie: ct2=1133925364; ct=1133925557
190
Программирование для Web
Cookies
В PHP-скрипте Cookies устанавливаются и удаляются
функцией
setcookie (string name [, string value [, int expire [, string
path [, string domain [, int secure [, int httponly]]]]]])
Устанавливать cookies необходимо перед любым выводом в
HTML-документ.
setcookie('cookname', 'Hello'); - установка переменной
cookname на сеанс работы браузера
setcookie('cookname', 'Hello', time()+3600*24*365); установка переменной cookname на год
setcookie('cookname', 'Hello', time()-10); переменной cookname
удаление
Вывод переменной cookname, хранящейся в Cookies:
print $_COOKIE['cookname'];
191
Программирование для Web
Сессии
Сессии – механизм, позволяющий хранить на сервере
произвольные данные, индивидуальные для каждого
пользователя, между запусками скриптов.
Пользователю в Cookies записывается PHPSESSID – уникальный
идентификатор сессии, а на сервере этому PHPSESSID
сопоставляется некоторый набор данных.
Инициализация сессии производится с помощью функции
session_start(). При этом выполняются следующие действия:
• Если пользователь запускает сценарий впервые, у него
устанавливается Cookie с PHPSESSID и создается временное
хранилище, ассоциированное с этим идентификатором.
• Определяется, какое хранилище связано с текущим
идентификатором пользователя.
• Если в хранилище имеются какие-то переменные, создаются
соответствующие элементы массива $_SESSION со значениями,
сохраненными при предыдущем завершении скрипта.
192
Программирование для Web
Сессии
Регистрация переменной var_name:
$_SESSION['var_name']='значение переменной';
Проверить, зарегистрирована ли данная переменная, можно с
помощью функции isset:
if (isset($_SESSION['var_name'])) { ... }
Отменить регистрацию переменной:
unset($_SESSION['var_name']);
193
Программирование для Web
Классы в PHP
class MyClass {
private $title = 'default title';
//переменная класса с режимом доступа private
public $count;
//переменная класса с режимом доступа public
function MyClass($t) { //конструктор класса
$this->title = $t;
}
function out() { //метод класса
print "Title: ".$this->title."<br>";
print "Count: ".$this->count;
}
}
$obj = new MyClass("new object"); //создание объекта
$obj->count = 10; //обращение к переменным объекта
$obj->out(); //обращение к методам объекта
unset($obj); //уничтожение объекта
194
Программирование для Web
AJAX
Шаг 1 – создание объекта XMLHttpRequest
<script>
...
var req;
if (window.XMLHttpRequest)
{
// код для IE7+, Firefox, Chrome, Opera, Safari
req = new XMLHttpRequest();
}
else if (window.ActiveXObject)
{
// код для IE6, IE5
req = new ActiveXObject("Microsoft.XMLHTTP");
}
else { alert("Ваш браузер не поддерживает XMLHTTP!"); }
}
...
</script>
195
Программирование для Web
AJAX
Шаг 2 – указать обработчик изменения состояния объекта
<script type='text/javascript'>
...
req.onreadystatechange = myready;
...
</script>
Шаг 3 – обработчик изменения состояния объекта
<script type='text/javascript'>
...
function myready() {
if (req.readyState == 4 && req.status == 200) {
alert( req.responseText );
}
}
...
</script>
196
Программирование для Web
AJAX
Шаг 4 – выполнить запрос
<script type='text/javascript'>
...
req.open('GET', 'http://site.ru/db.php', true);
req.send(null);
...
</script>
197