[QUIZ]] 특정 규칙이 적용된 수열 출력하기 / n 이하 3의 배수 출력하기
05 Oct 2021 -
2 minute read
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;
}