Девочка выглядывает из браузера и держит в руках табличку "Push me"
Иллюстрация: Кира Кустова

alert()

Разработчики делают красивые модальные окна неделю, но у нас всегда есть готовое некрасивое.

Время чтения: меньше 5 мин

Кратко

Скопировано

При помощи директивы alert() можно вывести на экран пользователя модальное окно с каким-нибудь текстом.

🤖 Из-за того, что окно модальное — работа с интерфейсом браузера и страницами будет заблокирована. Это неудобно, и может восприниматься пользователем как попытка ограничивать его свободу. Модальное окно для пользователя — окно, которое блокирует его работу с браузером до тех пор, пока он это окно не закроет.

Пример

Скопировано
Открыть демо в новой вкладке

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

Как пишется

Скопировано

alert() принимает только один аргумент:

        
          
          alert("Message")
          alert("Message")

        
        
          
        
      

В качестве строки для отображения также можно передать и переменную:

        
          
          var text = "Another message"alert(text)
          var text = "Another message"
alert(text)

        
        
          
        
      

Как понять

Скопировано

alert() позволяет вывести любое сообщение, но необходимо помнить, что аргумент будет приведён к строке. Такое поведение не доставляет проблем, пока аргумент является примитивом или встроенным типом, имеющим правила приведения к строке.

        
          
          // Helloalert("Hello")// 100alert(100)// falsealert(false)// 1,10,100alert([1, 10, 100])
          // Hello
alert("Hello")

// 100
alert(100)

// false
alert(false)

// 1,10,100
alert([1, 10, 100])

        
        
          
        
      

Вывести окно с текстом из «сложного» значения можно — окно появится, но не с тем текстом, который, возможно, ожидается:

        
          
          // [object Object]alert({})// [object Object]alert({ text: "Some message" })
          // [object Object]
alert({})

// [object Object]
alert({ text: "Some message" })

        
        
          
        
      

💡 Чтобы объяснить JavaScript, как нужно выводить объект с данными в alert(), необходимо описать функцию объекта toString, которая отвечает за приведение к строке:

Открыть демо в новой вкладке

На практике

Скопировано

Дока Дог советует

Скопировано

🛠 Ниже представлен пример самостоятельного создания диалогового окна на замену alert():

Открыть демо в новой вкладке