PROJECT 03 >>>
끝말잇기 게임
# 새로배우게된 것
1. script선언문의 위치
- 코드는 위에서 아래로 순차적으로 실행되므로, HTML 화면의 구성을 이루는 코드들의 위에 먼저 그려지고 나서 script선언문이 위치해야 한다.
2. prompt() 입력값의 문자형
- 무조건 String이다. 따라서 입력값이 숫자라면, Number( prompt( ) ) 메서드를 이용하여 형변환을 해줘야 함.
3. documnet.querySelector( '선택자' );
- 단일 요소를 선택할 경우 -> '선택자' 자리에는 div, button 등 태그이름이 온다.
- 복수의요소를 선택할 경우 -> document.querySelectorAll ( '선택자' )
=> '선택자' 자리에 들어간 태그가 모두 NodeList에 저장된다. 배열이 아님에 주의.
- 선택자 안에있는 선택자를 한번에 선택해오는 것도 가능함. 공백으로 구분한다.
document.querySelector( 'div span' ); // div태그 안에 있는 span태그의 요소를 선택해 옴.
4. id와 class는 선택해올 때 다르게 표기해야 한다.
1) id => 하나의 요소에만 지정할 수 있다. 불러올 때 # 을 붙여서 쓴다.
document.querySelector( '#id명' );
2) class => 복수의 요소에 지정할 때 사용한다. 불러올 때 . 을 붙여서 쓴다
document.querySelector( '.class명' ); // 여러요소를 선택해오므로, 마찬가지로 NodeList 형식으로 저장된다.
5. 태그를 저장하는 변수명 정하기
- 앞에 $ 기호를 붙여 구분를 쉽게하자. ( 책에서 나왔는데 좋아보임. )
$input = document.querySeelctor('input');
6. addEventListener( '이벤트명' , '함수명' );
1) '이벤트명' => cilick, input 등. ( on을 붙이지 않음 )
2) '함수명' => 괄호를 붙이지 않음! // 괄호를 붙이면 '이벤트'의 발생여부에 상관없이 해당 함수가 실행된다.
7. 함수생성의 간소화된 형태
const funcName = ( 매개변수 ) => { . . . };
8. undefined
- if문 안에 들어가면 => false 값을 가짐.
=> 따라서, !undefined == true
9. value or textCotent
1) value => 입력태그에서의 입력값을 불러올 때 사용함.
=> input / select / textarea
2) textContent => 일반태그들의 내부 값을 불러올 때 사용함.
=> div / span / button
10. 순서도를 그리는 연습하기.
- 프로그래밍 적 사고를 하는데에 도움이 된다.
- 사용자의 이벤트가 필요한 곳에서 순서도를 끊는다!
#코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>!WORD-RELAY WEBGAME!</title>
</head>
<body>
<div><span id="order">1</span>번째 참가자</div>
<div>제시어: <span id="word"></span></div>
<input type="text">
<button>입력</button>
<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 $order = document.querySelector('#order');
const onClickButton = () => {
if (!word || word[word.length-1] === newWord[0]) {//제시어가 비어있다. or 끝말을 이음
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();
};
const onInput = (event) => {
newWord = event.target.value;// 입력한 단어를 현재단어로 설정
};
$button.addEventListener('click',onClickButton);
$input.addEventListener('input',onInput);
</script>
</body>
</html># 출처
Let's Get IT 자바스크립트 프로그래밍 3장.
DOM객체를 활용한 끝말잇기 웹게임만들기!
Let's Get IT 자바스크립트 프로그래밍: 3장 DOM 객체 다루기_끝말잇기 게임
thebook.io
'MINI PROJECT > JavaScript' 카테고리의 다른 글
| 대출계산기 (0) | 2021.09.05 |
|---|---|
| 명언제조기 (0) | 2021.08.22 |
| 공포의 쿵쿵따게임! (0) | 2021.08.18 |
| 무작위로 HEX 코드를 생성해 배경색으로 설정하기 (0) | 2021.08.16 |
| 버튼을 클릭하면 배경색이 바뀌도록 설정하기 (0) | 2021.08.16 |
댓글