Какая функция вызывает окно с текстовым полем в которое пользователь может ввести строку
Перейти к содержимому

Какая функция вызывает окно с текстовым полем в которое пользователь может ввести строку

alert, prompt и confirm — диалоговые окна в JavaScript

Александр Мальцев

Функция alert() предназначена для вывода в браузере предупреждающего модального диалогового окна с некоторым сообщением и кнопкой «ОК» . При его появлении дальнейшее выполнение кода страницы прекращается до тех пор, пока пользователь не закроет это окно. Кроме этого, оно также блокирует возможность взаимодействия пользователя с остальной частью страницы. Применение этого окна в основном используется для вывода некоторых данных при изучении языка JavaScript, в реальных проектах команда alert() не используется.

Синтаксис метода alert() :

Метод alert() имеет один аргумент ( message ) — текст сообщения, которое необходимо вывести в модальном диалоговом окне. В качестве результата alert() ничего не возвращает.

Например, выведем при клике в диалоговое окно alert координаты курсора:

JavaScript - пример работы с методом alert

Если alert сообщение нужно вывести на нескольких строках, то в этом случае следует воспользоваться «символом перевода строки», который в JavaScript записывается как \n :

Метод prompt()

Метод prompt() предназначен для вывода диалогового окна с сообщением, текстовым полем для ввода данных и кнопками «ОК» и «Отмена». Это окно предназначено для запроса данных, которые пользователю нужно ввести в текстовое поле.

В переменную result возвращается значение введённое пользователем или null . Если пользователь не ввёл данные (поле ввода пустое) и нажал на «ОК», то в result будет находиться пустая строка.

Например, запросим имя пользователя при входе его на сайт с помощью prompt, а затем выведем его в элемент #welcome :

JavaScript - пример работы с методом prompt

Метод confirm()

Метод confirm() объекта window применяется для вывода модального диалогового окна с сообщением и кнопками «ОК» и «Отмена». Оно обычно используется для запроса у пользователя разрешения на выполнение того или иного действия.

Синтаксис метода confirm() :

  • true — если пользователь нажал на кнопку «ОК»;
  • false — в остальных случаях.

Например, выведем в элемент #result текст в зависимости то того на какую кнопку нажал пользователь в диалоговом окне confirm:

JavaScript - пример работы с методом confirm

Итого

В этой статье мы рассмотрели 3 функции браузера: alert , prompt и confirm . Они предназначены для взаимодействия с пользователем. Диалоговые окна создаваемые этими методами являются модальными. Это значит, что они блокируют доступ пользователя к остальной части страницы пока оно не будет закрыто. Кроме этого, они ещё приостанавливают загрузку дальнейшей части страницы. По этим причинам, их имеет смысл использовать в скриптах только при изучении JavaScript, чтобы запросить или вывести некоторую информацию на экран. В настоящих проектах они обычно не используются.

Ещё одно ограничение при использовании этих окон связано с тем, что их расположение и оформление определяется браузером. Как-то изменить или настроить это нельзя.

Примеры

1. Использование методов prompt и alert для создания игры «Угадай число»?

Функция prompt

Функция prompt выводит окно для ввода данных.

Первым параметром она принимает сообщение, которое будет показано пользователю, а вторым — текст по умолчанию в поле ввода (см. примеры). Вротой параметр — не обязательный. Но желательно указывать его всегда (хотя бы пустой строкой — «»). Так как при его отсутствии ИЕ поставит undefined.

В окошке что появится будет находится текстовое поле, и 2 кнопки — ОК, CANCEL. При нажатии на ОК — возвращается введеная пользователем строка, а при нажатии на CANCEL — null

p.s.: В некоторых версиях браузера Сафари, при нажатии на CANCEL возвращается пустая строка.

См. также функции alert и confirm.

Синтаксис

Примеры

Пример

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

Результат выполнения кода:

Пример

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

Результат выполнения кода:

Пример

В данном примере функция спрашивает имя пользователя, сохраняет его в переменную и затем выводит на экран с помощью функции alert:

JavaScript урок 2. Функции для работы с типами данных, методы ввода и вывода данных

преобразует указанную в параметре строку в целое число. Если есть второй параметр — система счисления — преобразование происходит по указанному основанию системы счисления (8, 10 или 16):

parseInt("3.14") // результат = 3 parseInt("-7.875") // результат = -7 parseInt("435") // результат = 435 parseInt("Вася") /* результат = NaN, то есть не является числом */ parseInt("15" ,8) // результат = 13

преобразует указанную строку в число с плавающей разделительной точкой (десятичной):

parseFloat("3.14") // результат = 3.14 parseFloat("-7.875") // результат = -7.875 parseFloat ("435") // результат = 435 parseFloat ("Вася") /* результат = NaN, то есть не является числом */ parseFloat ("17.5") // результат = 17.5

x = Number(x) // к числу x = String(x) // к строке x = Boolean(x) // к булеву типу

2. Компактные преобразования:

x = +x // к числу x = x + » // к строке x = !!x // к булеву типу

служит для определения того, является ли значение выражения числом:

isNaN(123) /* результат false (то есть это — число) */ isNaN("50 рублей") /* результат true (то есть это — не число) */

let a=8; let b="pi"; let S=a*b; // S=NaN

В качестве значения переменной может быть undefined — не определено. Такое случается, когда переменная создана, но значение ей не присвоено:

let b; document.write(b); // b=undefined

typeof 33 // возвращает строку "number", typeof "A String" // возвращает строку "string", typeof true // возвращает строку "boolean", typeof null // возвращает строку "object"

  • с двумя строковыми переменными со значениями «строка1» и «строка2» ; с помощью операции конкатенации объедините строки;
  • с двумя числовыми переменными со значениями 3.14 и FF ; выведите их произведение, преобразованное в целое число. Для вывода значений используйте метод document.write() .
  • Создайте веб-страницу с html-скелетом и тегом script:

<html><head></head> <body> <!— Сценарий —> <script> // для кода JavaScript </script> <!— Конец сценария —> </body></html>

let c=3.14; let d=0xFF; // 16-я система счисления

// Инициализация двух переменных: let a="строка1"; let b="строка2";

document.write("конкатенация: ",a+b,"<br/>произведение: ", parseInt(c*d));

Найдите остаток от деления числовых значений переменной a на переменную b. Используйте функции преобразования типов.
Результатом должно быть число 5.

Рекомендации:
Для округления числа следует использовать метод Math.round() :

  1. Назовите функцию, преобразующую указанную в параметре строку в целое число.
  2. Назовите функцию, преобразующую указанную строку в число с плавающей разделительной точкой.
  3. В каком случае может возникнуть ошибка NaN?
  4. Когда значение переменной может быть undefined?

Методы javaScript вывода данных и ввода (диалоговые окна)

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

[window.]alert(сообщение)

С помощью уже знакомого нам модального окна с предупреждением на экран выводится информация для пользователя. Например:

javascript alert

Пользователь читает сообщение и щелкает по кнопке OK, чтобы закрыть это окно.

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

let price = 28; alert(`Стоимость = $ рублей`); // Стоимость = 28 рублей

[window.]confirm(сообщение)

В отличие от предыдущего модального окна, в диалоговом окне confirm пользователь может выбрать один из двух вариантов: OK или Отмена.

let a = confirm("Вы действительно хотите завершить работу?"); alert(a); // yes, если нажата ok

javascript confirm

[window.]prompt(сообщение,значение_поля_ввода)

С помощью окна ввода, вызываемого методом prompt, пользователь может ввести данные, которые будут использоваться далее в сценарии.

javascript prompt

window.alert("сообщение"); // строгий синтаксис

alert("сообщение"); // нестрогий синтаксис

Этот объект означает «окно», и для краткости обращения к методам разрешено его не использовать, поэтому в синтаксисе он выделен квадратными скобками

    При загрузке страницы запросить у пользователя ввести имя (функция prompt() ). С помощью метода document.write вывести на экран строку «Привет, введенное имя !» .

диалоговое окно prompt

    Создайте веб-страницу с html-скелетом и тегом script:

<html><head></head> <body> <!— Сценарий —> <script> // для кода JavaScript </script> <!— Конец сценария —> </body></html>

let name = prompt("Введите Ваше имя");

  • Создайте веб-страницу с html-скелетом и тегом script.
  • В коде для javascript инициализируйте две переменных для присваивания им значений — чисел, которое введет пользователь в модальные окна prompt(). Для преобразования в целый тип используйте функцию parseInt().

let a = parseInt(prompt("Введите первое число")); let b = parseInt(prompt("Введите второе число"));

let a = prompt("Введите первое число"); a = parseInt(a);

let x = prompt("Введите значение x ", "0"); let y = prompt("Введите значение y ", "0.0"); let integerX = . let floatY = . let result = integerX + floatY; . ;

let firstName = prompt("Введите имя"; "сюда"); let lastName = promt("Введите фамилию"); int age = prompt("Введите возраст"); alert(Age);

задание javascript вывод текста

Задание Js 4. Вычислить значение выражения по формуле (все переменные принимают вещественные значения):

Предлагаемый алгоритм:

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *