· FRONT-END/└ JS

[ JavaScript ] 조건문과 반복문

감자도리22 2024. 4. 26. 23:09

환경 : Visual Studio Code

 

 

[ 스크립트에서 조건문, 반복문 써보기 ]

실행 결과

[ 집중적으로 볼 코드 ]

    <script type="text/javascript">
        console.log("Hello Javascript!");

        //변수의 값에 따라 홀수, 짝수를 출력
        var number = 5;

        //if-else
        if(number % 2 != 0) {
            console.log("홀수");
        } else {
            console.log("짝수");
        }

        //switch-case
        switch(number % 2) {
            case 1:
                console.log("홀수");
                break;
            case 0:
                console.log("짝수");
                break;
        }

        //1부터 10까지 짝수만 출력
        for(var i=1; i <= 10; i++){
            if(i % 2 == 0) {
                console.log(i);
            }
        }

        //1부터 100까지 합계 구하여 출력
        var total = 0;
        for(var i=1; i<=100; i++) {
            total += i;
        }
        console.log(total);
    </script>

      (+) 자료형을 선언하는 것이 아닌 var를 사용한다.

      (+) 전부 자바 코드와 동일! 

      (+) 콘솔로 출력

[ 전체 코드 ]

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Javascript 예제</title>

    <!-- 구글 폰트 -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100..900&display=swap" rel="stylesheet">
     
    <!-- 내가 구현할 스타일 -->
    <link rel="stylesheet" type="text/css" href="../css/commons.css">
    <link rel="stylesheet" type="text/css" href="../css/test.css">
    
    <!-- font awesome 아이콘 CDN -->
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
    
    <style>

    </style>
    
    <script type="text/javascript">
        console.log("Hello Javascript!");

        //변수의 값에 따라 홀수, 짝수를 출력
        var number = 5;

        //if-else
        if(number % 2 != 0) {
            console.log("홀수");
        } else {
            console.log("짝수");
        }

        //switch-case
        switch(number % 2) {
            case 1:
                console.log("홀수");
                break;
            case 0:
                console.log("짝수");
                break;
        }

        //1부터 10까지 짝수만 출력
        for(var i=1; i <= 10; i++){
            if(i % 2 == 0) {
                console.log(i);
            }
        }

        //1부터 100까지 합계 구하여 출력
        var total = 0;
        for(var i=1; i<=100; i++) {
            total += i;
        }
        console.log(total);
    </script>
</head>
<body>
    <div class="container w-500">
        <div class="cell center">
            <h1>자바스크립트 조건과 반복</h1>
        </div>
        <div class="cell">

        </div>
    </div>
</body>
</html>

 

 

 

개인 공부 기록용입니다:)

728x90