[QUIZ]] 특정 규칙이 적용된 수열 출력하기 / n 이하 3의 배수 출력하기


1부터 10까지의 특정 규칙이 적용된 수열 출력하기 - 콘솔창에 2, 5, 8 출력하기



  • while
let output = "";
let cnt = 1;
while (cnt <= 10) {
    if (cnt % 3 == 2) {
        if (cnt < 8) {
            output += cnt + ", ";
        } else {
            output += cnt;
        }
    }
    cnt++;
}
console.log(output); 
  • for
let output = "";

for (let num = 1; num <= 10; num++) {

    if (num % 3 == 2) {

        if (num < 8) {
            output += num + ", ";
        } else {
            output += num;
        }
    }
    
}
console.log(output);



n 이하 3의 배수 출력하기



See the Pen n 이하 3의 배수 출력하기 by Jinsol (@losuif) on CodePen.



HTML

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>QUIZ</title>
</head>
<body>
    <div id="wrap">
        <h1>n 이하 3의 배수 출력</h1>

        <fieldset>
            <legend>출력결과</legend>

            <div id="insArea">
                입력 <input type="text" size="3" id="ins" autofocus>
                <button type="button" onclick="fnSbm()">확인</button>
                (10 이상 20 이하의 숫자 입력)
            </div>
            <!-- div#insArea -->

            <div id="resArea">
                <span>출력결과 : </span>
                <span id="res"></span>
            </div>
            <!-- div#resArea -->
        </fieldset>

    </div>
    <!-- div#wrap -->

    <script src="script.js"></script>
</body>
</html>



CSS

div#wrap {
    width: 600px;
    border: 1px solid #000;
    margin: 20px auto;
    padding: 20px;
}

fieldset {
    font-size: 20px;
    padding: 10px;
}

#ins, #res, button {
    font-size: 20px;
}

#insArea {
    margin-bottom: 20px;
}

#resArea span {
    display: block;
    height: 40px;
}



JavaScript

function fnSbm(){

    let domIns = document.getElementById("ins")
    let ins = domIns.value;
    ins = ins.trim();

    
    if (ins == "") {    //미입력상태시 경고창 띄우기 
                        // > 공백 유효성 검사 / 공백 validation
        alert("숫자를 입력해주세요");
        domIns.focus();
        //focus()메서드 > 입력창에 커서 위치하도록

        return false;
        //return : 1.반환값 2.함수 즉시 종료

    } else if (isNaN(ins)) {   //숫자 유효성 검사
                               // isNan(값)
                               // > 값이 숫자가 아니라면 true 반환
                               
        alert("숫자만 입력해주세요");
        domIns.focus();
        domIns.value = ""; //기존 입력값 제거

        return;
        // 함수 즉시 종료, 아래 내용 실행 안됨

    } else if (!(ins>=10 && ins<=20)) { //범위 유효성 검사
        alert("10이상 20이하의 값만 입력해주세요");
        domIns.focus();
        domIns.value = ""; //기존 입력값 제거

        return;
    }

    let i = 1;
    let result = "";
    let commaLength = ins / 3;  //몫 = 쉼표의 개수 + 1
    commaLength--;  //최종 쉼표의 개수
    let commaCnt = 0;
      
    while(i <= ins){
        if (i % 3 == 0) {
            result += i;
            commaCnt++;
            if (commaCnt <= commaLength) {
                result += ", ";
            }
        }
       i++;
    }    
       document.getElementById("res").innerText = result;
}

Categories:

Javascript