ES6 - Hộp thoại
JavaScript hỗ trợ ba loại hộp thoại quan trọng. Các hộp thoại này có thể được sử dụng để nâng cao và cảnh báo, hoặc để xác nhận bất kỳ đầu vào nào hoặc để có một loại đầu vào từ người dùng. Ở đây chúng ta sẽ thảo luận về từng hộp thoại một.
Hộp thoại Cảnh báo
Hộp thoại cảnh báo chủ yếu được sử dụng để gửi thông báo cảnh báo đến người dùng. Ví dụ: nếu một trường nhập liệu yêu cầu nhập một số văn bản nhưng người dùng không cung cấp bất kỳ đầu vào nào, thì như là một phần của xác thực, bạn có thể sử dụng hộp cảnh báo để gửi thông báo cảnh báo.
Tuy nhiên, hộp cảnh báo vẫn có thể được sử dụng cho các tin nhắn thân thiện hơn. Hộp cảnh báo chỉ cung cấp một nút "OK" để chọn và tiếp tục.
Thí dụ
<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>Kết quả sau được hiển thị khi thực hiện thành công đoạn mã trên.
Hộp thoại xác nhận
Hộp thoại xác nhận chủ yếu được sử dụng để lấy sự đồng ý của người dùng đối với bất kỳ tùy chọn nào. Nó hiển thị một hộp thoại với hai nút: OK và Cancel.
Nếu người dùng nhấp vào nút OK, phương pháp cửa sổ confirm()sẽ trả về true. Nếu người dùng nhấp vào nút Hủy, thì xác nhận () trả về sai. Bạn có thể sử dụng hộp thoại xác nhận như sau.
Thí dụ
<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>Kết quả sau được hiển thị khi thực hiện thành công đoạn mã trên.
Hộp thoại Nhắc nhở
Hộp thoại nhắc rất hữu ích khi bạn muốn bật lên một hộp văn bản để nhận thông tin nhập của người dùng. Do đó, nó cho phép bạn tương tác với người dùng. Người dùng cần điền vào trường và sau đó nhấp vào OK.
Hộp thoại này được hiển thị bằng phương pháp có tên prompt() trong đó nhận hai tham số: (i) một nhãn mà bạn muốn hiển thị trong hộp văn bản và (ii) một chuỗi mặc định để hiển thị trong hộp văn bản.
Hộp thoại này có hai nút: OK và Cancel. Nếu người dùng nhấp vào nút OK, dấu nhắc phương thức cửa sổ () sẽ trả về giá trị đã nhập từ hộp văn bản. Nếu người dùng nhấp vào nút Hủy, phương thức cửa sổ nhắc () trả về null.
Thí dụ
<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>Kết quả sau được hiển thị khi thực hiện thành công đoạn mã trên.
