몇 명이 참가할지 선택한다.
prompt()를 사용하여 사용자에게 참가 인원이 몇 명인지 값을 받습니다.
이때 prompt()는 값을 반환할 때 String으로 반환하기 때문에 우리는 인원 수를 받아야하니 인원 수는 숫자이기 때문에 Number를 활용하여 숫자형으로 형변환을 해야합니다.
const user = Number(prompt('몇 명이 참가하나요?'));제시어를 저장할 변수를 만든다.
처음 시작할 때 제시어는 비어있습니다.
비어있는 제시어를 저장할 변수를 만들어 사용해야합니다.
제시어는 입력할 때마다 값이 변해야하기 때문에 상수가 아닌 변수를 사용해야합니다.
let word; //제시어입력한 단어를 저장할 변수를 만든다.
다음 사람이 인풋창에 단어를 입력했을 때 제시어 자리에 들어가야하니까 이 단어를 사용하기 위해 변수에 담아 저장합니다.
이 또한 입력할 때마다 값이 변해야하니 변수를 사용해야합니다.
let newWord; //현재단어단어입력(input 이벤트)
어떤 단어를 입력했을 때 이 값을 가져와 저장해야합니다.
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 자바스크립트 프로그래밍 (제로초)
피드백은 언제나 환영입니다!!!😀
