Trong quá trình phát triển web, JavaScript đóng một vai trò quan trọng trong việc tạo ra các trải nghiệm tương tác cho người dùng. Một trong những cú pháp thú vị mà lập trình viên thường gặp là javascript:void(0).

Bài viết này sẽ giúp bạn khám phá chi tiết về javascript:void(0) và vai trò của void trong ngôn ngữ lập trình JavaScript, từ đó nâng cao khả năng lập trình của bạn trong việc tạo ra các trang web tương tác hiệu quả hơn.

1. Javascript:void(0) là gì?

 

Có hai thành trong javascript:void(0):

- Javascript: là một địa chỉ URI đặc biệt, khi trình duyệt nhận được địa chỉ URL bắt đầu bằng javascript: Nó sẽ ước lượng biểu thức đặt sau đó và kết quả cuối sẽ được hiển thị trong nội dung của trang. Bạn thử mở trình duyệt và gõ javascript:"Hello" vào thanh địa chỉ và bấm Enter để xem kết quả.

- Void là toán tử dùng để ước lượng một biểu thức và trả về giá trị là undefined. Ví dụ: khi sử dụng void(alert("Hello")) trong mã JavaScript bạn sẽ thấy trang hiển thị một popup cảnh báo. Tuy nhiên void("Hello") không hiển thị bất cứ thay đổi nào. Tương tự void(0) cũng sẽ không làm gì và trả về giá trị undefined.

Do đó javascript:void(alert("Hello")) sẽ hiển thị một hộp thoại popup cảnh báo và javascript:void(0) hoặc javascript:void("Hello") sẽ khiến trình duyệt dừng ở lại trang hiện tại vì giá trị trả về không phải là một URL.

>> Javascript là gì?

2. Tác dụng của Javascript:void(0) là gì?

 

Tác dụng chính của javascript:void(0) là ngăn chặn hành vi mặc định của trình duyệt khi nhấn vào một liên kết, chẳng hạn như điều hướng đến một URL khác hoặc tải lại trang. Cụ thể như sau:

- Ngăn điều hướng: Trong các thẻ liên kết (<a>), thuộc tính href thường được sử dụng để điều hướng đến một URL. Tuy nhiên, nếu bạn chỉ muốn kích hoạt một sự kiện JavaScript mà không muốn điều hướng, bạn có thể dùng javascript:void(0). Ví dụ: 

<a href="#">Click me</a>

- Tránh lỗi "tự động tải lại trang": Nếu không có hành vi mặc định nào được ngăn chặn, nhấn vào các liên kết rỗng hoặc có URL không hợp lệ có thể dẫn đến việc trang bị tải lại hoặc gặp lỗi điều hướng. Sử dụng javascript:void(0) tránh được điều đó.

- Dùng cho các sự kiện JavaScript: Trong các ứng dụng web phức tạp, javascript:void(0) thường được sử dụng để làm điểm bắt đầu cho các sự kiện JavaScript mà không có hành động điều hướng nào. Điều này đặc biệt hữu ích khi bạn muốn tạo các liên kết hoạt động như nút hoặc trigger cho sự kiện JavaScript mà không gây thay đổi trạng thái URL của trình duyệt.

3. Ví dụ về Javascript:void(0)?

Ví dụ:    

Sự sử dụng phổ biến nhất của toán tử này là trong một Client-Side javascript:URL, nó cho phép bạn ước lượng một biểu thức cho các tác động thứ yếu của nó (side-effects) mà trình duyệt không hiển thị giá trị của biểu thức đã ước lượng. Ở đây biểu thức alert ('Warning!!!') được ước lượng nhưng nó không được tải trở lại trong tài liệu hiện tại.      

<html>
   <head></head>
   <body>

      <p>Click the following, This won't react at all...</p>
      <a href="javascript:void(alert('Warning!!!'))">Click me!</a>

   </body>
</html>

4. Kết luận:

Javascript:void(0) là một cú pháp hữu ích trong JavaScript cho phép lập trình viên ngăn chặn hành động mặc định của các liên kết mà không chuyển hướng trang hoặc làm mới trang. Việc sử dụng void trong JavaScript không chỉ đơn thuần là để tránh chuyển hướng mà còn để trả về giá trị undefined.

Chúc các bạn thành công!