자바스크립트 암호 생성기
JavaScript는 최근 웹 개발을 위한 스크립팅 언어로 매우 인기를 얻고 있습니다. JavaScript를 사용하여 할 수 있는 많은 일이나 프로젝트가 있습니다.
JavaScript를 사용하여 구현할 수 있는 프로젝트 중 하나는 임의 암호 생성기입니다. 이 기사를 통해 HTML 및 CSS의 도움으로 JavaScript를 사용하여 임의 암호 생성기를 구현하는 방법을 배웁니다.
자바스크립트 암호 생성기
구현하려는 시스템은 임의의 암호를 제공합니다. 모든 대문자와 소문자, 숫자 및 기호의 12자를 포함합니다.
생성 버튼을 클릭할 때마다 임의의 비밀번호가 표시됩니다.
먼저 이 자습서에서는 HTML과 CSS를 사용하여 간단한 웹 페이지를 디자인합니다. 우리는 비밀번호 생성기를 만들고 있기 때문에 사용자에게 더 매력적이어야 합니다.
그런 다음 비밀번호 생성기를 활성화하기 위해 JavaScript 파일을 생성합니다. 아래 단계에 따라 임의 암호 생성기를 쉽게 만들 수 있습니다.
제목 및 단락 추가
첫 번째 단계로 웹 페이지를 설명하는 제목과 작은 단락을 추가합니다.
암호:
<div class="headings">
<h1>Password Generator</h1>
<p>This is a password generator where you can generate random passwords</p>
</div>
이제 style.css 파일의 제목(h1)과 단락(p)에 몇 가지 스타일을 추가할 수 있습니다.
암호:
body{
background-color: beige;
align-content: center;
justify-content: center;
display: block;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.headings{
text-align: center;
}
.headings p{
margin-bottom: 40px;
font-size: 20px;
}
출력은 다음과 같아야 합니다.
임의 암호를 표시하는 입력 상자 추가
지금까지 이 웹 페이지에서 제공하는 내용을 설명하는 제목과 작은 단락을 웹 페이지에 추가했습니다. 이제 암호가 표시될 입력 상자를 추가합니다.
먼저 input 태그를 사용하여 입력 상자를 추가합니다.
<input id="showPSWD" class="inputbox" type="text" placeholder="A random password" readonly>
여기서 우리는 앞으로 getElementByID() 메서드에 사용할 입력 상자 ID를 선언했습니다. 또한 입력 상자의 내용(임의 암호)을 수정하지 않기 때문에 이 입력 상자를 읽기 전용으로 만들었습니다.
비밀번호 생성을 위한 버튼 생성
이제 클릭했을 때 비밀번호를 생성하는 버튼을 만들어 보겠습니다.
<button onclick="generatePSWD()">Generate</button>
여기에서는 버튼을 클릭할 때 generatePSWD() 기능을 호출합니다. generatePSWD()는 암호 생성을 활성화하고 입력 상자에 표시하는 데 사용하는 기능입니다.
이제 CSS를 사용하여 입력 상자와 버튼의 스타일을 지정해 보겠습니다.
.boxShape{
width: 25%;
margin: auto;
text-align: center;
}
.inputbox{
font-size: 15px;
padding: 5px;
margin-right: 5px;
}
button{
background-color: blue;
color: white;
border-radius: 6px;
border-width: 0px;
padding: 5px 20px;
margin-top: 10px;
font-size: 15px;
}
button:hover{
cursor: pointer;
}
이제 비밀번호 생성기의 기반이 HTML 및 CSS를 사용하여 생성되었습니다. 전체 HTML 및 CSS 코드는 다음과 같습니다.
HTML 코드:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="/style.css">
<title>Password Generator</title>
</head>
<body>
<div class="headings">
<h1>Password Generator</h1>
<p>This is a password generator where you can generate random passwords</p>
</div>
<div class="boxShape">
<input id="showPSWD" class="inputbox" type="text" placeholder="A random password" readonly>
<button onclick="generatePSWD()">Generate</button>
</div>
<script src="/activation.js"></script>
</body>
</html>
CSS 코드:
body{
background-color: beige;
align-content: center;
justify-content: center;
display: block;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.headings{
text-align: center;
}
.headings p{
margin-bottom: 40px;
font-size: 20px;
}
.boxShape{
width: 25%;
margin: auto;
text-align: center;
}
.inputbox{
font-size: 15px;
padding: 5px;
margin-right: 5px;
}
button{
background-color: blue;
color: white;
border-radius: 6px;
border-width: 0px;
padding: 5px 20px;
margin-top: 10px;
font-size: 15px;
}
button:hover{
cursor: pointer;
}
이제 웹 페이지는 다음과 같아야 합니다.
JavaScript를 사용하여 비밀번호 생성기 활성화
이를 위해 getElementByID() 메서드를 사용하여 변수를 생성하고 입력 ID에 할당합니다: showPSWD.
let pswd = document.getElementById('showPSWD');
그런 다음 generatePSWD()라는 JavaScript 함수를 만듭니다. 함수 내에서 randPSWD, character 및 lenOfPSWD의 세 가지 변수를 선언합니다.
‘randPSWD’는 임의로 선택된 문자가 입력 상자에 저장되고 표시되는 빈 문자열입니다.
lenOfPSWD에는 임의 암호의 길이로 12가 포함됩니다. 원하는 길이로 변경할 수도 있습니다.
모든 문자, 숫자 및 기호는 character 변수에 저장됩니다. 암호를 생성하기 위해 무작위로 선택됩니다.
function generatePSWD() {
let randPSWD = '';
let lenOfPSWD = 12;
let characters =
'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789!@#$%^&*()';
이제 for 루프를 사용하여 임의의 암호를 생성할 수 있습니다.
for (let i = 0; i < lenOfPSWD; i++) {
let randChar = Math.floor(Math.random() * characters.length);
randPSWD += characters.substring(randChar, randChar + 1);
}
여기에서는 Math.random을 사용하여 문자열에서 임의의 문자를 선택했습니다. randChar는 무작위로 선택된 문자입니다. randPSWD의 모든 반복 저장소에 randChar가 있습니다.
마지막으로 randPSWD 문자열을 getElementByID() 메서드의 값으로 할당하여 입력 상자에 표시할 수 있습니다.
document.getElementById('showPSWD').value = randPSWD;
다음은 전체 JavaScript 코드입니다.
let pswd = document.getElementById('showPSWD');
function generatePSWD() {
let randPSWD = "";
let lenOfPSWD = 12;
let characters = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789!@#$%^&*()";
for (let i = 0; i < lenOfPSWD; i++) {
let randChar = Math.floor(Math.random() * characters.length);
randPSWD += characters.substring(randChar, randChar + 1);
}
document.getElementById("showPSWD").value = randPSWD;
}
버튼을 클릭하면 임의의 암호가 입력 상자에 표시됩니다. 버튼을 반복해서 클릭하여 임의의 비밀번호를 생성할 수 있습니다.
출력:
결론
HTML 및 CSS와 함께 JavaScript를 사용하여 임의 암호 생성기를 구축하는 자습서를 살펴보았습니다. 이를 달성하는 더 많은 방법이 있지만 이 방법은 임의 암호 생성기를 만드는 또 다른 쉬운 방법입니다.
Nimesha is a Full-stack Software Engineer for more than five years, he loves technology, as technology has the power to solve our many problems within just a minute. He have been contributing to various projects over the last 5+ years and working with almost all the so-called 03 tiers(DB, M-Tier, and Client). Recently, he has started working with DevOps technologies such as Azure administration, Kubernetes, Terraform automation, and Bash scripting as well.