[JavaScript 수업 5강] 함수와 이벤트 처리

[JavaScript 수업 5강] 함수와 이벤트 처리

반응형

안녕하세요! 그레이해커 월횽입니다. 오늘은 JavaScript 함수와 이벤트 처리에 대해 알아보겠습니다.

1. 함수(Function)란?

함수는 특정 작업을 수행하는 코드 블록입니다. 재사용 및 코드 관리에 큰 효과가 있습니다.

함수 선언 & 호출

// 함수 선언
function sayHello() {
  console.log("Hello, World!");
}

// 함수 호출
sayHello();

SMALL

매개변수(Parameter) & 반환값(Return)

// 매개변수를 받는 함수
function add(a, b) {
  return a + b;
}

let result = add(3, 5);
console.log(result); // 8

728x90

2. 이벤트 처리(Event Handling)

이벤트 처리는 사용자 행동(클릭, 키 입력 등)에 반응하는 방식입니다. 다음 예제를 통해 구현 방법을 확인해 보세요.

버튼 클릭 이벤트

<button id="myButton">Click Me!</button>

<script>
const button = document.getElementById("myButton");
button.addEventListener("click", function() {
  alert("Button was clicked!");
});
</script>

키보드 입력 이벤트

<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>

이번 강의에서는 함수의 선언, 호출, 매개변수와 반환값, 그리고 버튼 클릭 & 키보드 입력 이벤트 처리에 대해 알아보았습니다.

다음 강의에서는 배열과 객체에 대해 실전 예제로 학습하겠습니다. 기대해 주세요!

이전 강의: 4강 - 연산자와 제어 구조
다음 강의: 6강 - 배열과 객체