Html,Jsp,Css_06

* 중첩 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+"&nbsp;"); // 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+"&nbsp");
  }
  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+"&nbsp");
  }
  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+"&nbsp;");
  }
  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("&nbsp;&nbsp;");
 }
 for (j=1; j<=i; j++) // 여기로 와서 j값 1 출력 j가 1증가하면 조건식이 거짓이므로
 {
  document.write(j+"&nbsp;");
 }
 
 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("&nbsp;&nbsp;");
 }
 for (j=1; j<=i; j++) // 1<=5 참이므로 j값 5번 출력 후 종료
 {
  document.write(j+"&nbsp;");
 }
 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("&nbsp;&nbsp;");
 }
 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+"&nbsp"); // 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>