JavaScript 정리 04

08 Feb 2019

Reading time ~5 minutes

JavaScript 정리 04 - 제어문, 배열

제어문

문법은 자바와 동일

<!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>

for

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

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

<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>

// 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>");

// 다중 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>");  

// 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>");

while

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

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

배열(Array)

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

// 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]);
}

// 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>");

배열 초기화

JS에선 배열값을 바로 초기화 할 땐 대괄호([]) 사용
- 자바에선 배열값을 바로 초기화 할 때 중괄호({}) 사용

// 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/>");
}

// 배열을 생성하여 구구단 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>");

ECMA5에서 추가된 배열 함수들

배열 마지막 방에 값을 추가

배열명.push(값);

배열 마지막 방에서 값 얻기

배열명.pop();

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

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

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차원 배열을 넣는 형태
- 가변배열에 가깝다.

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

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

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

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

// 이차원 배열
// 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>");

숙제1

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

<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>

숙제2

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

<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>

JavaScript