prompt()를 사용하여 사용자에게 참가 인원이 몇 명인지 값을 받습니다.
이때 prompt()는 값을 반환할 때 String으로 반환하기 때문에 우리는 인원 수를 받아야하니 인원 수는 숫자이기 때문에 Number를 활용하여 숫자형으로 형변환을 해야합니다.
const user = Number(prompt('몇 명이 참가하나요?'));
처음 시작할 때 제시어는 비어있습니다.
비어있는 제시어를 저장할 변수를 만들어 사용해야합니다.
제시어는 입력할 때마다 값이 변해야하기 때문에 상수가 아닌 변수를 사용해야합니다.
let word; //제시어
다음 사람이 인풋창에 단어를 입력했을 때 제시어 자리에 들어가야하니까 이 단어를 사용하기 위해 변수에 담아 저장합니다.
이 또한 입력할 때마다 값이 변해야하니 변수를 사용해야합니다.
let newWord; //현재단어
어떤 단어를 입력했을 때 이 값을 가져와 저장해야합니다.
input태그는 HTML태그이므로 document.querySelector를 사용합니다.
const $input = document.querySelector('input');
input창에 입력한 단어를 감지하는 함수를 만든 후
const onInput = () => {
newWord = event.target.value; //입력 단어를 현재 단어로
}
input창에서 단어를 입력했을 때 발생하는 이벤트를 해당 태그를 선택하여 이벤트리스너함수를 사용해 연결해줍니다.
input창에 글씨 입력하면('input') 이 이벤트(onInput) 실행해줘!
$input.addEventListener('input', onInput);
input창에 발생한 이벤트처럼 start 버튼을 눌렀을 때 어떤 이벤트가 발생할 것인지에 대한 함수를 정의합니다.
const onClickButton = () => {}
버튼 누르면('click') 이 이벤트(onButtonClick) 실행해줘!
$button.addEventListener('click', onClickButton);
앞서 제시어는 let word;
를 선언하여 이 곳에 담기로 하였습니다.
처음 시작할 때는 아무런 입력 값이 없어 제시어가 비어있기 때문에 비어있는지 확인하고 그 제시어를 제시어: 이라고 적혀있는 곳 옆에 보여지도록 해야합니다.
그런 후에 다음 단어가 입력이 되면 다음 단어가 보여지도록 해야합니다. (이때는 제시어가 비어있지 않습니다.)
선언할 때 값을 넣지 않아 undefined가 되어 if문 안에 들어가면 false로 취급되어 실행이 되지 않기 때문에 !word로 조건을 사용합니다.
const onClickButton = () => {
if (!word) {
word = newWord;
$word.textContent = word;
} else {
word = newWord;
$word.textContent = word;
}
}
제시되어있는 단어의 끝글자와 다음 제시된 단어 첫글자가 일치하는지 확인하고 일치하지 않는다면 경고창을 띄웁니다.
이미 제시되어 있는 단어와 비교를 해야하니 앞서 작성한 else 조건 부분에 적어주면 되겠죠?
const onClickButton = () => {
if (!word) {
word = newWord;
$word.textContent = word;
} else {
if (word[word.length - 1] === newWord[0]) {
word = newWord;
$word.textContent = word;
} else {
alert('단어가 올바르지 않습니다.');
}
}
}
처음 prompt창을 통해 사용자에게 참가인원 정보를 받아 변수에 담아 저장했습니다.
이것을 활용하여 몇 번째 참가자 차례인지 확인하겠습니다.
몇 번째 참가자인지 확인하려면 변수를 선언하여 저장합니다.
const $order = document.querySelector('#order'); // HTML에서 변경 될 부분
const order = Number($order.textContent);
참가자가 3명이라고 하면 변수 user
에 3이 저장되어있을겁니다.
현재 몇 번째 참가자인지 저장한 변수(order
)와 실제 참가자 수(user
)를 비교하여 현재 참가자 번호와 실제 참가자 수보다 작으면 +1이 되게 카운팅하고 크다면 현재 참가자 번호를 1로 바꿔줘야합니다.
order + 1 > user //if문 조건
참가자 3명
1번째 참가자 일 때 +1
2번째 참가자 일 때 +1
3번째 참가자 일 때 +1
4번째 참가자(조건에 맞지 않음) -> 1번째 참가자로 변경
const onClickButton = () => {
if (!word) {
word = newWord;
$word.textContent = word;
const order = Number($order.textContent);
if (order + 1 > user) {
$order.textContent = 1;
console.log(order)
} else {
$order.textContent = order + 1;
console.log(order)
}
} else {
if (word[word.length - 1] === newWord[0]) {
word = newWord;
$word.textContent = word;
const order = Number($order.textContent);
if (order + 1 > user) {
$order.textContent = 1;
console.log(order)
} else {
$order.textContent = order + 1;
console.log(order)
}
} else {
alert('단어가 올바르지 않습니다.');
}
}
}
추가적인 부분입니다.
이것을 하지 않으면 인풋창에 입력한 단어가 start 버튼을 눌러도 남아있게 되고 인풋창이 포커싱 되지 않아 수동으로 커서를 두어 단어를 입력해야하는 번거로움이 생깁니다.
단어를 입력하고 start 버튼을 눌렀을 때 입력창의 단어를 지우고 인풋창에 포커스를 하여 바로 단어를 입력하도록 해줍니다.
코드가 중복되는 부분이 있습니다.
'제시어가 비어있는가?'와 '입력한 단어가 올바른가?' 부분을 '제시어가 비어있거나 입력한 단어가 올바른가?'라는 부분으로 줄일 수 있습니다.
'다음 사람에게 순서를 넘긴다.' 부분도 공통적으로 들어가기 때문에 이 부분도 합칠 수 있습니다.
const onClickButton = () => {
if (!word || word[word.length - 1] === newWord[0]) { //제시어가 비어있거나 입력한 단어가 올바른가?
word = newWord; //입력한 단어가 제시어
$word.textContent = word; //화면에 제시어 표시
const order = Number($order.textContent);
if (order + 1 > user) {
$order.textContent = 1;
console.log(order)
} else {
$order.textContent = order + 1;
console.log(order)
}
} else { // 입력한 단어가 올바르지 않다.
alert('단어가 올바르지 않습니다.');
}
$input.focus();
$input.value = '';
}
참고
Let's Get IT 자바스크립트 프로그래밍 (제로초)