.png)
1. 순서도 그리기(절차)
✨ 프로그램 절차 만들 때 원칙
1. 프로그램 절차의 수는 정해져 있어야 한다.
2. 각 절차는 항상 같은 내용이어야 한다.
3. 모든 가능성을 고려해야 한다.
4. 예시는 절차를 검증하는 데 사용한다.
🔺 순서도를 만들 때 이벤트(버튼 클릭, 입력창 글자 입력 등)가 필요한 곳에서 순서도를 끊어준다!
🚀 앞의 원칙을 바탕으로 절차를 만들어 보자!
1. 게임에 몇 명이 참가할지를 선택한다.
2. 참가자 순서를 정한다.
3. 첫 번째 사람이 어떤 단어를 말한다.
4. 다음 사람이 어떤 단어를 말한다.
5. 절차 4에서 말한 단어가 올바른지 판단한다.
6. 올바르다면 그다음 사람이 어떤 단어를 말한다.
7. 올바르지 않다면 틀렸다고 표시한다.
8. 게임을 계속 진행한다.
2. 대화 상자 띄우기
✨ 웹 브라우저에 띄울 수 있는 3개의 대화 상자
＊ prompt : 대화 상자에 사용자가 입력한 메시지가 문자열 형태로 전달되고, 입력하지 않고 취소를 누르면 null이 전달된다.
＊ alert : 단순한 알림창이다.
＊ confirm : 사용자에게 확인을 받을 때 사용한다. 사용자가 확인을 누르면 true가 전달되고, 취소를 누르면 false가 전달된다.
🚀 prompt로 사용자에게 값을 입력받아보자! prompt는 문자열 형태로 전달되는 거 명심!
<body> <div><span id="order">1</span>번째 참가자</div> <div>제시어: <span id="word"></span></div> <input type="text"> <button>입력</button> <script> const number = Number(prompt('몇 명이 참가하나요?')); //prompt로 값을 입력받고, 값이 문자열로 오므로 숫자타입으로 형변환하기 </script> </body>
3. HTML 태그 선택하기(태그 선택 함수)
✨ 자바스크립트에서 HTML 태그를 쓰려면, 함수를 이용해 선택해야 한다!
＊ document.querySelector : 하나의 태그만 선택 가능
＊ document.querySelectorAll : 여러 개의 태그 선택 가능
✨ 선택자는 HTML 태그를 선택할 수 있게 도와주는 문자열이다.
＊ 단순한 태그일 때 선택자는 태그의 이름이 되고('button'), 하나의 태그만 콕 찝어서 선택하고 싶을 때는 id 속성을 사용하면 되고('#id'), 여러 개의 태그를 동시에 선택하고 싶을 때는 class속성을 사용하면 된다('.class').
＊ 여러 태그 안에 들어 있는 다른 태그를 선택하고 싶다면 선택자 사이를 한 칸 띄면 된다.
4. 태그에 이벤트 달기(이벤트 연결)
✨ 사용자가 태그와 상호 작용을 할 때 이벤트라는 것이 발생한다. 하지만 자바스크립트는 이벤트를 자동으로 감지할 수 없기 대문에 이벤트 리스너라는 것을 직접 추가해 이벤트를 감시할 수 있게 하겠다.
＊ document.querySelector로 태그를 선택한 후에, addEventListener 메서드를 사용해 이벤트를 연결한다. 리스너 함수는 이벤트가 발생할 때 실행되는 함수라고 생각하면 된다.
✨ 값 가져오기
＊ 이벤트가 발생한 요소를 반환하려면 event.target을 해주면 된다.
＊ 입력 태그(input, select, textarea 등)의 내부 값을 가져올 땐 value속성을 사용한다.
＊ 일반 태그들의 내부 값을 가져올 때는 textContent 속성을 사용한다. (빈 값이여도 무조건 문자열''로 반환됨)
＊ 위의 것들을 조합해서 쓰면 되는 거 같다.
＊ 입력창이나 버튼의 경우 focus 메서드를 호출하면 해당 태그가 하이라이트된다.
🚀 이벤트 리스너 추가하기 : 태그.addEventListener('이벤트 이름', 리스너 함수);
<script> const onClickButton = () => { console.log('버튼 클릭'); } const $button = document.querySelector('button'); $button.addEventListener('click',onClickButton); const onInput = (event) => { console.log(event.target.value) } const $input = document.querySelector('input'); $input.addEventListener('input',onInput); </script>
5. 순서도 최적화 하기
✨ 여러 개의 if문을 하나로 합치려면 진리표를 활용한다.
🌟 완성
🚀 word와 newWord는 자바스크립트 내부에서만 사용하는 변수다. 먼저 input태그에 값을 입력하면 이벤트가 발생하여 입력된 값이 newWord변수에 저장이 되고, 후에 button을 클릭하면 이벤트가 발생하여 !word면 word=newWord;를 해주고 그 값을 화면에 보여준다.
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>끝말잇기</title> </head> <body> <div><span id="order">1</span>번째 참가자</div> <div>제시어 : <span id="word"></span></div> <input> <button>입력</button> <script> const number = Number(prompt('몇 명이 참가하나요?')); const $id = document.querySelector('#id'); const $word = document.querySelector('#word'); const $order = document.querySelector('#order'); const $input = document.querySelector('input'); const $button = document.querySelector('button'); let word; //제시어 let newWord; //현재 단어 const onClickButton = () => { if(!word){ word = newWord; $word.textContent = word; const order = Number($order.textContent); if(order+1 > number){ $order.textContent = order; }else{ $order.textContent = order + 1; } $input.value = ""; $input.focus(); } else{ if(word[word.length-1] === newWord[0]){ word = newWord; $word.textContent = word; const order = Number($order.textContent); if(order + 1 > number){ $order.textContent = 1; } else{ $order.textContent = order + 1; } } else { alert('올바르지 않은 단어입니다!') } $input.value=""; $input.focus(); } } const onInput = (e) => { newWord = e.target.value; } $input.addEventListener('input',onInput); $button.addEventListener('click',onClickButton); </script> </body> </html><!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>끝말잇기</title> </head> <body> //순서도 최적화 한 거! <div><span id="order">1</span>번째 참가자</div> <div>제시어: <span id="word"></span></div> <input type="text"> <button>입력</button> <script> const number = Number(prompt('몇 명이 참가하나요?')); const $button = document.querySelector('button'); const $input = document.querySelector('input'); const $word = document.querySelector('#word'); const $order = document.querySelector('#order'); let word; // 제시어 let newWord; // 새로 입력한 단어 const onClickButton = () => { if (!word || word[word.length - 1] === newWord[0]) { // 제시어가 비어 있는가? // 비어 있다. word = newWord; // 입력한 단어가 제시어가 된다. $word.textContent = word; const order = Number($order.textContent); // 현재 순서 if (order + 1 > number) { $order.textContent = 1; } else { $order.textContent = order + 1; } } else { // 올바르지 않은가 alert('올바르지 않은 단어입니다!'); } $input.value = ''; $input.focus(); }; const onInput = (event) => { newWord = event.target.value; }; $button.addEventListener('click', onClickButton); $input.addEventListener('input', onInput); </script> </body> </html>
