Let's Get IT 자바스크립트 프로그래밍 - 끝말잇기, 쿵쿵따 만들기(개념 추가)
* 출처
https://thebook.io/080270/part02/ch03/01-03/
Let's Get IT 자바스크립트 프로그래밍: 3.1 순서도 그리기 - 3
thebook.io
끝말잇기
- 참가자 수 결정
- 참가자가 말하는 말의 마지막 글자로 이어서 연결
- 참가자 수 반복 (예를 들어 3명일 경우 3 -> 2 -> 1 -> 3 -> 2로 반복)
끝말잇기 순서도
* 콜백함수
- 특정 작업이 실행되고 난 뒤 추가로 실행되는 함수
- EX) 버튼이 클릭되고 실행되는 함수 -> onClickButton, onInput 같은 함수
* onInput 함수 내 매개변수로 event 존재
- event.target (이벤트가 처음 발생한 대상 (출처 : https://developer.mozilla.org/ko/docs/Web/API/Event ))
코드
<!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 class="target">입력</button>
<script>
const people = Number(prompt("참가자는 총 몇 명인가요?"));
const $input = document.querySelector('input');
const $button = document.querySelector('button');
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 > people) {
$order.textContent = 1;
} else {
$order.textContent = order + 1;
}
$input.value = '';
$input.focus();
} else {//올바르지 않다.
alert('올바르지 않다.')
$input.value = '';
$input.focus();
}
}
const onInput = (event) => {
newWord = event.target.value; //입력한 단어를 현재 단어로
}
$button.addEventListener("click", onClickButton);
$input.addEventListener('input', onInput);
</script>
</body>
</html>
* 결과
쿵쿵따
- 참가자 수 결정
- 참가자가 말하는 말의 마지막 글자로 이어서 연결
- 참가자 수 반복 (예를 들어 3명일 경우 3 -> 2 -> 1 -> 3 -> 2로 반복)
[추가]
- 글자수는 3글자만 가능
- prompt로 나오는 부분(참가자 몇 명인지 묻는 것) 취소 버튼 누를 경우 아예 입력 안 되게 할 것
코드
<!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 class="target">입력</button>
<script>
const people = Number(prompt("참가자는 총 몇 명인가요?"));
if (people) {
const $input = document.querySelector('input');
const $button = document.querySelector('button');
const $word = document.querySelector('#word');
const $order = document.querySelector('#order');
let word; //제시어
let newWord; //현재 단어
const onClickButton = () => {
if (newWord.length === 3 && (!word || word[word.length - 1] === newWord[0])) { //제시어가 비어있는가? 올바른 단어가 입력 되었는가?
word = newWord;
$word.textContent = word; //화면에 바뀐 것 표시
const order = Number($order.textContent);
if (order + 1 > people) {
$order.textContent = 1;
} else {
$order.textContent = order + 1;
}
$input.value = '';
$input.focus();
} else {//올바르지 않다.
alert('올바르지 않다.')
$input.value = '';
$input.focus();
}
}
const onInput = (event) => {
newWord = event.target.value; //입력한 단어를 현재 단어로
}
$button.addEventListener("click", onClickButton);
$input.addEventListener('input', onInput);
}
</script>
</body>
</html>
* 결과