2020년 2월 25일 화요일 오전 7:00JavaScript12분 읽기 (대략 1805 단어)

자바스크립트 선택문,반복문

자바스크립트의 선택문(switch)와 반복문(while, for)

선택문 switch

변수에 저장된 값과 switch 문에 있는 경우(case) 값을 검사하여,

일치하는 값이 있을때 해당하는 실행문을 실행합니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
switch (변수){  
 case 1값: 실행문1;   
 /*변수값이 case값에 일치하는 데이터가 있으면,  
 해당하는 실행문 실행*/  
 break; //반복문을 강제로 끝내는 break;  
  
 case 2값: 실행문2;  
 break;  
    
 case 3값: 실행문3;  
 break;  
  
 default: 실행문4; //일치하는 값이 없을경우에 실행

if 와 switch 차이점

if문은 조건이 만족할 때 와 만족하지 않을때를 확인하기 위한 작업이 필요합니다.

조건식이 많아 질수록 느려 질수 있습니다.

1
2
3
4
5
6
7
8
9
if(){
    document.write();
}else if(){
    document.write();
}else if(){ 
    document.write();
}else{
    document.write();
}

switch문은 조건의 수를 따지지 않고

입력된 변수 값을 보고 해당하는 특정 위치로 점프합니다.

사실 조건식이 3개 이상일시 if보다 switch가 빠르다라는 효율적 측면보다.
가독성과 코드의 의미를 생각하며 사용하는게 옳다고 합니다.

반복문 while

while문은 조건식을 만족(true)할 때까지 실행문을 여러 번 반복하여 실행시킬 수 있습니다.

조건식을 만족할때 까지 {} 내에 실행문을 반복 실행 시킵니다.

while문의 실행 순서는
1.조건식을 검사.
2.조건식 만족시 {}내에 실행문과 증감식을 실행.
3.증감식 실행후 조건식을 다시 검사.
–반복
4.조건식이 거짓(false)값 이면 종료됩니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
let i=1; // 초기값 선언  
while(i<=10){ // i 값이 10보다 작거나 같을때(true) 까지 반복  
document.write("안녕하세요"+i,"<br />"); // 실행문  
i++; // 증감식  
}  

/*   
 안녕하세요1  
 안녕하세요2  
 안녕하세요3  
 안녕하세요4  
 안녕하세요5  
 안녕하세요6  
 안녕하세요7  
 안녕하세요8  
 안녕하세요9  
 안녕하세요10  
*/
```  

* * *

20부터 10까지 숫자 중 짝수을 경우 에는 파란색으로 출력,

홀수일 경우에는 빨간색으로 출력되도록 한 예제.

```js
let i=20;  
  
while(i>=10){   
 // i의 값이 10보다 클 때까지 반복문을 실행.  
  
 if(i%2==0){   
 // i의 값을 2로 나눠서 나머지가 0일 경우 (2의 배수)  
 document.write("<font color='blue'>"+i+"</font>", "<br/>");  
 } else{   
 // 2로 나눠서 나머지가 0이 아닐 경우  
 document.write("<font color='red'>"+i+"</font>", "<br/>");  
 }  
  
 i--;   
 // 감소 연산자 (i값을 1씩 감소 시킴.)  
}

for 문

for 문은 조건식을 만족할 때까지 실행문을 반복하여 실행합니다.

while 문보다 편리해 사용 빈도가 높은 편입니다.

for(초기값;조건식;증감식){
실행문;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
for (let i=1; i<=10; i++){ // i=1 , i값이 10까지 1씩 증가하며 반복합니다.  
    
 document.write("반복"+i,"<br/>");  
 /*  
 반복1  
 반복2  
 반복3  
 반복4  
 반복5  
 반복6  
 반복7  
 반복8  
 반복9  
 반복10  
 */  
}

for 문을 이용하여 1~100까지 숫자에서 5의 배수일 경우 빨간색,

7의 배수일 경우 초록색,

5의 배수이며 7의 배수일 경우 아쿠아색으로 출력한 예제

1
2
3
4
5
6
7
8
9
for(let a=1; a<=100; a++){  //변수 i가 100이 될 때까지 반복 실행합니다.  
    if(a%7==0 && a%5==0){   //5의 배수이고 7의 배수가 인 경우  
    document.write("<font color='aqua'>"+a+"</font>","<br />");  
    }else if(a%5==0){       //5의 배수인 경우  
    document.write("<font color='red'>"+a+"</font>","<br />");  
    }else if(a%7==0){       //7의 배수인 경우  
    document.write("<font color='green'>"+a+"</font>","<br />");  
    }  
}

continue 문

continue 문은 반복문에서만 사용할 수 있습니다.

continue 문 다음에 오는 실행문은 무시하고 실행해라는 뜻입니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// for 예시  
for(초깃값; 조건식; 증감식){  
 continue;   
 //다음에 오는 실행문은 무시하고 증감식으로 이동되 실행됩니다.  
 실행문;  
}  
// while 예시  
let 변수=초깃값;  
while(조건식){  
    증감식;  
    continue;  
//다음에 오는 실행은 무시하고 조건식으로 이동합니다.  
    실행문;  
}

countinue 실행문 무시 예제

1
2
3
4
5
6
7
8
9
for(let i=1; i<=10; i++){  
  
 if(i%2==0) continue;   
 // i가 2의 배수일때의 실행문은 무시하고 증감식으로 넘어갑니다.  
 document.write(i,"<br />");  
 // i값이 2의 배수가 아닌경우에만 실행됩니다.  
  
 //1 3 5 7 9  
}

중첩 for문으로 구구단 만들기

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
for(let i=2; i<=9; i++){  
// i는 2부터 9까지 1씩 커지게 반복시킵니다.   
 document.write("<h1>"+i+"단</h1>");  
 // i값+"단" 을 h1태그로 묶어 표시합니다.  
  
 for(let k=1; k<=9; k++){  
 // k는 1부터 9까지 1씩 커지게 반복시킵니다.  
 document.write(i+"X"+K+"="+i*K,"<br/>");  
/*   
i값 2부터  
k값 1부터 9까지  
i값 9까지 반복 실행되어  
   
i값+"X"+K값+"=" 이   
2X1 부터 순차적으로 실행되며  
 
+i*k 는 각 값의 곱셈이 실행됩니다.  
   
*/  
 }  
}
```  

* * *

### 현재 연도와 월에 맞는 전체 일자 출력하기

```js
//현재 년도와 월을 입력받습니다.  
const year=prompt("현재 몇 년 입니까?","0000");   
const mon=prompt("현재 몇 월 입니까?","0");  
let last_day;  
/*현재 월이 몇일까지 있는지 선택문을  
이용해 구합니다.*/  
switch (mon){  
 case "1" : last_day=31;  
 break;  
 case "2" : last_day=28;  
    
 /*현재 년도가 4년주기이고 100년 주기는 아닌경우  
 또는 400년 주기로 윤년이므로 2월은 29일까지 있습니다.*/  
 if(year % 4==0 && year % 100 !=0 || year % 400 ==0){  
 last_day=29;  
 }  
 break;  
 case "3": last_day=31;  
 break;  
 case "4": last_day=30;  
 break;  
 case "5": last_day=31;  
 break;  
    
 case "6": last_day=30;  
 break;  
    
 case "7": last_day=31;  
 break;  
    
 case "8": last_day=31;  
 break;  
    
 case "9": last_day=30;  
 break;  
    
 case "10": last_day=31;  
 break;  
    
 case "11": last_day=30;  
 break;  
    
 case "12": last_day=31;  
 break;  
}  
  
for(let i=1; i<=last_day; i++){  
 document.write(i+" ");  
}

자바스크립트 for 이용한 별 찍기

직각삼각형 만들기

1
2
3
4
5
6
7
8
9
10
11
12
13
14
let star="";  
  
for(let i=1; i<=5; i++){  
  
 star +="*";  
 console.log(star);  
}  
/* 
    * 
    **  
    *** 
    ****  
    *****  
*/

역 직각 삼각형 만들기

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
let star = "";  
  
for (let i = 0; i < 5; i++) {  
 for (let j = 0; j < i; j++){  
 star += " ";  
 }  
 for (let k = 1; k <= 5 - i; k++){   
 star += "*";  
 }  
 star += "n";  
}  
console.log(star);  
/*  
    *****  
    **** 
    ***  
    ** 
    * 
*/

정삼각형 만들기

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
let star = "";  
  
for (let i = 1; i <= 5; i++) {  
 for (let k = 5; k >i; k--) {  
 star += " ";  
 }  
 for (let j =1; j<(i*2); j++) {  
  
 star += "*";  
 }  
 star+="n";  
}  
console.log(star);  
  
/* 
        * 
       *** 
      *****  
     *******  
    *********  
*/

마름모 만들기 - 1

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
let star = "";  
  
for (let i = 1; i <= 5; i++) {  
 for (let k = 5; k >i; k--) {  
 star += " ";  
 }  
 for (let j =1; j<(i*2); j++) {  
  
 star += "*";  
 }  
 star+="n";  
}  
for (let s = 1; s <= 4; s++){  
 for(let x= 0; x <s; x++){  
 star+=" ";  
 }  
 for(let q=9; q>s*2; q--){  
 star+="*";  
 }  
 star +="n";  
}  
  
console.log(star);  
/*   
     *  
    *** 
   ***** 
  *******  
 *********  
  *******  
   ***** 
    *** 
     *  
*/

마름모 만들기 - 2

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
let star=""; // 공백과 별이 들어갈 변수입니다.  
let count = 9; // 반복문을 실행시킬 총 값 입니다.  
let halfNum = Math.round(count/2);   
/* count/2 소수점 값 반올림하여 절반 값을 구합니다.  
(count 값에 홀수,짝수,소수점 값이 와도 일정하게 절반 값을 구합니다.)  
*/  
let space=0;  
 for (let i = 1; i <= count; i++) { // count 값 만큼 반복문을 실행합니다.  
    
 for(let k=1; k<=halfNum+space; k++){   
 /* 행값입니다 1부터 (halfNum+space)와 같거나 작은 값까지 반복하고.  
 열(i) 값에 따라 행 값을 1씩 늘리거나 줄일 것입니다.  
 */  
    
 /*  
 k<= 5(halfNUm) + 0 (space) // k<= 5  
 k<= 5(halfNUm) + 1 (space) // k<= 6  
 k<= 5(halfNUm) + 2 (space) // k<= 7  
 k<= 5(halfNUm) + 3 (space) // k<= 8  
 k<= 5(halfNUm) + 4 (space) // k<= 9  
 k<= 5(halfNum) + 3 (space) // k<= 8  
 k<= 5(halfNum) + 2 (space) // k<= 7  
 k<= 5(halfNum) + 1 (space) // k<= 6  
 k<= 5(halfNum) + 0 (space) // k<= 5  
 */  
  
 /* k 가 halfNum-spcae값 보다 작을때 true값 " "; false값 "*"을  
 star값에 저장합니다.  
 */  
 star+= k<halfNum-space ? " " : "*";  
 /*  
 k< 5(halfNum)-0(space) // k<5 \\\\F  
 k< 5(halfNum)-1(space) // k<4 \\\FFF  
 k< 5(halfNum)-2(space) // k<3 \\FFFFF  
 k< 5(halfNum)-3(space) // k<2 \FFFFFFF  
 k< 5(halfNum)-4(space) // k<1 FFFFFFFFF  
 k< 5(halfNum)-3(space) // k<2 \FFFFFFF  
 k< 5(halfNum)-2(space) // k<3 \\FFFFF  
 k< 5(halfNum)-1(space) // k<4 \\\FFF  
 k< 5(halfNum)-0(space) // k<5 \\\\F  
 */  
 }  
 if(i<halfNum){ //i값이 halfNum 값보다 작다면 space++;  
 space++;  
 }else{ // 아닌 경우 space--;  
 space--;  
 }   
 star+="n";  
}  
console.log(star);
#

카테고리

×