자바스크립트
개념
- 배열안에 배열이 있을 때 이차원 배열
- 구조 분해 할당
- 객체안의 속성이름과 변수 이름이 같을 때 사용
//구조 분해 할당 => 객체안의 속성이름과 변수 이름이 같을 때 사용
//배열의 구조분해 할당
// const arr = [1,2,3,4,5];
// const one = arr[0];
// const two = arr[1];
// const three = arr[2];
// const four = arr[3];
// const five = arr[4];
const [one,two,three,four,five] = arr;
const [one,,three,,five] = arr;
//객체의 구조 분해 할당
const { body } = document;
// const body = document.body;
// const createElement = document.createElement;틱테토 게임
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<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 body = document.body;
// const createElement = document.createElement;
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;
if(turn === 'O'){
turn = 'X';
}else if(turn === 'X'){
turn = 'O';
}
}
};
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');
cells.push($td);
$td.addEventListener('click',callback);
$tr.appendChild($td);
}
rows.push(cells);
$table.appendChild($tr);
}
body.appendChild($table);
body.appendChild($result);
</script>
</html>
초보 개발자의 성장기💻