Tạo thông báo với JavaScript

Ngày đăng: 22/09/2020 - Cập nhật: 22/09/2020

Mục Lục

1. Tạo thông báo sử dụng Alert trong JS
2. Tạo thông báo với confirm trong JS
3. Tạo thông báo với prompt trong JS
4. Khi nào thì sử dụng alert, confirm, prompt?
Tổng kết

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é.

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:

Thông báo hiển thị cảnh báo (alert) cho người dùng

Thông báo yêu cầu người dùng xác nhận (confirm) một cái gì đó

Và thông báo yêu cầu người dùng nhập thông tin (prompt).

1. Tạo thông báo sử dụng Alert trong JS

Alert đượ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:

		
		// Cách 1:

		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 đó:

window: Đối tượng window là cửa sổ trình duyệt (ở các phiên bản trước thì bắt buộc sử dụng nhưng hiện tại thì chỉ cần alert là đủ).

alert(): Là hàm hiển thị thông báo cho người dùng

content: Là nội dung bạn muốn hiển thị ra màn hình.

Ví dụ:

		
		<html lang="en">

		<head>

		    <meta charset="UTF-8">

		    <meta name="viewport" content="width=device-width, initial-scale=1.0">

		    <title>Message Box</title>

		</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:

Xin chào!

true

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.

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ề true và Cancel thì trả về false.

Cú pháp:

		
		// Cách 1:

		window.confirm(content);

		// Cách 2:

		confirm(content);

Trong đó:

window: Đối tượng window là cửa sổ trình duyệt (ở các phiên bản trước thì bắt buộc sử dụng nhưng hiện tại thì chỉ cần alert là đủ).

confirm(): Là hàm hiển thị thông báo cho người dùng và có hai nút OK và Cancel.

content: Là nội dung bạn muốn hiển thị ra màn hình.

Ví dụ:

		
		<html lang="en">

		<head>

		    <meta charset="UTF-8">

		    <meta name="viewport" content="width=device-width, initial-scale=1.0">

		    <title>Message Box</title>

		</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 người dùng nhấn vào OK tức là hàm sẽ trả về giá trị là true, thì chương trình sẽ hiển thị ra popup Bạn đồng ý xóa

Khi bạn nhấn Cancel tức là hàm sẽ trả về giá trị false thì sẽ hiển thị ra popup Bạn không xóa.

Khi chạy trang web, trước tiên hàm confirm sẽ hiển thị như thế này:

Ví dụ minh họa sử dụng confirm() trong JavaScript (1)

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à ...

Ví dụ minh họa sử dụng confirm() trong JavaScript (2)

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...

Ví dụ minh họa sử dụng confirm() trong JavaScript (3)

3. Tạo thông báo với prompt trong JS

Prompt đượ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ề null.

Cú pháp như sau:

	
	prompt(message, defaultValue);

Trong đó:

prompt(): là hàm hiển thị cho người dùng nhập vào, có trường văn bản và hai nút OK, Cancel.

message: là thông điệp cho người dùng.

defaultValue: là giá trị mặc định được điền sẵn vào trường văn bản.

Hãy xem ví dụ bên dưới đây:

		
		<html lang="en">

		<head>

		    <meta charset="UTF-8">

		    <meta name="viewport" content="width=device-width, initial-scale=1.0">

		    <title>Message Box</title>

		</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 Bạn không nhập vào tuổi, nếu người dùng nhấn vào số tuổi và nhấn OK thì sẽ hiển thị ra số tuổi mà bạn nhập.

Khi chạy trang web:

Ví dụ sử dụng prompt trong JavaScript (1)

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:

Ví dụ sử dụng prompt trong JavaScript (2)

Khi người dùng nhấn Cancel:

Ví dụ sử dụng prompt trong JavaScript (3)

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ý?

alert(): Khi bạn muốn thông báo cho người dùng một message, hay đơn giản là cảnh báo người dùng.

confirm(): Khi bạn muốn người dùng chấp nhận hay không chấp nhận một thao tác nào đó và nhận lại tương ứng giá trị true / false để tiếp tục sử dụng trong chương trình JavaScript của bạn.

prompt(): Khi bạn muốn nhanh chóng để người dùng nhập vào dữ liệu gì đó và sử dụng dữ liệu này trong các chương trình khác.

Tổng kết

Như 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.

Về trang trước Bài tiếp theo

Gửi email in trang