MSM8994의 화룡점정 블로그

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

코딩

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

msm8994 2018. 7. 27. 16:30

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


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


시작


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

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


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

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


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

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


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

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

//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에 적용



결과

처음 열었을 때

뽑기 버튼을 눌렀을 때


전체 소스코드

<!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