Что такое HTTP 19 страница

Обратите внимание, этот код немного отличается от представленного в листинге 18.1, поскольку в данном случае мы собираемся передавать в функцию имя текущей формы. Благодаря принципу областей действия, нам не нужно писать полный DOM-путь к объекту myForm. Дело в том, что мы уже в myForm и путь к любым свойствам в вызовах функции будет начинаться с этого имени объекта. Теперь можно переписать саму функцию, чтобы она понимала, какое значение ей передается, и создать указатель:

function compute (theForm)
{
var Num = theForm.userEntry.value;
Num = eval(Num):
var Result = Num + 100:
theForm.result.value = Result;
return;
}

Как видите, создать указатель достаточно просто. Нужно только разместить его имя в скобках после имени функции. При ее вызове будет автоматически создан реальный указатель, которому будет присвоен нужный путь в терминах объектной модели. И теперь, получая доступ к объектам и значениям с помощью указателя, можете работать с ним так, как будто вы написали не одно имя переменной-указателя, а полный путь.

Работа с объектами верхних уровней

Мы еще вернемся к объектам формы. А сейчас обратимся к некоторым объектам, входящим в DOM. В частности, поговорим о window, location и чуть более подробно о document.

Объект window

Даже если вы его не знаете, вы наверняка с ним знакомы. Ну, скажем так, встречали. Мы буквально в этой же главе упоминали функцию erl ert (). Полный путь к ней выглядит следующим образом: window, alert О. Это означает, что данный метод является принадлежностью объекта wi ndow. Однако до тех пор, пока вы не собираетесь вывести окно сообщения в каком-нибудь другом окне браузера, отличном от текущего, этот полный путь вам не нужен. Вы, вероятно, помните, что alent () -выводит окно с сообщением, которое можно убрать, щелкнув на кнопке ОК. Пока окно активно, в главном окне браузера ничего не может происходить. Строка в скобках задает текст сообщения.

Как и у любого нормального объекта, у wi ndow есть свойства и методы. По большей части, свойства можно только считывать, а изменять нельзя, поскольку окно уже существует. Среди свойств есть такие как name (это то, что пишется в строке заголовка), 1 ength (число фреймов в окне), sel f (нечто типа указателя на самого себя, то есть на текущее окно) и status. Последнее можно использовать для изменения надписи в строке состояния браузера. Строка состояния обычно представляет собой краткое описание происходящего в данный момент на веб-странице. Вот пример:

<а href = "products.html" onmouseover =

"status='Пocмотреть полную линейку
продукции'" onmouseout="status=''">

Продукция </а>

У объекта window есть немало методов, позволяющих добавлять и изменять всякие рюшечки, касающиеся окна. Среди них есть уже знакомые alert() и eval (). Кстати говоря, eval () позволяет превращать любые строки в код JavaScript, а не только в числа.

При работе с window можно использовать такие методы, как, например, confirm(), Делает он все то же самое, что и alert(), только вместо одной кнопки ОК окно содержит две кнопки: ОК и Cancel (Отмена). Если пользователь щелкает на ОК, возвращается значение true, а если на крестике в верхнем правом углу или на кнопке Cancel, возвращается false. Например:

var keepGoing = confirm("Хотите продолжить?");

В то же семейство методов можно отнести prompt (), который тоже открывает диалоговое окошко, но при этом ожидает от пользователя ввода значения. Можно указать либо только текст сообщения, либо и текст сообщения, и подсказку, которая будет видна по умолчанию в поле ввода. Пример:

var numberGuess = prompt("Введите число". 5);
var emailAddress = prompt("Введите e-mail",
"[email protected]"):

Метод ореn() предназначен для открытия нового окна браузера. Можно указывать разные параметры, управляющие внешним видом окна, и даже задавать сразу URL, который будет открыт. Чтобы просто открыть окно и загрузить в него какую-нибудь веб-страницу, напишите выражение:

window.open("URL")

Существует такой метод: resizeTo(). Он позволяет автоматически масштабировать окно браузера, то есть задать его высоту и ширину в пикселах. Например, если ваш сайт лучше всего смотрится при 800 х 600, можете включить в заглавную страницу следующую строку:

<body onload="window.resizeTo(800.600)">

Наряду со всеми этими свойствами и методами объект wi ndow имеет ряд подобъек-тов, среди которых location, document и history. О первых двух будет отдельный разговор, а что касается объекта history, то пару слов о нем я хочу сказать прямо сейчас. Его можно использовать в основном для получения доступа к URL, которые пользователь недавно открывал и которые браузер хранит в памяти. Среди свойств объекта history следующие: current, previous, next. Они служат для открытия недавно посещенных страниц. Свойство length позволяет узнать, сколько адресов хранит браузер. При этом метод history.go(x) позволяет перейти на страницу с номером х. Если х положительное, то метод будет отсчитывать страницы «назад». Если вы напишете отрицательное значение х, отсчет будет вестись «вперед». Вот еще два полезных метода hi story: back 0 и forward(). Служат для перехода, соответственно, назад и вперед:

<а href="" onclick="history.back()">Haзaд</a>

Объект location

Как уже говорилось, этот объект является частью объекта wi ndow, поэтому полный путь к нему следующий: window, location.

Обычно, впрочем, текущая область действия такова,
что можно оставить только location.

У этого объекта существует немало свойств,
и все они предназначены для получения определенных частей URL текущей страницы. Например, location.href возвращает весь URL:

document.writeln("Aдрес этой страницы: " + location.href):

Все остальные свойства location возвращают какие-то отдельные части адреса. Рассмотрим полный список:

• href. Полный URL.
• protocol. Протокол (например, http:).
• hostname. Имя хоста (например, www.fakecorp.com).
• port. Номер порта, если это существенно.
• pathname. Полный путь, включая каталоги, подкаталоги и имя документа.

Эту информацию можно использовать.

Например, на каждой странице где-нибудь вуглу помещать ее реальный URL. Вспомним, как это делается:

document.writeln("Адрес этой страницы: " + location.href):

Можно, например, загрузить в браузер новую страницу таким способом:

location.href = "http://www.fakecorp.com/newpage.html"

Объект document

Это еще одно детище объекта wi ndow. Однако деточка эта весьма взрослая и самостоятельная. На самом деле при написании скриптов на JavaScript и, в частности, при разработке форм именно document оказывается наиболее часто используемым объектом. Действительно, именно здесь хранятся все объекты и элементы ваших страниц.

И уровень document не низок, не высок, а как раз очень удобен.

Хочется упомянуть в первую очередь такие свойства данного объекта:

• domain. Хранит имя домена, на котором расположен документ (например,
  www.fakecorp.com).
• url. URL текущего документа.
• referrer. Может использоваться для хранения URL того документа, на котором стояла ссылка на данный (то есть адрес страницы, с которой пользователь сюда попал).
• lastmodified. Дата внесения последних изменений.
• title. Хранит заголовок документа (тот самый, который указан в элементе<title>)
• anchors. Массив. В нем хранятся якоря документов с именами, связанными с ним.
• images. Еще один массив. Этот хранит все изображения (вернее, ссылки на них).
• forms. И еще массив. Позволяет получить доступ к разным формам страницы.

Почти все свойства говорят сами за себя. Что касается трех массивов anchors, images и forms, то доступ к ним осуществляется так же, как к массивам, которые обсуждались в главе 17. Например, чтобы отыскать URL первого изображения на странице, можно написать следующее:

alert(document.images[0].src);

А можно и изменить URL изображения, и это приведет к тому, что на странице появится ссылка на другой графический файл.

Нечто в этом духе мы еще будем обсуждать в главе 19, поскольку это считается «приемом из DHTML». А так вроде все довольно просто и понятно:

document.images[0].src = "images/new.gif"

У объекта document есть несколько методов,
с которыми вы уже знакомы. Среди них метод document.writeln(), он используется для написания одной строки текста и разметки на веб-странице. Для того же служит и метод document.write().

Разница в том, что первый автоматически вставляет специальный знак перевода каретки (который, впрочем, все равно не распознается браузером, если только текст не заключен в теги <рге>),
а второй этот знак не вставляет.

Существует возможность очистить текущую страницу и
фактически создать вручную новую. Это делается следующим образом. Сначала очищаем страницу полностью: document. open().

Затем с помощью document, write О записываем в нее все что нужно. Теперь document. close() — и новая страница готова!

Рассмотрим листинг 18.2.

Листинг 18.2. Персонализация с использованием формы

<!DOCTYPE html PUBLIC "\//W3C//DTO XHTML
1.0 Transitional//EN"
"http://www.w3.org/TR/xhtmll/DTD/xhtmll-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> Страница персонализации </title>
<script type = "text/javascript">
<!-- Прячем код
function personalizePage О
{
var userName = personal Form.myName.value:
document.open()
document. write("<html><head><title>
HoBый документ</title></head>")
document.write("<body>
<h1> Приветик. " + userName + "</h1>")
document.write("<p>ЭTa страница создана
специально для <b>тебя/b>!:-)</р>")
document.write("</body></html>")
document. close()
}
// закончили прятаться -->
</script>
</head>
<body>
<h1>Страница персонализации и авторизации</h1>
<р>Добрый день! Введите свое имя,
затем щелкните на кнопке "Дальше".
Содержимое страницы
изменится. <bг /> Обратите вникание на то,
что URL при этом не изменится!</р>
<form name="personalForm">
Введите свое имя: <input type=
"text" name="myName"><input type=" button"
name="personalButton" уа!ие=
"Дальше" onclick="personalizePage()" />
</form>
</body>
</html>

В этом примере следует обратить внимание не только на метод document. open(), но и на то, что на самом-то деле страница не изменяется. Выражение var userName = persona 1 Form. myName. value;

говорит о том, что мы находимся на соответствующем уровне областей действия, то есть нам не надо никак усложнять путь к объекту personal Form.

Если бы изменилось значение location. href), нам пришлось бы немного потрудиться, прежде чем получить доступ к тому же значению. На рисунке 18.2 демонстрируется листинг 18.2 в действии.

Рис. 18.2. Страница до (сверху) и после (снизу) запуска скрипта

JavaScript и формы HTML

В предыдущем параграфе мы рассмотрели некоторые объекты DOM, которые можно изменять и к которым можно получить доступ с помощью JavaScript. В этом разделе мы будем рассматривать одну из составляющих объекта document под названием form.

Объект form

Для начала разберемся с тем, как создать несколько форм. Дело в том, что каждая форма будет иметь свое собственное имя (для этого используется значение атрибута name элемента <form>). А значит, получить доступ к элементам формы будет несложно. Итак, сначала даем имя (name="MyForm"), потом получаем доступ к любым элементам:

var name = document.myForm.custName.value

Вы знаете, как передать в функцию значение, указатель или же вообще ничего не передать и предоставить функции
возможность прямого доступа к форме с применением объекта document.

Но вы также знаете, что у этого объекта есть свойство forms, представляющее собой массив форм, содержащихся в текущем документе. Например, если предположить, что форма myForm из предыдущего примера является первой на странице, то к ней можно получить доступ следующим образом:

var name = document.forms[0].custName.value:

Иногда бывает нужно организовать автоматический доступ к формам. Попробуй те в этом случае поступить следующим образом:

for (x=0: х<3: х=х+1) {
var formName[x] = document.forms[x] name
}

С помощью такого цикла for можно все имена форм записать в массив, тем самым организовав независимый доступ к
каждой из них (formName[x]).

Все объекты формы, независимо от того, каким образом осуществляется доступ к ним, имеют свои наборы свойств, как и документ, окно. Свойства объекта form, в частности, следующие:

• action. URL. В сущности, то же самое, что атрибут acti on элемента <form>.
• method. To же самое, что атрибут method элемента <form>.
• name. Имя формы (то же самое, что атрибут name элемента <form>).
• length. Число элементов input, textaгеа и sel ect в форме.
• target. Целевое окно или фрейм.
• elements. Массив, в котором содержатся все элементы input, textarea и select

У объекта form есть, конечно, и свои методы, среди которых reset (), submit (), очевидного предназначения.

Обработка ошибок на форме с помощью JavaScript

JavaScript и его обработчики событий идеально подходят для проверки данных, вводимых пользователями в формах. Во время набора данных скрипт может незаметно проверять корректность кодировки, числа символов и т. д. Оказывается, можно обработать практически любой элемент формы, хотя, скорее всего, вы займетесь работой над текстовыми полями и полями ввода.

Начнем с небольшого примера. В листинге 18.3 закодирована целая страница, позволяющая ее посетителю вводить данные. Скрипт осуществляет проверку правильности ввода почтового индекса.

Листинг 18.3. Проверка данных в формах с помощью JavaScript

<!DOCTYPE html PUBLIC "\//W3C//DTD XHTML
1.0 Transitional//EN" "http://www.w3.
org/TR/xhtmll/DTD/xhtmll-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"> <head>
<title> Страница персонализации </title>
<meta http-equiv="Content-Script-Type"
content="text/javascript">
<script>
<!-- Прячем код
function zipCheckO
var zipStr = custForm.zipCode.value;
if (zipStr == "") {
аlегt("Введите шестизначный индекс,
пожалуйста"); return(-1);
if (zipStr.length!= 6) {
alert("Индекс должен содержать 6 цифр!");
return(-l);
return();
function checkSend () (
var passCheck = zipCheck():
If (passCheck == -1) { return;
}
else
{
custForm.submitO:
//Закончили прятаться --> </schpt>
</head>
<body>
<h1>Пожалуйста, заполните форму:</h1>

<form action="cgi-bin/address.pl" method="post"

name="custForm"> <pre>
Имя: <input type="text" size="20" name="name">
Адрес: <input type="text" size="50" name="address">
Город: <input type="text" size="30" name="city">
Страна: <input type="text" size="30" name="state">
Индекс: <input type="text" size="6" name="zipCode"
onBlur= "zipCheck()">
E-mail: <input type="text" size="40" name="email">
«input type="button" уа!ие="0тправить" onclick =
"checkSend()">
</form>
</body>
</html>

Обработка формы начинается при возникновении события onBlur, то есть при потере фокуса поля ввода индекса, либо при нажатии клавиши Tab, либо с помощью мыши. Обработчик запускает функцию zipCheck, которая проверяет введенный почтовый индекс на корректность. Если поле осталось пустым, выдается окошко ] с напоминанием о том, что это поле следует заполнить. Это делается путем проверки значения строковой переменной:

if (zipStr = "") {

Если введено больше или меньше 6 цифр, также выдается предупреждение. На этот
раз проверяется значение свойства length. А именно:

if (zipStr.length!= 6) {.

Если пользователь сделал все правильно, продолжается нормальная работа.
Конечно, пользователь может проигнорировать предупреждение или изменить его,
но так, что оно останется некорректным. Для этого случая предусмотрен повтор
ный вызов zipCheck из функции checkSend:

var passCheck = zipCheck():

И если индекс по-прежнему остался неправильным, функция zipCheck вернет зна
чение-1, проверяемое с помощью checkSend:

if (passCheck = -1) {
return;

}

Так что если и на этот раз индекс введен неверно, то функция checkSend верне пользователя на продолжение заполнения формы. В общем, получилась много ступенчатая защита от неправильного ввода.

Если пользователь наконец набрал на клавиатуре шесть цифр, форма подтверждается:

Рис. 18.3. Если введен неправильный индекс, появляется окно с предупреждением

В действительности мы проверили индекс только частично. Проверка могла бы быть сколь угодно сложной. Например, можно запретить использование буквенных символов в этом поле. Это можно сделать, применив метод charAt() объекта String, который тщательно проверит каждую позицию и установит,
действительно ли в ней находится цифра от 0 до 9.

Итак, расширенная функция zipCheck() может выглядеть следующим образом:

function zipCheckO
var zipStr = custForm.zipCode.value:
if (zipStr == "") {
аlегt"Введите шестизначный индекс, пожалуйста");
return(-l):
if (zipStr.length!= 6) {
alert("Индекс должен содержать 6 цифр!"):
return(-l):
for (х = 0: x < 6; x++)
if ((zipStr.charAt(x) < "О") | (zipStr.charAt(x) > "9"))
{
аleft("Индекс должен состоять только из цифр!"):
return(-l);
}
return(O);
}

Итак, мы добавили еще одну проверку. Она начинается с цикла for, чтобы прог амма могла произвести необходимое количество итераций, охватив всю длину поля ввода:

for (х = 0: х < 6; х++)

Используя цикл for, мы можем последовательно перебрать все значения массива zipStr (а ведь строка представляет собой лишь особый вид массива!) с номерами от 0 до 5.

В цикле находится условное выражение if, — собственно говоря, именно оно и проверяет, являются ли символы цифровыми:

if ((zipStr.charAt(x) < "О") || (zipStr.charAt(x) > "9")) {

Знак || означает логическое «или». Все приведенное выражение переводится на человеческий язык так: «Если символ меньше чем 0 или больше чем 9».

То есть если выполняется хотя бы одно из условий, то все выражение принимает значение «истина», и появляется окошко с предупреждением:

alert("Индекс должен состоять только из цифр!"):
return(-l);

Если же выражение if принимает значение «ложь», то команды, содержащиеся внутри, пропускаются, и предполагается,
что пользователю удалось ввести все правильно.

JavaScript на клиентской машине

Одним из преимуществ JavaScript является то,
что этот язык встраивается прямо в веб-страницу и вам не нужно заботиться о CGI-скриптах.

В некоторых случаях вы с удивлением сможете обнаружить,
что вам вовсе и не нужен доступ к каталогу CGI сервера вашего поставщика услуг Интернета. Иногда просто не хочется ломать голову над написанием, отладкой и размещением CGI-скриптов. В листинге 18.4 показан пример электронной формы и ее обрабатывающего механизма (без CGI).

Листинг 18.4. Форма, обрабатываемая на стороне клиента

<!DOCTYPE html PUBLIC "\//W3C//DTD XHTML
1.0 Trans1tional//EN" "http://www.w3.org/TR/xhtmll/
DTO/xhtmll-transitional.dtd">
<html xmlns="http://www. w3.org/1999/xhtml ">
<head>
<title> Хотим знать ваша мнение!</title> <script>
<! -- Прячем код function processformO
{ var newline = "\n";
van result_str = "";
var Forml = document. forml:
result_str += Forml. first_name. value + "
" + Forml. lastjiame. value + newline: resu1t_str +=
Forml. email.value + newline: for (x = 0: x < Forml.
where. length: x++) {
if (Forml. where[x]. checked) {
result_str += Forml. where[x]. value + newline:
break:
}

if (Forml. desktop. checked) result_str +=
"Настольные компьютеры" + newline:
if (Forml. notebook. checked) result_str +=
"Портативные компьютеры" + newline: if (Forml. peripherals.
checked) result_str += "Периферия" + newline: if (Forml. software.
checked) result_str +=
"Программное обеспечение" + newline:
document. form2. results. value = result_str; return:
</script>

</head>
<body>
<h1>Киберпространство. Обзоры, статьи. размышления</h1>
<form name = "form1" id = "forml">
<table cellpadding="5">
<tr>
<td>
Имя: </td><td> <input type="text" name=
"first_name" size="40" maxlength="40"
</tr>
<tr>
<td>

Фамилия: </td><td><input type="text" name=
"last_name" size="40" maxlength="40" />
</td>
</tr>
<tr>
<td>E-mail: </td><td><input type=
"text" name="email" size="40" maxlength="40" />
</td>
</tr>
</table>
<p>
<b>Откуда вы узнали об этом сайте?</b></р>
<input type="radio" name="where" уаluе=
"Интернет" checked="checked" /поисковая программа

в Интернете или Интернет-ссылка<bг />
<input type="radio" name="where" vаluе=
"Реклама" />Реклама по радио или телевидению
<bг />
«input type="radio" name="where" vаluе=
"Упоминание в прессе" />Из газеты<bг />
<input type="radio" name="where" value=
"Дpyroe" />Другое<bг />
</p>
<b>0 какой продукции вы хотели бы узнать подробнее?
(Включите все нужные флажки)</b><bг />
«input type="checkbox" name="desktop" />
Настольные компьютеры
<input type="checkbox" name=" notebook" />
Портативные компьютеры
<input type="checkbox" name="peripherals" />
Периферия
<input type="checkbox" name="software" />
программное обеспечение
</p>
«button name="submit" type="button" onclick=
"processform()">
<span style="font-family: Arial.
Helveticaifont-variant: small-caps: font-size:
12рt">Подтвердить данные</sраn>
</button>
<button name="reset" type="button">
<span style=" font -family: Arial. Helvetica:
font-variant: small-caps: font-size:
12рt>Очистить форму</sрап>
</button>
</form>
<hr />
<form name="form2" id = "form2" action=
"mailto:[email protected]">
<р>Тщательно проверьте свои записи.
Если все верно, можете ввести комментарии в текстовом
поле, расположенном чуть ниже.
Чтобы отправить форму, щелкните на кнопке "Отправить". </р>
<textarea name=" results" rows="10" cols="40">

Текстовое поле для ввода комментариев и замечаний
</textarea>
«button name=" submit" type="submit">
«span sty! e-"font-f ami ly: Arial.
Helvetica: font-variant: small-caps; font-size:
12рt>Отправить</sрап>
</button>
</form>
</body>
</html>

Этот скрипт с методической точки зрения очень полезен для изучения.

Скрипт берет значения, введенные пользователем в первой форме, и помещает их в текстовом виде во вторую форму. Затем можно редактировать данные, например добавлять комментарии (рис. 18.4). Наконец, при нажатии на кнопку SEND IT! (Отправить!) вся накопленная информация отправляется по электронной почте.

Рис. 18.4. Пользователь может отредактировать данные перед отправкой

ПРИМЕЧАНИЕ

Хотя данные придут в формате «post» (глава 15), однако обрабатывать придется всего лишь одно поле, благодаря предварительному анализу, производящемуся в скрипте.

Этот пример показывает, как важно получать корректные значения флажков и переключателей. В листинге 18.4 демонстрируются два способа, которыми это можно сделать. Для начала обратимся к переключателям. Нам нужно опреде лить, какое положение селективной кнопки выбрано, тогда мы сможем работать с соответствующими данными.

Значения переключателей хранятся в специальных массивах, а следовательно, мы можем получить доступ к ним с помощью цикла:

for (х = 0: х < Forml. where. length; x++)
{ if (Forml. where[x]. checked)
{ result_str += Forml. where[x].value + newline: break:
}

В свою очередь, все переключатели тоже хранятся в массиве объектов, имена кото рых определяются при помощи атрибута name, указываемого при их создании. В на шем примере name="where".

С каждым экземпляром where можно использовать свойство checked для того, чтобы определить, в каком положении находится реключатель.

Когда мы найдем тот объект where, свойство checked которого равно true, это будет означать, что именно его value нам и нужно.

Поэтому фактически приведенный ранее цикл занимается определением положения переключателя.

Когда он его находит, цикл for завершается (командой break), а со значением производятся определенные действия. В данном случае оно добавляется к строке result_str.

Второе, что показано в этом примере, — это работа с наборами флажков. И здесь тоже нужно проверять состояние свойства checked.

Но поскольку каждый флажок имеет свое собственное имя (name), то нет необходимости хранить их в каком-то массиве или использовать цикл для их перебора. К каждому флажку требуется индивидуальный подход, у каждого из них лично нужно выяснить, является ли он checked. Если это так, то используется его значение:

if (Forml.desktop.checked) result_str +=
"Настольные компьютеры" + newline:
if(Forml.notebook.checked) result_str +=
"Портативные компьютеры" + newline;
if(Forml,peripherals.checked) result_str +=
"Периферия" + newline; if(Forml.software.checked)
result_str += "Программное обеспечение" + newline;

Если ([шажок установлен, то его значение добавляется к result_str. В противном случае скрипт переходит к следующему условному оператору.

Переадресация, фреймы и JavaScript

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

Переадресация браузера

Бывает интересно и полезно узнать, какой браузер использует пользователь, чтобы автоматически отправить его на ту или иную страницу. Иногда важно не только узнать название программы, но и определить, имеет ли она поддержку JavaScript и в соответствии с этим принять решение о переадресации на подходящий URL.

При переадресации браузера используется объект,
который мы до сих пор не упоминали. Он называется navigator.

С помощью его свойств можно узнать, с какой версией браузера вы имеете дело.

Например, в переменной navigator.appName xpaнится полное имя приложения, объект navigator.userAgent сообщит вам общую информацию об уровне совместимости данного ПО (например, Mozi 11 а/4.0 может на поверку оказаться любой Netscape-совместимой программой уровня 4.0).

Дата добавления: 2014-12-29