Hướng dẫn thông báo html
|
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é. 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ó. 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); // 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); 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"> <title>Message Boxtitle> head> <body> <script> window.alert("Xin chào!"); window.alert(1); window.alert(true); script> body> html> 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 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 JSConfirm đượ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 chỗi mới hiển thị được. Khi người dùng nhấn OK thì trả về Cú pháp: window.confirm(content); // Cách 2: confirm(content); Trong đó:
Ví dụ: <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Message Boxtitle> head> <body> <script> var result = confirm("Bạn có muốn xóa bản ghi này?"); if (result == true) { alert("Bạn đồng ý xóa"); } else { alert("Bạn không xóa"); } script> body> html> Trong ví dụ 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 giá trị của hàm confirm.
Khi chạy trang web, trước tiên hàm confirm sẽ hiển thị như thế này:
Khi bạn nhấn vào OK, hàm confirm trả về giá trị true, giá trị này được sử dung ở trong câu lệnh if. Có nghĩa là, nếu hàm confirm trả về true thì thông báo là ... Còn nếu chọn Cancel thì hàm cofirm trả về false, lúc này câu lệnh if sẽ thực hiện biểu thức else. Có nghĩa, nếu không đồng ý thì hiển thị thông báo... 3. Tạo thông báo với prompt trong JSPrompt đượ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. Kiểu thông báo này rất đơn giản nó bao gồm một trường văn bản (text field) để người dùng nhập thông tin. Khi người dùng nhấn vào OK thì sẽ trả về 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ề Cú pháp như sau: prompt(message, defaultValue); Trong đó:
Hãy xem ví dụ bên dưới đây: <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Message Boxtitle> head> <body> <script> var result = prompt("Nhập vào tuổi của bạn", 20); if (result != null) { alert("Tuổi của bạn là: " + result); } else { alert("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:
Khi người dùng nhập số tuổi thì và nhấn OK chương trình sẽ hiển thị thông báo: 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. Để 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é. 4. Khi nào thì sử dụng alert, confirm, prompt?JavaScript hỗ trợ 3 kiểu thông báo như trên vậy khi nào chúng ta sử dụng từng cái cho hợp lý?
Tổng kếtNhư vậy, qua bài này, mình vừa giới thiệu bạn 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. Bạn hãy thực hành lại những ví dụ trên và sáng tạo ra những thông báo khác đê thực sự nắm giữ chúng. |
