|
Архитектура Аудит Военная наука Иностранные языки Медицина Металлургия Метрология Образование Политология Производство Психология Стандартизация Технологии |
|
|
Архитектура Аудит Военная наука Иностранные языки Медицина Металлургия Метрология Образование Политология Производство Психология Стандартизация Технологии |
Средства HTML- форматированияСтр 1 из 7Следующая ⇒
Смирнов О.И. доцент
КОНСПЕКТ ЛЕКЦИЙ по дисциплине
ИнТЕРНЕТ-ТЕХНОЛОГИИ
Направление подготовки: 01.03.02 «Прикладная математика и информатика» Профиль подготовки: «Прикладная математика и информатика»
Направление подготовки: 02.03.01 «Математика и компьютерные науки» Профиль подготовки: «Математическое и компьютерное моделирование»
Форма обучения: очная
Тула 2016 г. Рассмотрено на заседании кафедры протокол № 10 от «16» мая 2016 г.
Зав. кафедрой________________В.И. Иванов
Содержание Лекция 1 1. Основные понятия Информационных технологий……………………………………………..4 1.1. Назначение TCP/IP - сетей. Общая схема работы………………………………………….4 1.2. Назначение WWW - сервера. Общая схема работы………………………………………..6 Лекция 2 1.3. Протокол MIME………………………………………………………………………………9 1.4. Протокол HTTP………………………………………………………………………………10 Лекция 3 1.5. Интерфейс CGI……………………………………………………………………………….10 Лекция 4 2. HTML - язык гипертекстовой разметки…………………………………………………………10 2.1. HTML теги……………………………………………………………………………………10 2.2. Структура HTML документа………………………………………………………………...11 Лекция 5 2.3. Средства HTML-форматирования…………………………………………………………..13 2.4. Ссылки. Рисунки. Карты……………………………………………………………………..15 Лекция 6 2.5. Каскадные таблицы стилей…………………………………………………………………..19 2.6. Фреймы………………………………………………………………………………………..21 Лекция 7 2.7. Формы………………………………………………………………………………………....2 Лекция 8 3. JavaScript…………………………………………………………………………………………..24 3.1. Основы программирования на Java Script. Управление потоком вычислений. Массивы. Функции. События…………………………………………………………………………...24 3.2. Иерархия HTML-объектов в JavaScript……………………………………………………..27 Лекция 9 3.3. Фреймы и JavaScript. Навигационные панели……………………………………………...28 3.4. Формы и JavaScript…………………………………………………………………………...30 Лекция 10 3.5. Окна и динамически создаваемые документы…………………………………………….. 32 3.6. Строка состояния и таймеры………………………………………………………………...34 Лекция 11 3.7. Предопределенные объекты…………………………………………………………………35 Лекция 12 4. ASP - язык серверных сценариев…………………………………………………………………38 4.1. VBScript……………………………………………………………………………………….38 4.2. Ввод и вывод на ASP…………………………………………………………………………40 Лекция 13 4.3. Взаимосвязь между отдельными страницами в ASP……………………………………….41 4.4. Использование внешних компонент………………………………………………………...41 Лекция 14 4.5. ASP и базы данных. ODBC и ADO………………………………………………………….42 4.6. Обзор SQL…………………………………………………………………………………….48 Лекция 15 5. PHP + MySQL……………………………………………………………………………………...51 5.1. Основы программирования на PHP…………………………………………………………51 5.2. Ввод и вывод на PHP…………………………………………………………………………52 Лекция 16 5.3. PHP и базы данных. Работа с MySQL……………………………………………………….53 Лекция 17 5.4. Основные функции PHP для работы с MySQL……………………………………………..55 Основные понятия Информационных технологий Интернет-технологии неразрывно связаны с технологией World Wide Web, в переводе " Всемирная паутина", которая получила широкое распространение из-за простоты своих пользовательских интерфейсов. Принцип " жми на то, что интересно", лежащий в основе гипертекста, интуитивно понятен. В технологиях WWW все ключевые понятия просматриваемого документа: слова, картинки – имеют возможность " раскрыться" новым документом, развивающим это понятие. Такой способ представления информации называется " гипертекстом", а документы, представленные в таком виде – " гипертекстовыми документами". Для описания этих документов используется специальный язык – язык описания гипертекстовых документов или HTML (англ. вариант HyperText Markup Language). Использование технологий WWW для обеспечения доступа к каким-либо информационным ресурсам подразумевает существование следующих компонент (см. рис.1.1): 1. ТСР/IР – сети с поддержкой базового набора услуг по передаче данных с единой 2. Выделенного информационного сервера – WWW -сервера, обеспечивающего
Рис. 1.1 Передаваемые гипертекстовые документы оформляются в стандарте HTML – языке описания гипертекстовых документов. Эти документы могут либо храниться в статическом виде (совокупность файлов на диске), либо динамически компоноваться в зависимости от параметров запроса специальным программным обеспечением 1.1. Назначение TCP/IP - сетей. Общая схема работы. История и перспективы стека ТСР/IР Transmission Control Protocol / Internet Protocol ( TCP / IP ) – это промышленный стандарт стека протоколов, разработанный для глобальных сетей. Этот протокол был разработан по инициативе Министерства обороны США (Department of Defence, DoD) более 20 лет назад для связи экспериментальной сети ARPAnet с другими сателлитными сетями как набор общих протоколов для разнородной вычислительной среды. Сеть ARPA поддерживала разработчиков и исследователей в военных областях. Большой вклад в развитие стека ТСРЯР внес университет Беркли, реализовав протоколы стека в своей версии ОС UNIX. Широкое распространение ОС UNIX привело и к широкому распространению протокола IP и других протоколов стека. На этом же стеке работает всемирная информационная сеть Internet, чье подразделение Internet Engineering Task Force (IETF) вносит основной вклад в совершенствование стандартов стека. За долгие годы использования в сетях различных стран и организаций стек TCP/IP накопил большое количество протоколов и сервисов прикладного уровня. К ним относятся такие широко используемые протоколы, как протокол копирования файлов FTP, протокол эмуляции терминала telnet, почтовый протокол SMTP, используемый в электронной почте сети Internet, протокол HTTP, используемый для гипертекстовых сервисов доступа к удаленной информации, таких как WWW. Остановимся несколько подробнее на некоторых из них. Протокол пересылки файлов FTP (File Transfer Protocol) реализует удаленный доступ к файлу. Кроме пересылки файлов протокол FTP предлагает и другие услуги. Так, пользователю предоставляется возможность интерактивной работы с удаленной машиной, например, он может распечатать содержимое ее каталогов. Наконец, FTP выполняет аутентификацию пользователей. Прежде, чем получить доступ к файлу, в соответствии с протоколом пользователи должны сообщить свое имя и пароль. Для доступа к публичным каталогам FTP-архивов Internet парольная аутентификация не требуется, и ее обходят за счет использования для такого доступа предопределенного имени пользователя Anonymous. Протокол telnet обеспечивает передачу потока байтов между процессами, а также между процессом и терминалом. Наиболее часто этот протокол используется для эмуляции терминала удаленного компьютера. При использовании сервиса telnet пользователь фактически управляет удаленным компьютером так же, как и локальный пользователь.
Адресация в IP-сетях Типы адресов: физический (MAC-адрес), сетевой (IP-адрес) и символьный (DNS-имя). Каждый компьютер в сети ТСРЯР имеет адреса трех уровней: • Локальный адрес узла, определяемый технологией, с помощью которой построена • IP-адрес, состоящий из 4 байт, например, 109.26.17.100. Он назначается Номер узла в протоколе IP назначается независимо от локального адреса узла. Деление IP-адреса на поле номера сети и номера узла - гибкое, и граница между этими полями может устанавливаться весьма произвольно. • Символьный идентификатор-имя, например, SERV1.IBM.COM. Этот адрес Адрес 127.0.0.1 зарезервирован для организации обратной связи при тестировании работы программного обеспечения узла без реальной отправки пакета по сети. Этот адрес имеет название loopback. Отображение символьных адресов на IP-адреса: служба DNS DNS ( Domain Name System ) - это распределенная база данных, поддерживающая иерархическую систему имен для идентификации узлов в сети Internet. Служба DNS предназначена для автоматического поиска IP-адреса по известному символьному имени узла. Протокол DNS несимметричен - в нем определены DNS-серверы и DNS-клиенты. DNS-серверы хранят часть распределенной базы данных о соответствии символьных имен и IP-адресов. Эта база данных распределена по административным доменам сети Internet. Клиенты сервера DNS знают IP-адрес сервера DNS своего административного домена и по протоколу IP передают запрос, в котором сообщают известное символьное имя и просят вернуть соответствующий ему IP-адрес. Если данные о запрошенном соответствии хранятся в базе данного DNS-сервера, то он сразу посылает ответ клиенту, если же нет - то он посылает запрос DNS-серверу другого домена, который может сам обработать запрос, либо передать его другому DNS-серверу. Клиентские компьютеры могут использовать в своей работе IP-адреса нескольких DNS-серверов, для повышения надежности своей работы. База данных DNS имеет структуру дерева, называемого доменным пространством имен, в котором каждый домен (узел дерева) имеет имя и может содержать поддомены. Имя домена идентифицирует его положение в этой базе данных по отношению к родительскому домену, причем точки в имени отделяют части, соответствующие узлам домена. Корень базы данных DNS управляется центром Internet Network Information Center. Домены верхнего уровня назначаются для каждой страны, а также на организационной основе. Для обозначения стран используются трехбуквенные и двухбуквенные аббревиатуры, а для различных типов организаций используются следующие аббревиатуры: • com - коммерческие организации (например, microsoft.com); • edu - образовательные (например, mit.edu); • gov - правительственные организации (например, nsf.gov); • org - некоммерческие организации (например, fidonet.org); • net - организации, поддерживающие сети (например, nsf.net). Каждый домен DNS администрируется отдельной организацией, которая обычно разбивает свой домен на поддомены и передает функции администрирования этих поддоменов другим организациям. Каждый домен имеет уникальное имя, а каждый из поддоменов имеет уникальное имя внутри своего домена. Имя домена может содержать до 63 символов. Каждый хост в сети Internet однозначно определяется своим полным доменным именем ( fully qualified domain name, FQDN ), которое включает имена всех доменов по направлению от хоста к корню. Пример полного DNS-имени: citint.dol.ru.
1.2. Назначение WWW - сервера. Общая схема работы
WWW сервер - это такая часть глобальной или внутрикорпоративной сети, которая дает возможность пользователям сети получать доступ к гипертекстовым документам, расположенным на данном сервере. Для взаимодействия с WWW сервером пользователь сети должен использовать специализированное программное обеспечение - броузер (от англ. browser), другое название - программа просмотра. Схема работы Рассмотрим более подробно схему работы WWW-сервера. В общем виде она выглядит так: o Установление связи с сервером o Получение требуемого документа o Отображение полученного документа o Реагирование на действия пользователя - доступ к новому документу o После запуска броузер по команде пользователя или автоматически устанавливает связь с заданным WWW - сервером и передает ему запрос на получение заданного документа (см. рис. 1.2)
Рис. 1.2 2. WWW сервер ищет запрашиваемый документ и возвращает результаты броузеру (см. рис. 1.3) Рис. 1.3
3. Броузер, получив документ, отображает его пользователю и ожидает его реакции. Возможные варианты: o Ввод адреса нового документа o Печать, поиск, другие операции над текущим документом o Активизация (нажатие) специальных зон полученного документа, называемых связями (link) и ассоциироваными с адресом нового документа В первом и третьем случае происходит обращение за новым документом. Адрес Адрес документа указывается в виде специальной строки, называемой URL (Universal Resource Locator). Для протокола HTTP, используемого при взаимодействии WWW клиента и WWW сервера, URL состоит из следующих компонент: 1. Наименование протокола, по которому работает сервер (http). 2. Имя машины - сервера в Internet или ее IP - номер. 3. Порт TCP, обращение к которому обрабатывает сервер. 4. Место (путь) документа на машине - сервере. Здесь http означает протокол работы с WWW - сервером • ': ' - разделитель • " www. cnit. nsu. ru " - имя машины - сервера в Internet • " 80" - номер tcp - порта • / welcome. html - путь до документа на машине - сервере Среда работы сервера В настоящее время все известные WWW - серверы представляют собой компьютер общего назначения с многозадачной операционной системой. Один или несколько процессов такой системы отвечают за поддержку специфических для WWW - сервера функций. Другие процессы ОС отвечают за обеспечение других функций, не обязательно связанных с поддержкой технологии WWW (см. рис. 1.4).
Рис. 1.4
Такая структура приводит к тому, что под WWW сервером начинают подразумевать только часть программного обеспечения, единственными функциями которой являются функции WWW сервера, а остальную часть - компьютер, операционную систему, другие процессы, сетевую структуру называют средой работы WWW сервера или платформой. Ниже приведена таблица, содержащая список наиболее распространенных платформ для WWW - сервера.
Непосредственные функции сервера В простейшем случае гипертекстовый документ представляет собой совокупность файлов. Представление этих файлов как единого документа производится броузером. По каждому файлу документа броузер делает запрос к WWW - серверу. Таким образом, сервер не имеет представления о структуре и составе документов, он отвечает только за выдачу локальных файлов по запросам. На различных платформах, в различных операционных системах пути файлов выглядят по разному. Например: D: \ DOCUMENTS \ HTML \ INDEX. HTM - в Windows, / u / data / www / html / index. html - в Unix - системах, USR: WWW / HTML - в NetWare и т.д.
Путь файла, указываемый в URL, имеет стандартный вид: /< имя_каталога> /... /< имя_каталога> /< имя_файла> Таким образом, в функции WWW - сервера входит преобразование адреса из внешнего единого формата в платформенно ориентированный внутренний формат. Появляется ряд понятий, специфичных для такого преобразования, необходимых для него.
1. Исходный каталог документов Это каталог реальной файловой системы сервера, от которого идет вычисление пути, указанного в URL. Например, если исходным каталогом документов является D: \ Documents \ HTML \ то на запрос к этому серверу документа по URL http: //< имя_сервера> / index. htm будет возвращен файл D: \ Documents \ HTML \ index. htm 2. Индексный файл. Для каждого сервера определено имя так называемого индексного файла. Обычно этот файл содержит ссылки на другие файлы данного каталога. Содержимое индексного файла выдается сервером в случае, если в URL указан каталог без конкретного файла. 3. Пользовательский раздел. Для многопользовательских операционных систем (таких как Unix) ПО WWW - сервера позволяет каждому пользователю предоставлять доступ к своему собственному набору гипертекстовых документов вне основной иерархии (Исходного каталога документов, Синонимов и т.д.). Этот набор документов должен находиться в собственном (т.н. " домашнем" ) каталоге пользователя. Для доступа к таким документам в URL перед путем ставится знак тильда и имя пользователя: < имя_пользователя>. Например: На сервере Indy. cnit. nsu. ru создан пользователь с именем fancy и " домашним" каталогом / home / fancy. Собственные гипертекстовые документы он хранит в каталоге / home / fancy / public _ html. При обращении по URL http: // Indy. cnit. nsu. ru /~ fancy / start. html, WWW - сервер будет искать документ start html в каталоге / home / fancy / public html. Протокол MIME Протокол MIME (Multipurpose Internet Mail Extensions) - многоцелевое расширение электронной почты, был создан как способ передачи нетекстовой информации: изображений, звука, видео в письмах электронной почты. Механизм оказался удачным, и его перенесли и в on-line сервисы, в том числе WWW. Здесь MIME используется для передачи документов от сервера к клиенту. В общем виде MIME основывается на передаче вместе с основными данными дополнительной информации, описывающей что это и в каком виде передается. Эта дополнительная информация называется заголовок MIME. Базовой частью заголовка является строка, описывающая тип передаваемого сообщения. Формат строки: Content - Type: < тип_MIME> Перечень типов MIME (т.е. видов передаваемых данных) постоянно пополняется и может быть дополнен даже пользователем для описания своего собственного вида данных. Формат типа MIME: < Тип> /< Подтип> [; < параметры> ], где < Тип> - определяет общий тип данных: Audio - для звуковых данных; Application - данные, являющиеся входными для какого-либо приложения (программы); Image - для графических образов; Message - для сообщения, которое само по себе является MIME – документом; Multipart - для сообщения, состоящего из нескольких MIME – документов; Text - для текстовых данных в различном виде; Video - для видеоданных. < Подтип> - указывает на специфический формат данных типа < Тип>. Например: text / html - текстовые данные в формате HTML image / giff - графические данные в формате giff < Параметры> - список параметров, необходимых для интерпретации данных. Протокол HTTP Протокол HTTP (HyperText Transfer Protocol) определяет язык запросов от WWW - клиента к WWW - серверу. Сам запрос состоит из следующих компонент: < Заголовок> < Метод> < Источник / Данные>, где Заголовок - определяет версию протокола HTTP и другие служебные параметры; Метод - одно из ключевых слов: GET - для передачи запросов на выдачу документов; PUT, POST - для передачи данных от клиента к серверу (например, из форм). Пример запроса: HTTP/1.1 GET / index. html Описывает запрос на получение файла index.html из корневого каталога документов сервера.
Интерфейс CGI Помимо доступа к статическим документам сервера существует возможность получения документов как результата выполнения прикладной программы. Такая возможность реализуется на сервере WWW благодаря использованию интерфейса CGI (Common Gateway Interface). Спецификация CGI описывает формат и правила обмена данными между ПО WWW сервера и запускаемой программой. Для инициирования CGI необходимо, чтобы в запрашиваемом URL был указан путь до запускаемой программы. ПО WWW сервера исполняет эту программу, передает ей входные параметры и возвращает результаты ее работы, как результат обработки запроса, клиенту. CGI -программой может являться любая программа локальной операционной системы сервера - в двоичном виде или в виде программы для интерпретатора (Basic, SH, Perl и т.д.). С целью облегчения администрирования CGI - программ, а также для удовлетворения требованиям безопасности CGI - программы группируются в одном или нескольких явно указанных серверу каталогах. По умолчанию это каталог cgi - bin в иерархии серверных каталогов, однако, его имя и положение могут отличаться. Например: клиент, обращающийся к CGI - программе test-query, будет использовать URL http: //< имя_сервера> / cgi - bin / test - query Интерфейс CGI позволяет расширить границы применения WWW - технологии. CGI -программа может обрабатывать сигналы с датчиков установок, взаимодействовать с мощным сервером баз данных, переводить и т.п.
2. HTML - язык гипертекстовой разметки HTML-файл имеет расширение htm или html. Браузер определяет тип файла именно по его расширению. HTML-файл должен подчиняться определенным правилам, описанным в стандарте HTML. Рассмотрим в качестве примера произвольный HTML-файл. Всякий HTML-файл состоит из элементов. Элемент начинается с ярлыка. Что такое ярлык HTML? Ярлык - это слово, помещенное в угловые скобки. Ярлыки бывают открывающими и закрывающими. Закрывающий ярлык отличается от открывающего тем, что он начинается с символа косая черта / сразу после угловой скобки. Ярлык - смысловой аналог английского слова tag. Не каждый элемент HTML с необходимостью должен включать в себя все указанные компоненты, но открывающий ярлык должен присутствовать всегда. Открывающий ярлык может иметь атрибуты. Эти атрибуты описывают свойства элемента, к которому относится открывающий ярлык. Различные элементы HTML могут иметь разную структуру. Это могут быть и текст, и ссылки на рисунки, и программы, и вставляемые элементы. Подробное описание HTML-элементов можно найти в документации. Сейчас для нас важно, что всякий HTML-файл должен содержать в себе элемент < html>...< /html>. Этот элемент включает в себя всю информацию, содержащуюся в HTML-файле. HTML-страничка может быть создана при помощи простейшего текстового редактора. Откроем Блокнот (Notepad) и напишем: < HTML> Это простая HTML-страница < /HTML> Запомним файл под именем first.htm и загрузим файл в браузер. Как правило, в HTML-страницах помимо ярлыка < html> используется несколько других обязательных ярлыков. Среди них ярлык < head> (и обязательный < /head> ) для написания заголовка HTML-странички. Здесь можно указать название странички. Название должно быть помещено между ярлыками < titie> и < /titie>. В стандартных браузерах заголовок будет показан в верхней части главной рамки основного окна. < HTML> < head> < title> На этой станице в HTML-файле содержатся все ярлыки < /title> < /head> < body> Все основные ярлыки присутствуют здесь < /body> < /HTML> В файле firstl.htm мы использовали заголовок, расположив его в верхней части файла между ярлыками < head> и < /head>. В заголовке может быть указано название страницы с помощью ярлыков < title> и < /title>. В блоке заголовка часто используется мета-комментарий < meta>... < /meta>. После заголовка мы использовали другую пару ярлыков: < body> и < /body>, между которыми располагается основной текст документа. Структура HTML документа
Главным компонентом содержимого HTML-страниц является текст. Для форматирования текста в HTML используются специальные ярлыки. Наличие пробелов, табуляций, переводов строки и других специальных символов в тексте документа не влияет на вид представления текста в окне браузера. Для отделения одного параграфа от другого используется ярлык < р>. В начале каждого параграфа мы будем ставить ярлык < р>. Закрывающий ярлык < /р> необязателен. Для оформления иерархии заголовков в HTML используются ярлыки < h1>, < h2>, < h3> и т. д. Парные закрывающие ярлыки необходимо помещать сразу после окончания текста соответствующего заголовка. < HTML>
< head> < title> Простой форматированный текст < /title> < /head> < body> < p> < h1> Глава 1. Форматирование текста < /h1> < p> < h2> Что такое HTML? < /h2> < /HTML> Свойства элементов В ярлыках можно указать значения свойств соответствующих элементов. Давайте выровняем заголовки нашего текста по центру, а фрагмент основного текста выделим в отдельный абзац и выровним по правому краю. Для этого используется свойство align в ярлыках < h1> и < h2>, а также в ярлыке < p> в обычном тексте основного содержания параграфа. Измененный файл text2.htm выглядит так, как показано в примере ниже. Существует множество различных свойств у многих ярлыков. Так, для ярлыка < body> мы можем задать цвет фона - свойство bgcolor. Цвет фона можно указать либо в виде стандартного слова, обозначающего цвет, например, white или yellow, либо в виде шестнадцатеричной величины RRGGBB, где параметры RR показывают интенсивность красного цвета, GG - ин-тенсивность зеленого, ВВ - интенсивность синего цвета в аддитивной модели цветовосприятия. Белому цвету соответствует значение #FFFFFF = " White".
В качестве примера изменим вид нашей странички на " негатив". Для этого необязательно задавать цвет для каждого ярлыка по отдельности. Здесь можно использовать общий для всего фрагмента текста ярлык < font>, с помощью которого задаются параметры используемого шрифта, в том числе его цвет. Файл text3.htm выглядит следующим образом. < HTML> < head> < title> Цвет и текст < /title> < /head> < body bgcolor=" #000000" > < font color=" #FFFFFF" > < p> < h1 align=" center" > Глава 1. Название главы < /h1> < p> < h2 align=" center" > Заголовок второго уровня < /h2> < p align=" right" > Текст < /font> < /body> < /HTML> Шрифт Чтобы задать свойства шрифта, полезно использовать ярлык < font>. Внутри угловых скобок ярлыка можно использовать различные свойства шрифта: его цвет, размер, внешний вид. Обязательно использовать закрывающийся ярлык < /font>. Изменим файл text2.htm так, чтобы каждый параграф выглядел по свему, имел свой собственный цвет. В конце файла продемонстрируем, как можно изменять размер шрифта.
< head> < title> Шрифты < /title> < /head> < body bgcolor=" white" > < p> < font color=" blue" > < h1 align=" center" > Глава 1. Название главы < /h1> < /font> < p> < font color=" green" > < h2 align=" center" > Заголовок второго уровня < /h2> < /font> < font color=" maroon" > < p align=" right" > Текст < /font> < p> Демонстрируем изменение размеров шрифта. < p align=" center" > Обычный шрифт (его величину можно указать в basefont). < p align=" center" > < font size=+1> Указан размер size=+1. < /font> < p align=" center" > < font size=+2> Указан размер size=+2. < /font> < /body> < /HTML> Ссылки. Рисунки. Карты Ссылки Наличие гиперссылок - одно из важных свойств HTML. Собственно механизм ссылок и делает язык HTML тем средством, которое необходимо для удобной работы в сети Интернет. Механизм ссылок может быть различным. Рассмотрим на примерах то, как работают простейшие ссылки. Текстовая ссылка С помощью HTML мы имеем возможность организовать ссылку из любой части документа. Для ссылки используется ярлык, называемый якорем, anchor. В HTML, вероятно по той причине, что ссылка - это один из наиболее важных элементов Web-страниц, используется максимально сокращенный вариант слова anchor, от этого слова осталась лишь начальная буква. Для создания ссылки используется открывающий ярлык < а> и закрывающий ярлык < /а>.
Между ярлыками < а> и < /а> расположен фрагмент HTML-странички, с которым связана ссылка. Это может быть текст, это может быть таблица, это может быть рисунок. Для начала мы создадим простую текстовую ссылку. Откроем какой-либо текстовый редактор и введем текст: < HTML> < head> < title> Гиперссылки < /title> < /head> < body bgcolor= " #FFFFFF" > < p> < h1 align=" center" > Глава 1. < /h1> < p> < h2 align=" center" > Изучаем ссылки. < /h2> < p> Ссылки можно использовать в любом месте в теле HTML кода. В этом параграфе мы вставим ссылку: < a href=" #fed" > Это первая ссылка.< /a> < p align= " right" > < br> Пpи помощи HTML мы не сможем написать полноценное приложение, которое бы работало в системе MS-DOS, Windows или какой-либо другой ОС. HTML предназначен для создания документов, размещаемых на Web-сервере, доступ к которому осуществляется по сети Интернет. < /body> < /HTML>
Ссылки создаются для того, чтобы при щелчке на ней можно было просмотреть документ, на который она указывает. Однако если в предыдущем примере мы щелкнем на ссылке, то ничего не произойдет. Дело в том, что в свойстве href для нашей ссылки указан несуществующий адрес. В свойстве href указывается адрес документа, на который указывает ссылка. Href - это hyper reference, гиперссылка. В прошлом примере мы указали в качестве адреса параметр #fed. Если параметр адреса начинается со знака #, это значит, что данная ссылка является ссылкой на фрагмент текущей HTML-страницы. На нашей странице нет фрагмента, который бы носил имя fed, и поэтому никаких действий после нажатия на ссылку не происходит.
Создадим фрагмент с именем fed специально для того, чтобы проверить работу ссылки. Для этого перед фрагментом поставим пару ярлыков < а name= " #fed" > < /a>. Измененный файл ref2.htm будет выглядеть так: < HTML> < head> < title> Гиперссылки < /title> < /head> < body bgcolor= " #FFFFFF" > < p> < h1 align=" center" > Глава 1. < /h1> < p> < h2 align=" center" > Изучаем ссылки. < /h2> < p> Ссылки можно использовать в любом месте в теле HTML кода. В этом параграфе мы вставим ссылку: < a href=" #fed" > Это первая ссылка.< /a> < p align= " right" > < br> Пpи помощи HTML мы не сможем написать полноценное приложение, которое бы работало в системе MS-DOS, Windows или какой-либо другой ОС. HTML предназначен для создания документов, размещаемых на Web-сервере, доступ к которому осуществляется по сети Интернет. < a name= " #fed" > < /a>. На этот фрагмент текста указывает ссылка. < /body> < /HTML> В приведенном выше примере мы использовали ярлык < br>. Это непарный ярлык, для него не требуется указания закрывающего ярлыка. Этот ярлык указывает на необходимость перехода к новой строке в месте расположения ярлыка. Далее в этой главе мы рассмотрим и другие ярлыки, с помощью которых происходит управление и форматирование текста. Чтобы организовать ссылку на какой-либо документ, расположенный в сети Интернет, достаточно указать полный адрес этого документа в параметре href ссылки. Так, ссылка < а href= " http: //www.yahoo.com" > Это поисковая система Yahoo< /a> указывает на главную страницу поисковой системы Yahoo. Ссылки и рисунки Вначале научимся вставлять рисунок в HTML-файл. Внедрить файл с изображением в HTML-страницу несложно. Для этого используется ярлык < img >. Изображение - по-английски image (образ), сокращенный вариант этого слова используется в качестве HTML-ярлыка. В случае, если пользователь имеет очень медленную связь с Интернетом, он может отключить автоматическую загрузку изображений в браузер. Тогда вместо картинки мы можем показать пользователю текст. Для этого нужно в ярлык < img > вставить свойство alt, которому присваиваем текстовую строку. Именно эта строка будет показана в окне браузера вместо рисунка, если рисунок по тем или иным причинам не был загружен: < img src=" picl.jpg" alt=" Teкст, выводимый вместо изображения" > Окно браузера будет выглядеть примерно так, как показано на рис. 2.14. Фон страницы Рисунки можно использовать не только в качестве элементов, объектов страницы, документа, но и в виде фона, на котором будет расположена страница. Файл рисунка с фоном указывается в ярлыке < body>: < body bgcolor=" white" background=" back.gif" > Если одной копии рисунка не хватает, чтобы покрыть весь фон документа, т.е. если размер окна браузера больше размера рисунка, то рисунок фона воспроизводится столько раз, сколько необходимо для того, чтобы покрыть все окно браузера. Свойства рисунков В ярлыке < img > можно задать значения свойств (атрибутов), указанных в следующей таблице.
Свойство align позволяет определить местоположение картинки в окне браузера. Данное свойство может принимать следующие значения: • bottom • middle • top • left • right Параметр middle соответствует выравниванию центра рисунка по середине вертикали от текущей базовой линии. Значению top соответствует выравнивание по верхней границе рисунка с учетом верхней границы текущего текста. Параметры left и right описывают плавающие рисунки. Расположение текста и вставляемого рисунка в потоке HTML-кода не имеют значения. Рисунки являются плавающими элементами страницы, их взаимное расположение и расположение по отношению к тексту определяются параметрами left и right. Обычно текст " обтекает" изображения. Для создания отступов можно использовать рамки. Ширина рамки задается с помощью параметра border: < img src=" picl.jpg" align=" left" border=" 5" > < img src=" picl.jpg" align=" right" border=" 25" > Отделить картинки от текста можно с указанием параметров горизонтального и вертикального отступов: < img src=" picl.jpg" align=" left" vspace=" 15" hspace=" 5" > < img src=" picl.jpg" align=" right" vspace=" 5" hspace=" 15" > HTML позволяет менять размер картинок.
< HTML> < head> < title> Задаем размеры рисунка - файл sizel.htm < /title> < /head> < body bgcolor=" white" > < h1> Задаем размеры для рисунков.< /h1> align=" left" vspace=" 15" hspace=" 15" width=" 450" > < img src=" picl.jpg" align=" left" vspace=" 15" hspace=" 15" > < img src=" picl.jpg" align=" left" vspace=" 15" hspace=" 15" width=" 150" > < p align=" justify" > Paзмep первого рисунка в полтора раза больше размера исходного рисунка. Размер второго рисунка совпадает с размером исходного рисунка. Размер третьего рисунка в два раза меньше размера исходного рисунка. Речь идет о линейных размерах. < /body> < /HTML> Изображения-карты Создадим простой HTML-файл map.html: < maр namе= " mapname" > < area [shape=" shape" ] coords='x, y,...' [href=URL|nohref]> < /map> Свойства: shape - форма определяемой области; coords - местоположение области и ее размер; href - URL, на который ссылается область; nohref - область является " мертвой зоной". Форма shape может быть задана одним из четырех способов: default - вся область, которая не определена с помощью других значений, приведенных ниже; rect - прямоугольная область; circle - круг; poly - многоугольная область. Прямоугольная область определяется четырьмя координатами: левая; верхняя; правая; нижняя. Для круга координат три:
горизонтальная координата центра; вертикальная координата центра; радиус. Для многоугольника координаты перечисляются в последовательности х1, y1, х2, у2, х3, у3.... < HTML> < head> < title> Kapтa ccылок < /title> < /head> < body> < img src=" pic.jpg" usemap= " #mapname" > < map name=" mapname" > < area shape=rect coords=" 0, 0, 275, 220" href=" ref1.html" > < area shape=rect coords=" 275, 0, 450, 220" href=" ref2.html" > < area shape=rect coords=" 0, 220, 275, 340" href=" ref3.html" > < area shape=rect coords=" 275, 220, 450, 340" href=" ref4.html" > < /map> < /body> < /HTML> Загрузив файл map.html в браузер, мы получим картинку. 2.5. Каскадные таблицы стилей ( Cascad Style Sheets )
Каскадные таблицы стилей были предложены w3c (WWW Consorcium) в рамках разработки спецификации HTML 3.0. Однако, реализованы в реально действующих навигаторах они были только в 1997 году. Идея положенная в основу таблиц достаточно проста. HTML-документ - это множество вложенных в друг друга контейнеров, каждый из которых имеет свои свойства по представлению информации. Многие контейнеры можно сгруппировать в классы однотипных контейнеров, например, заголовки или параграфы. Свойства контейнера, перечисляются в качестве атрибутов тага начала контейнера. При этом у большинства контейнеров, начиная с версии HTML 3.0 набор этих атрибутов типизирован. Контейнер STYLE (< style type="..." >..... < /style> ) служит для определения таблицы описания стилей. < style type=" text/css" > < html> < head> style type=" text/css" > <! -- p {color: blue; font-family: times; font-size: 10pt; } h1 {color: black; font-size: 12pt; font-style: Arial; text-align: center; } --> < /style> < /head> < body> < h1> Test Style Sheets in Communicator< /h1> < p> This is a first part of the document < /body> < /html> Контейнер LINK в контексте описателей стилей применяется для определения внешнего файла с описаниями стилей для данного документа. Например, внешний файл может содержать следующее описание стилей: /* contents of the external style sheets file css.htm*/ p {color: blue; font-family: times; font-size: 10pt; } h1 {color: black; font-size: 12pt; font-style: Arial; text-align: center; } /* the end of style sheets definition */ Для применения этого описателя стилей в заголовок документа необходимо включить следующий таг: < html> < head> < link REL=STYLESHEET TYPE=" text/css" HREF=http: //localhost/css.htm> < /head> < body> The body of the document should be here. < /body> < /html> Контейнер SPAN применяется для переопределения стиля отображения текущего фрагмента текста и в некотором смысле аналогичен контейнеру FONT. < HTML> < HEAD> < /HEAD> < BODY bgcolor=lightyellow> < center> < p> < span class=" color: red; font-size: 24pt; " > C< /span> обществу глобальных компьютерных сетей Internet в 2000 году исполнилось 30 лет. < /BODY> < /HTML> В данном примере, контейнер SPAN применен сразу после тага начала параграфа < p>, что позволяет выделить первую букву в отображаемом абзаце: Свойства контейнеров, управляемые описателями стилей Первую группу свойств составляют свойства шрифтов: font-size, font-family, font-weight, font-style. Вторую группу свойств составляют свойства текста: line-height, text-decoration, text-transform, text-align, text-indent. Третью группу свойств составляют свойства блоков текста: margin-left, margin-right, margin-top, margin-bottom, margin, padding-top, padding-right, padding-bottom, padding-left, paddings, border-top-width, border-bottom-width, border-left-width, border-right-width, border-width, border-style, border-color. Четвертую группу составляют описатели цвета фона и цвета текста: color, background-image, background-color. 2.6. Фреймы
Фреймы - это английское слово, в переводе означающее рамки. HTML-страница, в которой используются фреймы, выглядит разделенной на несколько частей, которые окаймлены границами, как рамками. Создание и использование фреймов Часто возникает вопрос о том, как могут быть связаны друг с другом, казалось бы, совершенно разные вещи, такие как фреймы и язык JavaScript. He будем спешить и остановимся вначале на рассказе о том, что представляют собой фреймы и для чего они используются. После этого рассмотрим вопрос о том, как могут быть взаимосвязаны фреймы и язык JavaScript. Окно браузера может быть разделено на несколько фреймов. Каждый фрейм показывает свой документ, как правило, это обычный HTML-документ. Для того чтобы создать фреймы, мы пользуемся двумя ярлыками, а именно ярлыком < frameset> и ярлыком < frame>. Страница, разбитая на два фрейма, может быть описана при помощи HTML следующим образом: < HTML> < frameset rows=" 50%, 50%" > < frame src=" pagel.htm" name=" framel" > < frame src=" page2.htra" name=" frame2" > < /frameset> < /HTML> Этот код порождает два фрейма. В ярлыке < frameset> указано свойство rows (rows - это ряды). Это свойство указывает на то, что два фрейма расположены рядами, друг над другом. Верхний фрейм загружается страницей pagel.htm, а нижний фрейм - страницей page2.htm. Если вы захотите расположить фреймы столбцами, то вместо свойства rows в ярлыке < frameset> укажите cols. Процентные величины " 50%, 50%" указывают относительные размеры окон фреймов. Если вы не хотите утруждать себя вычислениями того, каким должен быть размер второго окна, чтобы в целом получилось 100%, то можно указать размер окна в пикселах, при этом символ % опускается. Каждый фрейм имеет свое уникальное имя, которое задается при помощи свойства name в ярлыке < frame>. При помощи этого имени фрейм легко доступен при описании на JavaScript. Можно использовать несколько последовательных описаний фреймов при помощи ярлыков < frameset>, при этом фреймы могут быть расположены друг в друге. Вот пример такого расположения фреймов: < frameset cols=" 50%, 50%" > < frameset rows=" 50%, 50%" > < frame src=" cell.htm" > < frame src=" cell.htm" > < /frameset> < frameset rows=" 33%, 33%, 33%" > < frame src=" cell.htm" > < frame src=" cell.htm" > < frame src=" cell.htm" > < /frameset> < /frameset> С фреймами можно осуществлять довольно замысловатые операции, если использовать язык сценариев. Динамическому HTML посвящена следующая лекция.
2.7. Формы Создадим простейший файл с формой forml.html.
< HTML> < head> < title> Пpocтeйшaя фopмa< /title> < /head> < body> < form name= " first" > Поле для ввода текста: < br> < input type=text name = " textl" > < input type=" button" name=" buttonl" value=" Нажми меня" > < p> < /form> < /body> < /HTML> Загрузим файл в браузер, получится картинка, показанная на рисунке. В коде HTML мы использовали ярлык < form>, он открывает форму. Форма - это контейнер, содержащий элементы, образующие тело формы. Требуется закрывающий ярлык. В своем примере мы указали имя для формы - это значение параметра name. Элементы, составляющие тело формы Важными компонентами формы являются поля для ввода текста и кнопки. В нашем случае поле для ввода текста описано при помощи ярлыка < input type=text name = " textl" >. Здесь используется элемент < input>. Большинство элементов тела формы - это элементы < input>. Элементы < input> бывают разнообразными, все зависит от значения свойства type. В случае, когда type=text, элементом будет текстовое поле для ввода текста (однострочного).. Атрибуты свойства type Атрибут type может принимать следующие значения: • button; • checkbox; • file; • hidden; • image; • password; • radio; • reset; • submit; • text. С двумя из них мы уже знакомы, рассмотрим остальные. Тип Checkbox Описывает поле для галочки. Величина поля может быть задана путем указания значений параметров height и width. Если значение оказывается более 20 пикселов, то отступ внутри поля для галочки устанавливается равным 4 пикселам, а внутренняя ширина и высота равняется 8 пикселам. Если значение меньше 20 пикселов, но больше 13 пикселов, то отступ внутри поля для галочки равен половине разности от указанной ширины (или высоты) минус 13. При размерах менее 13 пикселов отступ равен 0. Тип File Используется для отправки файла серверу. При этом необходимо указать приложение, которое будет обрабатывать форму, указав его в атрибуте action ярлыка < form>. Рассмотрим это на
примере файла form2.html. < HTML> < head> < title> Файл< /title> < /head> < body> < form name= " form" action=" scripts/form.php" enctype=" multipart/form-data" method=" post" > Отправить файл серверу: < br> < input type=file name = " file1" > < р> После того, как файл выбран, нажмите кнопку. < input type= " button" name = " buttonl" value = " Отправить файл" > < p> < /form> < /body> < /HTML> Кроме атрибута action, при посылке файла серверу необходимо указать значение атрибута enctype в виде multipart/form-data. Методом отправки может быть либо get, либо post. При отправке форм сервер получает информацию в виде пар, каждая из которых представляет собой имя и соответствующее этому имени значение. Эти пары обрабатываются сервером.
Тип Password Можно в качестве поля текстового ввода данных использовать поле для ввода пароля. Тогда текст, вводимый в это поле, не будет виден в окне браузера, вместо него выводятся звездочки.
Тип Radio Тип < input type=radio> создает переключатели, которые используются для ограничения пользовательского выбора. Пользователь может выбрать лишь один вариант из нескольких. Для этого несколько переключателей объединяют в группу, все переключатели одной группы имеют одинаковое имя name. При посылке формы значение выбранного переключателя отсылается, как значение имени. Для отметки того или иного переключателя, который будет использоваться по умолчанию, служит свойство checked. < HTML> < head> < title> Файл< /title> < /head> < body> < form name= " form" action=" scripts/form.php" enctype= " multipart/form-data" method=" post" > Отправить файл серверу: < br> < input type=file name = " file1" > < p> После того, как файл выбран, нажмите кнопку.0 < input type= " button" name = " buttonl" value = " Отправить файл" > < hr> < p> Укажите Ваш возраст < p> < input type=radio name=" radio" > менее 10 лет < p> < input type=" radio" name=" radio" checked> менее 11-30 лет < p> < input type=" radio" name=" radio" > более 30 лет < p> < /form> < /body> < /HTML> JavaScript 3.1. Основы программирования на Java Script. Управление потоком вычислений. Массивы. Функции. События.
JavaScript - новый язык для составления скриптов, разработанный фирмой Netscape. Код скрипта JavaScript размещется непосредственно на HTML-странице. Чтобы увидеть, как это делается, давайте рассмотрим следующий простой пример: < html> < body> < br> Это обычный HTML документ. < br> < script language=" JavaScript" > document.write(" А это JavaScript! " ) < /script> < br> Вновь документ HTML. < /body> < /html> Все, что стоит между тэгами < script> и < /script>, интерпретируется как код на языке JavaScript. Здесь Вы также видите пример использования инструкции document. write () - одной из наиболее важных команд, используемых при программировании на языке JavaScript. Команда document. write () используется, когда необходимо что-либо написать в текущем документе (в данном случае таком является наш HTML-документ). Так наша небольшая программа на JavaScript в HTML-документе пишет фразу " А это JavaScript! ". Вообще, все типы операторов, которые поддерживаются обычными языками программирования, реализованы JavaScript (+, -, *, /, %, », «, +=, -=, ...). При этом оператор сложения " +" при работе со строками означает конкатенацию последних, т.е. добавление в конец строки новую строку: s = " string1" +" string2" Кроме операций с числами и описаний стандартных классов в JavaScript есть команды управления потоком вычислений: • for - цикл; • for(i=0; i< 9; i++) { • ... } • for - цикл свойств объекта (переменных определенных в классе); • for(i in obj) • { • str = obj[i] • } • if..else - условный оператор; • if(i> 0) { • ... • } • else • { • ... } • while - условный цикл; • while(j==k) j++; • k--; • } • break - принудительный выход из цикла; • while(i< 6) { • if(i==3) break; • continue - переход в конец цикла; • while(i & lt 6) • { • if(i==3) continue; • var - оператор объявления переменной. var kuku = " kuku" Тип переменной определяется по присвоенному ей значению. События и обработчики событий являются очень важной частью для программирования на языке JavaScript. События, главным образом, инициируются теми или иными действиями пользователя: • onLoad - выполнение скрипта или функции при загрузке; • onChange - порождается при изменении значения элемента формы; • опС li с k - порождается при выборе объекта (button, checkbox и т.п.); • onSelect - порождается при выборе текстового объекта (text, textarea); • onSubmit - при нажатии на кнопку Submit; • onUnload - при переходе к другой странице. Мы можем заставить нашу JavaScript-программу реагировать на некоторые из них. И это может быть выполнено с помощью специальных программ обработки событий. < form> < input type=" button" value=" Click me" onClick=" alert('Yo')" > < /form> Функция alert () позволяет Вам создавать выпадающие окна. При ее вызове Вы должны в скобках задать некую строку. В данном примере мы использовали и двойные, и одинарные кавычки. Если бы мы написали onClick=" alert (" Yo" ) ", то компьютер не смог бы разобраться в нашем скрипте. Вы можете использовать в скрипте множество различных типов функций обработки событий. Первый тип новых объектов, которые мы рассмотрим, являются массивы. Тип " Array" введен в JavaScript 1.1 для возможности манипулирования самыми разными объектами new_array = new Array() new_array5 = new Array(5) colors = new Array (" red", " white", " blue" ) Размерность массива может динамически изменяться. Можно сначала определить массив, а потом присвоить одному из его элементов значение. Как только это значение будет присвоено, изменится и размерность массива: colors = new Array() colors[5] = " red" В данном случае массив будет состоять из 6 элементов, т.к. первым элементом массива считается элемент с индексом 0. Для массивов определены три метода: join, reverse, sort. Join объединяет элементы массива в строку символов, в качестве аргумента в этом методе задается разделитель: colors = new Array(" red", " white", " blue" ) string = acolors.join (" + " ) В результате выполнения присваивания значения строке символов string мы получим следующую строку: string = " red + white + blue" Другой метод, reverse, изменяет порядок элементов массива на обратный, а метод sort отсортировывает их в порядке возрастания. У массивов есть два свойства: length и prototype. Length определяет число элементов массива. Если нужно выполнить некоторую рутинную операцию над всеми элементами массива, то можно воспользоваться циклом типа: color = new Array(" red", " white", " blue" ); n = 0; while(n! = colors.length) {.... операторы тела цикла...} Свойство prototype позволяет добавить свойства к объектам массива. Однако наиболее часто, в программе на JavaScript используются встроенные массивы, главным образом графические образы (Images) и гипертекстовые ссылки (Links).
В большинстве наших программ на языке JavaScript мы будем пользоваться функциями. < html> < script language=" JavaScript" > <! -- hide function myFunction() { document.write(" Это JavaScript! < br> " ); } myFunction (); myFunction (); myFunction (); // --> < /script> < /html> Все команды скрипта, что находятся внутри фигурных скобок - {} - принадлежат функции myFunction (). Это означает, что обе команды document.write() теперь связаны воедино и могут быть выполнены при вызове указанной функции. Почему собственно функции столь важны в JavaScript? Функции обычно используются совместно с процедурами обработки событий. Рассмотрим следующий пример: < html> < head> < script language=" JavaScript" > function calculation () { var x= 12; var y= 5; var result= x + y; alert(result); } < /script> < /head> < body> < form> < input type=" button" value=" Calculate" onClick=" calculation()" > < /form> < /body> < /html> Здесь при нажатии на кнопку осуществляется вызов функции calculation (). Иными словами, мы получаем выпадающее окно, в котором написано число 17. Строка состояния и таймеры Составленные Вами программы на JavaScript могут выполнять запись в строку состояния - прямоугольник в нижней части окна Вашего браузера. Все, что Вам необходимо для этого сделать - всего лишь записать нужную строку в window. status. В следующем примере создаются две кнопки, которые можно использовать, чтобы записывать некий текст в строку состояния и, соответственно, затем его стирать. < html> < head> < script language=" JavaScript" > function statbar(txt) { window.status = txt; } < /script> < /head> < body> < form> < input type=" button" name=" look" value=" Писать! " onClick=" statbar('Привет! Это окно состояния! '); " > < input type=" button" name=" erase" value=" Стереть! " onClick=" statbar(''); " > < /form> < /body> < /html> Механизм вывода текста в строку состояния удобно использовать при работе со ссылками. Вместо того, чтобы выводить на экран URL данной ссылки, Вы можете просто на словах объяснять, о чем будет говориться на следующей странице: < a href=" dontclck.htm" onMouseOver=" window.status='Don\'t click me! '; return true; " onMouseOut=" window.status=''; " > link< /a> Вы можете спросить, а почему в onMouseOver мы обязаны возвращать результат true. На самом деле это означает, что браузер не должен вслед за этим выполнять свой собственный код обработки события MouseOver. Как правило, в строке состояния браузер показывает URL соответствующей ссылки. Если же мы не возвратим значение true, то сразу же после того, как наш код был выполнен, браузер перепишет строку состояния на свой лад - то есть наш текст будет тут же затерт и читатель не сможет его увидеть. В общем случае, мы всегда можем отменить дальнейшую обработку события браузером, возвращая true в своей собственной процедуре обработки события.
Таймеры С помощью функции Timeout (или таймера) Вы можете запрограммировать компьютер на выполнение некоторых команд по истечении некоторого времени. В следующем скрипте демострируется кнопка, которая открывает выпадающее окно не сразу, а по истечении 3 секунд. Скрипт выглядит следующим образом: < script language=" JavaScript" > function timer() { setTimeout(" alert('Время истекло! ')", 3000); } < /script> < form> < input type=" button" value=" Timer" onClick=" timer()" > < /form> Здесь setTimeout () - это метод объекта window. Первый аргумент при вызове - это код JavaScript, который следует выполнить по истечении указанного времени. Во втором аргументе указывается задержка в миллисекундах. 3.7. Предопределенные объекты Давайте рассмотрим объект Date. Судя по названию, он позволяет Вам работать как со временем, так и с датой. Например, Вы можете легко определить, сколько дней еще остается до следующего рождества. Или можете внести в Ваш HTML-документ запись текущего времени. Так что давайте начнем с примера, который высвечивает на экран текущее время. Сперва мы должны создать новый объект Date. Для этого мы пользуемся оператором new: today= new Date() Вновь созданный объект today будет указывать именно те дату и время, когда данная команда была выполнена. Объект Date предоставляет нам кое-какие методы, которые теперь могут применяться к нашему объекту today. Например, это методы - getHours(), setHours(), getMinutes(), setMinutes(), getMonth(), setMonth() и так далее Чтобы зафиксировать какое-либо другие дату и время, мы можем воспользоваться видоизмененным конструктором Date(year, month, day, hours, minutes, seconds) Заметьте, что месяцы нумеруются с нуля. Число 1 будет обозначать февраль, ну и так далее. Теперь мы напишем скрипт, печатающий текущие дату и время. < script language=" JavaScript" > now= new Date (); document.write(" Time: " + now.getHours() + ": " + now.getMinutes() + " < br> " ); if(now.getYear() > 1999) document.write(" Date: " +now.getYear()+" /" +(now.getMonth()+1)+" /" +now.getDate()); else document.write(" Date: " +(1900+now.getYear())+" /" +(now.getMonth()+1)+" /" +now.getDate()); В данном скрипте не выполняется проверки на тот случай, если количество минут окажется меньше, чем 10. Это значит, что Вы можете получить запись времени примерно в следующем виде: 14: 3, что на самом деле должно было бы означать 14: 03. Решение этой проблемы мы рассмотрим в следующем примере. Рассмотрим теперь скрипт, создающий на экране изображение работающих часов: < html> < head> < script Language=" JavaScript" > var timeStr, dateStr; function clock() { now= new Date(); hours= now.getHours (); minutes= now.getMinutes(); seconds= now.getSeconds(); timeStr= " " + hours; timeStr+= ((minutes < 10)? ": 0" : ": " ) + minutes; timeStr+= ((seconds < 10)? ": 0" : ": " ) + seconds; document.clock.time.value = timeStr; date= now.getDate(); month= now.getMonth()+1; year= now.getYear(); dateStr= " " + month; dateStr+= ((date < 10)? " /0" : " /" ) + date; if(now.getYear() > 1999) dateStr+= " /" + year; else dateStr+= " /" + (1900+year); document.clock.date.value = dateStr; Timer= setTimeout(" clock()", 1000); } < body onLoad=" clock()" > < form name=" clock" > Время: < input type=" text" name=" time" size=" 8" value=" " > < br> Дата: < input type=" text" name=" date" size=" 8" value=" " > < /form> < /body> < /html> Можно видеть, что функции clock() вызываются программой обработки события onLoad, помещенной в тэг < body>. В разделе body нашей HTML-страницы имеется два элемента формы для ввода текста. Функция clock() записывает в оба эти элемента в корректном формате текущие время и дату. Объект Math Если Вам необходимо в скрипте выполнять математические рассчеты, то некоторые полезные методы для этого Вы найдете в объекте Math. Например, имеется метод синуса sin(). Я бы хотел продемонстрировать работу метода random(). Если Вы вызовете функцию Math. random (), то получите случайное число, лежащее в диапазоне между 0 и 1. Один из возможных результатов вызова document. write (Math. random ()) (при каждой новое загрузке данной страницы здесь будет появляться другое число):
Объект Image С помощью объекта Image Вы можете вносить изменения в графические образы, присутствующие на web-странице. В частности, это позволяет нам создавать мультипликацию. В JavaScript все изображения предстают в виде массива. Массив этот называется images и является свойством объекта document. Например, Вы можете определить, который размер имеет изображение, обратившись к его свойствам width и height. То есть по записи document.images[0].width Вы можете определить ширину первого изображения на web-странице (в пикселах). К сожалению, отслеживать индекс всех изображений может оказаться затруднительным, особенно если на одной странице у Вас их довольно много. Эта проблема решается назначением изображениям своих собственных имен. Так, если Вы заводите изображение с помощью тэга < img src=" img.gif" name=" myImage" height=100> то Вы сможете обращаться к нему, написав document.myImage или document.images[" myImage" ]. Начиная с версии JavaScript 1.1, вы имеете возможность назначать новый адрес изображению, уже загруженному в web-страницу. И в результате, изображение будет загружено с этого нового адреса, заменив на web-странице старое. Рассмотрим к примеру запись: < img src=" img1.gif" name=" myImage" > Здесь загружается изображение img 1. gif и получает имя myImage. В следующей строке прежнее изображение img1. gifзаменяется уже на новое - img 2. gif : document.myImage.src= " img2.src"; При этом новое изображение всегда получает тот же размер, что был у старого. И Вы уже не можете изменить размер поля, в котором это изображение размещается. Один из недостатков такого подхода может заключаться в том, что после записи в src нового адреса начинает процесс загрузки соответствующего изображения. И поскольку этого не было сделано заранее, то еще пройдет некоторое время, прежде чем новое изображение будет передано через Интернет и встанет на свое место. В некоторых ситуациях это допустимо, однако часто подобные задержки неприемлемы. И что же мы можем сделать с этим? Конечно, решением проблемы была бы упреждающая загрузка изображения. Для этого мы должны создать новый объект Image. Рассмотрим следующие строки: hiddenImg= new Image(); hiddenImg.src= " img3.gif"; В первой строке создается новый объект Image. Во второй строке указывается адрес изображения, которое в дальнейшем будет представлено с помощью объекта hiddenImg. Как мы уже видели, запись нового адреса в атрибуте src заставляет браузер загружать изображение с указанного адреса. Поэтому, когда выполняется вторая строка нашего примера, начинает загружаться изображение img 2. gif. Но как подразумевается самим названием hiddenImg (" скрытая картинка" ), после того, как браузер закончит загрузку, изображение на экране не появится. Оно будет лишь будет сохранено в памяти компьютера (или точнее в кэше) для последующего использования. Чтобы вызвать изображение на экран, мы можем воспользоваться строкой: document.myImage.src= hiddenImg.src; Но теперь изображение уже немедленно извлекается из кэша и показывается на экране. Таким образом, сейчас мы управляли упреждающей загрузкой изображения. Вы можете создать красивые эффекты, используя смену изображений в качестве реакции на определенные события. Например, Вы можете изменять изображения в тот момент, когда курсор мыши попадает на определенную часть страницы: < a href=" #" onMouseOver=" document.myImage2.src='img2.gif" оnMouseOut=" document.myImage2.src='img1.gif" > < img src=" img1.gif" name=" myImage2" height=50 border=0> < /a>
VBScript Как мы уже убедились статические HTML страницы существенно проигрывают в сравнении с DHTML, поэтому мимо разработка языка сценариев не могла пройти и компания Microsoft. Так в противовес JavaScript разработанному компанией Netscape появился VBScript, разработанный. компанией Microsoft Эти языки используются на стороне клиента, то есть генерируют объекты на основании HTML-страницы на стороне клиента в окне его браузера. Данный подход имеет некоторые недостатки: • сложность доступа к данным, находящимся на сервере • высокие требования к аппаратным возможностям клиента • высокая нагрузка на сеть, так как сервер вынужден передавать много лишней Эти проблемы возникают в связи с тем, что использование только скриптов заставляет решать все проблемы пользовательскую машину. Противоположный подход - решение все проблем на сервере так же имеет много недостатков, основной из которых связан с перегрузкой сервера при большом количестве запросов. Типичным примером такого подходя является CGI. По сути CGI — способ взаимодействия Web-программ с браузером пользователя. Поэтому под CGI-программами понимают программы, написанные на любом языке программирования, способного выполняться на Web-сервере, включая C, C++, Visual Basic или даже командные языки операционных сред (например, C Shell). Но большинство CGI-программ пишется на языке Perl. Perl (Practical Extraction and Report Language) является одним из наиболее гибких языковых средств, служащих для программирования интерфейсов CGI. Изначально Perl предназначался для обработки больших объемов данных и генерации отчетов по обработке этих данных (как явствует из его названия). За последние несколько лет Perl превратился в полнофункциональный язык программирования. Изначально созданный исключительно для работы под управлением операционных систем семейства UNIX, Perl теперь совместим с такими ОС, как Amiga, MS-DOS, OS/2 Warp, VMS, Windows NT, Window 95 и Macintosh. Таким образом, CGI осуществляет запуск Web-приложения на стороне сервера, данные выводимые этим приложением на стандартный вывод и являются HTML-страницей, посылаемой клиенту. Всякий раз, когда клиент инициирует выполнение CGI-приложения, Web-сервер выполняет отдельную его копию (instance). Проблема заключается в том, что для каждого запроса клиента запускается копия Web-приложения на сервере, что резко сокращает производительность сервера при больших и средних нагрузках. Понятно, что решить вышеперечисленные проблемы позволит только технология, в которой бы сочетались интерактивные возможности скриптов и мощные возможности серверных приложений. При этом серверная часть не должна быть самостоятельным приложением, что бы не создавать свой instance при каждом обращений. В последнее время все большую популярность получают два средства создания интерактивных Web-страниц — ASP и PHP, работающие именно таким образом. Основным их достоинством является возможность формирования страниц на основании интерактива «клиент-сервер». Сами же программы, написанные на ASP (Active Server Pages — активные серверные страницы) и PHP (Personal Home Page), настолько просты, что программирование с их помощью доступно даже неискушенным. PHP часто еще называют препроцессором гипертекста (Hypertext Preprocessor). По сути РНР серверный (выполняющийся на стороне сервера) мультиплатформный язык описания сценариев, встраиваемый непосредственно в HTML-код. В настоящее время PHP интенсивно используют более полумиллиона доменов Всемирной компьютерной сети, он распространяется на правах freeware и его можно свободно скачать с сайта разработчика http: // www. php. net /. Основу синтаксиса PHP составляют язык программирования C, Java и Perl. Целью создания языка является разработка динамически генерируемых страниц в кратчайшие сроки. Несмотря на то что PHP — прекрасная альтернатива ASP, мы остановимся на последнем. Сравнивая эти два средства, решающие по сути схожие задачи, следует отметить переносимость первого (PHP) в отличие от второго (ASP) и специальную «заточку» ASP под создание гибких и удобных интерфейсов к базам данных. Это включает использование ActiveX Data Objects (ADO). Колоссальная поддержка структурированного языка запросов к базам данных SQL является мощнейшим средством, используя которое разработчик может не переучиваясь, работать напрямую с базами данных привычным образом. ASP поддерживает работу со всеми базами данных, соответствующими стандарту ODBC. Говоря простыми словами, Active Server Pages — это обычные страницы, которые содержат скрипты, выполняющиеся на сервере наряду с обычным HTML-кодом. Принцип работы прост: после того как «серверный» код обработан сервером, результирующая страница, содержащая только клиентский код (HTML, JavaScript, VBScript), посылается клиенту. Код, выполнявшийся на стороне сервера, увидеть в окне браузера невозможно — вы видите лишь результат его работы. ASP работает как под управлением Windows (NT, 2000, 2003) сервера (необходимо установить Windows Server и Web-сервер с поддержкой ASP — Microsoft's Internet Information Server [IIS]), так и под управлением других операционных систем. В последнее время компания Chili! Soft разработала версии ASP для следующих операционных систем: • Linux • Windows • Solaris • AIX • HP-UX ASP становится совместимым со все большим числом операционных систем. < %@ LANGUAGE=" VBSCRIPT" %> < HTML> < HEAD> < TITLE> ASP test< /TITLE> < /HEAD> < BODY> < %= " Good day! It is now" & time %> < /BODY> < /HTML> Написание CGI (Common Gateway Interface)-программ требовало особой осторожности и весьма высокой квалификации от программистов и администраторов, возникали сложности при отладке большинства приложений написанных на C, C++ или Perl. Когда компания Microsoft выпустила 3-ю версию своего Web-сервера (Internet Information Server), в начале 1997 года был создан принципиально новый метод написания серверных приложений. Общие сведения о ASP Вы пишете программу и складываете в файл на сервере. Браузер клиента запрашивает файл. Файл сначала интерпретируется сервером, на выходе производится HTML-код. Этот HTML посылается клиенту. Файлы с программами имеют расширение.asp. Файлы asp - это обычные текстовые файлы, содержащие исходные тексты программ. Файлы делаются с помощью любого текстового редактора. Каталог, в котором размещены файлы asp должен иметь права на выполнение, так как сервер исполняет эти файлы, когда браузер их запрашивает. Собственно программы пишутся на любом скриптовом языке, который установлен в системе. По умолчанию поддерживаются VBScript и JavaScript. Можно доустановить другие (например, Perl). Если ничего специально не указывать используется VBScript. В дальнейшем будем ссылаться только на него. Программные фрагменты заключаются в скобки < % %>. Можно ставить открывающую скобку в начале файла, закрывающую - в конце, все что между ними - программа на Visual Basic'е. В VBScript есть все нормальные конструкции структурного программирования (if, while, case, etc). Есть переменные (описывать не обязательно, тип явно не задается). Поддерживаются объекты. Работа с ними обычная - Object.Property, Object.Method. Есть ряд встроенных объектов (Request, Response, Session, Server, Connection, Recordset). Можно доустанавливать другие компоненты (скачивать, покупать, программировать), например для работы с электронной почтой. Понятия " экран", куда можно выводить данные нет. Все, что надо показать пользователю, выбрасывается в выходной поток на языке HTML. Для упрощения вывода существует объект Response. Вывод осуществляется с помощью метода Write. Response.Write(" < h2> Hello, world! < /h2> " ). Так производится запись во внутренний буфер объекта Response. Когда скрипт заканчивает работу, весь буфер выдается клиенту. Надо заметить, что клиент получает " чистый" HTML, таким образом программы на ASP не зависят от клиентского ПО, что очень важно. Если внутри выводимой строки нужно использовать кавычку, кавычка удваивается. Метод Response. Redirect перенаправляет браузер на другую страницу. Чтобы им пользоваться, нельзя до него на странице использовать Response.Write.
4.2. Ввод и вывод на ASP Программа на ASP не может явно спросить пользователя о чем-то. Она получает данные из других страниц, либо через URL. Передаваемые параметры помещаются во входной поток и доступны через объект Request. Чтобы передать переменную var в программу test.asp, надо написать: test.asp? var=abc Чтобы из программы получить значение этой переменной, надо написать: var = Request(" var" ) Несколько переменных разделяется знаком &: test.asp? var1=abc& var2=def Кроме того, чтобы задавать параметры в URL, можно воспользоваться формами HTML. В вызывающей странице пишем так: < form method=" get" action=" test.asp" > < input type=text name=" var1" value=" default" > < input type=submit value=" Submit Form" > < /form> При этом пользователь увидит форму из одного поля ввода (var1), в нем будет значение по умолчанию " default". Кнопка " Submit Form" завершает заполнение формы и передает все переменные на test.asp (action). Если method=" get", переменные передаются через URL (test.asp? var1=default& var2=var2value). Если method=" post", передаются вместе с запросом так, что внешне передача переменных не заметна. В вызываемой программе безразлично, какой метод изпользовался (почти). Если у вас нет специальных аргументов за метод GET, используйте метод POST. 4.3. Взаимосвязь между отдельными страницами в ASP Обычно сервер WWW не хранит состояние приложения, т.е. все запросы взаимонезависимы, и нет стандартного способа понять, что несколько запросов пришли от одного и того же пользователя. Но это очень нужно для разработки полноценных приложений и является одной из главных проблем разработки Web-приложений. Один из методов решения этой проблемы - cookies. Пользователю при первом обращении выдается специальный идентификатор, после этого браузер пользователя предъявляет этот идентификатор при каждом обращении, и сервер может распознать, что это тот же самый пользователь. Пользователь может отключить cookies, в этом случае этот метод не работает. ASP, используя cookies, предоставляет программисту более простое средство - объект Session (сессия). Сессия стартует, когда новый пользователь обращается к любому asp-файлу приложения. Сессия заканчивается при отсутствии активности пользователя в течение 20 минут, либо по явной команде. Специальный объект Session хранит состояние сессии. Туда можно записывать переменные, которые доступны из любой страницы в этой сессии. Записать данные в этот объект можно просто: Session(" var" ) = var Считать потом еще проще: var = Session(" var" ) Сессия, таким образом, - это еще один метод передачи данных между страницами. Одна страница пишет данные в сессию, другая - берет потом оттуда. Наряду с объектом Session существует объект Application. Если сессия создается для каждого нового пользователя, до Application существует в единственном экземпляре, и может использоваться всеми страницами приложения. Application(" var" ) = var var = Application(" var" )
4.4. Использование внешних компонент
Если на сервере установлены дополнительные компоненты, их можно использовать из ASP. Стандартные объекты (например из библиотек ADO (Connection и Recordset) и Scripting (Dictionary, FileSystemObject)) доступны всегда. Установка новой компоненты обычно состоит в копировании dll-файла в каталог на сервере и ее регистрации с помощью программы regsvr32.exe Создать экземпляр объекта можно так: Set var = Server.CreateObject(" Class.Object" ) Class.Object указываются в документации на компоненту. В переменной var запоминается ссылка на созданный экземпляр объекта. Когда объект не нужен, ссылку нужно обнулить с помощью команды: Set var = Nothing Пожалуйста всегда обнуляйте все ссылки на объекты, когда они больше не нужны. Теоретически это должно происходить автоматически при завершении процедуры/страницы, однако в стандартной сборке мусора есть определенные " проблемы". В остальном использование компоненты зависит от самой этой компоненты. Ввод и вывод на РНР HTML-формы представляют собой механизм передачи серверу данных от пользователя клиентского браузера. Рассмотрим HTML-файл, содержащий форму (файл form.html). < html> < title> Пример формы < /title> < /head> < body> < form name=" formname" method=post action = " http: //localhost/cgi-bin/form.php" > < Р> Введите текстовую информацию: < input type=" text" name=" textl" > < PXinput type=" submit" value=" Submit the form to the serve: " < /form> < /body> < /html>
Элемент формы начинается открывающим ярлыком < fоrm>. В качестве свойств элемента в ярлыке указаны имя элемента formname, метод передачи данных post и свойство action. Последнее свойство — это адрес файла, содержащего программу, которая будет обрабатывать данные. Адрес может быть как относительный (относительно местоположения данного HTML-файла), так и абсолютный. Внутри элемента формы описано несколько компонентов. Важным для нас являются элементы input. Каждый элемент имеет имя и значение. Именно эти пары имен и значений будут переданы серверу в виде name=value. Так, в нашем случае переменной с именем textl будет соответствовать строковое значение, которое пользователь ввел в соответствующее поле. Различные типы элементов input, описанные в языке HTML, соответствуют различным графическим элементам, отображаемым в окне браузера. Кнопка отправки формы имеет тип " submit". Все пары name=value, содержащиеся в форме, будут переданы программе, указанной в качестве значения свойства action. В файле form.php обратиться к этим значениям можно, просто указав имя соответствующей им переменной. Все переменные в РНР начинаются со знака $, поэтому наша переменная будет иметь вид $testl. Напишем простой PHP-файл form, php для обработки данной формы. Мы уже видели, что текст РНР программы начинается с символов <? и заканчивается? >. <? echo " < html> < head> < title> Forms< /title> < /head> < body> "; echo " < hl> User input< /h1> Пользователь ввел такую строку: < Р> "; echo $textl; echo " < /body> < /html> "; ? >
Файл сохраняем в каталоге cgi-bin/. После нажатия кнопки отправки формы мы, видим, что пользовательские данные возвращены сервером. Приведенная в этом примере страница не имеет никакого дизайна. Коммерческие Web-приложения должны быть оформлены с учетом возможности HTML-форматирования и удобства пользователей при работе. 5.3. РНР и базы данных. Работа с MySQL.
test.php $action=$HTTP_GET_VARS[" action" ]; echo " < html> < body> "; echo " action=".$action." < p> "; $c=mysql connect(" localhost: 330 6", " admin", " " ); if ($action==" create" ) { $result=mysql create db(" articles", $c); echo $result; mysql select db(" articles", $c); $stroka=" CREATE TABLE article (Subject CHAR(50), Article LONGTEXT, Author CHAR(50), Title CHAR(50), ID INT, Annotation CHAR(50)); "; $result=mysql query($stroka); echo $result; $stroka=" CREATE TABLE WAPassword (Password CHAR(50), ID INT); "; $result=mysql query($stroka); echo $result; } if ($action==" insert" ) { mysql select db(" articles", $c); $stroka=" INSERT INTO article VALUES('Mathematics', 'Обсуждаются свойства.................................................... ', 'Ivanov V.I.', 'Об одном свойстве', 1, 'В работе рассматривается1); "; $result=mysql query($stroka); if ($result) echo $result; $stroka=" INSERT INTO article VALUES('Mathematics', 'Обсуждаются методы..................................................... ', 'Ivanov V.I.', 'Об одном методе', 2, 'В работе рассматривается'); "; $result=mysql query($stroka); if ($result) echo $result; $stroka=" INSERT INTO WAPassword VALUES('2003', 1); "; $result=mysql query($stroka); if ($result) echo $result; } if ($action==" show" ) { mysql select db(" articles", $c); $stroka=" select * from article; "; $result=mysql query($stroka); $noro=mysql nura rows ($result); echo " Rows number".$noro." < br> "; echo " < table border=0> < tr align='center'> < td> Haзвание< /td> < td> ABTop< /td> < td> Aннотация< /td> < /tr> "; while($row=mysql fetch array($result)) { echo " < tr> "; echo " < td> ".$row[" Title" ]." < /td> "; echo " < td> < i> By".$row[" Author" ]." < /i> < /td> "; echo " < td> ".$row[" Annotation" ]." < /td> "; echo " < /tr> "; } if ($action==" delete" ) { mysql drop db(" articles", $c); if ($result) echo $result; } mysql close($c); echo " < /body> < /html> "; ? > 5.4. Основные функции PHP для работы с MySQL. lr4.php < html> < head> < title> Ham газетный сайт - первые шаги в PHP и MySQL< /title> < /head> < body> < center> < p> < font size=" 3" со1ог=" #000000" > < b> Главная страница< /b> <! -- Определим основные линки --> < center> < а href=" UploadForm.php" class=" antiLine" > Загрузка статьи< /а> < br> < /center> < table BORDER=0 CELLSPACING=O CELLPADDING=O WIDTH=" 640" > <! -- Создадим таблицу шириной 640 пиксел --> < tr> < td BGCOLOR=" #FFCC99" valign = top> < /td> < /tr> <? $c=mysql connect(" localhost: 330 6", " admin", " " ); mysql select db(" articles", $c); $stroka=" select * from article; "; $result=mysql_query($stroka); $Cnt = 0; echo " < table border=0Xtr align='center'> < td> Haзвaниe< /td> < td> Aвтop< /td> < td> Aннoтaция< /td> < /tr> ''; while($row=mysql_fetch_array($result)) { echo " < tr> "; $Link=" < a href=ArtTempl.php? id=".$row[" ID" ]." > ".$row[" Title" ]." < /a> "; echo " < td> ".$Link." < /tdXtdXi> By".$row [" Author" ]." < /iX/td> "; echo " < td> ".$row[" Annotation" ]." < /td> "; echo " < /tr> "; $Cnt = $Cnt + 1; } echo " < /table> "; mysql_close($c); ? > < p> < font size=" 3" color=" #000000" > < i> <? $D = date(" F j, Y" ); echo " Сегодня".$D; echo ". В базе - ".$Cnt." статей"; ? > < /i> < /font> < /font> < /p> < /table> < /center> < /body> < /html> ArtTempl.php <? $TheID = $HTTP_GET_VARS[" id" ]; $c=mysql connect(" localhost: 330 6", " admin", " " ); mysql select db(" articles", $c); $stroka=" SELECT * FROM article Where ID =".$TheID; $result=mysql_query($stroka); $row=mysql_fetch_array($result); echo $row[" ID" ].".".$row[" Title" ]; echo " < i> < b> By".$row[" Author" ]." < /b> "; echo " < br> Subject: ".$row[" Subject" ]." < br> "; echo $row[" Article" ]; mysql_close ($c); ? > UploadForm.php < html> < head> < title> Загрузка статьи< /title> < /head> < body> < FORM NAME=" mainform" METHOD=" GET" ENCTYPE=" multipart/form-data" ACTION=" Upload.php" > < b> Author: (*)< /b> < br> < input type=TEXT size=56 name=" Author" > < br> < I — Поле имени автора статьи --> < b> Title: (*)< /b> < br> < input type=" text" name=" Title" size=" 56" > < br> < I— Поле заголовка статьи --> < b> Article Annotation: < /b> < br> < textarea name=" Annotation" cols=" 56" > < /textarea> < br> < I— Поле аннотации к статье —> < b> Article Text: < /b> < br> < textarea cols=" 56" name=" Article" rows=" 15" > < /textarea> < br> < I— Поле текста самой статьи --> < b> Type of the article: (*)< /b> < br> <! -- Поле рубрикатора статьи —> < select name=" Subject" > <? $c=mysql connect(" localhost: 330 6", " admin", " " ); mysql select db(" articles", $c); $stroka=" SELECT distinct Subject FROM article; "; $result=mysql query($stroka); while($row=mysql_fetch_array($result)) echo " < option> ".$row[" Subject" ]." < /option> "; ? > < /select> < br> < b> Database access password: (*)< /b> < br> < input type=" password" name=" Password" > < br> < center> < input type=SUBMIT value=" Publish the Article! " name=" SUBMIT" > < input type=" reset" name=" Reset" value=" Reset Article Form" > < /center> < /FORM> < /body> < /html> Upload.php < html> $c=mysql connect(" localhost: 330 6", " admin", " " ); mysql select db(" articles", $c); $stroka=" Select * From WAPassword Where ID = 1"; $result=mysql query($stroka); $row=mysql fetch array($result); $DBP = $row[" Password" ]; function Formatstr($InString) { $InString = str_replace(chr(13).chr(10), " < br> ", $InString); $InString = str_replace(chr (10).chr(10), " < /PXP> ", $InString); $InString = str_replace(chr(10), " < BR> ", $InString); $InString = str_replace(" '", " " ", $InString); $InString = str_replace(chr(34), " /", $InString); return $InString; } $ErrA = 0; $ErrT = 0; $ErrP = 0; $ErrC = 0; $AUT = $HTTP_GET_VARS[" Author" ]; if($AUT==" " ) $ErrA = 1; $AUT=FormatStr($AUT); $TIT = $HTTP_GET_VARS[" Title" ]; if (TIT==" " ) $ErrT = 1; $TIT=FormatStr($TIT); $ART = $HTTP_GET_VARS[" Article" ]; if($ART==" " ) $ErrC = 1; $ART=FormatStr($ART); $SBJ = $HTTP_GET_VARS[" Subject" ]; $ANN = $HTTP_GET_VARS[" Annotation" ]; $ANN = FormatStr($ANN); if($ANN==" " ) $ANN = " NA"; $Password = $HTTP_GET_VARS[" Password" ]; if($Password==$DBP) If($ErrA ==0 & & $ErrT == 0) { $stroka=" select max(ID) AS MAX_ID from article"; $result=mysql query($stroka); $row=mysql fetch array($result); $ID=intval($row[" MAX_ID" ])+1; $stroka=" insert into article (Author, Title, Article, Subj ect, Annotation, ID) values('".$AUT." ', '".$TIT." ', '".$ART." ', '".$SBJ." ', '" $ANN." ', '".$ID." ')"; $result=mysql query($stroka); } else $ErrP = 1; $N = date(" j F Y. H: i: s" ); if($ErrP==0 & & $ErrA==0 & & $ErrT==0 & & $ErrC==0) echo " Article uploaded successfully at ".$N." < br> "; if ($ErrP==l) echo " Error! Article database access denied! Incorrect password! "; if($ErrA==l) echo " < br> Error! No Author specified! "; if($ErrT==l) echo " < br> Error! No Title specified! "; if ($ErrC==l) echo " < br> Error! You should specify article text! "; mysql_close ($c); ? >
Библиографический список 1. Будилов В.А. Практические занятия по РНР 4. СПб.: Наука и Техника, 2001. – 352с. 2. Гарнаев А.Ю. Web-программирование на Java и JavaScript. СПб: БХВ, 2006. – 1040с. 3. Моррисон М. HTML и XML. М.: Питер, 2005. – 303с. 4. Пауэрс Ш. ASP компоненты. СПб: Питер, 2004. – 832с. 5. Водолазкий В. PHP/4. СПб: Питер, 2002. – 416с. 6. Томсон Л. Разработка Web-приложений на PHP и MySQL. М.: ДиаСофт, 2001. – 672с. 7. Паттерсон Л., Слоан Б., Шарльворс С. Использование HTML 4. М.: Вильямс, 2001. – 400с. 8. Лавджой И. ASP Web-профессиналам. Киев: BHV, 2001. – 288с. 9. Зандстра М. Освой самостоятельно PHP4 за 24 часа. М.: Вильямс, 2001. – 384с.
Смирнов О.И. доцент
КОНСПЕКТ ЛЕКЦИЙ по дисциплине
ИнТЕРНЕТ-ТЕХНОЛОГИИ
Направление подготовки: 01.03.02 «Прикладная математика и информатика» Профиль подготовки: «Прикладная математика и информатика»
Направление подготовки: 02.03.01 «Математика и компьютерные науки» Профиль подготовки: «Математическое и компьютерное моделирование»
Форма обучения: очная
Тула 2016 г. Рассмотрено на заседании кафедры протокол № 10 от «16» мая 2016 г.
Зав. кафедрой________________В.И. Иванов
Содержание Лекция 1 1. Основные понятия Информационных технологий……………………………………………..4 1.1. Назначение TCP/IP - сетей. Общая схема работы………………………………………….4 1.2. Назначение WWW - сервера. Общая схема работы………………………………………..6 Лекция 2 1.3. Протокол MIME………………………………………………………………………………9 1.4. Протокол HTTP………………………………………………………………………………10 Лекция 3 1.5. Интерфейс CGI……………………………………………………………………………….10 Лекция 4 2. HTML - язык гипертекстовой разметки…………………………………………………………10 2.1. HTML теги……………………………………………………………………………………10 2.2. Структура HTML документа………………………………………………………………...11 Лекция 5 2.3. Средства HTML-форматирования…………………………………………………………..13 2.4. Ссылки. Рисунки. Карты……………………………………………………………………..15 Лекция 6 2.5. Каскадные таблицы стилей…………………………………………………………………..19 2.6. Фреймы………………………………………………………………………………………..21 Лекция 7 2.7. Формы………………………………………………………………………………………....2 Лекция 8 3. JavaScript…………………………………………………………………………………………..24 3.1. Основы программирования на Java Script. Управление потоком вычислений. Массивы. Функции. События…………………………………………………………………………...24 3.2. Иерархия HTML-объектов в JavaScript……………………………………………………..27 Лекция 9 3.3. Фреймы и JavaScript. Навигационные панели……………………………………………...28 3.4. Формы и JavaScript…………………………………………………………………………...30 Лекция 10 3.5. Окна и динамически создаваемые документы…………………………………………….. 32 3.6. Строка состояния и таймеры………………………………………………………………...34 Лекция 11 3.7. Предопределенные объекты…………………………………………………………………35 Лекция 12 4. ASP - язык серверных сценариев…………………………………………………………………38 4.1. VBScript……………………………………………………………………………………….38 4.2. Ввод и вывод на ASP…………………………………………………………………………40 Лекция 13 4.3. Взаимосвязь между отдельными страницами в ASP……………………………………….41 4.4. Использование внешних компонент………………………………………………………...41 Лекция 14 4.5. ASP и базы данных. ODBC и ADO………………………………………………………….42 4.6. Обзор SQL…………………………………………………………………………………….48 Лекция 15 5. PHP + MySQL……………………………………………………………………………………...51 5.1. Основы программирования на PHP…………………………………………………………51 5.2. Ввод и вывод на PHP…………………………………………………………………………52 Лекция 16 5.3. PHP и базы данных. Работа с MySQL……………………………………………………….53 Лекция 17 5.4. Основные функции PHP для работы с MySQL……………………………………………..55 Основные понятия Информационных технологий Интернет-технологии неразрывно связаны с технологией World Wide Web, в переводе " Всемирная паутина", которая получила широкое распространение из-за простоты своих пользовательских интерфейсов. Принцип " жми на то, что интересно", лежащий в основе гипертекста, интуитивно понятен. В технологиях WWW все ключевые понятия просматриваемого документа: слова, картинки – имеют возможность " раскрыться" новым документом, развивающим это понятие. Такой способ представления информации называется " гипертекстом", а документы, представленные в таком виде – " гипертекстовыми документами". Для описания этих документов используется специальный язык – язык описания гипертекстовых документов или HTML (англ. вариант HyperText Markup Language). Использование технологий WWW для обеспечения доступа к каким-либо информационным ресурсам подразумевает существование следующих компонент (см. рис.1.1): 1. ТСР/IР – сети с поддержкой базового набора услуг по передаче данных с единой 2. Выделенного информационного сервера – WWW -сервера, обеспечивающего
Рис. 1.1 Передаваемые гипертекстовые документы оформляются в стандарте HTML – языке описания гипертекстовых документов. Эти документы могут либо храниться в статическом виде (совокупность файлов на диске), либо динамически компоноваться в зависимости от параметров запроса специальным программным обеспечением 1.1. Назначение TCP/IP - сетей. Общая схема работы. История и перспективы стека ТСР/IР Transmission Control Protocol / Internet Protocol ( TCP / IP ) – это промышленный стандарт стека протоколов, разработанный для глобальных сетей. Этот протокол был разработан по инициативе Министерства обороны США (Department of Defence, DoD) более 20 лет назад для связи экспериментальной сети ARPAnet с другими сателлитными сетями как набор общих протоколов для разнородной вычислительной среды. Сеть ARPA поддерживала разработчиков и исследователей в военных областях. Большой вклад в развитие стека ТСРЯР внес университет Беркли, реализовав протоколы стека в своей версии ОС UNIX. Широкое распространение ОС UNIX привело и к широкому распространению протокола IP и других протоколов стека. На этом же стеке работает всемирная информационная сеть Internet, чье подразделение Internet Engineering Task Force (IETF) вносит основной вклад в совершенствование стандартов стека. За долгие годы использования в сетях различных стран и организаций стек TCP/IP накопил большое количество протоколов и сервисов прикладного уровня. К ним относятся такие широко используемые протоколы, как протокол копирования файлов FTP, протокол эмуляции терминала telnet, почтовый протокол SMTP, используемый в электронной почте сети Internet, протокол HTTP, используемый для гипертекстовых сервисов доступа к удаленной информации, таких как WWW. Остановимся несколько подробнее на некоторых из них. Протокол пересылки файлов FTP (File Transfer Protocol) реализует удаленный доступ к файлу. Кроме пересылки файлов протокол FTP предлагает и другие услуги. Так, пользователю предоставляется возможность интерактивной работы с удаленной машиной, например, он может распечатать содержимое ее каталогов. Наконец, FTP выполняет аутентификацию пользователей. Прежде, чем получить доступ к файлу, в соответствии с протоколом пользователи должны сообщить свое имя и пароль. Для доступа к публичным каталогам FTP-архивов Internet парольная аутентификация не требуется, и ее обходят за счет использования для такого доступа предопределенного имени пользователя Anonymous. Протокол telnet обеспечивает передачу потока байтов между процессами, а также между процессом и терминалом. Наиболее часто этот протокол используется для эмуляции терминала удаленного компьютера. При использовании сервиса telnet пользователь фактически управляет удаленным компьютером так же, как и локальный пользователь.
Адресация в IP-сетях Типы адресов: физический (MAC-адрес), сетевой (IP-адрес) и символьный (DNS-имя). Каждый компьютер в сети ТСРЯР имеет адреса трех уровней: • Локальный адрес узла, определяемый технологией, с помощью которой построена • IP-адрес, состоящий из 4 байт, например, 109.26.17.100. Он назначается Номер узла в протоколе IP назначается независимо от локального адреса узла. Деление IP-адреса на поле номера сети и номера узла - гибкое, и граница между этими полями может устанавливаться весьма произвольно. • Символьный идентификатор-имя, например, SERV1.IBM.COM. Этот адрес Адрес 127.0.0.1 зарезервирован для организации обратной связи при тестировании работы программного обеспечения узла без реальной отправки пакета по сети. Этот адрес имеет название loopback. Отображение символьных адресов на IP-адреса: служба DNS DNS ( Domain Name System ) - это распределенная база данных, поддерживающая иерархическую систему имен для идентификации узлов в сети Internet. Служба DNS предназначена для автоматического поиска IP-адреса по известному символьному имени узла. Протокол DNS несимметричен - в нем определены DNS-серверы и DNS-клиенты. DNS-серверы хранят часть распределенной базы данных о соответствии символьных имен и IP-адресов. Эта база данных распределена по административным доменам сети Internet. Клиенты сервера DNS знают IP-адрес сервера DNS своего административного домена и по протоколу IP передают запрос, в котором сообщают известное символьное имя и просят вернуть соответствующий ему IP-адрес. Если данные о запрошенном соответствии хранятся в базе данного DNS-сервера, то он сразу посылает ответ клиенту, если же нет - то он посылает запрос DNS-серверу другого домена, который может сам обработать запрос, либо передать его другому DNS-серверу. Клиентские компьютеры могут использовать в своей работе IP-адреса нескольких DNS-серверов, для повышения надежности своей работы. База данных DNS имеет структуру дерева, называемого доменным пространством имен, в котором каждый домен (узел дерева) имеет имя и может содержать поддомены. Имя домена идентифицирует его положение в этой базе данных по отношению к родительскому домену, причем точки в имени отделяют части, соответствующие узлам домена. Корень базы данных DNS управляется центром Internet Network Information Center. Домены верхнего уровня назначаются для каждой страны, а также на организационной основе. Для обозначения стран используются трехбуквенные и двухбуквенные аббревиатуры, а для различных типов организаций используются следующие аббревиатуры: • com - коммерческие организации (например, microsoft.com); • edu - образовательные (например, mit.edu); • gov - правительственные организации (например, nsf.gov); • org - некоммерческие организации (например, fidonet.org); • net - организации, поддерживающие сети (например, nsf.net). Каждый домен DNS администрируется отдельной организацией, которая обычно разбивает свой домен на поддомены и передает функции администрирования этих поддоменов другим организациям. Каждый домен имеет уникальное имя, а каждый из поддоменов имеет уникальное имя внутри своего домена. Имя домена может содержать до 63 символов. Каждый хост в сети Internet однозначно определяется своим полным доменным именем ( fully qualified domain name, FQDN ), которое включает имена всех доменов по направлению от хоста к корню. Пример полного DNS-имени: citint.dol.ru.
1.2. Назначение WWW - сервера. Общая схема работы
WWW сервер - это такая часть глобальной или внутрикорпоративной сети, которая дает возможность пользователям сети получать доступ к гипертекстовым документам, расположенным на данном сервере. Для взаимодействия с WWW сервером пользователь сети должен использовать специализированное программное обеспечение - броузер (от англ. browser), другое название - программа просмотра. Схема работы Рассмотрим более подробно схему работы WWW-сервера. В общем виде она выглядит так: o Установление связи с сервером o Получение требуемого документа o Отображение полученного документа o Реагирование на действия пользователя - доступ к новому документу o После запуска броузер по команде пользователя или автоматически устанавливает связь с заданным WWW - сервером и передает ему запрос на получение заданного документа (см. рис. 1.2)
Рис. 1.2 2. WWW сервер ищет запрашиваемый документ и возвращает результаты броузеру (см. рис. 1.3) Рис. 1.3
3. Броузер, получив документ, отображает его пользователю и ожидает его реакции. Возможные варианты: o Ввод адреса нового документа o Печать, поиск, другие операции над текущим документом o Активизация (нажатие) специальных зон полученного документа, называемых связями (link) и ассоциироваными с адресом нового документа В первом и третьем случае происходит обращение за новым документом. Адрес Адрес документа указывается в виде специальной строки, называемой URL (Universal Resource Locator). Для протокола HTTP, используемого при взаимодействии WWW клиента и WWW сервера, URL состоит из следующих компонент: 1. Наименование протокола, по которому работает сервер (http). 2. Имя машины - сервера в Internet или ее IP - номер. 3. Порт TCP, обращение к которому обрабатывает сервер. 4. Место (путь) документа на машине - сервере. Здесь http означает протокол работы с WWW - сервером • ': ' - разделитель • " www. cnit. nsu. ru " - имя машины - сервера в Internet • " 80" - номер tcp - порта • / welcome. html - путь до документа на машине - сервере Среда работы сервера В настоящее время все известные WWW - серверы представляют собой компьютер общего назначения с многозадачной операционной системой. Один или несколько процессов такой системы отвечают за поддержку специфических для WWW - сервера функций. Другие процессы ОС отвечают за обеспечение других функций, не обязательно связанных с поддержкой технологии WWW (см. рис. 1.4).
Рис. 1.4
Такая структура приводит к тому, что под WWW сервером начинают подразумевать только часть программного обеспечения, единственными функциями которой являются функции WWW сервера, а остальную часть - компьютер, операционную систему, другие процессы, сетевую структуру называют средой работы WWW сервера или платформой. Ниже приведена таблица, содержащая список наиболее распространенных платформ для WWW - сервера.
Непосредственные функции сервера В простейшем случае гипертекстовый документ представляет собой совокупность файлов. Представление этих файлов как единого документа производится броузером. По каждому файлу документа броузер делает запрос к WWW - серверу. Таким образом, сервер не имеет представления о структуре и составе документов, он отвечает только за выдачу локальных файлов по запросам. На различных платформах, в различных операционных системах пути файлов выглядят по разному. Например: D: \ DOCUMENTS \ HTML \ INDEX. HTM - в Windows, / u / data / www / html / index. html - в Unix - системах, USR: WWW / HTML - в NetWare и т.д.
Путь файла, указываемый в URL, имеет стандартный вид: /< имя_каталога> /... /< имя_каталога> /< имя_файла> Таким образом, в функции WWW - сервера входит преобразование адреса из внешнего единого формата в платформенно ориентированный внутренний формат. Появляется ряд понятий, специфичных для такого преобразования, необходимых для него.
1. Исходный каталог документов Это каталог реальной файловой системы сервера, от которого идет вычисление пути, указанного в URL. Например, если исходным каталогом документов является D: \ Documents \ HTML \ то на запрос к этому серверу документа по URL http: //< имя_сервера> / index. htm будет возвращен файл D: \ Documents \ HTML \ index. htm 2. Индексный файл. Для каждого сервера определено имя так называемого индексного файла. Обычно этот файл содержит ссылки на другие файлы данного каталога. Содержимое индексного файла выдается сервером в случае, если в URL указан каталог без конкретного файла. 3. Пользовательский раздел. Для многопользовательских операционных систем (таких как Unix) ПО WWW - сервера позволяет каждому пользователю предоставлять доступ к своему собственному набору гипертекстовых документов вне основной иерархии (Исходного каталога документов, Синонимов и т.д.). Этот набор документов должен находиться в собственном (т.н. " домашнем" ) каталоге пользователя. Для доступа к таким документам в URL перед путем ставится знак тильда и имя пользователя: < имя_пользователя>. Например: На сервере Indy. cnit. nsu. ru создан пользователь с именем fancy и " домашним" каталогом / home / fancy. Собственные гипертекстовые документы он хранит в каталоге / home / fancy / public _ html. При обращении по URL http: // Indy. cnit. nsu. ru /~ fancy / start. html, WWW - сервер будет искать документ start html в каталоге / home / fancy / public html. Протокол MIME Протокол MIME (Multipurpose Internet Mail Extensions) - многоцелевое расширение электронной почты, был создан как способ передачи нетекстовой информации: изображений, звука, видео в письмах электронной почты. Механизм оказался удачным, и его перенесли и в on-line сервисы, в том числе WWW. Здесь MIME используется для передачи документов от сервера к клиенту. В общем виде MIME основывается на передаче вместе с основными данными дополнительной информации, описывающей что это и в каком виде передается. Эта дополнительная информация называется заголовок MIME. Базовой частью заголовка является строка, описывающая тип передаваемого сообщения. Формат строки: Content - Type: < тип_MIME> Перечень типов MIME (т.е. видов передаваемых данных) постоянно пополняется и может быть дополнен даже пользователем для описания своего собственного вида данных. Формат типа MIME: < Тип> /< Подтип> [; < параметры> ], где < Тип> - определяет общий тип данных: Audio - для звуковых данных; Application - данные, являющиеся входными для какого-либо приложения (программы); Image - для графических образов; Message - для сообщения, которое само по себе является MIME – документом; Multipart - для сообщения, состоящего из нескольких MIME – документов; Text - для текстовых данных в различном виде; Video - для видеоданных. < Подтип> - указывает на специфический формат данных типа < Тип>. Например: text / html - текстовые данные в формате HTML image / giff - графические данные в формате giff < Параметры> - список параметров, необходимых для интерпретации данных. Протокол HTTP Протокол HTTP (HyperText Transfer Protocol) определяет язык запросов от WWW - клиента к WWW - серверу. Сам запрос состоит из следующих компонент: < Заголовок> < Метод> < Источник / Данные>, где Заголовок - определяет версию протокола HTTP и другие служебные параметры; Метод - одно из ключевых слов: GET - для передачи запросов на выдачу документов; PUT, POST - для передачи данных от клиента к серверу (например, из форм). Пример запроса: HTTP/1.1 GET / index. html Описывает запрос на получение файла index.html из корневого каталога документов сервера.
Интерфейс CGI Помимо доступа к статическим документам сервера существует возможность получения документов как результата выполнения прикладной программы. Такая возможность реализуется на сервере WWW благодаря использованию интерфейса CGI (Common Gateway Interface). Спецификация CGI описывает формат и правила обмена данными между ПО WWW сервера и запускаемой программой. Для инициирования CGI необходимо, чтобы в запрашиваемом URL был указан путь до запускаемой программы. ПО WWW сервера исполняет эту программу, передает ей входные параметры и возвращает результаты ее работы, как результат обработки запроса, клиенту. CGI -программой может являться любая программа локальной операционной системы сервера - в двоичном виде или в виде программы для интерпретатора (Basic, SH, Perl и т.д.). С целью облегчения администрирования CGI - программ, а также для удовлетворения требованиям безопасности CGI - программы группируются в одном или нескольких явно указанных серверу каталогах. По умолчанию это каталог cgi - bin в иерархии серверных каталогов, однако, его имя и положение могут отличаться. Например: клиент, обращающийся к CGI - программе test-query, будет использовать URL http: //< имя_сервера> / cgi - bin / test - query Интерфейс CGI позволяет расширить границы применения WWW - технологии. CGI -программа может обрабатывать сигналы с датчиков установок, взаимодействовать с мощным сервером баз данных, переводить и т.п.
2. HTML - язык гипертекстовой разметки HTML-файл имеет расширение htm или html. Браузер определяет тип файла именно по его расширению. HTML-файл должен подчиняться определенным правилам, описанным в стандарте HTML. Рассмотрим в качестве примера произвольный HTML-файл. Всякий HTML-файл состоит из элементов. Элемент начинается с ярлыка. Что такое ярлык HTML? Ярлык - это слово, помещенное в угловые скобки. Ярлыки бывают открывающими и закрывающими. Закрывающий ярлык отличается от открывающего тем, что он начинается с символа косая черта / сразу после угловой скобки. Ярлык - смысловой аналог английского слова tag. Не каждый элемент HTML с необходимостью должен включать в себя все указанные компоненты, но открывающий ярлык должен присутствовать всегда. Открывающий ярлык может иметь атрибуты. Эти атрибуты описывают свойства элемента, к которому относится открывающий ярлык. Различные элементы HTML могут иметь разную структуру. Это могут быть и текст, и ссылки на рисунки, и программы, и вставляемые элементы. Подробное описание HTML-элементов можно найти в документации. Сейчас для нас важно, что всякий HTML-файл должен содержать в себе элемент < html>...< /html>. Этот элемент включает в себя всю информацию, содержащуюся в HTML-файле. HTML-страничка может быть создана при помощи простейшего текстового редактора. Откроем Блокнот (Notepad) и напишем: < HTML> Это простая HTML-страница < /HTML> Запомним файл под именем first.htm и загрузим файл в браузер. Как правило, в HTML-страницах помимо ярлыка < html> используется несколько других обязательных ярлыков. Среди них ярлык < head> (и обязательный < /head> ) для написания заголовка HTML-странички. Здесь можно указать название странички. Название должно быть помещено между ярлыками < titie> и < /titie>. В стандартных браузерах заголовок будет показан в верхней части главной рамки основного окна. < HTML> < head> < title> На этой станице в HTML-файле содержатся все ярлыки < /title> < /head> < body> Все основные ярлыки присутствуют здесь < /body> < /HTML> В файле firstl.htm мы использовали заголовок, расположив его в верхней части файла между ярлыками < head> и < /head>. В заголовке может быть указано название страницы с помощью ярлыков < title> и < /title>. В блоке заголовка часто используется мета-комментарий < meta>... < /meta>. После заголовка мы использовали другую пару ярлыков: < body> и < /body>, между которыми располагается основной текст документа. Структура HTML документа
Главным компонентом содержимого HTML-страниц является текст. Для форматирования текста в HTML используются специальные ярлыки. Наличие пробелов, табуляций, переводов строки и других специальных символов в тексте документа не влияет на вид представления текста в окне браузера. Для отделения одного параграфа от другого используется ярлык < р>. В начале каждого параграфа мы будем ставить ярлык < р>. Закрывающий ярлык < /р> необязателен. Для оформления иерархии заголовков в HTML используются ярлыки < h1>, < h2>, < h3> и т. д. Парные закрывающие ярлыки необходимо помещать сразу после окончания текста соответствующего заголовка. < HTML>
< head> < title> Простой форматированный текст < /title> < /head> < body> < p> < h1> Глава 1. Форматирование текста < /h1> < p> < h2> Что такое HTML? < /h2> < /HTML> Свойства элементов В ярлыках можно указать значения свойств соответствующих элементов. Давайте выровняем заголовки нашего текста по центру, а фрагмент основного текста выделим в отдельный абзац и выровним по правому краю. Для этого используется свойство align в ярлыках < h1> и < h2>, а также в ярлыке < p> в обычном тексте основного содержания параграфа. Измененный файл text2.htm выглядит так, как показано в примере ниже. Существует множество различных свойств у многих ярлыков. Так, для ярлыка < body> мы можем задать цвет фона - свойство bgcolor. Цвет фона можно указать либо в виде стандартного слова, обозначающего цвет, например, white или yellow, либо в виде шестнадцатеричной величины RRGGBB, где параметры RR показывают интенсивность красного цвета, GG - ин-тенсивность зеленого, ВВ - интенсивность синего цвета в аддитивной модели цветовосприятия. Белому цвету соответствует значение #FFFFFF = " White".
В качестве примера изменим вид нашей странички на " негатив". Для этого необязательно задавать цвет для каждого ярлыка по отдельности. Здесь можно использовать общий для всего фрагмента текста ярлык < font>, с помощью которого задаются параметры используемого шрифта, в том числе его цвет. Файл text3.htm выглядит следующим образом. < HTML> < head> < title> Цвет и текст < /title> < /head> < body bgcolor=" #000000" > < font color=" #FFFFFF" > < p> < h1 align=" center" > Глава 1. Название главы < /h1> < p> < h2 align=" center" > Заголовок второго уровня < /h2> < p align=" right" > Текст < /font> < /body> < /HTML> Шрифт Чтобы задать свойства шрифта, полезно использовать ярлык < font>. Внутри угловых скобок ярлыка можно использовать различные свойства шрифта: его цвет, размер, внешний вид. Обязательно использовать закрывающийся ярлык < /font>. Изменим файл text2.htm так, чтобы каждый параграф выглядел по свему, имел свой собственный цвет. В конце файла продемонстрируем, как можно изменять размер шрифта.
< head> < title> Шрифты < /title> < /head> < body bgcolor=" white" > < p> < font color=" blue" > < h1 align=" center" > Глава 1. Название главы < /h1> < /font> < p> < font color=" green" > < h2 align=" center" > Заголовок второго уровня < /h2> < /font> < font color=" maroon" > < p align=" right" > Текст < /font> < p> Демонстрируем изменение размеров шрифта. < p align=" center" > Обычный шрифт (его величину можно указать в basefont). < p align=" center" > < font size=+1> Указан размер size=+1. < /font> < p align=" center" > < font size=+2> Указан размер size=+2. < /font> < /body> < /HTML> Средства HTML- форматирования Сейчас мы рассмотрим более сложные средства, используемые для форматирования текстовой информации. И начнем мы с рассмотрения таблиц. Таблицы используются для организации пространства просматриваемой страницы в окне браузера. В таблицах можно размещать не только текстовую информацию. Поскольку HTML-файл не имеет возможности непосредственно определять фиксированный внешний выводимой в окне браузера HTML-страницы, то полезно было бы иметь хотя бы некоторые примерные ограничения на относительное местоположение элементов HTML-страницы. В этом нам помогают таблицы. Простая таблица Начнем с примера. Оформим таблицу соответствия шрифтов и соответствующих им ярлыков.
< HTML> < head> < title> Таблица< /titlе> < /head> < body> < p> Таблица. < i> Простейшая < tr> < td Яpлык < /td> < td width=" 70%" > Соответствующий ярлыку Шрифт < /td> < /tr> < tr> < td width=" 30%" > & lt; TT& gt; < /td> < td шpифт< /td> < /tr> < tr> < td width=" 30%" > & lt; I& gt; < /td> < td < /tr> < tr> < td width=" 30%" > & lt; b& gt; < /td> < td шpифт< /b> < /td> < /tr> < tr> < td width=" 30%" > & lt; big& gt; < /td> < td шрифт< /big> < /td> < /tr> < tr> < td width=" 30%" > & lt; small& gt; < /td> < td шрифт< /small> < /td> < /tr> < tr> < td или & lt; s& gt; < /td> < td шрифт< /s> < td> < /tr> < tr> < td width=" 30%" > & lt; u& gt; < /td> < td шрифт< /u> < /td> < /tr> < /table> < /body> < /HTML> Что нового мы видим в тексте этого файла? Появился ярлык < table>. Его присутствие говорит о том, что между этим открывающим ярлыком и соответствующим ему закрывающим ярлыком < /table> располагается таблица. Таблица состоит из строк и столбцов. Каждая строка начинается ярлыком < tr> и заканчивается ярлыком < /tr>. Каждый столбец описывается внутри строки с помощью открывающего ярлыка < td> и закрывающего ярлыка < /td>. Вот и все основные компоненты таблицы. В ярлыках < table>, < tr>, < td> можно указать свойства. В нашем случае мы задали параметр ширины таблицы в виде Это означает, что таблица займет всю ширину окна браузера. В параметрах столбцов мы также указываем ширину столбца в процентах от общей ширины таблицы. Если изменить значения ширины столбцов, внешний вид таблицы изменится.
Вложенные таблицы
Таблицы могут быть вложенными друг в друга. В качестве примера рассмотрим код файла table3.htm. Здесь мы в ячейку первой строки второго столбца первой объемлющей таблицы вставили другую таблицу. Для того чтобы одна таблица четче выделялась на фоне другой, мы задали разные значения параметров цвета фона для этих таблиц. Как выглядят вложенные таблицы, показано на рисунке. < HTML> < HEAD> < TITLE> Заголовок страницы < /title> < /head> < BODY BGCOLOR=" #FFA4FF" > < H1 Align=" Center" > Изучаем таблицы < /h1> < table border=" 1" bgcolor=" #E8E8E8" > < Tr> < Td ALIGN=" center" Первая таблица. Первая строка, первый столбец.< /Td> < Td width=" 70%" > < Table Border=" 3" BORDERCOLOR=" #000000" Align=" center" Bgcolor=" #FFFF00" > < Tr> < Td BORDERCOLOR=" #FFFF00" > Вторая таблица. Первая строка. Первый столбец.< /Td> < Td Вторая таблица. Первая строка. Второй столбец.< /Td> < /Tr> < Tr> < Td Вторая таблица. Вторая строка. Первый столбец.< /Td> < Td Вторая таблица. Вторая строка. Второй столбец.< /Td> < /Tr> < /Таblе> < /Td> < /Tr> < Tr> < Td ALIGN=" center" > Первая таблица. Вторая строка. Первый столбец.< /Td> < Td ALIGN=" center" > Первая таблица. Вторая строка. Второй столбец.< /Td> < /Tr> < /Таblе> < /body> < /html>
Вложенные таблицы позволяют со значительной степенью гибкости располагать элементы на страничке. Если установить параметр толщины рамки таблицы border, равным нулю, то рамки станут не видимы и пользователь не будет подозревать о том, что страница скомпонована при помощи таблиц. Свойства элемента < table>
Объединение ячеек в таблице Если вам приходилось работать с текстовым процессором Word, то вы знаете, что в таблице несколько соседних ячеек можно объединить. HTML позволят производить такое объединение ячеек. Для объединения ячеек используются параметры rowspan и coispan. Им присваивается целое число, равное количеству объединенных ячеек. Эти параметры задаются в ярлыке < td>.
Ссылки. Рисунки. Карты Ссылки Наличие гиперссылок - одно из важных свойств HTML. Собственно механизм ссылок и делает язык HTML тем средством, которое необходимо для удобной работы в сети Интернет. Механизм ссылок может быть различным. Рассмотрим на примерах то, как работают простейшие ссылки. Текстовая ссылка С помощью HTML мы имеем возможность организовать ссылку из любой части документа. Для ссылки используется ярлык, называемый якорем, anchor. В HTML, вероятно по той причине, что ссылка - это один из наиболее важных элементов Web-страниц, используется максимально сокращенный вариант слова anchor, от этого слова осталась лишь начальная буква. Для создания ссылки используется открывающий ярлык < а> и закрывающий ярлык < /а>.
Между ярлыками < а> и < /а> расположен фрагмент HTML-странички, с которым связана ссылка. Это может быть текст, это может быть таблица, это может быть рисунок. Для начала мы создадим простую текстовую ссылку. Откроем какой-либо текстовый редактор и введем текст: < HTML> < head> < title> Гиперссылки < /title> < /head> < body bgcolor= " #FFFFFF" > < p> < h1 align=" center" > Глава 1. < /h1> < p> < h2 align=" center" > Изучаем ссылки. < /h2> < p> Ссылки можно использовать в любом месте в теле HTML кода. В этом параграфе мы вставим ссылку: < a href=" #fed" > Это первая ссылка.< /a> < p align= " right" > < br> Пpи помощи HTML мы не сможем написать полноценное приложение, которое бы работало в системе MS-DOS, Windows или какой-либо другой ОС. HTML предназначен для создания документов, размещаемых на Web-сервере, доступ к которому осуществляется по сети Интернет. < /body> < /HTML>
Ссылки создаются для того, чтобы при щелчке на ней можно было просмотреть документ, на который она указывает. Однако если в предыдущем примере мы щелкнем на ссылке, то ничего не произойдет. Дело в том, что в свойстве href для нашей ссылки указан несуществующий адрес. В свойстве href указывается адрес документа, на который указывает ссылка. Href - это hyper reference, гиперссылка. В прошлом примере мы указали в качестве адреса параметр #fed. Если параметр адреса начинается со знака #, это значит, что данная ссылка является ссылкой на фрагмент текущей HTML-страницы. На нашей странице нет фрагмента, который бы носил имя fed, и поэтому никаких действий после нажатия на ссылку не происходит.
Создадим фрагмент с именем fed специально для того, чтобы проверить работу ссылки. Для этого перед фрагментом поставим пару ярлыков < а name= " #fed" > < /a>. Измененный файл ref2.htm будет выглядеть так: < HTML> < head> < title> Гиперссылки < /title> < /head> < body bgcolor= " #FFFFFF" > < p> < h1 align=" center" > Глава 1. < /h1> < p> < h2 align=" center" > Изучаем ссылки. < /h2> < p> Ссылки можно использовать в любом месте в теле HTML кода. В этом параграфе мы вставим ссылку: < a href=" #fed" > Это первая ссылка.< /a> < p align= " right" > < br> Пpи помощи HTML мы не сможем написать полноценное приложение, которое бы работало в системе MS-DOS, Windows или какой-либо другой ОС. HTML предназначен для создания документов, размещаемых на Web-сервере, доступ к которому осуществляется по сети Интернет. < a name= " #fed" > < /a>. На этот фрагмент текста указывает ссылка. < /body> < /HTML> В приведенном выше примере мы использовали ярлык < br>. Это непарный ярлык, для него не требуется указания закрывающего ярлыка. Этот ярлык указывает на необходимость перехода к новой строке в месте расположения ярлыка. Далее в этой главе мы рассмотрим и другие ярлыки, с помощью которых происходит управление и форматирование текста. Чтобы организовать ссылку на какой-либо документ, расположенный в сети Интернет, достаточно указать полный адрес этого документа в параметре href ссылки. Так, ссылка < а href= " http: //www.yahoo.com" > Это поисковая система Yahoo< /a> указывает на главную страницу поисковой системы Yahoo. Ссылки и рисунки Вначале научимся вставлять рисунок в HTML-файл. Внедрить файл с изображением в HTML-страницу несложно. Для этого используется ярлык < img >. Изображение - по-английски image (образ), сокращенный вариант этого слова используется в качестве HTML-ярлыка. В случае, если пользователь имеет очень медленную связь с Интернетом, он может отключить автоматическую загрузку изображений в браузер. Тогда вместо картинки мы можем показать пользователю текст. Для этого нужно в ярлык < img > вставить свойство alt, которому присваиваем текстовую строку. Именно эта строка будет показана в окне браузера вместо рисунка, если рисунок по тем или иным причинам не был загружен: < img src=" picl.jpg" alt=" Teкст, выводимый вместо изображения" > Окно браузера будет выглядеть примерно так, как показано на рис. 2.14. Фон страницы Рисунки можно использовать не только в качестве элементов, объектов страницы, документа, но и в виде фона, на котором будет расположена страница. Файл рисунка с фоном указывается в ярлыке < body>: < body bgcolor=" white" background=" back.gif" > Если одной копии рисунка не хватает, чтобы покрыть весь фон документа, т.е. если размер окна браузера больше размера рисунка, то рисунок фона воспроизводится столько раз, сколько необходимо для того, чтобы покрыть все окно браузера. Свойства рисунков В ярлыке < img > можно задать значения свойств (атрибутов), указанных в следующей таблице.
Свойство align позволяет определить местоположение картинки в окне браузера. Данное свойство может принимать следующие значения: • bottom • middle • top • left • right Параметр middle соответствует выравниванию центра рисунка по середине вертикали от текущей базовой линии. Значению top соответствует выравнивание по верхней границе рисунка с учетом верхней границы текущего текста. Параметры left и right описывают плавающие рисунки. Расположение текста и вставляемого рисунка в потоке HTML-кода не имеют значения. Рисунки являются плавающими элементами страницы, их взаимное расположение и расположение по отношению к тексту определяются параметрами left и right. Обычно текст " обтекает" изображения. Для создания отступов можно использовать рамки. Ширина рамки задается с помощью параметра border: < img src=" picl.jpg" align=" left" border=" 5" > < img src=" picl.jpg" align=" right" border=" 25" > Отделить картинки от текста можно с указанием параметров горизонтального и вертикального отступов: < img src=" picl.jpg" align=" left" vspace=" 15" hspace=" 5" > < img src=" picl.jpg" align=" right" vspace=" 5" hspace=" 15" > HTML позволяет менять размер картинок.
< HTML> < head> < title> Задаем размеры рисунка - файл sizel.htm < /title> < /head> < body bgcolor=" white" > < h1> Задаем размеры для рисунков.< /h1> align=" left" vspace=" 15" hspace=" 15" width=" 450" > < img src=" picl.jpg" align=" left" vspace=" 15" hspace=" 15" > < img src=" picl.jpg" align=" left" vspace=" 15" hspace=" 15" width=" 150" > < p align=" justify" > Paзмep первого рисунка в полтора раза больше размера исходного рисунка. Размер второго рисунка совпадает с размером исходного рисунка. Размер третьего рисунка в два раза меньше размера исходного рисунка. Речь идет о линейных размерах. < /body> < /HTML> Изображения-карты Создадим простой HTML-файл map.html: < maр namе= " mapname" > < area [shape=" shape" ] coords='x, y,...' [href=URL|nohref]> < /map> Свойства: shape - форма определяемой области; coords - местоположение области и ее размер; href - URL, на который ссылается область; nohref - область является " мертвой зоной". Форма shape может быть задана одним из четырех способов: default - вся область, которая не определена с помощью других значений, приведенных ниже; rect - прямоугольная область; circle - круг; poly - многоугольная область. Прямоугольная область определяется четырьмя координатами: левая; верхняя; правая; нижняя. Для круга координат три:
горизонтальная координата центра; вертикальная координата центра; радиус. Для многоугольника координаты перечисляются в последовательности х1, y1, х2, у2, х3, у3.... < HTML> < head> < title> Kapтa ccылок < /title> < /head> < body> < img src=" pic.jpg" usemap= " #mapname" > < map name=" mapname" > < area shape=rect coords=" 0, 0, 275, 220" href=" ref1.html" > < area shape=rect coords=" 275, 0, 450, 220" href=" ref2.html" > < area shape=rect coords=" 0, 220, 275, 340" href=" ref3.html" > < area shape=rect coords=" 275, 220, 450, 340" href=" ref4.html" > < /map> < /body> < /HTML> Загрузив файл map.html в браузер, мы получим картинку. 2.5. Каскадные таблицы стилей ( Cascad Style Sheets )
Каскадные таблицы стилей были предложены w3c (WWW Consorcium) в рамках разработки спецификации HTML 3.0. Однако, реализованы в реально действующих навигаторах они были только в 1997 году. Идея положенная в основу таблиц достаточно проста. HTML-документ - это множество вложенных в друг друга контейнеров, каждый из которых имеет свои свойства по представлению информации. Многие контейнеры можно сгруппировать в классы однотипных контейнеров, например, заголовки или параграфы. Свойства контейнера, перечисляются в качестве атрибутов тага начала контейнера. При этом у большинства контейнеров, начиная с версии HTML 3.0 набор этих атрибутов типизирован. Контейнер STYLE (< style type="..." >..... < /style> ) служит для определения таблицы описания стилей. < style type=" text/css" > < html> < head> style type=" text/css" > <! -- p {color: blue; font-family: times; font-size: 10pt; } h1 {color: black; font-size: 12pt; font-style: Arial; text-align: center; } --> < /style> < /head> < body> < h1> Test Style Sheets in Communicator< /h1> < p> This is a first part of the document < /body> < /html> Контейнер LINK в контексте описателей стилей применяется для определения внешнего файла с описаниями стилей для данного документа. Например, внешний файл может содержать следующее описание стилей: /* contents of the external style sheets file css.htm*/ p {color: blue; font-family: times; font-size: 10pt; } h1 {color: black; font-size: 12pt; font-style: Arial; text-align: center; } /* the end of style sheets definition */ Для применения этого описателя стилей в заголовок документа необходимо включить следующий таг: < html> < head> < link REL=STYLESHEET TYPE=" text/css" HREF=http: //localhost/css.htm> < /head> < body> The body of the document should be here. < /body> < /html> Контейнер SPAN применяется для переопределения стиля отображения текущего фрагмента текста и в некотором смысле аналогичен контейнеру FONT. < HTML> < HEAD> < /HEAD> < BODY bgcolor=lightyellow> < center> < p> < span class=" color: red; font-size: 24pt; " > C< /span> обществу глобальных компьютерных сетей Internet в 2000 году исполнилось 30 лет. < /BODY> < /HTML> В данном примере, контейнер SPAN применен сразу после тага начала параграфа < p>, что позволяет выделить первую букву в отображаемом абзаце: Свойства контейнеров, управляемые описателями стилей Первую группу свойств составляют свойства шрифтов: font-size, font-family, font-weight, font-style. Вторую группу свойств составляют свойства текста: line-height, text-decoration, text-transform, text-align, text-indent. Третью группу свойств составляют свойства блоков текста: margin-left, margin-right, margin-top, margin-bottom, margin, padding-top, padding-right, padding-bottom, padding-left, paddings, border-top-width, border-bottom-width, border-left-width, border-right-width, border-width, border-style, border-color. Четвертую группу составляют описатели цвета фона и цвета текста: color, background-image, background-color. 2.6. Фреймы
Фреймы - это английское слово, в переводе означающее рамки. HTML-страница, в которой используются фреймы, выглядит разделенной на несколько частей, которые окаймлены границами, как рамками. Создание и использование фреймов Часто возникает вопрос о том, как могут быть связаны друг с другом, казалось бы, совершенно разные вещи, такие как фреймы и язык JavaScript. He будем спешить и остановимся вначале на рассказе о том, что представляют собой фреймы и для чего они используются. После этого рассмотрим вопрос о том, как могут быть взаимосвязаны фреймы и язык JavaScript. Окно браузера может быть разделено на несколько фреймов. Каждый фрейм показывает свой документ, как правило, это обычный HTML-документ. Для того чтобы создать фреймы, мы пользуемся двумя ярлыками, а именно ярлыком < frameset> и ярлыком < frame>. Страница, разбитая на два фрейма, может быть описана при помощи HTML следующим образом: < HTML> < frameset rows=" 50%, 50%" > < frame src=" pagel.htm" name=" framel" > < frame src=" page2.htra" name=" frame2" > < /frameset> < /HTML> Этот код порождает два фрейма. В ярлыке < frameset> указано свойство rows (rows - это ряды). Это свойство указывает на то, что два фрейма расположены рядами, друг над другом. Верхний фрейм загружается страницей pagel.htm, а нижний фрейм - страницей page2.htm. Если вы захотите расположить фреймы столбцами, то вместо свойства rows в ярлыке < frameset> укажите cols. Процентные величины " 50%, 50%" указывают относительные размеры окон фреймов. Если вы не хотите утруждать себя вычислениями того, каким должен быть размер второго окна, чтобы в целом получилось 100%, то можно указать размер окна в пикселах, при этом символ % опускается. Каждый фрейм имеет свое уникальное имя, которое задается при помощи свойства name в ярлыке < frame>. При помощи этого имени фрейм легко доступен при описании на JavaScript. Можно использовать несколько последовательных описаний фреймов при помощи ярлыков < frameset>, при этом фреймы могут быть расположены друг в друге. Вот пример такого расположения фреймов: < frameset cols=" 50%, 50%" > < frameset rows=" 50%, 50%" > < frame src=" cell.htm" > < frame src=" cell.htm" > < /frameset> < frameset rows=" 33%, 33%, 33%" > < frame src=" cell.htm" > < frame src=" cell.htm" > < frame src=" cell.htm" > < /frameset> < /frameset> С фреймами можно осуществлять довольно замысловатые операции, если использовать язык сценариев. Динамическому HTML посвящена следующая лекция.
2.7. Формы Создадим простейший файл с формой forml.html.
< HTML> < head> < title> Пpocтeйшaя фopмa< /title> < /head> < body> < form name= " first" > Поле для ввода текста: < br> < input type=text name = " textl" > < input type=" button" name=" buttonl" value=" Нажми меня" > < p> < /form> < /body> < /HTML> Загрузим файл в браузер, получится картинка, показанная на рисунке. В коде HTML мы использовали ярлык < form>, он открывает форму. Форма - это контейнер, содержащий элементы, образующие тело формы. Требуется закрывающий ярлык. В своем примере мы указали имя для формы - это значение параметра name. Элементы, составляющие тело формы Важными компонентами формы являются поля для ввода текста и кнопки. В нашем случае поле для ввода текста описано при помощи ярлыка < input type=text name = " textl" >. Здесь используется элемент < input>. Большинство элементов тела формы - это элементы < input>. Элементы < input> бывают разнообразными, все зависит от значения свойства type. В случае, когда type=text, элементом будет текстовое поле для ввода текста (однострочного).. Атрибуты свойства type Атрибут type может принимать следующие значения: • button; • checkbox; • file; • hidden; • image; • password; • radio; • reset; • submit; • text. С двумя из них мы уже знакомы, рассмотрим остальные. Тип Checkbox Описывает поле для галочки. Величина поля может быть задана путем указания значений параметров height и width. Если значение оказывается более 20 пикселов, то отступ внутри поля для галочки устанавливается равным 4 пикселам, а внутренняя ширина и высота равняется 8 пикселам. Если значение меньше 20 пикселов, но больше 13 пикселов, то отступ внутри поля для галочки равен половине разности от указанной ширины (или высоты) минус 13. При размерах менее 13 пикселов отступ равен 0. Тип File Используется для отправки файла серверу. При этом необходимо указать приложение, которое будет обрабатывать форму, указав его в атрибуте action ярлыка < form>. Рассмотрим это на
примере файла form2.html. < HTML> < head> < title> Файл< /title> < /head> < body> < form name= " form" action=" scripts/form.php" enctype=" multipart/form-data" method=" post" > Отправить файл серверу: < br> < input type=file name = " file1" > < р> После того, как файл выбран, нажмите кнопку. < input type= " button" name = " buttonl" value = " Отправить файл" > < p> < /form> < /body> < /HTML> Кроме атрибута action, при посылке файла серверу необходимо указать значение атрибута enctype в виде multipart/form-data. Методом отправки может быть либо get, либо post. При отправке форм сервер получает информацию в виде пар, каждая из которых представляет собой имя и соответствующее этому имени значение. Эти пары обрабатываются сервером.
Тип Password Можно в качестве поля текстового ввода данных использовать поле для ввода пароля. Тогда текст, вводимый в это поле, не будет виден в окне браузера, вместо него выводятся звездочки.
Тип Radio Тип < input type=radio> создает переключатели, которые используются для ограничения пользовательского выбора. Пользователь может выбрать лишь один вариант из нескольких. Для этого несколько переключателей объединяют в группу, все переключатели одной группы имеют одинаковое имя name. При посылке формы значение выбранного переключателя отсылается, как значение имени. Для отметки того или иного переключателя, который будет использоваться по умолчанию, служит свойство checked. < HTML> < head> < title> Файл< /title> < /head> < body> < form name= " form" action=" scripts/form.php" enctype= " multipart/form-data" method=" post" > Отправить файл серверу: < br> < input type=file name = " file1" > < p> После того, как файл выбран, нажмите кнопку.0 < input type= " button" name = " buttonl" value = " Отправить файл" > < hr> < p> Укажите Ваш возраст < p> < input type=radio name=" radio" > менее 10 лет < p> < input type=" radio" name=" radio" checked> менее 11-30 лет < p> < input type=" radio" name=" radio" > более 30 лет < p> < /form> < /body> < /HTML> JavaScript 3.1. Основы программирования на Java Script. Управление потоком вычислений. Массивы. Функции. События.
JavaScript - новый язык для составления скриптов, разработанный фирмой Netscape. Код скрипта JavaScript размещется непосредственно на HTML-странице. Чтобы увидеть, как это делается, давайте рассмотрим следующий простой пример: < html> < body> < br> Это обычный HTML документ. < br> < script language=" JavaScript" > document.write(" А это JavaScript! " ) < /script> < br> Вновь документ HTML. < /body> < /html> Все, что стоит между тэгами < script> и < /script>, интерпретируется как код на языке JavaScript. Здесь Вы также видите пример использования инструкции document. write () - одной из наиболее важных команд, используемых при программировании на языке JavaScript. Команда document. write () используется, когда необходимо что-либо написать в текущем документе (в данном случае таком является наш HTML-документ). Так наша небольшая программа на JavaScript в HTML-документе пишет фразу " А это JavaScript! ". Вообще, все типы операторов, которые поддерживаются обычными языками программирования, реализованы JavaScript (+, -, *, /, %, », «, +=, -=, ...). При этом оператор сложения " +" при работе со строками означает конкатенацию последних, т.е. добавление в конец строки новую строку: s = " string1" +" string2" Кроме операций с числами и описаний стандартных классов в JavaScript есть команды управления потоком вычислений: • for - цикл; • for(i=0; i< 9; i++) { • ... } • for - цикл свойств объекта (переменных определенных в классе); • for(i in obj) • { • str = obj[i] • } • if..else - условный оператор; • if(i> 0) { • ... • } • else • { • ... } • while - условный цикл; • while(j==k) j++; • k--; • } • break - принудительный выход из цикла; • while(i< 6) { • if(i==3) break; • continue - переход в конец цикла; • while(i & lt 6) • { • if(i==3) continue; • var - оператор объявления переменной. var kuku = " kuku" Тип переменной определяется по присвоенному ей значению. События и обработчики событий являются очень важной частью для программирования на языке JavaScript. События, главным образом, инициируются теми или иными действиями пользователя: • onLoad - выполнение скрипта или функции при загрузке; • onChange - порождается при изменении значения элемента формы; • опС li с k - порождается при выборе объекта (button, checkbox и т.п.); • onSelect - порождается при выборе текстового объекта (text, textarea); • onSubmit - при нажатии на кнопку Submit; • onUnload - при переходе к другой странице. Мы можем заставить нашу JavaScript-программу реагировать на некоторые из них. И это может быть выполнено с помощью специальных программ обработки событий. < form> < input type=" button" value=" Click me" onClick=" alert('Yo')" > < /form> Функция alert () позволяет Вам создавать выпадающие окна. При ее вызове Вы должны в скобках задать некую строку. В данном примере мы использовали и двойные, и одинарные кавычки. Если бы мы написали onClick=" alert (" Yo" ) ", то компьютер не смог бы разобраться в нашем скрипте. Вы можете использовать в скрипте множество различных типов функций обработки событий. Первый тип новых объектов, которые мы рассмотрим, являются массивы. Тип " Array" введен в JavaScript 1.1 для возможности манипулирования самыми разными объектами new_array = new Array() new_array5 = new Array(5) colors = new Array (" red", " white", " blue" ) Размерность массива может динамически изменяться. Можно сначала определить массив, а потом присвоить одному из его элементов значение. Как только это значение будет присвоено, изменится и размерность массива: colors = new Array() colors[5] = " red" В данном случае массив будет состоять из 6 элементов, т.к. первым элементом массива считается элемент с индексом 0. Для массивов определены три метода: join, reverse, sort. Join объединяет элементы массива в строку символов, в качестве аргумента в этом методе задается разделитель: colors = new Array(" red", " white", " blue" ) string = acolors.join (" + " ) В результате выполнения присваивания значения строке символов string мы получим следующую строку: string = " red + white + blue" Другой метод, reverse, изменяет порядок элементов массива на обратный, а метод sort отсортировывает их в порядке возрастания. У массивов есть два свойства: length и prototype. Length определяет число элементов массива. Если нужно выполнить некоторую рутинную операцию над всеми элементами массива, то можно воспользоваться циклом типа: color = new Array(" red", " white", " blue" ); n = 0; while(n! = colors.length) {.... операторы тела цикла...} Свойство prototype позволяет добавить свойства к объектам массива. Однако наиболее часто, в программе на JavaScript используются встроенные массивы, главным образом графические образы (Images) и гипертекстовые ссылки (Links).
В большинстве наших программ на языке JavaScript мы будем пользоваться функциями. < html> < script language=" JavaScript" > <! -- hide function myFunction() { document.write(" Это JavaScript! < br> " ); } myFunction (); myFunction (); myFunction (); // --> < /script> < /html> Все команды скрипта, что находятся внутри фигурных скобок - {} - принадлежат функции myFunction (). Это означает, что обе команды document.write() теперь связаны воедино и могут быть выполнены при вызове указанной функции. Почему собственно функции столь важны в JavaScript? Функции обычно используются совместно с процедурами обработки событий. Рассмотрим следующий пример: < html> < head> < script language=" JavaScript" > function calculation () { var x= 12; var y= 5; var result= x + y; alert(result); } < /script> < /head> < body> < form> < input type=" button" value=" Calculate" onClick=" calculation()" > < /form> < /body> < /html> Здесь при нажатии на кнопку осуществляется вызов функции calculation (). Иными словами, мы получаем выпадающее окно, в котором написано число 17. |
Последнее изменение этой страницы: 2019-04-09; Просмотров: 234; Нарушение авторского права страницы
Адрес ссылки
