В этом уроке мы разберемся, как выводить диалоговые окна, позволяющие выводить короткие сообщения. Если вы пишете программу на JavaScript, то можете воспользоваться тремя стандартными методами для ввода и вывода данных: alert(), prompt() и confirm(). Каждое из этих диалоговых окон является синхронным и модальным, то есть выполнение кода приостанавливается на время показа такого окна и возобновляется после его закрытия.

Метод alert() позволяет выводить диалоговое окно с заданным сообщением и кнопкой OK. Синтаксис соответствующего выражения имеет следующий вид:

alert('сообщение');

Диалоговые окна оповещений обычно применяют, если нужно уведомить пользователя о чем-то, что он не контролирует, например об ошибке. В простейшем случае текст предупреждения, заключенный в двойные или одинарные кавычки, вводится внутри круглых скобок. Диалоговое окно, выведенное на экран методом alert(), можно убрать, щелкнув на кнопке OK. До тех пор пока вы не сделаете этого, переход к ранее открытым окнам невозможен. Методу alert() передается только одна строка — отображаемая. Чтобы отобразить многострочное сообщение, разделяйте строки символом \n:

Выполнить код »

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

Примечание: Окна, обладающие свойством останавливать все последующие действия пользователя и программ, называются модальными.

На заметку: JavaScript-программисты часто вставляют вызов метода alert() в программный код с целью диагностики возникающих проблем.

Метод confirm() позволяет вывести диалоговое окно с сообщением и двумя кнопками — OK и Cancel (Отмена), благодаря чему пользователь может подтвердить или отменить некоторое действие. В отличие от метода alert() этот метод возвращает логическую величину, значение которой зависит от того, на какой из двух кнопок щелкнул пользователь. Чтобы можно было определить, какую кнопку выбрал пользователь, метод confirm() возвращает true, если был щелчок на кнопке OK, и false, если он щелкнул на кнопке Cancel (Отмена) или закрыл диалоговое окно щелчком на системной кнопке закрытия окна — X.

Синтаксис применения метода confirm() имеет следующий вид:

var result = confirm('сообщение');

result — это логическое значение (true или false), указывающее, было ли выбрано OK или Cancel (Отмена).

В следующем примере метод confirm() выводит сообщение и ожидает, пока пользователь подтвердит или отменит некоторую операцию, щелкнув на одной из кнопок. Типичный код вызова этого диалогового окна выглядит так:

Выполнить код »

В этом примере оператор if («если») получает условие (confirm("Вы уверены?")). Он вычисляет его, и если результат – true (пользователь щелкает на кнопке OK), то выполняет команду и выводит сообщение: "Я очень рад, что Вы уверены!".
Блок else («иначе») выполняется если пользователь выбирает кнопку Cancel. При этом выводится оповещение: "Жаль, что Вы не уверены...".
Этот шаблонный код часто используется, когда пользователь пытается что-либо удалить либо пкинуть веб-страницу.

Метод prompt() выводит на экран диалоговое окно, которое запрашивает у пользователя информацию. Вместе с кнопками OK и Cancel (Отмена) оно содержит текстовое поле для ввода данных. В отличие отметодов alert() и confirm() данный метод принимает два параметра: сообщение и значение, которое должно появиться в текстовом поле ввода данных по умолчанию.

Синтаксис применения метода prompt имеет следующий вид:

var result = prompt (сообщение, значение по умолчанию);
  • result — строка, содержащая текст, введенный пользователем, или значение null.
  • сообщение — строка текста для отображения пользователю (обычно это вопрос). Этот параметр является необязательным и может быть опущен, если в окне подсказки ничего не отображается.
  • значение по умолчанию — строка, которая отображается по умолчанию в поле ввода, обычно второй аргумент оставляют пустым и записывают так - "".

Если пользователь щелкает на кнопке OK, метод prompt() возвращает значение, введенное в текстовом поле, а если выбирается кнопка Cancel (Отмена) или окно закрывается иным образом, то возвращается null. Вот пример:

Выполнить код »
  • Методы alert(), confirm() и prompt() являются блокирующими, т. е. они не возвращают управление документом, пока пользователь не отреагирует на запрос диалогового окна. Это значит, что когда выводится одно из таких окон, программный код прекращает исполнение, а текущий документ прекращает загружаться на время показа диалогового окна и возобновляется после его закрытия.
    • alert() выводит сообщение и ждёт, пока пользователь нажмёт OK.
    • prompt() выводит сообщение и ждёт, пока пользователь введёт текст, а затем возвращает введённое значение или null, если ввод отменён (Cancel или Esc).
    • confirm() выводит сообщение и ждёт, пока пользователь нажмёт OK или Cancel и возвращает соответственно true или false.
  • Такие системные диалоговые окна легко использовать, они могут быть полезны, если нужно вывести для пользователя некоторую информацию и запросить подтверждение решения, не требуя загрузки кода HTML, CSS или JavaScript. Однако из эстетических соображений на практике их применяют редко. На веб-страницах они почти не встречаются.
  • Текст, отображаемый в диалоговых окнах, которые выводятся перечисленными методами – это обычный неформатированный текст. Его можно форматировать только пробелами, переводами строк и различными знаками пунктуации.
  • Диалоговое окно

    Напишите простой сценарий, который отображает диалоговое окно с сообщением: "Привет, javascript!". Слова "Привет" и "javascript!" должны отображаться на разных строках сообщения.

    Решение:

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Диалоговое окно</title>
    </head>
    <body>
    <p>Это обычный HTML документ</p>
    
    <script>
        alert("Привет, \njavascript!");
    </script>
    
    </body>
    </html>
    
  • Сочетание методов prompt() и alert()

    Напишите скрипт после запуска которого появится запрос: "Как Вас зовут?", а затем, после ввода имени и щелчка на кнопке «OK» Ваше имя должно быть выведено в окне браузера с помощью метода alert().

    prompt() dialog in Chrome

    Показать решение

    Решение:

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Методы prompt() и alert()</title>
    </head>
    <body>
    <p>Это обычный HTML документ</p>
    
    <script>
      var name = prompt("Как Вас зовут?", "");
      alert( name );
    </script>
      
    </body>
    </html>
    
  • Какая кнопка нажата?

    Создайте страницу, которая выводит окно с сообщением: "Нажмите ОК или Отмена" и двумя кнопками — «OK» и «Отмена», позволяя пользователю выбрать одну из них. С помощью метода alert() выведите название нажатой пользователем кнопки.

    confirm() dialog in Chrome

    Показать решение

    Решение:

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Какая кнопка нажата?</title>
    </head>
    <body>
    
    <script>
      if (confirm ("Нажмите ОК или Отмена")) { 
        alert("OK");
      }   
      else { 
        alert("Отмена");
      } 
    </script>
      
    </body>
    </html>
    
  • Здравствуйте, пользователь.

    Создайте страницу, которая сначала выводит окно с запросом: "Введите свое имя". После ввода пользователем имени на странице должно появиться окно с запросом подтверждения: "Введенное имя правильное?". И, наконец, после того, как пользователь нажмет кнопку подтверждения «OK» должно появиться окно приветствия: "Здравствуйте, введенное_имя". При решении задачи используются все три метода.

    confirm() dialog in Chrome

    Показать решение

    Решение:

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Какая кнопка нажата?</title>
    </head>
    <body>
    
    <script>
     
      var name = prompt("Введите свое имя");  
      var ok = confirm("Введенное имя правильное?");
      if (ok) { 
        alert("Здравствуйте, " + name);
      }     
    
    </script>
      
    </body>
    </html>
    

Комментарии

пожелания к комментариям…
  • Приветствуются комментарии, соответствующие теме урока: вопросы, ответы, предложения.
  • Одну строчку кода оборачивайте в тег <code>, несколько строчек кода — в теги <pre><code>...ваш код...</code></pre>.
  • Допускаются ссылки на онлайн-песочницы (codepen, plnkr, JSBin и др.).