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ę
