2.5 Запрос пользователю и переменные
Научившись добавлять события к HTML, мы возвращаемся к полным скриптам, поэтому нам снова понадобится стандартный формат от <SCRIPT type="text/javascript> дo </SCRIPT>. Вот что мы собираемся сделать: мы спросим у пользователя, как его зовут, и присвоим этому имени переменную. Как только переменная будет присвоена, мы сможем ввести ее в строку document.write, которая напечатает это имя на странице. Вот скрипт:
<SCRIPT type="text/javascript">
/* Скрипт предназначен для того, чтобы получить от пользователя информацию и поместить ее на страницу */ var user_name = prompt ("Напишите свое имя","Здесь"); document.write("Привет, " + user_name + "! Милости просим!");
</SCRIPT>
Создание переменной
Переменные имеют первостепенное значение в JavaScript. Вам необходимо научиться создавать их. В двух словах: вы назначаете имя, состоящее из одного слова, функции JavaScript. Помните, как мы помещали дату на страницу с помощью метода getDate()? В строке document.write мы написали метод getDate() целиком. Сделать это один раз было не так уж трудно. Но что если нужно было бы написать это десять раз на одной и той же странице? Писать и писать одно и то же порядком надоедает. Потому мы и вводим переменную, которая должна представлять окончательный результат метода. Возьмем, к примеру, переменную d. Тогда нам нужно будет только однажды написать getDate() и назначить методу переменную d. И на протяжении всего оставшегося скрипта будем просто писать d там, где нужно поставить дату. Вернемся к примеру.
Вот строка из скрипта, которая назначает переменную:
var user_name = prompt ("Напишите свое имя","Здесь")
Переменная была создана по следующей схеме:
-
var (от variable, переменная) объявляет, что следующим словом будет имя переменной.
-
user_name (имя пользователя) — имя переменной. Ее можно было назвать и N, просто удобнее так называть переменные, чтобы легко было вспомнить, о чем идет речь.
-
Помните, что регистр имеет значение для JavaScript, следовательно, если вы назвали переменную Dog, то буква D каждый раз должна быть заглавной, иначе браузер посчитает их за два разных слова.
-
Здесь нет никаких кавычек, просто ставьте одно слово за другим, как показано выше.
-
Знак равенства = указывает на то, что переменная будет равна результату следующей команды.
-
В нашем случае переменная будет представлять результат, полученный с помощью окна запроса.
Команда 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 вводит результат запроса. Никаких кавычек - эти слова не нужны нам на странице.
-
Еще плюс.
-
"! Милости просим!" завершает текст.
-
Точка с запятой.
В примере 2.6 приведен код страницы, которая просит ввести ваше имя и использует его на странице. Обратите внимание на заголовок WEB-страницы, там тоже ваше имя и сегодняшнее число (рис.2.6).
|
Пример 2.6. Запрос пользователю |
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <SCRIPT type="text/javascript"> var name = prompt("Напишите свое имя, пожалуйста","") var d = new Date(); var y = d.getFullYear(); var da = d.getDate(); var m = d.getMonth() + 1; var t = da + '/' + m + '/' + y; document.write("<TITLE>") document.write("Привет, "+name+ ". Сегодня " +t+ ". Спасибо, что зашли"); document.write("</TITLE>") </SCRIPT> <TITLE></TITLE> </HEAD> <BODY> <P>Привет, <B><SCRIPT>document.write(name)</SCRIPT></B>. Мы вас ждали. <P>Как видите, <B><SCRIPT>document.write(name)</SCRIPT></B>, страница называет вас по имени. Но, <B><SCRIPT>document.write(name)</SCRIPT></B>, есть и еще кое- что. Посмотрите наверх, если вы этого еще не сделали. Там тоже ваше имя и сегодняшнее число. </BODY> </HTML>
|
Заголовок создается с помощью команд <title>, написанных в трех строках document.write. Так проще всего отделить команды html от кода JavaScript. Первая строка из трех начинает команду <title>. Вторая создает текстовую строку. Обратите внимание, что видимый текст помещен в двойные кавычки и отделен от команд, отвечающих за дату, знаками плюс. Не забудьте о пробелах. Третья строка document.write завершает команду <title>. Cкрипт помещается перед командой <title>. Имя было вставлено в текст с помощью команды <SCRIPT>document.write(name)</SCRIPT>.
