LearnJS

alert()

alert() - это встроенная функция браузера, которая показывает модальное окно с сообщением. Обычно ее используют в первых примерах, чтобы быстро увидеть результат работы JavaScript.

Когда срабатывает alert(), браузер показывает окно с текстом и кнопкой ОК. Пока пользователь не закроет это окно, выполнение кода останавливается.

Что такое alert()

alert() выводит сообщение поверх страницы. Это не обычный текст в HTML, а отдельное окно браузера.

alert('Привет, JavaScript!');

После выполнения кода браузер покажет модальное окно с текстом:

Привет, JavaScript!

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

Синтаксис

Общая запись выглядит так:

alert(message);

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

Самый простой вариант:

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

Сначала пишем имя функции alert, затем круглые скобки, внутри них значение, а в конце точку с запятой.

Вывод текста

Если нужно вывести текст, его записывают в кавычках.

alert('Изучаем JavaScript');

Можно использовать одинарные или двойные кавычки:

alert("Изучаем JavaScript");

Главное, чтобы открывающая и закрывающая кавычка были одного типа.

alert('Так правильно');
alert("Так тоже правильно");

А вот так писать нельзя:

alert('Так будет ошибка");

В этом примере строка открыта одинарной кавычкой, а закрыта двойной. Браузер не поймет такую запись и покажет ошибку в консоли.

Числа и выражения

Числа можно передавать в alert() без кавычек:

alert(100);

В окне появится число 100.

Также внутри alert() можно выполнять простые вычисления:

alert(10 + 5);

Сначала JavaScript посчитает выражение, а потом покажет результат:

15

Еще пример:

alert(20 * 3);

В модальном окне появится 60.

Переменные в alert()

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

let userName = 'Алексей';

alert(userName);

В результате появится окно с текстом:

Алексей

Имя переменной пишется без кавычек. Если поставить кавычки, JavaScript выведет не значение переменной, а обычный текст.

let userName = 'Алексей';

alert(userName);   // Алексей
alert('userName'); // userName

В первом случае выводится значение переменной. Во втором - строка ‘userName’.

Порядок выполнения

alert() останавливает выполнение кода до тех пор, пока пользователь не нажмет ОК.

console.log('До alert');

alert('Окно alert');

console.log('После alert');

Сначала в консоли появится сообщение До alert. Затем откроется модальное окно. И только после закрытия окна выполнится последняя строка.

Если вызвать несколько alert() подряд, окна будут появляться по очереди:

alert('Первое сообщение');
alert('Второе сообщение');
alert('Третье сообщение');

Пока первое окно не закрыто, второе не появится.

alert() и console.log()

alert() и console.log() часто используют на первых уроках, но задачи у них разные.

alert() показывает сообщение пользователю в модальном окне.

alert('Привет!');

console.log() выводит данные в консоль разработчика.

console.log('Привет!');

Для обучения alert() удобен своей наглядностью. Но в реальной разработке им пользуются редко, потому что модальное окно мешает пользователю и останавливает работу страницы.

Для проверки кода чаще используют console.log(). Он не мешает странице и позволяет спокойно смотреть промежуточные значения.

Частые ошибки

1. Текст написан без кавычек

alert(Привет);

JavaScript решит, что Привет - это имя переменной. Если такой переменной нет, появится ошибка. Правильно:

alert('Привет');

2. Пропущена закрывающая скобка

alert('Привет';

В этом примере не хватает круглой скобки. Правильная запись:

alert('Привет');

3. Неправильно написано имя функции

Alert('Привет');

JavaScript чувствителен к регистру. Alert и alert - разные имена. Правильно:

alert('Привет');

4. Ожидание увидеть alert() в консоли

alert() не выводит данные в консоль. Он показывает отдельное окно в браузере. Если нужно вывести данные именно в консоль, используйте console.log().

Что дальше

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

Дальше в этом блоке разберем prompt() - функцию, которая не только показывает окно, но и позволяет получить данные от пользователя.