초보자를 위한 자바스크립트 #3: 반복문과 DOM 조작

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

지난 글에서 배열로 데이터를 모으고 이벤트로 버튼 클릭에 반응하게 만들어봤죠? 오늘은 **반복문(Loops)**과 DOM 조작을 배워볼 거예요. 반복문은 똑같은 일을 여러 번 할 때 유용하고, DOM 조작은 웹 페이지의 내용을 바꿀 수 있게 해줍니다. 자바스크립트로 더 멋진 걸 만들어볼 준비 되셨나요? 그럼 시작합시다!

1. 반복문: 같은 일을 여러 번 하기

반복문은 코드를 반복해서 실행하게 해주는 아주 유용한 기능입니다. 예를 들어, 배열에 있는 과일을 하나씩 출력하고 싶다면, 반복문 없이 이렇게 코드를 작성해야겠죠?

예시:

let fruits = ["사과", "바나나", "오렌지"];
console.log(fruits[0]);
console.log(fruits[1]);
console.log(fruits[2]);

하지만 반복문, 특히 for문을 쓰면 훨씬 간단하게 처리할 수 있습니다:

예시:

let fruits = ["사과", "바나나", "오렌지"];
for (let i = 0; i < fruits.length; i++) {
    console.log(fruits[i]);
}
// "사과", "바나나", "오렌지" 차례대로 출력

설명: i는 0부터 시작해서 배열의 길이(fruits.length)까지 1씩 커지며 반복됩니다. fruits[i]는 배열에서 현재 항목을 꺼내서 출력합니다.

꿀팁: i < fruits.length 조건이 반복을 멈추게 해줍니다. 즉, 배열 크기만큼만 반복되므로, 배열을 다루기 정말 효율적입니다.

해보기: 위 코드를 브라우저 콘솔(F12)에서 실행해보세요. 배열의 항목이 차례대로 출력되는 걸 확인할 수 있을 거예요.

2. DOM 조작: 웹 페이지 바꾸기

**DOM(Document Object Model)**은 웹 페이지의 구조를 자바스크립트로 다룰 수 있게 해줍니다. 지난번에 버튼을 눌렀을 때 반응을 만들었죠? 이번엔 웹 페이지에 있는 텍스트를 바꿔볼 거예요.

간단한 예제:

HTML:

<p id="myText">여기를 바꿔볼게요!</p>
<button id="myButton">바꾸기</button>
<script>
    let button = document.getElementById("myButton");
    let text = document.getElementById("myText");
    button.addEventListener("click", function() {
        text.textContent = "바뀌었어요!";
    });
</script>

동작: 버튼을 누르면 “여기를 바꿔볼게요!”라는 텍스트가 “바뀌었어요!”로 바뀝니다.

설명: document.getElementById로 해당 요소를 찾고, textContent 속성을 사용해서 텍스트 내용을 변경했어요.

해보기: 위 코드를 메모장에 넣고 .html 확장자로 저장한 뒤 브라우저에서 열어보세요. 버튼을 클릭하면 텍스트가 바뀌는 것을 확인할 수 있습니다.

3. 실습: 과일 리스트 만들기

이제 반복문과 DOM 조작을 합쳐서 배열에 있는 과일을 웹 페이지에 리스트로 띄워보겠습니다. 웹 페이지에서 과일 목록을 동적으로 생성해볼 거예요.

HTML:

<ul id="fruitList"></ul>
<script>
    let fruits = ["사과", "바나나", "오렌지"];
    let list = document.getElementById("fruitList");

    for (let i = 0; i < fruits.length; i++) {
        let item = document.createElement("li"); // 새 리스트 항목 생성
        item.textContent = fruits[i]; // 항목에 과일 이름 넣기
        list.appendChild(item); // 리스트에 항목 추가
    }
</script>

결과: 페이지에 <ul> 안에 <li>사과</li>, <li>바나나</li>, <li>오렌지</li>와 같은 항목들이 표시됩니다.

설명: createElement로 새로운 요소를 만들고, appendChild로 해당 요소를 리스트에 추가했습니다. 이 방식으로 웹 페이지에서 동적으로 콘텐츠를 생성할 수 있습니다.

꿀팁: <ul>은 순서 없는 리스트를 만드는 HTML 태그입니다. 이 태그 안에 <li> 요소를 추가하면, 브라우저에서 각 항목이 예쁘게 점으로 표시됩니다.

4. 마무리: 이제 뭘 만들어볼까요?

오늘은 반복문으로 배열을 쉽게 다루고, DOM 조작으로 웹 페이지의 내용을 바꾸는 방법을 배웠습니다. 자바스크립트가 점점 더 강력해지는 느낌이죠? 이제 여러분은 배열의 항목을 출력하고, 버튼 클릭으로 웹 페이지의 내용을 바꿀 수 있게 되었습니다!

이제 더 복잡한 기능을 만들 수 있는 기초를 쌓았어요. 예를 들어, 반복문을 사용해서 큰 데이터를 처리하거나, DOM 조작을 통해 사용자 인터페이스를 동적으로 바꿀 수 있습니다. 자바스크립트는 매우 유용한 도구이기 때문에 다양한 프로젝트를 통해 계속 실력을 키워보세요!

다음 글에서는 입력값 다루기나 간단한 To-Do 리스트 만들기와 같은 재미있는 프로젝트를 다뤄볼까요? 여러분의 아이디어를 댓글로 남겨주세요!