Ð ÑÑом Ñазделе Ð¼Ñ ÑаÑÑмоÑÑим базовÑе UI опеÑаÑии: alert, prompt и confirm, коÑоÑÑе позволÑÑÑ ÑабоÑаÑÑ Ñ Ð´Ð°Ð½Ð½Ñми, полÑÑеннÑми Ð¾Ñ Ð¿Ð¾Ð»ÑзоваÑелÑ.
alert
СинÑакÑиÑ:
alert(ÑообÑение)
alert вÑÐ²Ð¾Ð´Ð¸Ñ Ð½Ð° ÑкÑан окно Ñ ÑообÑением и пÑиоÑÑÐ°Ð½Ð°Ð²Ð»Ð¸Ð²Ð°ÐµÑ Ð²Ñполнение ÑкÑипÑа, пока полÑзоваÑÐµÐ»Ñ Ð½Ðµ нажмÑÑ Â«Ðл.
alert( "ÐÑивеÑ" );
Ðкно ÑообÑениÑ, коÑоÑое вÑводиÑÑÑ, ÑвлÑеÑÑÑ Ð¼Ð¾Ð´Ð°Ð»ÑнÑм окном. Слово «модалÑное» ознаÑаеÑ, ÑÑо поÑеÑиÑÐµÐ»Ñ Ð½Ðµ Ð¼Ð¾Ð¶ÐµÑ Ð²Ð·Ð°Ð¸Ð¼Ð¾Ð´ÐµÐ¹ÑÑвоваÑÑ Ñо ÑÑÑаниÑей, нажимаÑÑ Ð´ÑÑгие кнопки и Ñ.п., пока не ÑазбеÑÑÑÑÑ Ñ Ð¾ÐºÐ½Ð¾Ð¼. Рданном ÑлÑÑае â пока не нажмÑÑ Ð½Ð° «OK».
prompt
ФÑнкÑÐ¸Ñ prompt пÑÐ¸Ð½Ð¸Ð¼Ð°ÐµÑ Ð´Ð²Ð° аÑгÑменÑа:
result = prompt(title, default);
Ðна вÑÐ²Ð¾Ð´Ð¸Ñ Ð¼Ð¾Ð´Ð°Ð»Ñное окно Ñ Ð·Ð°Ð³Ð¾Ð»Ð¾Ð²ÐºÐ¾Ð¼ title, полем Ð´Ð»Ñ Ð²Ð²Ð¾Ð´Ð° ÑекÑÑа, заполненнÑм ÑÑÑокой по ÑмолÑÐ°Ð½Ð¸Ñ default и кнопками OK/CANCEL.
ÐолÑзоваÑÐµÐ»Ñ Ð´Ð¾Ð»Ð¶ÐµÐ½ либо ÑÑо-Ñо ввеÑÑи и нажаÑÑ OK, либо оÑмениÑÑ Ð²Ð²Ð¾Ð´ кликом на CANCEL или нажаÑием Esc на клавиаÑÑÑе.
ÐÑзов prompt возвÑаÑÐ°ÐµÑ Ñо, ÑÑо ввÑл поÑеÑиÑÐµÐ»Ñ â ÑÑÑÐ¾ÐºÑ Ð¸Ð»Ð¸ ÑпеÑиалÑное знаÑение null, еÑли ввод оÑменÑн.
nullÐдинÑÑвеннÑй бÑаÑзеÑ, коÑоÑÑй не возвÑаÑÐ°ÐµÑ null пÑи оÑмене ввода â ÑÑо Safari. ÐÑи оÑÑÑÑÑÑвии ввода он возвÑаÑÐ°ÐµÑ Ð¿ÑÑÑÑÑ ÑÑÑокÑ. ÐÑедположиÑелÑно, ÑÑо оÑибка в бÑаÑзеÑе.
ÐÑли нам важен ÑÑÐ¾Ñ Ð±ÑаÑзеÑ, Ñо пÑÑÑÑÑ ÑÑÑÐ¾ÐºÑ Ð½Ñжно обÑабаÑÑваÑÑ ÑоÑно Ñак же, как и null, Ñ.е. ÑÑиÑаÑÑ Ð¾Ñменой ввода.
Ðак и в ÑлÑÑае Ñ alert, окно prompt модалÑное.
var years = prompt('СколÑко вам леÑ?', 100);
alert('Ðам ' + years + ' леÑ!')
defaultÐÑоÑой паÑамеÑÑ Ð¼Ð¾Ð¶ÐµÑ Ð¾ÑÑÑÑÑÑвоваÑÑ. Ðднако пÑи ÑÑом IE вÑÑÐ°Ð²Ð¸Ñ Ð² диалог знаÑение по ÑмолÑÐ°Ð½Ð¸Ñ "undefined".
ÐапÑÑÑиÑе ÑÑÐ¾Ñ ÐºÐ¾Ð´ в IE, ÑÑÐ¾Ð±Ñ Ð¿Ð¾Ð½ÑÑÑ Ð¾ ÑÑм ÑеÑÑ:
var test = prompt("ТеÑÑ");
ÐоÑÑÐ¾Ð¼Ñ ÑекомендÑеÑÑÑ Ð²Ñегда ÑказÑваÑÑ Ð²ÑоÑой аÑгÑменÑ:
var test = prompt("ТеÑÑ", ''); // <-- Ñак лÑÑÑе
confirm
СинÑакÑиÑ:
result = confirm(question);
confirm вÑÐ²Ð¾Ð´Ð¸Ñ Ð¾ÐºÐ½Ð¾ Ñ Ð²Ð¾Ð¿ÑоÑом question Ñ Ð´Ð²ÑÐ¼Ñ ÐºÐ½Ð¾Ð¿ÐºÐ°Ð¼Ð¸: OK и CANCEL.
РезÑлÑÑаÑом бÑÐ´ÐµÑ true пÑи нажаÑии OK и false â пÑи CANCEL(Esc).
ÐапÑимеÑ:
var isAdmin = confirm("ÐÑ - админиÑÑÑаÑоÑ?");
alert( isAdmin );
ÐÑобенноÑÑи вÑÑÑоеннÑÑ ÑÑнкÑий
ÐонкÑеÑное меÑÑо, где вÑводиÑÑÑ Ð¼Ð¾Ð´Ð°Ð»Ñное окно Ñ Ð²Ð¾Ð¿ÑоÑом â обÑÑно ÑÑо ÑенÑÑ Ð±ÑаÑзеÑа, и внеÑний вид окна вÑбиÑÐ°ÐµÑ Ð±ÑаÑзеÑ. РазÑабоÑÑик не Ð¼Ð¾Ð¶ÐµÑ Ð½Ð° ÑÑо влиÑÑÑ.
С одной ÑÑоÑÐ¾Ð½Ñ â ÑÑо недоÑÑаÑок, Ñак как нелÑÐ·Ñ Ð²ÑвеÑÑи окно в ÑвоÑм, оÑобо кÑаÑивом, дизайне.
С дÑÑгой ÑÑоÑонÑ, пÑеимÑÑеÑÑво ÑÑÐ¸Ñ ÑÑнкÑий по ÑÑÐ°Ð²Ð½ÐµÐ½Ð¸Ñ Ñ Ð´ÑÑгими, более ÑложнÑми меÑодами взаимодейÑÑвиÑ, коÑоÑÑе Ð¼Ñ Ð¸Ð·ÑÑим в далÑнейÑем â как Ñаз в Ñом, ÑÑо они оÑÐµÐ½Ñ Ð¿ÑоÑÑÑ.
ÐÑо ÑамÑй пÑоÑÑой ÑпоÑоб вÑвеÑÑи ÑообÑение или полÑÑиÑÑ Ð¸Ð½ÑоÑмаÑÐ¸Ñ Ð¾Ñ Ð¿Ð¾ÑеÑиÑелÑ. ÐоÑÑÐ¾Ð¼Ñ Ð¸Ñ Ð¸ÑполÑзÑÑÑ Ð² ÑÐµÑ ÑлÑÑаÑÑ , когда пÑоÑÑоÑа важна, а вÑÑкие «кÑаÑивоÑÑи» оÑобой Ñоли не игÑаÑÑ.
РезÑме
alertвÑÐ²Ð¾Ð´Ð¸Ñ ÑообÑение.promptвÑÐ²Ð¾Ð´Ð¸Ñ ÑообÑение и ждÑÑ, пока полÑзоваÑÐµÐ»Ñ Ð²Ð²ÐµÐ´ÑÑ ÑекÑÑ, а заÑем возвÑаÑÐ°ÐµÑ Ð²Ð²ÐµÐ´Ñнное знаÑение илиnull, еÑли ввод оÑменÑн (CANCEL/Esc).confirmвÑÐ²Ð¾Ð´Ð¸Ñ ÑообÑение и ждÑÑ, пока полÑзоваÑÐµÐ»Ñ Ð½Ð°Ð¶Ð¼ÑÑ Â«OK» или «CANCEL» и возвÑаÑаеÑtrue/false.
ÐомменÑаÑии
<code>, Ð´Ð»Ñ Ð½ÐµÑколÑÐºÐ¸Ñ ÑÑÑок кода — Ñег<pre>, еÑли болÑÑе 10 ÑÑÑок — ÑÑÑÐ»ÐºÑ Ð½Ð° пеÑоÑниÑÑ (plnkr, JSBin, codepenâ¦)