이거 로직 자체는 간단한데 뭐 사이드로 붙이다가 개같이 헤맸음…
사실 외형은 딱히 신경 쓸 게 없다. 그냥 적당히 색깔 고르고 배치 적당히 한게 다이므로 여기서 서술할것은 온니 JS뿐…
https://github.com/koreanraichu/Javascript/tree/main/random%20ID%20generator
파일 여기 있습니다. 예.
기본적인 로직
const button = document.querySelectorAll('button');
const idLengthval = document.querySelector('.idlength');
const idCount = document.querySelector('.idhowmany');
const idValarea = document.querySelector(".ID");
const wordOption = document.querySelectorAll(".listopt");
자바스크립트의 시작은 항상 조작할 DOM을 가져오는 것… 아래 세 줄은 1번에서는 신경쓰지 않아도… 아니 네번째줄은 필요하고 세번째줄이랑 다섯번째줄이 나중에 봐도 되는거임. 아무튼 기본 로직에서 필요한 건 버튼이랑 길이값(아이디 길이), 그리고 아이디 만들어서 붙일 공간이다.
button.addEventListener('click',(e) => {
let idLength = idLengthval.value;
let idText = "";
let word_list = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890!@#$%^&*";
let idValue = document.createElement("p");
//자바스크립트는 아스키코드 못다루나?
for (let i = 0;i < idLength;i++) {
idText += word_list.charAt(Math.floor(Math.random() * word_list.length));
idValue.innerText = idText;
idValarea.appendChild(idValue);
}
})아니 궁금해서 그러는데… 파이썬은 아스키코드로 리스트 만들 수 있는데 JS는 그거 안됨? 아니 되지 않아요? 안될리가 엄서… 아무튼. 기본 로직은 저 리스트 중에서 랜덤으로 하나를 뽑아서 내가 원하는 길이(위에 입력한 그 길이)만큼 만드는거다. 반복문은 장식이 아니고 아이디 길이때문에 들어간거다.
추가 기능
아이디 싹 지우기
button[1].addEventListener('click',(e)=>{
location.reload(true);
});버튼이 querySelectorAll인데는 이유가 있는 법이니라… 근데 아이디를 div에 p태그로 갖다 붙이는 형태라 아무리 생각해도 이걸 한꺼번에 지울 수가 없는거다. 그래서 걍 페이지 새로고침함… ㅋㅋㅋㅋㅋㅋ 아니 새로고침해도 지워져요 지워지기는 ㅋㅋㅋㅋㅋㅋ
아이디를 원하는 길이만큼 원하는 개수로 만들기
function makeID() {
let idLength = idLengthval.value;
let idText = "";
let word_list = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890!@#$%^&*";
let idValue = document.createElement("p");
//자바스크립트는 아스키코드 못다루나?
for (let i = 0;i < idLength;i++) {
idText += word_list.charAt(Math.floor(Math.random() * word_list.length));
idValue.innerText = idText;
idValarea.appendChild(idValue);
};
}이걸 하려면 일단 위에 저 로직을 함수로 빼버리는 게 좋다. 안 빼도 할 수는 있는데 하다가 님들 멘탈 나가고 정신없으니까 빼시는게 정신건강에 이롭습니다. 왜냐하면 아이디를 원하는 개수만큼 만들려면 가장 원시적이면서 간단한 방법이 반복문 뺑뺑이거든…
button[0].addEventListener('click',(e) => {
let idCountvalue = idCount.value;
for (let i = 0;i < idCountvalue;i++){
makeID();
};
});그래서 사실 여기까지는 쉽다. 이 다음이 문제지…
아이디 만들 때 쓸 문자 범위 정하기
이게 뭔 소리냐… 생각해봅시다. 나는 아이디 만들 때 특수문자를 안 넣을거다. 근데 위에 로직에 있는 리스트에는 특문이 들어가있거든요? 그러면 좋든 싫든 특수문자를 넣어야되잖아요. 안 들어갈 수도 있지만 랜덤이라는 건 그런겁니다. 그니까 아예 랜덤으로 만들되 범위를 정하자 이 얘깁니다.
저기 Generate 버튼 밑에 있는 건 아이디 만들면 커지니까 걱정 마시고… 위에 있는 체크박스가 아이디 만들 때 쓸 문자 옵션이다. 그러니까 특문 안 넣을거면 특문 빼고 다 고르면 된다.
function makelist() {
let word_list = "";
for (let i = 0;i < wordOption.length;i++) {
if (wordOption[0].checked) {
word_list += "0123456789"
}
else if (wordOption[1].checked) {
word_list += "ABCDEFGHIJKLMNOPQRSTUVWXYZ"
}
else if (wordOption[2].checked) {
word_list += "abcdefghijklmnopqrstuvwxyz"
}
else if (wordOption[3].checked) {
word_list += "!@#$%^&*"
}
}
return word_list
}근데 이렇게 하니까 여러개를 골랐는데도 하나만 들어가는거다. 그니까 영소 영대를 골랐는데 영어 소문자로만 아이디를 만들어주잖아욧. 그래서 구글링을 했는데 대부분 HTML단에서 Value 정해두고 그거 가져오는 것만 있더라고… 원래 하려던건 체크박스 값에는 말 그대로 옵션명(숫자/영소/영대/특문)만 넣어두고 자바스크립트단에서 목록 만드는거였는데… 혹시 방법 아시는 분 제보좀 주세요.
<div class="check">
<input type="checkbox" class="listopt" name="listopt" value="0123456789">숫자(0~9)
<input type="checkbox" class="listopt" name="listopt" value="ABCDEFGHIJKLMNOPQRSTUVWXYZ">영어 대문자(A~Z)
<input type="checkbox" class="listopt" name="listopt" value="abcdefghijklmnopqrstuvwxyz">영어 소문자(a~z)
<input type="checkbox" class="listopt" name="listopt" value="!@#$%^&*">특수문자(!@#$%^&*)
</div>아무튼 value에서 갖다 쓰는 방법만 있고 시간도 새벽이라 나도 걍 value에 때려박고 갖다 쓰기로 했음. 그래서 체크박스에는 각 옵션에 해당하는 문자가 들어갑니다. 특수문자는 !@#$%^&*까지만 있음.
function makelist() {
let word_list = "";
wordOption.forEach((item) => {
if (item.checked) {
word_list += item.value
}
})
return word_list
}그리고 회심의 ForEach 들어갑시다. 저건 또 왜 함수로 뺐냐면 위에서 아이디 반복문으로 돌리려고 뺀거에 리스트가 있었기 때문이다. 그때는 고정값이었지만 이제 옵션에 따라 리스트를 만들거란말이죠. 근데 리스트 만드는거를 아이디 만들때마다 일일이 만들거임? 옵션도 같은데?? 난 그러고 싶지 않아…
const button = document.querySelectorAll('button');
const idLengthval = document.querySelector('.idlength');
const idCount = document.querySelector('.idhowmany');
const idValarea = document.querySelector(".ID");
const wordOption = document.querySelectorAll(".listopt");
function makelist() {
let word_list = "";
wordOption.forEach((item) => {
if (item.checked) {
word_list += item.value
}
})
return word_list
}
function makeID() {
let idLength = idLengthval.value;
let idText = "";
let word_list = makelist();
let idValue = document.createElement("p");
//자바스크립트는 아스키코드 못다루나?
for (let i = 0;i < idLength;i++) {
idText += word_list.charAt(Math.floor(Math.random() * word_list.length));
idValue.innerText = idText;
idValarea.appendChild(idValue);
};
}
button[0].addEventListener('click',(e) => {
let idCountvalue = idCount.value;
for (let i = 0;i < idCountvalue;i++){
makeID();
};
});
button[1].addEventListener('click',(e)=>{
location.reload(true);
});
아무튼 그래서 이게 전체 코드고요
잘 돌아갑니다. 내가 아이디 만들면 커진댔잖아유…
Reply