반응형
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>끝말잇기</title>
</head>
<body>
<div><span id="order">1</span>번째 참가자</div>
<div>제시어: <span id="word"></span></div>
<input type="text" />
<button>입력</button>
<script></script>
</body>
<script>
const number = Number(prompt('참가자는 몇 명인가요?'));
const $input = document.querySelector('input'); // input 태그
const $button = document.querySelector('button'); // button 태그
const $word = document.querySelector('#word');
const $order = document.querySelector('#order');
let newWord; // 현재 단어
let word; // 제시어
const onInput = (e) => {
newWord = e.target.value; // 입력한 단어를 현재 단어로 저장
console.log(newWord);
};
const onClickBtn = () => {
if (!word) {
// 제시어가 비어 있거나 입력한 단어가 맞는 단어인가 ?
if (!word || word.at(-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(); // 입력창으로 커서를 위치시킴
}
}
};
$input.addEventListener('input', onInput);
$button.addEventListener('click', onClickBtn);
</script>
</html>
정리
- 순서도 작성
- 프로그래밍에서 가장 중요한 것은 코드를 작성하기 전에 "올바른 순서도를 그리는 것"
- 순서도를 한 번에 완성할 수 없고 코딩하면서 계속 수정해야 한다
- 하지만 원칙을 지키면서 순서도를 설계한다면 수정하는 횟수와 절차를 최소화 할 수 있고, 결과적으로 코딩 속도도 빨라진다
- 프로그램의 절차 수는 정해져 있어야 한다
- 각 절차는 항상 같은 내용이어야 한다
- 모든 가능성을 고려해야 한다
- 예는 절차를 검증할 때 사용한다
- 사용자의 이벤트 (버튼클릭, 입력창 글자 입력 등)가 필요한 곳에서 순서도를 끊어야 함을 잊지 마세요!
- 순서도 최적화
| 구분 | 첫 번째 조건 | 두 번째 조건 | 결과 |
| OR 관계 | true | true | true |
| true | false | true | |
| false | true | true | |
| false | false | false | |
| AND 관계 | true | true | true |
| true | false | false | |
| false | true | false | |
| false | false | false |
쿵쿵따 웹 게임 만들기 <과제>
규칙
- 입력 단어를 세글자로 고정
- 세글자가 아니면 다시 입력
- 처음에 참가자가 몇 명인지 선택할 때 사용자가 취소를 누르면 다음 코드 실행 되지 않음
반응형
'개발 이야기 > 개발 도서' 카테고리의 다른 글
| 제로초 자바스크립트 입문 <숫자 야구> (0) | 2024.03.22 |
|---|---|
| 제로초 자바스크립트 입문 <계산기> (0) | 2024.03.19 |
| 제로초 자바스크립트 입문 <끝말잇기 1> (0) | 2024.03.15 |
| 제로초 자바스크립트 입문 <window 객체> (0) | 2024.03.14 |
| 제로초 자바스크립트 입문 <다양한 DOM 속성> (0) | 2024.03.14 |