1.3 연산자와 조건문

약 7분

본문 듣기

읽기 설정

글자 크기

줄 간격

글꼴

1.3 연산자와 조건문

JavaScript에서 연산자와 조건문은 기본적인 프로그래밍의 원리로, 프로그래밍을 통해 데이터를 조작하고 특정 상황에서 어떤 행동을 수행하게 하는 데 사용됩니다. 이 강의에서는 연산자의 종류와 조건문의 사용 방법에 대해 살펴봅니다.

1.3.1 연산자

연산자는 값을 조작하는 데 사용되는 기호로, 크게 산술 연산자, 비교 연산자, 논리 연산자로 나눌 수 있습니다.

산술 연산자: +, -, *, /, %
비교 연산자: ==, ===, !=, !==, <, >, <=, >=
논리 연산자: &&, ||, !

이제 각 연산자의 사용 예제를 살펴보겠습니다.

1.3.2 예제

다음은 간단한 산술 연산자와 비교 연산자를 사용하는 예제입니다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>연산자 예제</title>
</head>
<body>
    <script>
        const a = 10;
        const b = 20;

        // 산술 연산자 사용
        const sum = a + b;
        console.log(`합: ${sum}`); // 출력: 합: 30

        // 비교 연산자 사용
        const isEqual = a === b;
        console.log(`a와 b가 같은가? ${isEqual}`); // 출력: a와 b가 같은가? false
    </script>
</body>
</html>

1.3.3 조건문

조건문은 특정 조건을 만족할 때 실행할 코드를 정의하는 문법입니다. 가장 많이 사용되는 조건문은 if, else if, else입니다.

if (조건) {
    // 조건이 참일 때 실행할 코드
} else if (다른 조건) {
    // 다른 조건이 참일 때 실행할 코드
} else {
    // 모든 조건이 거짓일 때 실행할 코드
}

1.3.4 실습

이제 여러분은 사용자로부터 숫자를 입력받아 그 숫자가 짝수인지 홀수인지 판단하는 웹 페이지를 만들어 보겠습니다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>짝수 홀수 판단</title>
</head>
<body>
    <h1>짝수 홀수 판단기</h1>
    <input type="number" id="numberInput" placeholder="숫자를 입력하세요">
    <button id="checkButton">확인</button>
    <p id="result"></p>

    <script>
        const checkButton = document.getElementById('checkButton');
        checkButton.addEventListener('click', () => {
            const number = parseInt(document.getElementById('numberInput').value);
            let result;

            // 짝수 홀수 판단
            if (number % 2 === 0) {
                result = '입력한 숫자는 짝수입니다.';
            } else {
                result = '입력한 숫자는 홀수입니다.';
            }

            // 결과 출력
            document.getElementById('result').innerText = result;
        });
    </script>
</body>
</html>

1.3.5 응용

이번에는 위의 예제를 바탕으로, 반복문과 조건문을 사용해 1부터 10까지의 숫자 중 짝수와 홀수를 출력하는 앱을 개발해 보세요. 이를 통해 조건문을 더 깊이 이해하고 활용할 수 있습니다.

1.3.6 정리

연산자와 조건문은 JavaScript의 기본 요소로 중요한 역할을 합니다. 오늘 배운 내용을 바탕으로 다양한 기능을 구현해 보세요. 다음 시간에는 비동기 프로그래밍에 대해 알아보겠습니다.

실습 과제

사용자로부터 임의의 두 숫자를 입력받아, 두 숫자의 차이를 계산하고 결과를 출력하는 웹 페이지를 만들어 보세요.
입력되는 숫자가 0보다 크면 '양수', 0이면 '영', 0보다 작으면 '음수'라는 결과를 출력하는 조건문을 추가해 보세요.

응용 문제

1부터 N까지의 숫자를 입력받아 그 중 짝수의 합과 홀수의 합을 각각 출력하는 프로그램을 작성해 보세요.
사용자가 입력한 숫자가 소수인지 아닌지를 판단하는 조건문을 추가해 보세요.

1.3 연산자와 조건문

1.3 연산자와 조건문

1.3.1 연산자

1.3.2 예제

1.3.3 조건문

1.3.4 실습

1.3.5 응용

1.3.6 정리

실습 과제

응용 문제

댓글 0