Nhận thông tin đầu vào của người dùng bằng JavaScript – cách lấy đầu vào của người dùng trong javascript

Làm cách nào để bạn lấy dữ liệu đầu vào từ người dùng trong JavaScript.

Bạn đang xem : cách nhận thông tin nhập của người dùng trong javascript

Bài viết này sẽ giúp bạn hiểu cách nhận thông tin nhập của người dùng trong JavaScript.

Có hai cách để nhận thông tin nhập của người dùng trong JavaScript, tùy thuộc vào việc bạn muốn nhập từ trình duyệt hay NodeJS. Hướng dẫn này sẽ giúp bạn tìm hiểu cả hai.

Lấy thông tin nhập của người dùng từ Bảng điều khiển trình duyệt

Để yêu cầu người dùng nhập từ trình duyệt, bạn phải sử dụng phương thức prompt () do trình duyệt cung cấp. Phương thức này cho phép bạn chấp nhận đầu vào của người dùng dưới dạng một chuỗi và lưu trữ nó trên một biến như vậy:

  const input = prompt ();
 

Phương thức này cũng chấp nhận một chuỗi làm thông tin bổ sung để biết ứng dụng mong đợi đầu vào nào.

Ví dụ: đoạn mã sau để nhắc tên người dùng được viết bên dưới :

  const input = prompt ("Tên bạn là gì?");
alert (`Tên của bạn là $ {input}`);
 

Phương thức alert () hiển thị kết quả. Bạn có thể tạo kiểu văn bản dòng dưới dạng câu hỏi hoặc gợi ý theo yêu cầu của mình.

Lấy thông tin nhập của người dùng từ NodeJS Console

Để chấp nhận thông tin nhập của người dùng từ bảng điều khiển NodeJS, bạn phải sử dụng mô-đun readline được cung cấp.

Bạn có thể sử dụng các lệnh sau như request () từ mô-đun như hình dưới đây:

  const readline = request ("readline");
 

Sau đó, bạn cần khởi tạo giao diện được đính kèm với luồng đầu vào. Sử dụng phương thức readline.createInterface () để tạo giao diện và chuyển các tham số đầu vào và đầu ra làm đối số đối tượng.

Việc ghi đầu vào và đầu ra yêu cầu ghi đầu vào vào process.stdin và xuất ra process.stdout .

Đây là ví dụ về cách tạo giao diện readline .

 < code class = "language-javascript"> const readline = request ("readline");

const ql = readline.createInterface ({
  đầu vào: process.stdin,
  đầu ra: process.stdout,
});
 

Phương thức question () phải được gọi trên phiên bản giao diện được gán cho biến q1 trong đoạn mã trên để yêu cầu người dùng nhập .

Phương thức question () nhận hai tham số.

  • Chuỗi câu hỏi bạn muốn hỏi người dùng.
  • Một hàm gọi lại sẽ được thực thi khi nhận được phản hồi và phản hồi được chuyển đến hàm

Bạn có thể bỏ qua đối tượng tham số và chuyển hàm gọi lại làm tham số thứ hai.

Cuối cùng, bạn có thể đóng giao diện q1 bằng cách gọi phương thức q1.close () trong hàm gọi lại.

arr .js :

  const readline = request ("readline");

const q1 = readline.createInterface ({
  đầu vào: process.stdin,
  đầu ra: process.stdout,
});

q1.question ("Bạn sống ở đâu?", function (answer) {
  console.log (`Ồ, vậy là bạn sống ở $ {answer}`);
  console.log ("Giao diện đã đóng");
  q1.close ();
});
 < / h2> 

Trước tiên, bạn cần cài đặt mô-đun prompt-sync bằng NPM hoặc Yarn như sau:

  npm install đồng bộ hóa nhanh chóng
hoặc
sợi thêm đồng bộ hóa nhanh chóng
 

Sau đó, bạn cần mô-đun request () để nhắc-đồng bộ hóa .

Hãy xem mã bên dưới.

pm.js :

  const prompt = request ("prompt-sync") ();
const input = prompt ("Bạn sống ở đâu?");

console.log (`Ồ, vậy là bạn sống ở $ {input}`);
 

Bởi vì phương thức này là đồng bộ, phiên bản Node sẽ đợi đầu vào trước khi thực hiện dòng tiếp theo.

Viết cho chúng tôi

Các bài viết về DelftStack được viết bởi những người yêu thích phần mềm như bạn. Nếu bạn cũng muốn đóng góp cho DelftStack bằng cách viết các bài báo trả phí, bạn có thể xem trang viết cho chúng tôi .


Xem thêm những thông tin liên quan đến chủ đề cách lấy đầu vào của người dùng trong javascript

Saving User Input in JS Objects

  • Tác giả: Steve Griffith - Prof3ssorSt3v3
  • Ngày đăng: 2019-02-05
  • Đánh giá: 4 ⭐ ( 6855 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Frequently you will need to take information that a user types in a form and save that in a JavaScript object to be used later.
    This tutorial explains exactly how that would work as well as how to put that information into localStorage.

    Code GIST: https://gist.github.com/prof3ssorSt3v3/52ebd432bb7b8a155985a2f82509541d

Kiểm tra dữ liệu trong form với javascript

  • Tác giả: longnv.name.vn
  • Đánh giá: 5 ⭐ ( 3173 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Kiểm tra dữ liệu trong form với javascript là công việc quan trọng thường phải thực hiện của web dev, để kiểm tra tính đúng đắn của dữ liệu.

Cách lấy vị trí người dùng trong Javascript với Geolocation API

  • Tác giả: vntalking.com
  • Đánh giá: 5 ⭐ ( 6631 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Bài viết này mình sẽ hướng dẫn các bạn cách lấy vị trí người dùng bằng một API của Javascript. Đây là API được hỗ trợ bởi tất cả các trình duyệt.

Hướng dẫn dùng JavaScript để lấy dữ liệu fetch API từ ngân hàng UK

  • Tác giả: hocweb.vn
  • Đánh giá: 5 ⭐ ( 4468 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Trong bài viết này, tôi sẽ trình bày một ví dụ đơn giản về cách lấy dữ liệu bằng JavaScript từ API bằng phương thức fetch () và sau đó đổ dữ liệu vào trang web.

outerHTML trong JavaScript và cách lấy hoặc thay thế toàn bộ lệnh HTML của Element

  • Tác giả: laptrinhcanban.com
  • Đánh giá: 4 ⭐ ( 5020 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Hướng dẫn cách sử dụng outerHTML trong JavaScript. Bạn sẽ biết cách sử dụng thuộc tính outerHTML để lấy cũng như cách thay thế toàn bộ các lệnh HTML dùng để mô tả Element lẫn các Element con cháu sau

Nhận đầu vào từ người dùng trong Java

  • Tác giả: freetuts.net
  • Đánh giá: 4 ⭐ ( 7109 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Trong bài tập này chúng ta sẽ thực hiện một chương trình để nhận đầu vào từ người dùng bằng cách sử dùng lớp Scanner trong Java.

Validate Form Bằng Javascript Như Thế Nào?

  • Tác giả: codelearn.io
  • Đánh giá: 4 ⭐ ( 2361 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Các thông tin mà người dùng nhập vào biểu mẫu cần phải được xác thực để đảm bảo sự hợp lý của dữ liệu Vậy làm thế nào để Validate Form với Javascript?

Xem thêm các bài viết khác thuộc chuyên mục: Kiến thức lập trình

Xem Thêm  Làm thế nào để vô hiệu hóa các phần tử và các phần tử bị vô hiệu hóa kiểu? - nút tắt kiểu css