HTML태그와 이벤트에 대해 알아야 자바스크립트 코드를 이용해 웹으로 보여지는 프로그램을 만들 수 있다!
1️⃣ HTML 태그 작성 및 사용법
1️⃣ HTML 태그란?
HTML태그(tag)는 HTML 요소(elemen)라고도 부르며, HTML문서를 구성하는 기본 단위이다.
<body>
<button>
<input>위 와 같은 것들을 HTML태그라고 하는데 HTML자체적으로 정의되어있는 화면을 구성하는 요소들을 지칭한다.
예를 들어
<button>입력</button>위 코드대로 작성하면 입력 이렇게 입력이라는 글자가 담긴 버튼이 생성된다.
이렇게 작성하면 입력이라는 글자가 적힌 버튼이 생성된다.
2️⃣ html 기본태그 작성
vscode에서는 doc을 쓰고 tab을 누르면 자동으로 기본태그를 작성해준다. 아래는 내 코드에서 작성된 html기본태그이다. 간단하게 알아보고 가자.
<!DOCTYPE html> //웹 문서의 유형을 html로 저장
<html lang="ko">
<head> //문서의 공통적인 특성을 넣는 곳
<meta charset="UTF-8"> // 메타 데이터
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>끝말잇기</title>
</head>- head태그 : 페이지가 로딩될 때 웹브라우저에는 보이지 않는 부분. 타이틀, CSS링크, 파비콘링크, 메타데이터링크가 담겨있다.
- body태그 : 문서의 본문이 담기는 태그
- script태그 : javascript코드가 여기에 담긴다.
3️⃣ html 태그 선택하기
html태그를 자바스크립트 태그로 가져와서 써야하는 일이있다. 예를 들면 입력창에 입력을 받고 확인 버튼을 누르면 입력창이 비워지고 입력받은 글자가 어떤 태그에 띄워진다거나 할 때이다. 이 때 html태그를 가져와서 그 안의 값이나 상태를 바꿔야하는데 특별한 함수를 통해 가져올 수 있다.
document.querySelector('선택자');
document.querySelector('#아이디');
document.querySelecotor('.클래스'); 라는 함수로 html태그를 가져올 수 있다.
만약 button태그를 가져오고 싶다면
document.querySelector('button');이렇게 가져오면 된다.
❓ 선택자, 아이디, 클래스는 각각 어떻게 다를까?
선택자, 아이디, 클래스는 각각 쓰이는 방법이 다르다. 만약 button태그가 여러 개라면 위 코드는 가장 상위에 있는 버튼 태그를 가져올 것이다. 그렇기 때문에 각각 태그에 id를 부여해 특정태그를 가져오게 할 수 있다. 또는 여러 개의 태그를 한번에 선택하고 클래스를 불러올 수있다. 클래스를 불러오면 해당 클래스에 속한 모든 태그들이 선택된다.
매번 태그를 이렇게 가져오는건 코드가 너무 길어지니까 변수에 따로 저장해서 사용할 수도 있다.
const $button = document.querySelector('button');이런식으로 가져오면 $button이라는 변수에 HTML button 태그가 담기는 것이다.
이 강의에서는 태그를 가져오는 변수앞에는 $를 붙여따로 표시를 해두었는데 이런식으로 태그가 담긴 변수와 태그가 아닌 값이 담긴 변수가 구분이 가도록 정의하는것이 효율적일 것이다.
2️⃣ event와 eventListner
웹페이지에서 키보드를 치거나, 마우스로 클릭을 하는 등 동작이 일어나는 것을 이벤트라고 한다. 이 이벤트도 미리 정의되어있다.
➡️ 이벤트의 종류 레퍼런스
이벤트 리스너는 이벤트가 발생한 경우 이벤트 처리 핸들러를 추가할 수 있는 오브젝트이다.
이벤트 리스너는 아래 방법으로 등록할 수 있다.
DOM객체.addEventListner(이벤트명, 리스너함수, 옵션)예를 들어 button태그를 click하는 이벤트를 받고싶다면
<input type = "text"></input>
document.querySelector('button').addEventListner('click', function() {
console.log('버튼클릭');
});이렇게 작성하면 input태그에 버튼을 클릭할 때마다 리스너함수가 실행될 것이다. 이 때 function에 console.log를 넣은건 제대로 실행이 되는지 보기 위해서이다.
이 때 리스너함수를 밖으로 뺄 수 있다.
const onClick = function() {
console.log('버튼클릭')
}
document.querySelector('button').addEventListner('click', onClick);onClick이라는 변수에 이벤트가 실행될 때 같이 실행되는 리스너함수를 받아서 밖으로 빼주었다.
onClick같은 함수를 콜백함수라고 부른다. 콜백함수를 사용하면 다른 이벤트 리스너에도 일일히 함수를 적어주지 않고 호출하는 방식으로 간단히 코드를 작성할 수 있다.
