Урок 6
Запрос пользователю и переменные

Концепция

В этом уроке у меня две концепции. Одна только для тех случаев, когда вы решите запросить у пользователя информацию. Вторая, создание переменных, останется с вами на всю вашу жизнь в JavaScript.
Между прочим, научившись добавлять события к HTML, мы возвращаемся к полным скриптам, поэтому нам снова понадобится стандартный формат от <SCRIPT LANGUAGE="javascript"> дo </SCRIPT>. Вот что мы собираемся сделать: мы спросим у пользователя, как его зовут, и присвоим этому имени переменную. Как только переменная будет присвоена, мы сможем ввести ее в строку document.write, которая напечатает это имя на странице.

Скажу вам наперед, сегодняшний урок довольно длинный, так как мне хотелось немного задержаться и повторить то, что мы уже изучили.

Скрипт

<SCRIPT LANGUAGE="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 вводит результат запроса. Никаких кавычек — эти слова не нужны нам на странице.
• Еще плюс.
• "! Милости просим!" завершает текст.
• Точка с запятой.

Пожалуйста, постарайтесь хорошенько понять концепцию переменных. В этом языке они используются постоянно. Без них не обойтись.

Ваше задание

...повтор пройденного.

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

Здесь пример JavaScript