Tôi không có tài năng gì cả. Tôi chỉ đam mê hiểu biết
12 Thủ Thuật Javascript Dành Cho Developer

12 Thủ Thuật Javascript Dành Cho Developer


Ngày 13 Tháng 7 Năm 2020

Bài viết hôm nay mình sẽ giới thiệu đến bạn một số thủ thuật Javascript giúp giải quyết những vấn đề phổ biến mà một lập trình viên hay gặp phải trong quá trình phát triển web. Nào bây giờ chúng ta hãy cùng nhau đi vào tìm hiểu nhé!

Các Thủ Thuật Javascript Dành Cho Developer

Cách Copy To Clipboard Javascript

Clipboard là một bộ nhớ đệm tạm thời giúp ghi lại dữ liệu của người dùng. Ví dụ khi bạn thực hiện sao chép các đoạn văn trong Word thì nội dung đó sẽ được lưu vào clipboard của máy tính. Các bạn cũng có thể thực hiện cách sao chép này thông qua Javascript cho trang web. Để hiểu rõ hơn chúng ta sẽ đi vào ví dụ nhé:

HTML

<!-- Tạo ô nhập nội dung -->
<input type="text" value="Xin Chào" id="o_nhap">
<!-- Nút để thực hiện sao chép -->
<button onclick="myFunction()">Sao Chép Vào Clipboard</button>

Javascript

function myFunction() {
/* Lấy nội dung từ ô input */
var noi_dung_sao_chep = document.getElementById("o_nhap");
/* Chọn nội dung có trong ô input */
noi_dung_sao_chep.select();
noi_dung_sao_chep.setSelectionRange(0, 99999); /*cho thiết bị điện thoại*/
/* thực hiện copy nội dung */
document.execCommand("copy");
/* thông báo nội dung được copy */
alert("Nội dung được sao chép là " + noi_dung_sao_chep.value);
}

Bây giờ chúng ta hãy cùng nhau xem kết quả nhé:

See the Pen Cách sao chép một chuỗi vào clipboard by haycuoilennao19 (@haycuoilennao19) on CodePen.

Nguồn

Cách Get URL Bằng Javascript

Phần này chúng ta sẽ lấy URL trong tab trên trang web hiện tại bằng việc sử dụng window.location.href. Để hiểu rõ hơn bạn xem đoạn code sau nhé:

See the Pen Cách Lấy URL Hiện Tại Bằng Javascript by haycuoilennao19 (@haycuoilennao19) on CodePen.

Nguồn

Cách Lấy Scroll Position Bằng Javascript

Chúng ta sẽ lấy vị trị hiện tại của thanh cuộn trong trang web bằng việc lắng nghe sự kiện scroll với hai thuộc tính chính là scrollX: vị trí hiện tại của thanh cuộn dựa theo chiều ngang(Từ Trái Sang Phải) và scrollY là vị trí hiện tại của thanh cuộn theo chiều thẳng đứng(Từ Trên xuống dưới). Để dễ hình dung hơn bạn xem ví dụ sau đây nhé:

See the Pen Cách Lấy Vị Trí Của Thanh Cuộn(Scroll) Trong Trang Web by haycuoilennao19 (@haycuoilennao19) on CodePen.

Nguồn

Cách Sử dụng toggle() Javascript

Trong Javascript khi bạn muốn thay đổi qua lại giữa các class cho đối tượng trong trang web thì chúng ta có thẻ dùng lệnh classList.toggle("Class được chuyển đổi"). Để hiểu rõ hơn bạn xem ví dụ sau nhé:

See the Pen Cách Chuyển Đổi Class(Toggle) Trong Javascript by haycuoilennao19 (@haycuoilennao19) on CodePen.

Nguồn

Cách Tạo Nút Scroll-To-Top Bằng Javascript

Khi người dùng đang ở vị trí cuối trang thì sẽ rất khó khăn và không thân thiện khi người dùng phải dùng thanh cuộn để di chuyển lên vị trí đầu trang để thực hiện hành động nào đó. Do đó phần này chúng ta sẽ đi vào tìm hiểu cách xây dựng một nút giúp khách hàng có thể tự động chuyển lên đầu trang một cách nhanh chóng thông qua thuộc tính scrollTo()requestAnimationFrame(dùng để yêu cầu trình duyệt thực hiện một animation nào đó). Và để dễ hình dung hơn bạn xem ví dụ sau đây nhé!

See the Pen Cách Di Chuyển Lên Đầu Trang Trong Javascript by haycuoilennao19 (@haycuoilennao19) on CodePen.

Nguồn

Cách Detect Device Bằng Javascript

Để biết được người dùng đang sử dụng thiết bị nào để truy cập trang web thì bạn có thể sử dụng Javascript với thuộc tính test(navigator.userAgent). Và để hiểu rõ hơn bạn xem đoạn code sau nhé:

See the Pen Cách nhận diện thiết bị khi sử dụng trang web của bạn by haycuoilennao19 (@haycuoilennao19) on CodePen.

Nguồn

Cách Lấy Ngày Giữa 2 Đối Tượng dates Javascript

Thông thường trong javascript khi chúng ta khởi tạo một đối tượng Date thì giá trị trả về sẽ là một số được tính bắt đầu từ ngày 1 tháng 1 năm 1970(đơn vị mili giây). Vậy nên ví dụ dưới đây chúng ta sẽ tìm hiểu cách tính và định dạng lại kiểu thời gian giữa hai ngày với nhau nhé:

See the Pen Tính và định dạng khoảng thời gian giữa hai ngày trong js by haycuoilennao19 (@haycuoilennao19) on CodePen.

Nguồn

Cách Validate Email Javscript

Đối với các trường hợp validate thì validate email là một trong những cách thường được áp dụng chung cho hầu hết việc xác thực email trong trang web của bạn. Do đó ví dụ dưới đây sẽ giúp bạn có thể validate email cho trang web một cách nhanh chóng và dễ dàng:

See the Pen Cách Validate Email Trong Javscript by haycuoilennao19 (@haycuoilennao19) on CodePen.

Nguồn

Sử Dụng window.print() Javascript

Javascript có một thuộc tính là window.print() giúp bạn có thể chuyển sang chế độ screen cho trang web. Và để dễ hình dung hơn chúng ta cùng nhau xem ví dụ sau đây nhé:

See the Pen Hiển thị chế độ in cho trang web by haycuoilennao19 (@haycuoilennao19) on CodePen.

Nguồn

Cách Sử Dụng Javascript Date Format

Ví dụ này chúng ta sẽ cùng nhau đi vào tìm hiểu cách lấy ngày tháng năm trong đối tượng Date Javascript nhé:

See the Pen Lấy giá trị ngày tháng năm bằng javascript by haycuoilennao19 (@haycuoilennao19) on CodePen.

Nguồn

Cách tạo Generate Random Color Javascript

Phần này chúng ta sẽ sử dụng thuộc tính Math.random để có thể thiết lập các màu sắc được hiển thị một cách ngẫu nhiên. Và để hiểu rõ hơn bạn xem ví dụ sau đây nhé:

See the Pen Cách tạo màu tự động trong Javascript by haycuoilennao19 (@haycuoilennao19) on CodePen.

Nguồn

Cách Tạo Typewriter Effect Javascript

Ví dụ dưới đây chúng ta sẽ đi vào tạo hiệu ứng đánh chữ bằng Javascript giúp trang web của bạn trở nên thú vị hơn. Và để hiểu rõ hơn bạn xem đoạn code sau nhé:

See the Pen hieu ung danh chu bang js by haycuoilennao19 (@haycuoilennao19) on CodePen.

Nguồn

Tổng kết:

Qua đây mình mong bài viết sẽ cung cấp thêm cho bạn những thủ thuật Javascript hữu ích dành cho việc phát triển, thiết kế web và nếu có thắc mắc gì cứ gửi email mình sẽ phản hồi sớm nhất có thể. Rất mong bạn tiếp tục ủng hộ trang web để mình có thể viết nhiều bài hay hơn nữa nhé. Chúc bạn có một ngày vui vẻ!

author image

Mình là Thái Viết Nhật. Mình có ước mơ là có thể làm các bài giảng miễn phí và chia sẻ những bài viết, công cụ hữu ích dành cho thiết kế, phát triển website.

Mong bạn ủng hộ trang web để mình có thêm kinh phí phát triển và viết thêm nhiều bài về lập trình web hơn nữa nha. Xin chân thành cảm ơn.