끝말잇기 게임 | HTML 태그 선택(querySelector, addEventListner, 콜백 함수)

🖤 querySelector

HTML 태그 선택하기

📍 대화 상자 띄우기

✅ prompt : 대화 상자에 사용자가 입력한 메시지가 문자열 형태로 전달, 입력하지 않고 취소를 누르면 null 이 전달
✅ alert : 단순한 알림창, 호출시 확인을 누르기 전까지 다음 스크립트 실행 중단
디버깅 용도활용시, console.log 를 이용
✅ confirm : 사용자에게 확인 받을 때 사용. 사용자가 확인을 누르면 true, 취소를 누르면 false가 전달

🖤 addEventListener

이벤트 리스너 달기 (이벤트 추가)

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

리스너함수라고도 하고 callback 함수라고도 함.

🖤 event.target.value

이벤트 설정한 요소의 값을 받아서 볼 수 있다.
아래 예시에서는 input 에 입력한 값을 볼 수 있다.

document.querySelector('input').addEventListener('input', function(event){
  console.log('글자 입력', event.target.value);
})

const onClick = () => {
  console.log('버튼 클릭');
}

document.querySelector('button').addEventListener('click', onClick);

---

🖤 value

입력창에 입력된 값은 value 속성으로 가져온다.
value에 값을 대입하면 대입한 값으로 변경된다.

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

🖤 textContent

입력 태그(input, select, textarea 등)가 아닌 일반 태그들의 내부 값을 가져올 때는 value 가 아닌 textContent 속성을 사용한다.

태그.textContent	// 태그 내부의 문자를 가져옴
태그.textContent	// 태그 내부의 문자를 해당 값으로 설정