JavaScript thực hành: Tổng hợp các đoạn code hữu ích cho website

Trần Thị Vân
118
25/07/2026

Tổng hợp những đoạn code JavaScript thực hành hữu ích dành cho website, kèm ví dụ dễ hiểu và hướng dẫn áp dụng thực tế. Phù hợp cho người mới học và lập trình viên muốn xây dựng thư viện mã nguồn tái sử dụng, chi tiết như nào hãy cùng chúng tôi phân tích:

JavaScript là một trong những ngôn ngữ quan trọng nhất trong phát triển website hiện đại. Chỉ với vài dòng mã, bạn có thể cải thiện trải nghiệm người dùng, tăng tính tương tác, giảm thao tác lặp lại và hỗ trợ nhiều chức năng mà HTML hay CSS không thể thực hiện được.

Trong bài viết này, Web Mới sẽ tổng hợp những đoạn code JavaScript thực tế, có thể áp dụng ngay vào nhiều loại website khác nhau như blog, trang giới thiệu doanh nghiệp, website bán hàng, landing page hay hệ thống quản trị. Thay vì chỉ trình bày lý thuyết, mỗi ví dụ đều đi kèm giải thích để bạn hiểu rõ nguyên lý hoạt động và biết cách tùy chỉnh theo nhu cầu của mình.

Các ví dụ đều sử dụng JavaScript thuần (Vanilla JavaScript), không phụ thuộc vào thư viện bên ngoài. Điều này giúp mã nguồn nhẹ hơn, dễ học và tương thích với hầu hết trình duyệt hiện đại.

Vì sao nên xây dựng thư viện các đoạn mã JavaScript?

Trong quá trình phát triển website, rất nhiều chức năng được sử dụng lặp đi lặp lại. Nếu mỗi lần đều viết lại từ đầu sẽ tốn thời gian và dễ phát sinh lỗi. Việc xây dựng một bộ sưu tập các đoạn mã thường dùng mang lại nhiều lợi ích:

Tiết kiệm thời gian phát triển.
Dễ tái sử dụng cho nhiều dự án.
Giảm nguy cơ viết sai logic.
Dễ bảo trì và nâng cấp.
Tăng tốc quá trình lập trình.
Thống nhất phong cách viết mã trong nhóm.

Một số nguyên tắc trước khi sử dụng các đoạn mã

Ưu tiên đặt toàn bộ JavaScript ở cuối trang hoặc sử dụng thuộc tính defer.
Không lạm dụng JavaScript cho những chức năng CSS có thể xử lý.
Luôn kiểm tra phần tử tồn tại trước khi thao tác.
Đặt tên biến rõ ràng để dễ bảo trì.
Hạn chế sử dụng biến toàn cục.
Tách các chức năng thành từng hàm riêng.

Kiểm tra phần tử có tồn tại hay không

Đây là đoạn mã gần như xuất hiện trong mọi dự án. Nếu phần tử không tồn tại mà vẫn thao tác sẽ dẫn đến lỗi JavaScript.

const button = document.querySelector(".btn");

if (button) {
    button.addEventListener("click", function () {
        console.log("Đã nhấn nút");
    });
}

Việc kiểm tra trước giúp website hoạt động ổn định ngay cả khi một số trang không có phần tử đó.

Cuộn trang lên đầu

Nút quay về đầu trang xuất hiện rất nhiều trên website có nội dung dài.

window.scrollTo({
    top: 0,
    behavior: "smooth"
});

Thuộc tính behavior: "smooth" tạo hiệu ứng cuộn mượt thay vì nhảy ngay lên đầu trang.

Cuộn đến một phần nội dung bất kỳ

Khi người dùng bấm vào menu hoặc nút điều hướng, có thể tự động cuộn đến khu vực mong muốn.

const section = document.querySelector("#gioi-thieu");

section.scrollIntoView({
    behavior: "smooth"
});

Lấy chiều rộng và chiều cao cửa sổ trình duyệt

const width = window.innerWidth;
const height = window.innerHeight;

console.log(width);
console.log(height);

Thông tin này thường được sử dụng để xử lý giao diện responsive hoặc tính toán vị trí hiển thị.

Lấy vị trí cuộn hiện tại của trang

const scrollTop = window.scrollY;

console.log(scrollTop);

Giá trị này giúp xác định người dùng đã cuộn đến đâu để kích hoạt hiệu ứng hoặc thay đổi giao diện.

Ẩn hoặc hiện phần tử khi cuộn trang

Ví dụ hiển thị nút quay lên đầu khi người dùng cuộn xuống.

const button = document.querySelector(".back-top");

window.addEventListener("scroll", function () {

    if (window.scrollY > 300) {
        button.style.display = "block";
    } else {
        button.style.display = "none";
    }

});

Đổi nội dung của một phần tử

const title = document.querySelector("h1");

title.textContent = "Chào mừng đến với Web Mới";

Nên ưu tiên textContent khi chỉ cần thay đổi văn bản để đảm bảo hiệu suất và hạn chế các vấn đề liên quan đến HTML.

Thêm nội dung HTML động

const box = document.querySelector(".content");

box.innerHTML = `
<p>Đây là nội dung được thêm bằng JavaScript.</p>
`;

Chỉ nên sử dụng khi nội dung được kiểm soát để tránh nguy cơ chèn mã độc.

Thêm hoặc xóa class

const menu = document.querySelector(".menu");

menu.classList.add("active");

menu.classList.remove("active");

menu.classList.toggle("active");

Đây là phương pháp phổ biến để thay đổi trạng thái giao diện mà không cần chỉnh sửa trực tiếp CSS.

Kiểm tra class có tồn tại hay không

const menu = document.querySelector(".menu");

if (menu.classList.contains("active")) {
    console.log("Đang mở menu");
}

Lấy giá trị của ô nhập liệu

Đây là thao tác được sử dụng rất thường xuyên trong các biểu mẫu đăng nhập, tìm kiếm hoặc liên hệ.

const input = document.querySelector("#keyword");

console.log(input.value);

Thuộc tính value trả về nội dung hiện tại mà người dùng đã nhập.

Theo dõi nội dung khi người dùng nhập

Thay vì chờ người dùng gửi biểu mẫu, bạn có thể xử lý dữ liệu ngay trong quá trình nhập.

const input = document.querySelector("#keyword");

input.addEventListener("input", function () {
    console.log(this.value);
});

Cách này thường được sử dụng để tạo chức năng tìm kiếm trực tiếp hoặc đếm số ký tự.

Đếm số ký tự đã nhập

const input = document.querySelector("#message");

input.addEventListener("input", function () {
    console.log(this.value.length);
});

Ví dụ này rất hữu ích khi giới hạn số ký tự trong phần bình luận hoặc mô tả sản phẩm.

Kiểm tra ô nhập liệu có rỗng hay không

const input = document.querySelector("#name");

if (input.value.trim() === "") {
    console.log("Vui lòng nhập họ tên");
}

Hàm trim() giúp loại bỏ khoảng trắng ở đầu và cuối chuỗi trước khi kiểm tra.

Tự động chuyển chữ thường thành chữ hoa

const input = document.querySelector("#code");

input.addEventListener("input", function () {
    this.value = this.value.toUpperCase();
});

Đoạn mã này thường được áp dụng cho mã giảm giá, mã khách hàng hoặc biển số xe.

Chỉ cho phép nhập số

const input = document.querySelector("#phone");

input.addEventListener("input", function () {
    this.value = this.value.replace(/D/g, "");
});

Biểu thức chính quy loại bỏ toàn bộ ký tự không phải số.

Sao chép nội dung vào bộ nhớ tạm

Đây là chức năng thường thấy trên website chia sẻ mã nguồn hoặc mã giảm giá.

navigator.clipboard.writeText("WEBMOI2026");

Người dùng chỉ cần bấm một nút để sao chép nội dung thay vì tự chọn văn bản.

Mở liên kết trong tab mới

window.open("https://webmoi.vn", "_blank");

Có thể sử dụng khi cần điều hướng sang website khác mà vẫn giữ nguyên trang hiện tại.

Tải lại trang

location.reload();

Được sử dụng khi cần cập nhật dữ liệu sau khi thực hiện một thao tác nào đó.

Chuyển hướng sang trang khác

window.location.href = "https://webmoi.vn";

Đây là cách chuyển trang phổ biến và dễ sử dụng nhất trong JavaScript.

Lấy địa chỉ URL hiện tại

console.log(window.location.href);

Thông tin này hữu ích khi cần xác định trang hiện tại để xử lý các chức năng đặc biệt.

Lấy tên miền của website

console.log(window.location.hostname);

Kết quả chỉ trả về tên miền mà không bao gồm giao thức hoặc đường dẫn.

Lấy đường dẫn của trang hiện tại

console.log(window.location.pathname);

Ví dụ nếu URL là https://example.com/blog/javascript thì kết quả sẽ là /blog/javascript.

Lấy tham số trên URL

const params = new URLSearchParams(window.location.search);

console.log(params.get("id"));

Ví dụ với URL ?id=15 thì giá trị nhận được sẽ là 15.

Hiển thị hộp thoại thông báo

alert("Xin chào!");

Mặc dù ít được sử dụng trong giao diện hiện đại, đây vẫn là cách nhanh nhất để hiển thị thông báo khi học JavaScript.

Hiển thị hộp thoại xác nhận

const result = confirm("Bạn có chắc chắn muốn xóa không?");

if (result) {
    console.log("Đã xác nhận");
}

Người dùng có thể chọn Đồng ý hoặc Hủy trước khi tiếp tục thao tác.

Yêu cầu người dùng nhập dữ liệu

const name = prompt("Nhập tên của bạn");

console.log(name);

Hộp thoại này thích hợp cho các ví dụ học tập hoặc công cụ nội bộ đơn giản.

Lấy ngày giờ hiện tại

const now = new Date();

console.log(now);

Đối tượng Date là nền tảng cho hầu hết các chức năng liên quan đến thời gian trong JavaScript.

Hiển thị năm hiện tại

const year = new Date().getFullYear();

console.log(year);

Đoạn mã này thường được sử dụng để tự động cập nhật năm ở phần chân trang của website.

Tạo số ngẫu nhiên

const random = Math.random();

console.log(random);

Giá trị trả về nằm trong khoảng từ 0 đến nhỏ hơn 1.

Tạo số nguyên ngẫu nhiên trong một khoảng

function randomNumber(min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
}

console.log(randomNumber(1, 100));

Đây là hàm thường được sử dụng trong trò chơi, bốc thăm hoặc tạo dữ liệu thử nghiệm.

Định dạng số có dấu phân cách hàng nghìn

Việc hiển thị số theo định dạng dễ đọc giúp người dùng theo dõi giá trị tiền tệ hoặc thống kê trực quan hơn.

const number = 123456789;

console.log(number.toLocaleString());

Phương thức toLocaleString() sẽ tự định dạng số theo quy tắc của ngôn ngữ hoặc khu vực được sử dụng.

Làm tròn số thập phân

const price = 123.456789;

console.log(price.toFixed(2));

Kết quả trả về sẽ là số có đúng hai chữ số sau dấu thập phân.

Kiểm tra một giá trị có phải là số hay không

const value = "100";

console.log(!isNaN(value));

Ví dụ trên sẽ trả về true vì chuỗi có thể chuyển thành kiểu số.

Chuyển chuỗi thành số nguyên

const number = parseInt("250");

console.log(number);

Sử dụng khi dữ liệu lấy từ biểu mẫu hoặc URL cần chuyển sang kiểu số.

Chuyển chuỗi thành số thực

const number = parseFloat("15.75");

console.log(number);

Phương thức này giữ lại phần thập phân của giá trị.

Định dạng chữ cái đầu viết hoa

function capitalize(text) {

    return text.charAt(0).toUpperCase() + text.slice(1);

}

console.log(capitalize("javascript"));

Đây là hàm thường dùng để chuẩn hóa tiêu đề hoặc tên người dùng.

Loại bỏ khoảng trắng đầu và cuối chuỗi

const text = "   Web Mới   ";

console.log(text.trim());

Nên sử dụng trước khi lưu dữ liệu hoặc kiểm tra biểu mẫu.

Thay thế nội dung trong chuỗi

const text = "Xin chào JavaScript";

console.log(text.replace("JavaScript", "Web Mới"));

Phương thức này chỉ thay thế kết quả đầu tiên nếu không sử dụng biểu thức chính quy.

Kiểm tra chuỗi có chứa từ khóa

const title = "Học JavaScript cơ bản";

console.log(title.includes("JavaScript"));

Giá trị trả về là true hoặc false.

Tách chuỗi thành mảng

const tags = "HTML,CSS,JavaScript";

const result = tags.split(",");

console.log(result);

Đây là thao tác phổ biến khi xử lý danh sách từ khóa hoặc dữ liệu phân cách bằng dấu phẩy.

Ghép mảng thành chuỗi

const tags = ["HTML", "CSS", "JavaScript"];

console.log(tags.join(", "));

Phương thức join() giúp tạo chuỗi hiển thị từ một mảng dữ liệu.

Loại bỏ phần tử trùng lặp trong mảng

const numbers = [1, 2, 2, 3, 4, 4, 5];

const result = [...new Set(numbers)];

console.log(result);

Đây là một trong những cách ngắn gọn và hiệu quả nhất trong JavaScript hiện đại.

Sắp xếp mảng theo thứ tự tăng dần

const numbers = [8, 3, 10, 1, 6];

numbers.sort(function (a, b) {
    return a - b;
});

console.log(numbers);

Nếu không truyền hàm so sánh, JavaScript sẽ sắp xếp theo chuỗi ký tự.

Tìm giá trị lớn nhất trong mảng

const numbers = [12, 5, 18, 25, 7];

console.log(Math.max(...numbers));

Toán tử ... giúp truyền toàn bộ phần tử của mảng vào hàm.

Tìm giá trị nhỏ nhất trong mảng

const numbers = [12, 5, 18, 25, 7];

console.log(Math.min(...numbers));

Cách làm tương tự như khi tìm giá trị lớn nhất.

Tính tổng các phần tử trong mảng

const numbers = [10, 20, 30, 40];

const total = numbers.reduce(function (sum, item) {
    return sum + item;
}, 0);

console.log(total);

Hàm reduce() rất mạnh trong việc xử lý và tổng hợp dữ liệu.

Đảo ngược mảng

const letters = ["A", "B", "C", "D"];

letters.reverse();

console.log(letters);

Phương thức này sẽ thay đổi trực tiếp mảng ban đầu.

Kiểm tra phần tử có tồn tại trong mảng

const colors = ["red", "blue", "green"];

console.log(colors.includes("blue"));

Đây là cách đơn giản và dễ đọc hơn so với việc sử dụng indexOf().

Duyệt toàn bộ mảng

const users = ["An", "Bình", "Cường"];

users.forEach(function (user) {
    console.log(user);
});

forEach() phù hợp khi chỉ cần xử lý từng phần tử mà không tạo ra mảng mới.

Lọc dữ liệu trong mảng

const numbers = [5, 12, 18, 25, 3];

const result = numbers.filter(function (item) {
    return item >= 10;
});

console.log(result);

Hàm filter() tạo ra một mảng mới chỉ chứa các phần tử thỏa mãn điều kiện.

Chuyển đổi dữ liệu trong mảng

const prices = [100, 200, 300];

const vat = prices.map(function (item) {
    return item * 1.1;
});

console.log(vat);

map() rất hữu ích khi cần chuyển đổi toàn bộ dữ liệu sang định dạng mới mà vẫn giữ nguyên mảng gốc.

Tìm phần tử đầu tiên thỏa mãn điều kiện

Khi chỉ cần lấy một phần tử đầu tiên phù hợp, find() sẽ hiệu quả hơn việc duyệt toàn bộ mảng.

const users = [
    { id: 1, name: "An" },
    { id: 2, name: "Bình" },
    { id: 3, name: "Cường" }
];

const user = users.find(function (item) {
    return item.id === 2;
});

console.log(user);

Nếu không tìm thấy phần tử phù hợp thì kết quả sẽ là undefined.

Kiểm tra có phần tử nào thỏa mãn điều kiện

const numbers = [5, 12, 20, 8];

const result = numbers.some(function (item) {
    return item > 15;
});

console.log(result);

some() trả về true nếu tồn tại ít nhất một phần tử đáp ứng điều kiện.

Kiểm tra toàn bộ phần tử đều thỏa mãn điều kiện

const numbers = [12, 18, 25];

const result = numbers.every(function (item) {
    return item > 10;
});

console.log(result);

Khác với some(), phương thức này chỉ trả về true khi tất cả phần tử đều hợp lệ.

Trì hoãn thực hiện một đoạn mã

Đây là một trong những đoạn mã được sử dụng nhiều nhất trong JavaScript.

setTimeout(function () {

    console.log("Xin chào Web Mới");

}, 2000);

Đoạn mã sẽ được thực thi sau 2 giây.

Thực hiện lặp lại theo chu kỳ

const timer = setInterval(function () {

    console.log("Đang chạy...");

}, 1000);

Hàm sẽ được gọi liên tục sau mỗi khoảng thời gian được chỉ định.

Dừng hàm lặp

const timer = setInterval(function () {

    console.log("Đang chạy...");

}, 1000);

clearInterval(timer);

Sử dụng clearInterval() khi không còn cần thực hiện tác vụ định kỳ.

Dừng hàm trì hoãn

const timer = setTimeout(function () {

    console.log("Hoàn thành");

}, 5000);

clearTimeout(timer);

Việc hủy bỏ bộ đếm thời gian giúp tránh những thao tác không còn cần thiết.

Chờ tải xong toàn bộ trang

window.addEventListener("load", function () {

    console.log("Website đã tải xong");

});

Sự kiện này chỉ được kích hoạt khi toàn bộ hình ảnh, CSS và tài nguyên khác đã tải hoàn tất.

Thực thi khi HTML đã sẵn sàng

document.addEventListener("DOMContentLoaded", function () {

    console.log("HTML đã sẵn sàng");

});

Trong nhiều trường hợp, đây là lựa chọn tốt hơn load vì không cần chờ toàn bộ tài nguyên tải xong.

Ngăn biểu mẫu gửi dữ liệu mặc định

const form = document.querySelector("form");

form.addEventListener("submit", function (event) {

    event.preventDefault();

    console.log("Đã chặn gửi biểu mẫu");

});

Đây là bước quan trọng khi kiểm tra dữ liệu trước khi gửi lên máy chủ.

Vô hiệu hóa một nút bấm

const button = document.querySelector(".btn");

button.disabled = true;

Thường sử dụng để tránh người dùng nhấn nhiều lần trong khi đang xử lý dữ liệu.

Kích hoạt lại nút bấm

const button = document.querySelector(".btn");

button.disabled = false;

Sau khi hoàn thành xử lý, bạn có thể cho phép người dùng tiếp tục thao tác.

Lấy thuộc tính của phần tử

const image = document.querySelector("img");

console.log(image.getAttribute("src"));

Phương thức này có thể lấy bất kỳ thuộc tính nào của phần tử HTML.

Thay đổi thuộc tính của phần tử

const image = document.querySelector("img");

image.setAttribute("alt", "Hình minh họa");

Ngoài thuộc tính alt, bạn cũng có thể thay đổi src, title, href hoặc các thuộc tính khác.

Xóa thuộc tính khỏi phần tử

const input = document.querySelector("#email");

input.removeAttribute("required");

Đây là cách nhanh để loại bỏ một thuộc tính khi điều kiện thay đổi.

Tạo phần tử HTML mới

const item = document.createElement("li");

item.textContent = "JavaScript";

document.querySelector("ul").appendChild(item);

Việc tạo phần tử bằng JavaScript giúp xây dựng giao diện động từ dữ liệu.

Xóa một phần tử khỏi trang

const box = document.querySelector(".box");

box.remove();

Phương thức remove() đơn giản và dễ đọc hơn so với cách xử lý ở các phiên bản JavaScript cũ.

Chèn phần tử vào cuối danh sách

const list = document.querySelector("ul");

const item = document.createElement("li");

item.textContent = "Web Mới";

list.appendChild(item);

appendChild() sẽ thêm phần tử mới vào vị trí cuối cùng của phần tử cha.

Chèn phần tử vào đầu danh sách

const list = document.querySelector("ul");

const item = document.createElement("li");

item.textContent = "JavaScript";

list.prepend(item);

Khác với appendChild(), phương thức prepend() sẽ chèn phần tử vào đầu danh sách.

Thay thế một phần tử

const oldItem = document.querySelector(".old");

const newItem = document.createElement("div");

newItem.textContent = "Nội dung mới";

oldItem.replaceWith(newItem);

Đây là cách thay đổi toàn bộ một phần tử mà không cần sửa từng thuộc tính riêng lẻ.

Những lưu ý khi áp dụng các đoạn mã vào dự án thực tế

Các ví dụ trong bài viết được thiết kế theo hướng đơn giản để người đọc dễ hiểu và dễ thực hành. Tuy nhiên, khi đưa vào các dự án thực tế, bạn nên điều chỉnh lại cấu trúc mã, tối ưu hiệu suất và bổ sung các bước kiểm tra để đảm bảo website hoạt động ổn định trên nhiều trình duyệt cũng như nhiều tình huống sử dụng khác nhau.

Ưu tiên đóng gói thành các hàm hoặc module riêng

Thay vì đặt toàn bộ mã JavaScript trong một tệp duy nhất, hãy chia các chức năng thành từng hàm hoặc module độc lập. Cách tổ chức này giúp mã nguồn dễ đọc, dễ tái sử dụng, thuận tiện cho việc kiểm thử và bảo trì về sau. Khi website phát triển với hàng chục hoặc hàng trăm chức năng, việc quản lý mã theo module sẽ giúp giảm đáng kể nguy cơ xung đột giữa các biến và hàm.

Kết luận

Một lập trình viên JavaScript không nhất thiết phải ghi nhớ toàn bộ cú pháp của ngôn ngữ, nhưng nên sở hữu một thư viện các đoạn mã thực hành thường dùng để có thể tái sử dụng trong nhiều dự án khác nhau. Điều này không chỉ giúp tăng tốc quá trình phát triển website mà còn giảm đáng kể nguy cơ phát sinh lỗi do viết lại cùng một chức năng nhiều lần.

Những ví dụ trong bài viết đều được lựa chọn từ các tình huống thực tế mà hầu hết website hiện nay đều có thể áp dụng, từ thao tác với DOM, xử lý biểu mẫu, quản lý mảng, xử lý chuỗi, làm việc với thời gian cho đến tạo và cập nhật giao diện động. Bạn hoàn toàn có thể mở rộng các đoạn mã này thành những chức năng phức tạp hơn hoặc kết hợp nhiều ví dụ lại để xây dựng các tính năng hoàn chỉnh cho website của mình.

Khi đã nắm vững các đoạn code nền tảng này, việc học những kiến thức JavaScript nâng cao như Promise, Async/Await, Fetch API, Module, Web Storage hay Framework hiện đại sẽ trở nên dễ dàng và hiệu quả hơn rất nhiều.

★★★★★ ★★★★★
5/5 - (1 Đánh giá)
0 Bình luận

Trần Thị Vân

Trần Thị Vân là Content Creator tại Web Mới, phụ trách nghiên cứu, biên soạn nội dung và chia sẻ kiến thức về website, SEO, lập trình cùng các xu hướng công nghệ

Chia sẻ nội dung đánh giá của bạn về JavaScript thực hành: Tổng hợp các đoạn code hữu ích cho website
Email, Điện thoại của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *

Bình luận, Hỏi đáp

Đăng ký tư vấn thiết kế website

Tìm hiểu 1 năm không bằng lắng nghe 1 câu tư vấn