- 자바스크립트로 랜덤 아이디 생성기를 만들어보자2024년 02월 03일
- Lv. 34 라이츄
- 작성자
- 2024.02.03.:58
이거 로직 자체는 간단한데 뭐 사이드로 붙이다가 개같이 헤맸음...
사실 외형은 딱히 신경 쓸 게 없다. 그냥 적당히 색깔 고르고 배치 적당히 한게 다이므로 여기서 서술할것은 온니 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); });
아무튼 그래서 이게 전체 코드고요
잘 돌아갑니다. 내가 아이디 만들면 커진댔잖아유...
'Coding > JavaScript' 카테고리의 다른 글
현재 시각을 십이지시로 바꿔보자 Ver.JS (0) 2024.02.12 테마 변경을 해 보자(feat. 라디오 버튼) (0) 2024.02.10 자바스크립트로 계산기를 만들어보자 (0) 2024.01.30 자바스크립트로 만나이를 구해보자 (후편) (0) 2024.01.16 자바스크립트로 만나이를 구해보자 (전편) (0) 2024.01.16 다음글이전글이전 글이 없습니다.댓글