끝말잇기 (word-relay) _재료

끝말잇기 코딩을 위해 필요한 개념

 

1. prompt, confirm, alert

처음 웹 페이지 입장 시 창이 뜨는 경우는 3가지로 나눠볼 수 있다.

1) prompt : 입력값을 받는 경우

prompt("몇 명이 참가하나요?") 

2) confirm : 예, 아니오로 대답하는 경우

confrim("x명이 참가하나요?")

3) alert : 확인으로만 대답하는 경우

alert("끝말잇기 게임입니다")

 

 

2. Number, ParseInt, ParseFloat

data type이 숫자가 아닌 것을 숫자로 바꾸는 역할을 한다

ParseInt는 정수로만 바꾼다.

ParseInt는 해당 문자열에 있는 정수를 뽑아낼 수 있다.

console.log(ParseInt('3월'))
3

console.log(Number('3월'))
NaN

바로 위에서 살펴본 prompt에서 받는 값은 문자열로 저장되는데, Number을 활용하면 이 값을 숫자로 바꿀 수 있다.

let number = Number(prompt("몇 명이 참가하나요?"))

number라는 변수는 prompt로 받은 문자열을 Number을 통해 숫자로 바꿔서 저장한다.

 

3. div, span tag, id, class ; html에서 자세히 

https://ssooccoo.tistory.com/3

 

4. document.querySelector(' ')

자바스크립트에서 html의 tag, class, id를 불러올 때 쓰는 객체이다.

document.querySelector('#word')
document.querySelectorAll('span')

querySelector은 해당 tag,class,id의 가장 위에 있는 것만 선택하는 반면,

cf. id는 전체에서 하나만 설정해야한다

querySelectorAll은 해당하는 모든 선택자를 다 선택하며, [ ]을 통해 그 중 특정한 선택자를 고를 수도 있다.

 

5.  text.Content, value

tag의 내부값

<div><span id = order> 1</span> 번째 참가자</div>
제시어 : <span id =word> </span>
<input type = "text"> 
<button> 입력 </button>

 id가 order인 tag <span> </span> 사이에 들어가는 내용(내부값)을 콘솔(console)창에서 확인하고 싶다면

console.log(document.querySelector('#order').textContent)

 id가 order인 tag <span> </span> 사이에 들어가는 내용(내부값)을 변경하고 싶다면, 따옴표 안에 내용을 넣으면 된다.

document.querySelector('#order').textContent = " "

value와 textContent는 기능은 같다.

아래는 어떤 tag에서 사용할 수 있는지에 대한 표이다.

textContent	value
button div span	input select textarea

 

6. addEventListenter('이벤트', 함수)

tag에 이벤트를 달 때 사용하는 method이다.

document.querySelector('input').addEventListener('input', 함수)
document.querySelector('button').addEventListner('click', 함수)

7. let, const

let, const 모두 변수를 설정하는 방식이다.

const의 경우 변경이 불가능하지만

let은 변경이 가능하다. 따라서 처음 변수 설정시 아무 것도 지정하지 않아도 된다.

const $input = document.querySelector('input')

let word;
let newWord;

word = 
newWord = 

변수를 변경하려는 경우에는

변수명 = 

으로 바꿀 수 있다.

 

 

8. 함수

function 함수명 (매개변수){
 }

const 함수명 = (매개변수) =>{
 }

*함수와 함수 호출은 다르다

함수자체를 넣어야하는 경우에는 함수명만 적어야하지만,

함수를 호출해서 함수를 실행한 값을 넣어야한다면 함수명(매개변수)로 적어야한다.

function hi(){
	console.log(hi)
    }

1. hi
2. hi()

1번의 경우는 hi함수 자체를 불러온 것이지만,

2번의 경우는 hi함수를 실행하고 난 다음 return값인 undefined를 불러온 것이다

(이 내용은 추후에 따로 포스팅)

 

9. event.target.textContect, event.target.value ---> 불확실함 (보충 필요)

해당 이벤트가 타겟트 하는 태그의 내용값을 선택하는 방법

onInput이라는 함수는 input tag에 input이라는 이벤트가 발생하는 경우 실행된다.

input이라는 이벤트는 사용자가 글자를 넣는 순간마다 발생한다.

<input type="text">
<button> 입력 </button>

let word;
let newWord;

const onInput = (event) => {
	newWord = event.target.value;
    console.log(newWord);
    }
    
const onClick = () => {
	word = newWord;
    }
    
document.querySelector('input').addEventListener('input',onInput);
document.querySelector('button').addEventListener('click',onClick);

여기서 궁금했던 게 있었다.

찾아보니 change라는 이벤트가 있는데, 왜 input이었을까!

우선 change는 요소값 변경후 포커스를 잃은 때 발생한다는 점에서 input과 다르다.

그런데 위 코딩에서는 change, input 두 이벤트 모두 동일한 결과를 발생시킨다.

 

내 예상에는

(input이벤트에 의해)사용자가 입력하는 순간마다,

(onInput함수에 의해)event.target.value(input의 value)가 newWord 변수에 저장된다.

 

이때, click이벤트가 발생하는 경우의 event.target.value는 사용자가 의도한 완성된 단어일 것이다.

따라서 click이벤트 발생시 newWord에 저장되는 event.target.value는 사용자가 의도한 단어이고,

이는 onClick함수에 의해 word에 저장된다.

 

따라서 최종적으로 변수에 저장된 내용은 change이벤트 사용시의 event.target.value와 같아지는 것이다.

 

10. 문자열.length, 문자열[ ] 

문자열의 길이를 알기 위해서는 문자열.length를 하면 된다.

문자열에서 n번째 문자를 알기 위해서는 문자열[ ]를 사용하면 된다.

이 경우 문자열의 마지막 글자를 알기 위해서는 문자열[문자열.length-1]을 사용할 수 있다.

(코딩에서는 항상 0번째가 시작임)

 

11. ||(or) &&(and)

 

12. focus( )

커서를 깜빡 거리도록 하는 방법이다.

document.querySelector('input').focus()

input 태그에 커서가 깜빡거리게 된다.

 

13. if, else

if(조건문){

  }else{
  
  }