Okna dialogowe

Gdy w konsoli debuggera wypiszesz obiekt window, zobaczysz, że zawiera on trzy metody:

console.log(window);

console.log(window.alert);
console.log(window.confirm);
console.log(window.prompt);

Są to metody wyświetlające okienka dialogowe, które służą do komunikowania użytkownika o jakiś rzeczach, a także do mikro interakcji z nim.

Okienko typu alert()

Wywołanie okienka 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.

Okienko Alert

Okienko typu confirm()

Wywołanie okienka confirm ma postać:

confirm("treść komunikatu");

Okienko confirm służy do tego, aby użytkownik coś potwierdził (stąd nazwa confirm).
Do funkcji 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.

if (confirm("Czy jesteś pewien, że chcesz kontynuować?")) {
    alert("No to kontynuuj...");
} else {
    alert("Przykro mi, że nie chcesz kontynuować...");
}

Okienko Confirm

Okienko typu prompt()

prompt("treść komunikatu", "domyślna wartość");

Do funkcji 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. Jeżeli użytkownik kliknie [ANULUJ], zostanie zwrócona wartość null, w przeciwnym razie zostanie zwrócona wartość wpisana w pole okienka.

const name = prompt("Podaj swoje imię:");

if (name) {
    alert("Witaj " + name);
} else {
    alert("Anulowałeś akcję, a okienko zwróciło " + name);
}

Okienko Prompt

Kiedy używać

Kiedy chcesz powiadomić o czymś użytkownika. Koniec.

W zasadzie nie koniec. Jeżeli chcesz coś wypisać dla siebie - np. sprawdzić wartość jakiejś zmiennej - używaj console.log(). Pamiętaj jednak, że użytkownik zazwyczaj nie będzie miał otwartego debuggera, dlatego dla niego takie informacje nie będą widoczne. Tutaj bardziej sprawdzą się powyższe okna.

A kiedy nie używać?

Nie zawsze używanie powyższych okien do komunikacji będzie dobrym rozwiązaniem. A na pewno nie idealnym.

Po pierwsze są one dość "nachalne". Gdy się pokażą, użytkownik nie ma wyjścia i musi kliknąć dany przycisk w ich wnętrzu. Dodatkowo ich wygląd nie jest przez nas stylowany, co przy wielu stronach będzie mocno problematyczne. Odwiedzasz mroczną stronę fantasy, a tu ci nagle wyskakuje biały techniczny alert - i cały klimat szlag trafia.

Kolejnym problemem jest też to, że jak wiele domyślnych funkcjonalności okna te są dość prymitywne. Nie możemy tutaj ograniczyć liczby wpisywanych znaków, nie możemy określić czy osoba powinna wpisywać tylko liczby, czy chociażby dodać maski dla pola (https://imask.js.org/).

Zamiast więc zwykłego odpalenia alert(), czasami warto posiedzieć nad kodem ciut dłużej i zrobić własny ładny modal czy popup. Wszyscy na tym zyskają. Ale do tego przydało by się poznać z działaniami na stronie.

Trening czyni mistrza

Jeżeli chcesz sobie potrenować zdobytą wiedzę, zadania znajdują się w repozytorium pod adresem: https://github.com/kartofelek007/zadania