반응형
프로그램 절차를 만들 때의 원칙
- 프로그램의 절차 수는 정해져 있어야 한다
- 각 절차는 항상 같은 내용이어야 한다
- 모든 가능성을 고려해야 한다
- 예는 절차를 검증할 때 사용한다
끝말잇기 절차
- 게임에 몇 명이 참가할지 선택한다
- 참가자의 순서를 정한다 (편의상 숫자로 한다)
- 첫 번째 사람이 어떤 단어를 말한다
- 다음 사람이 어떤 단어를 말한다
- 절차 4에서 말한 단아가 맞는지 판단한다
- 맞다면 다음 사람이 어떤 단어를 말한다
- 맞지 않다면 틀렸다고 표시한다
- 게임을 계속 진행한다
<!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');
let newWord; // 현재 단어
let word; // 제시어
const onInput = (e) => {
newWord = e.target.value;
console.log(newWord);
};
const onClickBtn = () => {
if (!word) {
// 제시어가 비어 있는가?
// 비어있음
word = newWord; // 입력한 단어가 제시어가 됨
$word.textContent = word;
} else {
// 비어 있지 않음
}
};
$input.addEventListener('input', onInput);
$button.addEventListener('click', onClickBtn);
</script>
</html>반응형
'개발 이야기 > 개발 도서' 카테고리의 다른 글
| 제로초 자바스크립트 입문 <계산기> (0) | 2024.03.19 |
|---|---|
| 제로초 자바스크립트 입문 <끝말잇기 2> (0) | 2024.03.18 |
| 제로초 자바스크립트 입문 <window 객체> (0) | 2024.03.14 |
| 제로초 자바스크립트 입문 <다양한 DOM 속성> (0) | 2024.03.14 |
| 제로초 자바스크립트 입문 <이벤트와 이벤트리스너> (0) | 2024.03.13 |