자기소개 페이지 작업 하면서 공부한 것들!!🤣
1. switch
function setLevel() { const $dropdownContent = document.querySelector(".dropdown-content"); $dropdownContent.addEventListener("click", (ev) => { switch (ev.target.id) { case "L": $app.setAttribute("level", "L"); mineCount = 10; setRow = 9; setColumn = 9; break; case "M": $app.setAttribute("level", "M"); mineCount = 40; setRow = 16; setColumn = 16; break; case "H": $app.setAttribute("level", "H"); mineCount = 99; setRow = 16; setColumn = 30; break; } GameRestart(); }); }
- 지뢰찾기 게임에서 난이도 선택하는 부분에서 swich문을 사용했다.
초급, 중급, 고급 각각을 클릭하면ev.target.id
값을 비교해 보드의 크기를 결정 한다.
아래의 코드는 해당 칸을 클릭하면 그 칸의 id값을 얻어와 row와 column을 추출해내는 코드이다.
const $block = document.querySelectorAll(".block"); $block.forEach((block) => { // 좌클릭 이벤트 block.addEventListener("click", function () { const id = block.id; const idArr = id.split("-"); const row = idArr[0]; const column = idArr[1]; if (randomArr[row][column] === "m") { block.classList.add("ismine"); mineCount--; $mineCounter.innerHTML = mineCount; gameOver(false); } viewBlock(row, column); }); });
2. forEach()
주어진 함수를 배열 요소 각각에 대해 실행한다.
const $block = document.querySelectorAll(".block");
$block
은 block이라는 클래스를 가진 모든 Element를 갖고 있는 배열이다.(forEach
를 사용 하기 위해 일부러$block
을 배열로 만들어 보았다.)- 여기선
$block
이 가지고 있는 모든 block요소에 클릭 이벤트를 주기 위해 사용했다.3. split()
객체를 지정한 구분자를 이용하여 여러개의 문자열로 나눈다.
const id = block.id; const idArr = id.split("-"); const row = idArr[0]; const column = idArr[1];
- 각 블록을 생성할 때 나중에 각 칸을 구분하기 위해 id값을
row-column
형태로 추가해 주었다. (ex. 1-1, 15-17)id = "15-17" idArr = ["15","17"] row = "15" column = "17"