JavaScript từ lâu đã là một ngôn ngữ lập trình không thể thiếu, và việc tìm kiếm các đoạn mã đa năng để bổ trợ cho nó không hề khó khăn. Tuy nhiên, bối cảnh quan trọng nhất của JavaScript chính là trình duyệt web, và chỉ với một chút mã JS, bạn có thể biến đổi đáng kể trải nghiệm trên các trang web của mình.
Những đoạn mã (snippets) dưới đâ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. Tất cả đều rất ngắn gọn – nhiều đoạn chỉ là một dòng duy nhất – nhưng mang lại hiệu quả vượt trội. Chúng sẽ giúp bạn tối ưu website, cải thiện giao diện người dùng (UI/UX) và thậm chí là hỗ trợ các yếu tố kỹ thuật SEO một cách tự nhiên.
1. Phím Tắt Bàn Phím Để Nhảy Nhanh Đến Ô Tìm Kiếm
Bạn có từng thử mở một trang kết quả tìm kiếm của Google và nhấn phím / chưa? Bạn sẽ nhận thấy ô tìm kiếm tự động được tập trung (focus), cho phép bạn nhanh chóng gõ một truy vấn tìm kiếm mới. Phím tắt này vô cùng tiện lợi đến mức nhiều trang web khác đã học theo, từ YouTube đến MDN.
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 nỗ lực. Giả sử bạn có một ô tìm kiếm với mã HTML như sau:
<input type="text" id="search" />Chỉ với một dòng JavaScript, bạn có thể thêm phím tắt hữu ích 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 kiểm tra xem phím / có được nhấn hay không. Nếu có, nó sẽ lấy phần tử ô tìm kiếm bằng getElementById() và sau đó gọi phương thức focus() để kích hoạt ô tìm kiếm và đặt con trỏ bên trong.
Hình ảnh minh họa bàn phím và logo Chrome, gợi ý phím tắt tìm kiếm trên trình duyệt web.
Cần lưu ý rằng, với đoạn mã này, hành động focus là không phá hủy (non-destructive). Hãy cẩn thận nếu bạ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 focus trước khi trình duyệt xử lý phím nhấn, do đó ký tự / có thể xuất hiện trong ô tìm kiếm của bạn. Đây là một thủ thuật JavaScript đơn giản nhưng hiệu quả để tăng tương tác người dùng.
2. Tự Động Tạo Fragment Identifier (Neo Liên Kết)
Fragment identifier (thường được gọi là neo liên kết) 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ử 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.
Nếu bạn đang xuất bản nội dung trực tuyến, việc sử dụng thuộc tính id sẽ khuyến khích người khác liên kết đến các phần cụ thể trong bài viết của bạn, giúp cải thiện SEO và khả năng chia sẻ. Việc nhớ thêm id vào mọi tiêu đề có thể khá khó khăn, nhưng việc chèn chúng một cách linh hoạt 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 lặp qua từng phần tử h2 trên trang của bạn. Nếu một h2 chưa có thuộc tính id, đoạn mã sẽ tạo 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 đây là kỹ thuật tương tự mà các trang web như Wikipedia sử dụng cho các ID tiêu đề của họ.
Minh họa trừu tượng về mã nguồn và cú pháp, liên quan đến việc tạo ID tự động cho tiêu đề web.
Lưu ý rằng đoạn mã sử dụng biểu thức chính quy (regular expression) để loại bỏ tất cả các ký tự không phải chữ cái (a-z). Nếu bạn xuất bản 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 để đảm bảo tính độc nhất và phù hợp. Đây là một kỹ thuật tối ưu website hiệu quả cho các bài viết dài.
3. Viết Lại URL Thành Canonical Thân Thiện
Bạn đã bao giờ phải đối phó với các URL bao gồm những thứ 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 website của bạn không hề sử dụng chúng. Mặc dù chúng không ảnh hưởng đế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ó lẽ không muốn mọi người sử dụng những URL đó trong các liên kết.
Hình ảnh khái niệm về cấu trúc URL và các tham số, minh họa việc tối ưu hóa URL Canonical.
Đây là một đoạn JavaScript nhỏ sẽ giúp làm sạch URL của bạn:
window.history.replaceState(null, "",
document.querySelector("link[rel=canonical]").getAttribute("href"));API History là một cách 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 gây 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. Lưu ý cách chúng ta gọi nó với các giá trị falsy cho hai đối số đầu tiên vì chúng ta chỉ quan tâm đến đối số thứ ba; nó đại diện cho một URL thay thế.
Đoạn mã này giả định bạn đã có một phần tử URL canonical trong mã nguồn HTML của mình, như sau:
<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 ý tưởng hay vì các công cụ tìm kiếm thường sử dụng nó để lập chỉ mục kết quả của họ, giúp ích rất nhiều cho SEO kỹ thuật của bạ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. Tự Động 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. Tuy nhiên, với vai trò 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ụ thể, bạn 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ể đi xa hơn bằng cách mở tất cả các liên kết bên ngoài 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 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 cách tiếp cận sau, nó chuyển đổi các liên kết một cách linh hoạ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 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 các URL tuyệt đối đầy đủ khi liên kết đến trang web của chính 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 để giữ tất cả các liên kết trong cùng một tab, mang lại sự linh hoạt trong việc quản lý liên kết.
5. Cuộn Mượt Mà Khi 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ữ 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 tức thì đế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 giúp làm mượt trải nghiệm.
document.addEventListener("keyup", function (e) {
if (e.which === 9) { // 9 là keycode cho phím Tab
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, 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 focus đế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 hoạt ảnh mượt mà, giúp cải thiện đáng kể trải nghiệm người dùng khi duyệt web bằng bàn phím.
6. Thanh Tiến Độ Cuộn Trang (Page Scroll Progress)
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 nhận nhiệm vụ này. Một thanh tiến độ hiển thị bạn đã cuộn được bao nhiêu trên một trang giờ đây là 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 đòi hỏi một chút công việc, nhưng không 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ông giống như sau:
<progress
value="0"
style="position: fixed; top: 10px; left: 10px; right: 10px; width: auto;">
</progress>Phong cách này đảm bảo thanh tiến độ luôn hiển thị, ở 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 độ 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ị, giúp tạo ra một chỉ báo trực quan về tiến trình đọc của người dùng.
Kết Luận
Chỉ với vài dòng JavaScript đơn giản, bạn có thể tạo ra những cải tiến đáng kể cho website của mình. Từ việc nâng cao khả năng điều hướng bằng bàn phím, tối ưu hóa URL cho SEO, đến việc cải thiện trải nghiệm đọc với thanh tiến độ cuộn trang và các neo liên kết tự động, những thủ thuật này chứng minh rằng đôi khi, sự thay đổi lớn lại đến từ những chi tiết nhỏ.
Việc áp dụng các đoạn mã JavaScript này không chỉ giúp website của bạn thân thiện hơn với người dùng mà còn thể hiện sự chuyên nghiệp trong thiết kế và phát triển web. Hãy thử nghiệm các thủ thuật này và cảm nhận sự khác biệt mà chúng mang lại. Bạn đã áp dụng thủ thuật JavaScript nào trên website của mình? Hãy chia sẻ kinh nghiệm và ý kiến của bạn về những đoạn mã này trong phần bình luận bên dưới nhé!
