💭 순서도

1. 프로그램 절차의 개수는 정해져 있어야함
2. 각 절차는 항상 같은 내용
3. 모든 가능성 고려

💭 대화상자 띄우기

🔎 prompt() 함수

• 팝업창을 띄어 사용자로부터 입력받아 문자열 형태로 전달
• 입력하지 않고 취소시 -> null 전달

🔎 alert()

• 사용자에게 경고 메시지를 표시

🔎 confirm()

• 사용자의 확인을 요구
• 확인 -> true, 취소 -> false 기록
  

💭 HTML 태그 선택

• 자바스크립트에서 HTML 태그를 가져오는 것 -> 선택
  - 선택자에서 아이디를 데리고오고 싶으면 '#선택자'
  - 클래스일 경우 .btn
  

document.querySelector('선택자');
const $input = document.querySelector('input');
const $button = document.querySelector('button');
const $word = document.querySelector('#word');
const $order = document.querySelector('#order');

// 태그 모두 선택
document.querySelectorAll

💭 태그 이벤트 달기

🔎 addEventListener( , )

• 태그 선택 후 addEventListner 메서드를 이용해 이벤트를 연결
• 첫 번째 인수 -> 이벤트 이름
• 두 번째 인수 -> 리스너 함수

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

• 리스너 함수는 이벤트가 발생할 때 실행되는 함수
• 리스터 함수의 매개변수로 event 객체를 제공해 이벤트와 관련된 정보 얻을 수 있음
  ex. input 태그에 입력된 값 얻어오기 위해 event.target.value를 넣음. event.target.value 는 이벤트가 발생한 대상 태그 가리킴

const 리스너함수 = (event) => {
  console.log(event.target.value);
};

• 입력태그(input, select, textarea 등) 값은 value 속성으로 가져옴. value 에 값을 대입하면 대입한 값으로 변경
• 이외의 일반태그들은 내부 값을 가져올 때 textContent 속성 사용

// 입력창의 값을 가져옴
입력창.value;

// 입력창메 값을 넣음
입력창.value = 값;

// 태그 내부의 문자를 가져옴
태그.textContent;

// 태그 내부의 문자를 해당 값으로 설정
태그.textContent = 값;

---

🎮 끝말잇기

• 필요한 태그 가져오기 및 필요한 변수 선언
  

• 제시어가 비어있을 경우(게임시작) => 입력한 단어가 제시어가 됨
• OR 첫 글자와 끝 글자가 같을 경우
  👉 제시어 변경 및 순서 가져오기
  👉 순서 변경해주기
  

• 제시어가 비어있지 않을 경우
• OR 첫 글자와 끝 글자가 맞지 않을 경우
  👉 틀림 표시
  

👉 (추가) 글자 입력후 빈칸 비우기 및 커서 포커스

👉 태그에 이벤트 연결

---

🎮 쿵쿵따 게임

• 끝말잇기 응용 ver
• (추가) 입력할 수 있는 단어는 세 글자
  세 글자가 아니면 다시 입력하라고 표시
• (추가) prompt 함수를 사용해 몇 명이 참가할지 선택 시 사용자가 취소 누르면 다음 코드가 실행되지 않게 처리

🌟 onCLickButton 함수 안의 if문 기존의 조건문 다음과 같이 변경
👉 제시어가 비어있는가 ? 또는 입력한 단어가 올바르고 세 글자인가?
👉 AND, OR 이용

//  기존의 조건문
const onClickButton = () => {
	if (!word || word[word.length - 1] === newWord[0]){...}
  
// 변경후 조건문
const onClickButton = () => {
	if (!word || (word[word.length - 1] === newWord[0] && newWord.length === 3)){...}

🌟 if 문을 이용해 true 일 경우 코드 실행 ↔ false 일 경우 코드 실행X
👉 prompt 함수에서 취소를 누르면 값은 null -> null이 Number 함수에 들어가면 NaN이 됨
👉 Nan 은 if 문에 들어가면 항상 false 로 취급되므로 number가 null 이면 내부는 실행되지 않을 것이고, null 이 아닐경우에 내부 코드가 실행될 것!

---

📒 제로초 - < 렛츠기릿 자바스크립트 >