Okna dialogowe w JavaScript

W JavaScript mamy do wyboru trzy rodzaje okienek dialogowych, wyzwalanych przez metody alert(), confirm() i prompt().

Korzystanie z okien dialogowych jest wygodne dla programisty, ale nie jest nazbyt lubiane przez internautów, szczególnie wówczas, gdy użytkownik naszej strony ma z nimi często do czynienia. Projektując program w JavaScript warto sie zastanowić, czy nie można zastosować alternatywnego rozwiązania dla okienek dialogowych. Lepiej więc stosować znaki graficzne, kolorowe czcionki w ostrzeganiu użytkownika naszej strony przed na przykład błędnie wprowadzonymi danymi.

Czasem jednak okna dialogowe sa nieocenione.

alert();

Metoda alert('komunikat') wyświetla okienko z treścią komunikatu i przycisk OK. Po kliknięciu na przycisk nie zostaje zwrócona żadna wartość. Okno to informuje użytkownika o różnych zdarzeniach.

Przykład 1 - alert()

	<script>
		alert("Witaj na mojej stronie!");
	</script>

confirm();

Metoda confirm('komunikat') wyświetla okienko z treścią komunikatu i przyciski OK oraz Anuluj (Cancel). Metoda zwraca wartość true, jeżeli użytkownik wcisnął przycisk OK, natomiast wartość false, jeżeli został wciśnięty klawisz Anuluj. Okno służy więc do potwierdzania przez użytkownika pewnych treści.

Przykład 2 - confirm();

<script>
if (confirm('Czy jesteś pewien, że chcesz uruchomić program?')) {
     alert('Program będzie uruchomiony');
} else {
     alert('Szkoda!');
}	
</script>

prompt();

Metoda promt('komunikat','wartość domyślna') wyświetla okienko z treścią komunikatu, pole edycyjne do wpisania tekstu i przyciski OK oraz Anuluj (Cancel). Jeżeli użytkownik kliknie przycisk OK, to zostanie zwrócona wartość z pola tekstowego okienka. Jeżeli użytkownik kliknie przycisk Anuluj, to zostanie zwrócona wartość null.

Dzięki temu okienku można nawiązać komunikację z użytkownikiem i przekazać do programu dowolny tekst użytkownika.

Przykład 3 - prompt();

<script>
var imie = prompt("Podaj swoje imię:", "Krzyś");

if (imie != null) {
 alert("Cześć " + imie + "! Jak się masz?");
}
else
{
 alert("Szkoda, że nie podałeś swego imienia!");
}
</script>

Inne zagadnienia z tej lekcji

Instrukcje warunkowe w JavaScript

String - tekst w JavaScript

Wyrażenia regularne

Obiekt date() - data i czas w JavaScript