HTML 화면 + 값 입력 받기
<!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>
</html>기본적인 HTML로 간단한 화면을 만드는 것으로 시작해보자.
실행 결과 이런 간단한 화면이 출력된다. 이제 순서도를 따라 프로그램을 작성해보자.
<script>
const number = prompt('몇 명이 참가하나요?');
const realNumber = Number(number);
//const number = Number(prompt('몇 명이 참가하나요?'));
</script>첫번째 절차는 '몇명이 참가할지 선택한다.' 이다. prompt 함수를 사용하여 직접 프로그램에 값을 전달할 수 있다.
자바스크립트에서 실행되는 함수이므로 script 태그 내부만 수정하면 된다.
입력한 값을 프로그램이 전달 받는다. 하지만 이것만으로는 아무런 기능을 하지 않는다.
이렇게 입력 받은 prompt 함수의 값은 String이다. 이 문자열을 숫자로 활용하기 위해 Number 함수를 이용하자.
HTML태그 선택하고 이벤트 달기
이제 다음 절차인 '첫번째 사람이 어떤 단어를 말한다'를 프로그래밍 해 보자. 입력창을 이용해 입력 받도록 하겠다. 입력창은 HTML태그이므로 이 입력창을 자바스크립트에서 가져와야한다. 이를 선택한다고 표현하는데, 이를 위해 특별한 함수와 방법을 사용한다.
document.querySelector('선택자')
document.querySelectorAll('선택자')여기서 선택자란 HTML 태그를 선택할 수 있게 도와준다.
//선택자
<button class="btn" id="a">버튼1</button>
<button class="btn" id="b">버튼2</button>
<button class="btn" id="c">버튼3</button>
<script>
document.querySelector('button.btn'); // document.querySelector('.btn');
document.querySelectorAll('button.btn');
document.querySelector('button#a'); // document.querySelector('#a');
</script>querySelectorAll을 통해 class가 btn 인 버튼을 모두 선택할 수 있는데 반해 querySelector을 이용하면 첫번째 버튼만 선택할 수 있다.
또한 id는 고유의 값이다.
이렇게 태그를 선택하고 사용자가 태그와 상호작용을 할 때 이벤트가 발생한다. 예를 들어 input태그에 글자를 입력하면 input이라는 이벤트가, 버튼을 클릭하면 click 이라는 이벤트가 발생한다. 이를 이벤트리스터라는 것을 추가하여 자바스크립트가 HTML에서 발생하는 이벤트를 감지할 수 있게 만들어야한다.
document.querySelector('button').addEventListener('click', function());첫 단어를 입력한 사람인지 판단하기
<script>
const number = Number(prompt('몇 명이 참가하나요?'));
const $button = document.querySelector('button');
const $input = document.querySelector('input');
const onClickButton = () => {
};
const onInput = (event) => {
};
$button.addEventListener('click', onClickButton);
$input.addEventListener('input', onInput);
</script>number변수로 사람의 수를 저장했기 때문에 순서를 부여하는 절차에 대한 코딩은 따로 할 필요가 없다. 이제 어떤 단어를 입력한 사람이 첫 단어를 입력한 참가자인지 아닌지를 판단해야한다. 여기서, 참가자의 입력이 없이는 프로그램이 재개되지 않는다. 사용자가 이벤트를 발생시키지 않으면 다음 절차로 넘어가지 않으므로 중간에 순서도를 끊어주는 것이 좋다.
입력버튼 클릭이라는 이벤트가 발생하면 첫 단어를 입력한 참가자인지를 판단해야 한다. 그러므로 첫 번째 타원을 마름모로 수정해야한다.
첫번째 참가자인가?
- 예 -> 입력된 단어가 제시어가 된다
- 아니오 -> 입력한 단어가 올바른가? -> 입력한 단어가 제시어가 된다
이제 입력 버튼을 클릭한 사람이 첫 단어를 입력한 참가자인지 코드로 판단해야한다. 첫단어를 저장하고, 그 다음 단어와도 비교해서 올바른 단어인지 판단하기 위해 첫 단어를 저장할변수가 필요하다. 기존 코드를 보면 #word 태그가 제시어가 들어갈 자리이지만 제시어가 없으므로 빈값으로 있다. 이 값을 가져와서 변수에 넣으면 된다. #word 태그에 들어간느 제시어가 비어 있다면 아직 아무도 단어를 말하지 않았다는 뜻이므로 첫 번째 참가자인가? 라는 판단을 제시어가 비어있는가?로 바꿔도 무방할 것이다.
<script>
const number = Number(prompt('몇 명이 참가하나요?'));
const $button = document.querySelector('button');
const $input = document.querySelector('input');
const $word = document.querySelector('#word');
let word; // 제시어
let newWord; // 현재 단어
const onClickButton = () => {
if (!word) { // 제시어가 비어 있는가?
word = newWord; // 입력한 단어가 제시어가 된다.
$word.textContent = word; // 화면에 제시어 표시
} else {
// 비어있지않다.
}
};
const onInput = (event) => {
newWord = event.target.value; // 입력하는 단어를 현재 단어로
};
$button.addEventListener('click', onClickButton);
$input.addEventListener('input', onInput);
</script>버튼을 클릭하는 이벤트에 대해 제시어가 비어있는지, 즉 첫번 째 사람인지 판단해보자 .
word 라는 제시어 변수를 선언하고 이가 비어있다면(word가 undefined)라면 입력한 단어가 제시어가 되도록, 아니라면 다른 처리를 하도록 했다. newWord로 현재 입력 중인 변수를 저장해서 word에 대입하는 과정이 필요하다.
그다음 줄에 $word.textContent가 나오는데 이는 태그 내부의 값을 얻거나 수정할 때 사용한다. 처음에는 #word는 빈 값이므로 $word.textContent를 이용해 ''를 얻을 수 있다. textContent는 문자열을 반환하므로 null이나 undefined가 아닌 ''을 반환한다. 반대로
$word.textContent에 특정 값을 대입하면 이 값이 화면에 설정된다.
'javascript > JS웹게임' 카테고리의 다른 글
| 타이머 사용하기-로또추첨기 (0) | 2023.01.26 |
|---|---|
| 반복문 사용하기-숫자야구 게임 (0) | 2023.01.23 |
| 함수 사용하기-계산기 만들기 (0) | 2023.01.21 |
| DOM객체 다루기-끝말잇기 게임(2) (0) | 2023.01.14 |
| 순서도 그리기 (0) | 2023.01.12 |
