무시험 추첨기
페이지 정보
작성자 Fella 작성일24-08-30 10:11 조회84회 댓글0건관련링크
본문
뭐몸이 추첨기 아픈건아픈거고일단 할 건 해보자할 수 있을 것같다.쓰러지기 전에얼른 마무리 해보쟈오늘은로또 추첨기를만드는 챕터인데로또 추첨을 잘 모르고보너스 번호도 잘 모르겠어서그냥 순서도는 보고 해야겠다.여튼 시작해보자로또는45개의 공이 든 통에서7개를 공을 뽑는다.그리고 중복이 불가능하며당첨 숫자 6개를 모두 맞히면1등당첨 숫자 5개와 보너스 숫자를 1개 맞추면2등당첨 숫자 5개를 맞추면3등당첨 숫자를 4개 맞추면4등,3개 맞추면5등이다.오오...사실 관심없어서잘 몰랐는데 이제 알았다.여튼 저기 순서도는방금 말한 절차를 토대로만들어진 순서도이다.이 프로그램은길제로 구현하기가 어렵다.순서대로 구현하다보면생각처럼 안되는 추첨기 것을볼 수 있는데바로 비동기 특성 때문이다.이제 하면서 알아보자프로그램이 시작되면서숫자 6개를 입력받아야한다.input태그 6개를 써서각각의 숫자를 입역받아도 되고input 태그 하나로6개를 전부 받아도 되는데여기서는 input 태그 하나만을사용한다.단 input 태그 안에숫자 6개가 제데로 들어있는지 확인해야 한다.input 태그나 prompt()태그가있을 때는 입력을 잘 했는데확인하는 절차가 꼭 필요하다.숫자를 입력했는지숫자가 6개인지숫자가 중복되지 않는지1부터 45까지의 숫자인지차례대로 검사한다.오류가 잘 뜨는 모습을 볼 수 있다.이번에는무작위로 숫자를 뽑아보자숫자를 무작위로 뽑는 로직은전에 이미 만들었다.먼저 추첨기 1에서 45까지의 숫자를 준비하고for문 대신 배열의 메서드를 사용하여 숫자들을candidate 변수에 저장한다.어떤가이렇게 candidate를저장해 놓았다.빈 배열을 하나를만들고 candidate 변수의길이가 0이 될때까지candidate.length>0 반복하는데이번에는 while문을 사용 할 것이다.여기서 작성한코드를피셔-예이츠 셔플알고리즘이라고 한다.이제 공 45개가 준비되었으니공 7개를 뽑느다.배열 메서드인slice 로 shuffle 배열에서값 6개를 잘라 새로운 배열을 만든다.이 배열은 당첨 숫자가 된다.그리고 잘라낸 값들의 다음 값을 뽑으면이 값은 보너스 숫자가 된다.당첨 숫자는 오름차순으로 정렬해야한다. 지금은 무작위로 들어가 있다.여기서는배열의 추첨기 정렬 매서드인sort()를 사용하여오름차순으로 정렬했다.잘 나오는 모습을 볼 수 있다.이번에는공을 순서대로 표시해보겠다.뽑은 공들을화면에 표시하겠다.긴장감을 위해 1초에하나씩 뽑기로 했으며타이머 함수(setTimeout())를사용한다.1초 뒤 뽑는다면?1. 1000밀리초 후에 실행되도록setTimeout()을 설정한다.2. document.createElement()를사용하여 기존 HTML에 없던ball 태그를 새로 생성한다.3. ball 태그의 클래스를'ball'로 지정하여style 태그에 있는 CSS를 적용한다.4. 태그 내용물로는winBalls 배열의 첫번째 요소를넣는다.5.#result 태그 안에 ball 태그를 추가한다.공 하나가 화면에표시되는 것을확인 했으니공 7개를 모두 화면에 표시해보자setTimeout()을 7번 사용해도 되지만,코드가 중복되므로반복문과 추첨기 함께 사용하자화면에 표시되는 위치가 다르니 어떻게 해야하는지 생각해보자1. for문으로 0부터 winBalls.length()-1 까지 반복한다.1초에는 winBalls[0]2초에는 winBalls[1]3초에는 winBalls[2]이렇게 생성된다.보너스 공은 7초부터나오게 하면된다.이렇게 하면당첨 곰을 뽑는 코드와중복되는 부붑ㄴ이 보이니까중복되는 부분은 함수로 뽑아내고중복 되지 않는 부분은매개변수로 만든다.오오..여기서앞에서 작성한 반복문for(let i ϐ i<winBalls.length;i++)여기부분의let 을 var로 바꾸면?스코프와 클로저 처럼setTimeout()과 반복문var가 만나 문제가 발생한다.var는 함수 스코프라서windballs[i]와 i를콘솔로 출력하면모두 undefined,6이 나오게 된다.async/await로공을 순서대로 표시하기setTimeout()으로 공을 표시했는데좀더 깔끔한 코드를 위해프로미스와 추첨기 async/awiat 문법을 사용해보자async/await문법은 프로미스에만적용 가능하므로setTimeout()을 setTImeoutPromise라는고차함수로 변경하겠다.await문법을 사용하기 위해submit 이벤트 리스너를async()함수로 변경한다.차이점이전 코드바뀐 코드정렬 후 1초 뒤에 첫 번째 공 표시정렬 후 1초 귀에 첫 번째 공 표시정렬 후 2초 뒤에 두 번째 공 표시첫 번째 공 표시 1초 뒤에 두 번째 공 표시정렬 후 3초 뒤에 세 번째 공 표시두 번째 공 표시 1초 뒤에 세 번째 공 표시정렬 후 추첨기 4초 뒤에 네 번째 공 표시세 번째 공 표시 1초 뒤에 네 번째 공 표시정렬 후 5초 뒤에 다섯 번째 공 표시네 번째 공 표시 1초 뒤에 다섯 번째 공 표시정렬 후 6초 뒤에 여섯 번째 공 표시다섯 번째 공 표시 1초 뒤에 여섯 번째 공 표시정렬 후 7초 뒤에 보너스 공 표시여섯 번째 공 표시 1초 뒤에 보너스 공 표시타이머가 추첨기 생성되는시점이 바뀌었다고 볼 수 있다.전자는한번에 일괄적으로생성한거고바뀐코드는앞 공을 표시한 후타이머가 생성되는 것이다.마지막으로몇 등인지 표시해보자1등과 4~5등은당첨 숫자의 개수에 따라 결정되고2등과 3등은5개의 숫자를 맞췄을 때보너스 숫자를 맞췄는지에 따라갈린다.그런데보너스 숫자가 뜨기전에먼저 실행이 되버린다.alert()메서드는화면을 그리는 동작보다더 먼저 실행되는 현상이 있기 때문에화면을 그리는 코드(drawBall())과 alert()사이에비동기 함수가 있으면 된다.잘 실행되는 모습을 볼 수 있다.비동기 함수에 대해개념만 설명할떄는잘 이해가 안됐는데실습을 통해서 하니까확실히 조금 더 이해가 되고복습도 되면서학습에 도움이 되는 추첨기 것 같다.ㄲ ㅡ ㅌ!
댓글목록
등록된 댓글이 없습니다.