JavaScript là một ngôn ngữ lập trình phổ biến và mạnh mẽ, không chỉ đóng vai trò cốt lõi trong việc xây dựng các ứng dụng phức tạp mà còn là công cụ đắc lực để cải thiện những chi tiết nhỏ nhưng quan trọng trên website. Đặc biệt trong bối cảnh trình duyệt web, chỉ với một vài dòng mã JavaScript, bạn có thể biến đổi đáng kể trải nghiệm của người dùng và tối ưu hóa hiệu suất trang web.
Với vai trò là một chuyên gia SEO và biên tập viên tại thoibaocongnghe.net, chúng tôi luôn tìm kiếm những giải pháp thiết thực để giúp các nhà phát triển và quản trị web nâng cao chất lượng sản phẩm số của mình. Bài viết này sẽ giới thiệu 6 thủ thuật JavaScript nhỏ gọn, dễ triển khai, phù hợp với mọi website mà không phụ thuộc vào framework hay cấu trúc nền tảng. Những đoạn mã này tuy ngắn gọn nhưng mang lại hiệu quả vượt trội, giúp trang web của bạn trở nên thông minh, thân thiện và chuyên nghiệp hơn trong mắt độc giả Việt Nam. Hãy cùng khám phá những cách thức đơn giản để tăng cường khả năng tương tác và tạo dấu ấn khác biệt cho website của bạn.
I. Kích hoạt Phím tắt để Nhảy đến Ô Tìm kiếm
Bạn đã bao giờ truy cập trang kết quả tìm kiếm của Google và thử nhấn phím / chưa? Bạn sẽ nhận thấy ô tìm kiếm tự động được kích hoạt, cho phép bạn nhanh chóng nhập một truy vấn mới. Phím tắt này vô cùng hữu ích, đến mức nhiều trang web lớn khác như YouTube hay MDN cũng đã áp dụng.
Bạn có thể dễ dàng tạo hiệu ứng tương tự trên website của mình với rất ít nỗ lực. 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ỉ với một dòng JavaScript, bạn có thể thêm 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(); }});Trình lắng nghe sự kiện (event listener) này sẽ kiểm tra xem phím gạch chéo về phía trước (/) có được nhấn hay không. Nếu có, nó sẽ lấy phần tử ô tìm kiếm thông qua getElementById() và 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. Đây là một chi tiết nhỏ nhưng nâng cao đáng kể trải nghiệm người dùng, đặc biệt với những người thường xuyên sử dụng bàn phím để điều hướng.
Lưu ý rằng, với đoạn mã cụ thể này, hành động focus là không phá hủy (non-destructive). 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 có thể khiến phần tử được focus trước khi trình duyệt xử lý phím nhấn, dẫn đến ký tự / xuất hiện trong ô tìm kiếm của bạn.
Bàn phím mini và logo Chrome minh họa phím tắt tìm kiếm trên trình duyệt
II. Tự động Tạo ID cho Các Tiêu đề để Liên kết Fragment
Fragment identifiers (hoặc “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ị “example”, thì một liên kết kết thúc bằng “#example” sẽ tự động cuộn đến vị trí đó trên trang.
Khi bạn 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 mọi người liên kết đến các phần cụ thể trong bài viết của bạn, giúp tăng cường khả năng chia sẻ và SEO. Tuy nhiên, việc nhớ thêm các ID cho từng tiêu đề có thể khá bất tiện. 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 một phần tử h2 chưa có thuộc tính id, mã sẽ tự động đặt một ID dựa trên nội dung văn bản bên trong tiêu đề. Đây là kỹ thuật tương tự mà các trang web lớn như Wikipedia sử dụng để tạo ID cho các tiêu đề, giúp người đọc dễ dàng trích dẫn hoặc chia sẻ các phần cụ thể của bài viết.
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 tiếng Việt hoặc các ngôn ngữ khác không phải tiếng Anh, hoặc nếu các tiêu đề của bạn có thể trùng lặp, 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 duy nhất và chính xác của ID.
III. Chuẩn hóa URL thành Dạng Canonical
Bạn đã từng phải xử lý các URL có chứa những tham số 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 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 có thể không muốn người dùng chia sẻ những URL “bẩn” này.
Minh họa dòng chảy dữ liệu trên web liên quan đến URL và các tham số
Dưới đâ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>));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. Lưu ý rằng chúng ta gọi nó với các giá trị giả (falsey values) 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, chẳng hạn như:
<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 cho SEO vì các công cụ tìm kiếm thường sử dụng nó để xác định phiên bản chính của một trang. Nếu bạn không phải lúc nào cũng sử dụng thẻ canonical, hãy đảm bảo thêm một kiểm tra điều kiện vào đoạn mã này để tránh lỗi.
IV. Mở Liên kết Ngoài trong Tab Mới
Có nhiều cách để mở một liên kết trong tab mới trong 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 áp dụng chính sách 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 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 làm điều này, việc chỉnh sửa tất cả các liên kết 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ẽ biến đổi các liên kết một cách linh hoạ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 các URL tuyệt đối hoàn chỉnh 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ể loại 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, mang lại sự linh hoạt cao trong quản lý liên kết.
V. Cuộn trang Mượt mà khi Sử 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ữ 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 trang bằng bàn phím trở nên dễ dàng hơn nhiều, đặc biệt quan trọng đối với khả năng tiếp cận (accessibility).
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, đặ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ã JavaScript sau đây giúp làm mượt trải nghiệm này.
<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>, }); }});Bộ 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 xem đó có phải là phím Tab hay không. 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 toàn bộ 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í giữa theo chiều dọc, với một hiệu ứng động mượt mà, giúp người dùng dễ dàng theo dõi và định vị hơn.
VI. Thanh Tiến trình Cuộn Trang
Khi 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 nhiệm vai trò này. Một thanh tiến trình hiển thị mức độ bạn đã cuộn qua một trang hiện đã trở thành 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 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>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 trình <progress>, trông như sau:
<span>progress</span> value="0" style="position: fixed; top: 10px; left: 10px; right: 10px; width: auto;"><span><span>progress</span>></span>Phong cách CSS này đảm bảo rằng thanh tiến trình luôn hiển thị, nằm ở 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 giữa 0 và 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ị, cung cấp dữ liệu cần thiết để tính toán tiến trình một cách chính xác.
Logo Windows 11 trên hình nền minh họa thanh cuộn và trải nghiệm người dùng
Kết luận
Những đoạn mã JavaScript tưởng chừng đơn giản nhưng lại có sức mạnh đáng kinh ngạc trong việc nâng cao trải nghiệm người dùng và tối ưu hóa hiệu suất website. Từ việc cải thiện khả năng điều hướng bằng bàn phím, đảm bảo tính thẩm mỹ của URL, đến cung cấp phản hồi trực quan về tiến trình cuộn trang, mỗi thủ thuật đều đóng góp vào việc xây dựng một trang web thân thiện, dễ sử dụng và chuyên nghiệp hơn.
Tại thoibaocongnghe.net, chúng tôi tin rằng việc áp dụng các giải pháp công nghệ thông minh, dù lớn hay nhỏ, đều là chìa khóa để tạo nên sự khác biệt. Hy vọng với 6 thủ thuật JavaScript này, bạn sẽ có thêm những công cụ hữu ích để cải thiện website của mình, mang lại giá trị cao hơn cho độc giả và khẳng định vị thế dẫn đầu trong không gian số. Đừng ngần ngại thử nghiệm và chia sẻ những kết quả của bạn! Hãy tiếp tục theo dõi chúng tôi để cập nhật những kiến thức công nghệ mới nhất và sâu sắc nhất.
