** 영상으로 보고 싶은 분은 아래 주소를 클릭하세요!
https://www.youtube.com/watch?v=lAnrCuVxNWc
- 이번강좌에서는 자바스크립트로 로또를 자동으로 만드는 방법을 알아보도록 하겠습니다.
- 그동안 배웠던 Array객체와 Math객체를 활용한 아주 좋은 예제가 되겠습니다.
- 아래는 만드는 과정이고 위에 정답을 바로 볼 수 있도록 코드펜으로 연결해놓았습니다.
1. 배열 생성하기
- 우선적으로 로또는 6개의 번호를 반환하는 게임입니다.
- 그래서 6개의 숫자를 담을 배열을 선언해줍니다.
## 코드 보기
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>로또생성</title>
<script>
//로또 한게임생성
//1. 로또 번호는 6개
var lotto = []; //6개로 값이 나열될것이기 때문에 배열처리 - 값은 담지 않음
</script>
</head>
<body>
</body>
</html>
2. 6개 번호를 할당받기 위한 반복문 처리
- 번호 한개 받을 때마다 코드를 적으면 6번이나 적어야 합니다.
- 그래서 for문을 통해 반복해보도록 하겠습니다.
## for문 문법
for(초기식;조건식;증감식){
//반복할 표현식
}
## 코드 보기
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>로또생성</title>
<script>
//로또 한게임생성
//1. 로또 번호는 6개
var lotto = []; //6개로 값이 나열될것이기 때문에 배열처리 - 값은 담지 않음
//6번처리 - 반복문
for(var i=0;i<6;i++){
}
</script>
</head>
<body>
</body>
</html>
3. 1~45사이의 랜덤한 숫자 받기
- 로또 번호는 1~45사이의 숫자를 반환받아야 합니다.
- 여기서 필요한 Math객체의 메서드들입니다.
- Math.random() : 0~1 미만사이의 랜덤한 실수를 반환하는 메서드입니다.
- Math.floor() : 실수를 내림하여 정수를 만드는 메서드입니다.
- Math.random()이 실수를 반환하기 때문에 정수로 반드시 처리해야합니다.
## 코드 보기
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>로또생성</title>
<script>
//로또 한게임생성
//1. 로또 번호는 6개
var lotto = []; //6개로 값이 나열될것이기 때문에 배열처리 - 값은 담지 않음
//6번처리 - 반복문
for(var i=0;i<6;i++){
//새로 추가될 숫자 : 1~45사이의 숫자가 랜덤하게 처리
//random() : 0~1미만사이의 랜덤한 소수
//floor() : 내림처리해서 정수로 변경
var num = Math.floor(Math.random() * 45) + 1;
}
</script>
</head>
<body>
</body>
</html>
4. lotto라는 배열 값을 추가
- 랜덤하게 받은 숫자를 lotto라는 값에 6번 추가해서 배열 값을 받습니다.
- 그리고 문서에 출력해보겠습니다.
- 이때 사용되는 메서드는 Array객체의 push()라는 메서드입니다.
- push() : 배열에 마지막에 값을 추가하는 메서드
## 코드 보기
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>로또생성</title>
<script>
//로또 한게임생성
//1. 로또 번호는 6개
var lotto = []; //6개로 값이 나열될것이기 때문에 배열처리 - 값은 담지 않음
//6번처리 - 반복문
for(var i=0;i<6;i++){
//새로 추가될 숫자 : 1~45사이의 숫자가 랜덤하게 처리
//random() : 0~1사이의 랜덤한 소수
//floor() : 내림처리해서 정수로 변경
var num = Math.floor(Math.random() * 45) + 1;
//push() - 배열에 마지막에 값추가메서드
lotto.push(num);
}
//문서에 출력
document.write('이번주 로또 번호 : ' + lotto);
</script>
</head>
<body>
</body>
</html>
## 코드결과
- 6개 모두 다른 번호가 나올 수도 있지만 새로고침을 계속 하다보면 위의 예시처럼 같은 번호가 겹쳐서 나올수 있습니다.
5. 같은 번호는 나오지 않도록 처리
- 로또에서 1~45의 숫자가 나올때 절때 같은 번호가 나오지는 않습니다.
- 그래서 새로운 번호를 push로 넣기 전에 같은 번호가 나오면 다시 생성해야합니다.
- 기존 lotto라는 배열에 있는 값과 비교하여 같으면 다시 num변수에 값을 랜덤하게 생성하면 됩니다.
- 하지만 이때 몇개의 번호가 로또에 담겨 있을지 알 수 없기 때문에 for in문을 사용해야합니다.
- for in문은 배열이나 객체를 반복할 때 사용하는 구문입니다.
## for문 문법
for(var i in 배열명){
//반복할 표현식
}
for(var i in 객체명){
//반복할 표현식
}
## 코드 보기
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>로또생성</title>
<script>
//로또 한게임생성
//1. 로또 번호는 6개
var lotto = []; //6개로 값이 나열될것이기 때문에 배열처리 - 값은 담지 않음
//6번처리 - 반복문
for(var i=0;i<6;i++){
//새로 추가될 숫자 : 1~45사이의 숫자가 랜덤하게 처리
//random() : 0~1사이의 랜덤한 소수
//floor() : 내림처리해서 정수로 변경
var num = Math.floor(Math.random() * 45) + 1;
//현재 상태는 같은 숫자가 나올수 있음
//lotto라는 배열에 담긴 숫자와 같이 같으면 안됨
for(var j in lotto){
while(num == lotto[j]){ //현재 새로나온 숫자가 기존 숫자와 같으면
num = Math.floor(Math.random() * 45) + 1;
}
}
//push() - 배열에 마지막에 값추가메서드
lotto.push(num);
}
//문서에 출력
document.write('이번주 로또 번호 : ' + lotto);
</script>
</head>
<body>
</body>
</html>
## 코드 결과
- 그럼 앞으로 같은 번호가 나올 일은 없습니다
- 하지만 순서가 뒤죽박죽이어서 보기가 어렵죠?
6. sort()를 통한 배열 값 정렬
- 6개의 값을 다 받고 나면 정렬을 해주는 것이 좋습니다.
- 이때 정렬할 값은 숫자이기 때문에 숫자정렬을 하는 것이 좋습니다.
- sort() : 배열 요소 값을 정렬하는 메서드입니다.
## 숫자 sort()오름차순 문법
배열.sort(function(a,b){
return a - b;
});
## 코드 보기
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>로또생성</title>
<script>
//로또 한게임생성
//1. 로또 번호는 6개
var lotto = []; //6개로 값이 나열될것이기 때문에 배열처리 - 값은 담지 않음
//6번처리 - 반복문
for(var i=0;i<6;i++){
//새로 추가될 숫자 : 1~45사이의 숫자가 랜덤하게 처리
//random() : 0~1사이의 랜덤한 소수
//floor() : 내림처리해서 정수로 변경
var num = Math.floor(Math.random() * 45) + 1;
//현재 상태는 같은 숫자가 나올수 있음
//lotto라는 배열에 담긴 숫자와 같이 같으면 안됨
for(var j in lotto){
while(num == lotto[j]){ //현재 새로나온 숫자가 기존 숫자와 같으면
num = Math.floor(Math.random() * 45) + 1;
}
}
//push() - 배열에 마지막에 값추가메서드
lotto.push(num);
}
//오름차순으로 숫자 정렬
lotto.sort(function(a,b){
return a - b;
});
//문서에 출력
document.write('이번주 로또 번호 : ' + lotto);
</script>
</head>
<body>
</body>
</html>
## 코드 결과
- 오름차순으로 잘 정리된 것 확인되시죠?
- 이번 주 이번호로 로또를 사러 가는 것은 어떨까요?
- 모두 대박나시길 바랍니다.
## 위의 코드가 가끔 반복되는 숫자가 나온다고 하여 다시 정리해봤습니다.
- 일단 filter라는 배열 메서드를 공부하시고 보셔야 합니다.
- filter는 제가 ES6에서 강의하다보니 여기에서는 하지 않아서 위와 같이 만들었네요.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>로또생성기</title>
<script>
//로또 번호 하나를 생성하시오.
//이번 주 로또번호 : x,x,x,x,x,x
//배열에 6개 번호를 담을 변수
var lotto = []; //빈배열
//배열에 1~45의 숫자 담기
var nums = [];
//1~45의 숫자를 담는 for문
for(var i=1;i<=45;i++){
nums.push(i);
}
//변수에 원하는 값이 들어갔는지 확인 - 확인한 후 삭제
//alert(nums);
//6개의 숫자를 nums에 빼오는 반복문
for(var i=0;i<6;i++){
//몇번째 것을 빼올 지 지정하는 랜덤 번째 처리
//0~44번째를 선택
//반복되면서 숫자 한개 씩 빠짐
var num = Math.floor(Math.random() * (45 - i));
//해당 순번의 숫자를 로또 배열에 담기
lotto.push(nums[num]);
//filter() : 조건에 맞는 배열만 새로운 배열로 반환하는 메서드
//nums배열에서 선택된 값이 빠져야 함
nums = nums.filter(function(n){
return n != nums[num];
});
}
//정렬
lotto.sort(function(left, right){
return left - right;
});
//출력
alert('이번 주 로또번호 : ' + lotto);
</script>
</head>
<body>
</body>
</html>
'웹언어 > JAVASCRIPT' 카테고리의 다른 글
| [JS강좌] 15강 BOM - location객체 - 오쌤의 니가스터디 (0) | 2021.06.07 |
|---|---|
| [JS강좌] 14강 BOM - window객체 - 오쌤의 니가스터디 (0) | 2021.06.04 |
| [JS강좌] 12강 자바스크립트 기본내장객체 - Array - 오쌤의 니가스터디 (2) | 2020.12.19 |
| [JS강좌] 11강 자바스크립트 기본내장객체 - Number와 Math - 오쌤의 니가스터디 (0) | 2020.12.02 |
| [JS강좌] 10강 자바스크립트 기본내장객체 - String (0) | 2020.12.01 |
