JavaScript 수업의 5번째 강의에서는 함수와 이벤트 처리에 대해 알아보겠습니다. 함수는 JavaScript에서 코드의 재사용성을 높여주고, 이벤트 처리는 사용자와의 상호작용을 가능하게 합니다.
함수(Function)란 무엇일까요?
함수는 특정 작업을 수행하는 코드 블록입니다. 함수는 재사용 가능하며, 코드를 더 깔끔하고 관리하기 쉽게 만들어줍니다.
함수 선언과 호출
함수를 선언하는 방법과 호출하는 방법을 알아보겠습니다.
// 함수 선언
function sayHello() {
console.log("Hello, World!");
}
// 함수 호출
sayHello();
위 예제에서 sayHello라는 함수를 선언하고, console.log를 이용해 "Hello, World!"를 출력합니다. sayHello()를 호출하면 함수가 실행되어 콘솔에 메시지가 출력됩니다.
매개변수와 반환값
함수는 매개변수를 받을 수 있고, 값을 반환할 수 있습니다.
// 매개변수를 받는 함수
function add(a, b) {
return a + b;
}
// 함수 호출
let result = add(3, 5);
console.log(result); // 8
위 예제에서는 add 함수가 두 개의 매개변수를 받아 그 합을 반환합니다. 반환된 값은 result 변수에 저장되고, 콘솔에 출력됩니다.
이벤트 처리(Event Handling)
이벤트 처리는 사용자의 행동에 반응하는 방식입니다. 버튼 클릭, 키보드 입력 등 다양한 이벤트를 처리할 수 있습니다.
이벤트 리스너(Event Listener) 추가하기
이벤트 리스너를 사용하여 HTML 요소에 이벤트를 추가할 수 있습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Event Handling Example</title>
</head>
<body>
<button id="myButton">Click Me!</button>
<script>
// 버튼 요소 선택
const button = document.getElementById("myButton");
// 이벤트 리스너 추가
button.addEventListener("click", function() {
alert("Button was clicked!");
});
</script>
</body>
</html>
위 예제에서는 button 요소에 클릭 이벤트를 추가합니다. 사용자가 버튼을 클릭하면, "Button was clicked!"라는 경고 메시지가 나타납니다.
다양한 이벤트 처리하기
다양한 이벤트를 처리할 수 있습니다. 예를 들어, 키보드 입력 이벤트를 처리해보겠습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Keyboard Event Example</title>
</head>
<body>
<input type="text" id="myInput" placeholder="Type something...">
<script>
// 입력 요소 선택
const input = document.getElementById("myInput");
// 키보드 이벤트 리스너 추가
input.addEventListener("keydown", function(event) {
console.log("Key pressed: " + event.key);
});
</script>
</body>
</html>
위 예제에서는 사용자가 입력 필드에 키를 누를 때마다 콘솔에 눌린 키의 값이 출력됩니다. event.key를 사용하여 어떤 키가 눌렸는지 확인할 수 있습니다.
이번 강의에서는 JavaScript의 함수와 이벤트 처리에 대해 알아보았습니다. 함수는 특정 작업을 수행하는 코드 블록으로, 재사용성과 코드의 가독성을 높여줍니다. 이벤트 처리는 사용자의 행동에 반응하는 방식으로, 다양한 이벤트 리스너를 추가하여 웹 페이지와의 상호작용을 풍부하게 만들 수 있습니다. 다음 강의에서는 배열과 객체에 대해 알아보겠습니다.
- 이전 수업 목록
'프로그래밍 > JAVA Script' 카테고리의 다른 글
| [JavaScript 수업 7강] DOM 조작: HTML 요소를 다루는 방법 (0) | 2024.06.04 |
|---|---|
| [JavaScript 수업] 6강 - 배열과 객체, 이해와 활용 (1) | 2024.06.03 |
| [JavaScript 수업] 4강 - 연산자와 제어 구조 (0) | 2024.05.30 |
| [JavaScript 수업] 3강 - 변수와 데이터 타입 이해하기 (0) | 2024.05.29 |
| 2강 - 초보자를 위한 JavaScript 적용 방법 (0) | 2024.05.24 |