1009 TIL

오늘도 천천히 천천히 이해하자! 아자!
참조: 제로초 ES2021 자바스크립트 강좌 유튜브

HTML 태그 선택하기

prompt 함수로 입력받았다면 이번엔 입력창 (input 태그)으로 입력받겠습니다. 다만, 입력창은 HTML태그이므로 자바스크립트에서 이 입력창을 가져와야 합니다.

보통 자바스크립트에서 HTML 태그를 가져오는 것을 선택한다고 표현합니다. 선택하기 위해서는 특별한 함수와 특별한 방법을 사용합니다.
특별한 함수는 document.querySelector 이고, 사용 방법은 다음과 같습니다.

document.querySelector('선택자')

여기서 '선택자'라는 용어가 나옵니다. 선택자는 HTML 태그를 선택할 수 있게 도와주는 문자열입니다. 선택자에 관해 좀 더 알아봅시다. script태그 내부를 다음과 같이 바꿉니다.

<script>
cosnt $input = document.querySelector('input');
console.log($input);
</script>

이렇게 하고 HTML을 실행하면

이렇게 input 쪽이 선택되게 됩니다. input 앞에 붙어있는 $는 어떠한 특수한 기능을 하는 것이 아니라 HTML태그를 변수에 붙이게 되면 구분을 위하여 $를 붙여주는 게 좋습니다. 여러 개의 태그를 동시에 쓴다고 하면 $$를 붙이는게 좋다.

선택자에 button 태그를 넣으면 [입력] 이라는 버튼이 선택이 됩니다.

태그가 여러 개 있는 경우도 있습니다. 이때 태그를 모두 선택하고 싶다면 document.quetySelectorAll 함수를 사용하면 됩니다.

document.quetySelectorAll이라는건 전부 다 선택을 하는데 document.quetySelector는 여러개의 중복태그가 있다고 하더라도 제일 처음 것만 선택합니다. 그렇기 때문에 id 가 필요합니다. id는 중복으로 사용하지 않습니다. 앞에 #아이디 명 이렇게 작성합니다.
그리고 class가 붙은 값을 가져오고 싶다면 .클래스 명이렇게 해야합니다.

그리고 중요한 게 있는데

cosnt $span = document.querySelector('div span');
console.log($span);

이렇게 작성하게 되면 div의 자손을 찾는 선택자가 됩니다. 후손들을 찾는 태그가 되는데 만약에 자식만 찾고싶다면 'div>span' 이렇게 해주면 됩니다.

이벤트 리스너 달기 (콜백함수)

끝말잇기를 할 때 제시어를 써야하는 부분과 입력버튼은 상호작용하는 이벤트가 실행되어야합니다. 그러기 위해서 필요한 것이 .addEventListner입니다.

글자입력하는 이벤트

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

글자를 입력하는 이벤트는 'input'입니다. 그리고 뒤에 이름없는 함수를 넣어주면 앞으로 input(글자 입력) 할때마다 함수 부분이 계속 실행될 것입니다.

마찬가지로 버튼 이벤트를 만들어보겠습니다.

document.querySelector('button').addEventListner('click', function(){
  console.log('버튼 클릭');
});

이렇게 만들면 됩니다. 여기서 콜백함수를 만들어보겠습니다.

const onClickButton = () => {
  console.log('버튼 클릭');
};
const $button = document.querySelector('button');
$button.addEventListener('click', onClickButton);

태그.addEventListner('이벤트 이름', 리스너함수);
여기서 태그를 document.querySelector('button')으로 선택했습니다. 이 태그에 addEventListener를 붙여 이벤트를 연결할 수 있습니다. 클릭 이벤트의 이름은 click 입니다. 버튼을 클릭하면 onClickButton 함수가 실행됩니다. 이때 onClickButton 대신 onClickButton()를 넣으면 안됩니다. ()를 붙이면 클릭과 상관 없이 함수가 실행됩니다. 함수 자체를 넣어야 하고, ()를 붙여 함수를 실행해서는 안 된다는 점에 주의하세요.

이때 onClickButton 같은 함수를 콜백 함수라고 합니다. 콜백 함수는 동작이 실행되고 난 뒤에 연이어서 추가로 실행되는 함수를 의미합니다. 버튼을 클릭한 후에 onClickButton이 추가적으로 실행되므로 콜백 함수라고 볼 수 있습니다.

변수를 사용하는 대신 다음과 같이 한 번에 코딩할 수도 있습니다. 다만, 변수 사용을 더 추천합니다. 더 읽기 쉽고 나중에 변수를 재사용할 수도 있기 때문입니다.

const onClick = function() {
  console.log('버튼 클릭');
}
document.querySelector('button').addEventListener('click', onClick);

이렇게 쓰는 걸 추천. 여기서 화살표 함수나 이런것들을 통해 짧게 줄일수도 있지만 function() 와 ( ) => 화살표 함수는 같으면서 다르기때문에 이렇게 하는걸 추천하지는 않습니다.

버튼과 비슷하게 input 태그를 선택한 뒤 input 이벤트를 연결합니다. onInput 함수에 조금 독특한 점이 있는데요. 함수의 매개변수로 event가 존재한다는 점입니다. 이벤트 리스터에 넣응 함수에는 매개변수로 이벤트에 관한 정보가 제공됩니다. (addEventListner가 제공) 우리는 여기서 event.target.value 로 input 태그에 입력한 값을 알아낼 수 있습니다.

참고로 event는 매개변수이므로 다른 이름으로 지어도 됩니다. 아래처럼 e 로 해도 되고 전혀 관련없는 hello로 지어도 됩니다만 hello로 지으면 코드를 보는 사람들이 헷깔리므로 보통 event라고 이름을 짓습니다.

const onInput = (e) => {
  console.log('글자 입력', e.target.value);
}; //아래와 같은 코드
const onInput = (event) => {
  console.log('글자 입력', event.target.value);
}; // 위와 같은 코드

어떤 문제를 풀 때 순서도를 생각해야합니다.

다이어그램 그릴 때 필요사이트 -
https://app.diagrams.net/#G1ZDJe8Z2aQckYDn-svltVf9VAldpxyjME

함수가 함수를 리턴하는 함수를 고차 함수(high order function) 라고 합니다. 중복 제거뿐만 아니라 기존 함수를 확장할 때도 고차함수를 사용합니다.

휠 눌러서 드래그 하면 없애고 싶은 부분만 없앨 수 있다.