JavaScript là ngôn ngữ lập trình được sử dụng rộng rãi, và việc tìm kiếm các đoạn mã (snippets) đa năng để bổ trợ cho nó không hề khó. Tuy nhiên, ngữ cảnh quan trọng nhất của JavaScript chính là trình duyệt web, và bạn có thể làm được rất nhiều điều để cải thiện đáng kể các trang web của mình chỉ với một chút mã JavaScript.
Bài viết này sẽ giới thiệu 6 đoạn mã JavaScript được thiết kế để dễ dàng tích hợp vào bất kỳ website nào, dù website đó sử dụng framework hay cấu trúc nền tảng nào. Tất cả đều ngắn gọn, nhiều đoạn chỉ là một dòng mã đơn lẻ, 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ính năng website. Hãy cùng thichcongnghe.net khám phá cách những đoạn mã này có thể biến hóa trang web 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 Để Nhanh Chóng Nhảy Đến Ô Tìm Kiếm
Hãy thử mở 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 kích hoạt (focused), cho phép bạn nhanh chóng gõ một cụm từ tìm kiếm khác. Phím tắt này hữu ích đến mức nhiều trang web khác đã học theo, từ YouTube cho đến MDN.
Bạn hoàn toàn có thể đạt được hiệu ứng tương tự trên website của riêng mình mà không tốn nhiều công sức. Giả sử bạn có một ô tìm kiếm với cấu trúc HTML như sau:
<span>input</span> <span>type</span>=<span>"text"</span> <span>id</span>=<span>"search"</span> />Chỉ với một dòng JavaScript, bạn có thể bổ sung 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(); }});Bộ lắng nghe sự kiện (event listener) này kiểm tra xem phím / (forward slash) có được nhấn hay không. Nếu phím này được nhấn, nó sẽ lấy phần tử ô tìm kiếm bằng phương thức getElementById() và sau đó gọi phương thức focus() để kích hoạt ô tìm kiếm, đồng thời đặt con trỏ vào bên trong.
Hãy lưu ý rằng với đoạn mã cụ thể này, hành động focus không làm mất dữ liệu hiện có trong ô tìm kiếm. Tuy nhiên, bạn cần cẩn thận nếu thực hiện bất kỳ thay đổi nào. Chẳng hạn, việc sử dụng sự kiện keydown thay vì keyup sẽ làm ô tìm kiếm được kích hoạt 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.
Bàn phím nhỏ với phím tắt tìm kiếm được đánh dấu cùng logo Chrome, minh họa cho tính năng phím tắt trên trình duyệt web.
2. Tự Động Thêm Định Danh Fragment (Fragment Identifiers)
Fragment identifiers (hay còn gọi là anchor links) là một cách hữu ích để liên kết đến một vị trí cụ thể trên một trang web. Nếu một phần tử HTML có thuộc tính id với giá trị là “example”, thì một liên kết kết thúc bằng “#example” sẽ tự động cuộn đến điểm đó trên trang.
Nếu bạn 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 các phần cụ thể trong bài viết của bạn. Việc nhớ thêm các id thủ công 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.
<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 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ẽ tự động gán 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 như Wikipedia sử dụng cho các id tiêu đề của họ.
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 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 để đảm bảo tính độc nhất và phù hợp.
3. Chuẩn Hóa URL Thành Canonical
Bạn đã bao giờ gặp phải các URL chứa những tham số dài dòng như ?utm_content=buffercf3b2&utm_medium=social hoặc #:~:text=search chưa? Các 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ó thể không muốn người dùng sử dụng những URL đó trong các liên kết của họ.
Cấu trúc một URL được hiển thị trên màn hình máy tính, làm nổi bật các thành phần của liên kết web.
Dưới đây là một đoạn JavaScript nhỏ gọn sẽ giúp làm sạch các 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>));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ị falsey 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ử link rel="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à 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 dạng kết quả của họ. 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. Tuy nhiên, với vai trò là nhà xuất bản nội dung, bạn có thể muốn tự động thực thi điều này. Đặ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 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:
<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 thực hiện điều này trước đây, việc chỉnh sửa thủ công có thể tốn rất nhiều công sức. Hãy xem xét cách tiếp cận sau đây, phương pháp này sẽ tự động chuyể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);
<span>if</span> (<span>window</span>.location.origin != url.origin) { node.setAttribute(<span>"target"</span>, <span>"_blank"</span>); }});Đ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 (tên miền của mỗi liên kết). Điều này có nghĩa là cách tiếp cận 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à có tất cả các liên kết mở trong một tab mới. Hoặc bạn có thể bỏ đoạn mã này hoàn toàn 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 Chuyển Tab Bằng Bàn Phím
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ữ 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ời đến một phần khác của trang có thể gây khó chịu và khiến bạn cảm thấy 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.
<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 thả 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 trọng tâ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 rằng 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 Độ 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 trách nhiệm này. Một thanh tiến độ hiển thị mức độ bạn đã cuộn qua một trang hiện là một hình ảnh 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 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.setAttribute(<span>"value"</span>, <span>"0"</span>);
p.setAttribute( <span>"style"</span>, <span>"position: fixed; top: 10px; left: 10px; right: 10px; width: auto;"</span>,);
<span>document</span>.addEventListener(<span>"scroll"</span>, <span><span>function</span> () </span>{ p.value = de.scrollTop / (de.scrollHeight - de.clientHeight);});Phần lớn công việc ở đây liên quan đến việc thiết lập phần tử thanh tiến độ (progress bar), 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 này đảm bảo rằng thanh tiến độ 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 độ trong khoảng từ 0 đến 1, đây 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ị.
Giao diện Windows 11 với thanh cuộn được hiển thị rõ ràng, minh họa cho việc kiểm soát các yếu tố UI trong hệ điều hà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 bậc thầy về JavaScript hay phải sử dụng các framework phức tạp để tạo ra những cải tiến đáng kể cho website của mình. Từ việc cung cấp các phím tắt tiện lợi, tự động hóa việc gán ID, chuẩn hóa URL để tối ưu SEO, cho đến nâng cao trải nghiệm điều hướng và hiển thị thanh tiến độ cuộn trang, mỗi snippet đều mang lại giá trị thiết thực.
Việc áp dụng chúng không chỉ giúp nâng cao trải nghiệm người dùng, làm cho trang web của bạn trở nên trực quan và dễ sử dụng hơn, mà còn gián tiếp hỗ trợ các nỗ lực tối ưu hóa công cụ tìm kiếm (SEO) của bạn. Hãy thử nghiệm những đoạn mã này trên website của bạn và cảm nhận sự khác biệt. Đừng ngần ngại tùy chỉnh chúng để phù hợp nhất với nhu cầu và phong cách của bạn.
Bạn đã áp dụng những đoạn mã JavaScript nào để cải thiện website của mình? Hãy chia sẻ kinh nghiệm và ý kiến của bạn trong phần bình luận bên dưới nhé!
