1.4 반복문과 함수

약 6분

본문 듣기

읽기 설정

글자 크기

줄 간격

글꼴

1.4 반복문과 함수

JavaScript에서 반복문과 함수는 매우 중요합니다. 반복문은 같은 작업을 여러 번 실행할 때 사용되고, 함수는 특정 작업을 수행하는 코드 블록입니다. 이러한 요소들은 우리가 웹 개발을 할 때 프로그램의 효율성을 향상시키는 데 큰 도움이 됩니다.

설명

반복문은 크게 for, while, do...while 세 가지가 있으며, 각각은 특정한 상황에 맞춰 사용됩니다. 함수는 재사용 가능한 코드 조각으로, 매개변수를 통해 값을 전달받고 결과를 반환할 수 있습니다. 이를 통해 코드를 더 깔끔하고 관리하기 쉽게 만들어 줍니다.

예제

우선, 간단한 반복문을 사용하여 숫자를 출력해보겠습니다. 이 예제에서는 for 반복문을 사용할 것이며, HTML과 CSS로 기본 구조를 잡고 JavaScript로 숫자를 출력해 보겠습니다.

HTML

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>반복문 예제</title>
    <style>
        body { font-family: Arial, sans-serif; }
        #output { margin-top: 20px; }
    </style>
</head>
<body>
    <h1>반복문과 함수 예제</h1>
    <button id="generate">숫자 생성</button>
    <div id="output"></div>
    <script src="script.js"></script>
</body>
</html>

CSS

(위와 같이 HTML 안에 간단한 CSS를 포함했습니다.)

JavaScript

// 숫자 생성 버튼 요소 가져오기
const button = document.getElementById('generate');
const output = document.getElementById('output');

// 버튼 클릭 시 동작하는 함수 정의
button.addEventListener('click', () => {
    let numbers = '';
    // for 반복문을 사용하여 1부터 10까지 출력
    for (let i = 1; i <= 10; i++) {
        numbers += i + ' '; // 숫자를 문자열에 추가
    }
    output.innerText = numbers; // 결과를 출력
});

실습

위 코드를 바탕으로, 사용자에게 1부터 N까지의 숫자를 출력하는 입력필드를 추가하세요. 숫자 N은 사용자가 입력한 값으로 결정됩니다.

응용

반복문과 함수를 사용하여 간단한 ToDo List 기능을 만들어볼까요? 사용자가 입력한 할 일을 추가하고 표시하는 기능을 구현해야 합니다. 다음 코드를 참고하세요:

HTML

<input type="text" id="todoInput" placeholder="할 일을 입력하세요">
<button id="addTodo">추가하기</button>
<ul id="todoList"></ul>

JavaScript

const todoInput = document.getElementById('todoInput');
const addTodoButton = document.getElementById('addTodo');
const todoList = document.getElementById('todoList');

// 할 일 추가 함수
addTodoButton.addEventListener('click', () => {
    const todoText = todoInput.value;
    if (todoText) {
        const li = document.createElement('li');
        li.innerText = todoText;
        todoList.appendChild(li);
        todoInput.value = ''; // 입력 필드 초기화
    }
});

정리

이번 강의에서는 반복문과 함수를 사용하여 웹 애플리케이션을 간단히 구현해보았습니다. 반복문은 특정 작업을 반복할 때 유용하고, 함수는 재사용 가능한 코드 블록을 제공합니다. 실습 과제를 통해 능력을 더욱 향상시켜 보세요!

1.4 반복문과 함수

1.4 반복문과 함수

설명

예제

HTML

CSS

JavaScript

실습

응용

HTML

JavaScript

정리

댓글 0