Javascript udostępnia nam trzy typy okien dialogowych:
Z jednej strony okienka takie są łatwe we wdrożeniu i skuteczne (bo gdy się pojawią, nie pozwalają kliknąć niczego innego na stronie), z drugiej strony bardzo ładnie odciągają uwagę odwiedzającego od zawartości strony. Nie odradzam ich używania. Po prostu czasami trzeba się zastanowić, czy nie ma lepszej metody, by poinformować użytkownika o danym zdarzeniu. Przykładowo zamiast pokazywać alerta z informacją o źle wpisanym mailu, lepiej jest wyświetlić obok takiego pola czerwony znaczek czy coś symbolizującego, że ów pole jest źle wypełnione. Użytkowanie strony będzie wtedy o wiele przyjemniejsze.
W oknach dialogowych można formatować tekst za pomocą znaków:
\n - służący do łamania linni - jak użycie ENTERA w edytorze tekstu.
\t - służący do wstawiania znaku tabulacji.
Jedynym wymogiem jest to, że znaki te muszą znajdować się między podwójnymi cudzysłowami ("...") a nie między apostrofami ('...') - na przykład "To jest łamany\ntekst.".
Metoda alert ma postać
alert('treść komunikatu');
Po wywołaniu metody alert() zostaje wyświetlone okienko z komunikatem i przyciskiem OK. Po kliknięciu przycisku nie zostaje zwrócona żadna wartość, tak więc okno to nadaje się tylko do informowania użytkownika o pewnych zdarzeniach. Zaznaczyć trzeba, że nie ma możliwości zmiany tytułu tego okna (jest zależny od przeglądarki), a tylko treści jakie to okienko wyświetla.
<input type="button" id="alert" value="Okienko Alert">
<script type="text/javscript">
function oknoAlert() {
alert('To jest okienko alert');
}
document.getElementById('alert').onclick = function() {
oknoAlert()
}
</script>
Za pomocą metody getElementById pobraliśmy input i przypisaliśmy do niego zdarzenie onclick, które odpala funkcję pokazującą okienko alert
Metoda confirm ma postać:
confirm('treść komunikatu');
Można powiedzieć, że okienko confirm służy do tego, aby użytkownik coś potwierdził (stąd nazwa confirm). Do metody confirm() przekazywany jest tylko jeden parametr zawierający treść jaka będzie wyświetlana w okienku. Okienko to wyświetla dwa guziki: [OK] i [ANULUJ] (CANCEL). W zależności od tego który guzik został kliknięty przez użytkownika, metoda ta zwróci true lub false.
<input type="button" id="confirm" value="Okienko Confirm">
<script type="text/javascript">
function oknoConfirm() {
if (confirm('Czy jesteś pewien, że chcesz kontynuować?')) {
alert('No to kontynuuj...');
} else {
alert('Przykro mi, że nie chcesz kontynuować...');
}
}
document.getElementById('confirm').onclick = function() {
oknoConfirm()
}
</script>
prompt('treść komunikatu', 'domyślna wartość');
Do metody prompt przekazujemy dwa parametry - jeden jest treścią, która będzie wyświetlana w okienku, a drugi jest domyślną wartością, która będzie wyświetlana w polu, w które wpisujemy tekst. Okienko to wyświetla dwa guziki: [OK] i [ANULUJ] (CANCEL). Jeżeli użytkownik kliknie [OK], to zostanie zwrócona wartość z pola tekstowego znajdującego się w tym okienku (lub też 'domyślna wartość', jeżeli użytkownik nie zmieniał zawartości tego pola). Jeżeli użytkownik kliknie [ANULUJ] (CANCEL), to zostanie zwrócona wartość null.
<input type="button" id="prompt" value="Okienko Prompt" />
<script type="text/javascript">
function oknoPrompt() {
var imie = prompt('Podaj swoje imię:', 'Kartofel');
if (imie != null) {
alert('Witaj ' + imie);
} else {
alert('Anulowałeś akcję');
}
}
document.getElementById('prompt').onclick = function() {
oknoPrompt()
}
</script>