1. Dom Popup trong JavaScript là gì?

Dom Popup trong Js là tính năng hiển thị một hộp thoại mà thường thấy khi sử dụng một trang web. Những tính năng như hiển thị popup để lấy thông tin người dùng hoặc hiển thị popup thông báo rất là phổ biến. Trong Js , có 3 loại popup khác nhau và cả 3 đều có mục đích khác nhau:

  • Hộp cảnh báo : Alert
  • Hộp xác nhận : Confirm
  • Hộp nhắc nhở : Prompt

Một khi hộp thoại xuất hiện, Js ngừng thực thi mã bên dưới mã hộp cho đến khi hộp được đóng lại. Giao diện của ba cửa sổ bật lên này được xác định bởi các loại trình duyệt khác nhau. CSS sẽ không thể sửa đổi các hộp này .

2. Hộp cảnh báo trong JavaScript

Hộp cảnh báo hiển thị các thông báo nhỏ. Nó chứa một nút OK . Để tạo một hộp cảnh báo ta sử dụng alert() . Việc thực thi mã Js bên dưới mã cảnh báo bị dừng cho đến khi nhấp vào nút OK . Kiểu thông báo này bạn chỉ có thể cung cấp thông điệp cho người dùng mà popup sẽ hiển thị. Thông báo này thì nó có thể hiển thị tất cả các loại kiểu dữ liệu như là chuỗi, số, boolean, …. Mà không cần chuyển đổi thành kiểu mới hiển thị được.

Cú pháp :

// Cách 1:
window.alert(content);

// Cách 2:
// Vì window là global object nên bạn có thể
// gọi đến alert như thế này luôn
alert(content);

Trong đó:

  • window : Đối tượng window là cửa sổ trình duyệt
  • alert() : Là hàm hiển thị thông báo cho người dùng
  • content : Là nội dung muốn hiển thị ra màn hình

Ví dụ:

<button onclick="myFunction()">Click</button>

<script>
function myFunction() {
  alert("Bạn đang học Js tại Lập Trình Từ Đầu");
}
</script>

3. Hộp xác nhận trong JavaScript

Hộp xác nhận được sử dụng để tương tác với người dùng. Nó nhận đầu vào từ người dùng dưới dạng xác nhận, cho dù một nhiệm vụ có nên được thực hiện hay không. Popup này sẽ có hai nút cho người dùng lựa chọn đó là OK và Cancel . Tham số truyền vào chính là nội dung thông báo. Hộp xác nhận tương tự như một hộp cảnh báo nhưng nó có thể trả về boolean, được sử dụng để biết người dùng đã thực hiện hành động nào để xác nhận. Khi chọn OK thì nó sẽ trả về True và Cancel thì sẽ trả về False . Để tạo một hộp xác nhận ta sử dụng confirm()

Cú pháp :

// Cách 1:
window.confirm(content);

// Cách 2:
confirm(content);

Trong đó:

  • window : Đối tượng window là cửa sổ trình duyệt
  • confirm() : Là hàm hiển thị thông báo cho người dùng và có hai nút OK và Cancel
  • content : Là nội dung bạn muốn hiển thị ra màn hình

Ví dụ:

<button onclick="myFunction()">Click</button>

<p id="demo"></p>

<script>
function myFunction() {
  var txt;
  if (confirm("Nhấn nút!")) {
    txt = "Bạn đã nhấn OK!";
  } else {
    txt = "Bạn đã nhấn Hủy!";
  }
  document.getElementById("demo").innerHTML = txt;
}
</script>

4. Hộp lời nhắc trong JavaScript

Hộp lời nhắc này được sử dụng để hiển thị thông báo cho người dùng nhập vào một thông tin. Popup này sẽ có hai nút cho người dùng OK và Cancel . Kiểu thông báo này rất đơn giản nó bao gồm một trường văn bản để người dùng nhập thông tin. Khi người dùng nhấn vào OK thì sẽ trả về nội dung được nhập trên trường văn bản. Ngược lại nếu nhấn vào nút Cancel sẽ trả về null . Để tạo một hộp lời nhắc ta sử dụng prompt()

Cú pháp : prompt(message, defaultValue);

Trong đó:

  • prompt() : là hàm hiển thị cho người dùng nhập vào, có trường văn bản và hai nút OK , Cancel
  • message : là thông điệp cho người dùng
  • defaultValue : là giá trị mặc định được điền sẵn vào trường văn bản

Ví dụ: lấy giá trị người dùng và in ra tổng của chúng

<p id="sum"></p>
<button onclick="sum()">Nhập giá trị</button>

<script>
  function sum() {
    var num1 = prompt("Enter 1st number:"); // lấy đầu vào
    var num2 = prompt("Enter 2nd number:"); // lấy đầu vào
    num1 = parseInt(num1); 
    num2 = parseInt(num2);
    var sum = num1 + num2;
    document.getElementById("sum").innerHTML = "Tổng = " + sum;
  }
</script>