Xin chào! Hôm nay mình sẽ giới thiệu bạn cách tạo thông báo trong JavaScript. Có ba loại thông báo mà chúng ta sẽ tìm hiểu hôm nay là alert, confirm, prompt. Cùng theo dõi nhé.cách tạo thông báo trong JavaScript. Có ba loại thông báo mà chúng ta sẽ tìm hiểu hôm nay là alert, confirm, prompt. Cùng theo dõi nhé. Show
JavaScript cung cấp cho chúng ta 3 loại thông báo (message box) quan trọng, chúng bao gồm:
1. Tạo thông báo sử dụng Alert trong JSAlert được sử dụng để hiển thị một thông báo cho người dùng. Popup này sẽ có nút OK để người dùng nhấn vào để đóng nó. được sử dụng để hiển thị một thông báo cho người dùng. Popup này sẽ có nút OK để người dùng nhấn vào để đóng nó. 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: window.alert(content);.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); (content); Bạn sử dụng cách nào cũng được. Trong đó:
Ví dụ: <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> Message Boxtitle>Message Boxtitle> head> <body> <script> window.alert("Xin chào!");.alert("Xin chào!"); window.alert(1);.alert(1); window.alert(true); .alert(true); script> body> window.alert("Xin chào!");html> window.alert(true);
Khi chạy đoạn code trên trình duyệt sẽ hiển thị ra 3 popup để thông báo cho người dùng: Xin chào!alert để debug hiển thị giá trị hay thông báo cho người dùng nhanh. Bạn chạy và kiểm tra lại nhé.Lưu ý: Ở ví dụ này thì mình viết trực tiếp JS vào trang HTML luôn. Nếu bạn chưa biết thì đọc thêm Cách nhúng JavaScript vào trang web. Trong dự án thực tế thì người lập trình sẽ sử dụng alert để debug hiển thị giá trị hay thông báo cho người dùng nhanh.> Lưu ý: Ở ví dụ này thì mình viết trực tiếp JS vào trang HTML luôn. Nếu bạn chưa biết thì đọc thêm Cách nhúng JavaScript vào trang web. được sử dụng hiển thị thông báo cho người dùng xác nhận. Popup này sẽ có hai nút cho người dùng lựa chọn đó là OK và Cancel. 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ú pháp: window.confirm(content);.confirm(content); // Cách 2: // Vì window là global object nên bạn có thể(content); Trong đó:
Ví dụ: <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> window.alert("Xin chào!");title>Message Boxtitle> head> <body> <script> window.alert("Xin chào!"); result = confirm("Bạn có muốn xóa bản ghi này?"); window.alert(true); (result == true) { ("Bạn đồng ý xóa"); } else {else { Khi chạy đoạn code trên trình duyệt sẽ hiển thị ra 3 popup để thông báo cho người dùng:("Bạn không xóa"); Xin chào! script> body> window.alert("Xin chào!");html> window.alert(true); confirm.
Xin chào!
Bạn chạy và kiểm tra lại nhé. Trong dự án thực tế thì người lập trình sẽ sử dụng alert để debug hiển thị giá trị hay thông báo cho người dùng nhanh.
> Lưu ý: Ở ví dụ này thì mình viết trực tiếp JS vào trang HTML luôn. Nếu bạn chưa biết thì đọc thêm Cách nhúng JavaScript vào trang web. 2. Tạo thông báo với confirm trong JS
Confirm được sử dụng hiển thị thông báo cho người dùng xác nhận. Popup này sẽ có hai nút cho người dùng lựa chọn đó là OK và Cancel.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 chỗi mới hiển thị được. đượ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. Khi người dùng nhấn OK thì trả về confirm(content); 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ề confirm(): Là hàm hiển thị thông báo cho người dùng và có hai nút OK và Cancel. Message Box(message, defaultValue); Trong đó:
Ví dụ: <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> Message Boxtitle>Message Boxtitle> head> <body> <script> window.alert("Xin chào!"); result = prompt("Nhập vào tuổi của bạn", 20); window.alert(true); (result != null) { ("Tuổi của bạn là: " + result); } else {else { alert("Bạn không nhập vào tuổi");("Bạn không nhập vào tuổi"); } script> body> html> Cũng như phần trên, do bạn chưa học về khai báo biến và câu lệnh if, nên mình chỉ tập trung vào hàm prompt. Khi chạy sẽ hiển thị popup cho người dùng nhập vào tuổi của mình. Nếu người dùng nhấn Cancel thì sẽ hiển thị ra popup Khi chạy trang web:
Cũng như phần trên, do bạn chưa học về khai báo biến và câu lệnh if, nên mình chỉ tập trung vào hàm prompt.  Khi chạy sẽ hiển thị popup cho người dùng nhập vào tuổi của mình.
Nếu người dùng nhấn Cancel thì sẽ hiển thị ra popup Khi chạy trang web: Cũng như phần trên, do bạn chưa học về khai báo biến và câu lệnh if, nên mình chỉ tập trung vào hàm prompt.Khi chạy sẽ hiển thị popup cho người dùng nhập vào tuổi của mình.
Khi người dùng nhấn Cancel:Dĩ nhiên, prompt() là hàm cho lấy dữ liệu của người dùng nhập từ bàn phím (mà các giá trị nhập từ bàn phím đều là dạng text). Do đó, nếu người dùng không nhập số mà nhập ký tự thì chương trình trên sẽ bị sai.3 cách tạo thông báo với JavaScript. Có thể bạn chưa hiểu rõ vì có liên quan đến vấn đề biến và câu lệnh rẽ nhánh (if), ở những bài sau mình sẽ nói rõ hơn vấn đề này. Để biết cách xử lý khi gặp vấn đề này thì hãy học thêm các bài học tiếp theo bạn nhé. |
