Trong các ví dụ trên, các giá trị được gán cho các biến bởi bạn, người tạo trang web
Tuy nhiên, tính hữu ích thực sự của JavaScript là khả năng nắm bắt và thao tác các giá trị do khách truy cập vào trang web nhập vào
Cách phổ biến nhất để nắm bắt các giá trị do người dùng nhập trên trang web là sử dụng hộp nhập HTML
Loại văn bản có nghĩa là trường có thể được sử dụng để nắm bắt bất kỳ ký tự bàn phím nào, chẳng hạn như chữ cái, số, dấu cách hoặc ký hiệu tiền tệ
Nắm bắt thông tin từ khách truy cập trang web chỉ là bước đầu tiên của quy trình hai bước
Thứ hai là gán giá trị đã nhập cho một biến trong mã JavaScript. Để làm điều đó, bạn cần cung cấp một id duy nhất cho trường đầu vào. Trong ví dụ ở trên, id là fName cho 'First Name'
Trong JavaScript, sau đó, bạn có thể tạo một biến mới chẳng hạn như userInput và sử dụng phương thức getElementById() để gán giá trị đã nhập cho .
let userInput;
userInput = document.getElementById("fName").value;
Hoặc, trên một dòng
let userInput = document.getElementById("fName").value;
Bạn có thể thấy rằng hai câu lệnh trên tuân theo một quy tắc quan trọng chi phối tất cả việc sử dụng toán tử gán (=)
Biến nằm ở phía bên trái (LHS) và giá trị để gán cho biến nằm ở phía bên phải (RHS)
bài tập 5. 1 hướng dẫn bạn các bước gán giá trị do người dùng nhập vào một biến, sau đó hiển thị giá trị đó trên trang web
bài tập 5. 1. Nắm bắt giá trị do người dùng nhập bằng trường đầu vào
Trong thư mục con websites/js-exercises/user-input của bạn, hãy mở tệp sau trong Mã VS và trình duyệt web của bạn
bài tập-5-1. html
Nó sẽ trông như hình dưới đây
Trong HTML, bạn có thể thấy
Trường nhập liệu có loại văn bản và id của fName.
A div có id là resultBox. Đây là nơi bạn sẽ hiển thị giá trị được nhập bởi người dùng.
Trong Mã VS, cuộn xuống cuối trang web, ngay trước thẻ đóng
và nhập . script of tags.
Hiện tại, chức năng mới của bạn chỉ chứa hai dòng chú thích
Cuộn ngược lên hộp nhập liệu và ngay bên dưới hộp nhập, nhập dòng mới này bằng một nút và trình xử lý sự kiện
HTML của bạn bây giờ trông như sau
Trình xử lý sự kiện liên kết nút với chức năng ở cuối trang web
Cuộn xuống chức năng. Dưới dòng bình luận đầu tiên, nhập như sau
let userInput = document.getElementById("fName").value;
Điều này đặt giá trị, được nhập bởi người dùng trong trường đầu vào với id là fname, trong một biến có tên userInput
Tiếp theo, dưới dòng nhận xét thứ hai, hãy nhập thông tin sau
Thao tác này cập nhật nội dung của phần tử div có id là resultBox với bất kỳ giá trị nào trong biến userInput.
Mã JavaScript của bạn bây giờ trông như hình bên dưới
Lưu trang web của bạn và tải lại trình duyệt web của bạn
Kiểm tra xem mã của bạn có hoạt động không bằng cách nhập một số văn bản vào trường nhập và nhấp vào nút 'Hiển thị thông tin nhập của người dùng''
Bạn có thể đóng bài tập-5. 1. tệp html khi hoàn tất
bài tập 5. 2 hướng dẫn bạn qua các bước gán giá trị do người dùng nhập vào một biến, sau đó hiển thị giá trị đó trên trang web
bài tập 5. 2. Thêm nút Đặt lại vào trang web của bạn
Nút 'Đặt lại' hoặc 'Xóa' cho phép người dùng xóa giá trị mà họ có thể đã nhập vào trường nhập. Hãy thêm một cái vào trang web mà bạn đã làm trong bài tập trước
Trong Mã VS và trình duyệt web của bạn, hãy mở tệp sau
bài tập-5-2. html
Như bạn có thể thấy, nó chỉ là phiên bản hoàn thiện của bài tập-5. 1. html
Trong HTML, thay thế dòng chứa nút 'Hiển thị đầu vào của người dùng' và trình xử lý sự kiện bằng dòng sau
Cuộn xuống cuối trang web và nhập chức năng mới này trong chức năng 'showUserInput()'
________số 8_______
Hàm này đặt lại trường nhập và hiển thị div bằng cách nhập giá trị 'không có gì' cho từng trường.
Lưu trang web của bạn và tải lại trình duyệt web của bạn
Xác minh rằng nút 'Đặt lại tất cả' hoạt động
Bạn có thể đóng bài tập-5-2. tệp html khi hoàn tất
Xử lý số do người dùng nhập
Nó không chỉ là các chuỗi như tên địa chỉ email mà bạn sẽ muốn nắm bắt trong các biểu mẫu HTML. Bạn cũng sẽ muốn nắm bắt số lượng đặt hàng, số tiền tài chính và các số khác
Vì hộp văn bản HTML xem mọi thứ được nhập vào hộp đó dưới dạng chuỗi, nên bạn cần chuyển đổi biến chuỗi chứa số thành biến số thực trước khi sử dụng giá trị do người dùng nhập trong tính toán
bài tập 5. 3 giúp bạn hiểu tại sao cần thực hiện chuyển đổi kiểu này
bài tập 5. 3. Làm việc với dữ liệu người dùng số
Trong Mã VS và trình duyệt web của bạn, hãy mở tệp sau
bài tập-5-3. html
Trong HTML, bạn có thể thấy hai trường nhập, hai nút và một hộp hai div để hiển thị tổng của hai số.
Cuộn xuống mã JavaScript ở dưới cùng
Trong hàm 'addNumbers', bên dưới dòng chú thích '/* Đặt tổng của hai số trong một biến mới */', hãy nhập thông tin sau
let resultdNum = firstNum + secondNum;
Tiếp theo, bên dưới dòng chú thích '/* Hiển thị kết quả trên trang web */', hãy nhập nội dung sau
let userInput;
userInput = document.getElementById("fName").value;
0
Lưu tệp của bạn và tải lại tệp trong trình duyệt web của bạn
Kiểm tra mã của bạn như sau
Trong trường nhập Số đầu tiên, nhập 12
Trong trường nhập Số thứ hai, nhập 34
Nhấp vào nút Thêm số
Kết quả bạn thấy có thể không phải là câu trả lời bạn muốn
Các phương thức parseInt() và parseFloat methods
JavaScript cung cấp hai phương thức để chuyển đổi biến chuỗi thành biến số
Phương pháp
Sự miêu tả
parseInt()
Chuyển đổi biến chuỗi thành biến số. Kết quả là một số nguyên (số nguyên). Bất cứ thứ gì sau dấu thập phân đều bị loại bỏ
myVar = parseInt(myVar);
parseFloat()
Chuyển đổi biến chuỗi thành biến số. Kết quả là một số dấu phẩy động. Bất cứ điều gì sau dấu thập phân được giữ nguyên
myVar = parseFloat(myVar);
Cả hai phương pháp đều không kiểm tra xem biến có thực sự chứa một số hay không. Ngay cả khi biến chứa một chuỗi, mỗi phương thức vẫn cố gắng thực hiện chuyển đổi loại biến
Trong mã JavaScript của bạn, hãy thêm các dòng mới sau vào hàm 'addNumbers()', ngay sau lần gán biến thứ hai
let userInput;
userInput = document.getElementById("fName").value;
1
Mã hoàn chỉnh của bạn bây giờ sẽ trông như sau
Lưu trang web của bạn và tải lại trình duyệt web của bạn
Xác minh rằng mã hiện thêm hai số chính xác
Bạn có thể đóng bài tập-5-3. tệp html khi hoàn tất
Đặt số thập phân bằng phương thức toFixed() method
Khi hiển thị số tiền tài chính trên màn hình, thông thường định dạng chúng sao cho chúng có một số vị trí thập phân cố định. Các giá trị như 12. 80 và 45. 00 trông đẹp hơn nhiều so với 12. 8 và 45. JavaScript cung cấp phương thức toFixed() cho mục đích này. Bạn nhập số chữ số thập phân mà bạn yêu cầu trong dấu ngoặc đơn của phương thức. Nó chỉ hoạt động với các biến số.
Nếu biến có tên 'myNum' chứa 123. 5 chẳng hạn, câu lệnh sau định dạng lại giá trị trong biến thành 123. 50
let userInput;
userInput = document.getElementById("fName").value;
2
Tải các tệp bài tập JavaScript của bạn lên GitHub
Thực hiện theo các bước bên dưới để tải toàn bộ thư mục con 📁 /javascript lên trang web của bạn trên GitHub
Đăng nhập vào Github và nhấp vào tên của kho lưu trữ (‘repo’) chứa các trang web của bạn
Trên màn hình GitHub tiếp theo được hiển thị, nhấp vào nút Thêm tệp ở gần bên phải màn hình, sau đó chọn Tải tệp lên từ danh sách thả xuống.
Trong File Explorer (Windows 10) hoặc Finder (Apple Mac), chọn toàn bộ thư mục con 📁 /javascript của bạn và kéo và thả thư mục đó vào kho lưu trữ của bạn trên GitHub.
Cuộn xuống cuối màn hình GitHub và chấp nhận hoặc chỉnh sửa thông báo ngắn ( Thêm tệp qua tải lên ) trong Cam kết thay đổi . Cuối cùng, nhấp vào nút Cam kết thay đổi màu xanh lục để tải lên toàn bộ thư mục con 📁 /javascript của bạn và tất cả các tệp bài tập trong đó.
Các tệp đã tải lên của bạn được xuất bản trên GitHub tại một địa chỉ web tương tự như sau, trong đó tên người dùng là tên người dùng bạn đã chọn cho tài khoản GitHub của mình
Làm cách nào để gán giá trị đầu vào cho một biến trong js?
Trong JavaScript, chúng tôi sử dụng hàm prompt() để yêu cầu người dùng nhập dữ liệu . Là một tham số, chúng tôi nhập văn bản mà chúng tôi muốn hiển thị cho người dùng. Sau khi người dùng nhấn “ok”, giá trị đầu vào được trả về. Chúng tôi thường lưu trữ đầu vào của người dùng trong một biến để chúng tôi có thể sử dụng thông tin trong chương trình của mình.
Làm cách nào để lấy giá trị trường đầu vào trong JavaScript?
Chúng ta có thể lấy giá trị của trường nhập văn bản bằng nhiều phương thức khác nhau trong JavaScript. Có thuộc tính giá trị văn bản có thể đặt và trả về giá trị của thuộc tính giá trị của trường văn bản. Ngoài ra, chúng ta có thể sử dụng phương thức jquery val() bên trong tập lệnh để lấy hoặc đặt giá trị của trường nhập văn bản .
Chúng ta có thể gán giá trị cho một biến không?
Gán lại biến là một hành động Python gán giá trị cho một biến đã tham chiếu đến một giá trị . Kiểu gán lại biến phổ biến nhất là với câu lệnh gán. x = 1 x = 5 # Biến x được gán lại trên dòng này. Việc gán lại biến thay đổi đối tượng mà một biến đề cập đến.