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

Концепция

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

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

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

Сценарий

<SCRIPT type="text/javascript">

/* Этот сценарий предназначен для получения информации 
от пользователя и вывода ее на странице */

var user_name = prompt ("Введите свое имя в поле ниже","Здесь");
document.write("Привет, " + user_name + "! 
   Добро пожаловать на мою страницу!");

</SCRIPT>

Текст в скобках должен располагаться на одной строке.

Результат работы сценария

Привет, OL!  Добро пожаловать на мою страницу!

Разбор сценария

Что такое /* */?

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

Создание переменной

Переменные имеют первостепенное значение в JavaScript. Необходимо знать, как их создавать. В двух словах: для вывода функции JavaScript задается имя, состоящее из одного слова. Вспомните, как мы помещали дату на страницу с помощью метода getDate()? В строке document.write мы написали метод getDate() целиком. Сделать это один раз было не так уж трудно. Но что, если нужно было бы написать это десять раз на одной и той же странице? Писать одно и то же порядком надоедает. Потому мы задаем переменную, которая должна представлять окончательный результат метода. Возьмем, к примеру, переменную d. Тогда нужно будет только один раз написать getDate() и назначить результату метода переменную d. И на протяжении всего оставшегося сценария будем просто писать d там, где нужно поставить дату. Вернемся к примеру.

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

var user_name = prompt ("Введите свое имя в поле ниже","Здесь")

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

Команда Prompt

В данном примере используется новая команда prompt (запрос). Этот метод выводит окно с сообщением и полем ввода. Вот формат запроса:

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

Можно видеть, что var и присваиваемое имя переменной включены в формат. Иначе получился бы запрос, но ничего нельзя было сделать с данными, которые вводит пользователь.

На всякий случай ...

Вернемся к разбору

Теперь, зная все составляющие блоки, вернемся снова к сценарию:

var user_name = prompt ("Введите свое имя в поле ниже","Здесь"); 
document.write("Привет, " + user_name + 
"!Добро пожаловать на мою страницу!");

Вот весь процесс.

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

Задание

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

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

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

Задание 6. Самостоятельный разбор сценария

Вот сценарий. Разберите его на составляющие элементы, как мы делали в ходе урока.

<SCRIPT type="text/javascript">

var name = 
  prompt("Пожалуйста, напишите свое имя","")

var d = new Date(); 
                
var y =  d.getFullYear();  
var m = d.getMonth() + 1;  
var d = d.getDate();

var t =  m + '/' + d + '/' + y + ' ';

document.write("<TITLE>")
document.write
("Привет "+name+ ". Сегодня " 
+t+ ". Спасибо, что зашли.");
document.write("</TITLE>")

</SCRIPT>

Разбор задания