Okna dialogowe w JavaScript

Dzisiaj zaprezentuje Ci temat okien dialogowych w JavaScript. Co prawda, kilka razy w kursie używaliśmy prostych okien do wyświetlenia komunikatów, lecz nigdy nie zagłębialiśmy się w szczegóły. Uznałem, że warto abyś również wiedział trochę więcej na ten temat.

Na początek, może o tym czym są okna dialogowe. Okno dialogowe z ang. popup, czyli wyskakujące okno, często wykorzystywane w testowych skryptach (o czym już się przekonałeś, bo kilka razy dzięki nim wyświetlałem Ci jakąś wiadomość), lecz w prawdziwych aplikacjach nie powinno się ich zbyt często używać, ponieważ mogą nieco irytować użytkownika naszej witryny. Często zamiast, okien dialogowych lepiej wyświetlić jakiś komunikat na przykład innym kolorem czcionki lub okno które nie będzie oczekiwało interakcji ze strony użytkownika. Mimo to warto jednak, żebyś wiedział jak działają te podstawowe okna dialogowe w JS. W JavaScript okna dialogowe możemy podzielić na 3 grupy: wyświetlające komunikat, oczekujące potwierdzenia przez użytkownika lub oczekujące wpisania wartości przez użytkownika.

Zacznijmy od najprostszego okna dialogowego, które możesz wyświetlić za pomocą metody alert(). Jako argument przekazujesz treść komunikatu, który chcesz wyświetlić.

alert('Dzień dobry!');

Na ekranie pojawi się wpisany przez Ciebie komunikat oraz przycisk OK. W zależności od przeglądarki wygląd okna dialogowego może się nieco różnić. W momencie wyświetlania okna dialogowego strona jest "zamrożona", tzn. nie można wykonywać żadnych innych operacji do momentu kliknięcia przycisku OK.

okno dialogowe alert

Kolejne okno dialogowe możemy wyświetlić za pomocą metody confirm(). Takie okno można zastosować do potwierdzenia jakiejś czynności. Podobnie jak w metodzie alert, tutaj jako argument również przekazujesz treść komunikatu. W tym jednak przypadku zostaną wyświetlone 2 przyciski OK oraz Cancel (lub Anuluj). Jeśli użytkownik kliknie w OK, zostanie zwrócona prawda, czyli true, jeśli kliknie w Cancel zostanie zwrócony fałsz, czyli false. Wartość możesz przypisać do zmiennej:

let del = confirm('Czy na pewno chcesz usunąć rekord?');
//Ok - del = true
//Cancel - del = false

Lub użyć bezpośrednio w instrukcji warunkowej:

if(confirm('Czy na pewno chcesz usunąć rekord?')) {
    //instrukcje gdy OK
} else {
    //instrukcje gdy Cancel
}

Ostatnie okno dialogowe jest wyświetlane za pomocą metody prompt(). Okno wyświetlone za pomocą takiej metody zawiera pole tekstowe do wpisania wartości przez użytkownika oraz 2 przyciski OK oraz Cancel. Jeżeli użytkownik kliknie w przycisk OK, zostaje wtedy zwrócona wartość z pola tekstowego, jeżeli kliknie w Cancel zostaje zwrócony null. Możesz wywołać tą metodę z 1 lub 2 argumentami. Gdy przekazujesz tylko 1 argument, będzie to tylko treść komunikatu.

let name = prompt('Jak masz na Imię?');
if(name != null) {
    alert(`Cześć ${name}.`);
}

A gdy przekażesz 2 argumenty, zostanie wówczas nadana domyślna wartość pola tekstowego.

let defaultName = prompt('Jak masz na Imię?', 'Janek');

To wszystko co chciałem Ci przekazać w tym artykule. Zapraszam Cię do kolejnych artykułów z serii podstaw programowania w języku JavaScript.

Poprzedni artykuł - Blokowanie domyślnej akcji zdarzenia w JavaScript.
Następny artykuł - Walidacja pesel w JavaScript.

Blog Dla Młodszych Programistów C#/.NET

Dodaj komentarz

Wyszukiwarka

Tagi

Najnowsze artykuły

Losowe artykuły