Podstawowe okna dialogowe w JavaScript

Autor podstrony: Krzysztof Zajączkowski

Stronę tą wyświetlono już: 6555 razy

Wstęp

W JavaScript dostępne są podstawowe okna dialogowe, które wywoływane są za pomocą metod obiektu window. Dla ułatwienia życia programistów umożliwiono korzystanie z tych metod bez konieczności wywoływania ich z poziomu tego obiektu.

Okno dialogowe alert box (ostrzeżenia)

Okno dialogowe alert box umożliwia wyświetlenie jakiegoś komunikatu. Okienko to dysponuje jednym przyciskiem OK a do jego wywołania służy metoda alert. Oto przykład z tworzonym w JavaScript przyciskiem:

var button = document.createElement("BUTTON"); // tworzę przycisk w locie button.onclick = function(){ alert("Kliknąłeś przycisk, ty draniu!"); // wywołuję okno dialogowe }; // dodaję mu funkcję uruchamianą na zdarzenie kliknięcia button.id = "alert"; // ustawiam mu id var text = document.createTextNode("Kliknij by zobaczyć alert box"); // tworzę tekst node dla przycisku button.appendChild(text); // ustawiam tekst przycisku (dodaję text node) document.getElementById("strona").appendChild(button); // wrzucam przycisk na moją stronę

Oczywisty rezultat:

Okno dialogowe confirm box (potwierdzenia)

Wszędzie tam, gdzie użytkownik musi coś zatwierdzić z odsieczą pędzi okno dialogowe confirm box, które dysponuje aż dwoma przyciskami: OK i Anuluj. Metoda ta zwraca true gdy kliknięty zostanie przycisk OK, zaś false, gdy wciśnięty zostanie przycisk Anuluj. Do wywołania tego zacnego okna dialogowego służy metoda confirm. Oto przykładowy kod:

var button = document.createElement("BUTTON"); // tworzę przycisk w locie button.onclick = function(){ var confirmValue = confirm("Przyznaj się, przyznaj, że głosowałeś na Komorowskiego!"); // wywołuję okno dialogowe if(confirmValue){ alert("Wiedziałem!!!"); }else{ alert("To bardzo dobrze, tak trzymaj."); } }; // dodaję mu funkcję uruchamianą na zdarzenie kliknięcia button.id = "confirm"; // ustawiam mu id var text = document.createTextNode("Kliknij by zobaczyć confirm box"); // tworzę tekst node dla przycisku button.appendChild(text); // ustawiam tekst przycisku (dodaję text node) document.getElementById("strona").appendChild(button); // wrzucam przycisk na moją stronę

Oczywisty rezultat:

Okno dialogowe input box (pobierania danych)

Jeśli potrzebne ci jest okienko do wprowadzania danych przez użytkownika, to input box jest twoim rozwiązaniem. Okno to można wywołać za pomocą metody prompt, która zwraca wpisaną przez użytkownika wartość. Oto przykład:

var button = document.createElement("BUTTON"); // tworzę przycisk w locie button.onclick = function(){ var name = prompt("O twą godność cię poproszę:"); // wywołuję okno dialogowe var from = prompt("A więc " + name + " się nazywasz, powiedz jeszcze skąd przybywasz:"); alert("Jesteś " + name + " z " + from + ". Tak więc grzecznie witam cię."); }; // dodaję mu funkcję uruchamianą na zdarzenie kliknięcia button.id = "confirm"; // ustawiam mu id var text = document.createTextNode("Kliknij by zobaczyć confirm box"); // tworzę tekst node dla przycisku button.appendChild(text); // ustawiam tekst przycisku (dodaję text node) document.getElementById("strona").appendChild(button); // wrzucam przycisk na moją stronę
Propozycje książek