[JavaScript] 끝말잇기 만들기_1/2

See the Pen [Java Script] 끝말잇기 by limhaneul2244 (@limhaneul2244) on CodePen.

---

 

사용자와 상호작용하는 세가지 함수

 

1. prompt

기본 형식

prompt('사용자에게 표시할 메시지');

 

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

//prompt만 사용했을 경우 입력창에 숫자를 기입하면 휘발성으로 날아가기 때문에 변수를 통해 값을 저장해준다.

 

const number = parseInt(prompt('몇 명이 참가하나요?'),10);

prompt 에 숫자를 기입해도 string으로 인식하기 때문에 parseInt를 사용해 숫자로 바꿔주었다.

 

2. alert

메시지를 사용자에게 알릴 때 사용함

기본형식

alert('사용자에게 표시할 메시지');

3. confirm

사용자에게 의사를 물어볼 때 사용함

기본형식

confirm('사용자에게 표시할 메시지');

---

선택자 선택하기

 

1. querySelector('선택자');

Java Script 에서 HTML 태그를 가져오는 것
단, 첫번째 선택자만 선택된다.

document.querySelector('선택자');

 

2. querySelectorAll('선택자');

Java Script 에서 태그 모두 선택하기

document.querySelectorAll('선택자');

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

    <script>
        const $$button = document.querySelectorAll('button');
        console.log($$button);
    </script>

button 3개  선택됨

3. querySelector('#아이디');

id는 하나의 태그에만 사용할 수 있다.

 

4. querySelectorAll('.클래스');

class는 동일한 효과를 동시에 적용할때 사용하며, 동시 적용이 가능하다.

 

5. querySelector('선택자 내부선택자 내부선택자');

 

---

태그에 이벤트 달기

 

이벤트 리스너

자바스크립트가 HTML에서 발생하는 이벤트를 감지할 수 있게 함

 

document.querySelector('input').addEventListener('input', function() {
	console.log('글자 입력');
});

//아래와 동일하다(화살표 함수)

document.querySelector('input').addEventListener('input', () => {
	console.log('글자 입력');
});

 

 

---

사용자가 어떤 글자를 입력했는지 확인하려면

 

document.querySelector('input').addEventListener('input', (event) => {
	console.log('글자 입력', event.target.value);
});
        
//입력버튼을 클릭하면 아래의 함수 실행
document.querySelector('button').addEventListener('click', function (){
	console.log('버튼 클릭');
});

 

 

function () {} 

() => {}

//으로 변경한 뒤 매개변수.target.value의 객체로 접근.

 

📌매개변수: 함수를 실행하기 위한 입력값

입력한 글자값을 확인 할 수 있다.

 

끝말잇기 만들기2/2 보러가기

[JavaScript] 끝말잇기 만들기_2/2