PHẦN CƠ BẢN
VÒNG LẶP
DATA TYPES
EVENTS
DOM
BOM
OBJECT
BỔ SUNG
THỰC HÀNH
JAVASCRIPT CĂN BẢN
CÁC CHỦ ĐỀ
BÀI MỚI NHẤT
MỚI CẬP NHẬT

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

Trong bài này chúng ta sẽ tìm hiểu ba hàm rất thông dụng trong javascript, đó là hàm alert(), confirm()prompt(). Đây là ba hàm thường được sử dụng tạo hộp thoại thông báo và lấy thông tin từ người dùng.

test php

banquyen png
Bài viết này được đăng tại freetuts.net, không được copy dưới mọi hình thức.

Tính năng hiển thị popup để lấy thông tin người dùng hoặc hiển thị popup thông báo rất là phổ biến. Tuy nhiên, thực tế thì các website lại rất ít khi sử dụng các hàm này bởi giao diện hiện thị của nó rất là củ chuối. Thay vào đó thì họ lập trình viên sẽ sử dụng một thư viện jQuery popup khác chuyên nghiệp hơn.

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 viết này được đăng tại [free tuts .net]

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.

Câu hỏi thường gặp liên quan:

Cùng chuyên mục:

Functional Programming là gì? Tại sao và khi nào bạn nên sử dụng trong JavaScript

Functional Programming là gì? Tại sao và khi nào bạn nên sử dụng trong JavaScript

Những tính năng mới trong ES6+ trong JavaScript

Những tính năng mới trong ES6+ trong JavaScript

4 cách tránh memory leaks trong JavaScript

4 cách tránh memory leaks trong JavaScript

Capturing và bubbling Event trong Javascript

Capturing và bubbling Event trong Javascript

Phân biệt prototype và __proto__ trong JavaScript

Phân biệt prototype và __proto__ trong JavaScript

Cách hoạt động của Event Loop trong JavaScript

Cách hoạt động của Event Loop trong JavaScript

Phương thức bind(), call(), và apply() trong JavaScript

Phương thức bind(), call(), và apply() trong JavaScript

Cách khắc phục lỗi

Cách khắc phục lỗi "hoisting" trong JavaScript

Sử dụng Promise.all và Promise.race để quản lý các Promise trong JavaScript

Sử dụng Promise.all và Promise.race để quản lý các Promise trong JavaScript

Xử lý bất đồng bộ bằng vòng lặp for-await trong JavaScript

Xử lý bất đồng bộ bằng vòng lặp for-await trong JavaScript

Sự khác biệt giữa Promise, Callback và Async/Await trong JavaScript

Sự khác biệt giữa Promise, Callback và Async/Await trong JavaScript

Cách sử dụng Async functions trong JavaScript

Cách sử dụng Async functions trong JavaScript

Hàm String isspace() trong Python

Hàm String isspace() trong Python

Cách tạo số ngẫu nhiên trong Javascript

Cách tạo số ngẫu nhiên trong Javascript

Hướng dẫn cách tạo một số ngẫu nhiên ...

Cách gộp hai object javascript lại với nhau

Cách gộp hai object javascript lại với nhau

Cách lấy chiều dài của object trong Javascript

Cách lấy chiều dài của object trong Javascript

Hướng dẫn giải phương trình bậc 1 bằng Javascript

Hướng dẫn giải phương trình bậc 1 bằng Javascript

Cách dùng nextSibling trong javascript

Cách dùng nextSibling trong javascript

Cách dùng insertAdjacentHTML trong javascript

Cách dùng insertAdjacentHTML trong javascript

Cách dùng innerHTML trong Javascript

Cách dùng innerHTML trong Javascript

Top