«Единственный способ творить великие дела – это любить то, что ты делаешь»
JavaScript


Игра на «Морской Бой» на JavaScript: Простая Игра и Игра для Двоих


Здесь будут рассмотрены простые способы взаимодействия между JavaScript и пользователем, который находится на сайте.

Здесь вы узнаете о методах alert, confirm и prompt. Каждый из них вызывает модальное окно, но все они отличны и используются в различных ситуациях.

Далее рассмотрим отдельно каждый из методов, особенности синтаксиса и работы метода prompt и общую особенность методов alert, confirm и prompt.



Метод alert - Окно предупреждение

1-ый способ взаимодействия JavaScript с пользователем - это метод alert.

Метод alert вызывает модальное окно с указанным текстом. Это окно встроено в браузер: мы не можем изменить его стиль.

Метод/команда alert используется для предупреждения пользователя о чем-то важном. Например, чтобы он не покидал страницу, иначе, введенные им данные не будут сохранены.

Пример 1.1

alert('Hello');

Метод confirm - Да или Нет

2-ой способ взаимодействия JavaScript с пользователем - это метод confirm.

Метод confirm вызывает модальное окно с указанным текстом и с кнопками ОК и Отмена.

Метод/команда confirm используется для того, чтобы получить от пользователя ответ ДА или НЕТ. В зависимости от ответа команда confirm возвращает булевы значения true или false.

Пример 1.2

const result = confirm('Are you here?');

console.log(result);

Метод prompt - Поле для ввода - Синтаксис

3-ий способ взаимодействия с пользователем - метод prompt.

Метод prompt вызывает модальное окно с указанным текстом, полем для ввода данных (текст, числа или оно уже может содержать информацию, которую можно менять) и с кнопками ОК и Отмена.

Метод/команда prompt используется если от пользователя нужно получить конкретный ответ, который он сможет ввести в поле для ввода.

Здесь нужно отметить два важных момента.

1. Правильный синтаксис при использовании метода prompt таков:

Пример 1.3

const answer = prompt("Вам есть 18 лет?", "");

console.log(answer);

Здесь речь шла о том, что метод prompt может содержать один или два параметра. Первый параметр – это текст (утверждение или вопрос) отображаемый в модальном окне. Второй параметр - это значение, которое по умолчанию располагается в поле для ввода. Второй параметр метода prompt не является обязательным, но...

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

2. Чтобы ни ввел пользователь в поле для ввода: число или текст, в любом случае метод prompt возвращает строку. То есть в переменной answer в любом случае будет тип данных строка.

Проверим это при помощи оператора typeof.

Пример 1.4

const answer = prompt("Вам есть 18 лет?", "");

console.log(typeof(answer));

Если в поле для ввода ввести строку или число, то результат будет один и тот же - string. Тип данных строка.

Следует запомнить, что вся информация, приходящая от пользователя - это всегда строка.

Метод prompt - Конвертация строк в числа

Итак, теперь мы знаем, что метод prompt всегда возвращает строку.

Но существуют способы обхода этого правила: способы конвертации строк в числа. Подробно об этом будет говориться в дальнейшем. Сейчас рассмотрим один из способов - использование знака плюс +.

Если в примере 1.4 перед методом prompt поставить знак +, то будет происходить автоматическая конвертация строки в числовой тип данных.

Пример 1.5

const answer = +prompt("Вам есть 18 лет?", "");

console.log(typeof(answer));

Рассмотренный пример является одним из случаев динамической типизации.

Метод prompt - Занесение данных в массив

Приведем еще один пример того, как может использоваться метод prompt - для занесения данных в массив.


const answers = [];

answers[0] = prompt('Как Ваше имя?', '');
answers[1] = prompt('Как Ваша фамилия?', '');
answers[2] = prompt('Сколько Вам лет?', '');

document.write(answers);

Как работает этот код?

  • Сначала создается пустой массив answers.

  • Здесь мы говорили о том, как происходит доступ к элементам массива?

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

    В данном случае - это данные, которые возвращает метод prompt. Три вопроса будут заданы пользователю и три ответа будут по порядку заноситься в массив.

  • В этом примере мы выводим информацию не в консоль, а непосредственно на страницу при помощи метода write объекта document.

    На практике этот способ вывода данных на веб-страницу практически не используется (потому что эта команда заменяет все содержимое страницы на то, что выводит на экран). Но знать о нем нужно.

Особенность методов alert, confirm и prompt

У методов alert, confirm и prompt есть одна особенность.

Если запустить код с этими методами в редакторе Visual Studio Code то мы увидим подобное сообщение об ошибке: prompt is not defined. Почему так происходит?

В начале статьи, когда речь шла о методе alert, было сказано, что вызываемое им модальное окно - это окно, которое встроено в браузер. И редактору Visual Studio Code о существовании этого окна ничего не известно. Тоже самое относится и к методам confirm и prompt.

То есть существуют вещи, относящиеся исключительно к браузеру (кроме методов alert, confirm и prompt - это объекты documetn, window и др.), но с помощью языка JavaScript мы можем с ними взаимодействовать. Тестировать это можно только в браузере.

Итак, в этой статье Вы узнали о том, как происходит взаимодействие между JavaScript и пользователем на самом простом уровне. И увидели, что мы можем получать данные от пользователя и как-то их использовать.



Читайте также...



Отзывы и комментарии:

Комментариев нет...

Оставить отзыв:

Ваше Имя:

Текст комментария:

Ответьте на вопрос:

Сколько дней в Високосном году?


Рунет - Часть 1
Помощь сайту
Yandex-деньги/Ю-Money
410011236419322
Перевод на карту СБ
4276 1300 1671 5819
WebMoney
R711879515665 Z861169301432

Тематические публикации
Популярные заметки
Последние заметки