JavaScript, ngôn ngữ lập trình phổ biến bậc nhất, không chỉ mạnh mẽ mà còn cực kỳ linh hoạt. Dù bạn đang sử dụng framework nào hay thiết kế website ra sao, chỉ với những đoạn mã JavaScript nhỏ gọn, bạn hoàn toàn có thể thổi luồng sinh khí mới vào trang web của mình, cải thiện trải nghiệm người dùng (UX) và tối ưu hóa hiệu suất một cách đáng kể. Những “snippet” này được thiết kế để dễ dàng tích hợp, mang lại hiệu quả vượt trội mà không tốn nhiều công sức.
1. Kích Hoạt Phím Tắt “/” Để Nhảy Đến Ô Tìm Kiếm
Bạn có bao giờ để ý khi truy cập trang kết quả tìm kiếm Google và nhấn phím /, ô tìm kiếm sẽ tự động được lấy nét, cho phép bạn gõ từ khóa mới ngay lập tức? Đây là một thủ thuật tiện lợi được nhiều trang lớn như YouTube, MDN học hỏi. Bạn cũng có thể áp dụng hiệu ứng tương tự cho website của mình chỉ với vài dòng JavaScript.
Giả sử bạn có một ô tìm kiếm HTML cơ bản như sau:
<span>input</span> <span>type</span>=<span>"text"</span> <span>id</span>=<span>"search"</span> />Chỉ cần thêm đoạn mã JavaScript sau, bạn sẽ có ngay phím tắt hữu ích này:
<span>document</span>.addEventListener(<span>"keyup"</span>, <span><span>function</span> (<span>e</span>) </span>{ <span>if</span> (e.key === <span>"/"</span>) { <span>document</span>.getElementById(<span>"search"</span>).focus(); }});Đoạn mã trên sử dụng addEventListener để lắng nghe sự kiện keyup. Khi phím / được nhấn và thả ra, nó sẽ tìm phần tử ô tìm kiếm bằng getElementById("search") và gọi phương thức focus() để kích hoạt ô tìm kiếm, đưa con trỏ vào đó.
Lưu ý quan trọng: Việc sử dụng sự kiện keyup đảm bảo rằng hành động lấy nét sẽ không phá hủy nội dung hiện có. Nếu bạn sử dụng keydown thay vì keyup, ô tìm kiếm có thể được lấy nét trước khi trình duyệt xử lý phím bấm, dẫn đến việc ký tự “/” bị chèn vào ô tìm kiếm.
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.
2. Tự Động Tạo Định Danh Fragment (ID) Cho Tiêu Đề
Fragment identifiers (ví dụ: #section-title) là một cách tuyệt vời để liên kết đến một vị trí cụ thể trên trang web. Nếu một phần tử HTML có thuộc tính id với giá trị “example”, một liên kết kết thúc bằng “#example” sẽ tự động cuộn đến điểm đó trên trang.
Đối với các website nội dung, việc sử dụng thuộc tính id trên các tiêu đề (như h2, h3) khuyến khích người khác liên kết trực tiếp đến các phần cụ thể trong bài viết của bạn, giúp tối ưu SEO và tăng trải nghiệm người dùng. Tuy nhiên, việc nhớ thêm ID thủ công cho mọi tiêu đề có thể khá bất tiện. JavaScript có thể giải quyết vấn đề này một cách tự động.
<span>document</span>.querySelectorAll(<span>"h2"</span>).forEach(<span><span>function</span>(<span>el</span>) </span>{ <span>if</span> (!el.hasAttribute(<span>"id"</span>)) { el.setAttribute(<span>"id"</span>, el.textContent.replaceAll(<span>/[^a-z]/gi</span>, <span>''</span>)); }});Đoạn mã này duyệt qua tất cả các phần tử h2 trên trang. Nếu một phần tử chưa có thuộc tính id, nó sẽ tự động gán một id dựa trên nội dung văn bản bên trong tiêu đề. Kỹ thuật này tương tự như cách các trang như Wikipedia tạo ID cho các tiêu đề bài viết.
Lưu ý: Biểu thức chính quy /[^a-z]/gi được sử dụng để loại bỏ tất cả các ký tự không phải chữ cái (a-z), đảm bảo ID hợp lệ và dễ đọc. Nếu website của bạn xuất bản nội dung bằng ngôn ngữ khác tiếng Anh (ví dụ: tiếng Việt có dấu) hoặc sử dụng các tiêu đề có thể lặp lại, bạn nên điều chỉnh biểu thức chính quy để tạo ra các ID độc đáo và phù hợp hơn.
Các ký hiệu và biểu thức chính quy (Regex) minh họa việc xử lý chuỗi trong lập trình web.
3. Viết Lại URL Về Dạng Chuẩn (Canonical)
Bạn đã bao giờ gặp các URL chứa những tham số phức tạp như ?utm_content=... hoặc #:~:text=search chưa? Những tham số này thường được thêm 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 bạn và bạn chắc chắn không muốn người dùng chia sẻ những URL rườm rà này.
Đoạn mã URL phức tạp với các tham số theo dõi, cần được tối ưu thành dạng canonical.
Đây là một đoạn JavaScript nhỏ gọn giúp làm sạch URL của bạn:
<span>window</span>.history.replaceState(<span>null</span>, <span>""</span>, <span>document</span>.querySelector(<span>"link[rel=canonical]"</span>).getAttribute(<span>"href"</span>));API Lịch sử (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ú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úng ta chỉ quan tâm đến đối số thứ ba, đại diện cho URL thay thế.
Đoạn mã này giả định bạn đã có một phần tử URL canonical trong mã HTML của mình, ví dụ:
<span>link</span> <span>rel</span>=<span>"canonical"</span> <span>href</span>=<span>"https://example.org/this-is-just/an-example"</span> />Việc bao gồm một liên kết canonical là rất quan trọng vì các công cụ tìm kiếm thường sử dụng nó để xây dựng kết quả của họ, giúp tránh vấn đề nội dung trùng lặp. Nếu bạn không luôn sử dụng thẻ canonical, hãy 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 Tự Động
Có nhiều cách để mở một liên kết trong tab mới của trình duyệt. Với vai trò là chủ sở hữu website, bạn có thể muốn thực thi hành vi này, đặc biệt đối với các tài nguyên như tệp PDF hoặc các liên kết dẫn ra ngoài miền (domain) của bạn, vì chúng có ngữ cảnh rất khác so với các trang web thông thường.
Cách tốt nhất để thực hiện điều này là chỉnh sửa mã HTML của bạn và thêm thuộc tính target="_blank" vào thẻ <a>:
<span>a</span> <span>href</span>=<span>"https://example.org"</span> <span>target</span>=<span>"_blank"</span>> Một liên kết ví dụ sẽ mở trong tab mới<span><span>a</span>></span>Tuy nhiên, nếu bạn chưa làm điều này, việc chỉnh sửa tất cả các liên kết hiện có có thể tốn rất nhiều công sức. Hãy xem xét cách tiếp cận sau, nó sẽ tự động biến đổi các liên kết bằng JavaScript:
<span>document</span>.querySelectorAll(<span>"a"</span>).forEach(<span><span>function</span>(<span>node</span>) </span>{ <span>var</span> url = <span>new</span> URL(node.getAttribute(<span>"href"</span>), <span>window</span>.location);<p> <span>if</span> (<span>window</span>.location.origin != url.origin) { node.setAttribute(<span>"target"</span>, <span>"_blank"</span>); }});</p>Đoạn mã này so sánh window.location.origin (tên miền của website bạn) với url.origin (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 nhất ở đâ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 trong tương lai. Ví dụ, bạn có thể loại bỏ điều kiện và làm cho tất cả các liên kết mở trong một tab mới, hoặc loại 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.
5. Cuộn Trang Mượt Mà Khi Dùng Phím Tab
Một trong những phím tắt 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à nhấn Tab, 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, đặc biệt hữu ích cho người dùng có vấn đề về khả năng tiếp cận.
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 người dùng mất phương hướng, nhất là 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ã JavaScript này sẽ giúp làm mượt trải nghiệm.
<span>document</span>.addEventListener(<span>"keyup"</span>, <span><span>function</span> (<span>e</span>) </span>{ <span>if</span> (e.which === <span>9</span>) { e.target.scrollIntoView({ behavior: <span>"smooth"</span>, block: <span>"center"</span>, }); }});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 (mã ASCII là 9). 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 hiệu ứng hoạt ảnh mượt mà, tạo cảm giác tự nhiên và dễ chịu hơn cho người dùng.
6. Thanh Tiến Độ Cuộn Trang (Scroll Progress Bar)
Vì các trình duyệt và hệ điều hành ngày càng 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. Thanh tiến độ hiển thị mức độ bạn đã cuộn qua một trang hiện 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 cũng cần một chút công sức, nhưng không quá nhiều:
<span>let</span> p = <span>document</span>.body.appendChild( <span>document</span>.createElement(<span>"progress"</span>), ), de = <span>document</span>.documentElement;<p>p.setAttribute(<span>"value"</span>, <span>"0"</span>);</p><p>p.setAttribute( <span>"style"</span>, <span>"position: fixed; top: 10px; left: 10px; right: 10px; width: auto;"</span>,);</p><p><span>document</span>.addEventListener(<span>"scroll"</span>, <span><span>function</span> () </span>{ p.value = de.scrollTop / (de.scrollHeight - de.clientHeight);});</p>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 độ <progress>, có cấu trúc như sau:
<span>progress</span> value="0" style="position: fixed; top: 10px; left: 10px; right: 10px; width: auto;"><span><span>progress</span>></span>Kiểu dáng (CSS style) này đảm bảo rằng thanh tiến độ luôn hiển thị, nằm ở đầu cửa sổ trình duyệt. 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 độ trong khoảng từ 0 đến 1, là phạm vi mặc định của thẻ <progress>. 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 tài liệu để tính toán chính xác phần trăm cuộn.
Thanh cuộn mặc định trong Windows 11 và nhu cầu về thanh tiến độ cuộn trang tùy chỉnh.
Kết Luận
Những đoạn mã JavaScript “nhỏ mà có võ” này chứng minh rằng bạn không cần phải là một lập trình viên siêu hạng hay sử dụng những framework phức tạp để tạo ra trải nghiệm web tốt hơn. Từ việc tối ưu hóa khả năng điều hướng bằng bàn phím và làm sạch URL cho SEO, đến việc cung cấp phản hồi trực quan cho người dùng bằng thanh tiến độ cuộn, mỗi snippet đều mang lại giá trị đáng kể.
Việc áp dụng các giải pháp đơn giản này không chỉ nâng cao trải nghiệm người dùng mà còn góp phần cải thiện hiệu suất và khả năng tiếp cận của website. Hãy thử nghiệm những đoạn mã này trên trang web của bạn để cảm nhận sự khác biệt. Đừng ngần ngại tùy biến chúng để phù hợp nhất với nhu cầu cụ thể của mình. Trangtincongnghe.net luôn khuyến khích bạn khám phá và áp dụng công nghệ để phát triển website của mình. Hãy chia sẻ trải nghiệm của bạn dưới phần bình luận hoặc khám phá thêm các thủ thuật JavaScript khác trên trang của chúng tôi!
