Okienka dialogowe w JavaScript

JavaScript umożliwia proste interakcje z użytkownikiem poprzez wbudowane okienka dialogowe:

• alert – wyświetla małe okienko z komunikatem i przyciskiem OK. Służy do przekazywania informacji użytkownikowi.
• prompt – wyświetla okienko z pytaniem (komunikatem) i polem tekstowym, do którego użytkownik może wpisać odpowiedź, oraz przyciskami OK i Anuluj. Zwraca tekst wpisany przez użytkownika (lub null, jeśli użytkownik anulował).
• confirm – wyświetla pytanie z przyciskami OK (tak) i Anuluj (nie). Zwraca true jeśli użytkownik wciśnie OK, lub false jeśli Anuluj.

Te proste funkcje pozwalają szybko uzyskać dane od użytkownika lub pokazać mu komunikat. W nowoczesnych aplikacjach często zastępuje się je własnymi elementami interfejsu (np. modalami), ale jako podstawy warto je znać.

Przykłady

Przykład 1: Wprowadzenie imienia (prompt) i powitanie (alert)

let imie = prompt("Jak masz na imię?");
if (imie !== null) {
    alert("Miło Cię poznać, " + imie + "!");
} else {
    alert("Nie podano imienia.");
}

Najpierw wyświetlamy użytkownikowi pytanie o imię. Zmienna imie przechowa wpisany tekst. Sprawdzamy, czy nie jest null (czyli czy użytkownik nie anulował okienka). Jeśli wszystko w porządku, pokazujemy powitanie za pomocą alert. Jeśli użytkownik anulował, również informujemy o braku danych.

Przykład 2: Potwierdzenie akcji (confirm)

let czyUsunac = confirm("Czy na pewno chcesz usunąć konto?");
if (czyUsunac) {
    console.log("Konto zostało usunięte.");
} else {
    console.log("Anulowano usuwanie konta.");
}

W tym przypadku confirm zwraca wartość logiczną zależną od decyzji użytkownika. Używamy tej wartości w instrukcji if – jeśli użytkownik potwierdził (true), wykonujemy odpowiednią akcję, a jeśli nie (false) – wykonujemy alternatywną ścieżkę.

Obsługa danych z prompt

Należy pamiętać, że wynik prompt zawsze jest stringiem (lub null). Jeśli oczekujemy liczby, musimy ręcznie przekonwertować typ (np. używając Number()).

// Przykład konwersji:
let wiek = Number(prompt("Podaj wiek:"));
// jeśli użytkownik wpisał cyfry, zmienna 'wiek' będzie liczbą, w przeciwnym razie NaN

Wywołanie prompt("Podaj wiek:") zwróci wartość tekstową, nawet jeśli użytkownik wpisał cyfry. Dopiero Number(prompt("Podaj wiek:")) da nam liczbę (lub NaN, jeśli wpisano coś, co nie jest liczbą).

Mini-quiz (pomysł)

Możemy wykorzystać te proste okienka do zbudowania mini-quizu lub dialogu z użytkownikiem. Przykład działania:

• Pytamy prompt("Ile to 2 + 2?") i zapisujemy odpowiedź.
• Jeśli odpowiedź to "4", wyświetlamy alert("Brawo, dobra odpowiedź!"), w przeciwnym razie alert("Niestety, to błędna odpowiedź.").

Możesz rozbudować quiz o więcej pytań, wyświetlając kolejne prompty po sobie i zliczając poprawne odpowiedzi.

Ćwiczenia

1. Poproś użytkownika o imię (funkcja prompt), a następnie wyświetl powitanie z użyciem tego imienia (np. "Cześć, [imię]!") za pomocą alert. Zadbaj o to, by nie wyświetlać pustego powitania, jeśli użytkownik nic nie wpisał (anulował dialog).
2. Napisz skrypt, który zapyta użytkownika o dwie liczby (dwa osobne prompt), a następnie obliczy ich sumę i wyświetli wynik w okienku alert. Pamiętaj o konwersji tekstu na liczbę przy dodawaniu!
3. Wykorzystaj confirm, aby zapytać użytkownika, czy na pewno chce wylogować się z serwisu (np. "Czy na pewno chcesz się wylogować?"). W zależności od odpowiedzi, wypisz w konsoli albo komunikat "Wylogowano pomyślnie.", albo "Anulowano wylogowanie.".
4. (Mini-quiz) Za pomocą prompt zadaj użytkownikowi proste pytanie (np. matematyczne albo ze znajomości stolicy kraju). Sprawdź, czy odpowiedź jest poprawna (porównaj z oczekiwaną wartością). Wyświetl alert z informacją zwrotną: pozytywną, jeśli odpowiedział dobrze, lub poprawną odpowiedzią, jeśli źle. Możesz rozbudować quiz o więcej pytań, wyświetlając kolejne prompty po sobie i zliczając poprawne odpowiedzi.