웹개발 교육/JavaScript

[10일] JavaScript (4) - 이중 반복문, for 연습

2022. 8. 8. 18:03
목차
  1. 성적표 만들기
  2. 성적표
  3. 이중 반복문
  4. 회전수 증가
  5. 회전수 감소
  6. for 연습문제
  7. 문제 1
  8.  
  9. 문제 2
  10. 문제 3
  11. 문제 4
  12. 문제 5
  13. 문제 6

성적표 만들기

<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <title>01_성적표.html</title>
    </head>  
    <body>

        <h3>성적표</h3>
        <div id="demo"></div>

        <script>
            let name = "손흥민";
            let kor = 100, eng = 100, mat = 35;

            let total = kor + eng + mat;  //총점구하기
            let aver = total / 3;         //평균구하기

            /*
            -----------------------------
            이름    손흥민
            -----------------------------
            국어    100
            -----------------------------
            영어    100
            -----------------------------
            수학    95
            -----------------------------
            총점    235
            -----------------------------
            평균    98
            -----------------------------
                    A학점                    문1) 평균 90이상 A, 80이상 B, 70이상 C, 60점이상 D, 나머지 F ~~
            결과     합격                     문2) 과락(합격, 재시험, 탈락) 한과목이라도 40미만이면 재시험
                    ★★★★★★★★★        문3)평균 10점당 한개씩
                    장학생                   문4) 평균 95이상이면 장학생
            ----------------------------
            */

            // 학점 구하기
            // let grade = "";
            // if (aver>=90) {
            //     grade = "A학점";
            // } else if (aver>=80) {
            //     grade = "B학점";
            // } else if (aver>=70) {
            //     grade = "C학점";
            // } else if (aver>=60) {
            //     grade = "D학점";
            // } else {
            //     grade = "F학점";
            // }

            // document.write(grade);

            // switch case 이용
            let grade="";
            switch(parseInt(aver/10)) {
                case 10 :
                case  9 : grade="A학점"; break;
                case  8 : grade="B학점"; break;
                case  7 : grade="C학점"; break;
                case  6 : grade="D학점"; break;
                default : grade="F학점"; break;
            }//switch
            ///////////////////////////////////////////////////

            // 합격 여부
            // let pnp = "";
            // if (aver>=70) {
            //     if (kor<40 || eng<40 || mat<40) {
            //         pnp = "재시험";
            //     } else {
            //         pnp = "합격";
            //     }
            // } else {
            //     pnp = "탈락";
            // }

            // document.write(pnp);

            //
            let pass="";
            if (aver>=70) {
                if(kor<40 || eng<40 || mat<40) {
                    pass="재시험";
                } else {
                    pass="합격";
                }
            } else {
                pass="탈락";
            }//if end
            //////////////////////////////////////////////////////

            // 별점
            // let starcnt = "";
            // let star = Math.floor(aver/10);
            // for (i=0; i<star; i++) {
            //     starcnt = starcnt + "*";
            // }

            // document.write(starcnt);

            //
            let star="";
            for(let n=0; n<parseInt(aver/10);n++) {
                star=star+"*";
            }//for end
            ///////////////////////////////////////////////////////

            // 장학생 여부
            // let scholarship="";
            // if(aver>=95) {
            //     scholarship = "장학생";
            // } else {
            //     scholarship = "장학생 아님";
            // }    
            // document.write(scholarship);

            //
            var special = "&nbsp";
            if(aver>=95) {
                special = "<span style='color:red; font-weight:bold'>장학생</span>";
            }//if end
            /////////////////////////////////////////////////////////////

            //표 그리기
            // let result = "";

            // result = result + "<table border='1'>"
            // result = result + "<tr>"
            // result = result + "<th>이름</th>"
            // result = result + "<td>손흥민</td>"
            // result = result + "</tr>"
            // result = result + "<tr>"
            // result = result + "<th>국어</th>"
            // result = result + "<td>"+kor+"</td>"
            // result = result + "</tr>"
            // result = result + "<tr>"
            // result = result + "<th>영어</th>"
            // result = result + "<td>"+eng+"</td>"
            // result = result + "</tr>"
            // result = result + "<tr>"
            // result = result + "<th>수학</th>"
            // result = result + "<td>"+mat+"</td>"
            // result = result + "</tr>"
            // result = result + "<tr>"
            // result = result + "<th>총점</th>"
            // result = result + "<td>"+total+"</td>"
            // result = result + "</tr>"
            // result = result + "<tr>"
            // result = result + "<th>평균</th>"
            // result = result + "<td>"+aver+"</td>"
            // result = result + "</tr>"
            // result = result + "<tr>"
            // result = result + "<th rowspan=4>결과</th>"
            // result = result + "<td>"+grade+"</td>"
            // result = result + "</tr>"
            // result = result + "<td>"+pnp+"</td>"
            // result = result + "</tr>"
            // result = result + "<td>"+starcnt+"</td>"
            // result = result + "</tr>"
            // result = result + "<td>"+scholarship+"</td>"
            // result = result + "</tr>"
            // result = result + "</table>"
            
            // document.getElementById("demo").innerHTML=result;

            //
            let result="";
            result += "<table border='1'";
            result += "<tr>";
                result += "<th>이름</th>";
                result += "<td>" + name + "</th>";
            result += "</tr>";
            result += "<tr>";
                result += "<th>국어</th>";
                result += "<td>" + kor + "</th>";
            result += "</tr>";
            result += "<tr>";
                result += "<th>영어</th>";
                result += "<td>" + eng + "</th>";
            result += "</tr>";
            result += "<tr>";
                result += "<th>수학</th>";
                result += "<td>" + mat + "</th>";
            result += "</tr>";
            result += "<tr>";
                result += "<th>총점</th>";
                result += "<td>" + total + "</th>";
            result += "</tr>";
            result += "<tr>";
                result += "<th>평균</th>";
                result += "<td>" + aver + "</th>";
            result += "</tr>";
            result += "<tr>";
                result = result + "<th rowspan=4>결과</th>"
                result = result + "<td>"+grade+"</td>"
            result = result + "</tr>"
            result = result + "<tr>"
                result = result + "<td>"+pass+"</td>"
            result = result + "</tr>"
                result = result + "<td>"+star+"</td>"
            result = result + "</tr>"
                result = result + "<td>"+special+"</td>"
            result = result + "</tr>"

            result += "</table>";

            document.getElementById("demo").innerHTML=result;
        </script>
    </body>
</html>
01_성적표.html

성적표

이름손흥민
국어100
영어100
수학35
총점235
평균78.33333333333333
결과C학점
재시험
*******
 

 

이중 반복문

반복문도 여러 번 중첩하여 사용이 가능하다.

이를 이용하여 구구단을 출력해보자

 

//문제) 구구단 2~9단 출력하기
for (let dan=2; dan<=9; dan=dan+1) {
    document.write(dan + "단<br>");
    for (let i=1; i<=9; i=i+1) {
        document.write(dan+"*"+i+"="+(dan*i));
        document.write("<hr>");
    } // for end
    document.write("<hr>");
} // for end

 

 

회전수 증가

//회전수 증가
let a=0, b=0;
for(a=1; a<=4; a=a+1){
    for(b=1; b<=a; b=b+1){
        document.write("#");
    }
    document.write("<br>");
} // for end
/*
    a=1  1<=4
                b=1  1<=1  #
         2<=4
                b=1  1<=2  #
                     2<=2  #
         3<=4   
                b=1  1<=3  #
                     2<=3  #
                     3<=3  #
         4<=4
                b=1  1<=4  #
                     2<=4  #
                     3<=4  #
                     4<=4  #
*/

 

 

회전수 감소

//회전수 감소
for(a=4; a>=1; a=a-1){
    for(b=1; b<=a; b=b+1){
        document.write("$");
    }
    document.write("<br>");
} //for end
/*
    a=4  4>=1
              b=1  1<=4  $
                   2<=4  $
                   3<=4  $
                   4<=4  $
         3>=1
              b=1  1<=3  $
                   2<=3  $
                   3<=3  $
         2>=1
              b=1  1<=2  $
                   2<=2  $
         1>=1
              b=1  1<=1  $
                   2<=1  종료
         0>=1  종료
*/
document.write(a+b);  //0+2

 

 

for 연습문제

문제 1

//문1) 아래와 같이 출력하시오
/*
12345
23456
34567
45678
56789
*/
// for (let a=1; a<=5; a++) {
//     document.write(a);
//     for (b=a+1; b<=a+4; b++) {
//         document.write(b);
//     }
//     document.write("<hr>")
// }
// document.write("<hr>")
// 풀이2
for(let a=0; a<5; a=a+1){
    for(b=a+1; b<=a+5; b=b+1){
        document.write(b);
    } // for end
    document.write("<hr>");
} //for end
/*
    a=0  0<5
             b=0+1  1<=0+5
                    2<=0+5
                    3<=0+5
                    4<=0+5
                    5<=0+5
    a=1  1<5
             b=1+1  2<=1+5
*/

 

 

문제 2

//문2)아래 그림과 같이 출력하시오
/*
    @★★★
    ★@★★
    ★★@★
    ★★★@            
*/
for (let a=1; a<=4; a=a+1) {
    for(let b=1; b<=4; b=b+1) {
        if(a==b){
            document.write("@");
        }else{
            document.write("★");
        } // if end
    } // for end
    document.write("<br>");
} // for end
/*
    a=1 1<=4
                b=1 1<=4    {if(1==1) @}
                    2<=4    {if(1==2) else ★}
                    3<=4    {if(1==3) else ★}
                    4<=4    {if(1==4) else ★}
        2<=4
                b=2 1<=4    {if(2==1) else ★}
                    2<=4    {if(2==2) @}
                    3<=4    {if(2==3) else ★}
                    4<=4    {if(2==4) else ★}
*/

 

 

문제 3

//문3) 아래와 같이 누적의 합을 출력하시오 (회전수 증가)
/*
1+ ... +10=55
1+ ... +20=210
1+ ... +30=465
1+ ... +90=
1+ ... +100=5050            
*/
et sum = 0;
for (let j=1; j<=10; j++) {
    for (let k=1; k<=j*10; k++) {
        sum = sum + k;                                
    }
    document.write("1+..."+(j*10)+"="+sum);
    sum = 0; //초기화
    document.write("<br>");
}
document.write("<hr>")
// 풀이 2
let sum2=0; //누적의 합
for(let a=10; a<=100; a=a+10) {
    for(let b=1; b<=a; b=b+1) {
        sum2=sum2+b;
    } // for end
    document.write("1+..." + a + "=" + sum2);
    document.write("<br>");
    sum2=0; //초기화
} //for end
/*
    a=10
            b=1 1<=10   sum=0+1=1
                2<=10   sum=1+2=3
                3<=10   sum=3+3+6
                    ...
                10<=10  sum=45+10=55
    a=20
            b=1 1<=20   sum=55+1=56
*/

위 코드에서 초기화 과정이 없으면 1+..10=55로 처음만 원하는 값이 나오고 이후로는 원하는 값이 나오지 않는다.

그 이유는 sum이 55가 된 상태에서 다시 반복을 하기 때문이다.

이러한 문제를 해결하기 위해 초기화하는 과정이 필요하다.

 

 

 

문제 4

//문4) 1~100사이 중에서 짝수의 합, 홀수의 합을 각각 구하시오
let even = 0;
let odd = 0;
for (let i=1; i<=100; i++) {
    if (i%2==0) {
        even = even + i
    } else {
        odd = odd + i
    }
}
document.write("짝수의 합 : "+ even);
document.write("<hr>");
document.write("홀수의 합 : "+ odd);
document.write("<hr>");

 

// 다른 풀이
let flag = false;
let even2=0; //짝수의 합
let odd2=0; //홀수의 합
        
for(let a=1; a<=100; a=a+1){
    if(flag){
        flag=false;
        even2 = even2+a;
    }else{
        flag=true;
        odd2 = odd2+a;
    } //if end
} //for end
/*
    a=1 1<=100
                if(false)
                else {flag=true}
        2<=100
                if(true) {flag=false}
        3<=100
                if(false)
                else {flag=true}
        4<=100
                if(true) {flag=false}
*/
document.write("짝수의 합 : "+ even2);
document.write("<hr>");
document.write("홀수의 합 : "+ odd2);
document.write("<hr>");

 

 

문제 5

//문5) 다음식의 결과를 구하시오   
//    1 - 2 + 3 - 4 + 5 ... -100 = ?
let plema = false;
let sumplema = 0;
for (let i=1; i<=100; i++) {
    if(plema) {
        plema = false;
        sumplema = sumplema - i;
    } else {
        plema = true;
        sumplema = sumplema + i;
    }
}
document.write("결과 : " + sumplema);
document.write("<hr>");

 

 

문제 6

//문6) 2g, 3g, 5g짜리 추가 각각 5개씩 있을때,
//세가지의 추의 조합으로 무게가 40~45사이일 때
//각 추의 갯수와 무게를 출력하는 프로그램
/*
   출력결과
   2g  3g  5g   total
   1   5   5    42
   2   4   5    41
   2   5   5    44
*/       
let multisum = 0;
for (let d=0; d<=5; d++) {            //2g
    for (let e=0; e<=5; e++) {        //3g
        for (let f=0; f<=5; f++) {    //5g
            multisum = (d*2)+(e*3)+(f*5);
            if (40<=multisum && multisum <=45) {
                document.write(d+"개 "+e+"개 "+f+"개 "+" : "+multisum);
                document.write("<br>");
            } //if end
        } //for end                
    } //for end
} //for end

 

'웹개발 교육 > JavaScript' 카테고리의 다른 글

[12일] JavaScript (6) - 요일 구하기, Date 객체, 함수  (0) 2022.08.10
[11일] JavaScript (5) - 배열, 연습문제  (0) 2022.08.09
[9일] JavaScript (3) - switch ~ case문, for문, break, continue, while, do ~ while  (0) 2022.08.05
[8일] JavaScript (2) - 형변환, Math, if문  (0) 2022.08.04
[7일] JavaScript (1) - 자료형, 연산자  (0) 2022.08.03
  1. 성적표 만들기
  2. 성적표
  3. 이중 반복문
  4. 회전수 증가
  5. 회전수 감소
  6. for 연습문제
  7. 문제 1
  8.  
  9. 문제 2
  10. 문제 3
  11. 문제 4
  12. 문제 5
  13. 문제 6
'웹개발 교육/JavaScript' 카테고리의 다른 글
  • [12일] JavaScript (6) - 요일 구하기, Date 객체, 함수
  • [11일] JavaScript (5) - 배열, 연습문제
  • [9일] JavaScript (3) - switch ~ case문, for문, break, continue, while, do ~ while
  • [8일] JavaScript (2) - 형변환, Math, if문
ewok
ewok
ewok
기록장
ewok
전체
오늘
어제
  • 분류 전체보기
    • 웹개발 교육
      • HTML
      • CSS
      • JavaScript
      • Database
      • Java
      • jQuery
      • Ajax
      • Bootstrap
      • jsp
      • Spring
      • MyBatis
      • 프로젝트
    • JAVA
    • SpringBoot
      • 기초
      • AWS
      • 개인프로젝트
    • Spring Security
    • JPA
    • 테스트코드
    • Error
    • CS
      • 컴퓨터 구조
      • 이산수학
    • 알고리즘
      • 정리
      • Java
    • SQL
    • 자격증
      • SQLD
      • 정보처리기사
    • Git

블로그 메뉴

  • 홈
  • 태그
  • 방명록

공지사항

인기 글

태그

  • 노랭이
  • 버전 관리
  • 브랜치
  • sqld 합격
  • branch
  • org.springframework.beans.factory.UnsatisfiedDependencyException
  • sqld 자격증
  • base
  • 생성자
  • merge commit
  • this
  • git bash
  • org.hibernate.tool.schema.spi.CommandAcceptanceException
  • GIT
  • SQLD

최근 댓글

최근 글

hELLO · Designed By 정상우.
ewok
[10일] JavaScript (4) - 이중 반복문, for 연습
상단으로

티스토리툴바

단축키

내 블로그

내 블로그 - 관리자 홈 전환
Q
Q
새 글 쓰기
W
W

블로그 게시글

글 수정 (권한 있는 경우)
E
E
댓글 영역으로 이동
C
C

모든 영역

이 페이지의 URL 복사
S
S
맨 위로 이동
T
T
티스토리 홈 이동
H
H
단축키 안내
Shift + /
⇧ + /

* 단축키는 한글/영문 대소문자로 이용 가능하며, 티스토리 기본 도메인에서만 동작합니다.