* 중첩 for문(반복문내에 또다른 반복문이 존재)의 사용-1
# 출력형식
1 2 3 4 5
1 2 3 4 5
1 2 3 4 5
1 2 3 4 5
1 2 3 4 5
<script>
for (i=1; i<=5; i++) // 행지정시 사용됨이 일반적
{
for (j=1; j<=5; j++) // 열지정시 사용됨이 일반적
{
document.write(j+" "); // j를 i로 바꾸면 결과가 달라지는 규칙을 보며 이해한다.
}
document.write("<br>");
}
</script>
* 중첩 for문의 사용-2
# 출력형식
1 2 3 4 5
1 2 3 4 5
1 2 3 4 5
1 2 3 4 5
1 2 3 4 5
<script>
for (i=1; i<=5; i++)
{
for (j=1; j<=5; j++)
{
document.write("<img src=../html/img/blog_img.gif>");
// 위의 예제와 같지만 이미지를 로딩한 경우
}
document.write("<br>");
}
</script>
* 중첩 for문의 사용 -3
# 출력형식
1
1 2
1 2 3
1 2 3 4
1 2 3 4 5
<script>
for (i=1; i<=5; i++)
{
for (j=1; j<=i; j++)
// 조건식에서 값을 고정하지 않고 내가 필요로 하는 변수가 있다면 대입 가능
{
document.write(j+" ");
}
document.write("<br>");
}
document.write("<br>");
document.write("<br>");
</script>
* 중첩 for문의 사용 -4
# 출력형식
1
2 2
3 3 3
4 4 4 4
5 5 5 5 5
<script>
for (i=1; i<=5; i++)
{
for (j=1; j<=i; j++) // 조건식에서 값을 고정하지 않고 내가 필요로 하는 변수가 있다면 대입 가능
{
document.write(i+" ");
}
document.write("<br>");
}
document.write("<br>");
document.write("<br>");
* 중첩 for문의 사용 -5
# 출력형식
1 2 3 4 5
1 2 3 4
1 2 3
1 2
1
<script>
for (i=5; i>=1; i--) // 5행이기때문에 5번만 반복되도록 조건식을 짜주면 되고 중첩 for문에서
// 변수에 지정된 값을 활용하기 위해 변수의 초기값과 조건식과 증감조건을 설정
{
for (j=1; j<=i; j++) // i값에 따라 출력되는 열의 수가 달라진다보면 된다.
// 5에서 1까지 내려가므로 첫번째 출력은 j값1로 시작하여 1 2 3 4 5
// 두번째는 i값이 4가 되어 j값의 출력은 1 2 3 4
// :
// i값이 1이 되며 j값은 1번만 출력되고 j값과 i값이 같아 for문 종료
{
document.write(j+" ");
}
document.write("<br>");
}
document.write("<br>");
document.write("<br>");
</script>
* 중첩 for문의 사용 -6
# 출력형식 (살짝 삐뚤어졌다;)
1
1 2
1 2 3
1 2 3 4
1 2 3 4 5
<script>
for (i=1; i<=5; i++) // 5행, i값은 1→5까지 순차적으로 1씩 증가
{
for (k=1; k<=5-i; k++) // 공백을 띄워주는 조건 설정
// i가 1일때 k는 4번 공백 반복 후
{
document.write(" ");
}
for (j=1; j<=i; j++) // 여기로 와서 j값 1 출력 j가 1증가하면 조건식이 거짓이므로
{
document.write(j+" ");
}
document.write("<br>"); // 줄내리기 실행, 그리고 다시 for문의 시작으로 가서 i값 1증가하여
// 2가 되고 k값은 5-2=3이 되어 공백3번 반복 후 1<=2 가 참이므로 2번 반복하고 여기로 와서 또 줄내림
}
</script>
* 중첩 for문의 사용 -7
# 출력형식 (살짝 삐둘어졌다;)
1 2 3 4 5
1 2 3 4
1 2 3
1 2
1
<script>
for (i=5; i>=1; i--)
{
for (k=1; k<=5-i; k++) // 공백설정: i의 초기값이 5이므로 1<=0은 거짓
{
document.write(" ");
}
for (j=1; j<=i; j++) // 1<=5 참이므로 j값 5번 출력 후 종료
{
document.write(j+" ");
}
document.write("<br>"); // 줄내림 실행 후 처음 for문으로 다시 시작하여
// i값이 4가 되고 두번째 for문이 1번 실행되서 공백이 한번 생기고
// 세번째 for문이 4번 출력 후 줄내림.. 이런식으로 1에서 종료.
}
</script>
* 중첩 for문의 사용 -8
# 출력형식
★
★★★
★★★★★
★★★★★★★
★★★★★★★★★
// 공백이 없는 소스를 먼저 작성
// 즉 이런 모양
//★
//★★★
//★★★★★
//★★★★★★★
//★★★★★★★★★
<script>
for (i=1; i<=9; i+=2) // 1 3 5 7 9
{
for (j=1; j<=i; j++) // i가 1일때 j를 1번 반복, 3일때 3번 5일때 5번 7일때 7번 9일때 9번 반복
{
document.write("★");
}
document.write("<br>");
}
</script>
// 위처럼 작성 후 아래처럼 수정/작성 하면 이해하기가 조금 쉬워(?)진다
<script>
for (i=1; i<=9; i+=2) // 1 3 5 7 9
{
for (k=1; k<=(9-i)/2; k++) // 규칙을 잘 찾아내는 것이 중요하다
// (9-1)/2=4, (9-3)/2=3, (9-5)/2=2, (9-7)/2=1, (9-9)/2=0
// 1<=4 → 4번 아래공백4번반복
{
document.write(" ");
}
for (j=1; j<=i; j++)
{
document.write("★"); // 4번공백 반복 후 1<=1 이므로 한번 출력 후
}
document.write("<br>"); // 줄내림 & 최상단 다시 반복
}
</script>
** while 반복문
for 문처럼 (초기값; 조건식; 증감값)으로 초기값과 증감값이 한문장에 다 들어가는데 반해
while문은 조건식만 괄호안에 들어가고 초기값/증감값은 그 외의 공간에 기술 한다.
while(조건식){
반복문안에 조건식의 변수의 변화되는 수식을 넣지 않으면 무한반복
}
** while문의 사용 -1
# 출력형식
1
2
3
4
5
6
7
8
9
10
<script>
a=1 // a의 변수선언과 동시에 값을 1로 초기화
while (a<=10) // 1부터 10까지 출력
{
document.write(a+"<br>");
a++; // 1의 값을 먼저 출력 후 증가
}
</script>
** while문의 사용 -2
# 출력형식
1
2
3
4
5
6
7
8
9
10
<script>
a=0 // 0일때 0을 출력하고 싶지않다면
while (a<10) // 같거나 작을 때에 같거나=를 빼고
{
a++; // 증가수식의 위치를 위로 바꿔 값이 미리 증가되고 출력되도록 한다
document.write(a+"<br>");
}
</script>
** while문의 사용 -3
// 단을 입력받아 그 단을 출력: 구구단
<script>
dan = prompt("단을 입력하세요(1~9단)","");
d=1;
while (d<10)
{
document.write(dan+" x "+d+" = "+dan*d+"<br>");
d++;
}
</script>
** while문의 사용 -4
# 출력형식
12345
12345
12345
12345
12345
<script>
a=0
b=0
while (a<5) // 1. 0<5 참 이므로 다음을 실행, 10. 1<5 참 이므로 앞으로 4번더 실행해서 총 5행 출력
{
b=0
while (b<5) // 2. 0<5 참 이므로 다음을 실행, 5. 1<5 참이므로 실행,
{
b++; // 3. b=1이 된다. 6. b=2
document.write(b+" "); // 4. 1출력, 7. 2 .. 5까지 출력 후 5<5 거짓이므로
}
document.write("<br>"); // 8. 줄내림
a++; // 9. a값 1증가하여 1
}
</script>
※ 연산자 우선순위
1. () 괄호가 최우선순위
2. 사칙연산자(* / + -) 같은 우선순위의 연산자끼리는 왼쪽부터
3. 관계연산자(> < >= <= == !=)는 사칙연산보다 우선순위가 낮다.
4. 논리연산자(&& || !)는 관계연산자보다 우선순위가 낮다.
∴ 괄호 > 사칙연산자 > 관계연산자 > 논리연산자
*** do~while 문 : do 다음의 {} 안의 소스는 무조건 실행하며 다음에 위치하는 while은
조건식이 참일 때 조건식 다음에 위치하는 {}안의 증감값을 반복.. 한다랄까..
do
{
무조건 실행
}
while (조건식); 조건식이 참이면 반복
*** do~while문의 사용 -1
# 출력형식
1
2
3
4
5
6
7
8
9
10
<script>
a=1 // a값을 1로 초기화
do // 다음의 문장을 무조건 실행
{
document.write(a+"<br>");
a++; // 1출력 후 1증가
}
while (a<=10); // a가1일때 조건식이 참이고 10 이상일 때 거짓이 되므로 1~10까지 출력
</script>
**** for문 while문 예제 -1
# 출력형식
임의의 수(su)를 입력받아 그 수까지의 합을 구하라.
1~su까지의 합은 xxx
<script> // for문 이용
su=prompt("수를 입력하세요","");
hap=0;
for (i=1; i<=su; i++)
{
hap=hap+i; // i값만큼 증가하는 것을 반복
}
document.write("for 문에서의 1~"+su+"까지의 합은 "+hap+"<br>");
</script>
------------------------------------------------------------------
<script> // while문 이용
su=prompt("수를 입력해봐","");
hap=0;
i=1
while (i<=su)
{
hap=hap+i;
i++;
}
document.write("while문에서의 1~"+su+"까지의 합은 "+hap+"<br>");
</script>
**** for문 예제 -2
# 출력형식
임의의 수(su)를 입력받아 그 수까지의 짝수의 합을 구하라.
<script>
su=prompt("수를 입력하세요","");
hap=0;
for (i=2; i<=su; i+=2) // i를 1이 아닌 2로 만들고 증가값을 2로 하여 2,4,6,8.. 짝수만 i값으로 초기화 되도록 설정
{
hap=hap+i // 0+2, 2+4, 6+6.... 이런식이 되도록하여 합을 누적한다
}
document.write("1~"+su+"까지의 짝수의 합은 <b><font size='30'>"+hap+"</font></b>");
</script>
**** for문 예제 -3
# 출력형식
임의의 수(su)를 입력받아 그 수까지의 짝수의 합과 홀수의 합을 구하라.
<script>
su=prompt("숫자 넣어봐","");
hsum=0; jsum=0;
for(i=1; i<=su; i++)
{
if (su%2==0) // 짝수
{ jsum+=i;
}else // 홀수
{
} hsum+=i;
}
document.write("1~"+su+"까지의 짝수의 합은 "+jsum+"<br>");
document.write("1~"+su+"까지의 홀수의 합은 "+hsum);
</script>
***** break
반복문에서는 break앞에 어떤 조건을 주고 그 조건이 만족할 시 반복문 종료
***** break 사용 예제(for문) -1
# 출력형식
1부터 임의의 수까지의 합이 2011보다 크거나 같을 때 break
<script>
sum=0;
for (i=1; i<=100; i++)
{
sum += i; // 1부터 100까지의 합을 sum에 누적
if (sum>=2011) break; // sum의 값이 2011보다 크거나 같을 때 멈춤
}
document.write("1~"+i+"까지의 합은 "+sum);
</script>
***** break 사용 예제(while문) -2
# 출력형식
1부터 임의의 수까지의 합이 2011보다 크거나 같을 때 break
<script>
sum=0;
i=1;
while (true) // 어떤 상황이 될지 몰라 논리식을 무조건 참으로 설정?
{
sum += i;
if (sum>=2011)
{ break;
}i++
}
document.write("1~"+i+"까지의 합은 "+sum);
</script>
****** continue
반복문내에 사용하며 continue다음의 문장(들)을 skip
****** continue 사용 예제 -1
# 출력형식
1~100사이의 값중에 3의 배수와 5의 배수를 제외한 나머지 값의 합을 구하장
<script>
hap=0;
for (i=1; i<=100; i++)
{
if(i%3==0 || i%5==0) continue;
hap += i;
}
document.write(hap);
</script>
******* 회원가입 폼: 아이디 검색창/대화명 검사창/우편번호 검사창 띄우기
(함수선언)
<head><script> // 함수 선언 스크립트는 <head>태그안에 넣는 것이라 하던데 설명을 못들음
function winOpen(){
window.open("idChk.html","w","width=300, height=100, resizable=yes");
/* 속성에 빈칸으로 구분했으면 계속 빈칸, 콤마로 구분했으면 계속 콤마
1. 새창에 표시될 파일명
2. 창이름: 없을 때도 "" 따옴표는 해줘야한다.
이름이 없다면 팝업창이 계속 열린다. 이름이라는 것이
중복으로 띄움을 방지하도록 체크하는 역할
3. 속성 width: 창너비, height: 창높이
location: 주소표시줄, menubar: 메뉴표시
resizable : 창의 크기조절여부
scrollbars : 스크롤바 표시여부
toolbar : 툴바표시여부
속성은 yes / no 로 표시
*/
// 대화명 검사창 띄우기 닉네임 입력되고 창 닫힘
function nickChk(){window.open("nickChk.html","n","width=300, height=100")}
// 우편번호 검사창 띄우기 3칸이 입력되고 창 닫힘
function zipChk(){window.open("zipChk.html","n","width=300, height=400")}
</script></head>
******* 회원가입 폼: 아이디 검색창/대화명 검사창/우편번호 검사창 띄우기
(onClick이벤트 설정)
<body>
<!-- 중간 소스 생략 -->
<input type="button" value="ID중복검사" onClick="winOpen()">
<!-- 중간 소스 생략 -->
<input type="button" value="중복검사" onClick="nickChk()">
<!-- 중간 소스 생략 -->
<input type="button" value="검색" onClick="zipChk()">
<!-- 중간 소스 생략 -->
</body>
******* 회원가입 폼: 해당 팝업창 개별 html파일 작성
<html>
<head>
<title> 아이디 중복검사 </title>
<script>
function idChkClose()
{ // 메인폼에 검색한 아이디를 표시
// 팝업창에서 팝업을 뜨게 만든 부모페이지를 가르키는 것: opener
opener.document.frm.memId.value="myID"
// 현재창 닫기
window.close();
//self.close();
}
</script>
</head>
<body>
당신이 입력한 아이디는 사용가능한 <br>아이디 입니다.
<p>
<input type="button" value="Close" onClick="idChkClose()">
</body>
</html>
-----------------------------------------------------------------
<html>
<head>
<title> 닉네임 중복 검사 </title>
<script src="nickScript.js"> // 외부파일 링크
</script>
</head>
<body>
<form name="nickFrm">
대화명 : <input type="text" name="nick"><br>
<input type="button" value="닉네임사용하기" onClick="nickClose()">
</body>
</html>
-----------------------------------------------------------------
<html>
<head>
<title> 주소 검색 </title>
<script>
function zipChkClose()
{
if(zipFrm.addr.value==""){ // == 주의
alert("상세주소를 입력하세요!!!")
return; // 리턴이 나오는 순간 함수 종료 지점으로 이동
// 밑에 명령어들을 건너뛰기 때문에 창이 닫히지 않는다
}
opener.document.frm.memZipCode01.value="123";
opener.document.frm.memZipCode02.value="456";
opener.document.frm.memAddr1.value="서울시 영등포구 당산동";
opener.document.frm.memAddr2.value=zipFrm.addr.value;
window.close();
}
</script>
</head>
<body>
<form name="zipFrm">
우편번호 : 123-456<br>
주소 : 서울시 영등포구 당산동<br>
상세주소 : <input type="text" name="addr"><br>
<input type="button" value="주소사용하기" onClick="zipChkClose()">
</form>
</body>
</html>
'Html/Jsp/Javascript' 카테고리의 다른 글
Html,Jsp,Css_07 (0) | 2011.10.18 |
---|---|
[Test] for문과 테이블을 이용한 구구단 출력하기 & while문으로도 해보기 (0) | 2011.10.17 |
[Test] 회원가입 폼 만들기 (1) | 2011.10.16 |
Html,Jsp,Css_05 (0) | 2011.10.14 |
Html,Jsp,Css_04 (0) | 2011.10.13 |