자바스크립트 기초와 이벤트 핸들러

자바스크립트(JavaScript)는 웹 페이지의 동적인 기능을 제어하는 데 필수적인 언어입니다.
자바스크립트를 잘 이해하면 웹 사이트를 더 인터랙티브하고, 사용자 친화적으로 만들 수 있습니다.
이 포스트에서는 자바스크립트의 기초와 함께 자주 사용되는 이벤트 핸들러에 대해 설명합니다.

1. 자바스크립트란?

자바스크립트는 프로토타입 기반 객체 지향 언어로, 웹 개발에서 중요한 역할을 합니다. 자바스크립트는 웹 페이지에서 동적인 기능을 구현할 수 있도록 해줍니다. HTML과 CSS는 웹 페이지의 구조와 스타일을 담당하지만, 자바스크립트는 그 위에 동작을 추가해줍니다.

자바스크립트의 특징

• 플랫폼 독립적: 자바스크립트는 웹 브라우저 내에서 실행되므로 운영체제나 플랫폼에 관계없이 동일한 동작을 보장합니다.
• 스크립트 언어: 자바스크립트는 별도의 컴파일 과정 없이 웹 브라우저에서 직접 해석되어 실행되는 스크립트 언어입니다.
• 타입 체크가 느슨함: 자바스크립트는 동적 타입 언어로, 변수의 타입을 명시적으로 선언할 필요가 없고, 타입 변환이 자유롭습니다.
• 클라이언트에서 실행: 서버와의 통신 없이 클라이언트 브라우저에서 직접 실행되어, 서버 부담을 줄이고 빠른 처리가 가능합니다.

자바스크립트는 웹 개발에서 필수적인 기술이며, 프론트엔드 개발자가 되기 위해 꼭 익혀야 합니다.

2. 자바스크립트 기본 문법

자바스크립트는 HTML 문서 내에서 <script> 태그를 사용하여 삽입하거나, 외부 파일로 분리하여 사용할 수 있습니다. 외부 파일의 확장자는 .js입니다.

자바스크립트 외부 파일 사용

외부 자바스크립트 파일을 사용하려면, HTML 문서 내에서 <script> 태그를 사용하여 자바스크립트 파일을 연결합니다.

<script type="text/javascript" src="script.js"></script>

• 자바스크립트 파일에는 <script> 태그를 포함할 수 없습니다.
• src 속성에 자바스크립트 파일의 경로를 작성합니다.

HTML 내에서 자바스크립트 코드 작성

HTML 파일 안에 직접 자바스크립트 코드를 작성할 때는 <script>와 </script> 태그 사이에 코드를 삽입합니다.

<script type="text/javascript">
  alert("Hello, JavaScript!");
</script>

3. 자바스크립트 이벤트 핸들러

자바스크립트에서는 사용자가 웹 페이지와 상호작용할 때 발생하는 다양한 이벤트를 처리할 수 있습니다. 이벤트란 버튼 클릭, 마우스 움직임, 키보드 입력 등과 같은 동작을 의미합니다. 이를 처리하기 위해 이벤트 핸들러를 사용합니다.

이벤트 핸들러 종류

자주 사용되는 이벤트 종류와 설명은 다음과 같습니다.

이벤트 종류	설명
click	마우스를 클릭했을 때 이벤트 발생
dblclick	마우스를 더블클릭했을 때 이벤트 발생
mouseover	마우스를 요소 위에 올렸을 때 이벤트 발생
mouseout	마우스를 요소에서 벗어났을 때 이벤트 발생
keydown	키보드에서 키를 눌렀을 때 이벤트 발생
keyup	키보드에서 키를 떼었을 때 이벤트 발생
focus	요소에 포커스가 갔을 때 이벤트 발생
blur	요소에서 포커스가 벗어났을 때 이벤트 발생
submit	폼(form)을 제출할 때 발생
resize	윈도우 크기가 변경되었을 때 이벤트 발생
scroll	스크롤이 움직였을 때 이벤트 발생

이벤트 모델

이벤트를 처리하는 방법에는 크게 인라인 이벤트 모델과 기본 이벤트 모델이 있습니다.

4. 인라인 이벤트 모델

인라인 이벤트 모델은 HTML 태그 내에서 직접 자바스크립트 코드를 작성하여 이벤트를 처리하는 방식입니다. 이벤트 속성에 자바스크립트 함수를 작성하거나, 직접 코드를 삽입합니다.

예시: 인라인 이벤트 모델

<button onclick="console.log('버튼 클릭!')">클릭</button>

• onclick은 사용자가 버튼을 클릭했을 때 실행되는 이벤트입니다.
• onclick="console.log('버튼 클릭!')"처럼 이벤트가 발생하면 해당 자바스크립트 코드가 실행됩니다.

예시: this 키워드 사용

this는 이벤트가 발생한 요소를 참조하는 키워드입니다. 예를 들어, 버튼을 클릭하면 this가 해당 버튼을 가리킵니다.

<button onclick="this.style.backgroundColor='red'">색상 변경</button>

• 사용자가 버튼을 클릭하면 버튼의 배경색이 빨간색으로 바뀝니다.
• this.style.backgroundColor='red'는 클릭된 버튼의 배경색을 변경하는 코드입니다.

5. 기본 이벤트 모델

기본 이벤트 모델은 자바스크립트 코드 내에서 HTML 요소를 먼저 취득한 후, 그 요소에 이벤트를 연결하는 방식입니다. 이 방법은 코드가 더 깔끔하고, HTML과 자바스크립트 코드의 분리가 용이하여 권장되는 방법입니다.

예시: 기본 이벤트 모델

<button id="btn">클릭</button>

<script>
  var btn = document.getElementById("btn");
  btn.onclick = function() {
    console.log("버튼 클릭!");
  };
</script>

• document.getElementById("btn")로 버튼을 취득하고, onclick 이벤트에 함수를 할당합니다.
• 버튼이 클릭되면 console.log("버튼 클릭!") 코드가 실행됩니다.

6. 요소 취득 및 익명 함수 연결

기본 이벤트 모델에서는 HTML 요소를 취득한 후, 익명 함수로 이벤트를 처리합니다. 익명 함수는 이름이 없는 함수로, 코드 내에서 직접 작성할 수 있습니다.

예시: 요소 취득 및 익명 함수 연결

<button id="btn">클릭</button>

<script>
  window.onload = function() {
    var btn = document.getElementById("btn");
    btn.onclick = function() {
      console.log("버튼 클릭!");
    };
  };
</script>

• window.onload를 사용하여 페이지가 로드된 후 이벤트를 연결합니다.
• btn.onclick = function() { console.log("버튼 클릭!"); }처럼 익명 함수를 사용해 이벤트를 처리합니다.

7. 이벤트 처리 주의사항

• 순서: 이벤트를 연결할 때는 HTML 요소가 먼저 로드된 후, 이벤트를 연결해야 합니다. 그렇지 않으면 JavaScript 코드에서 요소를 찾을 수 없습니다.
• window.onload 사용: 페이지가 완전히 로드된 후에 이벤트를 연결하려면 window.onload 또는 DOMContentLoaded 이벤트를 사용해야 합니다.