버튼을 클릭하면 명언이 나와요
-이름이 나와요
최종 완성된 모습
ㅠ_ㅠ...
set()을 이용해 보라고해서 이용했어요.
처음에 set으로 중복을 지우는데 중복이 계속 삭제가 되는거애요.
그래서 중복이 제거된 부분에 값들을 추가를 해봐도 중복이 계속 겹치더라고요.
그래서 다시 중복을 지우니간 중복이 제거가 되는겁니다.ㅠ_ㅠ
(머리가 아파왔습니다.)
6시간 헤매고 난다음. 구글링 30분 하고나서야 set()의 비밀을 알았어요...
for()을 이용해서 만들면 중복을 제거한다고 하더군요.. -_-
6시간을 뺏겼지만. 이전보다 배열에 대해 좀 더 알게 되어서 괜찮네요
(공부해야 하는데.. 못했어요.)
문제내용
자바스크립트를 사용해서 자동으로 복권 번호를 생성해주는 프로그램을 작성하세요.
set()을 꼭 이용할 것 / 숫자는 1~45까지 6개로 출력 할 것 / 중복은 제외 시킬 것
코드
<body>
<h1>로또 번호 생성기</h1>
<div>
<a href="#">클릭</a>
</div>
<h2></h2>
<script>
const tag = document.querySelector("a");
const H2 = document.querySelector("h2");
let set = new Set();
tag.addEventListener("click", () => {
// for문은 중복만 제거한다 / while문으로 길이를 재야한다.
while(set.size < 6){
let number = Math.floor((Math.random() * 45)+1);
set.add(" " + number);
}
const ac = Array.from(set);
H2.innerHTML = ac;
set.clear();
});
</script>
</body>코드설명
(set()을 잘 몰라서 6시간을 헤매다가 구글링을 통해서 뒤늦게 알게 되어서.. 구글링의 코드도 들어갔어요.ㅠ_ㅠ)
(ㅠ_ㅠ..ㅠ_ㅠ..ㅠ_ㅠ)
1.tag.addEventListener("click")은 a태그를 클릭하면 코드가 실행됩니다.
2.while문으로 set의 길이를 비교합니다.
3.let number에는 랜덤값을 얻은 것들을 저장시킵니다.
4.set.add는 set에 내용을 추가하는 것입니다. while문의 조건이 6과 똑같아질때까지 set에 내용을 넣읍니다.
5.const ac = Array.from(set)은 set으로 통해서 중복을 제거하면 "객체"로 생성이 됩니다.
그래서 Array.from(set)을 통해서 "배열"로 바꿔줍니다.
6.H2.innerHTMl = ac; -- 랜덤값들을 HTML코드로 넣어줍니다.
7.만들어도 1번만 실행되고 안되길래 set명령어를 찾아보니간 set 초기화라는게 있더군요.!!!
8.set.clear()은 set() 내용을 초기화 시켜줍니다.
