js - 끝말잇기 게임

JavaScript 공부 시작

프로그래밍 언어를 공부하는 가장 효율적인 방법은, 문법만 달달 외운다고 되는 게 아니라, 공부한 언어를 실전에 사용해 보는 것 만큼 효과적으로 공부할 수 있는 방법이 없다고들 한다.
누군가에게 배워서 코드만 따라치는 게 아닌, 내가 직접 구현해보고 싶은 부분을 구글링하고, 인강을 들어서 배웠던 것을 응용해서 코드를 직접 만들어 보는 것.

그래서 차근차근 쉬운 것부터 구현해 보기로 했다.

끝말잇기 게임

필요한 js 문법

• 특정 태그나 id, class를 찾아 불러올 때
  =>querySelector('태그이름'or'클래스,아이디');

const $button = document.querySelector('button'); 
//=> 태그이름이 'button'인 요소를 찾음
const $word = document.querySelector('#word'); 
//=> id 이름이 'word' 인요소를 찾음
const $className = document.querySelector('.classname');
//=> class 이름이 'classname'인 요소를 찾음

-사용자에게 원하는 문자, 숫자를 받아올 때
=> prompt('문자');
: prompt로 받는 문자는 정수를 입력해도 문자열로 받아오기 때문에 정수값으로 사용하기 위해서는 문자열을 정수로 변환하는 과정을 거쳐야 한다.

const number = Number(prompt('숫자를 입력하세요'));
const number = parseInt(prompt('숫자를 입력하세요'));

-이벤트리스너 사용법
=> 이벤트를 주고싶은 태그에 'addEventListener'를 줌

$button.addEventListener('click', onClickButton);

=>이벤트를 주고 싶은 태그.addEventListener('이벤트를 주고싶은 동작', 작동할 함수이름);
=>$button을 'Click'하면 'onClickButton'함수가 작동된다.

-마우스 이벤트 아닌 키보드 이벤트를 주고싶을 때
=>button을 마우스로 클릭하지 않고 키보드의 'Enter'키로 작동시키고 싶을때

const onInputEnter =(e) =>{
	if(e.key === 'Enter'){
    	$button.click();
    }
}
$input.addEventListener('keydown',onInputEnter);

-사용자가 input창에 키보드로 작성하는 내용을 컴퓨터가 인식하게 하려면
=> target.value;

const onInput = (e) =>{
	newWord = e.target.value;
}

=>e는 이벤트가 일어난 곳 ,
e.target.value 는 그 이벤트의 값을 불러올때 사용.

-태그의 값을 변경시킬 때 : textContent

$word.textContent = word;
//=>변수 word의 값으로 $word의 값을 변경한다.

=>주의할점, 일반 태그들은 대부분 'textContent'로 값을 변경하지만
'input' 태그 처럼 사용자에게 값을 받는 것들은 'value'를 사용

$input.value = '';
//=> input태그의 값을 빈요소로 바꾼다

-순서정하기(if문 사용)
=>현재 순서 + 1이 게임을 하는 인원수보다 크면 다시 처음으로 돌아감

order + 1 > number

또는

order === number 

=>number는 처음 몇명이 게임을 진행할건지 사용자에게 받았던 정수
$order는 화면에 표시 되어 있는 현재 순서

let order = parseInt(number.textContent);
if(order + 1 > number) or
  (order === number) {
	$order.textContent = 1;
} else {
	$order.textContent = order + 1;
}