JavaScript 끝말잇기 게임 작성하기

프로그램 절차를 만들 때의 원칙

1. 프로그램 절차의 개수는 정해져 있어야 한다.

2. 각 절차는 항상 같은 내용이어야 한다.

3. 모든 가능성을 고려해야 한다. 

4. 예시는 절차를 검증하는 데 사용한다.

 

 

ex) 끝말잇기 게임 절차                                                         프로그래밍 절차
ⓐ 네 명의 참가자가 있다.                                                ① 게임에 몇 명이 참가할지를 선택한다.
ⓑ A가 '자바스크립트'라고 말했다.                                  ② 참가자 순서를 정한다. (편의상 숫자로 한다)
ⓒ B가 '트리구조'라고 말했다.                                         ③ 첫 번째 사람이 어떤 단어를 말한다.
ⓓ C가 '조합'이라고 말했다.                                             ④ 다음 사람이 어떤 단어를 말한다.
ⓔ D가 '합성'이라고 말했다.                                             ⑤ 절차 4에서 말한 단어가 올바른지 판단한다.
ⓕ 다시 A가 '성공'이라고 말했다.                                     ⑥ 올바르다면 그 다음 사람이 어떤 단어를 말한다.
ⓖ B가 ...                                                                           ⑦ 올바르지 않다면 틀렸다고 표시한다.
ⓗ 무한 반복                                                                      ⑧ 게임을 계속 진행한다.

 

절차를 만든 후에는 예시를 들어 절차를 검증해 보면 좋다!

 

프로그램의 절차를 세울 때 절차는 항상 일직선 모양이 아닌다.

                                            판단 결과에 따라 절차가 갈라지는데, 이렇게 갈라지는 점을 분기점이라고 한다.

 

이 절차는 순서를 그려 표현하는 것이 편리한데, 

일반적인 절차는 타원형으로, 판단을 요구하는 절차는 마름모로 표현한다.

                                                판단에 의해 절차를 거슬러 올라간다는 것은 '반복'을 의미한다.

절차의 시작과 끝은 두 겹의 원으로 표현한다.

 

cf. HTML은 화면 요소(입력창, 글자, 버튼 등)를 담당하고, 

    CSS는 요소의 디자인을 담당하며,

    JavaScript는 프로그램의 작동을 담당한다.

 

코드 작성시 script 태그는 관련된 내용에 있어 다른 태그보다 아래에 작성되어야 한다!

: HTML은 위에서부터 아래로 실행되기 때문에, 

  화면을 그리는 태그들이 먼저 실행되어 화면이 그려져야

  script 태그에 작성된 내용(자바스크립트)으로 화면을 조작할 수 있기 때문이다.

 

 

 

프로그래밍

① 게임에 몇 명이 참가할지를 선택한다.

             

    참가인원은 입력창(input 태그 사용)과 prompt 함수를 사용하는 두 방법 중

    prompt 함수로 프로그램에 직접 값을 전달하겠다.

                            이 때, 입력된 값은 모두 자료형이 문자열로 변환되어 저장된다.  

                            cf. 실행하면 나오는 상자에서 취소 버튼을 누르게 되면 프로그램에는 null 값이 전달된다.

                                          

형식 : prompt( '사용자에게 보여줄 메시지') ;    

    이것을 실행하면 새로이 뜨는 창을 대화상자라고 한다.

  

prompt함수 외에도 대화상자가 뜨는, 뜨게 하는 함수는 alert와 confirm이 있다.

alert 함수는 주로 어떠한 내용(경고도 될 수 있고)을 메시지로 사용자에게 알리고자 할 때 사용한다. 

                    그리고, console.log로 변수의 값을 확인하는 것과 같이 사용도 가능하다.

                                 cf. 하지만 console.log처럼 사용하는 것은 추천하지 않는다.

                                      이유는 console.log처럼 출력내용을 편집해서

                                                 원하는 형식대로 보거나 각 값에 대한 네이밍(변수 선언)을 할 수가 없어 

                                                 여러 값을 구분하여 동시에 확인하기 어렵다.

                                                 그리고, 개발자가 아닌 그것을 원하지 않을 수도 있는 실제 사용자들에게도

                                                 alert 대화 상자의 내용이 보이기 때문이다.

 

confirm 함수는 사용자에게 의사를 물어볼 때 사용한다.

                         대화 상자에 확인과 취소 버튼이 나오는데, 

                         확인을 누르면 true가, 취소를 누르면 false가 콘솔 창에 출력된다.

                         이렇게 나온 값은 프로그래밍할 때 사용한다.

 

 

③ 첫 번째 사람이 어떤 단어를 말한다.

 

    단어는 입력창(input 태그 사용)과 prompt 함수를 사용하는 두 방법 중

    HTML의 input 태그로 만들어진 입력창으로 값을 입력받겠다.

   

    이때, 자바스크립트에서 HTML의 내용을 설정할 수 있는데,  HTML의 내용을 설정하기 하기 위해

    HTML 태그를 가져오는 것을 선택한다고 표현하고, 선택하기 위해 특별한 함수와 특별한 방법을 사용한다.

'선택'하는 함수 형식 : document.querySelector( '선택자' )

    cf. 한 종류의 태그가 여러 개 있는 경우에는 querySelectorAll 함수를 사용하면 된다.

                                                                          querySelector 함수를 사용하게 되면,

                                                                          HTML 화면의 가장 첫 번째 태그 요소만 콘솔 창에서 선택된다. 

                                                                          cf. 콘솔 창에서 나타나는 태그에 마우스를 올리면

                                                                               실제 HTML 화면에서 그 태그에 해당되는 곳이 하이라이트 된다!

        한 종류의 태그들 중 일부만 선택하고 싶은 경우에는 선택하고 싶은 태그들의 속성 옵션을 class로 하고,

                                                                                            동일한 속성값(클래스명)을 주어 선택할 수 있다.

                                                                                            querySelectorAll( '.클래스명' ) ;

        어떤 태그 안에 들어 있는 다른 태그를 선택할 때는 밖에 있는 태그부터 순차적으로 띄어쓰기(구분자)하며 작성한다.

                                                                                         하지만, 보통 id명을 주어 바로 선택하게 쉽게 만든다. 

 

 

 

사용자들이 화면과 다양한 상호 작용을 하는 것은 곧, HTML 태그들과 상호 작용하는 것이다.

사용자가 태그와 상호 작용할 때 이벤트라는 것이 발생하고, 자바스크립트는 이 이벤트들을 자동으로 감지할 수 없다.

따라서 자바스크립트에 이벤트 리스너라는 것을 추가해 HTML에서 발생하는 이벤트를 감지한다.

 

 

태그에서 이벤트가 발생할 때 실행할 함수를 만들고, 그것을 태그에 연결한다.

형식 : 태그. addEventListener( '이벤트 이름', 만든 리스너 함수) ;

cf. 단, 위의 형식에서 만든 리스너 함수 옆에 ()를 붙여 함수를 실행해서는 안 된다!

           ()를 붙이게 되면 버튼 이벤트(클릭) 발생 여부와 상관없이 함수가 그냥 실행된다.

           이 때의 함수와 같이 특정 작업이 실행되고 난 뒤에 추가로 실행되는 함수를 콜백(callback) 함수라고 한다.

 

 

textContent 속성은 태그 내부의 값을 얻거나 수정할 때 사용한다.

                                  무조건 문자열로 나오므로 빈 값인 null이나 undefined가 아니라

                                  ' '이 나온다.

형식 : 태그.textContent                  // 태그 내부의 문자를 가져옴
           태그.textContent = 값         // 태그 내부의 문자열에 해당 값을 넣음

cf. 입력 태그(input, select, textarea 등)의 입력된 값을 가져올 때는 value 속성을 사용한다.

형식 : 입력창.value             // 입력창의 값을 가져옴
           입력창.value = 값    // 입력창에 값을 넣음

 

 

형식 : 입력창.focus()        // 입력창을 하이라이트(커서가 깜박거림)

 

형식: 입력창.value = ' ' ;          // 입력창을 비움