순서도 그려보기
순서도에 따라 입력해보기
const number = parseInt(prompt('몇 명이 참가하나요?'));
const $button = document.querySelector('button');
const $input = document.querySelector('input');
const $word = document.querySelector('#word');
let word; //제시어
let newWord; //새로 입력한 단어
const onClickButton = () => {
if(!word) { //제시어가 비어 있는가?
//예 >> 공란이다.
} else {
//아니오 >> 공란이 아니다.
}
};
const onInput = (event) => {
newWord = event.target.value; //글자 입력시 newWord 변수에 단어가 담김
};순서도에 따라 제시어가 비어 있으면 입력한 단어가 제시어가 된다.
const onClickButton = () => {
if(!word) { //제시어가 비어 있는가?
word = newWord; //예 >> 입력한 단어가 제시어가 된다. 데이터를 바꾼 뒤 화면도 바꿔주는 것이 짝을 이룬다.
$word.textContent = word;
$input.value=''; //텍스트 공란으로 만들어주기
} else {
//아니오 >> 공란이 아니다.
}
};
변수를 넣어준 뒤 화면도 바꿔주어야 한다.
바꿔줄 부분을 선택해주어야 하므로
QuerySelector를 통해 보여주고자 하는 부분을 선택한다.
const $word = document.querySelector('#word');
제시어가 올바른 단어인지 판단하기
두번째 사람이 입력한 단어부터 코드가 실행됨
코드가 중복되는것이 프로그램에서 효율적인것은 아니기 때문에 마지막에 코드 수정 예정
틀렸을 때 오류 표시하기
alert('올바르지 않은 단어입니다!');
<!DOCTYPE html>
<html lang="ko">
<head>
<title>끝말잇기</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
</style>
</head>
<body>
<div><span id="order">1</span>번째 참가자</div>
<div>제시어: <span id="word"></span></div>
<input type="text">
<button>입력</button>
<script>
const number = parseInt(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 = newWord; //예 >> 입력한 단어가 제시어가 된다. 데이터를 바꾼 뒤 화면도 바꿔주는 것이 짝을 이룬다.
$word.textContent = word;
$input.value = ''; //입력창 비우기
$input.focus(); //입력창 자동 커서
const order = Number($order.textContent); //order의 순번 가져옴
if (order + 1 > number) { //현재 참가한 순번이 참가한 인원보다 큰가?
$order.textContent = 1; //참가한 인원의 수보다 order가 클 경우 원위치 됨
} else {
$order.textContent = order + 1; //인원수보다 작을 경우 +1 시킴
}
} else {
//아니오 >> 공란이 아니다.
if (word[word.length - 1] === newWord[0]) { //문자열의 마지막자리와 새로 입력한 단어의 첫번째 단어가 같은지
word = newWord; //입력한 단어가 제시어가 된다.
$word.textContent = word;
$input.value = ''; //입력창 비우기
$input.focus(); //입력창 자동 커서
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; //글자를 입력할때마다 newWord에 담김
};
$button.addEventListener('click', onClickButton);
$input.addEventListener('input', onInput);
</script>
</body>
</html>
중복코드 수정하기(순서도 최적화)
제시어가 비어 있는가?, 입력한 단어가 올바른가? 를 논리연산자를 통해 합칠 수 있다.
[JavaScript] 논리 연산자
논리곱 AND (&&) '그리고'를 표현하는 연산자 A && B true && true => true false && false => false true && false =>false (하나라도 거짓이면 거짓) 예시1) 스티브잡스는 한국인이고(AND) 남자이다. //false A..
haneul2244.tistory.com
!word || word [word.length -1] === newWord[0]);
//논리연산자 중 OR을 사용해 중복된 코드를 줄여준다.
$input.value = '';
$input.focus();코드가 중복되므로 else 뒤로 빼서 중복된 코드를 제거한다.
const number = parseInt(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); //order의 순번 가져옴
if (order + 1 > number) { //현재 참가한 순번이 참가한 인원보다 큰가?
$order.textContent = 1; //참가한 인원의 수보다 order가 클 경우 원위치 됨
} else {
$order.textContent = order + 1; //인원수보다 작을 경우 +1 시킴
}
} else {
alert('올바르지 않은 단어입니다!');
}
$input.value = ''; //입력창 비우기
$input.focus(); //입력창 자동 커서
};
const onInput = (event) => {
newWord = event.target.value; //글자를 입력할때마다 newWord에 담김
};
$button.addEventListener('click', onClickButton);
$input.addEventListener('input', onInput);
반응형
SMALL