Trong các Bài học trước, bạn đã học cách gán giá trị cho các biến chuỗi và số bằng các câu lệnh JavaScript như sau
let username ="Pamela"; let profit = 12000;
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.
function showUserInput[] {
/* Place the value from the input field in a variable */
/* Display the value on web page */
}
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
Show user input
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
document.getElementById["resultBox"].innerHTML = ""+userInput+"";
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
Show user input Reset All
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