# Okna dialogowe

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

```js
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() <a href="#alert" id="alert"></a>

Wywołanie okienka **alert** ma postać

```js
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 typu confirm() <a href="#confirm" id="confirm"></a>

Wywołanie okienka **confirm** ma postać:

```js
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**.

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

## Okienko typu prompt() <a href="#prompt" id="prompt"></a>

```js
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.

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

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

## Kiedy używać <a href="#kiedy-uzywac" id="kiedy-uzywac"></a>

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.

A na koniec z pięści w oko. Bah! Warto zapoznać się z tekstem na stronie <https://css-tricks.com/choice-words-about-the-upcoming-deprecation-of-javascript-dialogs/>. W skrócie: twórcy Chrome zapowiedzieli wyłączenie powyższych okienek dla stron serwowanych w ramkach (np. Codepen i podobne). Dodatkowo pojawiły się (póki co teoretyczne) pogłoski o potencjalnym całkowitym usunięciu takich okienek.
