안녕하세요.
이전 포스팅에서 작성한 여러개의 기능을 사용하여, 이제 Lotto 번호 생성기를 만드는 예제를 작성해보겠습니다.
각 페이지 단계별로 설명을 첨부하였으니, 참고하시면 도움이 될 것이라고 생각합니다.
그리고, 코드를 조금 더 간추린 버전을 설정하여, 페이지 하단에 기재했으니, 참고하시면 좋을 거 같습니다.
이에 대해서는 별도의 설명을 하지 않겠습니다.
==========================
1. Lotto 번호 만들기 - HTML
2. Lotto 번호 만들기 - CSS
3. Lotto 번호 만들기 - JavaScript
4. 코드 정리하기
==========================
1. Lotto 번호 만들기 - HTML
먼저 HTML은 간촐하게 작성합니다.
먼저 영역을 설정하기 전에, 페이지의 가장 중요한 정보를 담는 "로또번호 생성" 이라는 제목을 H1 Element 에 입력합니다.
그리고, 번호 6개를 노출할 영역도 선택해야겠지요?
그러면 DIV 를 구성하여 영역을 설정 후 Ul,LI Element 를 사용해 6개의 번호가 리스트형태로 나타나도록 부여합니다.
그리고 당연히 생성을 위한 버튼을 만듭니다.
그냥 번호만 나오면 뭐하니까 기분도 내야겠죠?
당첨금 수령하기 링크도 이동할 수 있도록 버튼 밑 영역에 당첨금 수령하기 링크도 하나 만들어 줍니다.
그리고 가상의 1등 당첨 금액을 가져오도록 하죠. 로또는 5등까지니까 5등까지의 당첨금 정보를 입력합니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="/VisualStudio2/blog/index.css">
</head>
<body>
<h1>Lotto Number Create </h1>
<div id="backarea">
<ul id="lottonum">
<li id="num1">1</li>
<li id="num2">2</li>
<li id="num3">3</li>
<li id="num4">4</li>
<li id="num5">5</li>
<li id="num6">6</li>
</ul>
</div>
<button id="submit">Create</button>
<div id="info">
<a href="#">당첨금 수령하기</a>
</div>
<div id="payinfo">
<div><span>1등</span><span>2,000,000,000</span></div>
<div><span>2등</span><span>500,000,000</span></div>
<div><span>3등</span><span>100,000,000</span></div>
<div><span>4등</span><span>50,000,000</span></div>
<div><span>5등</span><span>10,000,000</span></div>
</div>
<script src="/VisualStudio2/blog/index.js"></script>
</body>
</html>
간단하게 작성이 끝났습니다.
이 페이지는 꾸미는게 목적이 아니기때문에, 최소한의 한도로만 CSS도 작성해봅시다.
2. Lotto 번호 만들기 - CSS
* {
margin: 0;
padding : 0;
}
ul,li {
list-style: none;
display:inline-block;
}
a {
text-decoration: none;
color:#333;
display:block;
}
H1 {
text-align:center;
}
#submit {
display:block;
margin : 0 auto;
}
#backarea {
width:600px;
height:100px;
margin:0 auto;
}
#lottonum {
width:200px;
height:100px;
margin : 0 auto;
display:flex;
justify-content: center;
align-items: center;
display:none;
}
#lottonum > li {
width:60px;
height:40px;
border-radius: 30px;
text-align: center;
margin : 30px;
font-size:40px;
}
#info {
width:600px;
height:50px;
margin:30px auto;
text-align: center;
box-sizing: border-box;
display:none;
}
#payinfo {
width:600px;
height:150px;
margin:0 auto;
text-align: center;
display:none;
padding : 25px 0 25px 0;
box-sizing: border-box;
display:none;
}
#payinfo > div > span {
display:block;
width:100%;
height: 20px;
}
.a {
background : red;
}
.b {
background : orange;
}
.c {
background : yellow;
}
.d {
background : green;
}
.e {
background : blue;
}작성자가 미적감각이 부족하다 보니, 최소한의 한도로만 가볍게 이미지를 표기했습니다.
위부터 간단한 설명을 드리자면, H1 Element 는 화면 중앙에 자리잡도록 설정하고, 출력버튼 역시 가운데에 위치하도록 위치를 조절하기 위해 Display 속성을 Block 으로 설정했습니다. 만약 이 내용에 대한 이해가 되지 않으신다면 이전 포스팅에서 HTML/CSS 포스팅을 읽어보시면 도움이 될 거입니다.
그리고 첫번째 영역을 넓이와 높이만 설정하고, 페이지 중앙에 이동되도록 설정합니다.
그리고 각 번호의 위치를 중앙에서 일정간격으로 설정하기 위해 Display 속성을 Flex 로 부여하고, 중앙으로 정렬합니다. 하지만 간단한 꾸미기를 이용하기 위해 최초 화면에서는 표시되지 않도록 none 을 부여했습니다.
그리고 각 li 에 font 와 색상, 크기등을 설정합니다. 그리고 HTML 에서 ID 에 info, payinfo 라고 부여한 당첨금액, 당첨금 수령하기 정보는 기본적으로 표시되지 않게 설정해두었습니다.
그리고 마지막으로 Class 명을 아직 부여하지 않았지만, 각 Class 별로 배경색을 설정해두었습니다.
이것을 부여한 이유는 JavaScript로 이동하여 작성해보도록 하겠습니다.
3. Lotto 번호 만들기 - JavaScript
이제 JavaScript 를 본격적으로 활용해봅시다.
코드 작성의 기초는 일단 구현을 먼저 해보는것이라고 합니다.
그렇다면 반복적인 작성을 하더라도 일단 동작을 원하는 데로 하는 것이 첫번째입니다.
먼저 각각의 대표적으로 사용될 항목을 변수로 선언합니다.
버튼을 눌러야 동작하도록 설계했으니, 당연히 버튼에 변수를 선언합니다. ( const btn)
그리고 로또번호가 출력되어야겠죠? 이 역시 변수를 선언합니다. (const lottoDisplay)
마지막으로 각 로또번호를 우리는 아직 랜덤숫자를 부여하지 않았습니다. 그러니 개별적으로 변수를 선언해야겠죠. (const lottoBox)
그리고 로또번호는 1~45 까지의 숫자를 랜덤하게 출력해야 합니다.
"randomLotto() 라는 함수를 선언하여, 랜덤숫자가 1~45까지 나오도록 설계합니다. randomLotto() 함수 내에 지역변수를 선언하여, 그 변수 안에 0~44 의 45개의 숫자가 정수로 출력되게 하고, +1을 더해 1~45가 나타나도록 설정합니다.
그리고 난 뒤, 버튼에 이벤트를 부여해야 합니다. 이 이벤트 생성에 대한 명령은 다음 포스팅에서 별도로 다룰 예정이지만, 클릭을 했을시에 대한 조건으로 만들어서 부여합니다. 호출되는 함수는 lottoHandler 라는 명칭을 부여합니다.
이제 이 lottoHandler 안에서 변수를 여러개 지정해야 되겠습니다.
먼저 Lotto 의 번호는 6개가 출력되어야 합니다. 그러므로 변수는 6개가 각각 li 에 대입되어야 하므로, num1~6 까지의 변수를 선언하고, 각 변수마다 randomLotto() 의 계산식을 담습니다. 그러면 각각 6개의 독립적인 랜덤번호가 생성되겠습니다.
그리고 이제 css 에서 .a~.e 라고 하여, Class 에 속성을 부여한 것을 기억하실 겁니다.
이 클래스에서는 Lotto 에서처럼, 일정범위의 숫자마다 색상을 다르게 부여한 것을 구성하기 위해 ClassName 을 부여해야 합니다.
그렇다면 이제 조건을 부여해서 이를 범위로 지정해야 합니다.
먼저 조건문 If 를 사용해서 3개의 매개변수를 부여합니다, 각각 num, min, max 입니다. 이 3개의 매개변수를 사용해서 num 이 min보다 크거나 같을 경우, 그리고 num 이 max보다 작거나 같을 경우 의 두가지 조건을 만족하면 True, 만족하지 않으면 False 라는 조건문을 완성합니다.
이제 이 조건문을 가지고 ClassName 을 부여해야 겠습니다.
그러기 위해서는 어떤 조건에 어떤 ClassName을 붙일지를 결정해야겠지요?
between 으로 부여한 조건을 가지고 이제 함수를 선언합니다. 함수에서는 조건문 IF 를 사용해서 0~11, 10~21 ,20~31,30~41,40~46까지로 부여하여, 숫자의 조건그룹별로 a~e 까지의 ClassName 을 부여합니다.
그러면 이전에 CSS에서 .a~.e 의 용도가 결정되었습니다.
이것을 이제 로또번호가 생성되는 Li에 부여해야 합니다.
역시 변수를 선언하여 이를 부여합니다.
이제 이 선언된 변수에 대입을 해야 합니다.
랜덤숫자의 값을 innerHTML 로 숫자를 부여하고, className 을 부여합니다.
각각의 배열순으로 보았을때 0~5 이므로, 각 숫자별로 추가해줍니다.
그럼 끝났습니다.
const btn = document.querySelector('#btn')
const lottoDisplay = document.querySelector('#lotto')
const lottoBox = document.querySelectorAll("#lotto > li")
function randomLotto(){
const random = Math.floor(Math.random() * 45 + 1)
return random
}
function lottoHandler(e){
const num1 = randomLotto()
const num2 = randomLotto()
const num3 = randomLotto()
const num4 = randomLotto()
const num5 = randomLotto()
const num6 = randomLotto()
const num1ClassName = getClassName(num1)
const num2ClassName = getClassName(num2)
const num3ClassName = getClassName(num3)
const num4ClassName = getClassName(num4)
const num5ClassName = getClassName(num5)
const num6ClassName = getClassName(num6)
lottoBox[0].innerHTML = num1
lottoBox[0].className = num1ClassName
lottoBox[1].innerHTML = num2
lottoBox[1].className = num2ClassName
lottoBox[2].innerHTML = num3
lottoBox[2].className = num3ClassName
lottoBox[3].innerHTML = num4
lottoBox[3].className = num4ClassName
lottoBox[4].innerHTML = num5
lottoBox[4].className = num5ClassName
lottoBox[5].innerHTML = num6
lottoBox[5].className = num6ClassName
LottoDisplay.style = 'Display:flex;'
Info.style = 'display:block;'
Payinfo.style = 'Display:block;'
}
function between(num, min, max){
if(num => min && num <= max){
return true
}
return false
}
function getClassName(num){
if(between(num,0,11)){
return 'a'
}
if(between(num,10,21)){
return 'b'
}
if(between(num,20,31)){
return 'c'
}
if(between(num,30,41)){
return 'd'
}
if(between(num,40,46)){
return 'e'
}
}
}
btn.addEventListener('click',lottoHandler)
4. 코드 정리하기
하지만, JavaScript 에서는 작성의 효율성이 중요합니다.
간단하게 이해하면, 한글도 어떻게 쓰는지에 따라서 효율적으로 상대방에게 의사전달을 할 수 있듯이, JavaScript 같은 언어 역시 마찬가지로 효율적으로 보다 짧은 입력으로 효율을 발생하는 것이 가능하지 않을까요?
지금 이 포스팅을 보시는 분들과, 저 역시도 떠오르는 개선점들이 존재할 것입니다.
위의 코드에서의 개선점을 적자면,
1. 반복적으로 많은 입력
2. 중복숫자를 거를 수 없는 문제
이를 해결하기 위해서는 기존에 배웠던 요소들을 효율적으로 활용해야 하지 않을까요?
제가 개별적으로 줄여본 것은 아래와 같습니다.
혹시라도 이와 관련해서 더 좋은 아이디어가 있거나 의견이 있다면 언제든지 문의주시면 감사하겠습니다.
그러면 코드를 살포시 아래에 입력해두고 가겠습니다.
피드백 환영합니다 :)
감사합니다.
'개발공부일지 > JavaScript' 카테고리의 다른 글
| JavaScript - appEventListener(이벤트생성) (0) | 2022.11.11 |
|---|---|
| JavaScript 실습예제 - Lotto JavaScript 코드 효율화 (0) | 2022.11.10 |
| JavaScript - Math 이해하기 (0) | 2022.11.09 |
| JavaScript -선형 검색/완전 탐색(Linear Search) (0) | 2022.11.09 |
| JavaScript - Array(배열) 객체 편집하기 (0) | 2022.11.07 |
댓글