(1)에 이어... 격자 내부에 좌표를 추가해보았다.
코드
<!DOCTYPE html>
<html lang="ko">
<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>n x n coodinate</title>
<style>
.box {
width: 50px;
height: 50px;
border: 1px black solid;
box-sizing: border-box;
display: inline-block;
vertical-align: top;
}
</style>
</head>
<body>
<input class="colInput" type="number" />
<div class="container"></div>
<script>
const colInput = document.querySelector('.colInput')
const container = document.querySelector('.container')
colInput.focus()
function Box (row, col) {
const element = document.createElement('div')
element.classList.add('box')
let showing = false
element.addEventListener('click', () => {
showing = !showing
if (showing) {
element.innerText = `r${row}: c${col}`
return
}
element.innerText = ``
})
container.append(element)
}
const makeBoxes = (value) => {
for (let i = 0; i < value; i++) {
for (let j = 0; j < value; j++) {
new Box(i, j)
}
}
}
colInput.addEventListener('keyup', () => {
const value = +colInput.value
if(value <= 0) {
container.innerHTML = '<p>유효한 값을 넣어주세요.</p>'
return
}
container.innerHTML = ''
container.style.width = `${value * 50}px`
makeBoxes(value)
})
</script>
</body>
</html>흐름
- 클래스 또는 생성자함수를 사용할 수 있는가?
- YES!! 위의 경우는 BOX라는 오브젝트를 수없이 생성해야 하므로 기능적으로 클래스로 구현하기 용이하다. - 내 구상과 디자인에 적합한 HTML 코드와 CSS 코드를 작성한다.
- Box 클래스를 생성한다. 각 박스는...
- div element로 생성하고, css class를 달고있어야 한다.
- 기본적으로 텍스트를 숨기고 있어야 한다.
- div 스스로 텍스트 토글 기능에 관한 이벤트 리스너를 달고 있어야 한다. (클로저로 인해 이벤트 핸들러는 row, col, showing 변수에 접근할 수 있다.) - container에 add 한다.
- 이후 n x n 박스를 만드는 함수를 제작하면 된다.
코드설명
html과 css는 좌표 생성기 (1)과 같다.
JavaScript에서는...
- Box 생성자 함수가 있는것은 같으나, 클릭 시 참조가능한 변수인 showing을 넣어두었다.
(이벤트 핸들러는 클로저 영역을 사용할 수 있다.) - 이벤트 리스너를 통해 해당 div가 클릭이 될 경우에 관한 이벤트를 넣어준다.
여기에서는 showing의 불리언값이 바뀌고, if문을 통해 좌표를 생성하거나 숨기게 된다. - 이후 2중 for문을 이용해 value에 비례해 div를 생성해주게 된다.
- 생성된 div를 클릭했을 때 생성자 함수 Box의 파라미터인 row와 col와 이벤트 리스너 바깥에 있는 showing이라는 변수를 계속 참조하게 되는데,
- 생성자 함수의 생명주기가 끝났음에도 불구하고, 이벤트 핸들러가 변수를 계속 참조할 수 있는 것은
- 클로저 현상으로 이해가 된다.
'Javascript' 카테고리의 다른 글
| 클린코드 연습 (1) - 배열 고차함수 (0) | 2023.02.04 |
|---|---|
| 객체 장난 (0) | 2023.02.01 |
| n x n 좌표 생성기 (1) (0) | 2023.01.29 |
| 함수 장난 (1) (0) | 2023.01.27 |
| circle live 10 ( 이벤트버블링, stopPropagation() ) (0) | 2023.01.10 |
