Hàm alert() - confirm() - prompt() trong javascript

Hôm nay chúng ta sẽ tìm hiểu đến ba hàm rất thông dụng và hữu dụng trong javascript đó là hàm alert(), confirm() prompt(), đây là ba hàm thường được sử dụng để thông báo và lấy thông tin của người dùng để. Tuy ba hàm này rất hay sử dụng nhưng trong thực tế người ta lại tự viết ra những plugin riêng để thay đổi giao diện thay vì sử dụng giao diện mặc đinh củ chuối của nó, sau này khi học cao hơn hoặc khi đi làm chắc chắn bạn sẽ gặp vấn đề này.

1. Hàm alert() trong javascript

Hàm alert() có nhiệm vụ in một thông báo popup, nó có một tham số truyền vào và tham số này chính là nội dung ta muốn thông báo với người dùng.

ham-alert-trong-javascript.png

Ví dụ: Viết chương trình khi click vào button thì xuất hiện một thông báo.

Bài này ta đã làm ở ví dụ bài tìm hiểu javascript là gì rồi nên mình sẽ viết lại hơi khác chút xíu, đó là mình sẽ dùng sự kiện onclick thay vì dùng hàm addEventListener như ở bài trước nhé.

Hàm Alert RUN
<html>
  <head>
  </head>
  <body>
    <input type="button" onclick="alert('Xin chào các bạn')" value="Click Me"/>
  </body>
</html>

Các bạn thấy mình đã sử dụng hàm alert() trong sự kiện onclick, đây là cách code inline mà chúng ta đã học ở bài trước rồi nên mình không giải thích gì thêm.

2. Hàm confirm() trong javascript

Hàm confirm() cũng sẽ xuất hiện một thông báo popup nhưng nó có thêm hai sự lựa chọn là Yes và No, nếu người dùng chọn Yes thì nó trả về TRUE và ngược lại nếu chọn NO thì nó sẽ trả về FALSE. Nó cũng có một tham số truyền vào và tham số này chính là nội dung thông báo.

ham-confirm-trong-javascript.png

Ví dụ: Viết chương trình hiển thị thông báo xác nhận và dùng hàm alert() để hiển thị kết quả người dùng chọn.

Vì chúng ta chưa học hàm nên mình sẽ không viết dài dòng mà sẽ viết chạy trực tiếp khi load trang, nghĩa là khi trang web được chạy lên thì thông báo nó hiển thị luôn chứ không cần phải click vào button nhé.

Hàm Confirm RUN
<html>
    <head>
        <title></title>
      	<script language="javascript">
        	confirm("Do you like freetuts.net");
        </script>
    </head>
    <body>
        
    </body>
</html>

3. Hàm prompt() trong javascript

Hàm prompt() dùng  để lấy thông tin từ người dùng, gồm có hai tham số truyền vào là nội dung thông báo và giá trị ban đầu. Nếu người dùng không nhập vào thì giá trị nó sẽ trả về là NULL

ham-prompt-trong-javascript.png

Ví dụ: Viết chương trìn lấy thông tin tên của người dùng

Ta sẽ khai báo biến lưu trữ kết quả và kết hợp sử dụng hàm alert() để thông báo kết quả người dùng nhập vào.

Hàm Prompt RUN
<html>
    <head>
        <title></title>
      	<script language="javascript">
        	var t = prompt("Nhập tên của bạn", '');
          	alert(t);
        </script>
    </head>
    <body>
        
    </body>
</html>

Lời kết

Ba hàm alert() - confirm() - prompt() trong javascript rất hay sử dụng nên các bạn hãy gắng nhớ nó nhé, vì nội dung chúng ta chưa học nhiều nên ví dụ vẫn chưa thấy hay lắm, khi nào ta học đến hàm, events hay selector trong javascript thì bạn sẽ thấy nó tuyệt vời.

Nguồn: freetuts.net

KHÓA HỌC ĐANG GIẢM GIÁ

FEDU - 25 – Thiết kế hiệu ứng bằng Javascript và illustrator

(Giảng viên: NGUYỄN ĐỨC VIỆT )

A PHP Error was encountered

Severity: Notice

Message: Undefined index: post_add_user_id

Filename: widgets/tool_all.php

Line Number: 26

Backtrace:

File: /home/freetuts/public_html/site/views/widgets/tool_all.php
Line: 26
Function: _error_handler

File: /home/freetuts/public_html/site/views/tut/detail.php
Line: 131
Function: view

File: /home/freetuts/public_html/site/controllers/Main_controller.php
Line: 20
Function: view

File: /home/freetuts/public_html/site/controllers/tut/Detail.php
Line: 168
Function: assign

File: /home/freetuts/public_html/sources/index.php
Line: 297
Function: require_once

File: /home/freetuts/public_html/index.php
Line: 23
Function: require_once

" title="XEM" target="_blank" rel="nofollow">XEM
FEDU - 22 – Học tất tần tật về Javascript từ đầu

(Giảng viên: Nguyễn Đức Việt)

A PHP Error was encountered

Severity: Notice

Message: Undefined index: post_add_user_id

Filename: widgets/tool_all.php

Line Number: 26

Backtrace:

File: /home/freetuts/public_html/site/views/widgets/tool_all.php
Line: 26
Function: _error_handler

File: /home/freetuts/public_html/site/views/tut/detail.php
Line: 131
Function: view

File: /home/freetuts/public_html/site/controllers/Main_controller.php
Line: 20
Function: view

File: /home/freetuts/public_html/site/controllers/tut/Detail.php
Line: 168
Function: assign

File: /home/freetuts/public_html/sources/index.php
Line: 297
Function: require_once

File: /home/freetuts/public_html/index.php
Line: 23
Function: require_once

" title="XEM" target="_blank" rel="nofollow">XEM
UNICA - Học lập trình JAVASCRIPT

(Giảng viên: )

XEM