JavaScript là một trong những ngôn ngữ lập trình phổ biến nhất thế giới, đóng vai trò cốt lõi trong việc định hình trải nghiệm tương tác trên các trình duyệt web. Dù có vô số đoạn mã JavaScript đa năng, nhưng ứng dụng quan trọng nhất của nó vẫn là trên các trang web. Chỉ với một vài đoạn mã JavaScript nhỏ gọn, bạn hoàn toàn có thể cải thiện đáng kể tính năng và sự tiện lợi cho trang web của mình.
Những thủ thuật JavaScript này được thiết kế để dễ dàng tích hợp vào bất kỳ website nào, không phụ thuộc vào framework hay cấu trúc nền tảng. Chúng đều ngắn gọn – nhiều đoạn chỉ là một dòng lệnh – nhưng mang lại hiệu quả vượt trội trong việc tối ưu trải nghiệm người dùng và tăng cường khả năng truy cập, giúp website của bạn trở nên chuyên nghiệp và thân thiện hơn.
1. Kích Hoạt Phím Tắt Tìm Kiếm Nhanh Chóng
Hãy thử truy cập một trang kết quả tìm kiếm của Google và nhấn phím /. Bạn sẽ nhận thấy ô tìm kiếm tự động được chọn (focus), cho phép bạn nhanh chóng gõ từ khóa mới. Phím tắt này hữu ích đến mức nhiều trang web khác, từ YouTube đến MDN, cũng đã áp dụng.
Bạn có thể tạo hiệu ứng tương tự trên website của mình chỉ với một chút JavaScript. Giả sử bạn có một ô tìm kiếm với cấu trúc HTML như sau:
<input type="text" id="search" />Chỉ với một dòng JavaScript, bạn có thể bổ sung phím tắt tiện lợi này:
document.addEventListener("keyup", function (e) {
if (e.key === "/") {
document.getElementById("search").focus();
}
});Trình lắng nghe sự kiện (event listener) này sẽ kiểm tra phím / khi người dùng nhả phím (keyup). Nếu phím này được nhấn, nó sẽ lấy phần tử ô tìm kiếm thông qua getElementById() và sau đó gọi phương thức focus() để kích hoạt ô tìm kiếm, đặt con trỏ vào bên trong.
Bàn phím mini và logo Chrome minh họa phím tắt tìm kiếm nhanh trên trình duyệt web.
Cần lưu ý rằng, với đoạn mã cụ thể này, hành động focus không làm thay đổi nội dung hiện có. Hãy cẩn thận nếu bạn muốn thực hiện bất kỳ thay đổi nào. Ví dụ, nếu sử dụng sự kiện keydown thay vì keyup, phần tử sẽ được tập trung trước khi trình duyệt xử lý phím nhấn, dẫn đến ký tự / có thể xuất hiện trong ô tìm kiếm của bạn.
2. Tự Động Tạo Định Danh Phân Đoạn (Fragment Identifiers)
Các định danh phân đoạn (fragment identifiers) là một cách hữu ích để liên kết đến một điểm cụ thể trên trang web. Nếu một phần tử HTML có thuộc tính id với giá trị “ví_dụ”, thì một liên kết kết thúc bằng “#ví_dụ” sẽ tự động cuộn đến điểm đó trên trang.
Khi xuất bản nội dung trực tuyến, việc sử dụng các thuộc tính id sẽ khuyến khích người khác liên kết đến nội dung của bạn. Đôi khi việc nhớ thêm id có thể khó khăn, nhưng việc chèn chúng một cách tự động bằng JavaScript sẽ giải quyết vấn đề này.
document.querySelectorAll("h2").forEach(function(el) {
if (!el.hasAttribute("id")) {
el.setAttribute("id", el.textContent.replaceAll(/[^a-z]/gi, ''));
}
});Đoạn mã này sẽ lặp qua từng phần tử h2 trên trang của bạn. Nếu phần tử đó chưa có thuộc tính id, đoạn mã sẽ thiết lập một id dựa trên nội dung văn bản bên trong tiêu đề. Bạn có thể đã nhận thấy rằng đây là kỹ thuật tương tự mà các trang web như Wikipedia sử dụng cho các định danh tiêu đề của họ.
Lưu ý rằng việc thay thế bằng biểu thức chính quy (replaceAll(/[^a-z]/gi, '')) sẽ loại bỏ tất cả các ký tự không phải là chữ cái (a-z). Nếu bạn xuất bản nội dung bằng ngôn ngữ khác tiếng Anh hoặc sử dụng các tiêu đề có thể lặp lại, bạn nên cân nhắc điều chỉnh biểu thức chính quy này để phù hợp hơn.
Minh họa biểu thức chính quy (Regex) trong lập trình web để xử lý chuỗi và định danh.
3. Chuẩn Hóa URL Với Canonical
Bạn đã bao giờ gặp phải các URL chứa những đoạn như ?utm_content=buffercf3b2&utm_medium=social hoặc #:~:text=search chưa? Những tham số này có thể được thêm vào bởi các script phân tích hoặc công cụ tìm kiếm, ngay cả khi trang web của bạn không sử dụng chúng. Mặc dù chúng không ảnh hưởng trực tiếp đến khách truy cập, nhưng chúng có thể gây khó khăn cho việc theo dõi phân tích của riêng bạn, và bạn có thể không muốn mọi người sử dụng những URL này trong các liên kết.
Chuỗi URL bị nhiễu với các tham số không cần thiết, cần được chuẩn hóa bằng thẻ canonical.
Dưới đây là một đoạn mã JavaScript nhỏ sẽ giúp bạn dọn dẹp URL của mình:
window.history.replaceState(null, "",
document.querySelector("link[rel=canonical]").getAttribute("href"));History API là một công cụ mạnh mẽ để quản lý lịch sử trình duyệt, bao gồm cả trang hiện tại. Nó cho phép bạn thao tác với URL mà không cần tải lại trang.
Trong trường hợp này, phương thức replaceState() thực hiện công việc chính. Chúng ta gọi nó với các giá trị null hoặc chuỗi rỗng cho hai đối số đầu tiên vì chỉ quan tâm đến đối số thứ ba, đại diện cho URL thay thế.
Đoạn mã này giả định rằng bạn đã có một phần tử URL canonical trong mã HTML của mình, trông như thế này:
<link rel="canonical" href="https://example.org/this-is-just/an-example" />Việc bao gồm một liên kết canonical là một thực hành tốt vì các công cụ tìm kiếm thường sử dụng nó để định hình kết quả của họ. Tuy nhiên, nếu bạn không phải lúc nào cũng sử dụng nó, hãy đảm bảo thêm một kiểm tra điều kiện vào đoạn mã này.
4. Mở Liên Kết Ngoài Trong Tab Mới
Có nhiều cách để bạn có thể mở một liên kết trong tab mới trên trình duyệt của mình. Tuy nhiên, với tư cách là một nhà xuất bản nội dung, bạn có thể muốn áp dụng điều này một cách bắt buộc. Đặc biệt, nên mở các tài nguyên như tệp PDF trong một tab riêng biệt, vì chúng có ngữ cảnh rất khác so với các trang web thông thường.
Bạn thậm chí có thể muốn tất cả các liên kết bên ngoài đều mở trong một tab riêng. Cách tốt nhất để làm điều này là chỉnh sửa HTML của bạn và thêm thuộc tính target:
<a href="https://example.org" target="_blank">
Một liên kết ví dụ sẽ mở trong một tab mới
</a>Tuy nhiên, nếu bạn chưa làm điều này, có thể sẽ tốn rất nhiều công sức. Hãy xem xét phương pháp sau đây, tự động chuyển đổi các liên kết bằng JavaScript:
document.querySelectorAll("a").forEach(function(node) {
var url = new URL(node.getAttribute("href"), window.location);
if (window.location.origin != url.origin) {
node.setAttribute("target", "_blank");
}
});Đoạn mã này so sánh window.location.origin – tên miền của website của bạn – với url.origin, là tên miền của mỗi liên kết. Điều này có nghĩa là phương pháp này sẽ hoạt động ngay cả khi bạn sử dụng URL tuyệt đối đầy đủ khi liên kết đến chính trang web của mình.
Ưu điểm lớn ở đây là bạn có thể nhanh chóng cập nhật tất cả các liên kết nếu bạn quyết định thay đổi hành vi này. Ví dụ, bạn có thể bỏ điều kiện và để tất cả các liên kết mở trong một tab mới. Hoặc bạn có thể bỏ hoàn toàn đoạn mã này và giữ tất cả các liên kết trong cùng một tab.
5. Cuộn Trang Mượt Mà Khi Sử Dụng Phím Tab
Một trong những phím tắt bàn phím tiện lợi nhất khi duyệt web là phím Tab. Nhấn phím này, bạn sẽ di chuyển đến liên kết tiếp theo trên trang. Giữ phím Shift và bạn sẽ di chuyển đến liên kết trước đó. Với hệ thống đơn giản này, việc điều hướng các trang bằng bàn phím trở nên dễ dàng hơn nhiều.
Tuy nhiên, có một nhược điểm: việc nhảy ngay lập tức đến một phần khác của trang có thể gây khó chịu và khiến bạn mất phương hướng, đặc biệt khi các liên kết cách xa nhau, trải dài qua nhiều màn hình. Đoạn mã này sẽ giúp làm mượt trải nghiệm.
document.addEventListener("keyup", function (e) {
if (e.which === 9) {
e.target.scrollIntoView({
behavior: "smooth",
block: "center",
});
}
});Trình xử lý sự kiện này chạy khi một phím được nhả ra (keyup), kiểm tra thuộc tính which của sự kiện để xác định phím Tab. Tại thời điểm này, trình duyệt đã di chuyển tiêu điểm đến liên kết tiếp theo, vì vậy e.target sẽ đại diện cho liên kết mà người dùng vừa điều hướng đến.
Phương thức scrollIntoView sau đó thực hiện tất cả công việc. Các tùy chọn đảm bảo các liên kết được cuộn đến vị trí trung tâm theo chiều dọc, với một hiệu ứng hoạt hình mượt mà.
6. Thanh Tiến Trình Cuộn Trang Trực Quan
Kể từ khi các trình duyệt và hệ điều hành làm cho thanh cuộn ít hiển thị hơn, một số trang web đã tự mình đảm nhiệm việc này. Một thanh tiến trình hiển thị mức độ bạn đã cuộn qua một trang giờ đây đã trở thành một cảnh tượng quen thuộc. Việc thêm một thanh như vậy vào bất kỳ trang nào cần một chút công sức, nhưng không quá nhiều:
let p = document.body.appendChild(
document.createElement("progress"),
),
de = document.documentElement;
p.setAttribute("value", "0");
p.setAttribute(
"style",
"position: fixed; top: 10px; left: 10px; right: 10px; width: auto;",
);
document.addEventListener("scroll", function () {
p.value = de.scrollTop / (de.scrollHeight - de.clientHeight);
});Hầu hết công việc ở đây liên quan đến việc thiết lập phần tử thanh tiến trình, trông như thế này:
<progress
value="0"
style="position: fixed; top: 10px; left: 10px; right: 10px; width: auto;">
</progress>Kiểu dáng này đảm bảo thanh tiến trình luôn hiển thị, ở phía trên cùng của cửa sổ. Phần còn lại của script xử lý sự kiện cuộn của tài liệu và đặt giá trị tiến trình trong khoảng từ 0 đến 1, là phạm vi mặc định. Các thuộc tính scrollTop, scrollHeight và clientHeight lần lượt đo vị trí cuộn, tổng chiều cao và chiều cao hiển thị của trang.
Logo Windows 11 và màn hình nền, gợi nhắc về trải nghiệm cuộn và thanh tiến trình trên các hệ điều hành hiện đại.
Các thanh tiến trình cuộn không chỉ cung cấp phản hồi trực quan mà còn cải thiện khả năng định hướng, đặc biệt trên các trang có nội dung dài, giúp người dùng dễ dàng ước tính mức độ đã đọc và còn lại bao nhiêu phần để khám phá.
Những thủ thuật JavaScript đơn giản này, tuy nhỏ, nhưng có thể tạo ra sự khác biệt lớn trong việc cải thiện trải nghiệm người dùng trên website của bạn. Từ việc tăng tốc độ điều hướng, cung cấp các gợi ý trực quan, đến việc đảm bảo tính chuẩn hóa và khả năng truy cập, JavaScript chính là công cụ mạnh mẽ để nâng tầm chất lượng website. Hãy thử áp dụng chúng để mang lại sự tiện lợi và chuyên nghiệp hơn cho trang web của bạn.