---
title: "JavaScript 정리 04"
date: "2019-02-08"
tags: ["JavaScript"]
status: archived
verified: false
---

---

## 제어문

* 문법은 자바와 동일

```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>switch case</title>
<style type="text/css">
     #bloodTable { border-spacing:0px; }
     td,th { border:1px solid #333; text-align:center; }
     #btTitle { width:80px; }
     #btSpec { width:300px; }
</style>
<script type="text/javascript">

     var bloodType = prompt("혈액형을 입력해주세요.", "");
     var output="";

     switch(bloodType.toUpperCase()) {
     case 'A':
           output="세심하고 치밀하다.";
           break;
     case 'B':
           output="털털함, 내것아님 관심없음";
           break;
     case 'O':
           output="복집하고 합리적임";
           break;
     case 'AB':
           output="질긴 생명력, 리더쉽이 좋음";
           break;
     default:
           output="사람 혈액형이 아닙니다.";
           break;
     }
     
     document.write("<table id='bloodTable'>");
     document.write("<tr>");
     document.write("<th id='btTitle'>혈액형</th>");
     document.write("<th id='btSpec'>특징</th>");    
     document.write("</tr>");
     document.write("<tr>");
     document.write("<td>"+bloodType+"</td>");
     document.write("<td>"+output+"</td>");
     document.write("</tr>");
     document.write("</table>");

</script>
</head>
<body>
</body>
</html>
```

![01](/md/legacy-assets/Web/JS/04/01.webp)

## for

* 시작값으로 **지역변수(var)**를 줘야 한다.
  * 전역이면 for문 바깥에서도 사용됨

```
for(시작값; 조건식; 증감식) { } // 시작값으로 "var i = 초기값"처럼 설정
```

```html
<script type="text/javascript">
     
     document.write("<table border='1'>");
     document.write("<tr>");
     for(var i=0; i<10; i++) {
           document.write("<td width='40'  align='center'>"+(i+1)+"</td>");
     }
     document.write("</tr>");
     document.write("</table>");
     
</script>
```

![02](/md/legacy-assets/Web/JS/04/02.webp)

```javascript
// 1~31의 <option>을 가진 <select>를 생성
document.write("<div>");
document.write("<select>");
for(var i=1; i<32; i++) {
     document.write("<option>"+i+"</option>");
}
document.write("</select>");
document.write("</div>");
```

![03](/md/legacy-assets/Web/JS/04/03.webp)

```javascript
// 다중 for
document.write("<div>");   
document.write("<table border='1'>");
for(var j=1; j<10; j++) {
    document.write("<tr>");    
        for(var i=2; i<10; i++) {
            document.write("<td>"+i+"*"+j+"="+(i*j)+"</td>");
        }
    document.write("</tr>");   
}
document.write("</table>");     
document.write("</div>");  
```

![04](/md/legacy-assets/Web/JS/04/04.webp)

```javascript
// SIST로고가 L 테이블에 형태로 출력되도록 만들기
document.write("<div>");
document.write("<table>");
for(var j=1; j<6; j++) {
     document.write("<tr>");
     for(var i=1; i<j; i++) {
           document.write("<td>");
           document.write("<img  src='http://localhost:8080/html_prj/common/images/sist_logo.jpg'>");
           document.write("</td>");
     }
     document.write("</tr>");
}
document.write("</table>");
document.write("</div>");
```

![05](/md/legacy-assets/Web/JS/04/05.webp)

## while

```html
<script type="text/javascript">
     // while : 최소 0번부터 최대 조건까지 반복
     // do ~ while : 최소 1번부터 최대 조건까지 반복
     
     var i = 1;
     while(i<7) {
           document.write("<h"+i+">안녕</h"+i+">");
           i++;
     }
     
</script>
```

![06](/md/legacy-assets/Web/JS/04/06.webp)

```javascript
// do ~ while : 최소 1번부터, 최대 조건까지 반복
var j = 0; // 초기값
do {
     document.write("<input name='score' type='radio'  value='"+j+"''>"+j+"점&nbsp;");
     j++;
}while(j <11);
```

![07](/md/legacy-assets/Web/JS/04/07.webp)

## 배열(Array)

* **일괄처리**를 위해 사용
* **일차원 배열만 제공**
* 자바의 배열은 고정길이형, **JS의 배열은 가변길이형**
     * 데이터가 추가되면 방(Element, 요소)의 개수가 증가한다.
* **이름이 같으면 배열로 처리된다.**
* 자바 지네릭스처럼 개발자가 배열에 담기는 데이터형을 제한할 수 없다
     * **배열엔 모든 데이터형이 들어간다.**

```javascript
// 1. 생성
var arrayName = new Array();

// 2. 값 할당, 배열명[인덱스] = 값;
arrayName[0] = 10; // 배열에 값을 추가할 때마다 배열이 길어짐(가변길이)

// 3. 값 얻기, 배열명[인덱스]
var someVal = arrayName[0];

// 4. 모든 방의 수 구하기
var arrayLength = arrayName.length;

for(var i=0; i<arrayLength; i++) {
    console.log(arrayName[i]);
}
```

```javascript
// 1. 생성 : var 배열명 = new Array();
var arr = new Array();
console.log("방의 갯수 : "+arr.length); // 0

// 2. 값 할당 : 방의 수가 증가 - 가변길이형
arr[0] = 2;
arr[1] = 2.8;
arr[2] = "오늘은 금요일";
arr[3] = true;

console.log("방의 갯수 : "+arr.length); // 4

// 3. 값 사용, 4. 모든 방의 값 출력
document.write("<ul>");
for(var i=0; i<arr.length; i++) {
     document.write("<li>"+i+"번째 방 : "+arr[i]+"</li>");
}
document.write("</ul>");
```

![08](/md/legacy-assets/Web/JS/04/08.webp)

## 배열 초기화

* **JS에선 배열값을 바로 초기화 할 땐 대괄호([]) 사용**
     * 자바에선 배열값을 바로 초기화 할 때 중괄호(&#123;&#125;) 사용

```javascript
// 1. 초기화 : var 배열명 = [ 값, .... ];
var nameArray = [ "공선의","이재현","최지우","김정윤","박영민"  ];
nameArray[5] = "김건하";

document.write("방의 개수 : "+nameArray.length+"<br/>");

for(var i=0; i<nameArray.length; i++) {
     document.write("이름 : ");
     document.write("<input type='text'  value='"+nameArray[i]+"님'><br/>");
}
```

![09](/md/legacy-assets/Web/JS/04/09.webp)

```javascript
// 배열을 생성하여 구구단 2단의 결과값을 처음 방부터 추가한  후,
// 체크박스를 생성하여 출력

var gugu = new Array();

document.write("<div>");
for(var i=0; i<9; i++) {
     gugu[i] = 2*(i+1);
     document.write("<input type='checkbox'>")
     document.write(gugu[i]);
     document.write("</input>")
}
document.write("</div>");
```

![10](/md/legacy-assets/Web/JS/04/10.webp)

## ECMA5에서 추가된 배열 함수들

* 배열 마지막 방에 값을 추가

```
배열명.push(값);
```

* 배열 마지막 방에서 값 얻기

```
배열명.pop();
```

* 특정 인덱스의 방의 값 삭제(범위)

```
배열명.splice(시작인덱스, 지울 요소의 수);
```

```javascript
var temp = [ "대추", "호두", "밤", "감", "배", "사과" ];

//temp[temp.length]="바나나"; // 이렇게도 가능하나..
// 가장 마지막 방에 값을 추가하는 함수 : push(값);
temp.push("바나나");
temp.push("망고스틴");

// 마지막 방의 값을 꺼내는 함수 pop()
temp.pop();
temp.pop();
temp.pop(); 

// 특정 인덱스 사이의 값을 삭제 : splice(시작인덱스, 지울 요소의 수)
temp.splice(0, 3);

for(var i=0; i<temp.length; i++) {
     document.write(temp[i]+"<br/>"); // 감, 배만 출력됨
}
```

## 2차원 배열

* **JS에선 2차원 배열이 존재하지 않음.**
* 1차원 배열을 생성 후 배열 인덱스에 1차원 배열을 넣는 형태
     * **가변배열에 가깝다.**

```javascript
// 1. 1차원 배열 생성
var arr = new Array();

// 2. 방에 일차원 배열을 생성, 배열명[인덱스] = new Array();
arr[0] = new Array();
...

// 3. 2차원 배열처럼 사용, 배열명[행번호][열변호] = 값;

// 행의 수 : 배열명.length
// 열의 수 : 배열명[행번호].length
```

```javascript
// 이차원 배열
// 1. 1차원 배열 생성
var arr = new Array();

// 2. 1차원 배열의 방에 1차원 배열을 생성하여 추가
arr[0] = new Array();
arr[1] = new Array();
arr[2] = new Array();

// 3. 값 할당
arr[0][0] = "사과";
arr[0][1] = "배";
arr[0][2] = "포도";

arr[1][0] = "토마토";
arr[1][1] = "양배추";
arr[1][2] = "양상추";

arr[2][0] = "수박";
arr[2][1] = "딸기";
arr[2][2] = "감";

document.write("<table border='1'>");
document.write("<thead>");
document.write("<tr>");
document.write("<th  width='40'>번호</th>
    <th>과일1</th><th>과일2</th><th>과일3</th>");
document.write("</tr>");
document.write("</thead>");
document.write("<tbody>");

for(var i=0; i<arr.length; i++) {
     document.write("<tr>");
           document.write("<td>"+(i+1)+"</td>");
     for(var j=0; j<arr[i].length; j++) {
           document.write("<td>"+arr[i][j]+"</td>");
     }
     document.write("</tr>");
}

document.write("</tbody>");
document.write("</table>");
```

![11](/md/legacy-assets/Web/JS/04/11.webp)

## 숙제1

* 행, 열, 선색을 입력받아 테이블을 생성하세요.
     * 행의 수 입력받기
     * 열의 수 입력받기
     * 선색(RGB) 입력받기 (#000000)
     * 결과는 테이블로 나타내기

```html
<script type="text/javascript">
     var row = prompt("행의 수를 입력해주세요","");
     var col = prompt("열의 수를 입력해주세요","");
     var color = prompt("선 색(RGB)를 입력해주세요.예)  #000000","");
     
     document.write("<table width='800' height='600' border='1'  bordercolor='"+color+"'>");
     for(var i = 0; i<row; i++) {
           document.write("<tr>");
           for(var j=0; j<col; j++) {
                document.write("<td></td>");               
           }
           document.write("</tr>");
     }
     document.write("</table>");
</script>
```

![12](/md/legacy-assets/Web/JS/04/12.webp)

![13](/md/legacy-assets/Web/JS/04/13.webp)

## 숙제2 

* 2차원 배열(가변   배열)을 만들고
     * 1행 1조 1조원 입력
     * 2행 2조 2조원 입력
     * 3행 3조 3조원 입력
* 각 배열 행에 조원을 입력한 후
* 이름을 입력받아
* 해당 이름에 속한 모든 조원을 출력

![14](/md/legacy-assets/Web/JS/04/14.webp)

```html
<script type="text/javascript">
     var classFour = new Array();
     
     classFour[0] = new Array();
     classFour[1] = new Array();
     classFour[2] = new Array();
     
     classFour[0] = [ "김정운", "이재찬", "김민정", "박은영",  "정택성", "이봉현", "백인제" ];
     classFour[1] = [ "박영민", "김정윤" ,"최지우", "노진경",  "김희철", "박소영", "이지수" ];
     classFour[2] = [ "이재현", "공선의", "박정미", "최혜원",  "김건하", "오영근" ];
     
     var name = prompt("이름을 입력해주세요", "");
     var jo = 0;
     var flag = false;
     
     // 일치하는 이름이 존재하는지 조회
     for(var i=0; i<classFour.length; i++) {
           for(var j=0; j<classFour[i].length; j++) {
                if (classFour[i][j] == name) {
                     flag = true;
                     jo = i;
                }               
           }
     }
     
     if (flag == true) {
           document.write("입력 : "+name+"<br/>");
           document.write("조 : "+(jo+1)+"조 입니다.<br/>");
           document.write("구성원 : <select>");
           for(var i=0; i<classFour[jo].length; i++) {
                document.write("<option>"+classFour[jo][i]+"</option>")
           }
           document.write("</select>");
           
     } else {
           alert("4반에는 "+name+"이 존재하지 않습니다.")
     }
     
</script>
```

![15](/md/legacy-assets/Web/JS/04/15.webp)
