Технологии разработки пользовательских интерфейсов Вичугов Владимир Николаевич доцент каф. АиКС ИК ТПУ Томск 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. Структура файлов
Режим доступа 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 /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) = = = Атрибут pack (упаковать) – выравнивание в контейнере по основному направлению Значения: start – сдвинуть в начало контейнера, end – сдвинуть в конец контейнера, center – элементы расположены по центру
Платформа Mozilla. Модель коробки (Box Model)
Атрибут align (выровнять) – выравнивание в контейнере по вспомогательному направлению Значения: start – сдвинуть в начало контейнера, end – сдвинуть в конец контейнера, center – элементы расположены по центру, baseline – выровнять по линии текста, stretch (значение по умолчанию) – растянуть элементы
Платформа Mozilla. Модель коробки (Box Model)
Атрибут flex (flexible - гибкий) определяет насколько элемент будет растягиваться. Значение – целое число.
Платформа Mozilla. Элементы управления Кнопка button Атрибуты: label – текст на кнопке image – URL картинки (можно задать CSS-свойством list-style-image) orient=horizontal|vertical – положение картинки относительно текста dir=normal|reverse – положение картинки относительно текста disabled=false|true accesskey – клавиша быстрого доступа Вместо image="img/ok.png" можно использовать CSS-свойство list-style-image: style="list-style- image:url('img/ok.png')"
Платформа 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-элементов... HTML-таблица
Платформа 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 Субъект = Ресурс Предикат = Атрибут ресурса Объект = Значение атрибута Пример: Ресурс (субъект) = Атрибут (предикат) = язык ресурса Объект = ru Представление фактов в виде XML ... или ...
Платформа Mozilla. RDF Для описания одного факта используется тег Description: ЗНАЧЕНИЕ … ЗНАЧЕНИЕ Пример: en
Файл db.rdf Платформа Mozilla. RDF
Файл db.rdf Платформа Mozilla. RDF
Файл db.rdf Платформа Mozilla. RDF
Файл db.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. Документация по классам и интерфейсам, полученная на основе исходных кодов компонентов: Документация по классам и интерфейсам в среде Eclipse Spket:
Платформа Mozilla. XPCOM. Запись в локальный файл 1) Создать объект с интерфейсом nsILocalFile: var Cc = Components.classes; var Ci = Components.interfaces; var file = lFile); file.initWithPath("c:\\text.txt"); Получить атрибуты файла, размер, скопировать файл, переместить файл, удалить файл, запустить файл, проверить его существование. if (!file.exists()) { file.create(Ci.nsIFile.NORMAL_FILE_TYPE, 0640) };
Платформа Mozilla. XPCOM. Запись в локальный файл 2) Создать объект с интерфейсом nsIFileOutputStream: var ostream = stream;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) Создать объект с интерфейсом nsIConverterOutputStream: var cstream = stream;1"].createInstance(Ci.nsIConverterOutputStream); cstream.init(ostream, "UTF-8", 0, 0); cstream.writeString(data); cstream.close();
Платформа Mozilla. XPCOM. Чтение из локального файла 1) Создать объект с интерфейсом nsILocalFile: var file = lFile); file.initWithPath("c:\\text.txt"); Получить атрибуты файла, размер, скопировать файл, переместить файл, удалить файл, запустить файл, проверить его существование. if (!file.exists()) return;
Платформа Mozilla. XPCOM. Чтение из локального файла 2) Создать объект с интерфейсом nsIFileInputStream: var istream = stream;1"].createInstance(Ci.nsIFileInputStream); istream.init(file, 0x01, 0, 0); Флаги для операций ввода/вывода: 0x01 – только чтение 0x02 – только запись 0x04 – чтение и запись 0x08 – создание файла если он не существует 0x10 – добавить в конец файла (append) 0x20 – обрезать файл (truncate) istream.available() – количество доступных байт в потоке
Платформа Mozilla. XPCOM. Чтение из локального файла 3) Создать объект с интерфейсом nsIConverterInputStream: var cstream = stream;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) Создать объект с интерфейсом nsILocalFile: var file = lFile); file.initWithPath("c:\\windows\\media\\tada.wav"); 2) Получить ссылку на объект service;1 с интерфейсом nsIIOService: var ioService = service;1"].getService(Ci.nsIIOService); var fileURI = ioService.newFileURI(file); 3) Создать объект с интерфейсом nsISound: var sound = 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);
91 WWW (World Wide Web) – всемирная паутина Гипертекст (Hypertext) - … 1989 г. Тим Бернерс-Ли, Европейская лаборатория физики элементарных частиц (CERN) WWW (World Wide Web) - … 4 основные идеи: 1)гипертекст; 2)универсальная идентификация ресурсов; 3) клиент/серверная архитектура; 4) языки разметки. HTML (Hypertext Markup Language) - …
92 URI (Uniform Resource Identifier) – единообразный идентификатор ресурса. Формат: МЕТОД_ДОСТУПА:ИДЕНТИФИКАТОР[?ЗАПРОС][#ФРАГМЕНТ] Примеры: urn:ISBN: ftp://ftp.admin.tomsk.ru/pub/distr/ file://C:\Windows\temp\txt.html#chapter2 news:comp.news.tomsk.ru tel: telnet:// :4352 URL (Universal Resource Locator) – универсальный адрес ресурса – подмножество URI, которое содержит информацию о местонахождении ресурса для доступа через сеть Интернет. URI и URL
93 Пример URL: Абсолютные и относительные URL Текущий URL (абсолютный URL) Относительный URLРезультат
94 Развитие WWW (World Wide Web): 1)Символьный гипертекст (текстовый браузер LineMode, 1991 г.) 2)Графически-ориентированные статические HTML- документы (графический браузер Mosaic, 1993 г.) 3)Динамические HTML-документы (SSI, CGI, Perl, PHP, ASP) 4)Активные HTML-документы (с 1995 г. - Java, JavaScript, Flash)
95 HTTP-запрос: Заголовок Тело запроса Первая строка заголовка: метод запроса, URL запрашиваемого ресурса, версия протокола HTTP Остальные строки – поля заголовка: пары имя: значение Методы запроса: GET – запрос данных (вместе с HTTP-заголовками) HEAD – запрос HTTP-заголовков без данных. POST – отправка данных на сервер. HTTP (Hypertext transfer protocol) – протокол передачи гипертекста
96 Пример HTTP-запроса (метод GET): GET HTTP/1.1 Accept: */* Referer: User-Agent: Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1) Host: tpu.ru Connection: close (пустая строка)
97 Пример HTTP-запроса (метод POST): POST HTTP/1.1 Host: acs.cctpu.edu.ru Content-Type: application/x-www-form-urlencoded Content-Length: 9 var1=abcd
98 HTTP-ответ: Заголовок Тело ответа Первая строка заголовка – строка состояния: версия протокола и трехзначный код состояния Остальные строки – поля заголовка: пары имя: значение
99 Пример HTTP-ответа (статический документ): HTTP/ OK Date: Wed, 14 Sep :31:03 GMT Server: Apache/ (Unix) PHP/4.3.5 Last-Modified: Thu, 11 Mar :24:02 GMT ETag: "1509a-14e-f865835b" Content-Length: 8686 Content-Type: text/html; charset=WINDOWS Пример HTTP-ответа (динамический документ): HTTP/ OK Date: Sun, 02 Mar :56:19 GMT Server: Apache/ (Win32) X-Powered-By: PHP/5.0.3 Content-length: 62 Connection: close Content-Type: text/html; charset=WINDOWS
100 HTML (Hypertext Markup Language) – язык разметки гипертекста HTML является одним из приложений SGML (Structured Generalized Markup Language – обобщенный структурированный язык разметки, 1986 г.) Конструкции языка HTML: 1) Элементы (абзацы, ссылки, списки, таблицы …) начальный тег (обязательный ), содержимое, конечный тег ( ). Пример: Это жирный текст, 2) Атрибуты – свойства элементов, в начальном теге пары атрибут/значение. Пример: текст...
101 3) Ссылки на символы – числовые или символьные имена символов. &... ; Примеры: < = < © = © € = 4) Комментарии
102 XHTML (Extensible Hypertext Markup Language) – расширяемый язык разметки гипертекста. Преимущества: 1) обработка проще и быстрее, чем HTML; 2) доступны технологии, разработанные для XML. Требования: 1) все элементы должны быть закрыты; = 2) у атрибутов обязательно должно быть значение, заключенное в кавычки; = 3) имена тегов – строчными буквами; = 4) при нарушении структуры возникает ошибка.
103 Документ в формате HTML состоит из трех частей: 1.Строка с версией HTML 2.Раздел заголовков (элемент HEAD). 3.Тело документа (элемент BODY или элемент FRAMESET) Разделы 2 и 3 должны находиться в элементе HTML: Заголовок документа Первый HTML-документ.
104 Версии HTML:
105 Элемент HEAD (+/+ - начальный и конечный теги обязательны) – вспомогательная информация о документе, которая не является содержимым документа (название, кодировка, информация для поисковых машин). Может содержать элементы TITLE, META, LINK, BASE, STYLE. Элемент TITLE (+/+ - начальный и конечный теги обязательны) – название документа, отображается в заголовке окна браузера. Элемент МЕТА (+/ – - начальный тег обязателен, конечный запрещен) – неотображаемая информация и инструкции для браузера.
106 Элемент МЕТА (продолжение) (HTTP/1.0) = HTTP-заголовку Content-type: text/html; charset=koi-8r
107 Элемент МЕТА (продолжение) index, noindex, follow, nofollow, all="index, follow", none="noindex, nofollow"
108 Элемент BASE (+/-) – указание базового URL-адреса, относительно которого будут определяться относительные адреса Пример: cars/volvo.jpg =
109 Элемент LINK (+/-) – указание отношений документов: ссылки на следующий, предыдущий, главный документы, ссылки на внешние таблицы стилей, ссылки для поисковых машин на альтернативные версии документа (другие языковые версии, версии для другого носителя (например, PDF или проектор)) Пример: href – URL связанного ресурса type – тип связанного ресурса rel - тип связи
110 Разделение структуры документа и представления Без разделения:.... Заголовок.... С разделением: h1 { color: red; }.... Заголовок....
111 Преимущества разделения структуры документа и представления 1.Повторное использование стилей. 2.Возможность изменения стилей без изменения документа. 3.Возможность выбора пользователем одной из возможных таблиц стилей.
112 Элемент BODY (+/+) – определяет содержимое документа Атрибуты: background = URL (устаревший) text = COLOR (устаревший) link = COLOR (устаревший) vlink = COLOR (устаревший) alink = COLOR (устаревший) bgcolor = COLOR (устаревший) style =... id =... class =... onload =... (также onunload, onclick, ondblclick, onfocus, onblur, onkeydown, onkeyup, onkeypress, onmousedown, onmouseup, onmousemove, onmouseover, onmouseout...) Пример: COLOR = white, black,... или #RRGGBB от # до #FFFFFF
113 Элементы DIV и SPAN (+/+) – группировка элементов Атрибуты: title =... align =... (left, right, center, justify) (устаревший) style =... id =... class =... onclick =... (и другие обработчики) Пример: Первый второй третий четвертый
114 Элементы H1, H2, …, H6 (+/+ head) – определяют заголовки текста Пример: Заголовок Элемент P (+/? paragraph) – определяет параграф (абзац) текста Пример: Первый параграф Второй параграф Элемент BR (+/ break line) – переход на следующую строку Элементы STRONG и B (+/+ bold) – жирный текст Элементы EM и I (+/+ emphasize, italics) – курсивный шрифт
115 Элемент UL (+/+ unordered list) - ненумерованный список. Атрибуты: основные атрибуты + TYPE (=disc, circle, square) - стиль элементов списка. Элементы LI (+/? list item) – элементы списка. Пример: Первый Второй Гл Гл Третий
116 Элемент OL (+/+ ordered list) - нумерованный список. Атрибуты: основные атрибуты + TYPE (=1, a, A, i, I) - стиль нумерации; START (число) - начальный номер первого элемента. Элементы LI (+/? list item) – элементы списка. Пример: Первый Пятый Введение Заключение Шестой
117 Элемент PRE (+/+ preformatted) - форматированный текст. В документе сохраняются пробелы и перевод строки. Пример: Этот текст Ф О Р М А ТИРОВАН
118 Элемент IMG (+/- image) - изображение. Атрибуты: основные атрибуты + alt - кратное описание (обязателен); src (source) - URI изображения; width, height - ширина и высота изображения; align (=left, right, middle, bottom, top) - выравнивание изображения в документе (устаревший); border - ширина рамки в пикселях (устаревший). Пример:
119 Элемент A (+/+ anchor) - ссылка на другой ресурс либо на другую часть текущего HTML-документа (внутренняя ссылка). Атрибуты: основные атрибуты + href (hypertext reference) - URL связанного ресурса; accesskey - клавиша быстрого доступа (ALT + клавиша); tabindex - положение в последовательности перехода; target – имя окна, в котором будет загружаться ресурс (_blank – в новом окне) name - имя внутренней ссылки (устаревший в HTML5);
120 Элемент TABLE (+/+) - таблица (позволяет упорядочить данные в строки и столбцы ячеек). Атрибуты: основные атрибуты + cellspacing – ширина поля между границами таблицы и границами ячеек (и между границами ячеек) (устаревший в HTML5); cellpadding – ширина поля между границами ячеек и их содержимым (устаревший в HTML5); width – ширина всей таблицы (устаревший); align (=left, center, right) – выравнивание таблицы относительно документа (устаревший); bgcolor – цвет фона (устаревший); border – ширина 3D-границы (устаревший);
121 Элемент TABLE (продолжение) Элемент TR (+/?) (Table Row) определяет ряд элементов. Атрибуты: основные атрибуты + valign (=top, middle, bottom) – выравнивание содержимого ячеек по вертикали (устаревший); bgcolor – цвет фона ячеек (устаревший); align (=left, center, right, justify) – выравнивание содержимого ячеек по горизонтали (устаревший);
122 Элемент TABLE (продолжение) Элемент TD (+/?) (Table Data) определяет элемент таблицы. Атрибуты: основные атрибуты + rowspan – количество рядов, охваченных текущей ячейкой; colspan – количество столбцов, охваченных текущей ячейкой; width – рекомендуемая ширина ячейки; height – рекомендуемая высота ячейки. align, valign, bgcolor – как в TR (устаревшие);.
123 Каскадные таблицы стилей Способы задания: 1.В элементе HEAD: Подключение внешнего файла: 3. Как атрибут элементов:...
124 Каскадные таблицы стилей Задание стиля: СЕЛЕКТОР1 { свойство1: значение1; свойство2: значение2; } Виды селекторов: Типы элементов: div {... } a {... } * {... } – все элементы Классы элементов:.myclass1 {... } Идентификаторы элементов: #myid1 {... }
125 Каскадные таблицы стилей Свойства: Тип шрифт: 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(' background-repeat: repeat-x; (repeat; repeat-x; repeat-y; no-repeat)
126 Каскадные таблицы стилей Свойства: Декоративные эффекты текста: text-decoration: underline (none; overline; blink) Рамка: border: 1px solid #800; Расстояние от содержимого до рамки: padding: 10px; padding-left: 2px; Расстояние от рамки до внешних границ: margin: 20px; margin-top: 4px; Высота содержимого элемента: height: 20px; Ширина содержимого элемента: width: 20px;
127 Каскадные таблицы стилей Свойства: Расположение элемента (абсолютное): position: absolute; top: 10px; left: 20px; Расположение элемента (относительное): position: relative; top: -5px; left: 5px; Расположение элемента (фиксированное): position: fixed;
128 Каскадные таблицы стилей Иерархические селекторы: E1 E2 {... } – для элемента/класса/идентификатора E2, находящегося в элементе/классе/идентификаторе E1 (любой уровень вложенности); E1>E2 {... } – для элемента/класса/идентификатора E2, находящегося в элементе/классе/идентификаторе E1 (первый уровень вложенности);
129 Каскадные таблицы стилей Иерархические селекторы: E1~E2 {... } – для элемента/класса/идентификатора E2, следующего за элементом/классом/идентификатором E1; E1+E2 {... } – для элемента/класса/идентификатора E2, непосредственно следующего за элементом/классом/идентификатором E1;
130 Каскадные таблицы стилей Псевдоклассы: div:hover {... } – вид элемента при наведении указателя мыши; input:focus {... } - Вид элемента при получении им фокуса; a:link {... } – вид ссылки на непосещенный ресурс; a:visited {... } – вид ссылки на посещенный ресурс; img:first-child {... } – вид картинки, которая является первым дочерним элементом для своего родительского элемента img:last-child {... }
131 Каскадные таблицы стилей Псевдоэлементы: p:fist-letter {... } – вид первой буквы параграфа; p:first-line {... } - вид первой строчки параграфа; div:before { content: "...";... } – добавляет псевдоэлемент как первый дочерний элемент элемента div; div:after { content: "...";... } – добавляет псевдоэлемент как последний дочерний элемент элемента div;
132 SSI (Server Side Include) Включения на стороне сервера - набор команд, позволяющий включить в страницу информацию, недоступную средствами HTML Веб-сервер обрабатывает HTML-документ c SSI- директивами, выполняет их, результат возвращает клиенту..shtml – HTML-документ с SSI-директивами
133 SSI (Server Side Include) Директивы set, echo, printenv set – установить значение переменной окружения параметр var – имя переменной параметр value – значение переменной echo – вывод значения переменной окружения параметр var – имя переменной printenv – вывод всех переменных окружения
134 SSI (Server Side Include) Некоторые переменные окружения REMOTE_ADDR – IP адрес клиента REMOTE_USER – имя клиента (если была проведена аутентификация) HTTP_USER_AGENT – браузер клиента HTTP_REFERER – ссылающаяся страница QUERY_STRING – строка запроса SERVER_NAME – имя сервера
135 SSI (Server Side Include) Директивы условий (if, elif, else, endif) HTML-код, который будет выводиться, если УСЛОВИЕ1 истинно HTML-код, который будет выводиться, если УСЛОВИЕ1 ложно, а УСЛОВИЕ2 истинно HTML-код, который будет выводиться, если все условия ложны Обязательно двойные кавычки в условии. Условие - это либо строка, которая является истинной, если непустая, или набор операторов сравнения строк. Операторы: =,!=, и >= К переменным окружения добавляется знак $ Поиск подстроки: $MyName=/Vas/ Объединение условий с помощью скобок и операторов && (И) и || (ИЛИ)...
136 SSI (Server Side Include) Директива include include - включение содержимого файла параметр file – имя файла относительно текущего каталога или параметр virtual - имя файла относительно текущего каталога или относительно корня сайта. file: нельзя переходить в родительский каталог virtual: можно переходить в родительский каталог - нельзя!
137 Скриптовый язык программирования JavaScript JavaScript - это язык управления сценариями просмотра HTML- документов на стороне клиента. Разработан в 1995 г. специалистами компании Netscape. Основная идея – возможность изменения значений атрибутов тегов и свойств среды в процессе просмотра HTML-страницы пользователем. Netscape – JavaScript Microsoft – JScript Скриптовый язык тесно связан с объектной моделью документа (DOM – document object model) ECMAScript (1997 г.)
138 JavaScript DOM (Document Object Model) – объектная модель документа Объектная модель документа DOM – это представление HTML-документа (XML-документа или другого документа) в виде иерархии объектов, которые характеризуются своими свойствами, методами и событиями Процесс обработки HTML-документа браузером: 1.HTML-документ загружается с сайта и размещается в памяти компьютера. 2.Производится анализ документа, в результате которого он разбивается на составляющие. 3.Элементы, из которых состоит HTML-документ (,, и т.д.), размещаются во временной базе данных в соответствии с DOM. 4.База данных становится доступной другим программам, в частности - скриптам – программам на скриптовом языке JavaScript.
139 JavaScript Пример представления HTML-документа в соответствии с DOM Shady Grove Aeolian Over the River, Charlie Dorian
140 JavaScript Структура объектной модели документа DOM document – главный объект HTML-документа (объект) title – заголовок документа (строка); referrer – URI адрес ссылающейся страницы (строка); URL – адрес данного HTML-документа (строка); body – HTML-элемент BODY (объект); images – коллекция изображений (массив); anchors – коллекция ссылок (массив); forms – коллекция форм (массив); getElementById(id) – функция возвращает ссылку на элемент с указанным уникальным именем.
141 JavaScript Способы размещения функций 1) В HTML-документе 2) В отдельном файле В файле main.js : function somefunction() { // здесь располагается код функции }
142 JavaScript Способы функционального применения скриптов 1)гипертекстовая ссылка (вместо URL); 2)обработчик события (HANDLER); 3)вставка (элемент SCRIPT). Гипертекстовая ссылка Применяется в следующих элементах: -А (атрибут href) -FORM (атрибут action) -IMG (атрибут src) (небезопасно) Вместо URL указывается строчка: javascript:КОД_ПРОГРАММЫ КОД_ПРОГРАММЫ – вызов функции или набор операторов Ссылка
143 JavaScript Способы функционального применения скриптов Обработчик события JavaScript-код указывается в качестве значения соответствующего атрибута элемента: onСОБЫТИЕ="КОД_ПРОГРАММЫ" Здесь ничего нет Вставка JavaScript-код помещается в элементе SCRIPT. Обычно в заголовке документа HEAD размещают объявления переменных и функций, а в основной части документа – исполняемый код function f1() { // код функции } alert('вставка');
144 JavaScript Обращение к объектам, их свойствам и методам Обращение к объектам осуществляется в соответствии со структурой объектной модели документа: ОБЪЕКТ_1.ОБЪЕКТ_2. ….ОБЪЕКТ_N ОБЪЕКТ_1.ОБЪЕКТ_2. ….ОБЪЕКТ_N.СВОЙСТВО1. … СВОЙСТВОM ОБЪЕКТ_1.ОБЪЕКТ_2. ….ОБЪЕКТ_N.МЕТОД Обращение к объекту: document.forms[0].elements[0] (НЕВЕРНО: Document.FORMS[0].Elements[0]) document.Fm1.Txt1 Fm1.Txt1 document.getElementById("PicId")
145 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();
146 JavaScript Типы и структуры данных -литералы и переменные; -массивы, функции и объекты. Литералы числовой литерал: 42 числовой литерал: числовой литерал: 1.432e+2 строковый литерал: 'Это строковый литерал' строковый литерал: "Это строковый литерал" Переменные Определяются при помощи оператора var var i; var i=20; var w=window.open(); Регистр букв имеет значение. Тип переменной определяется контекстом.Узнать тип переменной можно с помощью функции typeof(ИМЯ_ПЕРЕМЕННОЙ). Результат функции – строка 'undefined', 'number', 'string', 'object ' или 'function'. alert(typeof(i));
147 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
148 JavaScript Явное и неявное преобразование типов // "20"// "1020" 10 + parseInt("20")// parseInt("020")// ?? 10 + parseInt("020", 10)// parseInt("20.5")// parseFloat("20.5")// 30.5 var i = 20; 10 + i.toString() // "1020"
149 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
150 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); //определение количества элементов (11)
151 Функции 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); })();
152 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
153 JavaScript eval(строчка) – аргумент выполняется как код программы; eval('ale'+'rt("'+'eval'+'");'); //появится сообщение «eval» Определение всех свойств и методов объекта for(v in ОБЪЕКТ) { document.write( v + " : " + eval("typeof(ОБЪЕКТ." + v + ")") + " : " + eval("ОБЪЕКТ."+v)+" "); } На экране для каждого свойства и метода будут выведены его тип и значение.
154 JavaScript Функции для работы с таймером ПЕРЕМЕННАЯ=setTimeout('КОД_ПРОГРАММЫ', ВРЕМЯ); Код программы выполнится через указанное время (в милисекундах) var t=setTimeout('alert("Таймер")', 1000); или var t=setTimeout("alert('Таймер')", 1000); Через 1 секунду появится сообщение «Таймер» Сброс таймера по идентификатору: clearTimeout(ИДЕНТИФИКАТОР)
155 JavaScript Функции для работы с таймером var t=setInterval('КОД_ПРОГРАММЫ', ВРЕМЯ); Код программы будет выполняться периодически с указанным интервалом (в милисекундах) var t=setInterval('alert("Таймер")', 1000); Через каждую секунду будет появляться сообщение «Таймер»
156 JavaScript Работа с графическими изображениями document.images[0] – первое изображение в HTML-документе document.images[0].src=' - изменение изображения (загрузка с сервера aics.ru) document.getElementById('logo').src=' go.gif'; var img1=new Image; - создание нового объекта-изображения img1.src=' - загрузка изображения в объект document.images[0].src = img1.src; - изменение изображения в HTML-документе (загрузка из кэша браузера) document.getElementById('logo').src = img1.src;
JQuery JavaScript-библиотека, позволяющая упростить взаимодействие с DOM, обработку событий, использование визуальных эффектов (в т.ч. анимации) и AJAX-запросов. Преимущества: Отделение логики веб-приложения от содержимого и дизайна Кроссбраузерность Исключение повторения кода
Подключение JQuery 1) Использование Google Hosted Libraries 2) Загрузить библиотеку с JQuery
Использование JQuery Работа с JQuery осуществляется с помощью функции $, которая принимает селектор и возвращает JQuery-объект. или... $(document).ready(function() { // код }); $(function() { // код });
Базовые селекторы $("*") $("ЭЛЕМЕНТ") $("#ИДЕНТИФИКАТОР") $(".КЛАСС")
Иерархические селекторы $("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
166 Программирование для Web CGI (Common Gateway Interface) CGI - это спецификация обмена данными между прикладной программой, выполняемой по запросу пользователя, и HTTP- сервером, который данную программу запускает.
167 Программирование для Web CGI (Common Gateway Interface) Часть информации заголовка HTTP-запроса преобразует в переменные окружения, которые доступны для анализа CGI- скриптом. Если запрос имеет тело, то оно становится доступным скрипту через поток стандартного ввода. CGI-скриптом называют программу, написанную на любом языке программирования или командном языке, которая осуществляет обмен данными с HTTP-сервером в соответствии со спецификацией Common Gateway Interface. Наиболее популярные языки программирования: PHP, Perl, Python, Ruby, C.
168 Программирование для Web CGI (Common Gateway Interface) Метод GET: GET /cgi-bin/temp/a.cgi?a=1&b=2 HTTP/1.1 Referer: 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_USER_AGENT = Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1) REMOTE_ADDR = Стандартный поток ввода: ничего
169 Программирование для Web CGI (Common Gateway Interface) Метод POST: POST /cgi-bin/temp/a.cgi?a=1&b=2 HTTP/1.1 Referer: 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_USER_AGENT = Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1) REMOTE_ADDR = Стандартный поток ввода: PostData (8 байт)
170 Программирование для Web CGI (Common Gateway Interface) Самое простое CGI-приложение на Perl: #!/usr/bin/perl print "Content-type: text/html\n\nHello"; HTTP-ответ, который получает пользователь: HTTP/ OK Date: Tue, 20 Nov :54:02 GMT Server: Apache/ (FreeBSD) PHP/5.0.3 Connection: close Content-Type: text/html Hello
171 Программирование для 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/ OK Date: Sat, 11 Nov :51:38 GMT Server: Apache Connection: close X-Powered-By: PERL Content-Type: text/html; charset=windows-1251 Hello
172 Программирование для Web CGI (Common Gateway Interface) Самое простое CGI-приложение на C: #include int main(void) { printf("Content-Type: text/plain;charset=windows-1251\n\n"); printf("Hello"); return 0; }
173 Программирование для Web CGI (Common Gateway Interface) Самое простое CGI-приложение на PHP: HTTP-ответ, который получает пользователь: HTTP/ OK Date: Tue, 20 Nov :56:41 GMT Server: Apache/ (FreeBSD) PHP/5.0.3 X-Powered-By: PHP/5.0.3 Content-Length: 5 Connection: close Content-Type: text/html Hello
174 Программирование для Web Язык программирования PHP PHP – PHP: Hypertext Preprocessor ( или Personal Home Page Tools) – «Гипертекстовый препроцессор» - язык сценариев общего назначения, предназначенный в первую очередь для быстрого создания динамически генерируемых страниц для Web. Преимущества: 1)PHP может использоваться на всех крупных платформах. 2)Для большинства существующих веб-серверов существуют модули PHP. 3)Встроенная поддержка наиболее популярных СУБД, сессий, cookies, переменных запроса. 4)PHP – более безопасный язык для написания CGI-приложений по сравнению с Perl и C. 5)Встроенная поддержка вывода сообщений об ошибках и предупреждений напрямую в браузер.
175 Программирование для Web Язык программирования PHP Недостатки: Несогласованный синтаксис функций: strlen($s); //string length str_replace(a, b, $s); //string replace strpos($s, a); //string position ltrim($s); //left trim isset($v) is_null($v) htmlspecialchars($s); html_entity_decode($s); get_html_translation_table(); curl_getinfo ftp_get_option mssql_fetch_array mssql_free_result mssql_rows_affected pdf_open_memory_image pdf_set_layer_dependency pdf_open_pdi_document
176 Программирование для Web Язык программирования PHP Скрипт ( файл с расширением php) : Заголовок My name is Результат: Заголовок My name is PHP
177 Программирование для Web Язык программирования PHP Вставить содержимое файла links.html : Заголовок Результат: Заголовок Links: AICS
178 Программирование для Web Язык программирования PHP Основные типы: 1)логический (True, False) 2) целые числа 3) вещественные числа 4) строки 5) массивы Тип переменной является контекстно-зависимым: Проверка типа переменной: $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 "Число"; }
179 Язык программирования PHP Операторы сравнения == равно != не равно – если типы сравниваемых операндов не равны, происходит преобразование типов === строго равно, !== строго не равно – сравниваются как типы операндов, так и их значения "10" == 10 // true "10" === 10 // false "1" == true // true "1" === true // false 0 == '' // true 0 == ' \r\n ' // true 0 === ' \r\n ' // false
180 Программирование для Web Язык программирования PHP Оператор условия: if (is_string($a)) { print "Строчка"; $res=$a; } elseif (is_array($a)) { print "Массив"; } elseif ($a==$b && ($c>=$d || $f
181 Программирование для 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" - со второго символа до предпоследнего
182 Программирование для Web Язык программирования PHP Операции со строками Кавычки: " или ' $a='str'; $b='___ $a ___'; //$b содержит ___ $a ___ $c="___ $a ___"; //$c содержит ___ str ___ Определение длины строки: print strlen($str); Замена подстроки в строке: $str=str_replace('ple', '!', 'example'); //аргументы: что заменять, на что заменять, где заменять //$str содержит exam!
183 Программирование для Web Язык программирования PHP Операции со строками Сформировать массив из строки: $b=explode('*', 'abc*de*f'); //аргументы: строка-разделитель, исходная строка //$b - это массив из 3-х элементов: 'abc', 'de', 'f' Сформировать строку из массива: $mas=array('a','b','c'); $a=implode('|', $mas); //аргументы: строка-разделитель, исходный массив //в $a содержится строка 'a|b|c'
184 Программирование для Web Язык программирования PHP Операции с массивами Добавление нового элемента: $a=array(); $a[]=1; //первый элемент с индексом 0 $a[10]=2; $a[]=3; //элемент с индексом 11 print $a[11]; //на экране 3 Перебор всех элементов: foreach ($a as $v) { print $v. '-'; } //на экране $a=array(1,2,3); for ($i=0; $i
185 Программирование для 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);
186 Программирование для 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']
187 Программирование для Web Язык программирования PHP Дата и время Функция time() – возвращает текущее время, выраженное в количествах секунд, прошедших с 1 января 1970 г. print time(); // Функция 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', ); //07/12/2005
188 Программирование для Web Cookies Cookies – это текстовые переменные, которые устанавливаются на компьютере клиента и передаются в HTTP-заголовке. Устанавливаются в заголовке HTTP-ответа: Set-Cookie: name=value; expires=дата; domain=имя_хоста; path=путь; secure; HttpOnly HTTP-ответ: HTTP/ OK Date: Wed, 05 Dec :11:56 GMT Server: Apache/2.1.4 (FreeBSD) PHP/5.0.3 X-Powered-By: PHP/5.0.3 Set-Cookie: ct= Content-Length: 726 Connection: close Content-Type: text/html...
189 Программирование для Web Cookies HTTP-ответ: HTTP/ OK Date: Wed, 05 Dec :11:56 GMT Server: Apache/2.1.4 (FreeBSD) PHP/5.0.3 X-Powered-By: PHP/5.0.3 Set-Cookie: ct2= ; expires=Thu, 05-Dec :16:04 GMT Content-Length: 726 Connection: close Content-Type: text/html...
190 Программирование для 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: Cookie: ct2= ; ct=
191 Программирование для 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'];
192 Программирование для Web Сессии Сессии – механизм, позволяющий хранить на сервере произвольные данные, индивидуальные для каждого пользователя, между запусками скриптов. Пользователю в Cookies записывается PHPSESSID – уникальный идентификатор сессии, а на сервере этому PHPSESSID сопоставляется некоторый набор данных. Инициализация сессии производится с помощью функции session_start(). При этом выполняются следующие действия: Если пользователь запускает сценарий впервые, у него устанавливается Cookie с PHPSESSID и создается временное хранилище, ассоциированное с этим идентификатором. Определяется, какое хранилище связано с текущим идентификатором пользователя. Если в хранилище имеются какие-то переменные, создаются соответствующие элементы массива $_SESSION со значениями, сохраненными при предыдущем завершении скрипта.
193 Программирование для Web Сессии Регистрация переменной var_name: $_SESSION['var_name']='значение переменной'; Проверить, зарегистрирована ли данная переменная, можно с помощью функции isset: if (isset($_SESSION['var_name'])) {... } Отменить регистрацию переменной: unset($_SESSION['var_name']);
194 Программирование для Web Классы в PHP class MyClass { private $title = 'default title'; //переменная класса с режимом доступа private public $count; //переменная класса с режимом доступа public function MyClass($t) { //конструктор класса $this->title = $t; } function out() { //метод класса print "Title: ".$this->title." "; print "Count: ".$this->count; } $obj = new MyClass("new object"); //создание объекта $obj->count = 10; //обращение к переменным объекта $obj->out(); //обращение к методам объекта unset($obj); //уничтожение объекта
195 Программирование для Web AJAX Шаг 1 – создание объекта XMLHttpRequest... 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!"); } }...
196 Программирование для Web AJAX Шаг 2 – указать обработчик изменения состояния объекта... req.onreadystatechange = myready;... Шаг 3 – обработчик изменения состояния объекта... function myready() { if (req.readyState == 4 && req.status == 200) { alert( req.responseText ); }...
197 Программирование для Web AJAX Шаг 4 – выполнить запрос... req.open('GET', ' true); req.send(null);...