기본 JS 함수와 이벤트: 함수 작성 및 이벤트 처리 기초
자바스크립트(JavaScript)는 웹 페이지에 동적인 요소를 추가하고 사용자 상호작용을 가능하게 하는 프로그래밍 언어입니다. 이 강의에서는 JS의 기본적인 구성 요소인 함수와 이벤트 처리에 대해 알아봅니다.
자바스크립트 함수의 기초
함수란 무엇인가?
함수는 하나의 작업을 수행하거나 값을 계산하는 재사용 가능한 코드 블록입니다. 함수를 사용함으로써 코드를 더 간결하고 유지보수하기 쉽게 만들 수 있습니다.
함수 선언 방법
자바스크립트에서 함수를 선언하는 기본적인 형태는 다음과 같습니다.
function greet(name) {
return "Hello, " + name + "!";
}이 함수는 'name'이라는 매개변수를 받아서 문자열을 반환합니다.
함수 호출
var message = greet("Alice");
console.log(message); // "Hello, Alice!"함수는 이름 뒤에 괄호를 붙여 호출할 수 있습니다.
이벤트 처리의 기초
이벤트란 무엇인가?
이벤트는 사용자나 브라우저에 의해 발생하는 특정한 상호작용입니다. 예를 들어 클릭, 키보드 입력, 마우스 이동 등이 있습니다.
이벤트 리스너
이벤트 리스너는 특정 이벤트가 발생했을 때 실행될 함수입니다. addEventListener 메서드를 사용하여 요소에 이벤트 리스너를 추가할 수 있습니다.
<button id="clickButton">Click Me!</button>
<script>
document.getElementById("clickButton").addEventListener("click", function() {
alert("Button Clicked!");
});
</script>이 예제에서는 버튼을 클릭했을 때 알림 창을 띄우는 이벤트 리스너를 추가했습니다.
상호작용이 풍부한 웹 페이지 구현하기
자바스크립트를 사용하면 동적인 웹 페이지를 구현하는 데 필요한 다양한 기능을 추가할 수 있습니다. 사용자의 행동에 반응하거나, 데이터를 처리하고, 화면에 결과를 표시하는 것이 가능해집니다.
이벤트 전파 이해하기
웹 페이지에서 이벤트는 '버블링(bubbling)' 또는 '캡처링(capturing)' 과정을 통해 전파됩니다. 이는 이벤트가 발생한 요소부터 시작해 DOM 트리를 따라 상위 또는 하위 요소로 전달되는 것을 의미합니다. 이벤트 전파를 이해하고 제어하는 것은 복잡한 이벤트 처리 로직을 구현할 때 중요합니다.
이벤트 위임
이벤트 위임은 여러 자식 요소에 대한 이벤트 리스너를 부모 요소에 하나만 등록하는 기법입니다. 이를 통해 리소스를 절약하고, 동적으로 생성된 요소에 대한 이벤트 처리를 용이하게 할 수 있습니다.
document.getElementById("parent").addEventListener("click", function(event) {
if (event.target.tagName === "LI") {
alert("List item clicked: " + event.target.textContent);
}
});이 예제에서는 부모 요소에 리스너를 달고, 클릭된 자식 요소가 무엇인지를 확인합니다.
비동기 프로그래밍과 콜백
자바스크립트에서는 비동기 프로그래밍이 일반적입니다. 예를 들어, 서버로부터 데이터를 요청하고, 그 응답을 기다린 후 처리하는 과정이 이에 해당합니다. 이러한 비동기 작업을 처리하기 위해 '콜백 함수'를 사용합니다.
function fetchData(callback) {
// 데이터를 가져오는 가상의 함수
setTimeout(() => {
callback("Here is your data!");
}, 2000);
}
fetchData(function(data) {
console.log(data); // 2초 후 "Here is your data!" 출력
});콜백 함수는 비동기 작업이 완료된 후 실행되는 함수입니다. 이를 통해 데이터가 준비되었을 때만 특정 작업을 수행할 수 있습니다.
실습 예제: 간단한 사용자 인터랙션
다음은 사용자가 입력한 이름을 환영 메시지와 함께 출력하는 간단한 웹 페이지 예제입니다.
HTML:
Enter your name: <input type="text" id="nameInput">
<button id="greetButton">Greet Me!</button>
<p id="greeting"></p>
<script>
document.getElementById("greetButton").addEventListener("click", function() {
var name = document.getElementById("nameInput").value;
document.getElementById("greeting").textContent = greet(name);
});
function greet(name) {
return "Hello, " + name + "!";
}
</script>이 코드는 사용자로부터 이름을 입력 받아 'greet' 함수를 호출하고 결과를 화면에 표시합니다.
결론
자바스크립트의 함수와 이벤트 처리는 웹 개발의 중요한 부분입니다. 이를 통해 사용자와의 상호작용을 구현하고, 동적인 웹 애플리케이션을 만들 수 있습니다. 이벤트 처리, 비동기 프로그래밍, 이벤트 위임과 같은 개념을 이해하고 활용하면, 보다 효과적이고 사용자 친화적인 웹사이트 및 애플리케이션을 개발할 수 있습니다.
댓글