Interakce:upozornění, výzva, potvrzení

Protože budeme prohlížeč používat jako naše ukázkové prostředí, podívejme se na několik funkcí pro interakci s uživatelem:alert , prompt a confirm .

upozornění

Tento jsme již viděli. Zobrazí zprávu a čeká, až uživatel stiskne „OK“.

Například:

alert("Hello");

Miniokno se zprávou se nazývá modální okno . Slovo „modální“ znamená, že návštěvník nemůže interagovat se zbytkem stránky, mačkat jiná tlačítka atd., dokud se nevypořádá s oknem. V tomto případě – dokud nestisknou „OK“.

výzva

Funkce prompt přijímá dva argumenty:

result = prompt(title, [default]);

Zobrazuje modální okno s textovou zprávou, vstupní pole pro návštěvníka a tlačítka OK/Zrušit.

title
Text, který se má zobrazit návštěvníkovi.
default
Volitelný druhý parametr, počáteční hodnota pro vstupní pole.
Hranaté závorky v syntaxi [...]

Hranaté závorky kolem default ve výše uvedené syntaxi označte, že parametr je volitelný, není povinný.

Návštěvník může něco napsat do pole pro zadání výzvy a stisknout OK. Potom dostaneme tento text v result . Nebo mohou zadání zrušit stisknutím tlačítka Storno nebo stisknutím Esc klíč, pak dostaneme null jako result .

Volání na prompt vrátí text ze vstupního pole nebo null pokud byl vstup zrušen.

Například:

let age = prompt('How old are you?', 100);

alert(`You are ${age} years old!`); // You are 100 years old!
V IE:vždy zadejte default

Druhý parametr je volitelný, ale pokud jej nezadáme, Internet Explorer vloží text "undefined" do výzvy.

Spuštěním tohoto kódu v aplikaci Internet Explorer zobrazíte:

let test = prompt("Test");

Aby tedy výzvy vypadaly dobře v IE, doporučujeme vždy uvést druhý argument:

let test = prompt("Test", ''); // <-- for IE

potvrdit

Syntaxe:

result = confirm(question);

Funkce confirm zobrazuje modální okno s question a dvě tlačítka:OK a Storno.

Výsledek je true pokud stisknete OK a false jinak.

Například:

let isBoss = confirm("Are you the boss?");

alert( isBoss ); // true if OK is pressed

Shrnutí

Pokryli jsme 3 funkce specifické pro prohlížeč pro interakci s návštěvníky:

alert
zobrazí zprávu.
prompt
zobrazí zprávu s výzvou k zadání textu. Vrátí text nebo v případě tlačítka Storno nebo Esc kliknuto, null .
confirm
zobrazí zprávu a čeká, až uživatel stiskne „OK“ nebo „Zrušit“. Vrátí true pro OK a false pro Storno/Esc .

Všechny tyto metody jsou modální:pozastavují provádění skriptu a neumožňují návštěvníkovi interagovat se zbytkem stránky, dokud není okno zavřeno.

Všechny výše uvedené metody sdílejí dvě omezení:

  1. Přesné umístění modálního okna určuje prohlížeč. Obvykle je to uprostřed.
  2. Přesný vzhled okna závisí také na prohlížeči. Nemůžeme to změnit.

To je cena za jednoduchost. Existují i ​​jiné způsoby, jak ukázat hezčí okna a bohatší interakci s návštěvníkem, ale pokud „zvonky a píšťalky“ příliš nevadí, tyto metody fungují dobře.