Урок 5. Взаимодействие с браузером

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

Пишем :)

Это наше загаданное число var number = 155;
Мы должны попросить ввести число которое собираемся угадывать. В js есть несколько простых команд для взаимодействия с браузером. Перечислим их:

  • alert
  • prompt

Команда alert выводит нам на экран сообщение с указанным текстом. alert('текст'); Давайте выведем на экран загаданное число.

Ниже полный текст программы. Далее я буду писать только то что находится внутри тега <script></script>

<html>
<head>
<title>Урок 5</title>
<script>
        var number = 155;
        alert('Загаданное число='+number);
</script>

</head>
<body> 
На этой странице выполняется программа для угадывания числа.
</body>
</html>

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

Мы будем просить ввести число, и программа будет сообщать угадано число или нет.

Команда prompt предназначена для ввода чисел или строк. После выполнения команды, будет получен результат ввода в браузере. И мы выведем на экран что же за число было введено.

var number = 115;
var result = prompt('Какое число загадано?');
alert('Вы ввели число '+result);

Что если пользователь страницы ничего не ввел, а просто нажал кнопку отмена? Вот тут мы должны проверить наш результат на корректность.

При нажатии на кнопку отмена, команда prompt возвращает нам null. Такой тип мы не проходили, этот тип очень похож на undefined, но обозначает что в результате операции что-то пошло не так, и мы должны знать об этом.

Проверяем не нажата ли была отмена.

if(result == null) alert('Вы нажали кнопку отмена');

При нажатии на кнопку Ок, если ничего не введено, команда prompt возвращает нам пустую строку ''.

Остается еще один случай. Если ввели не число. Мы проигнорируем этот случай, потому что в результате проверки числа 155 и слова, например, 'сто' окажется что они не равны. Это один из самых удобных механизмов в языке Javascript - преобразование типов. При сравнении числа 155 и слова 'сто', javascript преобразует наше число 155 в строку '155' и сравнит две строки между собой '155' и '100'

Итак сделаем проверку: угадали число или не угадали.

if (number == result) alert('Поздравляем, Вы угадали число');
else alert('Число не угадали, но вы держитесь');

Что мы тут видим? Новое слово else которое ранее не встречалось. Это слово используется вместе с оператором if в случае когда необходимо что-то сделать, если наше условие не верно.

По русски эта проверка звучит так:

Если загаданное число number равно введенному числу result, то выводим сообщение 'Поздравляем, Вы угадали число'
Иначе выводим сообщение 'Число не угадали, но вы держитесь'

Итак вся программа полностью.

var number = 115;
var result = prompt('Какое число загадано?');

if(result == null) alert('Вы нажали кнопку отмена');

alert('Вы ввели число '+result);

if (number == result) alert('Поздравляем, Вы угадали число');
else alert('Число не угадали, но вы держитесь');

Попробуйте выполнять программу с разными сценариями, ввести правильный ответ, или неправильный, или отменить и т.д. Чтобы выполнить программу снова после того как выполнение закончится - нажмите в браузере F5 - страница будет обновлена и программа запустится заново.

Домашнее задание:
Сделайте так, чтобы программа сообщала больше введенное число или меньше загаданного.