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

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

Назад | Содержание | Вперед

Джо Бернс
Введение
Сообщения об ошибках
Дата и время
Команда onMouseOver
Еще обработчики событий
Запрос пользователю
Концепция свойств
Иерархия объектов
Создание функции
onUnload и onMouseOut
Новые окна
Новые окна (прод.)
Метод confirm
Математ. переменные
Смена картинки
Смена через функцию
Функция внутри формы
Форма и свойство value
Данные в функцию
Случайные числа
Введение в if
If и Else
Случайный выбор
Введение в FOR
Введение в WHILE
Введение в массивы
Слайд-шоу
Анимация
Подтверждение ввода