JavaScript - 끝말잇기

이 글은 자바스크립트 프로그래밍을 참고하여 작성되었습니다.

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

1. 프로그램 절차의 개수는 정해져 있어야 한다.
2. 각 절차는 항상 같은 내용이어야 한다.
3. 모든 가능성을 고려해야 한다.
4. 예시는 절차를 검증하는 데 사용한다.

함수

• prompt(''); : 입력값을 전달받는다. 값을 저장하고 싶다면 변수에 저장. 빈 값은 null로 저장.
  입력값은 모두 문자열이 된다. (숫자를 입력 받을 시에도)
  따라서 숫자로 형변환해야 한다. Number(prompt(''));
• alert(''); : 메시지를 사용자에게 알릴 때 사용.
• confirm(''); : 사용자에게 의사를 물을 때 사용.
  확인은 true, 취소는 false

선택자

• document.querySelector('선택자');
• 모두 선택하고 싶다면 document.querySelectorAll
  모두 선택했을 때는 NodeList라는 특수한 객체(배열이 아님)
• id 값을 선택하고 싶을 때는 document.querySelector('#id값');
• 클래스로 선택하고 싶을 때는 document.querySelectorAll('.클래스');
  자바스크립트에서 같은 id값은 한 번만 쓸 수 있고 클래스는 여러 번 쓸 수 있다.
• 안에 들어 있는 다른 태그를 선택할 때는 document.querySelector('선택자 내부선택자 내부선택자...');

이벤트

• 태그.addEventListener('이벤트 이름', 리스너함수);

click 이벤트

 <script>
        const onClickButton = () => {
            console.log('버튼 클릭');
        };
        const $button = document.querySelector('button');
        $button.addEventListener('click', onClickButton);
    </script>

• 클릭 이벤트의 이름은 click이다.
• 버튼을 클릭하면 onClickButton 함수가 실행된다.
  이때 onClickButton()을 넣으면 클릭과 상관없이 함수가 실행된다.
• 콜백 함수(callback function) : 특정 작업이 실행되고 난 뒤에 추가로 실행되는 함수

 <script>
 document.querySelector('button').addEventListener('click', () => {
 console.log('버튼 클릭');
 });
</script>

• 변수 없이 작성하면 이렇게 된다.

input 이벤트

const onInput = (event) => {
            console.log('글자 입력',event.target.value);
        };
const $input = document.querySelector('input');
$input.addEventListener('input', onInput);

• 함수의 매개변수로 event가 존재한다.
• 이벤트리스너에 넣는 함수에는 매개변수로 이벤트에 관한 정보가 제공된다.
• event.target.value로 input태그에 입력한 값을 알아낼 수 있다.
• event는 매개변수이므로 e로 해도 되고 다른이름으로 지어도 된다.

• 변수에 아무것도 들어있지 않으면 undefined.
  undefined는 if문 안에 들어가면 false가 된다.
• 태그.textContent : 태그 내부의 문자열을 가져옴
• 태그.textContent = 값 : 태그 내부의 문자열을 해당 값으로 설정함
• 입력태그.value : 입력창의 값을 가져옴
• 입력태그.value = 값 : 입력창에 값을 넣음
  태그 내부의 값을 선택할 때는 textContent를 사용하는 게 맞지만 입력 태그(input, select, textarea)는 value를 사용한다.
• 입력태그.focus() : 입력 태그를 선택