๐ ์ฐจ๋ก ์ ํํ๊ธฐ
ํด๋ฆญํ ์นธ์ O๋ฅผ ์ ๋ ฅํ๊ฒ ํ๋ ค๋ฉด td ํ๋์ ํด๋ฆญ ์ด๋ฒคํธ ๋ฆฌ์ค๋๋ฅผ ๋ถ์ฌ์ผ ํ๋ค.
์ด๋ฒคํธ ๋ฆฌ์ค๋๋ td ํ๊ทธ๋ฅผ ์์ฑํ ๋ ๋ฐ๋ก ๋ถ์ธ๋ค.
์ค์ ํ๋ฉด์ ํ๊ทธ๊ฐ ํ์๋๊ธฐ ์ ์ด๋ผ๋ ์ด๋ฒคํธ ๋ฆฌ์ค๋๋ฅผ ๋ฏธ๋ฆฌ ๋ถ์ผ ์ ์๋ค.
<!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>
<style>
table {
border-collapse: collapse;
}
td {
border: 1px solid black;
width: 40px;
height: 40px;
text-align: center;
}
</style>
</head>
<body>
</body>
<script>
const { body } = document;
const $table = document.createElement('table');
const $result = document.createElement('div'); //๊ฒฐ๊ณผ์ฐฝ
const rows = []; //์ค ๋ด๋นํ๋ ๋ฐฐ์ด ์์ฑ.
let turn = 'O';
const callback = (event) => {
if (event.target.textContent !== ''){ //์นธ์ด ์ด๋ฏธ ์ฑ์์ ธ ์๋๊ฐ?
console.log('๋น ์นธ์ด ์๋๋ค.');
} else { //๋น ์นธ์ด๋ฉด
console.log('๋น ์นธ์ด๋ค.');
event.target.textContent = turn;
//์กฐ๊ฑด๋ถ ์ฐ์ฐ์ ์ฌ์ฉ.
//turn ์ด O์ด๋ฉด X๋ก, X๋ฉด O์ผ๋ก ๋ฐ๊พผ๋ค.
turn = turn ==='X' ? 'O' : 'X';
}
};
for ( let i = 1; i <= 3; i++ ){
const $tr = document.createElement('tr');
const cells = []; //๋ฐฐ์ด ์์ฑ.
for ( let j = 1; j <= 3; j++ ){
const $td = document.createElement('td');
$td.addEventListener('click',callback); //tdํ๊ทธ์ ์ด๋ฒคํธ๋ฆฌ์ค๋ ๋ฌ๊ณ , ํจ์ ์คํ.
cells.push($td);
$tr.appendChild($td); //trํ๊ทธ ์์ tdํ๊ทธ๋ฅผ ๋ฃ๊ณ ,
}
rows.push(cells);
$table.appendChild($tr); //tableํ๊ทธ ์์ trํ๊ทธ๋ฅผ ๋ฃ๋๋ค.
}
body.appendChild($table); //bodyํ๊ทธ์ tableํ๊ทธ,divํ๊ทธ๋ฅผ ๋ฃ๋๋ค.
body.appendChild($result);
</script>
</html>
<!--์ฝ๋์ถ์ฒ (๋์) Let's Get IT ์๋ฐ์คํฌ๋ฆฝํธ ํ๋ก๊ทธ๋๋ฐ-->
ํ๋ฒ O์ ๋ฃ์ ์นธ์ด๋ฉด ๋ค์ ๋ฃ์ง ์๋๋ก ์ ๊ฒํ๋ ์ฝ๋๋ฅผ ์ถ๊ฐํ๊ณ , ์ ๋ ฅ ๋ชจ์์ด O ์๋๋ฉด X ์ด๋ฏ๋ก ๋๊ตฌ์ ์ฐจ๋ก ( turn ) ์ธ์ง๋ O ๋๋ X๋ก ๊ตฌ๋ถํ๋ค.
๊ทธ๋ฆฌ๊ณ , callback ํจ์ ๋ง์ง๋ง์์ turn ์ด O์ด๋ฉด X๋ก, X๋ฉด O๋ก ๋ฐ๊พผ๋ค.
//์กฐ๊ฑด๋ถ ์ฐ์ฐ์ ์ฌ์ฉ.
//turn ์ด O์ด๋ฉด X๋ก, X๋ฉด O์ผ๋ก ๋ฐ๊พผ๋ค.
turn = turn ==='X' ? 'O' : 'X';
//์ฝ๋์ถ์ฒ (๋์) Let's Get IT ์๋ฐ์คํฌ๋ฆฝํธ ํ๋ก๊ทธ๋๋ฐ์กฐ๊ฑด๋ถ ์ฐ์ฐ์๊ฐ ํท๊ฐ๋ฆฐ๋ค๋ฉด if ๋ฌธ์ ์ฌ์ฉํด๋ ๋๋ค.
if (turn === 'X') {
turn = 'O';
} else {
turn = 'X';
}
//์ฝ๋์ถ์ฒ (๋์) Let's Get IT ์๋ฐ์คํฌ๋ฆฝํธ ํ๋ก๊ทธ๋๋ฐํ์ฌ ์ฝ๋๋ฅผ ๋ณด๋ฉด 9๊ฐ์ td ํ๊ทธ์ ํด๋ฆญ ์ด๋ฒคํธ ๋ฆฌ์ค๋๊ฐ ๋ฌ๋ ค์๋ค.
๋์ค์ ์ด๋ฒคํธ ๋ฆฌ์ค๋๋ฅผ ์ ๊ฑฐํ ์ํฉ์ด ์๊ธฐ๋ฉด 9๊ฐ์ ์ด๋ฒคํธ ๋ฆฌ์ค๋๋ฅผ ์ผ์ผํ ์ ๊ฑฐํด์ผ ํ๋ค.
์ด๋ณด๋ค๋ ์ด๋ฒคํธ ๋ฆฌ์ค๋๋ฅผ ํ๋ฒ์ ๋ฌ๊ณ ์ ๊ฑฐํ ์ ์์ผ๋ฉด ์ข๊ธฐ ๋๋ฌธ์ ์์ ํ์.
<script>
const { body } = document;
const $table = document.createElement('table');
const $result = document.createElement('div'); //๊ฒฐ๊ณผ์ฐฝ
const rows = []; //์ค ๋ด๋นํ๋ ๋ฐฐ์ด ์์ฑ.
let turn = 'O';
const callback = (event) => {
if (event.target.textContent !== ''){ //์นธ์ด ์ด๋ฏธ ์ฑ์์ ธ ์๋๊ฐ?
console.log('๋น ์นธ์ด ์๋๋ค.');
} else { //๋น ์นธ์ด๋ฉด
console.log('๋น ์นธ์ด๋ค.');
event.target.textContent = turn;
//์กฐ๊ฑด๋ถ ์ฐ์ฐ์ ์ฌ์ฉ.
//turn ์ด O์ด๋ฉด X๋ก, X๋ฉด O์ผ๋ก ๋ฐ๊พผ๋ค.
turn = turn ==='X' ? 'O' : 'X';
}
};
for ( let i = 1; i <= 3; i++ ){
const $tr = document.createElement('tr');
const cells = []; //๋ฐฐ์ด ์์ฑ.
for ( let j = 1; j <= 3; j++ ){
const $td = document.createElement('td');
//9๊ฐ์ tdํ๊ทธ์ ์ด๋ฒคํธ๋ฆฌ์ค๋๊ฐ ๋ฌ๋ฆผ.
//$td.addEventListener('click',callback); //tdํ๊ทธ์ ์ด๋ฒคํธ๋ฆฌ์ค๋ ๋ฌ๊ณ , ํจ์ ์คํ.
cells.push($td);
$tr.appendChild($td); //trํ๊ทธ ์์ tdํ๊ทธ๋ฅผ ๋ฃ๊ณ ,
}
rows.push(cells);
$table.appendChild($tr); //tableํ๊ทธ ์์ trํ๊ทธ๋ฅผ ๋ฃ๋๋ค.
$table.addEventListener('click',callback); //์ด๋ฒคํธ๋ฆฌ์ค๋ ํ๋ฒ์ ๋ฌ๊ณ , ํจ์ ์คํ
}
body.appendChild($table); //bodyํ๊ทธ์ tableํ๊ทธ,divํ๊ทธ๋ฅผ ๋ฃ๋๋ค.
body.appendChild($result);
</script>
<!--์ฝ๋์ถ์ฒ (๋์) Let's Get IT ์๋ฐ์คํฌ๋ฆฝํธ ํ๋ก๊ทธ๋๋ฐ-->9๊ฐ td ํ๊ทธ ๋์ table ํ๊ทธ ํ๋์๋ง ํด๋ฆญ ์ด๋ฒคํธ๋ฅผ ๋ฌ์๋ค. ๋ค๋ฅธ ์ฝ๋๋ ์์ ํ์ง ์์๋ค.
table ํ๊ทธ์๋ง ์ด๋ฒคํธ๋ฅผ ์ฐ๊ฒฐํ๋๋ฐ, ๋์ผํ๊ฒ ์๋ํ๋ค. ์ด๋ป๊ฒ ์ด๋ฐ ์ผ์ด ๊ฐ๋ฅํ๊ฑธ๊น?
event.target ์ด ๋ฐ๋์ง ์๊ธฐ ๋๋ฌธ์ด๋ค.
event.target ์ ์ด๋ฒคํธ๊ฐ ๋ฐ์ํ ์ง์ ์ ์ธ ๋์์ด๋ค.
td ํ๊ทธ๋ฅผ ํด๋ฆญํ๋ฏ๋ก td์ ์ด๋ฒคํธ๋ฅผ ์ฐ๊ฒฐํ๋ table์ ์ด๋ฒคํธ๋ฅผ ์ฐ๊ฒฐํ๋ event.target ์ ๊ทธ๋๋ก td์ด๋ค.
์ด๋ฒคํธ๊ฐ ๋ฐ์ํ ํ๊ทธ ( event.target ) ๊ฐ ์๋ ์ด๋ฒคํธ๋ฅผ ์ฐ๊ฒฐํ ํ๊ทธ์ ์ ๊ทผํ๊ณ ์ถ๋ค๋ฉด?
event.currentTarget ์ ์ฌ์ฉํ๋ฉด ๋๋ค.
td ํ๊ทธ์๋ ์ด๋ฒคํธ๋ฅผ ์ฐ๊ฒฐํ์ง ์์๋๋ฐ ์ด๋ป๊ฒ table ์์ ์ด๋ฒคํธ๊ฐ ํธ์ถ๋์์๊น?
์ด๊ฒ์ ์ด๋ฒคํธ ๋ฒ๋ธ๋ง ( event bubbling ) ๊ฐ๋ ์ ์์์ผ ํ๋ค.
td ์ ๋ถ๋ชจ ํ๊ทธ๋ tr ์ด๊ณ , tr ์ ๋ถ๋ชจ ํ๊ทธ๋ table ์ด๋ค.
td ํ๊ทธ๋ฅผ ํด๋ฆญํ๋ฉด td ํ๊ทธ์์ click ์ด๋ฒคํธ๊ฐ ๋ฐ์ํ๋ค. ๊ทธ๋ฌ๋ฉด td ํ๊ทธ์ ๋ถ๋ชจ์ธ tr ํ๊ทธ์์๋ ๋์ผํ ์ด๋ฒคํธ๊ฐ ๋ฐ์ํ๊ณ , table ํ๊ทธ์์๋ ๋ฐ์ํ๋ค.
์ฆ, td ํ๊ทธ์์ ๋ฐ์ํ click ์ด๋ฒคํธ๊ฐ table ํ๊ทธ๊น์ง ์ ๋ฌ๋๋ ๊ฒ์ด๋ค.
์ ๋ฆฌํ์๋ฉด,
HTML ์์๋ ์ด๋ฒคํธ๊ฐ ๋ฐ์ํ ๋ ๋ถ๋ชจ ํ๊ทธ์๋ ์์ฐจ์ ์ผ๋ก ๋์ผํ ์ด๋ฒคํธ๊ฐ ๋ฐ์ํ๋ค.
์ด์ฒ๋ผ ์ด๋ฒคํธ๊ฐ ๋ถ๋ชจ ํ๊ทธ๋ก ํผ์ ธ ๋๊ฐ๋ ํ์์ด ์๋ฉด์ผ๋ก ์ฌ๋ผ๊ฐ๋ ๋ฌผ๋ฐฉ์ธ ๋ชจ์๊ณผ ๋น์ทํ๋ค๊ณ ํด์
์ด๋ฒคํธ ๋ฒ๋ธ๋ง์ด๋ผ๋ ์ด๋ฆ์ด ๋ถ์ฌ์ง ๊ฒ์ด๋ค.
๐ ์น๋ถ ํ๋จํ๊ธฐ
์น์๋ฅผ ํ๋จํด๋ณด์. ๊ฐ๋ก์ค์ด๋ ์ธ๋ก์ค, ๋๊ฐ์ ์ ๊ฐ์ ๋ชจ์์ด ์ค๋ฉด ์น๋ฆฌ์ด๋ค.
์น์๊ฐ ๊ฐ๋ ค์ก๋ค๋ฉด ๋๊ฐ ์น์์ธ์ง๋ div ํ๊ทธ๋ฅผ ๋ง๋ค์ด ํ์ํ๊ฒ ๋ค. ๋ง์ฝ 9์นธ์ ๋ค ์ฑ์ ๋๋ฐ ์น์๊ฐ ์๋ค๋ฉด ๋ฌด์น๋ถ๋ผ๋ ๋ฉ์์ง๋ฅผ ํ์ํ๋ค.
๐ค ์น์ ํ๋จํ๊ธฐ
์น์๋ฅผ ํ๋จํ๋ ํจ์๋ฅผ ๋ง๋ ๋ค.
<script>
const { body } = document;
const $table = document.createElement('table');
const $result = document.createElement('div'); //๊ฒฐ๊ณผ์ฐฝ
const rows = []; //์ค ๋ด๋นํ๋ ๋ฐฐ์ด ์์ฑ.
let turn = 'O';
//์น์ ํ๋จ ํจ์. ( ๋ด๊ฐ ์ง๊ธ ํด๋ฆญํ ์นธ์ ๊ธฐ์ค์ผ๋ก ๊ฐ๋ก์ค,์ธ๋ก์ค,๋๊ฐ์ ์ผ๋ก 3์นธ์ด ๊ฐ์์ง ํ์ธ )
//{
// [td,td,td]
// [td,td,td]
// [td,td,td]
//}
const checkWinner = (target) => { //td ๋ฅผ ํด๋ฆญํ๋ฉด,
//์ง๊ธ ํด๋ฆญํ ์นธ์ด ๋ช ๋ฒ์งธ ์ค, ๋ช ๋ฒ์ฌ ์นธ์ธ์ง ์์๋ด๋ ์ฝ๋.
let rowIndex;
let cellIndex;
//์ด์ค ๋ฐ๋ณต๋ฌธ
//index ( ๋ฐฐ์ด์ ๋ช๋ฒ์งธ์ธ์ง ์๋ ค์ฃผ๊ฒ ๋ค )
rows.forEach((row, ri) => {
row.forEach((cell, ci) => {
if (cell === target) {
rowIndex = ri; //๋ช ๋ฒ์งธ ์ค.
cellIndex = ci; //๋ช ๋ฒ์งธ ์นธ.
}
});
});
//3์นธ ๋ค ์ฑ์์ก๋?
//๊ฒ์ฌํ ๋๋ ํญ์ false ๋ก ํ๊ณ , ์น์๊ฐ ์์ ๋ true ๋ก ๋ฐ๊พผ๋ค.
let hasWinner = false;
//๊ฐ๋ก์ค ๊ฒ์ฌ
if (
rows[rowIndex][0].textContent === turn &&
rows[rowIndex][1].textContent === turn &&
rows[rowIndex][2].textContent === turn
) {
hasWinner = true;
}
//์ธ๋ก์ค ๊ฒ์ฌ
if (
rows[0][cellIndex].textContent === turn &&
rows[1][cellIndex].textContent === turn &&
rows[2][cellIndex].textContent === turn
) {
hasWinner = true;
}
//๋๊ฐ์ ๊ฒ์ฌ
if (
rows[0][0].textContent === turn &&
rows[1][1].textContent === turn &&
rows[2][2].textContent === turn
) {
hasWinner = true;
}
if (
rows[0][2].textContent === turn &&
rows[1][1].textContent === turn &&
rows[2][0].textContent === turn
) {
hasWinner = true;
}
return hasWinner;
};
//O, X ํ๋จ ํจ์.
const callback = (event) => {
if (event.target.textContent !== '') { //์นธ์ด ์ด๋ฏธ ์ฑ์์ ธ ์๋๊ฐ?
console.log('๋น ์นธ์ด ์๋๋ค.');
return;
}
//๋น ์นธ์ด๋ฉด
console.log('๋น ์นธ์ด๋ค.');
event.target.textContent = turn;
const hasWinner = checkWinner(event.target); //callback ํจ์์์ checkWinner ํจ์๋ฅผ event.target๊ณผ ํจ๊ป ํธ์ถ.
//์น์๊ฐ ์์ผ๋ฉด
if (hasWinner){
$result.textContent = `${turn}๋์ด ์น๋ฆฌ!`;
$table.removeEventListener('click',callback);
return;
}
//์น์๊ฐ ์์ผ๋ฉด
//์กฐ๊ฑด๋ถ ์ฐ์ฐ์ ์ฌ์ฉ.
//turn ์ด O์ด๋ฉด X๋ก, X๋ฉด O์ผ๋ก ๋ฐ๊พผ๋ค.
turn = turn === 'X' ? 'O' : 'X';
};
for (let i = 1; i <= 3; i++) {
const $tr = document.createElement('tr');
const cells = []; //๋ฐฐ์ด ์์ฑ.
for (let j = 1; j <= 3; j++) {
const $td = document.createElement('td');
//9๊ฐ์ tdํ๊ทธ์ ์ด๋ฒคํธ๋ฆฌ์ค๋๊ฐ ๋ฌ๋ฆผ.
//$td.addEventListener('click',callback); //tdํ๊ทธ์ ์ด๋ฒคํธ๋ฆฌ์ค๋ ๋ฌ๊ณ , ํจ์ ์คํ.
cells.push($td);
$tr.appendChild($td); //trํ๊ทธ ์์ tdํ๊ทธ๋ฅผ ๋ฃ๊ณ ,
}
rows.push(cells);
$table.appendChild($tr); //tableํ๊ทธ ์์ trํ๊ทธ๋ฅผ ๋ฃ๋๋ค.
$table.addEventListener('click', callback); //์ด๋ฒคํธ๋ฆฌ์ค๋ ํ๋ฒ์ ๋ฌ๊ณ , ํจ์ ์คํ
}
body.appendChild($table); //bodyํ๊ทธ์ tableํ๊ทธ,divํ๊ทธ๋ฅผ ๋ฃ๋๋ค.
body.appendChild($result);
</script>
<!--์ฝ๋์ถ์ฒ (๋์) Let's Get IT ์๋ฐ์คํฌ๋ฆฝํธ ํ๋ก๊ทธ๋๋ฐ-->
์น์๋ฅผ ํ๋จํ๋ ๋ฐฉ๋ฒ์ ๋ด๊ฐ ์ง๊ธ ํด๋ฆญํ ๊ฐ์ ๊ธฐ์ค์ผ๋ก ๊ฐ๋ก์ค, ์ธ๋ก์ค, ๋๊ฐ์ ์ผ๋ก 3์นธ์ด ๊ฐ์์ง ํ์ธํ๋ฉด ๋๋ค.
๐ค ๋ช ๋ฒ์งธ ์ค, ๋ช ๋ฒ์งธ ์นธ์ธ์ง ์์๋ด๊ธฐ
๋ด๊ฐ ์ง๊ธ ํด๋ฆญํ ์นธ์ด ๋ช ๋ฒ์งธ ์ค, ๋ช ๋ฒ์งธ ์นธ์ธ์ง๋ ๋ค์ ์ฝ๋๋ก ์ ์ ์๋ค.
//์ง๊ธ ํด๋ฆญํ ์นธ์ด ๋ช ๋ฒ์งธ ์ค, ๋ช ๋ฒ์ฌ ์นธ์ธ์ง ์์๋ด๋ ์ฝ๋.
let rowIndex;
let cellIndex;
//์ด์ค ๋ฐ๋ณต๋ฌธ
//index ( ๋ฐฐ์ด์ ๋ช๋ฒ์งธ์ธ์ง ์๋ ค์ฃผ๊ฒ ๋ค )
rows.forEach((row, ri) => {
row.forEach((cell, ci) => {
if (cell === target) {
rowIndex = ri; //๋ช ๋ฒ์งธ ์ค.
cellIndex = ci; //๋ช ๋ฒ์งธ ์นธ.
}
});
});
//์ฝ๋์ถ์ฒ (๋์) Let's Get IT ์๋ฐ์คํฌ๋ฆฝํธ ํ๋ก๊ทธ๋๋ฐ์์๋ธ ์นธ์ ๊ธฐ๋ฐ์ผ๋ก ๊ฐ๋ก์ค, ์ธ๋ก์ค, ๋๊ฐ์ ์ ๊ฐ์ ๋ชจ์์ด ์๋์ง ๊ฒ์ฌํ๊ณ , ๊ฐ์ ๊ฒ์ด ์๋ค๋ฉด hasWinner ๋ฅผ true ๋ก ๋ง๋ ๋ค.
๋ช ๋ฒ์งธ ์ค, ๋ช ๋ฒ์งธ ์นธ์ธ์ง ์์๋ด๋ ๋ ์ฌ์ด ๋ฐฉ๋ฒ์ด ์๋ค. ์์ ์ฝ๋๋ฅผ ๋ค์ ์ฝ๋๋ก ๊ต์ฒดํ๋ค.
const rowIndex = target.parentNode.rowIndex;
const cellIndex = target.cellIndex;
//์ฝ๋์ถ์ฒ (๋์) Let's Get IT ์๋ฐ์คํฌ๋ฆฝํธ ํ๋ก๊ทธ๋๋ฐparentNode ๋ ํ์ฌ ํ๊ทธ์ ๋ถ๋ชจ ํ๊ทธ๋ฅผ ์ ํํ๋ ์์ฑ์ด๋ค.
target ์ด td ํ๊ทธ์ด๋ target.parentNode ๋ tr ํ๊ทธ๊ฐ ๋๋ค.
tr ํ๊ทธ ( target.parentNode ) ๋ rowIndex ๋ผ๋ ์์ฑ์ ์ ๊ณตํ๊ณ td ํ๊ทธ ( target ) ๋ cellIndex ๋ผ๋ ์์ฑ์ ์ ๊ณตํ๋ค.
์ด ์ฝ๋๋ก ์ค ์์ ์นธ ์๋ฅผ ์์๋ผ ์ ์๋ค.
parentNode ์ ๋ฐ๋ ๊ฐ๋ ์ผ๋ก children ์ด๋ผ๋ ์์ฑ์ด ์๋ค.
์์ ํ๊ทธ๋ฅผ ์ป์ด ์ค๋ ์์ฑ์ด๋ค. ๋ถ๋ชจ ํ๊ทธ๋ ํ๋์ด์ง๋ง, ์์ ํ๊ทธ๋ ์ฌ๋ฌ ๊ฐ์ด๋ฏ๋ก ๋ฐฐ์ด๊ณผ ๊ฐ์ ๋ชจ์์ ๋ค๋ค.
children ์ ๋ฐฐ์ด์ด ์๋๊ณ , ๋ฐฐ์ด์ฒ๋ผ ์๊ธด ๊ฐ์ฒด์ด๋ค.
ex ) { 0 : td, 1 : td, 2 : td, length : 3 } ๊ณผ ๊ฐ์ ๋ชจ์์ ๊ฐ์ง ๊ฐ์ฒด์ด๋ค.
children[ 0 ] , children[ 1 ] , children.length ์ฒ๋ผ ์ฌ์ฉํ ์ ์์ด์ ๋ฐฐ์ด๋ก ์ฐฉ๊ฐํ ์ ์๋ค.
์ด๋ฐ ๊ฐ์ฒด๋ฅผ ์ ์ฌ ๋ฐฐ์ด ๊ฐ์ฒด ( array-like object ) ๋ผ๊ณ ํ๋ค.
์ ์ฌ ๋ฐฐ์ด ๊ฐ์ฒด์ indexOf ๋ฉ์๋๋ฅผ ์ฌ์ฉํ๋ ค๋ฉด?
๋ฐ๋ก ์ฌ์ฉํ๋ฉด ์๋๊ณ Array.from ๋ฉ์๋๋ฅด ์ ์ฌ ๋ฐฐ์ด ๊ฐ์ฒด๋ฅผ ์ง์ง ๋ฐฐ์ด๋ก ๋ฐ๊ฟ์ผ ํ๋ค.
โ childeren ์ indexOf ๋ฉ์๋๋ฅผ ๋ฐ๋ก ์ฌ์ฉํ๋ ๊ฒฝ์ฐ
const checkWinner = (target) => { //td ๋ฅผ ํด๋ฆญํ๋ฉด,
//1๋ฒ์งธ ๋ฐฉ๋ฒ.
//์ง๊ธ ํด๋ฆญํ ์นธ์ด ๋ช ๋ฒ์งธ ์ค, ๋ช ๋ฒ์ฌ ์นธ์ธ์ง ์์๋ด๋ ์ฝ๋.
// let rowIndex;
// let cellIndex;
//์ด์ค ๋ฐ๋ณต๋ฌธ
//index ( ๋ฐฐ์ด์ ๋ช๋ฒ์งธ์ธ์ง ์๋ ค์ฃผ๊ฒ ๋ค )
// rows.forEach((row, ri) => {
// row.forEach((cell, ci) => {
// if (cell === target) {
// rowIndex = ri; //๋ช ๋ฒ์งธ ์ค.
// cellIndex = ci; //๋ช ๋ฒ์งธ ์นธ.
// }
// });
// });
//2๋ฒ์งธ ๋ฐฉ๋ฒ.
const rowIndex = target.parentNode.rowIndex;
const cellIndex = target.cellIndex;
console.log(target.parentNode.children);
console.log(target.parentNode.children.indexOf(target));
//3์นธ ๋ค ์ฑ์์ก๋?
//๊ฒ์ฌํ ๋๋ ํญ์ false ๋ก ํ๊ณ , ์น์๊ฐ ์์ ๋ true ๋ก ๋ฐ๊พผ๋ค.
let hasWinner = false;
...
};
//์ฝ๋์ถ์ฒ (๋์) Let's Get IT ์๋ฐ์คํฌ๋ฆฝํธ ํ๋ก๊ทธ๋๋ฐ
โ childeren ์ Array.from ๋ฉ์๋๋ฅผ ์ฌ์ฉํ ํ indexOf ๋ฉ์๋๋ฅผ ์ฌ์ฉํ๋ ๊ฒฝ์ฐ
const checkWinner = (target) => { //td ๋ฅผ ํด๋ฆญํ๋ฉด,
//1๋ฒ์งธ ๋ฐฉ๋ฒ.
//์ง๊ธ ํด๋ฆญํ ์นธ์ด ๋ช ๋ฒ์งธ ์ค, ๋ช ๋ฒ์ฌ ์นธ์ธ์ง ์์๋ด๋ ์ฝ๋.
// let rowIndex;
// let cellIndex;
//์ด์ค ๋ฐ๋ณต๋ฌธ
//index ( ๋ฐฐ์ด์ ๋ช๋ฒ์งธ์ธ์ง ์๋ ค์ฃผ๊ฒ ๋ค )
// rows.forEach((row, ri) => {
// row.forEach((cell, ci) => {
// if (cell === target) {
// rowIndex = ri; //๋ช ๋ฒ์งธ ์ค.
// cellIndex = ci; //๋ช ๋ฒ์งธ ์นธ.
// }
// });
// });
//2๋ฒ์งธ ๋ฐฉ๋ฒ.
const rowIndex = target.parentNode.rowIndex;
const cellIndex = target.cellIndex;
console.log(Array.from(target.parentNode.children));
console.log(Array.from(target.parentNode.children).indexOf(target));
//3์นธ ๋ค ์ฑ์์ก๋?
//๊ฒ์ฌํ ๋๋ ํญ์ false ๋ก ํ๊ณ , ์น์๊ฐ ์์ ๋ true ๋ก ๋ฐ๊พผ๋ค.
let hasWinner = false;
...
};
//์ฝ๋์ถ์ฒ (๋์) Let's Get IT ์๋ฐ์คํฌ๋ฆฝํธ ํ๋ก๊ทธ๋๋ฐ
์์ ๊ฐ์ด Array.from ๋ฉ์๋๋ฅผ ์ ์ฉํ๋ฉด ์ ์ฌ ๋ฐฐ์ด ๊ฐ์ฒด๊ฐ ๋ฐฐ์ด์ด ๋์ด indexOf ๊ฐ์ ๋ฐฐ์ด์ ๋ฉ์๋๋ฅผ ์ฌ์ฉํ ์ ์๋ค.
๐ค ์น์๊ฐ ์๋ ๊ฒฝ์ฐ์ ์ฝ๋ ์์ฑํ๊ธฐ
์น์๊ฐ ์๋ ๊ฒฝ์ฐ์๋ ๋ฌด์น๋ถ์ธ์ง ๊ฒ์ฌ๋ฅผ ํ๋ค. 9์นธ์ ๋ชจ๋ textContent ๊ฐ ๋ค์ด์์ผ๋ฉด ๋ฌด์น๋ถ์ด๋ค.
//O, X ํ๋จ ํจ์.
const callback = (event) => {
if (event.target.textContent !== '') { //์นธ์ด ์ด๋ฏธ ์ฑ์์ ธ ์๋๊ฐ?
console.log('๋น ์นธ์ด ์๋๋ค.');
return;
}
//๋น ์นธ์ด๋ฉด
console.log('๋น ์นธ์ด๋ค.');
event.target.textContent = turn;
const hasWinner = checkWinner(event.target); //callback ํจ์์์ checkWinner ํจ์๋ฅผ event.target๊ณผ ํจ๊ป ํธ์ถ.
//์น์๊ฐ ์์ผ๋ฉด
if (hasWinner){
$result.textContent = `${turn}๋์ด ์น๋ฆฌ!`;
$table.removeEventListener('click',callback);
return;
}
//์น์๊ฐ ์์ผ๋ฉด
let draw = true;
rows.forEach((row)=>{
row.forEach((cell)=>{
if(!cell.textContent){
draw = false;
}
});
});
if (draw){
$result.textContent = `๋ฌด์น๋ถ`;
return;
}
//์น์๊ฐ ์์ผ๋ฉด
//์กฐ๊ฑด๋ถ ์ฐ์ฐ์ ์ฌ์ฉ.
//turn ์ด O์ด๋ฉด X๋ก, X๋ฉด O์ผ๋ก ๋ฐ๊พผ๋ค.
turn = turn === 'X' ? 'O' : 'X';
};
//์ฝ๋์ถ์ฒ (๋์) Let's Get IT ์๋ฐ์คํฌ๋ฆฝํธ ํ๋ก๊ทธ๋๋ฐ
์ด์ฐจ์ ๋ฐฐ์ด์ ์ฌ์ฉํ ๋ ์ด์ฒ๋ผ ๋ฐ๋ณต๋ฌธ ( forEach ) ์ ๋ ๋ฒ ์ค์ฒฉํด์ ์ด๋ค.
์ด์ฐจ์ ๋ฐฐ์ด : ๋ฐฐ์ด ์์ ๋ฐฐ์ด์ด ๋ค์ด ์๋ ๊ตฌ์กฐ์ด๊ธฐ ๋๋ฌธ์ด๋ค.
๋ชจ๋ ์นธ์ด ์ฑ์์ ธ ์๋์ง ํ๋จํ ๋๋ ๊ธฐ๋ณธ์ ์ผ๋ก draw๋ฅผ true๋ก ๋๊ณ , ํ ์นธ์ด๋ผ๋ ๋น ์นธ์ด ์๋ค๋ฉด draw๋ฅผ false๋ก ๋ฐ๊พผ๋ค.
์์ ์ฝ๋์ ๊ฐ์ด ๋ฐ๋ณต๋ฌธ์ ์ฌ์ฉํด ๋ชจ๋ ์นธ์ textContent ๊ฐ ๋ค์ด ์๋์ง ๊ฒ์ฌํ ์๋ ์์ง๋ง, ๋ฐฐ์ด์ ๋ฉ์๋๋ฅผ ์ฌ์ฉํ๋ฉด ๋ ๊ฐ๋จํ๊ฒ ๊ฒ์ฌํ ์ ์๋ค.
//O, X ํ๋จ ํจ์.
const callback = (event) => {
if (event.target.textContent !== '') { //์นธ์ด ์ด๋ฏธ ์ฑ์์ ธ ์๋๊ฐ?
console.log('๋น ์นธ์ด ์๋๋ค.');
return;
}
//๋น ์นธ์ด๋ฉด
console.log('๋น ์นธ์ด๋ค.');
event.target.textContent = turn;
const hasWinner = checkWinner(event.target); //callback ํจ์์์ checkWinner ํจ์๋ฅผ event.target๊ณผ ํจ๊ป ํธ์ถ.
//์น์๊ฐ ์์ผ๋ฉด
if (hasWinner){
$result.textContent = `${turn}๋์ด ์น๋ฆฌ!`;
$table.removeEventListener('click',callback);
return;
}
//์น์๊ฐ ์์ผ๋ฉด
//1๋ฒ์งธ ๋ฐฉ๋ฒ. ( forEach ์ฌ์ฉ )
// let draw = true;
// rows.forEach((row)=>{
// row.forEach((cell)=>{
// if(!cell.textContent){
// draw = false;
// }
// });
// });
//2๋ฒ์งธ ์ฌ์ฉ. ( ๋ฐฐ์ด์ ๋ฉ์๋ ์ฌ์ฉ )
const draw = rows.flat().every((cell) => cell.textContent);
if (draw){
$result.textContent = `๋ฌด์น๋ถ`;
return;
}
//์น์๊ฐ ์์ผ๋ฉด
//์กฐ๊ฑด๋ถ ์ฐ์ฐ์ ์ฌ์ฉ.
//turn ์ด O์ด๋ฉด X๋ก, X๋ฉด O์ผ๋ก ๋ฐ๊พผ๋ค.
turn = turn === 'X' ? 'O' : 'X';
};
//์ฝ๋์ถ์ฒ (๋์) Let's Get IT ์๋ฐ์คํฌ๋ฆฝํธ ํ๋ก๊ทธ๋๋ฐ
๐ซ flat ๋ฉ์๋
| flat ๋ฉ์๋ | ๋ฐฐ์ด์ ์ฐจ์์ ๋ฎ์ถ๋ ๋ฉ์๋ . n์ฐจ์ ๋ฐฐ์ด์ n-1์ฐจ์ ๋ฐฐ์ด๋ก ๋ฎ์ถ๋ค. ex ) ์ด์ฐจ์ ๋ฐฐ์ด์ด๋ผ๋ฉด ์ผ์ฐจ์ ๋ฐฐ์ด๋ก ๋ฐ๋๋ค. |
์ผ์ฐจ์ ๋ฐฐ์ด์ flat ์ ์ ์ฉํด๋ ๊ทธ๋๋ก ์ผ์ฐจ์ ๋ฐฐ์ด๋ก ๋จ์ ์๋๋ค.
์ฐจ์์ ๋ฎ์ถ๋ ๊ฒ ๋ฐฐ์ด์ ํํ~ํ๊ฒ ๋ง๋๋ ๊ฒ์ฒ๋ผ ๋ณด์ฌ์ flat ์ด๋ผ๋ ์ด๋ฆ์ด ๋ถ์๋ค.
const array = [[1, 2, 3], [4, 5, 6], [7, 8, 9]];
array.flat(); // [1, 2, 3, 4, 5, 6, 7, 8, 9]
const array2 = [1, 2, 3, [[4, 5, 6], [7, 8, 9]]];
array2.flat(); // [1, 2, 3, [4, 5, 6], [7, 8, 9]]
//์ฝ๋์ถ์ฒ (๋์) Let's Get IT ์๋ฐ์คํฌ๋ฆฝํธ ํ๋ก๊ทธ๋๋ฐ๐ซ every ๋ฉ์๋
| every ๋ฉ์๋ | ๋ฐ๋ณต๋ฌธ์ ์ผ์ข
. ์์๋ฅผ ์ํํ๋ฉด์ ์กฐ๊ฑด ํจ์์ ๋ฐํ๊ฐ์ด ๋ชจ๋ true ์ด๋ฉด true ๋ฅผ ๋ฐํํ๋ค. ์กฐ๊ฑด ํจ์์ ๋ฐํ๊ฐ์ด ํ๋๋ผ๋ false ์ด๋ฉด false ๋ฅผ ๋ฐํํ๋ค. |
โ ํ์
๋ฐฐ์ด.every(์กฐ๊ฑดํจ์);every ๋ฉ์๋๋ ์ผ๋ฐ ๋ฐ๋ณต๋ฌธ๋ณด๋ค ํจ์จ์ ์ด๋ค.
์์?
| ์ผ๋ฐ ๋ฐ๋ณต๋ฌธ | ์ง์ ๋ฉ์ถ์ง ์์ผ๋ฉด ๋๊น์ง ํ์. |
| every ๋ฉ์๋ | ์กฐ๊ฑด์ ๋ง์กฑํ์ง ์๋ ์์๋ฅผ ํ๋๋ผ๋ ์ฐพ์ผ๋ฉด ๋ฐ๋ก ๋ฐ๋ณต์ ์ค๋จ. |
| some ๋ฉ์๋ | ์กฐ๊ฑด์ ๋ง์กฑํ๋ ์์๋ฅผ ํ๋๋ผ๋ ์ฐพ์ผ๋ฉด ๋ฐ๋ก ๋ฐ๋ณต์ ์ค๋จ. |
Quiz!
๋ค์ ๋ฐฐ์ด์์ ํ ์นธ์ด๋ผ๋ null ์ด ๋ค์ด ์์ผ๋ฉด true ๋ฅผ ๋ฐํํ๊ณ , ์๋๋ฉด false ๋ฅผ ์ถ๋ ฅํ๋ ์ฝ๋๋ฅผ ์์ฑํ๋ผ.
const array = [1, 'hello', null, undefined, false]; //์ฝ๋์ถ์ฒ (๋์) Let's Get IT ์๋ฐ์คํฌ๋ฆฝํธ ํ๋ก๊ทธ๋๋ฐ๋ต
๋ฐ๋ณต๋ฌธ์ ์ฌ์ฉํด๋ ๋๊ณ , ๋ฐฐ์ด์ ๋ฉ์๋๋ฅผ ์ฌ์ฉํด๋ ๋๋ค.//1๋ฒ์งธ ๋ฐฉ๋ฒ. ( ๋ฐ๋ณต๋ฌธ ์ฌ์ฉ) let some = false; array.forEach((value) => { if (value === null ) { some = true; } }); console.log(some); //true //2๋ฒ์งธ ๋ฐฉ๋ฒ. ( ๋ฐฐ์ด์ ๋ฉ์๋ ์ฌ์ฉ ) const some = array.some((value) => value === null ); console.log(some); //true //์ฝ๋์ถ์ฒ (๋์) Let's Get IT ์๋ฐ์คํฌ๋ฆฝํธ ํ๋ก๊ทธ๋๋ฐ
์ฌ๊ธฐ์์๋ some ๋ฉ์๋๋ฅผ ์ฌ์ฉํ์ฌ ๋ฐ์ดํฐ๊ฐ ๋ค์ด ์๋์ง ํ๋จํ์๋ค.
๐ ์ ์ฒด ์ฝ๋
<!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>
<style>
table {
border-collapse: collapse;
}
td {
border: 1px solid black;
width: 40px;
height: 40px;
text-align: center;
}
</style>
</head>
<body>
</body>
<script>
const { body } = document;
const $table = document.createElement('table');
const $result = document.createElement('div'); //๊ฒฐ๊ณผ์ฐฝ
const rows = []; //์ค ๋ด๋นํ๋ ๋ฐฐ์ด ์์ฑ.
let turn = 'O';
//์น์ ํ๋จ ํจ์. ( ๋ด๊ฐ ์ง๊ธ ํด๋ฆญํ ์นธ์ ๊ธฐ์ค์ผ๋ก ๊ฐ๋ก์ค,์ธ๋ก์ค,๋๊ฐ์ ์ผ๋ก 3์นธ์ด ๊ฐ์์ง ํ์ธ )
//{
// [td,td,td]
// [td,td,td]
// [td,td,td]
//}
const checkWinner = (target) => { //td ๋ฅผ ํด๋ฆญํ๋ฉด,
//1๋ฒ์งธ ๋ฐฉ๋ฒ.
//์ง๊ธ ํด๋ฆญํ ์นธ์ด ๋ช ๋ฒ์งธ ์ค, ๋ช ๋ฒ์ฌ ์นธ์ธ์ง ์์๋ด๋ ์ฝ๋.
// let rowIndex;
// let cellIndex;
//์ด์ค ๋ฐ๋ณต๋ฌธ
//index ( ๋ฐฐ์ด์ ๋ช๋ฒ์งธ์ธ์ง ์๋ ค์ฃผ๊ฒ ๋ค )
// rows.forEach((row, ri) => {
// row.forEach((cell, ci) => {
// if (cell === target) {
// rowIndex = ri; //๋ช ๋ฒ์งธ ์ค.
// cellIndex = ci; //๋ช ๋ฒ์งธ ์นธ.
// }
// });
// });
//2๋ฒ์งธ ๋ฐฉ๋ฒ.
const rowIndex = target.parentNode.rowIndex;
const cellIndex = target.cellIndex;
console.log(Array.from(target.parentNode.children));
console.log(Array.from(target.parentNode.children).indexOf(target));
//3์นธ ๋ค ์ฑ์์ก๋?
//๊ฒ์ฌํ ๋๋ ํญ์ false ๋ก ํ๊ณ , ์น์๊ฐ ์์ ๋ true ๋ก ๋ฐ๊พผ๋ค.
let hasWinner = false;
//๊ฐ๋ก์ค ๊ฒ์ฌ
if (
rows[rowIndex][0].textContent === turn &&
rows[rowIndex][1].textContent === turn &&
rows[rowIndex][2].textContent === turn
) {
hasWinner = true;
}
//์ธ๋ก์ค ๊ฒ์ฌ
if (
rows[0][cellIndex].textContent === turn &&
rows[1][cellIndex].textContent === turn &&
rows[2][cellIndex].textContent === turn
) {
hasWinner = true;
}
//๋๊ฐ์ ๊ฒ์ฌ
if (
rows[0][0].textContent === turn &&
rows[1][1].textContent === turn &&
rows[2][2].textContent === turn
) {
hasWinner = true;
}
if (
rows[0][2].textContent === turn &&
rows[1][1].textContent === turn &&
rows[2][0].textContent === turn
) {
hasWinner = true;
}
return hasWinner;
};
//O, X ํ๋จ ํจ์.
const callback = (event) => {
if (event.target.textContent !== '') { //์นธ์ด ์ด๋ฏธ ์ฑ์์ ธ ์๋๊ฐ?
console.log('๋น ์นธ์ด ์๋๋ค.');
return;
}
//๋น ์นธ์ด๋ฉด
console.log('๋น ์นธ์ด๋ค.');
event.target.textContent = turn;
const hasWinner = checkWinner(event.target); //callback ํจ์์์ checkWinner ํจ์๋ฅผ event.target๊ณผ ํจ๊ป ํธ์ถ.
//์น์๊ฐ ์์ผ๋ฉด
if (hasWinner){
$result.textContent = `${turn}๋์ด ์น๋ฆฌ!`;
$table.removeEventListener('click',callback);
return;
}
//์น์๊ฐ ์์ผ๋ฉด
//1๋ฒ์งธ ๋ฐฉ๋ฒ. ( forEach ์ฌ์ฉ )
// let draw = true;
// rows.forEach((row)=>{
// row.forEach((cell)=>{
// if(!cell.textContent){
// draw = false;
// }
// });
// });
//2๋ฒ์งธ ์ฌ์ฉ. ( ๋ฐฐ์ด์ ๋ฉ์๋ ์ฌ์ฉ )
const draw = rows.flat().every((cell) => cell.textContent);
if (draw){
$result.textContent = `๋ฌด์น๋ถ`;
return;
}
//์น์๊ฐ ์์ผ๋ฉด
//์กฐ๊ฑด๋ถ ์ฐ์ฐ์ ์ฌ์ฉ.
//turn ์ด O์ด๋ฉด X๋ก, X๋ฉด O์ผ๋ก ๋ฐ๊พผ๋ค.
turn = turn === 'X' ? 'O' : 'X';
};
for (let i = 1; i <= 3; i++) {
const $tr = document.createElement('tr');
const cells = []; //๋ฐฐ์ด ์์ฑ.
for (let j = 1; j <= 3; j++) {
const $td = document.createElement('td');
//9๊ฐ์ tdํ๊ทธ์ ์ด๋ฒคํธ๋ฆฌ์ค๋๊ฐ ๋ฌ๋ฆผ.
//$td.addEventListener('click',callback); //tdํ๊ทธ์ ์ด๋ฒคํธ๋ฆฌ์ค๋ ๋ฌ๊ณ , ํจ์ ์คํ.
cells.push($td);
$tr.appendChild($td); //trํ๊ทธ ์์ tdํ๊ทธ๋ฅผ ๋ฃ๊ณ ,
}
rows.push(cells);
$table.appendChild($tr); //tableํ๊ทธ ์์ trํ๊ทธ๋ฅผ ๋ฃ๋๋ค.
$table.addEventListener('click', callback); //์ด๋ฒคํธ๋ฆฌ์ค๋ ํ๋ฒ์ ๋ฌ๊ณ , ํจ์ ์คํ
}
body.appendChild($table); //bodyํ๊ทธ์ tableํ๊ทธ,divํ๊ทธ๋ฅผ ๋ฃ๋๋ค.
body.appendChild($result);
</script>
</html>
<!--์ฝ๋์ถ์ฒ (๋์) Let's Get IT ์๋ฐ์คํฌ๋ฆฝํธ ํ๋ก๊ทธ๋๋ฐ-->๐ ์ปดํจํฐ ์ฐจ๋ก ๊ตฌํํ๊ธฐ
์ง๊ธ๊น์ง๋ ํผ์์ O ์ X ์ ์ญํ ์ ๋ฒ๊ฐ์ ํ๋ค.
์ด์ X์ ์ญํ ์ ์ปดํจํฐ๊ฐ ํ๋๋ก ๋ง๋ค์ด ๋ณด์. ์ปดํจํฐ๊ฐ ๋น์ด ์๋ ์นธ์ ๋ฌด์์๋ก X๋ฅผ ์ ๋ ฅํ๋ ๊ฒ์ด๋ค.
์์๋๋ฅผ ์ปดํจํฐ ์ฐจ๋ก๋ฅผ ๋ฃ์ด์ ์์ ํ๋ค.
//O, X ํ๋จ ํจ์.
const callback = (event) => {
if (event.target.textContent !== '') { //์นธ์ด ์ด๋ฏธ ์ฑ์์ ธ ์๋๊ฐ?
console.log('๋น ์นธ์ด ์๋๋ค.');
return;
}
//๋น ์นธ์ด๋ฉด
console.log('๋น ์นธ์ด๋ค.');
event.target.textContent = turn;
const hasWinner = checkWinner(event.target); //callback ํจ์์์ checkWinner ํจ์๋ฅผ event.target๊ณผ ํจ๊ป ํธ์ถ.
//์น์๊ฐ ์์ผ๋ฉด
if (hasWinner){
$result.textContent = `${turn}๋์ด ์น๋ฆฌ!`;
$table.removeEventListener('click',callback);
return;
}
//์น์๊ฐ ์์ผ๋ฉด
//1๋ฒ์งธ ๋ฐฉ๋ฒ. ( forEach ์ฌ์ฉ )
// let draw = true;
// rows.forEach((row)=>{
// row.forEach((cell)=>{
// if(!cell.textContent){
// draw = false;
// }
// });
// });
//2๋ฒ์งธ ์ฌ์ฉ. ( ๋ฐฐ์ด์ ๋ฉ์๋ ์ฌ์ฉ )
const draw = rows.flat().every((cell) => cell.textContent);
if (draw){
$result.textContent = `๋ฌด์น๋ถ`;
return;
}
//์กฐ๊ฑด๋ถ ์ฐ์ฐ์ ์ฌ์ฉ.
//turn ์ด O์ด๋ฉด X๋ก, X๋ฉด O์ผ๋ก ๋ฐ๊พผ๋ค.
turn = turn === 'X' ? 'O' : 'X';
//์ปดํจํฐ ์ฐจ๋ก ์ถ๊ฐ.
if (turn === 'X'){ // X์ ์ฐจ๋ก๋ฉด
//filter ๋ฉ์๋๋ก ์กฐ๊ฑด์ ํด๋นํ๋ ์ ๋ค์ ๊ฑธ๋ฌ์ค๋ค. ( 1์ฐจ์ ๋ฐฐ์ด๋ง ๋์ row.flat์ ์ฌ์ฉํ๋ค. )
const emptyCells = rows.flat().filter((v) => !v.textContent); //td ์ค์ ๋น์นธ์ธ ์ ๋ค ๊ณจ๋ผ๋ผ.
//์ด์ emptyCells ์์๋ ๋น์นธ์ธ ์ ๋ค์ด ์ฑ์์ ธ ์๋ค.
const randomCell = emptyCells[Math.floor(Math.random()*emptyCells.length)]; //์ธ๋ฑ์ค ์์๋ด๊ธฐ
randomCell.textContent = 'X';
const hasWinner = checkWinner(randomCell);
//์น์๊ฐ ์์ผ๋ฉด
if (hasWinner){
$result.textContent = `${turn}๋์ด ์น๋ฆฌ!`;
return;
}
//์น์๊ฐ ์์ผ๋ฉด
const draw = rows.flat().every((cell)=>cell.textContent);
if (draw){
$result.textContent=`๋ฌด์น๋ถ`;
return;
}
//turn ๋ฐ๊ฟ์ฃผ๊ธฐ.
turn = turn === 'X' ? 'O' : 'X';
}
};
//์ฝ๋์ถ์ฒ (๋์) Let's Get IT ์๋ฐ์คํฌ๋ฆฝํธ ํ๋ก๊ทธ๋๋ฐcallback ํจ์๋ฅผ ์์ ํ๋ค.
๐ซ filter ๋ฉ์๋
emptyCells ๋ณ์์๋ ๋น์ด ์๋ ์นธ๋ง ๋ค์ด ์๋ค. ์ด๋ ๋ฐฐ์ด์ filter ๋ฉ์๋๋ฅผ ์ฌ์ฉํ๋๋ฐ, ์ด ๋ฉ์๋๋ ์์๋ฅผ ์ํํ๋ฉฐ ์ธ์๋ก ๋ฃ์ ํจ์์ ๋ฐํ๊ฐ์ด true ๊ฐ ๋๋ ์์๋ง ๊ฑธ๋ฌ๋ธ๋ค.
| filter ๋ฉ์๋ | ์์๋ฅผ ์ํํ๋ฉฐ ์ธ์๋ก ๋ฃ์ ํจ์์ ๋ฐํ๊ฐ์ด true ๊ฐ ๋๋ ์์๋ง ๊ฑธ๋ฌ๋ธ๋ค. |
[1, 2, 3, 4, 5].filter((V) => v % 2 === 0 ); //[2,4]
// ์์๋ฅผ 2๋ก ๋๋๋ฉด 0์ผ๋ก ๋จ์ด์ง๋?
// ์ด. ๋จ์ด์ ธ~~~ [2,4]
// 1 % 2 === 0, false
// 2 % 2 === 0, true
// 3 % 2 === 0, false
// 4 % 2 === 0, true
// 5 % 2 === 0, false
//์ฝ๋์ถ์ฒ (๋์) Let's Get IT ์๋ฐ์คํฌ๋ฆฝํธ ํ๋ก๊ทธ๋๋ฐ๐ค ์ฝ๋ ์ค๋ณต ์ ๊ฑฐํ๊ธฐ
์น์๋ฅผ ํ๋จํ๋ ๋ถ๋ถ, ๋ฌด์น๋ถ๋ฅผ ํ๋จํ๋ ๋ถ๋ถ, ์ฐจ๋ก๋ฅผ ๋๊ธฐ๋ ๋ถ๋ถ์ด ์ค๋ณต๋๋ฏ๋ก ์ด ๋ถ๋ถ์ ํจ์๋ก ๋นผ์.
<script>
//O, X ํ๋จ ํจ์.
const callback = (event) => {
if (event.target.textContent !== '') { //์นธ์ด ์ด๋ฏธ ์ฑ์์ ธ ์๋๊ฐ?
console.log('๋น ์นธ์ด ์๋๋ค.');
return;
}
//๋น ์นธ์ด๋ฉด
console.log('๋น ์นธ์ด๋ค.');
event.target.textContent = turn;
const hasWinner = checkWinner(event.target); //callback ํจ์์์ checkWinner ํจ์๋ฅผ event.target๊ณผ ํจ๊ป ํธ์ถ.
/////////////////////////////////////////////////////์ค๋ณต๋๋ ์ฝ๋
//์น์๊ฐ ์์ผ๋ฉด
// if (hasWinner){
// $result.textContent = `${turn}๋์ด ์น๋ฆฌ!`;
// $table.removeEventListener('click',callback);
// return;
// }
// //์น์๊ฐ ์์ผ๋ฉด
// //1๋ฒ์งธ ๋ฐฉ๋ฒ. ( forEach ์ฌ์ฉ )
// // let draw = true;
// // rows.forEach((row)=>{
// // row.forEach((cell)=>{
// // if(!cell.textContent){
// // draw = false;
// // }
// // });
// // });
// //2๋ฒ์งธ ์ฌ์ฉ. ( ๋ฐฐ์ด์ ๋ฉ์๋ ์ฌ์ฉ )
// const draw = rows.flat().every((cell) => cell.textContent);
// if (draw){
// $result.textContent = `๋ฌด์น๋ถ`;
// return;
// }
// //์กฐ๊ฑด๋ถ ์ฐ์ฐ์ ์ฌ์ฉ.
// //turn ์ด O์ด๋ฉด X๋ก, X๋ฉด O์ผ๋ก ๋ฐ๊พผ๋ค.
// turn = turn === 'X' ? 'O' : 'X';
//์ปดํจํฐ ์ฐจ๋ก ์ถ๊ฐ.
if (turn === 'X'){ // X์ ์ฐจ๋ก๋ฉด
//filter ๋ฉ์๋๋ก ์กฐ๊ฑด์ ํด๋นํ๋ ์ ๋ค์ ๊ฑธ๋ฌ์ค๋ค. ( 1์ฐจ์ ๋ฐฐ์ด๋ง ๋์ row.flat์ ์ฌ์ฉํ๋ค. )
const emptyCells = rows.flat().filter((v) => !v.textContent); //td ์ค์ ๋น์นธ์ธ ์ ๋ค ๊ณจ๋ผ๋ผ.
//์ด์ emptyCells ์์๋ ๋น์นธ์ธ ์ ๋ค์ด ์ฑ์์ ธ ์๋ค.
const randomCell = emptyCells[Math.floor(Math.random()*emptyCells.length)]; //์ธ๋ฑ์ค ์์๋ด๊ธฐ
randomCell.textContent = 'X';
const hasWinner = checkWinner(randomCell);
/////////////////////////////////////////////////////์ค๋ณต๋๋ ์ฝ๋
//์น์๊ฐ ์์ผ๋ฉด
// if (hasWinner){
// $result.textContent = `${turn}๋์ด ์น๋ฆฌ!`;
// return;
// }
// //์น์๊ฐ ์์ผ๋ฉด
// const draw = rows.flat().every((cell)=>cell.textContent);
// if (draw){
// $result.textContent=`๋ฌด์น๋ถ`;
// return;
// }
// //turn ๋ฐ๊ฟ์ฃผ๊ธฐ.
// turn = turn === 'X' ? 'O' : 'X';
}
};
</script>
<!--์ฝ๋์ถ์ฒ (๋์) Let's Get IT ์๋ฐ์คํฌ๋ฆฝํธ ํ๋ก๊ทธ๋๋ฐ--><script>
//์น์๋ฅผ ํ๋จ, ๋ฌด์น๋ถ๋ฅผ ํ๋จ, ์ฐจ๋ก๋ฅผ ๋๊ธฐ๋ ๋ถ๋ถ
const checkWinnerAndDraw = (target) => {
const hasWinner = checkWinner(target);
//์น์๊ฐ ์์ผ๋ฉด
if (hasWinner){
$result.textContent = `${turn}๋์ด ์น๋ฆฌ!`;
$table.removeEventListener('click',callback);
return;
}
//์น์๊ฐ ์์ผ๋ฉด
//1๋ฒ์งธ ๋ฐฉ๋ฒ. ( forEach ์ฌ์ฉ )
// let draw = true;
// rows.forEach((row)=>{
// row.forEach((cell)=>{
// if(!cell.textContent){
// draw = false;
// }
// });
// });
//2๋ฒ์งธ ๋ฐฉ๋ฒ. ( ๋ฐฐ์ด์ ๋ฉ์๋ ์ฌ์ฉ )
const draw = rows.flat().every((cell) => cell.textContent);
if (draw){
$result.textContent = `๋ฌด์น๋ถ`;
return;
}
//์กฐ๊ฑด๋ถ ์ฐ์ฐ์ ์ฌ์ฉ.
//turn ์ด O์ด๋ฉด X๋ก, X๋ฉด O์ผ๋ก ๋ฐ๊พผ๋ค.
turn = turn === 'X' ? 'O' : 'X';
};
//O, X ํ๋จ ํจ์.
const callback = (event) => {
if (event.target.textContent !== '') { //์นธ์ด ์ด๋ฏธ ์ฑ์์ ธ ์๋๊ฐ?
console.log('๋น ์นธ์ด ์๋๋ค.');
return;
}
//๋น ์นธ์ด๋ฉด
console.log('๋น ์นธ์ด๋ค.');
event.target.textContent = turn;
checkWinnerAndDraw(event.target); //callback ํจ์์์ checkWinnerAndDraw ํจ์๋ฅผ event.target ๊ณผ ํจ๊ป ํธ์ถ.
//์ปดํจํฐ ์ฐจ๋ก ์ถ๊ฐ.
if (turn === 'X'){ // X์ ์ฐจ๋ก๋ฉด
//filter ๋ฉ์๋๋ก ์กฐ๊ฑด์ ํด๋นํ๋ ์ ๋ค์ ๊ฑธ๋ฌ์ค๋ค. ( 1์ฐจ์ ๋ฐฐ์ด๋ง ๋์ row.flat์ ์ฌ์ฉํ๋ค. )
const emptyCells = rows.flat().filter((v) => !v.textContent); //td ์ค์ ๋น์นธ์ธ ์ ๋ค ๊ณจ๋ผ๋ผ.
//์ด์ emptyCells ์์๋ ๋น์นธ์ธ ์ ๋ค์ด ์ฑ์์ ธ ์๋ค.
const randomCell = emptyCells[Math.floor(Math.random()*emptyCells.length)]; //์ธ๋ฑ์ค ์์๋ด๊ธฐ
randomCell.textContent = 'X';
checkWinnerAndDraw(randomCell);
}
};
</script>
<!--์ฝ๋์ถ์ฒ (๋์) Let's Get IT ์๋ฐ์คํฌ๋ฆฝํธ ํ๋ก๊ทธ๋๋ฐ-->
๐ค ์๊ฐํ๋ ์ฒํ๋ ์ปดํจํฐ ๋ง๋ค๊ธฐ
์ฌ์ฉ์๊ฐ ์ด๋ค ์นธ์ ํด๋ฆญํ๋ฉด ์ปดํจํฐ๊ฐ ๋ฐ๋ก ๋ค์ ์นธ์ ์ ํํ๋ค.
์ปดํจํฐ๊ฐ ์๊ฐํ๋ ์ฒ์ ํ๊ธฐ ์ํด setTimeout ์ผ๋ก ์ ์ ํ ์๊ฐ ๋ค์ ์นธ์ ์ ํํ๊ฒ ํ ๊ฒ์ด๋ค.
๋จ, setTimeout ์ ์ฌ์ฉํ๋ ค๋ฉด ์ปดํจํฐ๊ฐ ์นธ์ ์ ํํ ๋๊น์ง ๋น์นธ์ ํด๋ฆญํ ์ ์๊ฒ ๋ง์์ผ ํ๋ค.
๋ง์ง ์์ผ๋ฉด ์ปดํจํฐ๊ฐ ํด๋ฆญํ๊ธฐ๋ ์ ์ ์ฌ์ฉ์๊ฐ ์นธ์ ํด๋ฆญํ ์๋ ์๋ค.
let clickable = true;
//O, X ํ๋จ ํจ์.
const callback = (event) => {
if (!clickable){ //clckable ์ด false๋?
return;
}
if (event.target.textContent !== '') { //์นธ์ด ์ด๋ฏธ ์ฑ์์ ธ ์๋๊ฐ?
console.log('๋น ์นธ์ด ์๋๋ค.');
return;
}
//๋น ์นธ์ด๋ฉด
console.log('๋น ์นธ์ด๋ค.');
event.target.textContent = turn;
checkWinnerAndDraw(event.target); //callback ํจ์์์ checkWinnerAndDraw ํจ์๋ฅผ event.target ๊ณผ ํจ๊ป ํธ์ถ.
//์ปดํจํฐ ์ฐจ๋ก ์ถ๊ฐ.
if (turn === 'X'){ // X์ ์ฐจ๋ก๋ฉด
//filter ๋ฉ์๋๋ก ์กฐ๊ฑด์ ํด๋นํ๋ ์ ๋ค์ ๊ฑธ๋ฌ์ค๋ค. ( 1์ฐจ์ ๋ฐฐ์ด๋ง ๋์ row.flat์ ์ฌ์ฉํ๋ค. )
const emptyCells = rows.flat().filter((v) => !v.textContent); //td ์ค์ ๋น์นธ์ธ ์ ๋ค ๊ณจ๋ผ๋ผ.
//์ด์ emptyCells ์์๋ ๋น์นธ์ธ ์ ๋ค์ด ์ฑ์์ ธ ์๋ค.
const randomCell = emptyCells[Math.floor(Math.random()*emptyCells.length)]; //์ธ๋ฑ์ค ์์๋ด๊ธฐ
clickable = false; //์ปดํจํฐ์ turn ์ผ ๋๋ ์นธ ๋ชป ๋๋ฅด๊ฒ ํ๋ค.
//ํ์ด๋จธ ์คํ.
setTimeout(()=>{
randomCell.textContent = `X`; //X๋ก ํ์.
checkWinnerAndDraw(randomCell);
clickable = true; //clciable ์ true๋ก ๋ฐ๊ฟ์ ๋ด๊ฐ ๋๋ฅผ ์ ์๊ฒ ํ๋ค.
},1000);
// randomCell.textContent = 'X';
// checkWinnerAndDraw(randomCell);
}
};
//์ฝ๋์ถ์ฒ (๋์) Let's Get IT ์๋ฐ์คํฌ๋ฆฝํธ ํ๋ก๊ทธ๋๋ฐ
๐ ์ ์ฒด ์ฝ๋
<!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>
<style>
table {
border-collapse: collapse;
}
td {
border: 1px solid black;
width: 40px;
height: 40px;
text-align: center;
}
</style>
</head>
<body>
</body>
<script>
const { body } = document;
const $table = document.createElement('table');
const $result = document.createElement('div'); //๊ฒฐ๊ณผ์ฐฝ
const rows = []; //์ค ๋ด๋นํ๋ ๋ฐฐ์ด ์์ฑ.
let turn = 'O';
//์น์ ํ๋จ ํจ์. ( ๋ด๊ฐ ์ง๊ธ ํด๋ฆญํ ์นธ์ ๊ธฐ์ค์ผ๋ก ๊ฐ๋ก์ค,์ธ๋ก์ค,๋๊ฐ์ ์ผ๋ก 3์นธ์ด ๊ฐ์์ง ํ์ธ )
//{
// [td,td,td]
// [td,td,td]
// [td,td,td]
//}
const checkWinner = (target) => { //td ๋ฅผ ํด๋ฆญํ๋ฉด,
//1๋ฒ์งธ ๋ฐฉ๋ฒ.
//์ง๊ธ ํด๋ฆญํ ์นธ์ด ๋ช ๋ฒ์งธ ์ค, ๋ช ๋ฒ์ฌ ์นธ์ธ์ง ์์๋ด๋ ์ฝ๋.
// let rowIndex;
// let cellIndex;
//์ด์ค ๋ฐ๋ณต๋ฌธ
//index ( ๋ฐฐ์ด์ ๋ช๋ฒ์งธ์ธ์ง ์๋ ค์ฃผ๊ฒ ๋ค )
// rows.forEach((row, ri) => {
// row.forEach((cell, ci) => {
// if (cell === target) {
// rowIndex = ri; //๋ช ๋ฒ์งธ ์ค.
// cellIndex = ci; //๋ช ๋ฒ์งธ ์นธ.
// }
// });
// });
//2๋ฒ์งธ ๋ฐฉ๋ฒ.
const rowIndex = target.parentNode.rowIndex;
const cellIndex = target.cellIndex;
console.log(Array.from(target.parentNode.children));
console.log(Array.from(target.parentNode.children).indexOf(target));
//3์นธ ๋ค ์ฑ์์ก๋?
//๊ฒ์ฌํ ๋๋ ํญ์ false ๋ก ํ๊ณ , ์น์๊ฐ ์์ ๋ true ๋ก ๋ฐ๊พผ๋ค.
let hasWinner = false;
//๊ฐ๋ก์ค ๊ฒ์ฌ
if (
rows[rowIndex][0].textContent === turn &&
rows[rowIndex][1].textContent === turn &&
rows[rowIndex][2].textContent === turn
) {
hasWinner = true;
}
//์ธ๋ก์ค ๊ฒ์ฌ
if (
rows[0][cellIndex].textContent === turn &&
rows[1][cellIndex].textContent === turn &&
rows[2][cellIndex].textContent === turn
) {
hasWinner = true;
}
//๋๊ฐ์ ๊ฒ์ฌ
if (
rows[0][0].textContent === turn &&
rows[1][1].textContent === turn &&
rows[2][2].textContent === turn
) {
hasWinner = true;
}
if (
rows[0][2].textContent === turn &&
rows[1][1].textContent === turn &&
rows[2][0].textContent === turn
) {
hasWinner = true;
}
return hasWinner;
};
//์น์๋ฅผ ํ๋จ, ๋ฌด์น๋ถ๋ฅผ ํ๋จ, ์ฐจ๋ก๋ฅผ ๋๊ธฐ๋ ๋ถ๋ถ
const checkWinnerAndDraw = (target) => {
const hasWinner = checkWinner(target);
//์น์๊ฐ ์์ผ๋ฉด
if (hasWinner){
$result.textContent = `${turn}๋์ด ์น๋ฆฌ!`;
$table.removeEventListener('click',callback);
return;
}
//์น์๊ฐ ์์ผ๋ฉด
//1๋ฒ์งธ ๋ฐฉ๋ฒ. ( forEach ์ฌ์ฉ )
// let draw = true;
// rows.forEach((row)=>{
// row.forEach((cell)=>{
// if(!cell.textContent){
// draw = false;
// }
// });
// });
//2๋ฒ์งธ ๋ฐฉ๋ฒ. ( ๋ฐฐ์ด์ ๋ฉ์๋ ์ฌ์ฉ )
const draw = rows.flat().every((cell) => cell.textContent);
if (draw){
$result.textContent = `๋ฌด์น๋ถ`;
return;
}
//์กฐ๊ฑด๋ถ ์ฐ์ฐ์ ์ฌ์ฉ.
//turn ์ด O์ด๋ฉด X๋ก, X๋ฉด O์ผ๋ก ๋ฐ๊พผ๋ค.
turn = turn === 'X' ? 'O' : 'X';
};
let clickable = true;
//O, X ํ๋จ ํจ์.
const callback = (event) => {
if (!clickable){ //clckable ์ด false๋?
return;
}
if (event.target.textContent !== '') { //์นธ์ด ์ด๋ฏธ ์ฑ์์ ธ ์๋๊ฐ?
console.log('๋น ์นธ์ด ์๋๋ค.');
return;
}
//๋น ์นธ์ด๋ฉด
console.log('๋น ์นธ์ด๋ค.');
event.target.textContent = turn;
checkWinnerAndDraw(event.target); //callback ํจ์์์ checkWinnerAndDraw ํจ์๋ฅผ event.target ๊ณผ ํจ๊ป ํธ์ถ.
//์ปดํจํฐ ์ฐจ๋ก ์ถ๊ฐ.
if (turn === 'X'){ // X์ ์ฐจ๋ก๋ฉด
//filter ๋ฉ์๋๋ก ์กฐ๊ฑด์ ํด๋นํ๋ ์ ๋ค์ ๊ฑธ๋ฌ์ค๋ค. ( 1์ฐจ์ ๋ฐฐ์ด๋ง ๋์ row.flat์ ์ฌ์ฉํ๋ค. )
const emptyCells = rows.flat().filter((v) => !v.textContent); //td ์ค์ ๋น์นธ์ธ ์ ๋ค ๊ณจ๋ผ๋ผ.
//์ด์ emptyCells ์์๋ ๋น์นธ์ธ ์ ๋ค์ด ์ฑ์์ ธ ์๋ค.
const randomCell = emptyCells[Math.floor(Math.random()*emptyCells.length)]; //์ธ๋ฑ์ค ์์๋ด๊ธฐ
clickable = false; //์ปดํจํฐ์ turn ์ผ ๋๋ ์นธ ๋ชป ๋๋ฅด๊ฒ ํ๋ค.
//ํ์ด๋จธ ์คํ.
setTimeout(()=>{
randomCell.textContent = `X`; //X๋ก ํ์.
checkWinnerAndDraw(randomCell);
clickable = true; //clciable ์ true๋ก ๋ฐ๊ฟ์ ๋ด๊ฐ ๋๋ฅผ ์ ์๊ฒ ํ๋ค.
},1000);
// randomCell.textContent = 'X';
// checkWinnerAndDraw(randomCell);
}
};
for (let i = 1; i <= 3; i++) {
const $tr = document.createElement('tr');
const cells = []; //๋ฐฐ์ด ์์ฑ.
for (let j = 1; j <= 3; j++) {
const $td = document.createElement('td');
//9๊ฐ์ tdํ๊ทธ์ ์ด๋ฒคํธ๋ฆฌ์ค๋๊ฐ ๋ฌ๋ฆผ.
//$td.addEventListener('click',callback); //tdํ๊ทธ์ ์ด๋ฒคํธ๋ฆฌ์ค๋ ๋ฌ๊ณ , ํจ์ ์คํ.
cells.push($td);
$tr.appendChild($td); //trํ๊ทธ ์์ tdํ๊ทธ๋ฅผ ๋ฃ๊ณ ,
}
rows.push(cells);
$table.appendChild($tr); //tableํ๊ทธ ์์ trํ๊ทธ๋ฅผ ๋ฃ๋๋ค.
$table.addEventListener('click', callback); //์ด๋ฒคํธ๋ฆฌ์ค๋ ํ๋ฒ์ ๋ฌ๊ณ , ํจ์ ์คํ
}
body.appendChild($table); //bodyํ๊ทธ์ tableํ๊ทธ,divํ๊ทธ๋ฅผ ๋ฃ๋๋ค.
body.appendChild($result);
</script>
</html>
<!--์ฝ๋์ถ์ฒ (๋์) Let's Get IT ์๋ฐ์คํฌ๋ฆฝํธ ํ๋ก๊ทธ๋๋ฐ-->-(๋์) Let's Get IT ์๋ฐ์คํฌ๋ฆฝํธ ํ๋ก๊ทธ๋๋ฐ
Let's Get IT ์๋ฐ์คํฌ๋ฆฝํธ ํ๋ก๊ทธ๋๋ฐ
๋๋ถ(TheBook): (์ฃผ)๋์์ถํ ๊ธธ๋ฒ์์ ์ ๊ณตํ๋ IT ๋์ ์ด๋ ์๋น์ค์ ๋๋ค.
thebook.io
-(๊ฐ์ข) ๋ ์ธ ๊ธฐ๋ฆฟ ์๋ฐ์คํฌ๋ฆฝํธ
https://www.inflearn.com/course/
[๋ฌด๋ฃ] [๋ฆฌ๋ด์ผ] ๋ ์ธ ๊ธฐ๋ฆฟ ์๋ฐ์คํฌ๋ฆฝํธ - ์ธํ๋ฐ | ๊ฐ์
๋ณธ ๊ฐ์์์๋ ์๋ฐ์คํฌ๋ฆฝํธ๋ฅผ ํ์ฉํด ํ๋ก๊ทธ๋๋ฐ ์ฌ๊ณ ๋ ฅ์ ๊ธฐ๋ฅด๋ ์ฐ์ต์ ํฉ๋๋ค. ์น ๊ฒ์์ธ ๊ตฌ๊ตฌ๋จ์ ์์์ผ๋ก ๋๋ง์๊ธฐ, ์ซ์ ์ผ๊ตฌ, ๋ฐ์ ์๋ ํ ์คํธ, ํฑํํ , ๋ก๋ ์ถ์ฒจ๊ธฐ, ๊ฐ์๋ฐ์๋ณด, ์นด
www.inflearn.com
