국비지원학원/HTML,JavaScript,jQ

74일차-JavaScript_제어문과 배열(2차원 배열)

초코맛 2019. 2. 13. 02:46
반응형
*JavaScript
*제어문
-문법은 자바와 동일
*for
for(시작값; 조건식; 증가.감소식 => var 변수명=초기값; 변수명<값; 변수++){ //전역변수면 바깥에서도 사용o
//주의 => 자바에서는 var대신 int를 쓰기 때문에 int를 쓰는 사람이 많음
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css"  href="http://localhost:8080/html_prj/common/css/main_v190130.css"/>
<style type="text/css">
#forTable{border-spacing:0px;}
#sum{color: red; text-shadow:3px 3px 10px #333; border:1px  solid; border-color:#red;}
td:hover{font-size:10px; background-color:#AF3200}
</style>
<script type="text/javascript">
document.write("<table border='1' id='forTable'>");
document.write("<tr>");
     for(var i=1; i<10; i++){
           document.write("<th width='40px'>"+i+"</th>");
     }
document.write("</tr>");
document.write("<tr>");
for(var i=1; i<10; i++){
     document.write("<td align='center'  width='40px'>"+i+"</td>");
}
document.write("</tr>");
document.write("</table>");
     //1~31의 <option>을 가진 <select>를 생성
     document.write("<div>");
     document.write("<select>");
     for(var i=1; i<32; i++){
           document.write("<option>"+i+"</option>");
     }//end for
     document.write("</select>")
     document.write("</div>");
     
     //1~100까지의 합을 div 출력
     var sum=0;
     for(var i=1; i<100; i++){
           sum+=i
     }//end for
     document.write("<div id='sum'>");
     document.write("<strong>"+sum+"</strong>");
     document.write("</div>");
     
     //2~9단 옆으로 (다중 for문)
document.write("<table border='1'>");
     for(var i=1; i<10; i++){
                document.write("<tr>");
           for(var j=2; j<10; j++){
                document.write("<td  width='80px'>"+j+"*"+i+"="+i* j+"</td>");
           }
                document.write("</tr>");
     }//end for
document.write("</table>");

     //sist로고찍기
     for(var i=1; i<5; i++){
           for(var j=1; j<=i; j++){
                document.write("<img  src='../common/images/sist_logo.jpg'>");
           }
           document.write("<br/>")
     }//end for
     
</script>
</head>
<body>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css"  href="http://localhost:8080/html_prj/common/css/main_v190130.css"/>
<style type="text/css">
#bloodTable{border-spacing:0px}
td, th{border:1px solid #333; text-align:center;}
#btTitle{width:80px}
#bsTitle{width:300px}
</style>
<script type="text/javascript">
var bloodType=prompt("당신의 혈액형을 입력!!!!");
     switch(bloodType.toUpperCase()){
     case "A" : output=" 세심하고 치밀하다."; break;
     case "B" : output=" 털털하다. 내 것이 아니면 관심없음.";  break;
     case "AB" : output=" 복잡함. 합리적임"; break;
     case "O" : output=" 질긴 생명력, 리더쉽 좋음";break;
     default : output="사람의 혈액형이 아닙니다.";
     }//end switch
     document.write("<table border='1' id='bloodTable'>");
     document.write("<tr>");
     document.write("<th id='btTtitle'>혈액형</th>");
     document.write("<th id='bsTitle'>특징</th>");
     document.write("</tr>");
     document.write("<tr>");
     document.write("<td>"+bloodType+"</td><td>"+output+"</td>");
     document.write("</tr>");
     
     document.write("</table>");
</script>
</head>
<body>
</body>
</html>

*while

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css"  href="http://localhost:8080/html_prj/common/css/main_v190130.css"/>
<style type="text/css">
</style>
<script type="text/javascript">
     
     //while : 최소 0번부터, 최대 조건까지 반복
     var i=1; //초기값
     while(i<7){
           document.write("<h"+i+">오늘은 금요일 ^o^b</h"+i+">");
           i++; //증가/감소식
     }//end while
     

     //do~while : 최소 1번부터, 최대 조건까지 반복
     var j=0;//초기값
     do{
           //5점에 체크된 상태로 라디오 버튼을 제공
           if(j==5){
            document.write("<input type='radio'  name='radiobutton' checked='checked'  value='"+j+"'>"+j+"점&nbsp;")//반복 수행 문장    
           }else{
           document.write("<input type='radio'  name='radiobutton' value='"+j+"'>"+j+"점&nbsp;")//반복 수행 문장
           }
           j++;//증가, 감소식
     }while(j<11);//조건식
     
</script>
</head>
<body>
</body>
</html>



*배열(Array)
  • 일괄처리(한꺼번에 묶어서 처리)
  • 일차원 배열만 제공
  • 가변길이형(데이터가 추가되면 방(Element,요소)의 갯수가 증가)
  • 이름이 같으면 배열로 처리된다,
    • 배열에 담기는 데이터형을 제한할 수 없고, 모든 데이터형이 들어가게 된다.

*배열 사용법)
  1. 생성
    var 배열명 = new Array( );
    var arr=new Array( );

    -초기화-
    var 배열명=[값 ,,, ];

  1. 값 할당 : 방의 갯수 증가
    배열명[인덱스]= 값;
    arr[0] = 10;

  1. 값 얻기
    배열명[인덱스]

  1. 모든 방의 값 출력
    배열명.length //방의 갯수

for(var i=0; i<배열명.length; i++){
    배열명[i];
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css"  href="http://localhost:8080/html_prj/common/css/main_v190130.css"/>
<style type="text/css">
</style>
<script type="text/javascript">
//배열 생성
//1. 생성) var 배열명=new Array(); //자바였으면 var[]라고 썼을 것
     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. 값 사용
document.write(arr[2]);
//4. 모든 방의 값 출력
document.write("<ul>");
for(var i=0; i<arr.length; i++){
     document.write("<li>"+i+"번째 방 :"+arr[i]+"</li>");  
}
document.write("</ul>");


/////////////////////배열의 초기화///////대괄호[] 사용!
//1. 초기화: var 배열명=[값,,,,];
var nameArr=["공", "이", "최", "김", "박"];
nameArr[5]="김";
document.write("방의 갯수: "+nameArr.length+"<br/>");
//배열의 값을 <input type="text">의 값으로 출력
//<input type="text">에 값이 들어가려면 'value'라는 속성을  사용하여야 함
for(var i=1; i<nameArr.length; i++){
     document.write("이름: ");
//홀따옴표, 쌍따옴표(\")로 감싸도 괜찮고...
     document.write("<input type=\"text\"  value=\""+nameArr[i]+"님\"><br/>");
}//end for

//배열을 생성하여 구구단 2단의 결과값을 처음 방부터 추가한 후
//체크 박스를 생성하여 출력
var gugudanArr= new Array();
           for(var h=1; h<10; h++){
                gugudanArr[h]=2*h;
                document.write("<input type=\"checkbox\"  value='"+gugudanArr[h]+"'>"+gugudanArr[h]+"<br/>");  //"'>"+2+"*"+h+"="+gugudanArr[h]+
           }//end for

//ECMA5에서 추가된 배열 함수들           
var temp=["대추", "호두", "밤", "감", "배", "사과"];
//temp[temp.length]="바나나"; //도 가능은 함
//가장 마지막 방에 값을 추가하는 함수 : push(값);
temp.push("바나나");
temp.push("망고스틴");
//가장 마지막 방의 값을 꺼내는 함수(방의 수가 줄어든다.) pop()
temp.pop();
//특정 인덱스 사이의 값을 삭제: splice(시작인덱스, 끝 인덱스)//끝인덱스->지울요소 수
temp.splice(0,3);
     for(var i=0; i<temp.length; i++){
           document.write(temp[i]+"<br/>");
     }//end for
</script>
</head>
<body>
</body>
</html>


*ECMA5
  • 값을 추가(마지막 방)
배열명.push(값)

  • 값 얻기(마지막 방의 값 얻기)
배열명.pop();

  • 특정 인덱스의 방의 값 삭제(범위)
배열명.splice(시작인덱스, 끝 인덱스);//끝인덱스->지울 요소 수?

*이차원 배열 생성( 행, 열)
  • JavaScript에서는 2차원 배열이 존재하지 않고, 1차원배열을 생성후 배열 인덱스에 1차원 배열을 넣는형태. (가변배열에 가깝)
  1. 일차원 배열 생성
 var arr=new Array();

  1. 방에 일차원 배열 생성
배열명[인덱스]=new Array();

  1. 이차원 배열처럼 사용
배열명[행의번호][열의 번호]=값;

길이
행의수 : 배열명.length
열의수 : 배열명[행번호].length
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css"  href="http://localhost:8080/html_prj/common/css/main_v190130.css"/>
<style type="text/css">
</style>
<script type="text/javascript">
     //1. 이차원 배열
     var arr=new Array();
     //2. 일차원 배열의 방에 일차원 배열을 생성하여 추가
     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]="감";
     alert("행의 수"+ arr.length+"\n열의  수"+arr[0].length+"\n"+arr[1].length+"\n"+
                arr[2].length);
     
     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>");
           }//end for           
           document.write("</tr>");
     }//end for
     document.write("</tbody>");
     document.write("</table>");     
     
</script>
</head>
<body>
</body>
</html>


<<<숙제1-행,열,선색을 입력받아 테이블 생성>>>>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css"  href="http://localhost:8080/html_prj/common/css/main_v190130.css"/>
<style type="text/css">
</style>
<script type="text/javascript">
var row=prompt("행의 수");
var col=prompt("열의 수");
var color=prompt("선 색(RGB)","#FF0000");
document.write("<table border='1px' bordercolor='"+color+"'>");
for(var i=0; i<row; i++){
     document.write("<tr>");
     for(var j=0; j<col; j++){
           document.write("<td width='300px'  height='100px'></td>");
     }
     document.write("</tr>");
}
document.write("</table>");
</script>
</head>
<body>
</body>
</html>
<<<숙제2-2차원 배열을 만들고 1조-조원들,2조-조원들,3조-조원들 입력후, 이름을 입력받아 모든 조원 출력>>>>
반응형
저작자표시 비영리 변경금지

'국비지원학원 > HTML,JavaScript,jQ' 카테고리의 다른 글

76일차-JavaScript_값  (0) 2019.02.15
75일차-Javascript_함수(function)  (0) 2019.02.14
73일차-JavaScript  (0) 2019.02.12
72일차-JavaScript  (0) 2019.02.02
71일차-CSS,JavaScript  (0) 2019.02.01

'국비지원학원/HTML,JavaScript,jQ'의 다른글

  • 현재글74일차-JavaScript_제어문과 배열(2차원 배열)

관련글

티스토리툴바