초보자를 위한 자바스크립트 #2: 배열과 이벤트

안녕하세요! 김코딩입니다

지난 글에서 자바스크립트의 기본 개념인 변수, 함수, 조건문을 배웠죠? 이번에는 배열과 이벤트를 배워볼 거예요. 배열은 여러 데이터를 한 번에 다룰 수 있게 도와주고, 이벤트는 웹에서 사용자의 반응을 처리할 수 있는 기능을 제공합니다. 이 두 가지를 배우면, 리스트를 관리하거나 버튼 클릭처럼 사용자의 상호작용에 반응하는 기능을 만들 수 있습니다.

자, 이제 그럼 한 걸음 더 나아가 볼까요?

2. 배열 (Array): 여러 데이터를 한 번에 다루기(자바스크립트)

배열이란?

배열은 여러 값을 한 곳에 모아 놓은 리스트라고 생각할 수 있습니다. 예를 들어, 쇼핑 목록을 생각해 보세요. “사과”, “바나나”, “오렌지”가 담긴 목록이 하나의 배열입니다.

예제:

팁: 배열은 대괄호 [] 안에 항목을 쉼표로 구분해서 넣으면 됩니다. 배열의 첫 번째 항목은 0번 인덱스부터 시작하므로, fruits[0]은 “사과”를 의미합니다.

let fruits = ["사과", "바나나", "오렌지"];
console.log(fruits[0]); // "사과" 출력 (배열은 0부터 시작!)
console.log(fruits.length); // 3 출력 (배열 항목 수)

배열 활용(자바스크립트)

배열은 순서가 있기 때문에, 원하는 위치에 있는 값을 편리하게 꺼낼 수 있습니다. 예를 들어, 숫자 배열에서 첫 번째 숫자를 출력하고 싶다면 이렇게 할 수 있습니다.

예제:

let numbers = [1, 2, 3, 4, 5];
function printFirst() {
    console.log("첫 번째 숫자는: " + numbers[0]);
}
printFirst(); // "첫 번째 숫자는: 1" 출력

배열에서 원하는 값을 쉽게 참조할 수 있고, 그 값에 따라 작업을 할 수 있어 유용합니다!

3. 이벤트 (Event): 웹에서 반응 만들기(자바스크립트)

이벤트란?

이벤트는 사용자가 웹 페이지에서 어떤 동작을 했을 때 발생하는 반응을 처리하는 방법입니다. 예를 들어, 버튼을 클릭하면 경고창이 뜨는 것처럼 웹에서 사용자의 행동에 반응하게 만들 수 있습니다.

이벤트를 사용하려면 HTML과 함께 자바스크립트를 사용해야 하니, 간단한 HTML 파일을 만들어서 실험해 보세요.

예제 (HTML + JS):

<button id="myButton">클릭하세요!</button>
<script>
    let button = document.getElementById("myButton");
    button.addEventListener("click", function() {
        alert("버튼을 눌렀어요!");
    });
</script>

이 코드는 버튼을 클릭했을 때 “버튼을 눌렀어요!”라는 경고창이 뜨게 합니다. 브라우저에서 HTML 파일을 열고 버튼을 클릭하면 실제로 반응을 확인할 수 있어요.

팁: HTML 파일을 브라우저에서 열고 버튼을 클릭해 보세요. 경고창이 뜨면서 이벤트가 제대로 작동하는 걸 확인할 수 있습니다.

4. 실습: 나만의 클릭 카운터(자바스크립트)

이제 배운 내용을 바탕으로, 클릭할 때마다 카운트를 증가시키는 클릭 카운터를 만들어 보겠습니다. 버튼을 클릭할 때마다 카운트가 증가하는 간단한 예제입니다.

예제:

<button id="counter">클릭 횟수: 0</button>
<script>
    let count = 0;
    let button = document.getElementById("counter");
    button.addEventListener("click", function() {
        count = count + 1;
        button.textContent = "클릭 횟수: " + count;
    });
</script>

이 코드는 버튼을 클릭할 때마다 클릭 횟수가 증가하고, 버튼에 표시되는 텍스트도 변하게 됩니다. 처음에는 “클릭 횟수: 0″이라고 나오고, 버튼을 클릭할 때마다 숫자가 1씩 증가합니다.

설명: 이 예제에서는 배열 대신 변수를 사용했지만, 나중에는 클릭한 횟수를 배열에 저장하여 더 많은 데이터를 다룰 수 있게 확장할 수 있습니다.

5. 마무리

오늘은 배열을 사용하여 여러 데이터를 효율적으로 다루고, 이벤트를 사용해 웹 페이지에서 사용자 반응을 처리하는 방법을 배웠습니다. 이제 기본적인 웹 기능을 다루는 데 필요한 중요한 두 가지 개념을 익혔어요!

다음 단계에서는 반복문이나 DOM 조작을 배워, 더 멋진 기능을 추가할 수 있습니다. 예를 들어, 배열을 순회하며 각 값을 처리하거나, 웹 페이지의 요소를 동적으로 변경하는 방법을 배우게 될 거예요.

이제 자바스크립트의 더 깊은 세계로 한 걸음 더 나아갈 준비가 되셨습니다. 계속해서 배우고, 연습하며 재미있는 웹 프로젝트를 만들어 보세요!