MSM8994의 화룡점정 블로그

[JS] Math.random() 을 활용한 중복이 없는 임의의 수 6개짜리 배열에 담기 본문

코딩

[JS] Math.random() 을 활용한 중복이 없는 임의의 수 6개짜리 배열에 담기

msm8994 2018. 7. 27. 16:30

자바에서 임의의 수 6개를 만드는건 지난 글에서 소개가 되었죠?


오늘은 이걸 자바스크립트로 옮겨보겠습니다.


시작


먼저 form을 생성합니다. 특정 속성에 적용하는 스타일에 관해선 여기를 참고해주세요.

?
1
2
3
4
5
<form name="lotto">
    <input type="button" value="뽑기" onClick="pickNow()"/>
    <br /><!-- 줄바꿈 -->
    행운의 번호는 다음과 같습니다: <input type="text" name="result" readonly />
</form>


배열을 생성합니다.
new Array(갯수)는 new Array(값, 값, ... 값)과 헷갈리므로 쓰지 않으시는게 좋습니다.
대신 []을 쓰세요. 자바스크립트에서 배열은 부르는게 원소 입니다.
아무거나 부르면 undefined지만 아무거나 넣으면 거기 직전까지 배열을 키워서 각각 undefined를 채워넣고 거기에 값이 들어갑니다. 

?
1
2
// 배열 생성. new Array(갯수)는 new Array(원소, 원소,...)랑 헷갈리므로 쓰지 마세요.
var numbers = [];


그래서 배열을 키워야하는 상황이 왔기에 배열의 길이를 알려주는 배열.length 속성을 쓸 수 없습니다. 고정수를 지정합니다.

?
1
2
3
4
5
// 자바스크립트에서 배열은 크기가 고정되어 있지 않습니다.
// 총 원소 갯수보다 큰 번호에 넣으면 그 큰 수까지 배열이 확장됩니다.
// 1개짜리 배열에 [6]에다 값을 넣으면 다음과 같이 됩니다.
// [값,undefined,undefined,undefined,undefined,값]
var pickNumbers = 6;


뽑기의 나머지는 이전 글과 같습니다. 자료형을 지정하지 않고 var 하나만 적어 변수임을 선언하는 것만 빼고 말이죠.

출력할 때는 문자열을 조립하고, 폼에 넣는 식으로 하겠습니다.

?
1
2
3
4
5
6
7
8
9
10
11
//3. 출력하기
var result = ""; // 빈 문자열 선언
for(i = 0; i < pickNumbers; i ++){
    if(i > 0){
        // 맨 처음 원소가 아니라면 앞에 ", "문자열 추가
        // 1, 2, 3, ..., 6 꼴로 나오게 함
        result += ", ";
    }
    result += numbers[i];
}
lotto.result.value = result; // Form에 적용



결과

처음 열었을 때

뽑기 버튼을 눌렀을 때


전체 소스코드

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>행운의 번호 뽑기</title>
        <style>
            input[type=text]{ /* input 태그 중 type="text"인 것만 선택*/
                 
                width: 145px;
                padding: 5px;
                 
                background-color: #e7e7e7;
                border: 1px solid silver;
            }
             
            input[type=button]{
                width: 50px;
                padding: 5px;
                 
                background-color: green;
                color: white;
                border: 1px solid silver;
            }
        </style>
        <script>
            function pickNow(){
                // 배열 생성. new Array(갯수)는 new Array(원소, 원소,...)랑 헷갈리므로 쓰지 마세요.
                var numbers = [];
                // 자바스크립트에서 배열은 크기가 고정되어 있지 않습니다.
                // 총 원소 갯수보다 큰 번호에 넣으면 그 큰 수까지 배열이 확장됩니다.
                // 1개짜리 배열에 [6]에다 값을 넣으면 다음과 같이 됩니다.
                // [값,undefined,undefined,undefined,undefined,값]
                var pickNumbers = 6;
                 
                // insertCur가 배열의 최종 길이가 될 pickNumbers를 넘지 않을 때까지 반복합니다.
                // 중복이 생긴다면 반복 횟수가 늘어날 수 있습니다.
                for(insertCur = 0; insertCur < pickNumbers ; insertCur++){
                    // 1. 임의의 수 삽입
                    // Math.random()이 제공하는 0.0~0.999...의 수에 45를 곱해
                    // 0.0~44.xx의 수를 만들고 이를 내림 한다.
                    // 여기에 1을 더해서 1~45가 되도록 한다.
                    numbers[insertCur] = Math.floor(Math.random() * 45) + 1;
 
                    // 2. 중복 검사
                    // 배열의 기존 원소(insertCur 이전까지)를
                    // 방금 삽입한 수와 비교해 같은 수가 있다면 insertCur를 앞으로 밀어
                    // 다음 반복에서 같은 칸에 다른 수를 쓰도록 합니다.
                    for(searchCur = 0; searchCur < insertCur; searchCur ++){
                        if(numbers[insertCur] == numbers[searchCur]){
                            insertCur--; // insertCur를 앞으로 민다
                            break; // 다음 것을 검색할 필요가 없으므로 중복검사 반복을 나갑니다.
                        }
                    }
                }
                 
                //3. 출력하기
                var result = ""; // 빈 문자열 선언
                for(i = 0; i < pickNumbers; i ++){
                    if(i > 0){
                        // 맨 처음 원소가 아니라면 앞에 ", "문자열 추가
                        // 1, 2, 3, ..., 6 꼴로 나오게 함
                        result += ", ";
                    }
                    result += numbers[i];
                }
                lotto.result.value = result; // Form에 적용
            }
        </script>
    </head>
    <body>
        <form name="lotto">
            <input type="button" value="뽑기" onClick="pickNow()"/>
            <br /><!-- 줄바꿈 -->
            행운의 번호는 다음과 같습니다: <input type="text" name="result" readonly />
        </form>
    </body>
</html>

'코딩' 카테고리의 다른 글

[JAVA] 정보처리 산업/기사 알고리즘 - 화폐매수 계산  (0) 2018.07.31
[JSP] 1부터 N까지의 자연수, 홀수, 짝수 합 구하기  (0) 2018.07.30
[JS] 구구단 퀴즈 (Form 사용)  (0) 2018.07.26
[JS] 사칙연산 계산 (Form, 함수 사용)  (0) 2018.07.25
[JAVA] Math.random()을 활용한 중복이 없는 임의의 수 6개짜리 배열에 담기  (0) 2018.07.24
'코딩' Related Articles more
Comments