Hộp thoại - Alert, Prompt, Confirmation trong JavaScript
JavaScript hỗ trợ 3 kiểu hộp thoại quan trọng. Những hộp thoại này có thể được sử dụng để thông báo, xác nhận input, hoặc nhận input từ người dùng. Dưới đây chúng ta bàn luận từng kiểu hộp thoại một. Hộp thoại thông báo (Alert) Một hộp thoại thông báo (Alert Dialog Box) được sử dụng ...
JavaScript hỗ trợ 3 kiểu hộp thoại quan trọng. Những hộp thoại này có thể được sử dụng để thông báo, xác nhận input, hoặc nhận input từ người dùng. Dưới đây chúng ta bàn luận từng kiểu hộp thoại một.
Hộp thoại thông báo (Alert)
Một hộp thoại thông báo (Alert Dialog Box) được sử dụng phổ biến nhất để cảnh báo tới người dùng. Ví dụ, nếu một trường input yêu cầu nhập một vài văn bản nhưng người dùng không cung cấp bất kỳ đầu vào nào, thì khi đó như là một phần của xác nhận, bạn có thể sử dụng hộp thoại thông báo để đưa một cảnh báo.
Tuy nhiên, một hộp thông báo có thể vẫn được sử dụng cho các thông báo thân thiện hơn. Hộp thông báo chỉ cung cấp một nút OK để chọn và tiếp tục.
Ví dụ
<html>
<head>
<script type="text/javascript">
</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ả
Hộp thoại xác nhận (Confirmation)
Một hộp thoại xác nhận (Confirmation Dialog) được sử dụng phổ biến nhất để nhận sự đồng ý của người dùng trên 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 click vào nút OK, phương thức confirm() sẽ trả về true. Nếu người dùng click nút Cancel, thì confirm() trả về false. Bạn có thể sử dụng một hộp thoại xác nhận như sau:
Ví dụ
<html>
<head>
<script type="text/javascript">
</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ả
Hộp thoại gợi ý (Prompt)
Hộp thoại gợi ý (Prompt Dialog Box) là rất hữu ích khi bạn muốn pop-up một hộp văn bản để nhận input từ người dùng. Vì thế, nó cho bạn khả năng tương tác với người dùng. Người dùng cần điền thông tin vào trường đó và sau đó nhấn OK.
Hộp thoại này được hiển thị bởi sử dụng một phương thức là prompt() mà nhận hai tham số: (i) Một label 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ấn vào nút OK, phương thức prompt() sẽ trả về giá trị đã nhập từ hộp văn bản. Nếu người dùng nhấn nút Cancel, phương thức prompt() trả về null.
Ví dụ
Sau đây là ví dụ chỉ cách sử dụng một hộp thoại Prompt.
<html>
<head>
<script type="text/javascript">
</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ả
Loạt bài hướng dẫn học lập trình Javascript cơ bản và nâng cao của chúng tôi dựa trên nguồn tài liệu của: Tutorialspoint.com
Follow fanpage của team hoặc facebook cá nhân Nguyễn Thanh Tuyền để tiếp tục theo dõi các loạt bài mới nhất về Java,C,C++,Javascript,HTML,Python,Database,Mobile.... mới nhất của chúng tôi.
Các bài học JavaScript khác tại VietJack:
