반응형
겁나어렵고 머리깨지는 07_반복문
JS가 자바스크립트가 아니고 진상이 아닌가 싶을정도
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>07_반복문</title>
</head>
<body>
<h1>for문</h1>
<pre>
- 프로그램의 흐름을 제어하는 제어문 중 하나로
특정 코드를 반복할 때 사용하는 구문
- 끝이 정해져 있는 반복에서 주로 사용
(ex. 몇 번만 반복)
[작성법]
for([1]초기식 ; [2]조건식 ; [4]증감식){
[3]조건식이 true인 경우 반복 수행할 코드;
}
// 1~4 까지 1회 반복 후, 2 ~ 4 계속 반복
// 조건식이 false가 되면 바로 종료
초기식 : for문을 제어하는 용도의 변수 선언
조건식 : for문의 반복 여부를 지정하는 식
- true 일 때 반복, false일 때 반복 종료
- 보통 초기식에 사용된 변수를 이용해서 조건식을 작성
증감식 : 초기식에 사용된 값을 변환 시키는 식
-> 변환된 초기식에 의해서 조건식의 결과가 달라지게 한다
</pre>
<h4>12345 출력하기</h4>
<button onclick="check1()">확인 1</button>
<h4>1부터 10까지 1씩 증가하며 출력하기</h4>
<button onclick="check2()">확인 2</button>
<h4>5부터 13까지 1씩 증가하며 출력하기</h4>
<button onclick="check3()">확인 3</button>
<h4>1부터 5까지 1씩 증가한 숫자를 한 줄로 출력하기</h4>
<button onclick="check4()">확인 4</button>
<h4>1부터 10까지 1씩 증가한 숫자들의 합을 출력하기</h4>
<button onclick="check5()">확인 5</button>
<h4>1부터 10까지 2씩 증가하며 출력하기</h4>
<button onclick="check6()">확인 6</button>
<h4>3부터 30까지 3의 배수만 출력하기</h4>
<button onclick="check7()">확인 7</button>
<h4>1부터 20까지 4의 배수만 출력하고 4의 배수 합계도 구하기</h4>
<button onclick="check8()">확인 8</button>
<h4>입력 받은 범위 내 지정된 배수 출력 / 합계 구하기</h4>
<div>
시작 : <input type="number" id="start9">
<br>
종료 : <input type="number" id="end9">
<br>
배수 : <input type="number" id="multiple9">
<br>
<button onclick="check9()">확인 9</button>
</div>
<h4>입력 받은 단(2~9)의 구구단 출력하기</h4>
<pre>
ex) 2단
5 x 1 = 2
5 x 2 = 4
5 x 3 = 6
5..
5 x 8 = 16
5 x 9 = 18
</pre>
단 입력 : <input type="number" id="dan10">
<button onclick="check10()">구구단 출력</button>
<h4>10부터 1까지 1씩 감소하며 출력하기</h4>
<button onclick="check11()">확인11</button>
<h4>입력 받은 단 거꾸로 출력 하기</h4>
단 입력 : <input type="number" id="dan12">
<button onclick="check12()">거꾸로 출력</button>
<h4>특정 배수 마다 지정된 모양으로 출력하기</h4>
<pre>
- 1 ~ 20, 1씩 증가하는 반복문
- 한 줄당 숫자 10개씩만 출력
hint > innerHTML 사용
-> 대입되는 HTML 태그 문자열을 해석하는 특징이 있음
[출력 화면]
배수 지정 : 5
출력 모양 : @
1 2 3 4 @ 6 7 8 9 @
11 12 13 14 @ 16 17 18 19 @
</pre>
<div>
배수지정 : <input type="number" id="input13">
<br>
출력 모양 : <input type="text" id="output13">
<br>
<button onclick="check13()">출력 하기</button>
<!-- 결과 출력! -->
<p id="result13"></p>
</div>
<h1 style="font-family: '궁서체';" >중첩 반복문(2중 for문)</h1>
<pre>
- 반복문 내에 반복문이 작성된 형태
[작성법]
for(초기식1 ; 조건식1 ; 증감식1){
for(초기식2 ; 조건식2; 증감식2){
}
}
</pre>
<h4>다음 모양 출력하기</h4>
<pre>
1234
1234
1234
</pre>
<button onclick="check14()">출력하기</button>
<h4>다음 모양 출력하기</h4>
<pre>
12345
12345
12345
</pre>
<button onclick="check15()">출력하기</button>
<h4>다음 모양 출력하기</h4>
<pre>
654321
654321
654321
</pre>
<button onclick="check16()">출력하기</button>
<pre>
1
12
134
1234
</pre>
<button onclick="check17()">출력하기</button>
<pre>
*
**
***
****
</pre>
<button onclick="check18()">출력하기</button>
<h4>다음 모양 출력하기</h4>
<pre>
12345
1234
123
12
1
</pre>
<button onclick="check19()">출력하기</button>
<hr><hr>
<!--
숫자 누적 == 합계(sum)
문자열 누적 == 이어쓰기
숫자 세기 == 카운트(count) -> 몇개? 몇번?
-->
<h3>1부터 30 사이의 정수 중 4의 배수의 개수 구하기</h3>
<button onclick="check20()">확인하기</button>
<h3>1부터 100사이의 정수 중 입력받은 값이 배수가 몇개인지 구하기</h3>
<input type="number" id="input21">
<button onclick="check21()">확인하기</button>
<h3>count를 이용해 다음 모양 출력하기</h3>
<pre>
1 2 3 4
5 6 7 8
9 10 11 12
</pre>
<button onclick="check22()">출력하기</button>
<hr><hr>
<h1>while문 (조건식이 만족하는 동안 반복)</h1>
<pre>
- 끝이 정확하게 정해져있지 않은 경우 주로 사용하는 반복문
ex) 이해가 될 때 까지, 배가 부를 때 까지
돈 100만원을 모을 때 까지
-> 몇 회 반복을 해야될지 모르겠지만
반복은 필요한 경우
[작성법]
<!-- if(조건식){
조건식이 true인 경우 수행;
} -->
while(조건식){
조건식이 true인 경우 반복 수행;
}
</pre>
<h3>0이 입력될 때 까지 입력된 값 누적하기</h3>
<button onclick="check23()">확인하기</button>
<h3>메뉴 주문하기</h3>
<!-- while + count + switch -->
<ol>
<li>김밥 : 4000</li>
<li>라면 : 4500</li>
<li>돈까스 : 9000</li>
</ol>
<strong style="color: red;">취소 클릭시 주문 완료</strong>
<button onclick="check24()">주문하기</button>
<!-- 주문 내역 -->
<ul id="result24">
<!-- <li>김밥(5개) : 20000원</li>
<li>라면(2개) : 9000원</li>
<li>돈까스(1개) : 9000원</li>
<li>합계 : 38000원</li> -->
</ul>
<script src="../Js/07_반복문.js"></script>
</body>
</html>
JS
/* for([1]초기식 ; [2]조건식 ; [4]증감식){
[3]조건식이 true인 경우 반복 수행할 코드;
}
*/
/** 12345 출력 */
function check1(){
// num이 1부터 시작해서
// 1씩 증가 하다가
// num 값이 5 이하가 아닌 순간 반복을 종료하는 반복문
for(let num = 1; num <= 10 ;num++){
console.log(num);
}
}
// 1부터 10까지 1씩 증가하며 출력하기
function check2(){
for(let num = 1; num <= 10 ;num++){
console.log(num);
}
}
// 5부터 13까지 1씩 증가하며 출력하기
function check3(){
for(let num = 5; num <= 13 ;num++){
console.log(num);
}
}
// 1부터 5까지 1씩 증가한 숫자를 한 줄로 출력하기
function check4(){
let result = ''; // 결과 저장용 변수에 빈칸(string);
for(let num = 1; num <= 5 ;num++){
result += num; // result = result + num;
}
console.log(result); // '12345'
}
// 1부터 10까지 1씩 증가한 숫자들의 합을 출력하기
function check5(){
let sum = 0; // 더했을 때 영향이 없는 숫자 0을 대입
for(let num = 1; num <= 10 ;num++){
sum += num;
}
console.log(sum);
}
// shift + alt + r -> 한번에 바꾸기!~!!!
// 1부터 10까지 2씩 증가하며 출력하기
function check6(){
// 증감식을 2씩 증가하도록 변경(복학 대입 연산자 사용)
for(let num = 1; num <= 10; num += 2){
console.log(num);
}
}
// 3부터 30까지 3의 배수만 출력하기
function check7(){
for(let num = 3; num <= 30; num += 3){
console.log(num);
}
}
// 1부터 20까지 4의 배수만 출력하고 4의 배수 합계도 구하기
function check8(){
let sum = 0; // 합계 저장용 변수
for(let num = 1; num <= 20; num ++){
if(num % 4 === 0){// 4의 배수인 경우
console.log(num);
sum += num; // 합계 누적
}
}
console.log("합계 : ", sum);
}
/** 입력 받은 범위 내 지정된 배수 출력 / 합계 구하기 */
function check9(){
// 기능 수행에 필요한 요소들 모두 얻어오기
const start = document.getElementById("start9");
const end = document.getElementById("end9");
const multiple = document.getElementById("multiple9");
// input 요소에 작성된 값을 얻어와 숫자로 변환해서 저장
const s = Number(start.value);
const e = Number(end.value);
const m = Number(multiple.value);
let sum = 0; // 합계 저장용 변수
// 입력된 값의 범위 만큼 반복
for(let num = s ; num <= e; num++){
if(num % m === 0){ // 지정된 배수(m) 가 맞을경우
console.log(num);
sum += num;
}
}
console.log("합계 :", sum);
}
// 구구단 출력
function check10(){
// 단이 입력되는 요소 얻어오기
const input = document.getElementById("dan10");
// 단이 입력되지 않은 경우
if(input.value.length === 0){
alert("단을 입력해 주세요.");
return; // 함수를 "즉시종료" 하고 호출한 곳으로 돌아감!
}
// 단이 2~9 사이가 아닌경우
const dan = Number(input.value);
if(dan < 2 || dan >9 ){
alert(" 2 ~ 9 사이 숫자를 입력해 주세요");
return;
}
// 구구단 출력
for(let num = 1 ; num <= 9; num++){
console.log(`${dan} X ${num} = ${dan * num}`);
}
}
// 10부터 1까지 1씩 감소하며 출력하기
function check11(){
for(let num = 10; num > 0 ;num--){
console.log(num);
}
}
// 입력 받은 단 거꾸로 출력 하기
function check12(){
const input = document.getElementById("dan12");
if(input.value.length === 0 ){
alert("단을 입력해 주세요.");
return;
}
const dan = Number(input.value);
if(dan < 2 || dan > 9){
alert(" 2~ 9 사이 숫자를 입력해 주세요!!")
return;
}
// 구구단 역순 출력
for(let num = 9; num >= 1; num--){
console.log(`${dan} X ${num} = ${dan * num}`);
}
}
function check13(){
// 기능 수행에 필요한 요소 모두 얻어오기
const input = document.getElementById("input13");
const output = document.getElementById("output13");
const result = document.getElementById("result13");
// 배수
const multiple = Number(input.value);
// 출력 모양
const shape = (output.value);
let str = ''; // 출력될 문자열을 저장할 변수
for(let num = 1 ; 20 >= num; num++){// 1 ~ 20, 1씩 증가하는 반복문
// 현재 반복되는 숫자가 multiple의 배수인 경우
if(num % multiple === 0){
// console.log(shape);
str += `${shape} `;
} else { // 배수가 아니면 현재 반복 숫차 출력
// console.log(num);
str += `${num} `;
}
// num === 10 인 경우 줄을 변경하는 <br> 추가
if(num === 10) str += "<br>"; //한 줄인 경우 {} 생략 가능
}
// console.log(str);
//화면에 결과 출력(HTML 태그 해석)
result.innerHTML = str;
}
/* 다음 모양 출력하기
1234
1234
1234
*/
function check14(){
// 행은 3번 반복
// 1행 마다 4번 반복
for(let row = 1 ; row <= 3 ; row++){ // 3 행 반복
let str = ''; // 한 행의 출력될 문자열을 저장할 변수
// 1행 마다 4번 반복
for(let col =1; col <= 4; col++){
str += col;
}
// 안쪽 for문 반복 결과를 출력
console.log(str);
console.log("--------");
}
}
/* 12345
12345
12345
12345
*/
function check15(){
for(let row = 0; row < 4; row++){ // 4 행반복
let str = '';
for(let col = 0; col <5 ; col++){ // 5 열 반복
str += (col + 1); //01234 -> 12345
}
console.log(str);
console.log("--------");
}
}
/*
654321
654321
654321
*/
function check16(){
for(let row = 0; row < 3; row++){ // 0,1,2 3회 반복
let str = '';
for(let col = 6; col >= 1 ; col--){
str += (col);
}
console.log(str);
console.log("--------");
}
}
/*
1
12
134
1234
*/
function check17(){
for(let row = 1; row <= 4 ; row++){
str='';
for(let col = 1; col <= row; col++){
str += col;
}
console.log(str);
console.log("--------");
}
}
/*
*
**
***
****
*/
function check18(){
for(let row = 1; row <= 4 ; row++){
str= '' ;
for(let col = 1; col <= row; col++){
str += '*'; // 숫자 대신 '*' 누적
}
console.log(str);
console.log("--------");
}
}
function check19(){
for(let row = 5; row >= 1 ; row--){
str='';
for(let col = 1; col <= row ; col++){
str += col;
}
console.log(str);
console.log("--------");
}
}
/** 1부터 30 사이의 정수 중 4의 배수의 개수 구하기 */
function check20(){
let count = 0; // 4의 배수를 세기 위한 변수
for(let num=1 ; num <= 30 ; num++){
if(num % 4 === 0){ // 4의 배수인 경우
count++; // count 1증가
}
}
alert(`count : ${count}`); // 7
}
function check21(){
let count = 0; // 배수 카운트
// 입력받은 값을 얻어와 숫자로 변환해 저장
const multiple = document.getElementById("input21");
const m = Number(multiple.value);
for(let num=1; num <= 100; num++) {
if(num % m === 0){ // 입력받은 수의 배수인 경우
count++;
}
}
alert(`count : ${count}`);
}
/*
1 2 3 4
5 6 7 8
9 10 11 12
*/
function check22(){
let count = 1;
// 3행 4열 2중 for 문
for(let row = 1; row <= 3; row++){
let str = '';
for(let col = 1; col <= 4; col++){
// str += count; //count 값 대입
// count++; // count 1증가
str += count++; // count 값 대입 후 1 증가
}
console.log(str);
}
}
/* while*/
/** 0이 입력될 때 까지 입력된 값 누적하기 */
function check23(){
let sum = 0; // 누적용 변수
let value;
while( (value = Number( prompt ("숫자 입력") )) != 0 ){
sum += value; // 누적
}
alert(`합계 : ${sum}`);
}
/**메뉴 주문하기 */
function check24(){
// 메뉴 가격을 저장한 변수 선언
const gimbap = 4000;
const ramen = 4500;
const donkkaseu = 9000;
// 주문 개수 카운트
let gimbapCount = 0; // 김밥 주문 개수 카운트하는 변수
let ramenCount = 0; // 라면
let donkkaseuCount = 0; // 돈까스
// prompt에 입력된 값을 저장 할 변수
let input; // 선언만 한 경우 undefined
// input이 undefined이기 때문에
// while문 첫 반복은 무조건 수행됨!!
while(input !== null){ // input이 null이 아니면 반복
// prompt -> 확인 : 작성한 값 반환
// prompt -> 취소 : null
// -> 취소 선택시 while문 자음 반복 수행 X
input = prompt("메뉴 번호 입력");
// input 값에 따라서 알맞는 case 수행
switch(input){
case '1' : gimbapCount++; break;
case '2' : ramenCount++; break;
case '3' : donkkaseuCount++; break;
case null : alert("주문 완료!!!!"); break;
default : alert("메뉴에 작성된 번호만 입력해 주세요!");
}
} // while end
let html = ''; // 화면에 출력될 html 코드를 저장할 변수
if(gimbapCount > 0){
html += `<li>김밥(${gimbapCount}개) : ${gimbapCount * gimbap}원</li>`;
}
if(ramenCount > 0){
html += `<li>라면(${ramenCount}개) : ${ramenCount * ramen}원</li>`;
}
if(donkkaseuCount > 0){
html += `<li>돈까스(${donkkaseuCount}개) : ${donkkaseuCount * donkkaseu}원</li>`;
}
const sum = (gimbapCount * gimbap)
+ (ramenCount * ramen)
+ (donkkaseuCount * donkkaseu);
html += `<li>합계 : ${sum}원</li>`;
// id가 "result24"인 요소에 내용으로 html 변수 값 추가
// + HTML 태그 해석
document.getElementById("result24").innerHTML = html;
}
구구단표만들기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>구구단 표 만들기</title>
</head>
<body>
<header>
<h1>구구단 표 만들기</h1>
</header>
<main>
시작 단 : <input type="number" id="start">
종료 단 : <input type="number" id="end">
<button onclick="createTable()">만들기</button>
<table border="1">
<!-- 테이블 머리(제목)을 작성하는 영역 -->
<thead>
<tr id="thead-row">
<th>2단</th>
<th>3단</th>
<th>4단</th>
</tr>
</thead>
<!-- 테이블 몸통(내용, 데이터)를 작성하는 부분 -->
<tbody id="tbody">
<tr>
<td>2 x 1 = 2</td>
<td>3 x 1 = 3</td>
<td>4 x 1 = 4</td>
</tr>
<tr>
<td>2 x 2 = 4</td>
<td>3 x 2 = 6</td>
<td>4 x 2 = 8</td>
</tr>
<tr>
<td>2 x 3 = 6</td>
<td>3 x 3 = 9</td>
<td>4 x 3 = 12</td>
</tr>
</tbody>
</table>
</main>
<script src="../js/08_구구단표만들기.js"></script>
</body>
</html>
/* 구구단표 만들기 */
function createTable(){
// 시작 단
const startInput = document.getElementById("start");
// 종료 단
const endInput = document.getElementById("end");
// 테이블 머리(제목)을 작성하는 영역(행)
const theadRow = document.getElementById("thead-row");
// 테이블 몸통(내용, 데이터)를 작성하는 부분
const tbody = document.getElementById("tbody");
// ------------------------------------------------------
// 이전 #thead-row, #tbody에 작성된 내용을 모두 삭제
theadRow.innerHTML = ''; // 빈칸을 대입해서 삭제한 효과
tbody.innerHTML = '';
//-------------------------------------------------------
/* 입력받은 단을 number 타입으로 변경 */
const start = Number(startInput.value);
const end = Number(endInput.value);
// ------------------------------------------------------
// 단(제목) 만들기
// 시작 단 ~ 종료 단 반복문
for(let dan = start ; dan <= end ; dan++){
theadRow.innerHTML += `<th>${dan}단</th>`;
}
// ------------------------------------------------------
// 구구단(내용) 만들기
// 구구단에 곱해지는 수(1~9) 반복 == 행
for(let num = 1; num <= 9; num++){
// 한 줄을 저장할 변수 선언
let tr = "<tr>";
for (let dan = start ; dan <= end; dan++){
tr += `<td>${dan} x ${num} = ${dan * num}</td>`;
}
tr += "</tr>";
// 만들어진 한 줄을 #tbody에 누적
tbody.innerHTML += tr;
}
}
09_분기문
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>09_분기문</title>
</head>
<body>
<h1>분기문</h1>
<pre>
- 반복문 수행 중
현재 반복을 멈추거나
다음 반복으로 넘어가는 구문
- break : (감싸고 있는 / 가까운) 반복문을 멈춤
- continue : (감싸고 있는 / 가까운)
반복문의 시작 부분으로 이동
-> 중간에 다음 반복으로 넘어감
</pre>
<button onclick="check1()">break 확인</button>
<button onclick="check2()">무한 반복 멈추기</button>
<button onclick="check3()">continue 확인</button>
<button onclick="check4()">continue 확인2</button>
<hr>
<h1>UP & DOWN GAME</h1>
<pre>
1부터 200 사이 난수를 몇 회 만에 맞추는지 카운트하는 게임
- Math.random() : 난수 발생
- Math.floor() : 내림 처리해서 정수로 변환
- while()
- break;
- continue;
- if()
- count;
</pre>
<button onclick="startGame()">게임 시작</button>
<script src="../Js/09_분기문.js"></script>
</body>
</html>
/** break 확인 */
function check1(){
// 1부터 10까지 1씩 증가하는 반복문
// 단, 5를 출력한 후 멈춤
for(let num = 1; num <= 10; num++){
console.log(num);
if(num === 5){
break;
}
}
}
/** 무한 반복 멈추기 */
function check2(){
let sum = 0; // 합계 저장용 변수
// while문은 () 내 조건식이 true일 때 반복을 수행
// -> true 라고 작성하면 조건식이 false가 되는 경우가 X
// -> 무한 반복
// * 무한 반복하는 코드에는 break를 포함한 if문을 작성해서
// 종료 조건을 만들어 두어야만 한다!!!!!!!!!!
while(true){
const value = prompt("숫자 입력"); // 취소 -> null
// 취소 클릭 시 반복 종료
if(value === null) break;
// 확인 클릭시 sum에 입력한 숫자를 누적
sum += Number(value);
}
alert("합계 : " + sum);
}
/** continue 확인 */
function check3(){
// 1부터 20까지 1씩 증가하는 반복문
// 단, 3의 배수는 건너뛰기
for(let num = 1; num<=20 ; num++){
if(num % 3 === 0) continue;
console.log(num);
}
}
/** continue + 중첩 반복문에서의 분기문 */
function check4(){
// 0123456789 를 5줄 출력
// 단, 1번 줄에서는 1제외
// 2번 줄에서는 2제외
// 3번 줄에서는 2제외
// n번 줄에서는 n제외
for(let row=1 ; row <=5 ; row++){ // 행 제어
let str = ''; // 문자열 형태로 누적하기 위한 변수 선언
for(let col =1; col <=9 ; col++){ // 열 제어
// n 번 줄인 경우 같은 n열 제외
if(row === col) continue; // 감싸고 있는 for문만 건너뜀
str += col; // 이어쓰기
}
console.log(str); // 한 줄 출력
}
}
/* UP & DOWN GAME */
function startGame(){
// 맞춰야하는 난수(1~200) 발생
const answer =
Math.floor(Math.random() * 200) + 1; /* 0.0 <= skstn < 1.0 이기 때문 */
// console.log("정답 : ", answer );
// ---------------------------------------------
// 정답 시도 횟수를 세기 위한 변수 선언
let count = 0;
// ---------------------------------------------
// prompt에 출력할 문자열
let str = "1부터 200 사이 숫자 입력";
while(true){ // 무한 반복
// 숫자만 정상 입력한다고 가정
let input
= prompt(str);
if(input === null){ // 취소 클릭 시
alert("패배자");
break;
}
/* 숫자 입력 후 확인 클릭시 */
const value = Number(input); // 입력 받은 값 숫자로 변환
/* 잘못 입력한 경우 */
// NaN (Not a Number : 숫자가 아니다)
// isNaN(값) : 값이 NaN 이면 true
if(isNaN(value)){ // 숫자가 아닌 값을 입력한 경우
alert("숫자만 입력해 주세요");
continue;
}
if(value < 1 || value >200){ // 범위 초과
alert("1 ~ 200 사이 값만 작성해 주세요");
continue;
}
// 정답을 맞추기 위한 시도를 했기 때문에 count 증가
count++;;
/* 정답인 경우 */
if(value === answer){
alert(`승리자 (${answer}) / 시도 횟수 : ${count}`)
break;
}
/* 정답이 아닌 경우 */
if(value < answer){
str = `${value} [UP] / 시도 횟수 : ${count}회`;
} else { // 큰 경우
str = `${value} [DOWN] / 시도 횟수 : ${count}회`;
}
}
}
반응형