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 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 afalse
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í:
- Přesné umístění modálního okna určuje prohlížeč. Obvykle je to uprostřed.
- 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.