Интернет-технологии

,
Вичугов Владимир Николаевич
доцент каф. АиКС, ИК, ТПУ

Томск - 2014

1
 Компьютерные сети.
История развития сети
Интернет.

2
 Компьютерные сети

Компьютерная сеть – группа компьютеров

или устройств, соединенных между собой
для обмена информацией и/или
ресурсами.

3
 История сети Интернет
1958 г. - задание мин.обороны США на создание
надёжной сети.

Сети с коммутацией каналов: блокирование канала,

передача всего объёма информации

4
 Сети с коммутацией пакетов (1961 г.)

Данные разбиваются на части (пакеты), к которым

добавляется заголовок.
5
Дек. 1969 г. – экспериментальная сеть из 4-х узлов
(ARPANET – Advanced Research Project Agency
NETwork) по протоколу NCP.

ARPANET Interface
Message Processors
6
1970 г. – протокол NCP (Network Control Protocol)
8 бит для адреса

ARPANET в сентябре 1978 г.

7
1974-78 г. – протокол TCP/IP

1980 г. – основные принципы объединения сетей:

-сети взаимодействуют по протоколу TCP/IP;
-объединение сетей – через шлюзы (gateway);
-единые методы адресации.

1 янв. 1983 г. – переход с протокола NCP на TCP/IP

1984 г. – более 1000 компьютеров в сети, введение

DNS (Domain Name System – система
наименования доменов)

8
Начало 1990-х гг. – бесклассовая адресация

1996 г. – протокол IPv6

9
 Схема сети Интернет
Компьютерная Компьютерная Компьютерная
...
сеть сеть сеть

Шлюз Шлюз Шлюз

Объединенная сеть

10
Топология компьютерной сети – способ
соединения компьютеров между собою.
Шинная топология:
Terminator Terminator
Шина

...

Кольцевая: Звездообразная:
... ...

Концентратор
(Hub)
Коммутатор
(Switch)

... 11
...
Архитектура сети:

1) одноранговая (peer-to-peer, p2p)

2) клиент/сервер (client/server)

3) гибридная

12
 Адресация в сети Интернет
IP адрес (IPv4): цифровой адрес, содержит 32 бита,
состоит из двух частей: адреса сети и адреса хоста

Примеры:
[Link]
[Link]

[Link] = 01010101 00010001 01111100 00000101

13
14
 IPv6
IPv6 адрес состоит из 128 бит.
Пример:
3ffe:14ab:0000:0000:0000:003a:8a21:7f11

Сокращение записи IPv6-адреса:

1) Начальные нули могут отсутствовать

3ffe:14ab:0:0:0:3a:8a21:7f11

2) Одна или несколько групп, содержащих нули, могут

быть заменены на два двоеточия

3ffe:14ab::3a:8a21:7f11

15
 Строение IPv4 пакета

Заголовок Данные

отличия в IPv6

Заголовок:
Адрес назначения
Адрес источника
Время жизни пакета
(TTL – Time To Live, целое число) Hop-Count Limit
Размер заголовка
Размер пакета (до 64 КиБ) до 4 ГиБ
Протокол, данные которого содержатся в пакете
Контрольная сумма заголовка нет 16
 IPv4
[Link]

0 1 0 0 1 0 0 1 0 0 1 0 1 1 1 0 1 0 0 0 1 1 1 1 1 1 1 0 0 0 1 0
Network part
Для Для
Host part
идентификации идентификации
сети хостов в сети

Два специальных IPv4-адреса:

1) Минимальный – адрес сети
[Link]
2) Максимальный – широковещательный (broadcast)
[Link]

Количество адресов для хостов = общее количество

адресов в сети - 2
17
 Классы IPv4 сетей
Класс А

0 * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *

Первый байт - от 1 до 126

Класс B

1 0 * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
Первый байт - от 128 до 191

Класс C
1 1 0 * * * * * * * * * * * * * * * * * * * * * * * * * * * * *

Первый байт - от 192 до 223

18
 Классы IPv4 сетей
Класс D
1 1 1 0 * * * * * * * * * * * * * * * * * * * * * * * * * * * *

Адрес группы multicast

Класс E
1 1 1 1 0 * * * * * * * * * * * * * * * * * * * * * * * * * * *

19
 Основные классы IP сетей
Класс А:
Пример: [Link] (первый байт - адрес сети, остальные -
адреса в этой сети)
Первый байт принимает значения от 1 до 126
Количество адресов в одной сети - 2563
Класс B:
Пример: [Link] (первые 2 байта - адрес сети,
остальные - адреса в этой сети)
Первый байт принимает значения от 128 до 191
Количество адресов в одной сети - 2562
Класс C:
Пример: [Link] (первые 3 байта - адрес сети,
остальные - адреса в этой сети)
Первый байт принимает значения от 192 до 223
Количество адресов в одной сети - 256
20
Пример: сеть класса C 212.192.20
- наименьший адрес - [Link] - адрес сети
- наибольший адрес - [Link] -
широковещательный адрес (broadcast)
- адреса для хостов - от [Link] до
[Link]

количество адресов для хостов = общее

количество - 2

21
 Бесклассовая адресация
Маска сети
Количество бит в адресе, обозначающие адрес сети.

Адрес [Link]/24
Маска: 11111111 11111111 11111111 00000000
Маска: [Link]

Адрес [Link]/30
Маска: 11111111 11111111 11111111 11111100
Маска: [Link]

[Link]/24 – запись IP-адреса в бесклассовой

нотации
22
 Подклассы
[Link](/24)
24 бит – адрес сети
8 бит – адрес хоста
254 адресов хостов + 2 специальных адреса

Деление на 2 подсети
126 хостов + 2 специальных адреса
126 хостов + 2 специальных адреса
----------------------------------------------
[Link]
X - адрес подсети (1 or 0)
Y - адрес хоста

[Link]/25 – адрес первой подсети

[Link]/25 – адрес хоста
[Link]/25 – широковещательный адрес

[Link]/25 – адрес второй подсети

[Link]/25 – адрес хоста
[Link]/25 – широковещательный адрес 23
 Использование маски сети при
маршрутизации пакетов
Сеть [Link]/20
IP-адрес назначения [Link]
IP-адрес назначения в двоичном формате
10001100.00011111.10101111.11101100
Маска сети в двоичном формате
11111111.11111111.11110000.00000000
Результат наложения маски
10001100.00011111.10100000.00000000
= [Link] = адресу сети, получатель находится в
этой же сети
...
Шлюз

Концентратор
(Hub)
Коммутатор
(Switch)

24
...
 Использование маски сети при
маршрутизации пакетов
Сеть [Link]/20
IP-адрес назначения [Link]
IP-адрес назначения в двоичном формате
10001100.00011111.10110001.11101100
Маска сети в двоичном формате
11111111.11111111.11110000.00000000
Результат наложения маски
10001100.00011111.10110000.00000000
= [Link] != адресу сети, получатель находится в
другой сети, пакет направляется ...
на шлюз Шлюз

Концентратор
(Hub)
Коммутатор
(Switch)

25
...
 Специальные IP адреса

[Link]/8 - закольцованный интерфейс

(loopback). Предназначен для отладки
сетевых программ без передачи данных в
сеть
[Link]/8, [Link]/16, [Link]/12 -
сети, не используемые реально в Интернет,
предназначены для построения локальных
сетей на основе TCP/IP без подключения к
внешним IP-сетям

26
 Взаимодействие протоколов сети
Интернет
ping, tracert

прикладной HTTP, FTP DNS

уровень

транспортный
TCP UDP
уровень

сетевой
уровень IP ICMP

канальный
уровень IEEE 802.3 (Ethernet) , IEEE 802.11 (WiFi), IEEE 802.15.1 (Bluetooth), ...

физический
оптоволокно, радиоканал, кабель
уровень
27
TCP-соединение

Synchronization - синхронизация

Acknowledgement - подтверждение

Sequence - последовательность

28
•Протокол ICMP (Internet Control Message Protocol) –
протокол межсетевых управляющих сообщений.
•Протокол TCP (Transmission Control Protocol) – протокол
управления надёжной передачей данных по сети
Интернет.
•Протокол UDP (User Data Protocol) – протокол
управления ненадёжной передачей данных по сети
Интернет без установления соединения.
•Протокол FTP (File Transfer Protocol) – протокол
передачи файлов.
•Протокол HTTP (Hyper Text Transfer Protocol) – протокол
обмена гипертекстовой информацией.
•Протокол DNS (Domain Name System) – протокол
системы наименования доменов.
•Протокол POP (Post Office Protocol) – протокол для
получения почты с почтового сервера.
•Протокол SMTP (Simple Mail Transfer Protocol) – протокол
передачи сообщений электронной почты. 29
 Порты
80 (HTTP)
…
21 (FTP)

[Link]
20 (FTP)
21 (FTP)
22 (SSH)
25 (SMTP)
[Link] 53 (DNS)
80 (HTTP)
443 (HTTPS)
…
30
Порты

31
FTP – File Transfer Protocol

32
 DNS (Domain Name System) –
система доменных имён
Домен – это множество хостов, объединенных в логическую
группу.
DNS – это распределенная база данных, поддерживающая
иерархическую систему имен и предназначенная для
определения IP-адреса по известному символьному имени
узла (и наоборот).

[Link] – относительное доменное имя

[Link]. – абсолютное доменное имя

. – корневой домен
com. – домен первого (верхнего) уровня
[Link]. – домен второго уровня
[Link]. – домен третьего уровня

33
 Локальная база данных DNS

Файл hosts:
c:\windows\system32\drivers\etc\hosts (Windows)
/etc/hosts (Unix)

[Link] localhost
[Link] [Link]
….

34
 Распределенная база данных DNS
Корень БД DNS: [Link]
Internet Network Information Center (Internic) [Link]
…
Первый уровень: [Link]
родовые имена:
com – коммерческие организации
edu – образовательные учреждения
gov – правительственные организации
.
org – некоммерческие организации
net – организации, поддерживающие сети …
домены государств: com ru net ..
ru – Россия – управляет Российский
научно-исследовательский институт [Link] [Link] [Link]
развития общественных сетей
(РосНИИРОС, [Link] [Link]
am – Армения содержит записи для
at – Австрия [Link]
tv – Тувалу [Link]
io – Британская территория в Индийском океане [Link]
[Link]
35
me – Черногория …
 Запрос: определить IP для хоста
[Link]

user
пользователь
domainDNS
DNS-сервер
Ответ из кэша: IP=[Link]

C:\>nslookup [Link]
Server: [Link]
Address: [Link]

Non-authoritative answer:
Name: [Link]
Address: [Link] 36
Итеративный поиск IP адреса, соответствующего
символьному имени [Link]

Какой адрес у [Link]?

сервер корня
domainDNS22
DNS
(InterNIC)
2
Запрос: определить IP для 3
хоста [Link] NS [Link]

1 4
Какой адрес у [Link]?

user2
пользователь 8 5
domainDNS2
DNS-сервер
NS [Link] сервер зоны .ru
domainDNS222
DNS
Ответ: IP=[Link] 6 (РосНИИРОС)

Какой адрес у [Link]?

7
[Link]

сервер зоны
domainDNS2222
DNS
[Link]

37
Получение информации от заданного DNS-сервера
(для Windows):
nslookup ДОМЕННОЕ_ИМЯ АДРЕС_DNS_СЕРВЕРА
C:\>nslookup [Link] [Link]
Server: [Link]
Address: [Link]

Non-authoritative answer:
Name: [Link]
Address: [Link]

nslookup ДОМЕННОЕ_ИМЯ – получение информации от

текущего DNS-сервера
C:\>nslookup [Link]
Server: [Link]
Address: [Link]

Non-authoritative answer:
Name: [Link]
Address: [Link]
38
Non-authoritative answer: - это ответ из кэша.
«Официальный» ответ:

C:\>nslookup [Link] [Link]

Server: [Link]
Address: [Link]
Aliases: [Link].[Link]

Name: [Link]
Address: [Link]

nslookup –type=ТИП ДОМЕННОЕ_ИМЯ

– получение информации определенного типа:
A – преобразование символьных имён в IPv4 адреса (по умолчанию)
A AAA – преобразование символьных имён в IPv6 адреса
PTR – преобразование IP адресов в символьные имена
NS – IP адреса DNS-серверов, отвечающих за данный домен
MX – IP адреса почтовых серверов, принимающих письма для данного
домена
CNAME – символьные ссылки
TXT – дополнительная текстовая информация о домене 39
ANY – вся информация
Какие IP адреса соответствуют символьному имени
[Link]?
C:\>nslookup [Link]
Server: [Link]
Address: [Link]

Non-authoritative answer:
Name: [Link]
Addresses: [Link], [Link], [Link], [Link]
[Link], [Link], [Link], [Link]
Aliases: [Link], [Link]
[Link]

Вывод: у одного символьного имени может быть несколько

IP адресов (для распределения нагрузки между разными
серверами).

40
Получим всю информацию о [Link]:
C:\>nslookup -type=ANY [Link]
Server: [Link]
Address: [Link]

Non-authoritative answer:
[Link] canonical name = [Link]

Ответ: «смотрите информацию о каноническом имени

[Link]».

41
Найдём IP адреса доменов [Link] и [Link]:
C:\>nslookup [Link]
Server: [Link]
Address: [Link]

Non-authoritative answer:
Name: [Link]
Address: [Link]

C:\>nslookup [Link]
Server: [Link]
Address: [Link]

Non-authoritative answer:
Name: [Link]
Address: [Link]

Вывод: несколько разных доменов могут соответствовать

одному IP адресу (виртуальный хостинг – размещение
многих сайтов на одном сервере с одним IP адресом). 42
Найдём символьное имя по IP адресу (записываем IP адрес
наоборот и добавляем .[Link]):
C:\>nslookup -type=PTR [Link].[Link]
Server: [Link]
Address: [Link]

Non-authoritative answer:
[Link].[Link] name = [Link]

Вывод: IP адресу соответствует единственное символьное

имя, либо этого соответствие может отсутствовать:
C:\>nslookup -type=PTR [Link].[Link]
Server: [Link]
Address: [Link]

*** [Link] can't find [Link].[Link]: Non-exis

tent domain

43
Проверим один из IP адресов, соответствующих
символьному имени [Link]:
C:\>nslookup -type=PTR [Link].[Link]
Server: [Link]
Address: [Link]

Non-authoritative answer:
[Link].[Link] name = [Link]

Вывод: символьное имя, определенное по IP адресу, может

не соответствовать тому символьному имени, по которому
был определён этот IP адрес.

44
Определить IP адреса DNS-серверов, у которых можно
получить «официальную» информацию о поддоменах
домена [Link] (например, о домене [Link]):
C:\>nslookup -type=NS [Link]
Server: [Link]
Address: [Link]

Non-authoritative answer:
[Link] nameserver = [Link]
[Link] nameserver = [Link]
[Link] nameserver = [Link]
[Link] nameserver = [Link]
[Link] nameserver = [Link]
[Link] nameserver = [Link]

[Link] internet address = [Link]

[Link] internet address = [Link]
[Link] internet address = [Link]
[Link] internet address = [Link]
[Link] internet address = [Link]
[Link] internet address = [Link]

45
Проверка:
C:\>nslookup [Link] [Link]
Server: [Link]
Address: [Link]

Name: [Link]
Address: [Link]

Определить IP адрес почтового сервера, который принимает

электронные письма на имя ИМЯ@[Link]:

C:\>nslookup -type=MX [Link]

Server: [Link]
Address: [Link]

Non-authoritative answer:
[Link] MX preference = 10, mail exchanger = [Link]

[Link] internet address = [Link]

46
Получение всей информации о домене [Link]:
C:\>nslookup -type=ANY [Link]
Server: [Link]
Address: [Link]

[Link] MX preference = 10, mail exchanger = [Link]

[Link] text =

"v=spf1 ip4:[Link]/24 ip4:[Link]/24 ip4:[Link]/24 ~all"

[Link] internet address = [Link]
[Link] nameserver = [Link]
[Link] nameserver = [Link]
[Link] nameserver = [Link]
[Link] nameserver = [Link]
[Link] nameserver = [Link]
[Link] nameserver = [Link]
[Link]
primary name server = [Link]
responsible mail addr = [Link]
serial = 3209013296
refresh = 300 (5 mins)
retry = 900 (15 mins)
expire = 172800 (2 days)
default TTL = 300 (5 mins)
[Link] nameserver = [Link]
[Link] nameserver = [Link]
47
…
 Определение причины отсутствия доступа к
интернет-сервису
1) Определить IP адрес машины, IP адрес шлюза и IP адреса
DNS-серверов (ipconfig /all).
2) Проверить возможность определения IP адреса по имени
узла (nslookup).
3) Проверить доступность шлюза и узла (ping). Отсутствие
ответа не означает невозможность установить соединение с
узлом.
4) Проверить маршрут до узла (tracert). Обрыв маршрута не
означает невозможность установить соединение с узлом.
5) Проверить возможность установления соединения с узлом
по различным протоколам: HTTP – порт 80, SMTP – порт 25,
FTP – порт 21, SSH – порт 22 (telnet или putty).
6) Связаться с администратором проблемного
маршрутизатора ([Link] [Link] или
48
[Link]
WWW (World Wide Web) – всемирная паутина
Гипертекст (Hypertext) - …
1989 г. Тим Бернерс-Ли, Европейская лаборатория
физики элементарных частиц (CERN)
Всемирная паутина (World Wide Web) - …

4 основные идеи:
1) гипертекст
2) универсальная идентификация
ресурсов
3) клиент/серверная архитектура
4) языки разметки

HTML (Hypertext Markup

Language) - …
49
 URI, URL, URN
URI (Uniform Resource Identifier) – единообразный
идентификатор ресурса. Формат:
СХЕМА:ИДЕНТИФИКАТОР[?ЗАПРОС][#ФРАГМЕНТ]

URI

URL URN
URL (Uniform Resource Locator) – единообразный локатор
ресурса – подмножество URI, которое содержит
информацию о местонахождении ресурса и способе
обращения к нему

URN (Uniform Resource Name) – единообразное имя ресурса

50
 URI, URL, URN
Примеры:
urn:ISBN:0-395-36341-1
urn:uuid:6e8bc430-9c3a-11d9-9669-0800200c9a66
urn:btih:JFRYN46FHYBNSWGH66HRJUU57HWEBNY
magnet:?xt=urn:btih:JFRYN46FHYBNSWGH66HRJUU57HWEBNY
urn:ietf:rfc:2648
[Link]
bitcoin:6Fhj6bsghf3FHTYNFGHhgfng45n7ndGf3A
[Link]
[Link]
[Link]
[Link]
[Link]
news:[Link]
[Link]
[Link]
telnet://[Link]:4352
data:text/html,<h1>example</h1> 51
 Пример URL

Абсолютные и относительные URL

Текущий URL Относительный URL Результат
(абсолютный URL)

[Link] /files/[Link] [Link]

[Link] [Link] [Link]

[Link] ./[Link] [Link]

[Link] ../img/./[Link] [Link]

52
[Link] ../../main/../[Link] [Link]
 Проблема URL

сервер
URN URL
DDDS

Dynamic Delegation Discovery System – система динамического

обнаружения ресурсов

Часть конфигурационного файла:

;; order pref flags service regexp replacement

IN NAPTR 100 50 "a" "z3950+N2L+N2C" "" [Link].
IN NAPTR 100 50 "a" "rcds+N2C" "" [Link].
IN NAPTR 100 50 "s" "http+N2L+N2C+N2R" "" [Link].

53
 Проблема URL
веб-сервер
PURL URL
PURL

Persistent Uniform Resource Locator – постоянный единообразный локатор

ресурса

[Link] -> [Link]

[Link] -> [Link]

54
 URL без схемы
Scheme relative URL

[Link]

//[Link]/[Link]

[Link]

Выбор зависит от протокола, который используется для просмотра текущей

страницы

55
Развитие WWW (World Wide Web):
1) Символьный гипертекст (текстовый браузер LineMode,
1991 г.)

2) Графически-ориентированные статические HTML-

документы (графический браузер Mosaic, 1993 г.)
3) Динамические HTML-документы (SSI, CGI, Perl, PHP,
ASP)
4) Активные HTML-документы (с 1995 г. - Java, JavaScript,
Flash) 56
 HTTP (Hypertext transfer protocol)
– протокол передачи гипертекста
HTTP-запрос:
Заголовок

Тело запроса

Первая строка заголовка: метод запроса, URL

запрашиваемого ресурса, версия протокола HTTP
Остальные строки – поля заголовка: пары имя:
значение
Методы запроса:
GET – запрос данных (вместе с HTTP-заголовками)
HEAD – запрос HTTP-заголовков без данных.
POST – отправка данных на сервер. 57
Пример HTTP-запроса (метод GET):

GET [Link] HTTP/1.1

Accept: */*
Referer: [Link]
User-Agent: Mozilla/4.0 (compatible; MSIE 6.0;
Windows NT 5.1)
Host: [Link]
Connection: close
(пустая строка)

GET /img/[Link] HTTP/1.1

Host: [Link]
(пустая строка)

58
Пример HTTP-запроса (метод POST):

POST [Link] HTTP/1.1

Host: [Link]
Content-Type: application/x-www-form-urlencoded
Content-Length: 46

name=Tom&email=tom@[Link]&url=[Link]

59
HTTP-ответ:
Заголовок

Тело ответа

Первая строка заголовка – строка состояния: версия

протокола и трехзначный код состояния
Остальные строки – поля заголовка: пары имя:
значение

60
Пример HTTP-ответа (статический документ):
HTTP/1.1 200 OK
Date: Wed, 14 Sep 2005 00:31:03 GMT
Server: Apache/1.3.29 (Unix) PHP/4.3.5
Last-Modified: Thu, 11 Mar 2004 02:24:02 GMT
ETag: "1509a-14e-f865835b"
Content-Length: 8686
Content-Type: text/html; charset=WINDOWS-1251

<html>...
Пример HTTP-ответа (динамический документ):
HTTP/1.1 200 OK
Date: Sun, 02 Mar 2003 15:56:19 GMT
Server: Apache/2.0.40 (Win32)
X-Powered-By: PHP/5.0.3
Content-length: 62
Connection: close
Content-Type: text/html; charset=WINDOWS-1251

<html>... 61
Технология HTTP Strict Transport Security (HSTS):
HTTP/1.1 200 OK
Content-Type: text/html; charset=UTF-8
Date: Mon, 24 Mar 2014 04:01:01 GMT
Server: GSE
Strict-Transport-Security: max-age=10893354; includeSubDomains

<html>...

При последующих попытках пользователя использовать

для данного домена (и поддоменов) небезопасное
соединение по протоколу HTTP браузер будет
автоматически переключаться на безопасное соединение
по протоколу HTTPS.

Поддержка основными браузерами:

Chromium 4+, Google Chrome 4+, Firefox 4+, Opera 12+, Safari
62
 HTML (Hypertext Markup Language)
– язык разметки гипертекста
HTML является одним из приложений SGML (Structured
Generalized Markup Language – обобщенный
структурированный язык разметки)

SGML XML
1986 1996

HTML XHTML SVG

1991 2000 2001

XQuery, XSLT, XForms, XPointer, JSP,

RSS, Atom, XML-RPC, RDF/XML, SOAP
63
Конструкции языка HTML:
1) Элементы (абзацы, ссылки, списки, таблицы …)
начальный тег (обязательный <имя_элемента>),
содержимое, конечный тег (</имя_элемента>)
Пример: <strong>Это жирный текст</strong>, <br>
2) Атрибуты – свойства элементов, указываеются в
начальном теге парами атрибут="значение"
Пример: <div class=“cont” >текст</div>
Пример: <td id="cont" class="bg selected" nowrap> ... </td>
3) Ссылки на символы – числовые или символьные
имена символов в формате &...;
Примеры:
&lt; = <
&copy; = ©
&#128; = €
4) Комментарии
<!–- текст комментария --> 64
XHTML (Extensible Hypertext Markup Language) –
расширяемый язык разметки гипертекста

Преимущества:
1) обработка проще и быстрее, чем HTML
2) доступны технологии, разработанные для XML

Требования:
1) все элементы должны быть закрыты
<br> → <br />
2) у атрибутов обязательно должно быть значение,
заключенное в кавычки
<td nowrap> → <td nowrap="nowrap">
3) имена тегов – строчными буквами
<B> → <b>
4) при нарушении структуры возникает ошибка
65
Документ в формате HTML состоит из следующих частей:
1 Строка с версией HTML (document type declaration)
2 Элемент HTML
2.1 Раздел заголовков (элемент HEAD)
2.2 Тело документа (элемент BODY или элемент
FRAMESET)

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"

"[Link]
<html>
<head>
<title>Заголовок документа</title>
</head>
<body>
<p>Первый HTML-документ.
</body>
</html>

66
Версии HTML:

<!DOCTYPE html>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN"

"[Link]

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"[Link]

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"

"[Link]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"[Link]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"[Link]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"

"[Link]
67
Элемент HEAD (+/+ - начальный и конечный теги обязательны) –
вспомогательная информация о документе, которая не
является содержимым документа (название, кодировка,
информация для поисковых машин). Может содержать
элементы TITLE, META, LINK, BASE, STYLE.

Элемент TITLE (+/+ - начальный и конечный теги обязательны) –

название документа, отображается в заголовке окна браузера.

Элемент МЕТА (+/ – - начальный тег обязателен, конечный

запрещен) – неотображаемая информация и инструкции для
браузера.
<meta http-equiv="имя" content="содержимое">
<meta name="имя" content="содержимое">
68
Элемент МЕТА (продолжение)

<meta http-equiv="Expires" content="Wed, 14 Feb 2006 12:24:57

GMT"> (HTTP/1.0)

<meta http-equiv="Pragma" content="no-cache"> (HTTP/1.0)

<meta http-equiv="Cache-Control" content="no-cache"> (HTTP/1.1)

<meta http-equiv="Content-type"
content="text/html; charset=utf-8">

= HTTP-заголовку Content-type: text/html; charset=utf-8

<meta charset="utf-8"> (HTML5)

<meta http-equiv="Refresh" content="3, URL=[Link]

69
Элемент МЕТА (продолжение)
<meta name="Robots" content="noindex, follow">
index, noindex, follow, nofollow, all="index, follow",
none="noindex, nofollow"

<meta name="Description" content="Документ содержит описание

элементов HTML">

<meta name="Keywords" content="элементы, тэги, метаданные">

<meta name="Author" content="Петров А.М.">

<meta name="Copyright" content="копирование запрещено!!!">

<meta name="Generator" content="MSHTML 6.00.2800.1106" >

70
Элемент BASE (+/-) – указание базового URL-адреса,
относительно которого будут определяться относительные
адреса

Пример:
<base href='[Link]

cars/[Link] = [Link]

71
Элемент LINK (+/-) – связь с другим ресурсом

href – URL связанного ресурса

type – MIME-тип связанного ресурса
rel - тип связи (alternate appendix bookmark
chapter contents copyright glossary help
home index next prev section start
stylesheet subsection)
rev – тип обратной связи
media – тип устройства, на котором будет
использоваться связанный документ (screen
tty tv projection handheld print braille
aural all)

Пример:
<link href="/[Link]" rel="stylesheet"
type="text/css">
<link href="/[Link]" rel="alternate stylesheet"
72
type="text/css" title="Dark website">
 Разделение структуры документа и представления

Без разделения: С разделением:

.... <style
<h1> type="text/css">
<font color="red"> h1 { color: red; }
Заголовок </style>
</font> ....
</h1> <h1>Заголовок</h1>
.... ....

73
 Преимущества разделения структуры документа и
представления

1 Повторное использование стилей

2 Возможность изменения стилей без изменения документа

3 Возможность выбора пользователем одной из возможных

таблиц стилей

4 Возможность определить разные таблицы стилей для

разных устройств отображения информации (монитор,
проектор, принтер, мобильное устройство и т.д.)

74
Элемент BODY (+/+) – определяет содержимое документа
Атрибуты:
background = URL (устаревший)
text = COLOR (устаревший) COLOR = white, black,
link = COLOR (устаревший) ... или #RRGGBB от
vlink = COLOR (устаревший) #000000 до #FFFFFF
alink = COLOR (устаревший)
bgcolor = COLOR (устаревший)

style = ...
id = ...
class = ...

onload = ... (также onunload, onclick, ondblclick, onfocus,

onblur, onkeydown, onkeyup, onkeypress, onmousedown,
onmouseup, onmousemove, onmouseover, onmouseout ...)

Пример:
<body onload="check_user()" class="cont small_txt"
style="color:#a0a0a0;border:1px solid navy">

75
76
 Блочная модель (Box Model)

TOP

LEFT RIGHT

BOTTOM
77
Элементы DIV и SPAN (+/+ division) – группировка элементов
Атрибуты:
title = ...

align = ... (left, right, center, justify) (устаревший)

style = ...
id = ...
class = ...

onclick = ... (и другие обработчики)

Пример:
<div title='Группа элементов' id='news_header'>
Первый второй третий четвертый
</div>

78
Элементы H1, H2, …, H6 (+/+ header) – определяют заголовки
текста
Пример: <h1>Заголовок</h1>

Элемент P (+/? paragraph) – определяет параграф (абзац) текста

Пример: <p>Первый параграф<p>Второй
параграф</p>

Элемент BR (+/─ break line) – переход на следующую строку

Элементы STRONG и B (+/+ bold) – жирный текст

Элементы EM и I (+/+ emphasize, italics) – курсивный шрифт

79
Элемент UL (+/+ unordered list) – маркированный
список

Атрибуты: основные атрибуты +

TYPE (=disc, circle, square) – стиль элементов списка

Элементы LI (+/? list item) – элементы списка

Пример:
<ul>
<li>Первый
<li>Второй
<ul>
<li>Гл. 2.1.
<li>Гл. 2.2.
</ul>
<li>Третий</li>
80
</ul>
Элемент OL (+/+ ordered list) – упорядоченный список

Атрибуты: основные атрибуты +

TYPE (=1, a, A, i, I) – стиль нумерации
START (число) – начальный номер первого элемента

Элементы LI (+/? list item) – элементы списка

Пример:
<ol>
<li>Первый
<li value='5'>Пятый
<ol type='a' start='10'>
<li>Введение
<li>Заключение
</ol>
<li>Шестой</li>
</ol>
81
Элемент PRE (+/+ preformatted) – форматированный текст

В документе сохраняются пробелы и перевод строки

Пример:
<pre>Этот текст
Ф О Р М А ТИРОВАН</pre>

82
Элемент IMG (+/─ image) – изображение

Атрибуты: основные атрибуты +

alt – кратное описание (обязателен)
src (source) – URI изображения
width, height – ширина и высота изображения

align (=left, right, middle, bottom, top) -

выравнивание изображения в документе (устаревший)
border - ширина рамки в пикселях (устаревший)

Пример:
<img src='[Link]
alt='АиКС'>

83
Элемент A (+/+ anchor) - ссылка на другой ресурс либо на
другую часть текущего HTML-документа (внутренняя ссылка)

Атрибуты: основные атрибуты +

href (hypertext reference) – URI связанного ресурса

accesskey - клавиша быстрого доступа (ALT + клавиша)

tabindex - положение в последовательности перехода

target – имя окна, в котором будет загружаться ресурс (_blank

– в новом окне)

name - имя внутренней ссылки (устаревший; в HTML5

используется идентификатор id)
84
Элемент TABLE (+/+) - таблица (позволяет упорядочить
данные в строки и столбцы ячеек)

Атрибуты: основные атрибуты +

cellspacing – ширина поля между границами таблицы и границами

ячеек (и между границами ячеек) (устаревший в HTML5)

cellpadding – ширина поля между границами ячеек и их

содержимым (устаревший в HTML5)

width – ширина всей таблицы (устаревший)

align (=left, center, right) – выравнивание таблицы относительно

документа (устаревший)

bgcolor – цвет фона (устаревший)

border – ширина 3D-границы (устаревший)

85
Элемент TABLE (продолжение)

Элемент TR (+/? table row) – ряд таблицы

Атрибуты: основные атрибуты +

valign (=top, middle, bottom) – выравнивание содержимого ячеек по

вертикали (устаревший)

bgcolor – цвет фона ячеек (устаревший)

align (=left, center, right, justify) – выравнивание содержимого ячеек

по горизонтали (устаревший)

86
Элемент TABLE (продолжение)

Элемент TD (+/? table data) – ячейка таблицы

Атрибуты: основные атрибуты +

rowspan – количество рядов, охваченных текущей ячейкой

colspan – количество столбцов, охваченных текущей ячейкой

width – рекомендуемая ширина ячейки (устаревший)

height – рекомендуемая высота ячейки (устаревший)

align, valign, bgcolor – как в TR (устаревшие)

87
 Новые семантические элементы в HTML5

HEADER (+/+) – верхняя часть документа

FOOTER (+/+) – нижняя часть документа
SECTION (+/+) – основная часть документа
ARTICLE (+/+) – независимая часть документа
NAV (+/+) – группа ссылок
ASIDE (+/+) – дополнительное содержимое

88
 Каскадные таблицы стилей

Способы задания:

1 В элементе HEAD:
<html><head>
<style type='text/css'>...</style>

<style>...</style> (HTML5)

2 Подключение внешнего файла:

<link href="/[Link]" rel="stylesheet" type="text/css">

3 Как атрибут элементов:

<h1 style='color:red; font-size:80%;'>...
89
 Каскадные таблицы стилей
Задание стиля:
СЕЛЕКТОР1 [, СЕЛЕКТОР2, СЕЛЕКТОР3] {
свойство1: значение1;
свойство2: значение2;
}
Виды селекторов:
Типы элементов:
div { ... }
a { ... }
* { ... } – все элементы
Классы элементов:
.myclass1 { ... }
Идентификаторы элементов:
#myid1 { ... }
90
 Каскадные таблицы стилей
Основные свойства элементов:
Тип шрифт:
font-family: Verdana, Arial;
Вес шрифта (жирный шрифт):
font-weight: bold; (normal)
Курсив:
font-style: italic; (normal, oblique)
Размер шрифта:
font-size: 10px;
Цвет текста:
color: #ad38a4; rbg(10,230,34) rgba(10,20,30,0.5)
color: #abc; #aabbcc
Цвет фона:
background-color: green;
Изображение фона:
background-image: url('[Link]
background-repeat: repeat-x; (repeat; repeat-x; repeat-y;
no-repeat) 91
 Каскадные таблицы стилей
Основные свойства элементов:
Декоративные эффекты текста:
text-decoration: underline (none; overline;
blink)
Рамка:
border: 1px solid #800; (dotted, dashed)
Расстояние от содержимого до рамки:
padding: 10px;
padding-left: 2px;
Расстояние от рамки до внешних границ:
margin: 20px;
margin-top: 4px;
Высота содержимого элемента:
height: 20px;
Ширина содержимого элемента:
width: 20px; 92
 Каскадные таблицы стилей
Размеры:

Абсолютные:
in (inches) – дюймы (1 дюйм = 2.54 см)
cm (centimeters) – сантиметры
mm (millimeters) – миллиметры
pt (points) – пункт (1 пункт = 1/72 дюйма)
pc (picas) – пика (1 пика = 12 пунктам)
px (pixel units) – пиксели (1 пиксель = 1/96
дюйма = 0.26 мм)

Относительные:
% - процент от размеров, заданных для
родительского элемента
em – размер шрифта текущего элемента
ex – высота символа "x"
93
 Каскадные таблицы стилей

Расположение элемента:

Абсолютное
position: absolute;
top: 10px; left: 20px;

Относительное
position: relative;
top: -5px; left: 5px;

Фиксированное
position: fixed;

94
 Каскадные таблицы стилей

"Плавающие" элементы:

float: left; - элемент "всплывает" влево, последующие

элементы выводятся справа от него

float: right; - элемент "всплывает" вправо,

последующие элементы выводятся слева от него

clear: left; - элемент смещается вниз настолько, чтобы

слева не было "плавающих" элементов

clear: right; - элемент смещается вниз настолько,

чтобы справа не было "плавающих" элементов

clear: both; - элемент смещается вниз настолько, чтобы

слева и справа не было "плавающих" элементов 95
 Каскадные таблицы стилей

Иерархические селекторы:

E1 E2 { ... } –
для элемента/класса/идентификатора E2,
находящегося в элементе/классе/идентификаторе E1
(любой уровень вложенности);

E1>E2 { ... } –
для элемента/класса/идентификатора E2,
находящегося в элементе/классе/идентификаторе E1
(первый уровень вложенности);

96
 Каскадные таблицы стилей

Иерархические селекторы:

E1~E2 { ... } –
для элемента/класса/идентификатора E2,
следующего за элементом/классом/идентификатором
E1;

E1+E2 { ... } –
для элемента/класса/идентификатора E2,
непосредственно следующего за
элементом/классом/идентификатором E1;

97
 Каскадные таблицы стилей

Приоритеты правил (в порядке уменьшения):

span { color: yellow !important; }

#news
div p .news
div .news
[Link]
.news
div .header span
div p span
.header span
div span
span
*
98
 Каскадные таблицы стилей
Псевдоклассы:
div:hover { ... } –
вид элемента при наведении указателя мыши;

input:focus { ... } -
Вид элемента при получении им фокуса;

a:link { ... } –
вид ссылки на непосещенный ресурс;

a:visited { ... } –
вид ссылки на посещенный ресурс;

img:first-child { ... } –
вид картинки, которая является первым дочерним
элементом для своего родительского элемента
img:last-child { ... } 99
 Каскадные таблицы стилей
Псевдоэлементы:
p:fist-letter { ... } –
p::fist-letter { ... } –
вид первой буквы параграфа;

p:first-line { ... } –
p::first-line { ... } -
вид первой строчки параграфа;

div:before { content: "..."; ... } –

div::before { content: "..."; ... } –
добавляет псевдоэлемент как первый дочерний
элемент элемента div;

div:after { content: "..."; ... } –

div::after { content: "..."; ... } –
добавляет псевдоэлемент как последний дочерний
100
элемент элемента div;
 SSI (Server Side Include)
Включения на стороне сервера

- набор команд, позволяющий включить в

страницу информацию, недоступную средствами
HTML

Веб-сервер обрабатывает HTML-документ c SSI-

директивами, выполняет их, результат
возвращает клиенту.

.shtml – HTML-документ с SSI-директивами

<!--#SSI_директива ПАРАМЕТР1="ЗНАЧЕНИЕ1"
ПАРАМЕТР2="ЗНАЧЕНИЕ2"-->
101
 SSI (Server Side Include)
Директивы set, echo, printenv

set – установить значение переменной окружения

параметр var – имя переменной
параметр value – значение переменной
<!--#set var="Email" value="admin@[Link]"-->

echo – вывод значения переменной окружения

параметр var – имя переменной
<!--#echo var="HTTP_USER_AGENT"-->

printenv – вывод всех переменных окружения

<!--#printenv-->

102
 SSI (Server Side Include)
Некоторые переменные окружения

REMOTE_ADDR – IP адрес клиента

REMOTE_USER – имя клиента (если была проведена

аутентификация)

HTTP_USER_AGENT – браузер клиента

HTTP_REFERER – ссылающаяся страница

QUERY_STRING – строка запроса

SERVER_NAME – имя сервера

103
 SSI (Server Side Include)
Директивы условий (if, elif, else, endif)
<!--#if expr="УСЛОВИЕ1"-->
HTML-код, который будет выводиться, если УСЛОВИЕ1 истинно
<!--#elif expr="УСЛОВИЕ2"-->
HTML-код, который будет выводиться, если УСЛОВИЕ1 ложно,
а УСЛОВИЕ2 истинно
<!--#else-->
HTML-код, который будет выводиться, если все условия
ложны
<!--#endif-->
Обязательно двойные кавычки в условии.
Условие - это либо строка, которая является истинной, если непустая, или набор
операторов сравнения строк.
Операторы: =,!=,<,<=,> и >=
К переменным окружения добавляется знак $
Поиск подстроки: $MyName=/Vas/
Объединение условий с помощью скобок и операторов && (И) и || (ИЛИ)

<!--#if expr="$Name='Ivan' || $HTTP_USER_AGENT=/Mozilla/"-->

... 104
 SSI (Server Side Include)
Директива include

include - включение содержимого файла

параметр file – имя файла относительно текущего каталога
или
параметр virtual - имя файла относительно текущего
каталога или относительно корня сайта.
file: нельзя переходить в родительский каталог
virtual: можно переходить в родительский каталог

<!--#include file='[Link]'-->
<!--#include file='./dir1/[Link]'-->
<!--#include file='../dir1/[Link]'--> - нельзя!
<!--#include file='/ch1/[Link]'--> - нельзя!
<!--#include virtual='[Link]'-->
<!--#include virtual='./dir1/[Link]'-->
<!--#include virtual='../dir1/[Link]'-->
<!--#include virtual='/ch1/[Link]'--> 105
 Скриптовый язык программирования JavaScript

JavaScript - это язык управления сценариями просмотра HTML-

документов на стороне клиента.

Разработан в 1995 г. специалистами компании Netscape.

Основная идея – возможность изменения значений атрибутов тегов и свойств

среды в процессе просмотра HTML-страницы пользователем.

Netscape – JavaScript
ECMAScript (1997 г.)
Microsoft – JScript

Скриптовый язык тесно связан с объектной моделью документа (DOM –

document object model)

106
 JavaScript

DOM (Document Object Model) – объектная модель документа

Объектная модель документа DOM – это представление HTML-документа

(XML-документа или другого документа) в виде иерархии объектов,
которые характеризуются своими свойствами, методами и событиями

Процесс обработки HTML-документа браузером:

1. HTML-документ загружается с сайта и размещается в памяти компьютера.
2. Производится анализ документа, в результате которого он разбивается на
составляющие.
3. Элементы, из которых состоит HTML-документ (<body></body>,
<head></head>, <p></p> и т.д.), размещаются во временной базе данных в
соответствии с DOM.
4. База данных становится доступной другим программам, в частности -
скриптам – программам на скриптовом языке JavaScript.
107
 JavaScript
Пример представления HTML-документа в соответствии с DOM

<TABLE><TBODY>
<TR>
<TD>Shady Grove</TD>
<TD>Aeolian</TD>
</TR>
<TR>
<TD>Over the River, Charlie</TD>
<TD>Dorian</TD>
</TR>
</TBODY> </TABLE>

108
 JavaScript
Структура объектной модели документа DOM

document – главный объект HTML-документа (объект)

• title – заголовок документа (строка);
• referrer – URI адрес ссылающейся страницы (строка);
• URL – адрес данного HTML-документа (строка);
• body – HTML-элемент BODY (объект);
• images – коллекция изображений (массив);
• anchors – коллекция ссылок (массив);
• forms – коллекция форм (массив);
• getElementById(id) – функция возвращает ссылку на элемент
с указанным уникальным именем.

109
 JavaScript
Способы размещения функций
1) В HTML-документе
<script type="text/javascript">
<!--
function somefunction()
{
// здесь располагается код функции
}
//-->
</script>

2) В отдельном файле
<script type="text/javascript" src="/inc/[Link]"></script>

В файле [Link]:
function somefunction()
{
// здесь располагается код функции
}
110
 JavaScript
Способы функционального применения скриптов
1) гипертекстовая ссылка (вместо URL);
2) обработчик события (HANDLER);
3) вставка (элемент SCRIPT).

Гипертекстовая ссылка
Применяется в следующих элементах:
- А (атрибут href)
- FORM (атрибут action)
- IMG (атрибут src) (небезопасно)
Вместо URL указывается строчка: javascript:КОД_ПРОГРАММЫ

КОД_ПРОГРАММЫ – вызов функции или набор операторов

<a href="javascript:alert('Вы нажали на ссылку');">Ссылка</a>

<form action="javascript:alert('Подтверждение формы');">

<input type="submit" value="Submit"></form>
111
 JavaScript
Способы функционального применения скриптов

Обработчик события
JavaScript-код указывается в качестве значения соответствующего
атрибута элемента: onСОБЫТИЕ="КОД_ПРОГРАММЫ"

<div onmouseover="alert('ничего нет')">Здесь ничего нет</div>

Вставка
JavaScript-код помещается в элементе SCRIPT. Обычно в заголовке
документа HEAD размещают объявления переменных и функций, а в
основной части документа – исполняемый код

<script type="text/javascript">
function f1() {
// код функции
}
alert('вставка');
</script>
112
 JavaScript
Обращение к объектам, их свойствам и методам

Обращение к объектам осуществляется в соответствии со структурой

объектной модели документа:

ОБЪЕКТ_1.ОБЪЕКТ_2. … .ОБЪЕКТ_N
ОБЪЕКТ_1.ОБЪЕКТ_2. … .ОБЪЕКТ_N.СВОЙСТВО1. … СВОЙСТВОM
ОБЪЕКТ_1.ОБЪЕКТ_2. … .ОБЪЕКТ_N.МЕТОД

<form name="Fm1"><input name="Txt1" size="30"></form>

Обращение к объекту:

[Link][0].elements[0] (НЕВЕРНО: [Link][0].Elements[0])

document.Fm1.Txt1
Fm1.Txt1
[Link]("PicId")

113
 JavaScript
Обращение к свойству объекта:

[Link][0].elements[0].[Link]='red';
[Link]='red';

[Link][0].[Link]='none';

[Link]("news").[Link]='red';
//изменение цвета фона

[Link]("news").[Link]='none';
//изменение видимости объекта

[Link]("news").innerHTML='Другой текст';
//изменение HTML-кода, содержащегося в объекте

Обращение к методу объекта:

[Link](); (НЕВЕРНО: [Link]();)

[Link]();
114
 JavaScript
Типы и структуры данных
- литералы и переменные;
- массивы, функции и объекты.

Литералы
числовой литерал: 42
числовой литерал: 1.432
числовой литерал: 1.432e+2
строковый литерал: 'Это строковый литерал'
строковый литерал: "Это строковый литерал"

Переменные
Определяются при помощи оператора var
var i;
var i=20;
var w=[Link]();
Регистр букв имеет значение. Тип переменной определяется
контекстом.Узнать тип переменной можно с помощью функции
typeof(ИМЯ_ПЕРЕМЕННОЙ). Результат функции – строка
'undefined', 'number', 'string', 'object' или 'function'.
115
alert(typeof(i));
 JavaScript
Операторы сравнения

== равно != не равно – если типы сравниваемых операндов

не равны, происходит преобразование типов
=== строго равно, !== строго не равно – сравниваются как
типы операндов, так и их значения

"10" == 10 // true
"10" === 10 // false

"1" == true // true

"1" === true // false

0 == '' // true
0 == ' \r\n ' // true
0 === ' \r\n ' // false

null == undefined // true

null === undefined // false
116
 JavaScript
Явное и неявное преобразование типов

10 + 20 // 30

10 + "20"// "1020"

10 + parseInt("20")// 30

10 + parseInt("020")// ??

10 + parseInt("020", 10)// 30

10 + parseInt("20.5")// 30

10 + parseFloat("20.5")// 30.5

var i = 20;
10 + [Link]() // "1020"
117
 JavaScript
Типы и структуры данных
Можно сразу задать переменную без оператора var:
i = 10;

При объявлении переменной оператором var ей присваивается значение null:

var i;
if (i == null) alert('i is null'); // +
if (i === undefined) alert('undefined'); // +
alert(typeof(i)); // undefined

var i = '';
if (i == null) alert('i is null'); // -
if (i === undefined) alert('undefined'); // -
alert(typeof(i)); // string

var i = null;
if (i == null) alert('i is null'); // +
if (i === undefined) alert('undefined'); // -
alert(typeof(i)); // object
118
 JavaScript
Типы и структуры данных
Массивы

var a = new Array(); //объявление массива

var b = [];

alert(typeof(b)); // 'object'

var c = new Array(10); //объявление массива со значениями

var d = new Array(12.32, "строчка");

var e = [12.32, "строчка"];

alert(e[1]); //'строчка', индексация c 0

e[10]='новая строчка';

alert([Link]); //определение количества элементов119(11)

Функции

function f_name(arg1,arg2,...)
{
/* function body */
return result;
}

function add(a, b) {
return a+b;
}
alert(add("10","20")); //появится сообщение «1020»

Анонимные функции

[Link] = function () { /* function body */ }

[Link] = [Link];

(function() {
var a = 10, b = 20;
alert(a+b); 120
})();
 JavaScript
Операторы условия и цикла
Оператор условия if
if (логическое выражение) оператор1;
[else оператор2;]

if (i==null) { alert('i is null'); }

else { alert('i is not null'); }

Оператор цикла while

while (логическое выражение)
оператор;

var i=1;
while (i<10) { alert(i); i+=2; }

Оператор цикла for

for (инициализация переменных цикла;
условие; модификация переменных цикла)
оператор;
121
for (var i=0; i<10; i++,j++) { alert(i); }
 JavaScript

eval(строчка) – аргумент выполняется как код программы;

eval('ale'+'rt("'+'eval'+'");'); //появится сообщение
«eval»

Определение всех свойств и методов объекта

for(v in ОБЪЕКТ)
{
[Link](
v + " : " +
eval("typeof(ОБЪЕКТ." + v + ")") + " : " +
eval("ОБЪЕКТ."+v)+"<br>");
}

На экране для каждого свойства и метода будут выведены

его тип и значение.

122
 JavaScript
Функции для работы с таймером

ПЕРЕМЕННАЯ=setTimeout('КОД_ПРОГРАММЫ', ВРЕМЯ);

Код программы выполнится через указанное время (в

милисекундах)

var t=setTimeout('alert("Таймер")', 1000); или

var t=setTimeout("alert('Таймер')", 1000);

Через 1 секунду появится сообщение «Таймер»

Сброс таймера по идентификатору:

clearTimeout(ИДЕНТИФИКАТОР)

123
 JavaScript
Функции для работы с таймером

var t=setInterval('КОД_ПРОГРАММЫ', ВРЕМЯ);

Код программы будет выполняться периодически с указанным

интервалом (в милисекундах)

var t=setInterval('alert("Таймер")', 1000);

Через каждую секунду будет появляться сообщение «Таймер»

124
 JavaScript

Работа с графическими изображениями

[Link][0] – первое изображение в HTML-документе

[Link][0].src='[Link] -
изменение изображения (загрузка с сервера [Link])

[Link]('logo').src='[Link]
[Link]';

var img1=new Image; - создание нового объекта-изображения

[Link]='[Link] - загрузка
изображения в объект

[Link][0].src = [Link]; - изменение изображения

в HTML-документе (загрузка из кэша браузера)
125
[Link]('logo').src = [Link];
 JQuery
JavaScript-библиотека, позволяющая упростить
взаимодействие с DOM, обработку событий, использование
визуальных эффектов (в т.ч. анимации) и AJAX-запросов.

Преимущества:

• Отделение логики веб-приложения от содержимого и дизайна

• Кроссбраузерность

• Исключение повторения кода

 Подключение JQuery
1) Использование Google Hosted Libraries
<!DOCTYPE html>
<html>
<head>
<title>JQuery</title>
<meta charset='utf-8'>
<script src="[Link]
</script>
</head>
<body>
</body>
</html>

2) Загрузить библиотеку с [Link]

<script src="[Link]"></script>
 Использование JQuery
Работа с JQuery осуществляется с помощью функции $,
которая принимает селектор и возвращает JQuery-объект.
<body>
...
<script>
$(document).ready(function() {
// код
});
</script>
</body>

или
<script>
$(function() {
// код
});
</script>
 Базовые селекторы
$("*")

$("ЭЛЕМЕНТ")

$("#ИДЕНТИФИКАТОР")

$(".КЛАСС")
 Иерархические селекторы
$("E1 E2")

$("E1>E2")

$("E1~E2")

$("E1+E2")
 Базовые фильтры
$("СЕЛЕКТОР:odd") – элементы с нечетными индексами
(индекс с 0)

$("СЕЛЕКТОР:even") – элементы с четными индексами

$("СЕЛЕКТОР:gt(N)") – элементы с индексами > N

$("СЕЛЕКТОР:lt(N)") – элементы с индексами < N

$("СЕЛЕКТОР:eq(N)") – элемент с индексом N

$("СЕЛЕКТОР:first") – первый элемент

$("СЕЛЕКТОР:last") – последний элемент

 Базовые фильтры
$("СЕЛЕКТОР:not(СЕЛЕКТОР2)") – элементы, не
подпадающие под описание СЕЛЕКТОР2

$("СЕЛЕКТОР:header") – элементы-заголовки (h1, h2,

…)

$("СЕЛЕКТОР:animated") – элементы, анимируемые в

настоящий момент

Объединение фильтров
$("СЕЛЕКТОР:ФИЛЬТР1:ФИЛЬТР2:ФИЛЬТР3")

$("СЕЛЕКТОР").filter(":ФИЛЬТР1").filter(":ФИЛЬТР2"
).filter(":ФИЛЬТР3")
 Фильтры содержимого и видимости
$("СЕЛЕКТОР:visible") – элементы, видимые в
настоящий момент

$("СЕЛЕКТОР:hidden") – элементы, скрытые в

настоящий момент

$("СЕЛЕКТОР:parent") – элементы, имеющие дочерние

элементы

$("СЕЛЕКТОР:empty") – пустые элементы (без

содержимого)

$("СЕЛЕКТОР:has(СЕЛЕКТОР2)") – элементы,
содержащие дочерние элементы, подпадающие под
описание СЕЛЕКТОР2

$("СЕЛЕКТОР:contains(ТЕКСТ)") – элементы,
содержащие ТЕКСТ
 Действия с JQuery-объектом
height, width
css
addClass, removeClass, toggleClass
toggle, hide, show
slideToggle, slideUp, slideDown
fadeOut, fadeIn, fadeTo
animate
html
text

on, off

События: click, dblclick, focus, blur, change,

keypress, keydown, keyup, mousedown, mouseup,
mousemove, hover, mouseenter, mouseleave
 Программирование для Web
CGI (Common Gateway Interface)
CGI - это спецификация обмена данными между прикладной
программой, выполняемой по запросу пользователя, и HTTP-
сервером, который данную программу запускает.

135
 Программирование для Web
CGI (Common Gateway Interface)
Часть информации заголовка HTTP-запроса преобразует в
переменные окружения, которые доступны для анализа CGI-
скриптом. Если запрос имеет тело, то оно становится
доступным скрипту через поток стандартного ввода.
CGI-скриптом называют программу, написанную на любом языке
программирования или командном языке, которая осуществляет
обмен данными с HTTP-сервером в соответствии со
спецификацией Common Gateway Interface.
Наиболее популярные языки программирования: PHP, Perl, Python,
Ruby, C.
переменные окружения
аргументы командной строки

стандартный поток ввода

стандартный поток вывода

CGI-приложение
HTTP-сервер
136
 Программирование для Web
CGI (Common Gateway Interface)
Метод GET:
GET /cgi-bin/temp/[Link]?a=1&b=2 HTTP/1.1
Referer: [Link]
User-Agent: Mozilla/4.0 (compatible; MSIE 6.0; Windows NT
5.1)
Host: [Link]
<пустая строка>

Переменные окружения:
REQUEST_METHOD = GET
QUERY_STRING = a=1&b=2
HTTP_REFERER = [Link]
HTTP_USER_AGENT = Mozilla/4.0 (compatible; MSIE 6.0;
Windows NT 5.1)
REMOTE_ADDR = [Link]

Стандартный поток ввода: ничего

137
 Программирование для Web
CGI (Common Gateway Interface)
Метод POST:
POST /cgi-bin/temp/[Link]?a=1&b=2 HTTP/1.1
Referer: [Link]
User-Agent: Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1)
Host: [Link]
Content-Type: application/x-www-form-urlencoded
Content-Length: 8
<пустая строка>
PostData

Переменные окружения:
REQUEST_METHOD = POST
QUERY_STRING = a=1&b=2
CONTENT_TYPE = application/x-www-form-urlencoded
CONTENT_LENGTH = 8
HTTP_REFERER = [Link]
HTTP_USER_AGENT = Mozilla/4.0 (compatible; MSIE 6.0; Windows NT
5.1)
REMOTE_ADDR = [Link]

Стандартный поток ввода: PostData (8 байт)

138
 Программирование для Web
CGI (Common Gateway Interface)
Самое простое CGI-приложение на Perl:

#!/usr/bin/perl
print "Content-type: text/html\n\nHello";

HTTP-ответ, который получает пользователь:

HTTP/1.1 200 OK
Date: Tue, 20 Nov 2005 17:54:02 GMT
Server: Apache/2.0.52 (FreeBSD) PHP/5.0.3
Connection: close
Content-Type: text/html
<пустая строка>
Hello

139
 Программирование для Web
CGI (Common Gateway Interface)

Более сложное CGI-приложение на Perl:

#!/usr/bin/perl
print "Content-type: text/html; charset=windows-1251\n";
print "Server: [Link]\n";
print "X-Powered-By: PERL\n\n";
print "Hello";

HTTP-ответ, который получает пользователь:

HTTP/1.1 200 OK
Date: Sat, 11 Nov 2006 04:51:38 GMT
Server: Apache
Connection: close
X-Powered-By: PERL
Content-Type: text/html; charset=windows-1251
<пустая строка>
Hello

140
 Программирование для Web
CGI (Common Gateway Interface)

Самое простое CGI-приложение на C:

#include <stdio.h>
int main(void) {
printf("Content-Type: text/plain;charset=windows-1251\n\n");
printf("Hello");
return 0;
}

141
 Программирование для Web
CGI (Common Gateway Interface)
Самое простое CGI-приложение на PHP:
<?php print "Hello"; ?>

HTTP-ответ, который получает пользователь:

HTTP/1.1 200 OK
Date: Tue, 20 Nov 2005 17:56:41 GMT
Server: Apache/2.0.52 (FreeBSD) PHP/5.0.3
X-Powered-By: PHP/5.0.3
Content-Length: 5
Connection: close
Content-Type: text/html
<пустая строка>
Hello

142
 Программирование для Web
Язык программирования PHP
PHP – PHP: Hypertext Preprocessor (или Personal Home Page Tools)
– «Гипертекстовый препроцессор» - язык сценариев общего
назначения, предназначенный в первую очередь для быстрого
создания динамически генерируемых страниц для Web.
Преимущества:
1) PHP может использоваться на всех крупных платформах.
2) Для большинства существующих веб-серверов существуют модули
PHP.
3) Встроенная поддержка наиболее популярных СУБД, сессий,
cookies, переменных запроса.
4) PHP – более безопасный язык для написания CGI-приложений по
сравнению с Perl и C.
5) Встроенная поддержка вывода сообщений об ошибках и
предупреждений напрямую в браузер.

143
 Программирование для Web
Язык программирования PHP
Недостатки:

Несогласованный синтаксис функций:

strlen($s); //string length

str_replace(‘a’, ‘b’, $s); //string replace
strpos($s, ‘a’); //string position
ltrim($s); //left trim
isset($v) curl_getinfo
is_null($v) ftp_get_option
mssql_fetch_array
htmlspecialchars($s); mssql_free_result
html_entity_decode($s); mssql_rows_affected
get_html_translation_table(); pdf_open_memory_image
pdf_set_layer_dependency
pdf_open_pdi_document
144
 Программирование для Web
Язык программирования PHP
Скрипт (файл с расширением php):
<html><head><title>Заголовок</title></head>
<body>My name is <?php
$a='PHP'; //это комментарий в тексте скрипта
print $a; /* это тоже комментарий*/ ?></body>
</html>

Результат:
<html><head><title>Заголовок</title></head>
<body>My name is PHP</body>
</html>

145
 Программирование для Web
Язык программирования PHP
Вставить содержимое файла [Link]:

<html><head><title>Заголовок</title></head>
<body><?php include('[Link]'); ?></body>
</html>

Результат:
<html><head><title>Заголовок</title></head>
<body>Links: <a href='[Link]
</html>

146
 Программирование для Web
Язык программирования PHP
Основные типы:
1) логический (True, False) <?php $a=True; ?>
2) целые числа <?php $a=10; ?>
3) вещественные числа <?php $a=4.32; ?>
4) строки <?php $a='str'; $b="str2"; ?>
5) массивы <?php $a=array('frist', 'second', 'third'); ?>

Тип переменной является контекстно-зависимым:

<?php $a='str'; $a=10.2; $a=False; ?>

Проверка типа переменной:

$a=10; if (is_int($a)) { print "Целое число"; }
$a=10.1; if (is_float($a)) { print "Вещественное число"; }
$a='str'; if (is_string($a)) { print "Строчка"; }
$a=array(1,2); if (is_array($a)) { print "Массив"; }
$a="123.3"; if (is_numeric($a)) { print "Число"; }
$a=123.3; if (is_numeric($a)) { print "Число"; }
147
 Язык программирования PHP
Операторы сравнения

== равно != не равно – если типы сравниваемых операндов

не равны, происходит преобразование типов
=== строго равно, !== строго не равно – сравниваются как
типы операндов, так и их значения

"10" == 10 // true
"10" === 10 // false

"1" == true // true

"1" === true // false

0 == '' // true
0 == ' \r\n ' // true
0 === ' \r\n ' // false

148
 Программирование для Web
Язык программирования PHP
Оператор условия:

if (is_string($a)) {
print "Строчка";
$res=$a;
}
elseif (is_array($a)) {
print "Массив";
}
elseif ($a==$b && ($c>=$d || $f<$x)) {
print $a;
}
else {
print $b;
}

149
 Программирование для Web
Язык программирования PHP
Операции со строками
Объединение строк:
$a='First'; $b='Second'; $c=$a.$b; print $c;
FirstSecond

Нахождение подстроки:
$s2 = substr("abcdef", 1, 3); //в $s2 записано "bcd"
//параметры: исходная строка, начальный символ (счёт с
0), количество символов
$s2 = substr("abcdef", 2); //в $s2 записано "cdef" - до
конца строки
$s2 = substr("abcdef", -3); //в $s2 записано "def" -
отчёт от конца строки
$s2 = substr("abcdef", 1, -1); //в $s2 записано "bcde" -
со второго символа до предпоследнего

150
 Программирование для Web
Язык программирования PHP
Операции со строками
Кавычки: " или '
$a='str';
$b='___ $a ___'; //$b содержит ___ $a ___
$c="___ $a ___"; //$c содержит ___ str ___

Определение длины строки:

print strlen($str);

Замена подстроки в строке:

$str=str_replace('ple', '!', 'example');
//аргументы: что заменять, на что заменять, где заменять
//$str содержит exam!

151
 Программирование для Web
Язык программирования PHP
Операции со строками

Сформировать массив из строки:

$b=explode('*', 'abc*de*f');
//аргументы: строка-разделитель, исходная строка
//$b - это массив из 3-х элементов: 'abc', 'de', 'f'

Сформировать строку из массива:

$mas=array('a','b','c');
$a=implode('|', $mas);
//аргументы: строка-разделитель, исходный массив
//в $a содержится строка 'a|b|c'

152
 Программирование для Web
Язык программирования PHP
Операции с массивами
Добавление нового элемента:
$a=array();
$a[]=1; //первый элемент с индексом 0
$a[10]=2;
$a[]=3; //элемент с индексом 11
print $a[11]; //на экране 3

Перебор всех элементов:

foreach ($a as $v) {
print $v. '-';
}
//на экране 1-2-3-

$a=array(1,2,3);
for ($i=0; $i<count($a); $i++) { print $a[$i].'-'; }
//на экране 1-2-3-
153
 Программирование для Web
Язык программирования PHP
Операции с файлами
Чтение текстового файла в массив:
$ar=file('[Link]');

$fp=fopen('[Link]', 'r');
while (!feof($fp)) {
$ar[]=fgets($fp);
}
fclose($fp);

Запись массива в текстовый файл:

$fp=fopen('[Link]', 'w');
foreach ($ar as $v) { fputs($fp, $v); }
fclose($fp);

154
 Программирование для Web
Язык программирования PHP
Обработка форм
Переменные окружения:
getenv('REMOTE_ADDR')
getenv('HTTP_USER_AGENT')

Данные, переданные из формы методом GET:

$_GET['user']
$_GET['fieldname1']

Проверка, что переменная определена и имеет значение,

отличное от NULL:
if (isset($_GET['fieldname1'])) { print
$_GET['fieldname1']; }

Данные, переданные из формы методом POST:

$_POST['user']
$_POST['fieldname1']
155
 Программирование для Web
Язык программирования PHP
Дата и время
Функция time() – возвращает текущее время, выраженное в
количествах секунд, прошедших с 1 января 1970 г.
print time(); //1133923633

Функция date(string format[, int time]) – возвращает

время time (или текущее время) в виде строки, заданным
форматом format
Некоторые символы строки формата:
d - день месяца (число, 2 символа);
m - месяц (число, 2 символа);
Y - год (4 цифры);
y - год (2 цифры);
h - час, 12-часовой формат (2 символа);
H - час, 24-часовой формат (2 символа);
i - минуты (2 символа);
s - секунды (2 символа).
print date('d/m/Y', 1133923633); //07/12/2005
156
 Программирование для Web
Cookies
Cookies – это текстовые переменные, которые
устанавливаются на компьютере клиента и передаются в
HTTP-заголовке.

Устанавливаются в заголовке HTTP-ответа:

Set-Cookie: name=value; expires=дата; domain=имя_хоста;
path=путь; secure; HttpOnly

HTTP-ответ:
HTTP/1.1 200 OK
Date: Wed, 05 Dec 2005 16:11:56 GMT
Server: Apache/2.1.4 (FreeBSD) PHP/5.0.3
X-Powered-By: PHP/5.0.3
Set-Cookie: ct=1133925116
Content-Length: 726
Connection: close
Content-Type: text/html

<html>...
157
 Программирование для Web
Cookies
HTTP-ответ:
HTTP/1.1 200 OK
Date: Wed, 05 Dec 2005 16:11:56 GMT
Server: Apache/2.1.4 (FreeBSD) PHP/5.0.3
X-Powered-By: PHP/5.0.3
Set-Cookie: ct2=1133925364; expires=Thu, 05-Dec-2006 16:16:04 GMT
Content-Length: 726
Connection: close
Content-Type: text/html

<html>...

158
 Программирование для Web
Cookies
Cookies передаются на сервер браузером в заголовке HTTP-
запроса:

Cookie: name1=value1; name2=value2

HTTP-запрос:
GET /~temp/[Link] HTTP/1.0
Host: [Link]
Keep-Alive: 300
Referer: [Link]
Cookie: ct2=1133925364; ct=1133925557

159
 Программирование для Web
Cookies
В PHP-скрипте Cookies устанавливаются и удаляются
функцией
setcookie (string name [, string value [, int expire [, string
path [, string domain [, int secure [, int httponly]]]]]])

Устанавливать cookies необходимо перед любым выводом в

HTML-документ.
setcookie('cookname', 'Hello'); - установка переменной
cookname на сеанс работы браузера

setcookie('cookname', 'Hello', time()+3600*24*365); -

установка переменной cookname на год

setcookie('cookname', 'Hello', time()-10); - удаление

переменной cookname

Вывод переменной cookname, хранящейся в Cookies:

print $_COOKIE['cookname'];
160
 Программирование для Web
Сессии
Сессии – механизм, позволяющий хранить на сервере
произвольные данные, индивидуальные для каждого
пользователя, между запусками скриптов.

Пользователю в Cookies записывается PHPSESSID – уникальный

идентификатор сессии, а на сервере этому PHPSESSID
сопоставляется некоторый набор данных.

Инициализация сессии производится с помощью функции

session_start(). При этом выполняются следующие действия:
• Если пользователь запускает сценарий впервые, у него
устанавливается Cookie с PHPSESSID и создается временное
хранилище, ассоциированное с этим идентификатором.
• Определяется, какое хранилище связано с текущим
идентификатором пользователя.
• Если в хранилище имеются какие-то переменные, создаются
соответствующие элементы массива $_SESSION со значениями,
сохраненными при предыдущем завершении скрипта.
161
 Программирование для Web
Сессии
Регистрация переменной var_name:
$_SESSION['var_name']='значение переменной';

Проверить, зарегистрирована ли данная переменная, можно с

помощью функции isset:
if (isset($_SESSION['var_name'])) { ... }

Отменить регистрацию переменной:

unset($_SESSION['var_name']);

162
 Программирование для Web
Классы в PHP
class MyClass {
private $title = 'default title';
//переменная класса с режимом доступа private
public $count;
//переменная класса с режимом доступа public

function MyClass($t) { //конструктор класса

$this->title = $t;
}
function out() { //метод класса
print "Title: ".$this->title."<br>";
print "Count: ".$this->count;
}
}

$obj = new MyClass("new object"); //создание объекта

$obj->count = 10; //обращение к переменным объекта
$obj->out(); //обращение к методам объекта
unset($obj); //уничтожение объекта
163
 Программирование для Web
AJAX
Шаг 1 – создание объекта XMLHttpRequest

<script>
...
var req;
if ([Link])
{
// код для IE7+, Firefox, Chrome, Opera, Safari
req = new XMLHttpRequest();
}
else if ([Link])
{
// код для IE6, IE5
req = new ActiveXObject("[Link]");
}
else { alert("Ваш браузер не поддерживает XMLHTTP!"); }
}
...
</script>
164
 Программирование для Web
AJAX
Шаг 2 – указать обработчик изменения состояния объекта

<script type='text/javascript'>
...
[Link] = myready;
...
</script>

Шаг 3 – обработчик изменения состояния объекта

<script type='text/javascript'>
...
function myready() {
if ([Link] == 4 && [Link] == 200) {
alert( [Link] );
}
}
...
</script> 165
 Программирование для Web
AJAX

Шаг 4 – выполнить запрос

<script type='text/javascript'>
...
[Link]('GET', '[Link] true);
[Link](null);
...
</script>

166