01. html/css와 javascript 연결하기

우리가 열심히 javascript를 작성해도 그 파일만으로는 자바스크립트가 작동되지 않는다. 자바스크립트는 브라우저 상에서 작동하기 때문에 html 파일에 자바스크립트를 연결해줘야 한다. html에 자바스크립트를 넣는 방법은 두 가지가 있다.

01-1. html 파일에 script 태그를 사용하기

첫번째 방법은 html 파일 내부에 script 태그를 사용해 자바스크립트 코드를 넣는 것이다.

<script> 
  function greeting() { 
    console.log('반갑습니다!'); 
  } 

  greeting();
</script>

위의 코드처럼 자바스크립트 코드를 script 태그로 감싸줘야한다.
이 방법은 자바스크립트 코드가 간단할 경우에는 괜찮지만, 길고 복잡해질 경우에는 코드를 수정하고자 할 때 어렵기 때문에 이 방법보다는 두번째 방법이 적합하다.

01-2. script src를 사용해 링크 걸기

두번째 방법은 우리가 html 파일에 css 파일을 연결할 때 rel을 쓴 것처럼, script src를 사용해 자바스크립트 파일을 html에 연결하는 것이다.

<script src="index.js"></script>
<script src="hello.js"></script>

이런 식으로 여러개의 파일을 연결할 수 있다.
보다 용이한 유지보수를 위해서는 첫번째 방법 보다는 이 방법을 사용하는 것이 좋다. 또한 하나의 자바스크립트 파일에 필요한 모든 기능을 집어넣기 보다 기능 별로 파일을 나눠주는 것이 추천된다.

02. DOM

html과 자바스크립트를 연결해 사용하는 데에 있어서 필수적인 개념 중 하나는 DOM이다.
DOM(Document Object Model)이란 단순 텍스트, 줄글로 작성된 html 파일을 아래처럼 노드 트리 구조로 표현한 객체이다. 나뭇가지(부모)에서 여러 개의 잎(자식)들이 뻗어나오는 것을 생각하면 이해하기 쉽다.

이 DOM을 통해 자바스크립트와 html 파일은 서로 연결되며 document 객체는 DOM 트리의 root node(dom의 최상위 레벨, 나무가 뿌리(root)에서부터 시작돼 나오는 것을 생각하면 편하다.)에 접근하게 해준다. 이 객체 모델은 html 문서 내의 모~든 요소들을 정의하고, 각각의 요소에 접근하는 방법을 제공해준다.

dom에 접근하기

위의 코드처럼 태그 이름, 클래스 이름, id 이름을 통해 요소에 접근할 수 있다. 여기서 쓰인 innerHTML은 해당 태그 안에 있는 모든 요소를 없애고 innerHTML 안에 넣어준 것만이 나타난다.

Event

이벤트란 웹사이트와 사용자 간의 인터랙션을 말한다. 예를 들어서 버튼을 클릭하면 팝업창이 띄워지거나 숨겨진 요소가 나타나는 등 사용자의 행동을 기반으로 변화가 생기는 것들이 이벤트라고 할 수 있다.
이벤트는 html/css만으로는 구현이 불가능하기 때문에 javascript의 도움을 받아야 한다.

이벤트 종류

이벤트의 종류는 정말 무수하게 많은데 그 중 많이 사용되는 대표적인 이벤트 종류를 살펴보자.

마우스 이벤트

• click : 마우스를 클릭했을 때
• dbclick : 마우스를 더블 클릭 했을 때
• mousedown : 마우스를 누르고 있을 때
• mouseup : 눌렀던 마우스 버튼을 뗄 때
• mouseover : 마우스를 요소 위로 올렸을 때

키보드 이벤트

• keydown : 키를 눌렀을 때
• keyup : 키를 뗄 때
• keypress : 눌렀던 키의 문자가 입력됐을 때

UI 이벤트

• resize : 브라우저의 창 크기를 조정했을 때
• scroll : 페이지를 스크롤 할 때
• load : 웹페이지의 로드가 완료됐을 때

form 이벤트

• input : inpput이나 textarea 요소 값이 변경되었을 때
• submit : 제출 버튼을 눌러 폼을 제출할 때

addEventListener()

그렇다면 어떻게 자바스크립트로 이벤트를 구현할 수 있을까? 바로 addEventListener() 메소드를 사용하면 된다.

eventTarget.addEventListener(이벤트 종류, 이벤트 발생 시 실행될 콜백 함수, capture의 적용 여부(선택));

addEventListener은 첫번째 인자로 이벤트 종류를 받고, 두번째 인자로는 이벤트 발생 시 실행될 함수를 인자로 받아서 첫번째 인자로 설정한 이벤트가 발생하면 함수 안의 코드대로 html의 요소가 변화하여 인터랙션이 발생한다.
세번째 인자로는 event capturing의 적용 여부를 받는데, 이것은 true/false의 형태이다. 기본값은 false로 false로 설정하면 부모 요소와 자식 요소에 각각 이벤트가 있을 때 부모 요소보다 자식 요소의 이벤트를 먼저 실행하는 event bubbling이 된다. 반대로, true값을 주면 부모 요소의 이벤트가 먼저 발생하는 event capturing이 된다.

위의 코드의 버튼에는 mouseover, click 두 가지의 이벤트가 적용되어 있다.
버튼 위에 마우스를 올리면 첫번째 문구가 나타나고, 버튼을 클릭하면 버튼을 클릭했다는 두번째 문구가 나타난다.
요소를 가져올 때는 변수를 만들어 넣어주는 방식이 일반적이라고 한다. 매번 document.getElement를 쳐서 가져오는 것보다 더 편하고 간편하기 때문이다.

removeEventListener() 메소드로 적용된 이벤트를 제거할 수 있다.