๐ ์ซ์์ผ๊ตฌ ๊ฒ์
์ด ๊ฒ์์ด ๋ญ๊ฐ์?
1. ์๋ํธ์ด ์ซ์ 1~9 ์ค์์ ์ค๋ณต๋์ง ์๊ฒ 4 ๊ฐ๋ฅผ ๊ณ ๋ฅธ๋ค.
2. 10๋ฒ์ ๊ธฐํ๊ฐ ์ฃผ์ด์ง๋ค.
3. ์๋ํธ์ด ๊ณ ๋ฅธ ์ซ์ 4๊ฐ๋ฅผ ๋งํ๋ฉด ๋๋ค. ( ์ด๋ ์ซ์์ ์์๊น์ง ๋งํ์ผ ํ๋ค. )
4. ํ๋ฆด ๋๋ง๋ค ํํธ๋ฅผ ์ค๋ค. ( ๋งํ ์ซ์์ ๊ฐ์( ๋ณผ ), ์์๊น์ง ๋งํ ๊ฐ์( ์คํธ๋ผ์ดํฌ ) ๋ฅผ ์๋ ค์ค๋ค.
ex) ์๋ํธ์ด 5728์ ๋ฝ์์ ๋, ํ๋ ์ด์ด๊ฐ 7129๋ฅผ ๋งํ๋ค๋ฉด?
=> 1์คํธ๋ผ์ดํฌ, 1๋ณผ ( 2 : ์ซ์ and ์์๊น์ง ๋งํ์ ์คํธ๋ผ์ดํฌ / 7 : ์ซ์๋ง ๋งํ์ ๋ณผ )
ํ๋ ์ด์ด๊ฐ 7528์ ๋งํ๋ค๋ฉด?
=> 2์คํธ๋ผ์ดํฌ, 2๋ณผ
ํ๋ ์ด์ด๊ฐ 7285์ ๋งํ๋ค๋ฉด?
=> 4๋ณผ
ํ๋ ์ด์ด๊ฐ 5728์ ๋งํ๋ค๋ฉด?
=> 4์คํธ๋ผ์ดํฌ ( ํ๋ฐ )๊ฐ ๋์ด ์ด๊ธด๋ค. / 10๋ฒ์ ๊ธฐํ ์์ ๋งํ์ง ๋ชปํ๋ค๋ฉด ์ง๋ค.
์ซ์์ผ๊ตฌ ๊ฒ์์์๋ ๋ฐ๋ณต๋ฌธ์ ๋ง์ด ์ฌ์ฉํ๋ค.
๋ฐ๋ณต๋ฌธ์ ํ๋ก๊ทธ๋จ์์ ๋งค์ฐ ์ค์ํ ์ญํ ์ ๋ด๋นํ์ง๋ง, ํ์ต ๋์ด๋๊ฐ ๋๋ค.
๐ค ์ด๊ธฐ ์์๋ ๊ทธ๋ ค๋ณด๊ธฐ
์ปดํจํฐ๊ฐ ๋ฌด์์๋ก ์ซ์ ๋ค ๊ฐ๋ฅผ ๋ฝ์ผ๋ฉด ๋ต์ ์ ๋ ฅ์ฐฝ์ ์ ๋ ฅํ๋ค.
๋ต์ ์ ๋ ฅํ๋ ์ด๋ฒคํธ๊ฐ ๋ฐ์ํ๋ฉด
1. ๋ต์ ํ์์ด ๋ง๋์ง ๊ฒ์ฌํ๊ณ ( ์ค๋ณต๋์ง ์์ 4์๋ฆฌ ์ซ์ ) ํ๋ฐ์ธ์ง ๊ฒ์ฌํ๋ค.
2. ํ๋ฐ์ด๋ผ๋ฉด ์น๋ฆฌ / ํ๋ฐ์ด ์๋๋ผ๋ฉด 10๋ฒ์ ์ด๊ณผ ์๋ํ๋์ง ๊ฒ์ฌ / 10๋ฒ ์ด๊ณผ ์๋ํ๋ค๋ฉด ํจ๋ฐฐ
3. ์ด ๋ชจ๋ ๊ฒ ์๋๋ผ๋ฉด ๋ช ์คํธ๋ผ์ดํฌ, ๋ช ๋ณผ์ธ์ง ๊ฒ์ฌํด์ ํ๋ฉด์ ํ์ํ๋ค.
<!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>์ซ์์ผ๊ตฌ ๊ฒ์</title>
</head>
<body>
<form id="form">
<input type="text" id="input">
<button>ํ์ธ</button>
</form>
<div id="logs"></div>
<script>
const $input = document.querySelector('#input');
const $form = document.querySelector('#form');
const $logs = document.querySelector('#logs');
</script>
</body>
</html>
<!--์ฝ๋ ์ถ์ฒ (๋์)Let's Get IT ์๋ฐ์คํฌ๋ฆฝํธ ํ๋ก๊ทธ๋๋ฐ-->
๐๋ฌด์์๋ก ์์ ๋ฝ๊ธฐ
ํ๋ก๊ทธ๋จ์ ์์ํ ํ ์ซ์ 4๊ฐ๋ฅผ ๋ฝ๋๋ฐ, ์ซ์๋ฅผ ๋ฝ๋ ์ ์ฐจ๋ ์ฌ๋ฌ ์ ์ฐจ๋ก ๊ตฌ์ฑ๋์ด ์๋ค.
1. 4๊ฐ์ ์ซ์๋ฅผ ์ ์ฅํ ์๋ฆฌ๋ฅผ ๋ง๋ค๊ณ
2. ๋ฌด์์๋ก ์ซ์๋ฅผ ํ๋์ฉ ๋ฝ์ ์ ์ฅํ๋ ์ ์ฐจ๋ฅผ 4๋ฒ ๋ฐ๋ณตํ๋ค.
์ค์ํ ์ : ๋ฌด์์๋ก ๋ฝ์ง๋ง, ์ค๋ณต๋์ง ์๊ฒ ๋ฝ์์ผ ํ๋ค.
๐ค ๋ฌด์์ ์ซ์๋ฅผ ์ด๋ป๊ฒ ๋ง๋๋?
๋ฌด์์ ์ซ์๋ฅผ ๋ง๋๋ ํจ์๋ Math.random() ์ด๋ค.
์ด ํจ์๋ 0 ์ด์ 1 ๋ฏธ๋ง์ ์๋ฅผ ๋ฌด์์๋ก ์์ฑํ๋ค.
์ซ์์ผ๊ตฌ ๊ฒ์์์๋ 1์์ 9๊น์ง์ ์ซ์๊ฐ ํ์ํ๋ค. ๋ฐ๋ผ์ Math.random() ์ 9๋ฅผ ๊ณฑํ ํ 1์ ๋ํ๋ค.
๊ทธ๋ฌ๋ฉด 1 ์ด์ 10 ๋ฏธ๋ง์ ์๊ฐ ๋ง๋ค์ด์ง๋๋ฐ ์ด ์๋ ์์ฐ์๊ฐ ์๋๋ผ์ ์ธ ์ ์๋ค.
์ซ์๋ฅผ ์์ฐ์๋ก ๋ง๋ค๋ ค๋ฉด ๋ด๋ฆผ, ์ฌ๋ฆผ, ๋ฐ์ฌ๋ฆผ์ ํด์ผํ๋ค.
์ด ๊ฒฝ์ฐ์๋ ๋ด๋ฆผ์ ํ๋ค. ๊ฒฐ๊ณผ๋ก 1 ~ 9 ๊น์ง์ ์์ฐ์๊ฐ ๋์จ๋ค.
์๋ฐ์คํฌ๋ฆฝํธ์์ ์ซ์์ ๋ด๋ฆผ์ Match.floor() ๋ก ํ ์ ์๋ค.
์ฌ๋ฆผ์ Math.ceil() / ๋ฐ์ฌ๋ฆผ์ Math.round() ์ด๋ค.
| - ๋ฌด์์ ์ซ์๋ฅผ ๋ฝ๋ ๊ณผ์ - | |
| Math.ceil( ) | 0 <= x < 1 |
| Math.randeom( ) * 9 | 0 <= x < 9 |
| Math.random( ) * 9 + 1 | 1 <= x < 10 |
| Math.floor( Math.random( ) * 9 + 1 ) | x = { 1, 2, 3, 4, 5, 6, 7, 8, 9 } |
Note!
Math.random() ์ ์ง์ง ๋ฌด์ ์๊ฐ ์๋๋ค.
Math.random() ์ ์ํธํ์ ์ผ๋ก ์์ ํ ๋ฌด์์๊ฐ ์๋๋ค.
๋ฐ๋ผ์ ๋ณด์๊ณผ ๊ด๋ จ๋ ์์ ( ๋น๋ฐ๋ฒํธ๋ฅผ ์์ฑ ) ์ ํ ๋๋ ์ํํ๋ค.
์ด๋ฅผ ์ํ window.crypto.getRandomValues() ํจ์๊ฐ ๋ฐ๋ก ์๋ค.
๐ค ์ค๋ณต๋์ง ์๊ฒ ์ด๋ป๊ฒ ๋ฝ์์ผํ ๊น?
๋ก๋๋ฅผ ์์๋ก ๋ค๊ฒ ๋ค.
๋ก๋๋ ํต์ 45๊ฐ์ ๊ณต์ ๋ชจ์ ๋๊ณ ๊ณต์ ํ๋์ฉ 7๋ฒ ๋ฝ๋๋ค. ํ๋ฒ ๋ฝ์ ๊ณต์ ํต์์ ๋น ์ ธ๋๊ฐ์ผ๋ฏ๋ก ๋ค์ ๋ฝํ ์ผ์ด ์๋ค.
์ด ํ๋ก๊ทธ๋จ์์๋ 1 ๋ถํฐ 9 ๊น์ง์ ์ซ์๋ฅผ ๋ฏธ๋ฆฌ ๋ชจ์๋๊ณ ํ๋์ฉ 4๋ฒ ๋ฝ์ผ๋ฉด ๋๋ค.
1์์ 9๊น์ง์ ์ซ์๋ฅผ ๋จผ์ ๋ชจ์๋ค.
์ฌ๋ฌ ๊ฐ์ ๊ฐ์ ๋ชจ์ ๋ ๋๋ ๋ฌด์์ ์ธ๊น?
์ฌ๋ฌ ๊ฐ์ ๊ฐ์ ๋ชจ์ ๋ ๋๋ ๋ฐฐ์ด์ด๋ ๊ฐ์ฒด๋ฅผ ์ฌ์ฉํ๋ค.
์ฌ๊ธฐ์๋ ์ด๋ค ๊ฑธ ์ฌ์ฉํด์ผํ ๊น? ์ด ์ง๋ฌธ์ ์์ผ๋ก ์์ฃผ ๋์ค๊ฒ ๋๋ค.
๋ฐฐ์ด์ ์ฌ์ฉํ ์ง ๊ฐ์ฒด๋ฅผ ์ฌ์ฉํ ์ง์ ๋ฐ๋ผ ํ๋ก๊ทธ๋จ ๊ตฌ์กฐ๊ฐ ๋ฐ๋๊ธฐ ๋๋ฌธ์ด๋ค. ๊ทธ๋ฆฌ๊ณ ์ฝ๋ฉ์ ํจ์จ์ฑ๊ณผ ์ฑ๋ฅ๋ ์ฐจ์ด๊ฐ ๋๋ค.
Note!
๊ฐ๋จํ๊ฒ ๊ณ ๋ฅด๋ ๋ฐฉ๋ฒ
- ๊ฐ๋จํ๊ฒ ๊ณ ๋ฅด๋ ๋ฐฉ๋ฒ - ๋จ์ํ ๊ฐ๋ค์ ๋์ด ๋ฐฐ์ด ์ฌ์ฉ ๊ฐ์ ์ด๋ฆ์ด ๋ถ๋๋ค ๊ฐ์ฒด ์ฌ์ฉ
์ซ์์ผ๊ตฌ์ ์ซ์๋ค์ ๋จ์ํ ๊ฐ๋ค์ ๋์ด์ด๋ฏ๋ก ๋ฐฐ์ด์ ์ฌ์ฉํ๊ฒ ๋ค.
<!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>์ซ์์ผ๊ตฌ ๊ฒ์</title>
</head>
<body>
<form id="form">
<input type="text" id="input">
<button>ํ์ธ</button>
</form>
<div id="logs"></div>
<script>
const $input = document.querySelector('#input');
const $form = document.querySelector('#form');
const $logs = document.querySelector('#logs');
//numbers ๋น ๋ฐฐ์ด ๋ง๋ค๊ณ ๊ทธ ์์ 1~9๊น์ง์ ์ซ์ ๋ฃ๊ธฐ.
const numbers = [];
for (let n=1; n<9; n+=1){ //n1๋ถํฐ n8๊น์ง 1 ๋ํ๋ฉด์ ๋ฐ๋ณต.
numbers.push(n);
}
//0๋ถํฐ ์์ํ ๊ฒฝ์ฐ ์ด๋ ๊ฒ ํ๋ฉด ๋๋ค.
//for (let n=0; n<=9; n+=1){
// numbers.push(n+1);
//}
</script>
</body>
</html>
<!--์ฝ๋ ์ถ์ฒ (๋์)Let's Get IT ์๋ฐ์คํฌ๋ฆฝํธ ํ๋ก๊ทธ๋๋ฐ-->numbers ๋ผ๋ ๋น ๋ฐฐ์ด์ ๋ง๋ค๊ณ ๊ทธ ์์ 1~9๊น์ง์ ์ซ์๋ฅผ ๋ฃ์๋ค.
๋ฐ๋ณต๋ฌธ์ ๋ฒ์๋ฅผ ์ ๋ ๋ฐฉ๋ฒ์ 4 ๊ฐ์ง์ด๋ค.
| - ๋ฐ๋ณต๋ฌธ์ ๋ฒ์๋ฅผ ์ ๋ ๋ฐฉ๋ฒ - |
| 1. 0 ๋ถํฐ ์์ํด 9 ๋ฏธ๋ง์ผ๋ก ์ ๊ธฐ |
| 2. 0 ๋ถํฐ ์์ํด 8 ์ดํ๋ก ์ ๊ธฐ |
| 3. 1 ๋ถํฐ ์์ํด 10 ๋ฏธ๋ง์ผ๋ก ์ ๊ธฐ |
| 4. 1๋ถํฐ ์์ํด 9 ์ดํ๋ก ์ ๊ธฐ |
ํ๋ก๊ทธ๋๋ฐ์์ ๋ณดํต ์ซ์๋ 0 ๋ถํฐ ์์ํ๋ค.
๋ฐฐ์ด์ ์ํ ( ๋ฐฐ์ด ๋ด๋ถ์ ์์๋ค์ ์์๋๋ก ์ฐพ๋ ๊ฒ ) ํ๋ ๊ฒ ์๋๋ผ๋ฉด 1 ๋ถํฐ ์ธ๋ ๊ฒ์ด ๋ ํธํ ์ ์๋ค.
์ซ์๋ฅผ ๋ฐฐ์ด์ ๋ด์์ผ๋ ์ฌ๊ธฐ์ 4๊ฐ๋ฅผ ๋ฝ์๋ณด์.
<script>
const $input = document.querySelector('#input');
const $form = document.querySelector('#form');
const $logs = document.querySelector('#logs');
//numbers ๋น ๋ฐฐ์ด ๋ง๋ค๊ณ ๊ทธ ์์ 1~9๊น์ง์ ์ซ์ ๋ฃ๊ธฐ.
const numbers = []; //[1,2,3,4,5,6,7,8,9]
for (let n=0; n<9; n+=1){
numbers.push(n+1);
}
//์ซ์ 4๊ฐ ๋ฝ๊ธฐ.
//answer ๋น ๋ฐฐ์ด ๋ง๋ค๊ณ , numbers ๋ฐฐ์ด๋ก๋ถํฐ ์ซ์๋ฅผ ํ๋์ฉ ๊บผ๋ธ๋ค. 4๋ฒ ๋ฐ๋ณตํ๋ค.
const answer = [];
for (let n=0; n<=3; n+=1){ // 4๋ฒ ๋ฐ๋ณต.
const index = Math.floor(Math.random()*9); // 0 ~ 8 ์ ์. (+1 ์ถ๊ฐํ๋ฉด 0 ~ 9 ์ ์.)
answer.push(numbers[index]); //index๋ฅผ ๋ฌด์์๋ก ๋ฝ๊ณ ,numbers[index]๋ก ์ค์ ์ซ์๋ฅผ ๊ฐ์ ธ์จ๋ค.
//๊ทธ๋ฆฌ๊ณ answer ๋ฐฐ์ด์ ๋ฝ์ ์ซ์๋ฅผ ์ถ๊ฐ (push)ํ๋ค.
numbers.splice(index,1); //numbers ๋ฐฐ์ด์์๋ ์ ๊ฑฐ(splice)ํ๋ค.
//(numbers๋ฐฐ์ด์์ ๋ฝ์์ผ๋๊น ์ญ์ ํ๋ ๊ฒ์ด๋ค.)
}
console.log(answer);
</script>
<!--์ฝ๋ ์ถ์ฒ (๋์)Let's Get IT ์๋ฐ์คํฌ๋ฆฝํธ ํ๋ก๊ทธ๋๋ฐ-->
numbers [2,5,6,7,8,9]
answer [3,1,4]์งํํ๋ฉด ํ ์๋ก numbers ๋ฐฐ์ด์ด ์ค์ด๋ค๊ณ answer ๋ฐฐ์ด์ด ๋์ด๋๋ค.
๊ทผ๋ฐ ์์ฒ๋ผ number์๋ 6์๋ฆฌ ์ซ์๋ง ์๋๋ฐ, Math.floor(Math.random() * 9 ) ์์ 0 ~ 8 ๊น์ง์ ์ซ์๋ฅผ ๊ณ์ ๋ฝ๊ณ ์๋ ๊ฒ์ด๋ค.
๊ทผ๋ฐ ๋ง์ฝ 8์ ์ซ์๊ฐ ๋์ค๊ณ number[8] ์ด ๋๋ฉด ํ์ฌ numbers ์๋ ๋ฐฐ์ด์ด 5๊น์ง๋ง ๊ฐ๋ฅํ๊ธฐ์ undefined ๊ฐ ๋์ค๋ ๊ฒ์ด๋ค.
์ ์ ๋ฝ์์๋ก Math.floor(Math.random() * 9 ) ์ด๊ฒ์์ ๋ฝ๋ ์ซ์๋ ํ๋์ฉ ์ค์ด๋ค์ด์ผ ํ๋ค.
const answer = [];
for (let n=0; n<=3; n+=1){ // 4๋ฒ ๋ฐ๋ณต.
const index = Math.floor(Math.random() * (9-n)); // 0 ~ 8 ์ ์. (+1 ์ถ๊ฐํ๋ฉด 0 ~ 9 ์ ์.)
answer.push(numbers[index]); //index๋ฅผ ๋ฌด์์๋ก ๋ฝ๊ณ ,numbers[index]๋ก ์ค์ ์ซ์๋ฅผ ๊ฐ์ ธ์จ๋ค.
//๊ทธ๋ฆฌ๊ณ answer ๋ฐฐ์ด์ ๋ฝ์ ์ซ์๋ฅผ ์ถ๊ฐ (push)ํ๋ค.
numbers.splice(index,1); //numbers ๋ฐฐ์ด์์๋ ์ ๊ฑฐ(splice)ํ๋ค.
//(numbers๋ฐฐ์ด์์ ๋ฝ์์ผ๋๊น ์ญ์ ํ๋ ๊ฒ์ด๋ค.)
}
//์ฝ๋ ์ถ์ฒ (๋์)Let's Get IT ์๋ฐ์คํฌ๋ฆฝํธ ํ๋ก๊ทธ๋๋ฐ์ด๋ ๊ฒ ๋ฐ๊พผ๋ค. ๋ฐ๋ณต๋ฌธ์ด ๋ ๋๋ง๋ค ์ค์ด๋ค๊ฒ ๋ง๋๋ ๊ฒ์ด๋ค.
<script>
const $input = document.querySelector('#input');
const $form = document.querySelector('#form');
const $logs = document.querySelector('#logs');
//numbers ๋น ๋ฐฐ์ด ๋ง๋ค๊ณ ๊ทธ ์์ 1~9๊น์ง์ ์ซ์ ๋ฃ๊ธฐ.
const numbers = []; //[1,2,3,4,5,6,7,8,9]
for (let n=0; n<9; n+=1){
numbers.push(n+1);
}
//์ซ์ 4๊ฐ ๋ฝ๊ธฐ.
//answer ๋น ๋ฐฐ์ด ๋ง๋ค๊ณ , numbers ๋ฐฐ์ด๋ก๋ถํฐ ์ซ์๋ฅผ ํ๋์ฉ ๊บผ๋ธ๋ค. 4๋ฒ ๋ฐ๋ณตํ๋ค.
const answer = [];
for (let n=0; n<=3; n+=1){ // 4๋ฒ ๋ฐ๋ณต.
const index = Math.floor(Math.random() * (numbers.length)); // 0 ~ 8 ์ ์.
answer.push(numbers[index]); //index๋ฅผ ๋ฌด์์๋ก ๋ฝ๊ณ ,numbers[index]๋ก ์ค์ ์ซ์๋ฅผ ๊ฐ์ ธ์จ๋ค.
//๊ทธ๋ฆฌ๊ณ answer ๋ฐฐ์ด์ ๋ฝ์ ์ซ์๋ฅผ ์ถ๊ฐ (push)ํ๋ค.
numbers.splice(index,1); //numbers ๋ฐฐ์ด์์๋ ์ ๊ฑฐ(splice)ํ๋ค.
//(numbers๋ฐฐ์ด์์ ๋ฝ์์ผ๋๊น ์ญ์ ํ๋ ๊ฒ์ด๋ค.)
}
console.log(answer);
</script>
<!--์ฝ๋ ์ถ์ฒ (๋์)Let's Get IT ์๋ฐ์คํฌ๋ฆฝํธ ํ๋ก๊ทธ๋๋ฐ-->
const index = Math.floor(Math.random() * (9-n)) ์ฌ๊ธฐ์์ 9 ๋ numbers ๋ฐฐ์ด์ ๊ฐ์์ด๊ธฐ ๋๋ฌธ์
number.length๋ก ๋ฐ๊พธ์ด์ ์ฐ๊ฒฐ์ ํด๋๋๊ฒ ์ข๋ค.
๐ ์ ๋ ฅ๊ฐ ๊ฒ์ฆํ๊ธฐ
์ ๋ ฅ์ฐฝ์ผ๋ก ์ซ์์ผ๊ตฌ์ ์์ธก๊ฐ์ ๋ฐ๋๋ก ํ๊ฒ ๋ค.
๋ฒํผ ํ๊ทธ์ click ์ด๋ฒคํธ๋ฅผ ๋ฌ์ง ์๊ณ , $form ํ๊ทธ์ submit ์ด๋ฒคํธ๋ฅผ ๋ฌ์๋ค.
๋ณดํต ์ ๋ ฅ์ฐฝ์ด ์์ผ๋ฉด ํผ ํ๊ทธ๋ก ๊ฐ์ธ์ submit ์ด๋ฒคํธ๋ฅผ ์ฌ์ฉํ๋ ๊ฒ์ด ์ข๋ค.
<script>
const $input = document.querySelector('#input');
const $form = document.querySelector('#form');
const $logs = document.querySelector('#logs');
//numbers ๋น ๋ฐฐ์ด ๋ง๋ค๊ณ ๊ทธ ์์ 1~9๊น์ง์ ์ซ์ ๋ฃ๊ธฐ.
const numbers = []; //[1,2,3,4,5,6,7,8,9]
for (let n=0; n<9; n+=1){
numbers.push(n+1);
}
//์ซ์ 4๊ฐ ๋ฝ๊ธฐ.
//answer ๋น ๋ฐฐ์ด ๋ง๋ค๊ณ , numbers ๋ฐฐ์ด๋ก๋ถํฐ ์ซ์๋ฅผ ํ๋์ฉ ๊บผ๋ธ๋ค. 4๋ฒ ๋ฐ๋ณตํ๋ค.
const answer = [];
for (let n=0; n<=3; n+=1){ // 4๋ฒ ๋ฐ๋ณต.
const index = Math.floor(Math.random() * (numbers.length-n)); // 0 ~ 8 ์ ์. (+1 ์ถ๊ฐํ๋ฉด 0 ~ 9 ์ ์.)
answer.push(numbers[index]); //index๋ฅผ ๋ฌด์์๋ก ๋ฝ๊ณ ,numbers[index]๋ก ์ค์ ์ซ์๋ฅผ ๊ฐ์ ธ์จ๋ค.
//๊ทธ๋ฆฌ๊ณ answer ๋ฐฐ์ด์ ๋ฝ์ ์ซ์๋ฅผ ์ถ๊ฐ (push)ํ๋ค.
numbers.splice(index,1); //numbers ๋ฐฐ์ด์์๋ ์ ๊ฑฐ(splice)ํ๋ค.
//(numbers๋ฐฐ์ด์์ ๋ฝ์์ผ๋๊น ์ญ์ ํ๋ ๊ฒ์ด๋ค.)
}
console.log(answer);
const tries = [];
function checkInput(input) {}
$form.addEventListener('submit',(event)=>{
event.preventDefault(); //ํผ ํ๊ทธ์ ๊ธฐ๋ณธ ๋์์ ์ทจ์ํ๋ ์ฝ๋.
const value = $input.value;
$input.value = ''; //์
๋ ฅํ ๊ฐ์ ๊ฐ์ ธ์ค๋ ์ฝ๋. ( ์ซ์๊ฐ ์๋๋ผ ๋ฌธ์์ด๋ก ๊ฐ์ด ๋ค์ด์ด)
const valid = checkInput(value); //์
๋ ฅํ ๊ฐ์ checkInput ํจ์๋ก ๊ฒ์ฆ.
});
</script>
<!--์ฝ๋ ์ถ์ฒ (๋์)Let's Get IT ์๋ฐ์คํฌ๋ฆฝํธ ํ๋ก๊ทธ๋๋ฐ-->event.preventDefault() ๋ ๋ฌด์์ธ๊ฐ?
ํผ ํ๊ทธ์ ๊ธฐ๋ณธ ๋์์ ์ทจ์ํ๋ ์ฝ๋์ด๋ค.
ํผ ํ๊ทธ๋ submit ์ด๋ฒคํธ๊ฐ ๋ฐ์ํ ๋ ๊ธฐ๋ณธ์ผ๋ก ๋ธ๋ผ์ฐ์ ๋ฅผ ์๋ก๊ณ ์นจํ๋ค.
์ซ์์ผ๊ตฌ ๊ฒ์์์๋ ๋ธ๋ผ์ฐ์ ๊ฐ ์๋ก๊ณ ์นจ๋๋ฉด ๋ชจ๋ ๊ฒ์ด ์ด๊ธฐํ๋๋ฏ๋ก ์๋ก๊ณ ์นจ๋๋ ๊ฒ์ ๋ง์์ผ ํ๋ค.
์ ๋ ฅํ ๊ฐ์ $input.value ๋ก ๊ฐ์ ธ์จ๋ค.
์ด ๊ฐ์ checkInput ํจ์๋ก ๊ฒ์ฆํ๋ค. ๊ฒ์ฆํด์ผ ํ๋ ๋ด์ฉ์ ๊ธธ์ด๊ฐ 4๊ธ์ ์ธ๊ฐ, ์ค๋ณต๋ ์ซ์๋ ์๋๊ฐ, ์ด๋ฏธ ์๋ํ๋ ๊ฐ์ ์๋๊ฐ ์ด๋ค.
์ด๋ฏธ ์๋ํ๋ ๊ฐ์ธ์ง๋ฅผ ๊ฒ์ฌํ๋ ์ด์ ๋ ๋ง์ฝ 1234๋ฅผ ์๋ํด์ ์ด๋ค ๊ฒฐ๊ณผ๋ฅผ ์ป์๋ค๋ฉด ๋ค์ ์๋ํ ์ด์ ๊ฐ ์๊ธฐ ๋๋ฌธ์ด๋ค.
์ด์ checkInput ํจ์์ ๋ด๋ถ๋ฅผ ์์ฑํ๋ค.
<script>
const $input = document.querySelector('#input');
const $form = document.querySelector('#form');
const $logs = document.querySelector('#logs');
//numbers ๋น ๋ฐฐ์ด ๋ง๋ค๊ณ ๊ทธ ์์ 1~9๊น์ง์ ์ซ์ ๋ฃ๊ธฐ.
const numbers = []; //[1,2,3,4,5,6,7,8,9]
for (let n=0; n<9; n+=1){
numbers.push(n+1);
}
//์ซ์ 4๊ฐ ๋ฝ๊ธฐ.
//answer ๋น ๋ฐฐ์ด ๋ง๋ค๊ณ , numbers ๋ฐฐ์ด๋ก๋ถํฐ ์ซ์๋ฅผ ํ๋์ฉ ๊บผ๋ธ๋ค. 4๋ฒ ๋ฐ๋ณตํ๋ค.
const answer = [];
for (let n=0; n<=3; n+=1){ // 4๋ฒ ๋ฐ๋ณต.
const index = Math.floor(Math.random() * (numbers.length-n)); // 0 ~ 8 ์ ์. (+1 ์ถ๊ฐํ๋ฉด 0 ~ 9 ์ ์.)
answer.push(numbers[index]); //index๋ฅผ ๋ฌด์์๋ก ๋ฝ๊ณ ,numbers[index]๋ก ์ค์ ์ซ์๋ฅผ ๊ฐ์ ธ์จ๋ค.
//๊ทธ๋ฆฌ๊ณ answer ๋ฐฐ์ด์ ๋ฝ์ ์ซ์๋ฅผ ์ถ๊ฐ (push)ํ๋ค.
numbers.splice(index,1); //numbers ๋ฐฐ์ด์์๋ ์ ๊ฑฐ(splice)ํ๋ค.
//(numbers๋ฐฐ์ด์์ ๋ฝ์์ผ๋๊น ์ญ์ ํ๋ ๊ฒ์ด๋ค.)
}
console.log(answer);
const tries = [];
function checkInput(input) {
if (input.length != 4) { //๊ธธ์ด๋ 4๊ฐ ์๋๊ฐ.
return alert('4์๋ฆฌ ์ซ์๋ฅผ ์
๋ ฅํด ์ฃผ์ธ์.');
}
if (new Set(input).size != 4) { //์ค๋ณต๋ ์ซ์๊ฐ ์๋๊ฐ.
//new Set์ ์ค๋ณต์ด ์๋ ๋ฐฐ์ด์ด๋ค.
return alert ('์ค๋ณต๋์ง ์๊ฒ ์
๋ ฅํด์ฃผ์ธ์.');
}
if (tries.includes(input)){ //์ด๋ฏธ ์๋ํ ๊ฐ์ ์๋๊ฐ.
return alert ('์ด๋ฏธ ์๋ํ ๊ฐ์
๋๋ค.');
}
return true;
}
$form.addEventListener('submit',(event)=>{
event.preventDefault(); //ํผ ํ๊ทธ์ ๊ธฐ๋ณธ ๋์์ ์ทจ์ํ๋ ์ฝ๋.
const value = $input.value;
$input.value = ''; //์
๋ ฅํ ๊ฐ์ ๊ฐ์ ธ์ค๋ ์ฝ๋. ( ์ซ์๊ฐ ์๋๋ผ ๋ฌธ์์ด๋ก ๊ฐ์ด ๋ค์ด์ด)
if (checkInput(value)){ //์
๋ ฅํ ๊ฐ์ checkInput ํจ์๋ก ๊ฒ์ฆ.
//์
๋ ฅ๊ฐ ๋ฌธ์ ์์ ๋.
tries.push(value);
} else {
//์
๋ ฅ๊ฐ ์๋ฌ ์์ ๋.
}
});
</script>
<!--์ฝ๋ ์ถ์ฒ (๋์)Let's Get IT ์๋ฐ์คํฌ๋ฆฝํธ ํ๋ก๊ทธ๋๋ฐ-->๊ฒ์ฌ๋ฅผ ํต๊ณผํ๋ฉด true ๋ฅผ ๋ฐํ, ์คํจํ๋ฉด false๋ฅผ ๋ฐํํ๋ค.
๋ฐํํ ๊ฐ์ ๋ค์์ if ๋ฌธ์ ๋ฃ์ด ๊ฒ์ฌ๊ฐ ์คํจํ๋์ง ์๋์ง ํ๋จํ ๋ ์ฌ์ฉํ๋ค.
๊ตฌํํ ์ฝ๋์์ ์คํจํ๋ ๊ฒฝ์ฐ์๋ return alert ( ๋ฉ์์ง ) ๋ฅผ ํ๊ณ ์๋ค.
alert ํจ์๋ undefined ๋ฅผ ๋ฐํํ๋ค. undefined๋ if ๋ฌธ์์ false๋ก ์ฒ๋ฆฌํ๋ค.
์ด๋ฌํ ๋ถ๋ถ์ ์ธ์ด์ ์ธ ํน์ฑ์ด๋ฏ๋ก ๋ณต์กํ๋ค๋ฉด alert ํ ํ์ ๋ช ์์ ์ผ๋ก return false ํด๋ ๋๋ค.
๐ค ์ค๋ณต๋ ์ซ์๋ฅผ ๊ฒ์ฌํ๋ ์ฝ๋๋?
new Set (input) ์ด๋ผ๋ ์ฝ๋๊ฐ ๋ญ๊น?
new ๋ ์์ฝ์ด๋ฅผ ๋ปํ๊ณ Set ์ ์ค๋ณต์ ํ์ฉํ์ง ์๋ ํน์ํ ๋ฐฐ์ด์ด๋ค.
new Set ('1234')์ ํ๋ฉด Set ๋ด๋ถ์๋ 1,2,3 ๋ง ๋ค์ด๊ฐ๋ค. ์ด๋ฅผ ํตํด Set์ ์์ ๊ฐ์๋ฅผ ์ธ๋ฉด ์ค๋ณต๋ ๊ฐ์ด ์๋์ง ์๋์ง๋ฅผ ๊ฒ์ฌํ ์ ์๋ค.
๊ทธ๋ฆฌ๊ณ Set์ ์์ ๊ฐ์๋ฅผ ๊ตฌํ ๋๋ length ๊ฐ ์๋๋ผ size ๋ฅผ ์ฌ์ฉํ๋ค.
-(๋์) Let's Get IT ์๋ฐ์คํฌ๋ฆฝํธ ํ๋ก๊ทธ๋๋ฐ
Let's Get IT ์๋ฐ์คํฌ๋ฆฝํธ ํ๋ก๊ทธ๋๋ฐ
๋๋ถ(TheBook): (์ฃผ)๋์์ถํ ๊ธธ๋ฒ์์ ์ ๊ณตํ๋ IT ๋์ ์ด๋ ์๋น์ค์ ๋๋ค.
thebook.io
-(๊ฐ์ข) ๋ ์ธ ๊ธฐ๋ฆฟ ์๋ฐ์คํฌ๋ฆฝํธ
https://www.inflearn.com/course/
[๋ฌด๋ฃ] [๋ฆฌ๋ด์ผ] ๋ ์ธ ๊ธฐ๋ฆฟ ์๋ฐ์คํฌ๋ฆฝํธ - ์ธํ๋ฐ | ๊ฐ์
๋ณธ ๊ฐ์์์๋ ์๋ฐ์คํฌ๋ฆฝํธ๋ฅผ ํ์ฉํด ํ๋ก๊ทธ๋๋ฐ ์ฌ๊ณ ๋ ฅ์ ๊ธฐ๋ฅด๋ ์ฐ์ต์ ํฉ๋๋ค. ์น ๊ฒ์์ธ ๊ตฌ๊ตฌ๋จ์ ์์์ผ๋ก ๋๋ง์๊ธฐ, ์ซ์ ์ผ๊ตฌ, ๋ฐ์ ์๋ ํ ์คํธ, ํฑํํ , ๋ก๋ ์ถ์ฒจ๊ธฐ, ๊ฐ์๋ฐ์๋ณด, ์นด
www.inflearn.com
