Hàm prompt() trong JavaScript

Bài viết này sẽ hướng dẫn bạn cách sử dụng hàm prompt() trong JavaScript.

Trong thế giới web, sẽ có rất nhiều lúc bạn cần lấy thông tin (input) từ người dùng để thực hiện các hành động khác. Hãy lấy ví dụ đơn giản hoặc tham khảo ví dụ sau đây.

Nếu bạn muốn tính EMI (Equated monthly installment – Trả góp hàng tháng): Đây là một khoản thanh toán cố định mà người đi vay phải trả cho người cho vay vào một ngày cụ thể mỗi tháng theo lịch dựa trên thời hạn vay của người dùng đó.

Bạn sẽ cần người dùng nhập các input mà bạn muốn để máy tính áp dụng vào công thức và tính toán. Với JavaScript có một cách siêu nhanh mà lại dễ, đó là sử dụng hàm prompt() trong JavaScript.

Định nghĩa hàm prompt() trong JavaScript

Hàm promt() trong JavaScript được sử dụng để hiển thị hộp thoại thông báo nhắc người dùng nhập vào dữ liệu dưới dạng văn bản. Khi hộp thoại thông báo hiện lên, nó sẽ đợi cho đến khi người dùng gửi văn bản đó hoặc từ chối nhập dữ liệu và huỷ hộp thoại. Lúc đó, hộp thoại thông báo sẽ bị đóng.

Trong một số trường hợp, ví dụ: khi người dùng chuyển đổi các tab, trình duyệt có thể không thực sự hiển thị hộp thoại hoặc có thể không đợi người dùng gửi văn bản hoặc hủy hộp thoại.

Hộp thoại thông báo này không chứa bất cứ HTML hay CSS nào, nó hiển thị như thế nào phụ thuộc vào hệ điều hành và trình duyệt người dùng đang sử dụng.

Nội dung thông báo tới người dùng thường là các câu hỏi để lấy dữ liệu từ người dùng như “Bạn tên là gì?”, “Bạn bao nhiêu tuổi?”, “Bạn học trường gì?”,…

Cú pháp hàm prompt() trong JavaScript

Cú pháp:

window.prompt(message, default);Code language: JavaScript (javascript)

Bạn cũng có thể thay thế window.prompt() bằng prompt(), vì khi bỏ tiền tố window đi thì JavaScript vẫn hiểu rằng bạn đang muốn hiển thị hộp thoại thông báo.

prompt(message, default);
prompt(message);
prompt();Code language: JavaScript (javascript)

Trong đó, message là một chuỗi chứa thông tin mà bạn muốn hiển thị cho người dùng, default là một chuỗi chứa giá trị mặc định được hiển thị trong trường nhập văn bản. Lưu ý rằng trong Internet Explorer 7 và 8, nếu bạn không cung cấp tham số này, thì chuỗi “undefined” là giá trị mặc định. Và 2 tham số này KHÔNG BẮT BUỘC.

Hàm prompt() trong JavaScript trả về một chuỗi văn bản do người dùng nhập hoặc null nếu họ không nhập.

Ví dụ: Hiển thị một thông báo

prompt("Bạn thích con vật gì nhất?");Code language: JavaScript (javascript)

Rất đơn giản phải không nào!

Ví dụ về hàm prompt() trong JavaScript

Đầu tiên, chúng ta sẽ ứng dụng 3 dòng lệnh về hàm prompt() trong JavaScript đã được định nghĩa trong phần trước nhé!

Ví dụ 1: Sử dụng cả 2 tham số message và default

// prompt(message, default);
prompt("Bao giờ mới giàu đây?", "10 năm nữa");Code language: JavaScript (javascript)

Ví dụ 2: Sử dụng tham số message

// prompt(message);
prompt("Bao giờ mới giàu đây?");Code language: JavaScript (javascript)

Ví dụ 3: Không sử dụng bất cứ tham số nào

// prompt();
prompt();Code language: JavaScript (javascript)

Qua 3 ví dụ trên, ta chỉ cần lưu ý, với tham số default, nó sẽ là giá trị mặc định và thay đổi khi người dùng thay đổi văn bản. Còn tham số message, nếu có sẽ giúp người dùng hiểu được bạn đang muốn làm gì.

Tiếp theo là ví dụ về phần văn bản sau khi người dùng gửi văn bản hoặc huỷ hộp thoại.

Ví dụ 4: Gửi văn bản hoặc huỷ hộp thoại

Trong ví dụ này, người dùng được yêu cầu nhập tên của mình vào hộp thoại, mặc định là “Harry Potter”. Nếu người dùng để trống tên hoặc huỷ hộp thoại, dòng chữ “Buồn quá, bạn không muốn nhập tên!” sẽ hiển thị. Ngược lại sẽ là lời chào “Xin chào” cùng với tên của bạn.

let person = prompt("Mời bạn nhập tên của mình", "Harry Potter");
let text;
if (person == null || person == "") {
  text = "Buồn quá, bạn không muốn nhập tên!";
} else {
  text = "Xin chào " + person + "!";
}
console.log(text);Code language: JavaScript (javascript)

Result:

Bạn hãy thử các trường hợp mình đã nêu ở trên để kiểm chứng cách hoạt động của hàm prompt() trong JavaScript nhé!

Ví dụ 5: Sử dụng hàm prompt() cho nhiều dữ liệu

Mỗi lần chạy, hàm prompt() chỉ có thể lấy duy nhất 1 chuỗi văn bản. Vì vậy, nếu bạn muốn lấy nhiều dữ liệu, bạn phải hiển thị thông báo nhiều lần để yêu cầu người dùng nhập dữ liệu.

let diemToan = prompt("Mời nhập điểm Toán");
let diemVan = prompt("Mời nhập điểm Văn");
let diemAnh = prompt("Mời nhập điểm Anh");

// Ép kiểu từ String sang Number
let diemTrungBinh = (Number(diemToan) + Number(diemVan) + Number(diemAnh)) / 3;

// Lấy chữ số thập phân đầu tiên sau dấu phẩy
console.log(diemTrungBinh.toFixed(1));Code language: JavaScript (javascript)

Trong ví dụ này, chúng ta sẽ tính điểm trung bình dựa trên điểm 3 môn Toán, Văn, Anh. Kết quả sẽ tính đến chữ số thập phân đầu tiên sau dấu phẩy. Vì giá trị trả về của hàm prompt() là một chuỗi nên để tính toán được, bạn cần chuyển đổi kiểu dữ liệu từ chuỗi sang số (String sang Number). Nếu không, kết quả sẽ trả về NaN (Not a Number).

Result:

Xem thêm về Ép kiểu trong JavaScript tại đây!

Kết luận

Hàm prompt() trong JavaScript sẽ hiển thi hộp thoại thông báo khi muốn lấy thông tin (input) từ người dùng để thực hiện các hành động khác. Chắc chắn bạn sẽ sử dụng hàm này nhiều trong quá trình học. Vì vậy, hãy ghi nhớ các cách dùng và trường hợp sử dụng.f

Cảm ơn bạn đã đọc!

Các bạn có thể tham khảo các bài viết hay về JavaScript tại đây.

---

Hãy tham gia nhóm Học lập trình để thảo luận thêm về các vấn đề cùng quan tâm.

TỔNG HỢP TÀI LIỆU HỌC LẬP TRÌNH CƠ BẢN CHO NGƯỜI MỚI BẮT ĐẦU

KHOÁ HỌC BOOTCAMP JAVA/PHP/.NET TRỞ THÀNH LẬP TRÌNH VIÊN TRONG 5-6 THÁNG