[20121108] 3일차 (JavaScript, 반복문(do~while, for, 이중for), split(), 배열, 배열의배열)
Java/JavaScript 2012. 11. 8. 17:50반복문
1. for문. 정해진 횟수만큼 반복해야 하는 경우 사용하는 구문.
-기본형식
for (대입문 ; 조건식 ; 증감식) {
//실행문
}
2. do~while문
-기본형식
do {
//실행문
} while(조건식)
//Sample09.html
//1부터 10까지 출력하는 반복문 테스트.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>Insert title here</title>
<script type="text/javascript">
function myFunc() {
var str = "";
for(var a=0; a<=10; a++) {
str += a + " ";
}
var result = document.getElementById("result")
result.innerHTML = str;
}
</script>
</head>
<body>
<div>
<h2>반복문 테스트</h2>
<form>
<input type="button" value="결과" onclick="myFunc()"> /* 이벤트 핸들러 */
</form>
<h3>출력 ----------------</h3>
<div id="result"></div>
</div>
</body>
</html>
1~100사이의 짝수만 출력
//Script10.html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>Insert title here</title>
<script type="text/javascript">
function myFunc() {
var str = "";
for(var a=2; a<=100; a+=2) {
str += a + "<br>";
}
var result = document.getElementById("result")
result.innerHTML = str;
}
</script>
</head>
<body>
<div>
<h2>1~100사이의 수에서 짝수만 출력</h2>
<form>
<input type="button" value="결과" onclick="myFunc()"> /* 이벤트 핸들러 */
</form>
<h3>출력 ----------------</h3>
<div id="result"></div>
</div>
</body>
</html>
반복문이용해서 1~100짝수 출력하고 마지막에 짝수들의 합 출력. 자바스크립트 이용.
2
4
6
...
100
----------------
합계: xxxx
//Script11.html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>Insert title here</title>
<script type="text/javascript">
function myFunc() {
var str = "";
var sum = 0;
for(var a=2; a<=100; a+=2) {
str += a + "<br>";
sum += a;
}
str += "------------<br>합계: " + sum
var result = document.getElementById("result")
result.innerHTML = str;
}
</script>
</head>
<body>
<div>
<h2>1~100사이의 수에서 짝수만 출력</h2>
<form>
<input type="button" value="결과" onclick="myFunc()"> /* 이벤트 핸들러 */
</form>
<h3>출력 ----------------</h3>
<div id="result"></div>
</div>
</body>
</html>
문제) 1부터 100까지의 수중에서 4의 배수만 출력. 한줄에 4개씩 출력. while, 자바스크립트 이용.
실행 예)
4 8 12 16
20 24 28 32
...
//Script12.html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>Insert title here</title>
<script type = "text/javascript">
function myFunc() {
var str = "";
var a = 0;
do {
a++;
if ((a%4) == 0) {
str += a + " ";
}
if ((a%16) == 0) {
str += "<br>";
}
}while(a<=100);
var result = document.getElementById("result")
result.innerHTML = str;
}
</script>
</head>
<body>
<div>
<h2>1~100사이의 수에서 4의 배수만 출력. 한줄에 4개씩 출력.</h2>
<form>
<input type="button" value="결과" onclick="myFunc()"> /* 이벤트 핸들러 */
</form>
<h3>출력 ----------------</h3>
<div id="result"></div>
</div>
</body>
</html>
문제) 1부터 100까지의 수중에서 4의 배수만 출력
한줄에 4개씩 출력. 줄 끝에 해당 줄 숫자들의 합을 출력
while문 이용. 자바Script 이용.
실행 예)
4 8 12 16 -> 40
20 24 28 31 -> 104
...
//Script13.html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>Insert title here</title>
<script type = "text/javascript">
function myFunc() {
var str = "";
var a = 0;
var sum = 0;
do {
a++;
if ((a%4) == 0) {
str += a + " ";
sum += a;
}
if ((a%16) == 0) {
str += " -> "+ sum +"<br>";
sum = 0;
}
}while(a<=100);
var result = document.getElementById("result")
result.innerHTML = str;
}
</script>
</head>
<body>
<div>
<h2>1~100사이의 수에서 4의 배수만 출력. 한줄에 4개씩 출력.</h2>
<form>
<input type="button" value="결과" onclick="myFunc()"> /* 이벤트 핸들러 */
</form>
<h3>출력 ----------------</h3>
<div id="result"></div>
</div>
</body>
</html>
자바스크립트 대화상자
1. alert(), confirm(), prompt() 함수를 이용.
2. alert()은 확인 버튼만 지원. 메시지 출력 전용.
3. confirm()은 확인, 취소 버튼 지원. 선택적 진행 가능.
4. prompt()는 외부 입력이 가능한 대화상자. 확인, 취소 버튼 지원.
//Script14.html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>Insert title here</title>
<script type="text/javascript">
function myFunc() {
//alert("아이디 또는 패스워드가 틀렸습니다.");
/* var result = confirm("현재 선택된 자료를 삭제할래?");
if(result) {
//삭제 정상 진행
} */
var str = prompt("숫자 입력(양의 정수)?");
if (str != null) {
//result 변수 안에는 유효한 문자열이 들어있다.
var result = document.getElementById("result");
result.innerHTML = str;
}
}
</script>
</head>
<body>
<div>
<h2>자바스크립트 대화상자</h2>
<form>
<input type="button" value="alert() 호출" onclick="myFunc()">
<input type="button" value="confirm() 호출" onclick="myFunc()">
<input type="button" value="prompt() 호출" onclick="myFunc()">
</form>
<div id = "result"></div>
</div>
</body>
</html>
입력받은 숫자(양의 정수)를 화면에 출력하되, -1이 입력될때까지 계속 반복.
실행 예)
숫자 입력(양의 정수)?1 -> prompt 이용.
숫자 입력(양의 정수)?2
숫자 입력(양의 정수)?3
숫자 입력(양의 정수)?-1
1
1 2
1 2 3
...
//Script15.html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>Insert title here</title>
<script type="text/javascript">
function myFunc() {
var msg = "";
var temp = "";
do {
var str = prompt("숫자 입력(양의 정수)?");
if(str == null || str == -1) {
break;
}
temp += str + " ";
msg += temp + "<br>";
}while (true);
var result = document.getElementById("result");
result.innerHTML = msg;
}
</script>
</head>
<body>
<div>
<h2>반복 입력. prompt 사용.</h2>
<form>
<input type="button" value="입력" onclick="myFunc()">
</form>
<h3>출력 -----------</h3>>
<div id="result"></div>
</div>
</body>
</html>
입력받은 숫자(양의 정수)를 화면에 출력하되, -1이 입력될때까지 계속 반복.
실행 예)
숫자 입력(양의 정수)?1 -> prompt 이용.
숫자 입력(양의 정수)?2
숫자 입력(양의 정수)?3
숫자 입력(양의 정수)?-1
1 -> 1
1 2 -> 3
1 2 3 -> 6
...
//Script16.html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>Insert title here</title>
<script type="text/javascript">
function myFunc() {
var msg = "";
var temp = "";
var sum = 0;
do {
var str = prompt("숫자 입력(양의 정수)?");
if(str == null || str == -1) {
break;
}
temp += str + " ";
sum += parseInt(str);
msg += temp + " -> " + sum + "<br>";
}while (true);
var result = document.getElementById("result");
result.innerHTML = msg;
}
</script>
</head>
<body>
<div>
<h2>반복 입력. prompt 사용.</h2>
<form>
<input type="button" value="입력" onclick="myFunc()">
</form>
<h3>출력 -----------</h3>>
<div id="result"></div>
</div>
</body>
</html>
입력받은 숫자(양의 정수)를 화면에 출력하되, -1이 입력될때까지 계속 반복.
실행 예)
숫자 입력(양의 정수)?1 -> prompt 이용.
숫자 입력(양의 정수)?2
숫자 입력(양의 정수)?3
숫자 입력(양의 정수)?-1
1
1 2
1 2 3
...
------------------------------------------
현재까지 입력된 숫자들중에서 최대값: xxxx
//Script17.html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>Insert title here</title>
<script type="text/javascript">
function myFunc() {
var msg = "";
var temp = "";
var max = 0;
do {
var str = prompt("숫자 입력(양의 정수)?");
if(str == null || str == -1) {
break;
}
if (max < parseInt(str)){
max = parseInt(str);
}
temp += str + " ";
msg += temp + "<br>";
}while (true);
msg += "----------------------------------<br>현재까지 입력된 숫자들중에서 최대값: " + max;
var result = document.getElementById("result");
result.innerHTML = msg;
}
</script>
</head>
<body>
<div>
<h2>반복 입력. prompt 사용.</h2>
<form>
<input type="button" value="입력" onclick="myFunc()">
</form>
<h3>출력 -----------</h3>
<div id="result"></div>
</div>
</body>
</html>
이중 반복문
1. for문이나 while문 등을 겹쳐서 코딩.
for (대입문 1; 조건식 2, 12, 19; 증감식 11, 18) {
//(이 부분은 바깥쪽 for문의 영향 범위)
for (대입문 3, 13; 조건식 4, 7, 10, 14, 17; 증감식 6, 9, 16) {
//이 부분은 안쪽 for문의 영향 범위 5, 8, 15
}
//(이 부분은 바깥쪽 for문의 영향 범위)
}
//1~5 까지 5회 반복.
//Script18.html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>Insert title here</title>
<script type="text/javascript">
function myFunc() {
var str = "";
for (var a=1 ; a<=5 ; a++) {
for (var b=1; b<=5 ; b++) {
str += b + " ";
}
str += "<br>";
}
var result = document.getElementById("result");
result.innerHTML = str;
}
</script>
</head>
<body>
<div>
<h2>이중 반복문 테스트</h2>
<form><input type="button" value="결과" onclick="myFunc()"></form>
<h3>출력--------------</h3>
<div id="result"></div>
</div>
</body>
</html>
아래 출력 결과를 얻을 수 있는 이중 반복문 작성.
실행 예)
1 2 3 4 5 6 7 8 9 10
2 3 4 5 6 7 8 9 10
3 4 5 6 7 8 9 10
4 5 6 7 8 9 10
5 6 7 8 9 10
6 7 8 9 10
7 8 9 10
8 9 10
9 10
10
//Script19.html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>Insert title here</title>
<script type="text/javascript">
function myFunc() {
var str = "";
for (var a=1 ; a<=10 ; a++) {
for (var b=a; b<=10 ; b++) {
str += b + " ";
}
str += "<br>";
}
var result = document.getElementById("result");
result.innerHTML = str;
}
</script>
</head>
<body>
<div>
<h2>이중 반복문 테스트2</h2>
<form><input type="button" value="결과" onclick="myFunc()"></form>
<h3>출력--------------</h3>
<div id="result"></div>
</div>
</body>
</html>
문제) 아래와 같은 결과가 나오도록 이중 for문 구성.
실행 예)
1 2 3 4 5 6 7 8 9 10
1 2 3 4 5 6 7 8 9
1 2 3 4 5 6 7 8
1 2 3 4 5 6 7
1 2 3 4 5 6
1 2 3 4 5
1 2 3 4
1 2 3
1 2
1
//Script20.html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>Insert title here</title>
<script type="text/javascript">
function myFunc() {
var str = "";
for (var a=10 ; a>=1 ; a--) {
for (var b=1; b<=a ; b++) {
str += b + " ";
}
str += "<br>";
}
var result = document.getElementById("result");
result.innerHTML = str;
}
</script>
</head>
<body>
<div>
<h2>이중 반복문 테스트3</h2>
<form><input type="button" value="결과" onclick="myFunc()"></form>
<h3>출력--------------</h3>
<div id="result"></div>
</div>
</body>
</html>
문제) 구구단 출력. 반복문 이용. 입력된 데이터 검사 과정 추가. 자바 스크립트 이용.
실행 예)
원하는 단수(1~9)? [5 ] [결과]
5 * 1 = 5
5 * 2 = 5
...
5 * 9 = 45
//Script21.html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>Insert title here</title>
<style type="text/css">
.style01 {
width:40px;
}
</style>
<script type="text/javascript">
function myFunc() {
var temp = document.getElementById("num");
var number = parseInt(temp.value);
var msg = document.getElementById("msg");
msg.style.display = "none";
if (temp.value.match(/[^1-9]/) || number > 9 ) {
msg.style.display = "inline";
temp.value = "";
temp.focus();
} else {
var str = "";
for (var a=1; a<=9 ; a++) {
str += number + " * " + a + " = " + (number*a) + "<br>";
}
var result = document.getElementById("result");
result.innerHTML = str;
}
}
</script>
</head>
<body>
<div>
<h2>구구단 출력</h2>
<h3>입력--------------</h3>
<form>
원하는 단수(1~9)? <input type="text" id="num" class="style01">
<input type="button" value="결과" onclick="myFunc()">
<span id="msg" style="color:red; display:none;"> 1~9 사이의 숫자만 입력 가능합니다.</span>
</form>
<div id="result"></div>
</div>
</body>
</html>
배열(Array)
1. 배열은 크기와 성격이 같은 일련의 원소들이 모여 공동의 집합 구조를 갖는 자료의 집합체.
2. 특징
- 하나의 이름(식별자)을 가지고 여러개의 저장 공간을 가진다.
- 자료형이 같은 자료만 저장할 수 있다.
- 사전에 공간의 크기를 지정해야 한다. -> 예외
- 참조형이다.
- 특정 저장 공간을 지칭하기 위해서 인덱스(0부터 시작되는 번호)를 이용한다.
- 배열의 배열을 이용해서 다차원 배열을 만들 수 있다.
- 자동 초기화 지원
3. 배열 사용 방법
var 변수 = new Array(); //배열 선언. 크기 지정 생략 가능.
변수[인덱스] = 값; //인덱스 사용
var 변수 = [값1, 값2, ...]; //배열선언과 동시에 초기값 지정
//배열에 초기값 지정. 값 중에 가장 큰 값 출력.
//Script22.html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>Insert title here</title>
<script type="text/javascript">
function myFunc() {
var array = [5, 3, 7, 6, 8, 1, 9, 0, 2, 4];
var max = array[0];
var str = "배열 초기값 : ";
for (var a=0; a<array.length; a++) {
str += array[a] + " ";
if (max < array[a]) {
max = array[a];
}
}
str += "<br>";
str += "최대값 : " + max;
var result = document.getElementById("result")
result.innerHTML = str;
}
</script>
</head>
<body>
<div>
<h2>배열 테스트</h2>
<form>
<input type="button" value="결과" onclick="myFunc()">
</form>
<h3>출력 --------------</h3>
<div id="result"></div>
</div>
</body>
</html>
문제) 외부에서 여러개의 숫자를 입력 받고, 그 값중에서 가장 큰 값 출력. 배열이용. 자바스크립트 이용.
split() 메소드 이용.
실행 예)
배열의 초기값 [5 3 7 6 8 1 9 0 2 4 ] [결과]
배열 초기값 : 5 3 7 6 8 1 9 0 2 4
최대값 : 9
//Script23.html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>Insert title here</title>
<script type="text/javascript">
function myFunc() {
var array = new Array();
var numbers = document.getElementById("numbers");
array = numbers.value.split(" ");
var max = parseInt(array[0]);
var str = "배열 초기값 : " + numbers.value;
for (var a=0; a<array.length; a++) {
if (max < parseInt(array[a])){
max = parseInt(array[a]);
}
}
str += "<br>최대값 : " + max;
var result = document.getElementById("result")
result.innerHTML = str;
}
</script>
</head>
<body>
<div>
<h2>배열 테스트2</h2>
<form>
배열의 초기값 (공백으로 구분해서 숫자 여러개 입력)<br>
<input type="text" id="numbers">
<input type="button" value="결과" onclick="myFunc()">
</form>
<h3>출력 --------------</h3>
<div id="result"></div>
</div>
</body>
</html>
문제) 이름, 국어, 영어, 수학을 입력받아서 총점, 평균 출력. 배열이용. 자바스크립트 이용. split() 메소드 이용.
실행 예)
성적 입력(이름 국어 영어 수학) [홍길동 100 100 100 ] [결과]
입력받은 데이터 : 홍길동 100 100 100
총점: 300
평균: 100.0
//Script24.html
문제) 여러개의 숫자를 입력 받아서 정렬 출력. 자바스크립트 이용.
실행예)
배열의 초기값(공백으로 구분해서 숫자 여러개 입력)
[5 3 7 6 8 1 9 0 2 4 ] [결과]
배열 초기값 : 5 3 7 6 8 1 9 0 2 4
정열 결과 : 0 1 2 3 4 5 6 7 8 9
문제) 여러명의 성적(이름, 국어, 영어, 수학)을 입력받아서 총점, 평균, 등수 출력. 배열 이용. split() 메소드 이용. 자바스크립트 이용.
실행 예)
성적 입력(이름 국어 영어 수학)?홍길동 100 100 100 -> promt 이용
성적 입력(이름 국어 영어 수학)?김길동 90 80 90
성적 입력(이름 국어 영어 수학)?-1
이름 국어 영어 수학 총점 평균 등수
홍길동 100 100 100 XXX XXX.X 1
김길동 90 80 90 XXX XXX.X 2
//Script25.html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>Insert title here</title>
<script type="text/javascript">
function myFunc() {
var msg = "<table><tr><td>이름</td><td>국어</td><td>영어</td><td>수학</td><td>총점</td><td>평균</td><td>등수</td></tr><br>";
var name = new Array();
var kor = new Array();
var eng = new Array();
var mat = new Array();
var tot = new Array();
var avg = new Array();
var ranks = new Array();
var a = 0;
do {
var array = new Array();
var str = prompt("성적 입력(이름 국어 영어 수학)?");
if (str == null || str == -1) {
break;
}
array = str.split(" ");
name[a] = array[0];
kor[a] = parseInt(array[1]);
eng[a] = parseInt(array[2]);
mat[a] = parseInt(array[3]);
tot[a] = parseInt(array[1]) + parseInt(array[2]) + parseInt(array[3]);
avg[a] = Math.round((tot[a] / 3)*10)/10;
a++;
} while(true);
for (var a=0; a<name.length ; a++) {
ranks[a] = 1;
}
for (var n=0; n<ranks.length; n++) {
for (var m=0; m<ranks.length; m++) {
if (n == m) {
continue;
}
if (tot[n] < tot[m]) {
ranks[n]++;
}
}
}
for (var a=0 ; a<name.length ; a++) {
msg += "<tr><td>" + name[a] + "</td><td>" + kor[a] + "</td><td>" + eng[a] + "</td><td>" + mat[a] + "</td><td>" + tot[a] + "</td><td>" + avg[a] + "</td><td>" + ranks[a] + "</td></tr>";
}
msg += "</table>";
var result = document.getElementById("result")
result.innerHTML = msg;
}
</script>
</head>
<body>
<div>
<h2>배열 테스트3</h2>
<form>
<input type="button" value="입력" onclick="myFunc()">
</form>
<h3>출력 --------------</h3>
<div id="result"></div>
</div>
</body>
</html>
배열의 배열(다차원 배열)
1. 1차원 배열 여러개를 조합시켜서 사용하는 배열.
2. 선언
var 변수 = new Array();
변수[0] = new Array();
변수[1] = new Array();
....
변수[인덱스1[인덱스2] = 값;
var 변수 = [[값1, 값2, ...], [값1, 값2,....], ....];
//Script27.html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>Insert title here</title>
<script type="text/javascript">
function myFunc() {
var arr = new Array();
arr[0] = new Array();
arr[1] = new Array();
var str = "";
arr[0][0] = 1;
arr[0][1] = 2;
arr[0][2] = 3;
arr[1][0] = 4;
arr[1][1] = 5;
arr[1][2] = 6;
for (var a=0; a<2; a++) {
for (var b=0; b<3; b++) {
str += arr[a][b] + " ";
}
str += "<br>";
}
var result = document.getElementById("result");
result.innerHTML = str;
}
</script>
</head>
<body>
<div>
<h2>배열의 배열 테스트</h2>
<form>
<input type="button" value="결과" onclick="myFunc()">
</form>
<h3>출력 --------------</h3>
<div id="result"></div>
</div>
</body>
</html>
//1~25까지의 수를 저장하는 배열의 배열 선언
실행 예)
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
//Script28.html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>Insert title here</title>
<script type="text/javascript">
function myFunc() {
var arr = new Array();
arr[0] = new Array();
arr[1] = new Array();
arr[2] = new Array();
arr[3] = new Array();
arr[4] = new Array();
var str = "";
for (var a=0, c=1; a<5; a++) {
for (var b=0; b<5; b++) {
arr[a][b] = c++;
}
}
for (var a=0; a<arr.length; a++) {
for (var b=0; b<arr[a].length; b++) {
str += arr[a][b] + " ";
}
str += "<br>";
}
var result = document.getElementById("result");
result.innerHTML = str;
}
</script>
</head>
<body>
<div>
<h2>배열의 배열 테스트</h2>
<form>
<input type="button" value="결과" onclick="myFunc()">
</form>
<h3>출력 --------------</h3>
<div id="result"></div>
</div>
</body>
</html>
문제) 아래와 같은 형태의 숫자 출력이 되도록 배열의 배열 지정. 자바스크립트 이용.
실행 예)
1 2 3 4 5
2 3 4 5 6
3 4 5 6 7
4 5 6 7 8
5 6 7 8 9
//Script29.html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>Insert title here</title>
<script type="text/javascript">
function myFunc() {
var arr = new Array();
arr[0] = new Array();
arr[1] = new Array();
arr[2] = new Array();
arr[3] = new Array();
arr[4] = new Array();
var str = "";
for (var a=0; a<5; a++) {
for (var b=0, c=(a+1); b<5; b++, c++) {
arr[a][b] = c;
}
}
for (var a=0; a<5; a++) {
for (var b=0; b<5; b++) {
str += arr[a][b] + " ";
}
str += "<br>";
}
var result = document.getElementById("result");
result.innerHTML = str;
}
</script>
</head>
<body>
<div>
<h2>배열의 배열 테스트2</h2>
<form>
<input type="button" value="결과" onclick="myFunc()">
</form>
<h3>출력------------------</h3>
<div id ="result"></div>
</div>
</body>
</html>
'Java > JavaScript' 카테고리의 다른 글
| Javascript event Keycode (0) | 2013.01.10 |
|---|---|
| [20121112 ~ 1113] 5일차 (text박스, 속성, select, window객체, DOM, 사용자 정의 객체) (0) | 2012.11.15 |
| [20121109] 4일차 (달력구현, 난수, radio 버튼, checkbox) (0) | 2012.11.15 |
| [20121107] 2일차 (Table, form, JavaScript, 이벤트 핸들러, 사용자데이터입력, 출력, document) (0) | 2012.11.08 |
| [20121106] 1일차 (HTML 기본 태그, div, span, style, CSS, h1, id, class) (0) | 2012.11.08 |
WRITTEN BY
