피로그래밍 14기: day5 오전 <JS - DOM, 끝말잇기, 숫자야구>

 

 

앞서 배운 자바스크립트의 기본 문법에 이어서, 이번 세션에서는 1. 자바스크립트의 DOM에 대한 개념과, 2. 자바스크립트에서 직접 요소를 선택해서 html컨텐츠를 조작하는 방법, 그리고 3. 자바스크립트를 이용한 간단한 웹 게임 만들기를 다룬다. 

---

1. 자바스크립트와 DOM

 

고척DOMe, 출처: https://cafe.naver.com/wearetaylormade/6735

DOM은 Document Object Model의 줄임말이다. 자바스크립트에서 DOM은 문서 내용을 나타내고 조작하게 하는 역할을 한다. 추가로, html의 텍스트를 각각의 객체로 만들고 이들 객체를 부모자식 관계로 표현할 수 있는 트리 구조로 구성한 것이 DOM이다. 

 

트리 구조에 대해서는 아래 사진을 참고하면 이해하기 쉽다.

 

 

€ 문서 노드(document node)는 트리의 최상위 시작점으로, 말 그대로 문서 자체를 의미한다. 

€ 요소 노드(element node)는 html을 구성하고 있는 요소들을 의미한다. <>태그로 존재하는 요소들이라고도 표현할 수 있다. 

€ 어트리뷰트 노드(attribute node)는 html 요소 태그의 속성을 의미한다. 흔히 class와 id로 태그를 부연설명하는 역할을 한다. 자바스크립트에서는 이 attribute들을 참조해서 요소들을 수정한다. 

€ 텍스트 노드(text node)는 트리의 최하위 점이다. html에서 보여지는 내용인 텍스트라고 이해할 수 있다. 

---

2. 자바스크립트에서 요소 선택하기

 

앞서 설명한 것과 같이, 자바스크립트에서 document의 객체를 선택하고 조작하려면 정확히 "어떤"객체를 선택해야 하는지 명시해줘야 한다. 이때 명시하는 방법은 다음과 같이 크게 4가지 방법을 사용할 수 있다. 

 

ㄱ. id 속성으로 명시하기

ㄴ. class 속성으로 명시하기

ㄷ. html tag 요소로 명시하기

ㄹ. css 선택자로 명시하기

 

ㄱ. id 속성으로 명시하기

document.getElementById(id이름)

한 문서 내에서 id는 한 번만 사용되어야 하기 때문에 이 코드로 영향을 받는 id는 한개밖에 없을 것이다.

 

ㄴ. class 속성으로 명시하기

document.getElementByClassName(class이름)

(class이름)을 (class1 class2)와 같은 방식으로 공백을 사용하여 여러 개의 class에 대한 속성을 정의할 수 있다. 

 

ㄷ. html tag 요소로 명시하기

document.getElementByTagName(tag이름)

 

ㄹ. css 선택자로 요소 명시하기

document.querySelector(css선택자이름1개만), document.querySelectorAll(css선택자이름여러개가능)

css 선택자로 id와 class 이름을 모두 사용할 수 있기 때문에 사실상 가장 많이 사용하는 방법이다. 

 

추가로, 요소를 선택한 뒤에 해당 요소와 관계된 다른 요소들을 선택할 필요성이 있는데, 이 때 사용할 수 있는 메서드들은 다음과 같이 정리할 수 있다.

parentNode

firstChild

lastChild

previousSibling

nextSibling

getAttribute

removeAttribute

innerHTML - 해당 요소의 모든(자식 요소를 포함하는) 컨텐츠를 하나의 문자열로 취득할 수 있다. 

 

textContent - 요소의 텍스트에 접근한다. 

createElement(tag이름)

createTextNode(텍스트)

createAttribute(속성)

appendChild()

removeChild()

 

---

3. 자바스크립트를 이용한 간단한 웹 게임 만들기

 

자바스크립트에서 prompt를 이용하면 웹 페이지의 콘솔 창에서 간단한 게임을 만들 수 있다. 

 

ㄱ. 끝말잇기

끝말잇기의 one and only인 규칙은, 앞말의 맨 뒷글자와 뒷말의 맨 앞글자가 같아야 한다는 것이다. 매우 간단한 규칙이고, 구현하기도 굉장히 쉽다. 자바스크립트의 리스트 속성을 이용하면 빠르게 구현할 수 있다. 

let word = '비행기';
let cor = 0;
let fal = 0;

for (i = 0; i < 5; i++) {
    let answer = prompt(word);
    if (answer[0] === word[word.length - 1]) {
        alert('right!');
        word = answer;
        cor++;
    } else {
        alert('wrong!');
        fal++;
    }
}

alert('5 trial ends');
let player = prompt('tell us your name');
alert(player + '님의 정답 개수는 ' + cor + '개, 틀린 개수는 ' + fal + '개 입니다. ');

ㄴ. 숫자야구

숫자야구는 4자리의 1~9인 숫자를 플레이어가 맞추는 게임이다. 플레이어는 한 턴에 4자리의 숫자를 말할 수 있고, 만약 플레이어가 말한 숫자가 정답의 숫자와 위치와 값이 모두 같으면 스트라이크, 위치는 틀렸지만 정답 안에 같은 값이 있으면 볼이 출력된다. 예를 들어, 1234이 정답인데 플레이어가 8253을 말하면 1스트라이크 1볼이 결과값으로 출력된다. 5번의 턴을 두고, 만약 플레이어가 4자리의 숫자를 위치와 값 모두 같게 말하면 홈런이 되고 경기가 끝난다.

let array = [1, 2, 3, 4, 5, 6, 7, 8, 9];

let bsnum = [];
for (i = 0; i < 4; i++) {
    let a = array.splice(Math.floor(Math.random() * (9 - i)), 1)[0];
    bsnum.push(a);
}
let finum = bsnum.join('');
console.log('정답' + finum);

let answer = prompt('guess your number');
console.log('입력값' + answer);

for (r = 0; r < 3; r++) {
    let s = 0;
    let b = 0;
    for (i = 0; i < 4; i++) {
        if (answer[i] === finum[i]) {
            s++;
        } else {
            for (k = 0; k < 4; k++) {
                if (answer[i] === finum[k]) {
                    b++;
                    break;
                }
            }
        }
    }
    if (s == 4) {
        alert('HOEMRUUN')
    } else if (s != 4 && 3 - r != 0) {
        alert('strike = ' + s + ' ; ball = ' + b + ' ; trial left = ' + (3 - r));
        answer = prompt('try again');
    } else if (3 - r == 0) {
        alert('GAME OVERR')
    }
}

이 코드는 앞서 진행한 끝말잇기보다는 조금 더 복잡한데, 1부터 9까지의 숫자를 랜덤하게 출력하는데 꽤 시간을 들였다. 

 

내가 쓴 방법은, 1부터 9까지가 있는 array를 만들고, 4번의 턴 동안 element를 뽑아서 array에서 해당하는 element에 있는 숫자를 하나씩 출력하는 방법이다. 겹치는 숫자를 만들지 않기 위해서는 element를 뽑은 뒤에 splice()를 이용해서 해당 array에서 숫자를 삭제해야한다. 그런데 여기서 문제는 4번의 턴 동안 element를 랜덤하게 뽑아야 하는데, 첫 번째 순서에서는 0~9 사이에서 Math.floor(Math.random()*9) 를 이용해서 랜덤하게 뽑지만, 두 번째 순서는 0~8 사이, 세 번째는 0~7 사이로 점점 범위가 줄어든다. 그래서 나는 i가 단순증가하는 for문을 만든 뒤, 랜덤으로 나오는 숫자의 범위를 Math.floor(Math.random()*(9-i)) 를 이용해서 제한했다. 쓰고 나니 별것 아니었던 것 같지만 은근 고민을 많이 했다. 자바스크립트에서는 배열의 element의 위치가 배열의 범위 바깥을 지정하면 오류가 발생한다. 

 

자바스크립트는 HTML과 CSS와 더불어 프론트엔드를 구성하는 요소라고 배웠다. 세션에서 직접적으로 html을 조작하는 방법을 많이 배우지는 않았지만, 앞서 설명한 getElementBy 메소드를 잘 활용하면 조작할 수 있을 것 같다. 추가로, 자바스크립트에서는 변수를 let 혹은 constant만을 사용해서 선언하는 것이 더 편하다는 것과 console.log를 중간중간 많이 이용해서 내가 제대로 코드를 작성하고 있는지를 확인할 수 있다는 것을 배웠다. 유용하게 쓸 수 있을 것 같다.