ES6 - Okna dialogowe
JavaScript obsługuje trzy ważne typy okien dialogowych. Te okna dialogowe mogą być używane do zgłaszania i ostrzegania, lub do uzyskiwania potwierdzenia dowolnego wejścia lub do uzyskania pewnego rodzaju wkładu od użytkowników. Tutaj omówimy każde okno dialogowe po kolei.
Okno dialogowe alertów
Okno dialogowe ostrzeżenia jest najczęściej używane do wysyłania ostrzeżeń do użytkowników. Na przykład, jeśli jedno pole wejściowe wymaga wprowadzenia tekstu, ale użytkownik nie wprowadza żadnych danych wejściowych, wówczas w ramach walidacji można użyć pola ostrzegawczego, aby wysłać wiadomość ostrzegawczą.
Niemniej jednak, w przypadku bardziej przyjaznych wiadomości nadal można używać pola ostrzegawczego. Okno alertów zawiera tylko jeden przycisk „OK” do wyboru i kontynuowania.
Przykład
<html>
<head>
<script type = "text/javascript">
function Warn() {
alert ("This is a warning message!");
document.write ("This is a warning message!");
}
</script>
</head>
<body>
<p>Click the following button to see the result: </p>
<form>
<input type = "button" value = "Click Me" onclick = "Warn();" />
</form>
</body>
</html>Poniższe dane wyjściowe są wyświetlane po pomyślnym wykonaniu powyższego kodu.
Okno dialogowe potwierdzenia
Okno dialogowe potwierdzenia jest najczęściej używane do wyrażenia zgody użytkownika na dowolną opcję. Wyświetla okno dialogowe z dwoma przyciskami: OK i Anuluj.
Jeśli użytkownik kliknie przycisk OK, metoda okna confirm()zwróci prawdę. Jeśli użytkownik kliknie przycisk Anuluj, to confirm () zwraca false. Możesz użyć okna dialogowego potwierdzenia w następujący sposób.
Przykład
<html>
<head>
<script type = "text/javascript">
function getConfirmation(){
var retVal = confirm("Do you want to continue ?");
if( retVal == true ){
document.write ("User wants to continue!");
return true;
} else {
Document.write ("User does not want to continue!");
return false;
}
}
</script>
</head>
<body>
<p>Click the following button to see the result: </p>
<form>
<input type = "button" value = "Click Me" onclick = "getConfirmation();" />
</form>
</body>
</html>Poniższe dane wyjściowe są wyświetlane po pomyślnym wykonaniu powyższego kodu.
Okno dialogowe monitu
Okno dialogowe zachęty jest bardzo przydatne, gdy chcesz wyświetlić pole tekstowe, aby uzyskać dane wejściowe użytkownika. W ten sposób umożliwia interakcję z użytkownikiem. Użytkownik musi wypełnić pole, a następnie kliknąć OK.
To okno dialogowe jest wyświetlane przy użyciu metody o nazwie prompt() który przyjmuje dwa parametry: (i) etykietę, którą chcesz wyświetlić w polu tekstowym oraz (ii) domyślny ciąg znaków do wyświetlenia w polu tekstowym.
W tym oknie dialogowym znajdują się dwa przyciski: OK i Anuluj. Jeśli użytkownik kliknie przycisk OK, zachęta do metody okna () zwróci wprowadzoną wartość z pola tekstowego. Jeśli użytkownik kliknie przycisk Anuluj, zachęta do metody okna () zwróci wartość null.
Przykład
<html>
<head>
<script type = "text/javascript">
function getValue(){
var retVal = prompt("Enter your name : ", "your name here");
document.write("You have entered : " + retVal);
}
</script>
</head>
<body>
<p>Click the following button to see the result: </p>
<form>
<input type = "button" value = "Click Me" onclick = "getValue();" />
</form>
</body>
</html>Poniższe dane wyjściowe są wyświetlane po pomyślnym wykonaniu powyższego kodu.
