Запрос пользователю. Команда Prompt. Концепция свойств

Допустим мы решили запросить у пользователя информацию. Давйте спросим у него имя и присвоим этому имени переменную. Как только переменная будет присвоена, мы сможем ввести ее в строку document.write(), которая напечатает это имя на странице.

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Запрос пользователю</title>
</head>

<body>
<script language="JavaScript">
/* Скрипт предназначен для того, чтобы получить
от пользователя информацию и поместить ее на страницу */

var user_name = prompt ("Напишите свое имя","Здесь");
document.write("Привет, " + user_name + "! Милости просим!");
</script>

</body>
</html>

В окне браузера это будет выглядеть ТАК.

А теперь разберем скрипт.

У нас появилась еще одна новая команда /* */. Она означает комментарий внутри скрипта. Если помните, нам уже встречалась двойная дробь //, отделяющую текст вашего комментария от скрипта. Это то же самое, но лучше. Двойную дробь необходимо ставить в начале каждой новой строки. Эти же команды годятся для пространных комментариев. Нужно поставить /* в начале и */ в конце, и все, что окажется между этими знаками, останется комментарием и не войдет в скрипт.

Вот строка из скрипта, которая назначает переменную:

var user_name = prompt ("Напишите свое имя","Здесь")

Переменная была создана по следующей схеме:

var (от variable, переменная) объявляет, что следующим словом будет имя переменной.
user_name (имя пользователя) — имя переменной. Оно необязательно должно быть таким длинным. Ее можно было бы назвать буквой В, или каким-нибуть другим именем. Просто удобнее так называть переменные, чтобы легко было вспомнить, о чем идет речь.
Помните, что регистр имеет значение для JavaScript, следовательно, если вы назвали переменную Вох, то буква В каждый раз должна быть заглавной, иначе браузер посчитает их за два разных слова.
Здесь нет никаких кавычек, просто ставьте одно слово за другим, как показано выше.
Знак равенства = указывает на то, что переменная будет равна результату следующей команды.
В нашем случае переменная будет представлять результат, полученный с помощью окна запроса.

Команда Prompt

В данном примере используется новая команда prompt (запрос). Это метод, вызывающий окно, которое вы видели, заходя на страницу. Если хотите снова его увидеть, перезагрузите страницу. Вот формат запроса:

var variable_name = prompt("Текст в окне","Текст в строке ввода")

В окне веб-браузера это будет выглядеть ТАК.

Вы увидите, что имя переменной включенo в схему скрипта, иначе вы получили бы запрос, но полученные им данные никуда бы не пошли.

И еще

Чтобы строка ввода оставалась чистой, ничего не пишите между второй парой кавычек.
Если вы не укажете в скобках второй пары кавычек, в строке появится слово undefined.
Если вы написали что-либо в строке ввода и пользователь выберет ОК, ничего не меняя, на странице появится то, что вы написали.
Если в строке ввода ничего нет и пользователь выберет OK, ничего не вписав, на странице появится слово null.

Теперь, когда вы знаете все составляющие, перейдем к основной части:

var user_name = prompt ("Напишите свое имя","Здесь");
document.write("Привет, " + user_name + "! Милости просим!");

Имя переменной user_name присвоено результату запроса.
prompt просит пользователя написать свое имя.
В строке ввода читаем: "Здесь."
Точка с запятой в конце строки.
document.write вызывает текст "Привет, ".
Знак плюс + отмечает, что все элементы идут друг за другом.
user_name вводит результат запроса. Никаких кавычек — эти слова не нужны нам на странице.
Еще плюс.
"! Милости просим!" завершает текст.
Точка с запятой.

Мы уже познакомились со свойством объекта Document. А теперь продолжим знакомство дальше.

Концепция свойств

Нам известно, что существуют объекты, например, document, и методы, например, write, которые воздействуют на объекты. Мы уже имели дело с переменными. Теперь рассмотрим концепцию свойств. Мы уже слегка касались этой темы. Свойства представляют собой часть или качество объекта. Мы работали со свойством документа bgColor.

Ниже вы увидите множество скриптов, но все они составлены по одной схеме: создается переменная для каждой команды объект.свойство, затем переменные помещаются в document.write(). Внимание: 1) заголовки жирным шрифтом не являются частью самих скриптов; 2) текст в скобках после document.write() должен располагаться на одной строке.

Свойства объекта navigator (браузер)

<SCRIPT LANGUAGE="javascript">
var an = navigator.appName;
var av = navigator.appVersion;
var acn = navigator.appCodeName;
var ua = navigator.userAgent;
document.write("Вы пользуетесь <B>" +an+ "</B>,
версия " +av+ ".
<BR>Кодовое название " +acn+ ", заголовок "
+ua+ "." );
</SCRIPT>

Свойства объекта document

<SCRIPT LANGUAGE="javascript">
var bgc = document.bgColor;
var fgc = document.fgColor;
var lc = document.linkColor;
var al = document.alinkColor;
var vlc = document.vlinkColor;
var url = document.location;
var ref = document.referrer;
var t = document.title;
var lm = document.lastModified;
document.write("Цвет фона этой страницы <B>"
+bgc+ "</B>.")
document.write("<BR>Цвет текста этой страницы <B>" +fgc+ "</B>.")
document.write("<BR>Цвет ссылок этой страницы <B>" +lc+ "</B>.")
document.write("<BR>Цвет активной ссылки этой страницы
<B>" +al+ "</B>.")
document.write("<BR>Цвет посещенной ссылки этой страницы
<B>" +vlc+ "</B>.")
document.write("<BR>URL этой страницы <B>" +url+ "</B>.")
document.write("<BR>До этого вы были на странице <B>" +
ref+ "</B>.")
document.write("<BR>Заголовок этой страницы <B>" +t+ "</B>.")
document.write("<BR>Последние изменения внесены: <B>"
+lm+ "</B>.")
</SCRIPT>

Свойства объекта history

<SCRIPT LANGUAGE="javascript">
var h = history.length;
document.write("До этой страницы вы посетили" +h+ " страниц.")
</SCRIPT>

Свойства объекта location (адрес)

<SCRIPT LANGUAGE="javascript">
var hst = location.host
document.write("Страница находится на <B>" + hst +
"</B>." )
</SCRIPT>

<SCRIPT LANGUAGE="javascript">
var hstn = location.hostname
document.write("Страница находится на <B>" + hstn +
"</B>." )
</SCRIPT>

Свойства объекта navigator

<SCRIPT LANGUAGE="javascript">
var an = navigator.appName;
var av = navigator.appVersion;
var acn = navigator.appCodeName;
var ua = navigator.userAgent;

document.write("Вы пользуетесь <B>" +an+ "</B>,
версия " +av+ ".<BR>Кодовое название " +acn+ ",
заголовок " +ua+ "." );
</SCRIPT>

Объект navigator имеет четыре свойства. Обратите внимание на заглавные буквы!

appName сообщает название браузера, например, Netscape или Explorer.
appVersion сообщает версию браузера и платформу, на которой он работает.
appCodeName сообщает кодовое имя, данное браузеру, например, Netscape называет свой браузер Mozilla.
userAgent сообщает заголовок протокола, используемого браузером во время работы с серверами.

Иногда важно знать версию браузера. Чуть позже мы изучим команды If (если). Зная браузер пользователя, можно дать команду: "Если браузер такой-то, сделать то-то."

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

bgColor сообщает цвет фона в шестизначном коде.
fgColor сообщает цвет текста в шестизначном коде.
linkColor сообщает цвет ссылки.
alinkColor сообщает цвет активной ссылки.
vlinkColor сообщает цвет посещенной ссылки.
location сообщает URL страницы.
referrer сообщает, с какой страницы пришел пользователь. Если информация недоступна, скрипт оставляет пустое место.
title сообщает заголовок документа между командами TITLE.
lastModified сообщает дату, когда были внесены последние изменения в страницу (на самом деле дату, когда страница была загружена на сервер или сохранена на жестком диске).
не показаны: cookie, anchors, forms, links.

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

Свойства объекта history

<SCRIPT LANGUAGE="javascript">
var h = history.length;
document.write("До этого вы посетили " +h+ " страниц.")
</SCRIPT>

Это очень популярный объект. Многим хочется иметь возможность вернуть пользователя на посещенные им страницы, то есть, воспроизвести кнопки "Вперед" и "Назад" на панели браузера. Объект history это позволяет.

Объектом является журнал посещений history. Это список страниц, посещенных вашим браузером.
Свойство length (протяженность). Оно тоже популярно. Позже вы узнаете, как можно использовать его с другими командами. Указывая это свойство, вы просите скрипт просто сообщить количество страниц в папке "history".

Существует метод go() (пойти), который позволяет передвигаться по history.length.

Свойства объекта location

<SCRIPT LANGUAGE="javascript">
var hst = location.host
document.write("Страница находится на <B>" + hst + "</B>.")
</SCRIPT>

<SCRIPT LANGUAGE="javascript">
var hstn = location.hostname
document.write("Страницанаходится на <B>" + hstn + "</B>.")
</SCRIPT>

Здесь объектом является location. Это URL на языке JavaScript, адрес страницы. Перед вами два свойства объекта location, host, и hostname. Команды выполняют одну и ту же задачу, сообщают URL либо в текстовом формате, либо номером IP, в зависимости от сервера. Но...

location.host сообщает URL плюс "порт", к которому прикреплен пользователь.
location.hostname сообщает только URL.

Если вы получаете одинаковый результат от обеих команд, значит, ваш сервер не прикрепил вас к специальному порту. Говоря техническим языком, свойство "порта" — ноль.
Кстати, эти две команды не работают, если просматривать страницу с жесткого диска. Результат может быть только в том случае, если она размещается на сервере.

Мы уверенно продвигаемся вперед в изучении JavaScript. Пора остановиться, сделать небольшую паузу и подвести итоги пройденного. Теперь мы знаем, что такое объекты, какими свойствами они обладают, что такое методы и события, а также познакомились с переменными и функциями.

Для закрепления пройденного материала предлагается решить следующую задачу:

Используя переменные, необходимо создать два запроса (prompt) пользователю. Первый попросит пользователя ввести свое имя, второй — отчество.
Используя метод alert вызвать окно предупреждения с текстом:
"Привет имя отчество! Вы зашли на мою страницу. Спасибо за проявленный интерес."

Пишем скрипт.

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Использум переменные</title>
</head>

<body>
<script language="JavaScript">
var user_name = prompt ("Введите свое имя ", "");
var rec_name = prompt ("Введите свое отчество ", "");
var txt=('! Вы зашли на мою страницу.');
alert('Привет '+ user_name + rec_name + txt +' Спасибо за проявленный интерес.');

</script>

</body>
</html>

Надеюсь нет необходимость расшифровывать написанное.

В окне веб-браузера это будет выглядеть ТАК.

На экране появится первое диалоговое окно Запрос пользователю.

После заполнения строки ввода нажимаем ОК, и перед нами откроется следующее окно.

заполняем строку ввода и нажимаем ОК.

Перед нами откроется окно предупреждения.

Теперь сделаем тоже самое но с использование функции и команды onLoad.

Пишем скрипт.

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Используем функцию</title>

<script language="JavaScript">
function bababara(){
var user_name = prompt ("Введите свое имя ", " ");
var rec_name = prompt ("Введите свое отчество ", " ");
var txt=('! Вы зашли на мою страницу.');
alert('Привет '+ user_name + rec_name + txt +' Спасибо за проявленный интерес.');

}
</script>

</head>

</body>
</html>

Здесь мы задали функции произвольное имя bababara(), а команду onLoad разместили в строке <body onLoad = "bababara()">. Почему это сделано подробно рассмотрено ранее.

В окне веб-браузера это будет выглядеть ТАК.

Как видите картинка не изменилась.