Trong hướng dẫn này, chúng ta sẽ xem cách xây dựng một trình tạo mật khẩu hoàn toàn bằng vanilla JavaScript. Chúng tôi sẽ xem xét triển khai các tính năng sau ✨
- Chúng tôi sẽ có thể tạo một mật khẩu ngẫu nhiên từ các chữ cái trong bảng chữ cái tiếng Anh
- Chúng ta sẽ có thể sử dụng chữ in hoa, số và ký hiệu nếu muốn
- Chúng tôi sẽ có thể sao chép mật khẩu đã tạo vào khay nhớ tạm
- Và chúng tôi cũng sẽ có thể đặt độ dài của mật khẩu
Nếu bạn chỉ quan tâm đến phần tạo mật khẩu, hãy truy cập kho lưu trữ GitHub
Để đạt được điều này, tất nhiên chúng ta sẽ cần một thiết kế. Đối với dự án này, chúng tôi sẽ sử dụng thiết kế sau từ Dribbble
Tuy nhiên, chúng tôi sẽ thay đổi một vài điều ở đây và ở đó. Đầu tiên, chúng tôi sẽ không cần hộp kiểm chữ thường, vì chúng sẽ được bao gồm theo mặc định. Thứ hai, chúng tôi cũng sẽ không cần nút đóng vì đây sẽ không phải là cửa sổ bật lên mà là toàn bộ ứng dụng. Và cuối cùng, chúng tôi sẽ giới hạn độ dài của mật khẩu. Chúng tôi sẽ chỉ cho phép tạo mật khẩu có ít nhất 5 ký tự và không quá 20. Tất nhiên, bạn có thể dễ dàng cấu hình điều này theo nhu cầu của riêng bạn. Vì vậy, hãy bắt đầu viết mã và thiết lập dự án
Tìm cách để cải thiện kỹ năng của bạn?
Thiết lập dự án
Chúng tôi sẽ cần ba tệp khác nhau. Một
const flags = {
uppercase: false,
numbers: false,
symbols: false,
length: 5
}const flags = {
uppercase: false,
numbers: false,
symbols: false,
length: 5
}const flags = {
uppercase: false,
numbers: false,
symbols: false,
length: 5
}Trước tiên hãy xem chúng ta cần đánh dấu gì, sau đó chúng ta sẽ đi sâu vào triển khai chức năng trong JavaScript
DOCTYPE html>
🔑 Password generator
Uppercase
Numbers
Symbols
Password Length
5
Generate Password
Đã sao chép vào khay nhớ tạm. Sao chép
Lưu ý rằng chúng tôi đang sử dụng thuộc tính
const flags = {
uppercase: false,
numbers: false,
symbols: false,
length: 5
}Một điều quan trọng mà tôi muốn chỉ ra từ phía CSS, đó là đảm bảo rằng bạn thêm
const flags = {
uppercase: false,
numbers: false,
symbols: false,
length: 5
}const selectors = {
copy: 'copy',
checkbox: 'checkbox',
slider: 'slider',
button: 'button',
sliderValue: document.querySelector['.value'],
input: document.querySelector['input[type="text"]']
}Thiết lập cấu hình
Đầu tiên, chúng tôi muốn thiết lập một số cờ boolean mà sau này chúng tôi có thể sử dụng để quyết định cách chúng tôi muốn tạo mật khẩu. Điều này bao gồm những thứ như liệu chúng tôi muốn sử dụng một số ký tự nhất định hay độ dài của mật khẩu. Chúng ta có thể lưu trữ cái này trong một đối tượng cấu hình
const flags = {
uppercase: false,
numbers: false,
symbols: false,
length: 5
}Đã sao chép vào khay nhớ tạm. Sao chép
Về cơ bản, chúng tôi có một cờ cho mọi đầu vào có thể thay đổi đầu ra của mật khẩu được tạo cuối cùng. Chúng tôi cũng có thể làm điều tương tự với các bộ chọn để sau này nếu chúng tôi phải thay đổi chúng, chúng tôi chỉ cần thực hiện ở một nơi
const selectors = {
copy: 'copy',
checkbox: 'checkbox',
slider: 'slider',
button: 'button',
sliderValue: document.querySelector['.value'],
input: document.querySelector['input[type="text"]']
}Đã sao chép vào khay nhớ tạm. Sao chép
Lưu ý rằng chúng tôi chỉ sử dụng
const selectors = {
copy: 'copy',
checkbox: 'checkbox',
slider: 'slider',
button: 'button',
sliderValue: document.querySelector['.value'],
input: document.querySelector['input[type="text"]']
}const flags = {
uppercase: false,
numbers: false,
symbols: false,
length: 5
}Tìm cách để cải thiện kỹ năng của bạn?
Thêm người nghe sự kiện
Vì chúng tôi muốn chia sẻ cùng một logic cho nhiều trình xử lý sự kiện, chúng tôi sẽ chỉ thêm một trình xử lý sự kiện vào thư mục gốc của ứng dụng và ủy quyền sự kiện cho các phần tử cần thiết. Đối với điều này, chúng ta có thể sử dụng câu lệnh
const selectors = {
copy: 'copy',
checkbox: 'checkbox',
slider: 'slider',
button: 'button',
sliderValue: document.querySelector['.value'],
input: document.querySelector['input[type="text"]']
}const flags = {
uppercase: false,
numbers: false,
symbols: false,
length: 5
}document.querySelector['#app'].addEventListener['click', event => {
switch [event.target.dataset.jsSelector] {
// Event listener for copy
case selectors.copy:
break;
// Event listeners for checkboxes
case selectors.checkbox:
break;
// Event listeners for slider
case selectors.slider:
break;
// Event listener for generate button
case selectors.button:
break;
}
}]Đã sao chép vào khay nhớ tạm. Sao chép
Chúng tôi sẽ triển khai các trình lắng nghe sự kiện cần thiết trong từng trường hợp. Nó chuyển đổi giữa thuộc tính
const flags = {
uppercase: false,
numbers: false,
symbols: false,
length: 5
}const selectors = {
copy: 'copy',
checkbox: 'checkbox',
slider: 'slider',
button: 'button',
sliderValue: document.querySelector['.value'],
input: document.querySelector['input[type="text"]']
}case selectors.checkbox:
flags[event.target.control.id] = !event.target.control.checked
break;Đã sao chép vào khay nhớ tạm. Sao chép
Tất cả những gì chúng tôi đang làm ở đây là cập nhật một trong các cờ dựa trên việc hộp kiểm có được chọn hay không. Chúng ta có thể lấy hộp kiểm bằng cách tham khảo
const selectors = {
copy: 'copy',
checkbox: 'checkbox',
slider: 'slider',
button: 'button',
sliderValue: document.querySelector['.value'],
input: document.querySelector['input[type="text"]']
}const selectors = {
copy: 'copy',
checkbox: 'checkbox',
slider: 'slider',
button: 'button',
sliderValue: document.querySelector['.value'],
input: document.querySelector['input[type="text"]']
}const selectors = {
copy: 'copy',
checkbox: 'checkbox',
slider: 'slider',
button: 'button',
sliderValue: document.querySelector['.value'],
input: document.querySelector['input[type="text"]']
}document.querySelector['#app'].addEventListener['click', event => {
switch [event.target.dataset.jsSelector] {
// Event listener for copy
case selectors.copy:
break;
// Event listeners for checkboxes
case selectors.checkbox:
break;
// Event listeners for slider
case selectors.slider:
break;
// Event listener for generate button
case selectors.button:
break;
}
}]const selectors = {
copy: 'copy',
checkbox: 'checkbox',
slider: 'slider',
button: 'button',
sliderValue: document.querySelector['.value'],
input: document.querySelector['input[type="text"]']
}
Symbols
Đã sao chép vào khay nhớ tạm. Sao chép
Vì vậy, ví dụ: khi chúng tôi kiểm tra "Biểu tượng" sẽ được sử dụng, điều này sẽ chuyển thành như sau
flags.symbols = trueĐã sao chép vào khay nhớ tạm. Sao chép
Nếu bây giờ chúng ta đánh dấu vào các hộp kiểm và ghi các giá trị của đối tượng flags vào bảng điều khiển, chúng ta có thể thấy rằng bất cứ khi nào chúng ta đánh dấu vào một hộp kiểm, giá trị của nó sẽ được cập nhật tương ứng. Điều này sẽ cho phép chúng tôi sử dụng chúng, sau này, để quyết định cách tạo mật khẩu
Thêm trình xử lý sự kiện cho thanh trượt
Tiếp theo, chúng ta có thanh trượt. Sẽ hơi khác một chút đối với các hộp kiểm vì chúng tôi không làm việc với các giá trị boolean mà với một số. Ở đây, chúng tôi không chỉ muốn cập nhật cờ cần thiết mà còn muốn cập nhật giao diện người dùng, hiển thị độ dài hiện tại của mật khẩu. Dựa trên điều này, chúng tôi nhận được những điều sau đây
case selectors.slider:
const value = event.target.valueAsNumber
selectors.sliderValue.innerText = value
flags.length = value
break;Đã sao chép vào khay nhớ tạm. Sao chép
Chúng ta có thể lấy giá trị của thanh trượt dưới dạng số bằng cách sử dụng thuộc tính
document.querySelector['#app'].addEventListener['click', event => {
switch [event.target.dataset.jsSelector] {
// Event listener for copy
case selectors.copy:
break;
// Event listeners for checkboxes
case selectors.checkbox:
break;
// Event listeners for slider
case selectors.slider:
break;
// Event listener for generate button
case selectors.button:
break;
}
}]Sao chép mật khẩu
Chúng ta chỉ còn hai việc phải làm. Tự tạo mật khẩu, sau đó thêm chức năng sao chép, chức năng này sẽ cho phép chúng tôi sao chép mã vào khay nhớ tạm bằng một cú nhấp chuột. Hãy bắt đầu với phần sau vì việc tạo mã sẽ cần thêm một chút giải thích. Sao chép nội dung vào khay nhớ tạm trong JavaScript có thể đạt được theo cách sau
case selectors.copy:
selectors.input.select[]
document.execCommand['copy']
break;Đã sao chép vào khay nhớ tạm. Sao chép
Vì vậy, những gì chính xác xảy ra ở đây? . Đó là tất cả những gì chúng ta cần để sao chép văn bản vào khay nhớ tạm. Bây giờ hãy tập trung sự chú ý của chúng tôi vào việc tạo mật khẩu
Tạo mật khẩu
Đối với phần này, chúng ta có thể tạo một chức năng mới và thuê ngoài logic ở đó, điều đó có nghĩa là chúng ta thực sự có thể thoát khỏi một dòng mã cho trình xử lý sự kiện
case selectors.button:
selectors.input.value = generatePassword[]
break;Đã sao chép vào khay nhớ tạm. Sao chép
Chúng tôi đặt giá trị của trường đầu vào thành giá trị trả về của hàm
document.querySelector['#app'].addEventListener['click', event => {
switch [event.target.dataset.jsSelector] {
// Event listener for copy
case selectors.copy:
break;
// Event listeners for checkboxes
case selectors.checkbox:
break;
// Event listeners for slider
case selectors.slider:
break;
// Event listener for generate button
case selectors.button:
break;
}
}]const flags = {
uppercase: false,
numbers: false,
symbols: false,
length: 5
}Đã sao chép vào khay nhớ tạm. Sao chép
Theo mặc định, chúng ta sẽ bắt đầu với các chữ cái trong bảng chữ cái tiếng Anh viết thường. Chúng ta có thể gọi
document.querySelector['#app'].addEventListener['click', event => {
switch [event.target.dataset.jsSelector] {
// Event listener for copy
case selectors.copy:
break;
// Event listeners for checkboxes
case selectors.checkbox:
break;
// Event listeners for slider
case selectors.slider:
break;
// Event listener for generate button
case selectors.button:
break;
}
}]Vì vậy, dựa trên danh sách các ký tự này và dựa trên các cờ hiện đang hoạt động, chúng tôi muốn tạo phiên bản cuối cùng của chuỗi để chúng tôi biết ký tự nào khả dụng khi chúng tôi thực hiện phần tạo. Điều này có nghĩa là nếu các số được đăng ký, chúng ta sẽ nhận được chuỗi sau
const flags = {
uppercase: false,
numbers: false,
symbols: false,
length: 5
}Và như thế. Vậy làm cách nào để tạo chuỗi cuối cùng dựa trên các cờ?
const flags = {
uppercase: false,
numbers: false,
symbols: false,
length: 5
}Đã sao chép vào khay nhớ tạm. Sao chép
Điều này bao gồm danh sách ký tự mặc định theo mặc định [chữ thường của bảng chữ cái tiếng Anh] và tùy chọn, chúng tôi có thể thêm phần còn lại của ký tự nếu cờ của chúng được đặt thành true. Đối với điều này, chúng ta có thể sử dụng toán tử trải rộng với một bộ ba được kết hợp, để thêm nó hoặc thêm một mảng trống. Do cách thức hoạt động của trải rộng, nếu một trong các cờ là
document.querySelector['#app'].addEventListener['click', event => {
switch [event.target.dataset.jsSelector] {
// Event listener for copy
case selectors.copy:
break;
// Event listeners for checkboxes
case selectors.checkbox:
break;
// Event listeners for slider
case selectors.slider:
break;
// Event listener for generate button
case selectors.button:
break;
}
}]document.querySelector['#app'].addEventListener['click', event => {
switch [event.target.dataset.jsSelector] {
// Event listener for copy
case selectors.copy:
break;
// Event listeners for checkboxes
case selectors.checkbox:
break;
// Event listeners for slider
case selectors.slider:
break;
// Event listener for generate button
case selectors.button:
break;
}
}]Điều cuối cùng cần làm là thực sự trả lại mật khẩu từ hàm. Đối với điều này, chúng tôi sẽ điền vào một mảng bằng độ dài của mật khẩu và chúng tôi chọn ngẫu nhiên một ký tự từ danh sách ký tự. Đối với điều này, chúng ta có thể sử dụng công thức sau
const flags = {
uppercase: false,
numbers: false,
symbols: false,
length: 5
}Đã sao chép vào khay nhớ tạm. Sao chép
Đầu tiên, chúng ta cần tạo một mảng. Chúng ta có thể làm điều này bằng cách sử dụng
document.querySelector['#app'].addEventListener['click', event => {
switch [event.target.dataset.jsSelector] {
// Event listener for copy
case selectors.copy:
break;
// Event listeners for checkboxes
case selectors.checkbox:
break;
// Event listeners for slider
case selectors.slider:
break;
// Event listener for generate button
case selectors.button:
break;
}
}]case selectors.checkbox:
flags[event.target.control.id] = !event.target.control.checked
break;Tham số thứ hai là hàm gọi lại xác định giá trị của từng phần tử bên trong mảng là gì. Ở đây chúng tôi đang lấy một chỉ mục ngẫu nhiên từ
case selectors.checkbox:
flags[event.target.control.id] = !event.target.control.checked
break;case selectors.checkbox:
flags[event.target.control.id] = !event.target.control.checked
break;const flags = {
uppercase: false,
numbers: false,
symbols: false,
length: 5
}Đã sao chép vào khay nhớ tạm. Sao chép
Bây giờ chúng ta có một danh sách các chỉ mục ngẫu nhiên, chúng ta có thể chọn ký tự thích hợp từ danh sách ký tự bằng cách sử dụng bản đồ, sau đó nối mọi thứ lại với nhau thành một chuỗi. Điều này có nghĩa là chúng tôi sẽ nhận được mật khẩu đã tạo và cùng với đó, thông tin sau
Tìm cách để cải thiện kỹ năng của bạn?
Tóm lược
Và bây giờ bạn vừa tạo trình tạo mật khẩu đầu tiên của mình bằng vanilla JavaScript. 🎉 Nếu bạn muốn lấy mã nguồn nguyên vẹn của ứng dụng này, bạn có thể sao chép nó từ kho lưu trữ GitHub của nó. Nếu bạn đang tìm kiếm thêm ý tưởng dự án JavaScript, tôi khuyên bạn nên xem bài viết bên dưới. Cảm ơn bạn đã đọc qua. Tiếp tục mã hóa. 👨💻