<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>끝말 잇기</title>
<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("몇 명이 참가하나요?"), 10);
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 = () => {
// 1. 제시어가 비어있으면
if(!word) {
word = newWord; // 입력한 단어가 제시어가 된다
$word.textContent = word;
const order = parseInt($order.textContent); // 현재 순서
// 현재 순서가 참가인원과 같으면
if (order === number) {
$order.textContent = 1;
} else {
$order.textContent = order + 1;
}
$input.value = "";
$input.focus();
// 2. 제시어가 비어있지 않으면
} else {
// 제시어의 마지막 글자가 새 단어의 첫 글자와 같으면
if (word[word.length - 1] === newWord[0]) {
word = newWord;
$word.textContent = word;
const order = parseInt($order.textContent); // 현재 순서
// 현재 순서가 참가인원과 같으면
if (order === number) {
$order.textContent = 1;
} else {
$order.textContent = order + 1;
}
$input.value = "";
$input.focus();
} else {
alert("올바르지 않은 단어입니다");
$input.value = "";
$input.focus();
}
}
};
const onInput = (event) => {
newWord = event.target.value;
};
$button.addEventListener('click', onClickButton); // 버튼에 클릭 이벤트 걸어놓음
$input.addEventListener('input', onInput); // input 태그에 입력 이벤트를 걸어놓음
</script>
</body>
</html>
주로 사용한 문법
1. document.querySelector를 사용해서 노드를 가져오고, 변수에 저장해서 사용함.
2. 일반적으로 태그 안의 값을 변경할 때는 노드.textContent = 값; 으로 변경하며
input 태그를 비롯한 속성 값을 변경할 때는 노드.value = 값; 의 형식으로 변경한다.
(여는 태그와 닫는 태그 안에 직접 써넣는 값은 textContent, 그 외에는 value로 값을 변경하는 듯 하다)
3. addEventListener(선택자, 함수 이름) 으로 특정 노드에 이벤트를 걸 수 있다.
4. 상수 onInput 에서 newWord 를 event.target.value 의 값으로 넣어주는데,
이 때 target은 $input.addEventListener를 호출한 $input이 된다.
따라서 $input.value를 의미하게 된다.
(event라는 매개변수는 다른 이름으로 바꿔도 상관은 없으나 event가 알아보기 좋음)
'JavaScript' 카테고리의 다른 글
| [모던 자바스크립트 Deep Dive] 6장~7장 정리 (1) | 2022.09.11 |
|---|---|
| [모던 자바스크립트 Deep Dive] 4장~5장 정리 (1) | 2022.09.10 |
| JavaScript [Chapter 5 문서 객체 모델(DOM)] (0) | 2022.06.23 |
| JavaScript [Chapter 4 자바스크립트와 객체] (0) | 2022.06.22 |
| JavaScript [Chapter 3 함수와 이벤트] (0) | 2022.06.21 |