Html,Jsp,Css_06 Html/Jsp/Javascript 2011. 10. 17. 19:20

* 중첩 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>

'Html/Jsp/Javascript' 카테고리의 다른 글

Html,Jsp,Css_07  (0) 2011.10.18
[Test] for문과 테이블을 이용한 구구단 출력하기 & while문으로도 해보기  (0) 2011.10.17
Html,Jsp,Css_06  (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
Html,Jsp,Css_03 Html/Jsp/Javascript 2011. 10. 12. 22:59

1. 전일 Login Form Tag 복습 및 Html의 한계성

 

1-1. 전일 내용 복습 및 추가내용 기술

 

* <form> Tag

 

  - action : 폼에서 submit 이 발생할 경우 실행될 다음 파일명 기술 → <form action="login.jsp">

  - method : URL의 정보공개 유무 → <form method="post">

    · get : 정보공개

    · post : 정보비공개

 

    * tip : 단, A Tag를 이용하여 다음과 같이 링크시 method 값은 항상 get (정보공개)이 될 수 있다...라지만,

             자바 등에서 숨김이 가능하지 않을까 싶기도 하다. 일단 예시

             ex) <a href="http://www.naver.com/index.jsp?uid=abcd">네이버</a>

    * tip : 주소표시줄에 URL분석- 한글은 %등으로 알수없는 text로 변환되어 표시됨

             컴퓨터가 인식하여 출력하는 text의 기준과 사용자가 입력하는 text의 기준이 다름

 

* <input> Tag : 입력 Box 생성

 

  - type 속성

    · 값 : text, password 등이 있다. 추가적인 부분은 하단()에서 추가 기재

 

1-2. Html, Client Language의 한계성

* Login화면에 내용을 입력 하여 Sever Language인 login.jsp를 호출하는 것 까지만 가능

* <input type="file"> : 업로드할 파일이 어디에 있는지 표시하는 것 까지만 구현 가능

* 위 외에도 서버에 직접 접근 하는 것은 클라이언트 언어인 Html의 한계..

 

2. Form Tag 내에 기술되는 속성 Tag

 

* <form> Tag : form tag내에 기술되어 지는 tag는 서버로 보내지는 Data 덩어리라 보면 될 것 같다.

  - action : jsp파일을 호출하는 기능, 다음에 실행될 파일이나 명령어가(?) 정해지지 않았을 땐 일반적으로 #으로

                 표기한다 → <form action="mem.jsp">

  - method : URL의 정보공개 유무, → <form method="post">

 

2-1. <input type> Tag : type(속성)="OOOO(변수)" 방식으로 입력, input box의 유형

 

  - text : 회원가입시 ID, 이름 등 말 그대로 text를 입력하는 box → <input type="text">

 

  - password : 회원가입시 비밀번호 등을 입력하는 box → <input type="password">

 

  - radio : name을 같은 명으로 지정하여 같은 그룹으로 보므로 중복선택이 안되는 버튼(원형)이 된다...

                라고는 하지만 checkbox 또한 name을 같은 명으로 지정하는걸 보면 radio라는 type속성때문에

                중복으로 선택이 되지 않는지도 모르겠다.

                value값이 서버로 전달되어지는 값이며 input태그 바깥쪽에 radio버튼에 해당되는 text를 적어

                사용자의 식별을 돕는다. 미선택 후 submit 시 Null값이 전송된다.

                기본체크값 설정 : checked 입력 (속성없는 Tag)

                → <input type="radio" name="sports" value="농구">농구

                    <input type="radio" name="sports" value="축구">축구

                    <input type="radio" name="sports" value="배구">배구

 

  - checkbox : 위와 같은 속성Tag를 입력하나 type명만 다르다.

                      체크항목의 제한을 두거나 중복된 값으로 처리 되는 것은 Javascript에서 배열로써 처리가능

                      → <input type="checkbox" name="hobby" value="쇼핑">쇼핑

                          <input type="checkbox" name="hobby" value="시체놀이">시체놀이

                          <input type="checkbox" name="hobby" value="음주가무">음주가무

 

  - file : 업로드할 파일이 어디에 있는지 표시하는 것 까지만 구현 (Server전송: jsp)

             → <input type="file" name="filename" size="50">

 

  - reset : 입력된 값을 초기화.

                reset의 범위- reset이 포함된 <form></form> 사이의 값

                한페이지에 여러 폼이 있다면 reset 이 기술되어 클릭되어진 각자의 폼에만 영향을 준다 보면 된다.

                → <input type="reset" name="res" value="지우기">

 

  - image : submit과 같이 클릭되어지면 선택/입력된 정보를 서버로 전송하는 기능

                 → <input type="image" src="img\cafe_img\button_membership.gif">

 

  - submit : 클릭되어지면 선택/입력된 정보를 서버로 전송하는 기능

                  → <input type="submit" value="등록"> 

 

  - button : 외형은 submit과 같아 보이지만 아무런 기능이 구현이 안되며 자바스크립트에서 구현이 가능하다.

                  → <input type="button" value="등록">

 

  - hidden : 웹페이지상에서는 사용자의 화면(실행결과 화면)상에 안보이더라도 프로그램상에서 서버로 데이터를

                  가지고 가야 할 경우가 많이 있는데 이때 필요 속성만 hidden으로하여 그 데이터를 서버로 전송한다

                  → <input type="hidden" value="비밀자료임" name="secret">

  - maxlength : 최대로 입력할 수 있는 글자 수 제한- ex) 주민번호 입력시 자동으로 다음탭으로 이동되는 박스 생각

                     → <input type="text" maxlength="5">

  - readonly : 속성이 없는 태그- 사용자가 수정할 수 없도록 하는것 ex) 회원정보 수정시 id수정 불가

 

2-2. <textarea> Tag : 여러줄의 글 내용을 입력할 수 있다.

 

  - name : name은 C언어로 보자면 일종의 pointer 같다. 모든 form 내의 모든 data에 이름을 부여함으로 html내에 삽입되는

               스크립트에서 if 구문을 통한 data의 접근이 이루어 진다. → <textarea name="content">

  - rows : 한꺼번에 보여질 행의 수 → <textarea rows="10">

  - cols : 한꺼번에 보여질 열의 수 → <textarea cols="50">

 

  * tip : 코딩시 식별의 용이함을 위해 들여쓰기를 하는데, textarea같은 경우엔 끝태그를 시작태그에 붙여쓰지 않으면 들여쓰기

           공간만큼 화면에 공란으로 출력되므로 불필요한 공백까지 서버에 전송되거나 사용자 측에서 불편을 야기할 수 있으므로

            들여쓰기를 무시하고 꼭 끝태그를 붙여쓰도록 한다. 스크롤바는 글자 입력에 따라 자동으로 생성된다.

 

2-3. Select, option Tag : 드롭다운기능 구현

 

  - select : 드롭다운 되는 기능의 세로 사이즈와 name지정

    · name : 2-2에서 기술 → <select name="food">

    · size : 한번에 볼 수 있는 행 결정. 폭은 조절 불가하며 현재는 중복선택(개별:Ctrl+Click/범위:Shift+Click)이 안됨

               → <select size="1">

    · multiple : 속성이 없는태그, size를 1이상의 숫자로 설정 한 뒤, multiple입력시 목록갯수N의 N-1만큼 화면에 출력

                   → <select size="3" multiple>

  - option : 드롭다운기능에 펼쳐질 행의 내용을 입력한다. 이역시 value값(작성자만 알아볼 수 있는 값 또는 식별 가능한 값)

                으로 전송될 값을 입력하며 체크박스나 라디오버튼처럼 사용자가 식별이 가능하도록 <option></option>안에

                해당 text를 입력한다. 또한 default값을 선택해 놓고 싶다면 option에 selected를 입력한다.

                → <select name="food" size="1"> 

                    <option value="not">----선택----</option>

                    <option value="water">생수먹고배채울래</option>

                    <option value="soju" selected>소주마시고취할래</option>

                    <option value="beer">맥주마시고꺼어억</option>

                    <option value="susi">참치회엔역시소주</option>

                    <option value="chicken">치킨에는역시소맥</option>

                    </select>

 

# CODE

 

<form action="mem.jsp" method="post">

Text Box <input type="text" name="name" value="aaaa" size="10" maxlength="5" readonly>
<br>
<br>
Password Box <input type="password" name="pass">
<br>
<br>
Radio Button <input type="radio" name="sports" value="농구">농구
    <input type="radio" name="sports" value="축구">축구
    <input type="radio" name="sports" value="배구" checked>배구
<br>
<br>
Check Box <input type="checkbox" name="hobby" value="쇼핑">쇼핑
    <input type="checkbox" name="hobby" value="시체놀이">시체놀이
    <input type="checkbox" name="hobby" value="음주가무" checked>음주가무
<br>
<br>
File Upload <input type="file" name="filename" size="50">
<br>
<br>
Reset(취소) <input type="reset" name="res" value="지우기">
<br>
<br>
Image, Submit, Button, Hidden<br>
<br>
Image <input type="image" src="img\cafe_img\button_membership.gif"><br>
<br>
Submit <input type="submit" value="등록"><br>

<br>
Button <input type="button" value="등록"><br>

<br>
Hidden <input type="hidden" value="비밀자료임" name="secret"><br>
<br>
TextArea 태그 - 여러줄의 글 내용을 입력할 수 있다
<br>
 <textarea name="content" rows="10" cols="50">rows: 한꺼번에 보여질 행의 수
cols: 한거번에 보여질 열의 수
여기에 글을 쓰면 이 글이 초기값이 된다.</textarea>
<br>
<br>
Select, option Tag - 드롭다운기능 구현
 <select name="food" size="1"> 
  <option value="not">----선택----</option>
  <option value="water">생수먹고배채울래</option>
  <option value="soju" selected>소주마시고취할래</option>
  <option value="beer">맥주마시고꺼어억</option>
  <option value="susi">참치회엔역시소주</option>
  <option value="chicken">치킨에는역시소맥</option>
 </select>

 <br><br><br><br>
</form>

 

# 결과 

구현이 안되어 스크린샷으로 대체

 

3. 회원등록 폼 만들기 : 부연설명은 Code내에 주석문으로 처리 (Html + Javascript)

 

# CODE

 

<html>
 <head>
  <title> 회원등록 폼만들기 </title>
 </head>

 <body>
 <script language="javascript">
 // 자바스크립트 구문의 위치는 form 위에 있건 밑에 있건 관계 없다. 사용자가 입력 후 호출하는 것이므로..
 //함수생성 function 함수명(){.....}
 function memChk() //함수명은 변수 만들듯 내 맘대로
 {
  // 자바에서는 Body → Document 생략가능
  
  //데이타 입력유무 확인하는 기능 구현
  /*
   if문 : >, >= , <, <=, ==, !=(!는 not)
   형식
    if(조건식){

    }

  */
  if(document.frm.name.value == "") // = frm.nam.value , 확인:alert(변수) , 빈따옴표""는 내용이 없다는 뜻
  // 이름값이 없는 것이 True : True일 때 {}안 실행, False일 때 {}의 다음 구문 실행
  {
   alert("이름이 없는건가..") //확인 누르면 다음줄 명령어 실행
   document.frm.name.focus(); // name이란 이름이 있는 컴퍼넌트에 포커스(커서)를 맞춘다.
   return false; // form태그에 onsubmit="return memChk()"가 false가 되는 것: 다음페이지로 안넘어간다
  }
  if(document.frm.uid.value == "")
  {
   alert("아이디가 있어야겠지..")
   document.frm.uid.focus();
   return false;
  }
  if(document.frm.pwd.value == "")
  {
   alert("비밀번호도 있어야겠지..")
   document.frm.pwd.focus();
   return false;
  }
  if(document.frm.pwdChk.value == "")
  {
   alert("비밀번호 한번 더..")
   document.frm.pwdChk.focus();
   return false;
  }
  if(frm.pwd.value != frm.pwdChk.value) // document 생략
  {
   alert("까먹었나?");
   frm.pwd.value = ""; // 비밀번호가 틀렸을 때 pwd의 값 초기화
   frm.pwdChk.value = ""; // 비밀번호가 틀렸을 때 pwdChk의 값 초기화
   frm.pwd.focus(); // document.frm.pwd.focus(); 와 같다 → 커서 위치 이동
   return false;
  }
  if(frm.hand1.value == "Not") // hand1의 value값이 Not과 같다면 (Not은 밑에 =번호선택= 값)
  {
   alert("번호를 선택하세");
   return false;
  }
  if(document.frm.hand2.value == "")
  {
   alert("핸드폰도 없나..")
   document.frm.hand2.focus();
   return false;
  }
  if(document.frm.hand3.value == "")
  {
   alert("핸드폰번호 안넣으면 가입못함")
   document.frm.hand3.focus();
   return false;
  }
  // submit, image 일땐 return true; submit 실행
  // return true; // if값이 False일때 {}안의 내용을 건너뛰고 다음 구문인 이것을 실행
  
 document.frm.submit(); // *** 버튼으로 쓸 땐 return true; 대신 이걸 쓰고 form시작 구문에 onsubmit="return memChk()"
          //불필요하여 삭제 ***

 } // {}안에 데이타 입력유무를 확인하는 코드 입력!
 // 조건식에는 true / false 의 결과의 식을 입력
 </script> <!-- language="javascript"는 생략가능, script태그 안에 체크 항목을 입력해준다.
 체크항목: 이름/아이디/비밀번호(비밀번호끼리의 확인)/전화번호(첫자리(010)는확인필요없음) 누락없이 썼는지 확인 후 submit 기능 -->
           <!-- *** ↙ 요기에 입력되었던 onsubmit="return memChk()" 이 삭제: button submit -->  
<form action="memberOK.jsp" method="post" name="frm"> <!-- onsubmit="return memChk()" 설명:submit 이벤트가 발동되면 memChk()을 구현하라 -->
<!-- name은 자바스크립트에서 필요 --> 
<!-- action으로 자바스크립트로 이동하기전 이벤트(onsubmit, 작동이 일어나는 모든 요소) 발생 필요
클릭시: onclick
submit이 발생하면 : onsubmit,
페이지 로드시 : onload (onload alert - body tag에서 했었음)
-->
<table border="1">


 <caption><font face="굴림" color="#232323"><h2><b>회원등록</b></h2><font></caption>
  <tr>
   <td width="80" align="right">이 &nbsp;&nbsp;름</td>
   <td>
    <input type="text" name="name" size="16" maxlength="28"> <!-- 긴이름까지 생각해서 maxlength 설정 --> 
   </td>
  </tr>

  <tr>
   <td align="right">아이디</td>
   <td>
    <input type="text" name="uid" size="16">
   </td>
  </tr>

  <tr>
   <td align="right">비밀번호</td>
   <td>
   <input type="password" name="pwd" size="10"> &nbsp;&nbsp;비밀번호확인 <input type="password" name="pwdChk" size="10"> <!-- 비밀번호확인: input에 name만 다르게 -->
   </td>
  </tr>

  <tr>
   <td align="right">휴대전화</td>
   <td>
    <select name="hand1">
    <option value="Not">=번호선택=</option>
    <option value="010">010</option>
    <option value="011">011</option>
    <option value="017">017</option>
    <option value="016">016</option>
    <option value="018">018</option>
    </select>
     &nbsp;-&nbsp;
    <input type="text" name="hand2" size="5" maxlength="4">
     &nbsp;-&nbsp;
    <input type="text" name="hand3" size="5" maxlength="4">
   </td>
  </tr>

  <tr>
   <td valign="top" align="right">자기소개</td>
   <td>
    <textarea name="intro" rows="3" cols="50"></textarea>
   </td>
  </tr>

  <tr>
   <td colspan="2" align="center">
    <input type="button" value="등록" onClick="memChk()"> <!-- 클릭되면 memChk()라는 함수 호출(기능실행) -->
    <!-- <input type="image" src="img\cafe_img\button_membership.gif"> -->
    <!-- image로 input 버튼을 만들었을 때***와 submit으로 input버튼을 만들었을 때의 기능은 똑같다 -->
    <!-- <input type="submit" value="등록"> submit: 서버로 전송 -->
    &nbsp;&nbsp;&nbsp;
    <input type="reset" value="다시쓰기">
   </td>
  </tr>
</table>
</form>
 </body>
</html>

 

# 결과

 

 

4. CSS

 

* 스타일시트 표기법 → 속성명:속성값;

 

  1. inLine방식 : html 태그에 직접 적용, font-family:'폰트명1' '폰트명2' '폰트명3' → 1이 없다면 2, 2가 없다면3.

                       클라이언트의 운영체제에 해당 글자체가 없을 때를 대비하여 대체폰트 지정

                       → <font style="color:#0099cc;font-size:50pt;font-family:'궁서' '돋움' '굴림';font-style:italic">

                            스타일시트 inLine방식

                           </font>

                       → <p style="color:#0099cc;font-size:50pt;font-family:'궁서' '돋움' '굴림';font-style:italic">

                            낙성대역으로 오세요

                            </p>

                        ▲ 위에서 보듯 어떤 태그이건 간에 다 적용된다(테이블이건 어디건). 필요할때마다 구간별로 다 넣어야 해서

                            불편하다. 그래서 나온것이 2. style태그를 이용한 방식, 현시점에서 봤을 때 inLine방식>style방식: 별도

                            지정된 방식은 해당 구역에만 우선순위로 적용

 

# CODE

 

<font style="color:#0099cc;font-size:50pt;font-family:'궁서' '돋움' '굴림';font-style:italic">스타일시트 inLine방식</font>

<p style="color:#0099cc;font-size:50pt;font-family:'궁서' '돋움' '굴림';font-style:italic">낙성대역으로 오셈</p>

 

# 결과

스타일시트 inLine방식

낙성대역으로 오세요

 

  2. style태그를 이용한 방식 

   

    * style태그 기술 : <어떤 때에 무엇을 써야 하나 하는건 자꾸 해봐야 아는 법이라 한다...;

   

   2-1. head태그의 시작태그와 끝태그 안에 속성값 입력 : <style></style>

 

    2-1-1. 특정 태그명(통상적으로 대문자로 표기)에 정의하는 방법 : 같은 속성일 땐 - 대문자속성명1,대문자속성명2 

           이라 입력시 같은 기능이 된다.

           → FONT {color:red; font-size:25pt;}

 

    2-1-2. 클래스로 정의하는 방법 : 같은 속성에서 다른 스타일시트 적용

           → P.a {color:red; font-size:25pt} : 임의로 정한 클래스명 a - 태그명.클래스명

           → P.b {color:blue; font-size:20pt} : 임의로 정한 클래스명 b - 태그명.글래스명

           → .c {color:green; font-size:30pt} : 태그에 구애받지 않고 이 스타일시트를 적용하고 싶은 구간이라면 아무곳에나적용

 

    2-1-3. id로 정의하는 방법 : 위와 같으나 .이 들어가는 자리에 #이 들어간다. 자바스크립트에서 합쳐지면 능력발휘!

          자바 없이는 2-2. 클래스로 정의 방법과 결과는 같다. 태그에 적용시 id="클래스명"

          → #d {color:#ff9900; font-size:15pt} : 전체태그 사용 (2-2의 세번째 정의와 같다)

          → font#e {color:#ff99cc; font-size:20pt} : 특정태그에 사용

 

    2-1-4. 중첩태그에서 사용하는 방법

          → FONT B {color:ping; font-size:20pt} : 폰트태그 안에 있는 볼드에만 적용 - 태그명 태그명 {속성명:속성값; ...}

 

   2-2. body태그의 시작태그와 끝태그 안에 적용 코드 입력 : <body></body>

         → <p class="a">스타일시트 적용되나</p>
             <p id="d">스타일시트 진짜적용되나</p>
              <p >스타일시트 진짜적용되네</p>
              <font class="c">폰트태그에 스타일적용</font><br>
              <font>중첩태그에서 <b>스타일</b>적용</font><br>
              <b>그냥볼드</b>

 

# CODE

 

<head><style>

FONT {color:red; font-size:25pt;}

P.a {color:red; font-size:25pt}

P.b {color:blue; font-size:20pt}

.c {color:green; font-size:30pt}

#d {color:#ff9900; font-size:15pt}

font#e {color:#ff99cc;font-size:20pt}

FONT B {color:pink; font-size:20pt}

</style></head>

 

<body>

<p class="a">스타일시트 적용되나</p>
<p id="d">스타일시트 진짜적용되나</p>
<p >스타일시트 진짜적용되네</p>
<font class="c">폰트태그에 스타일적용</font><br>
<font>중첩태그에서 <b>스타일</b>적용</font><br>
<b>그냥볼드</b>

</body>

 

# 결과

 

 

 

 

 

  3. 외부파일로 만들기 : 2. style태그방식이 똑같이 적용된다 : style.css로 속성을 정의 후 html에서 link를 이용, 불러온다.  

 

   3-1. css파일 만들기 : 2. style태그방식을 참고하여 속성값이 정의 된 페이지를 만들고 style.css로 저장한다

          → P {color:#9900ff; font-size:40pt;}

              TABLE {font-size:1in;}
              DIV {background-color:#99cc00;letter-spacing:20px; font-size:1cm; font-weight:900; text-decoration:overline;

              width:800;}
              A {text-decoration:none}
              INPUT {background-color:#ffccff}

   3-2. html에 외부파일(style.css) 적용하기 : 물론 body의 시작태그와 끝태그 사이에 기술되며 상단에 다음과 같이 입력

          → <link rel="stylesheet" type="text/css" href="style.css"> : rel=relation, 스타일시트와 관계를 맺어보겠다는건가..

 

# CODE

 

<link rel="stylesheet" type="text/css" href="style.css">

<p>외부스타일 적용하기</p>
<div>외부스타일 적용하기2</div>
<a href="#">외부스타일 적용하기3</a>
<table>
 <tr>
  <td>아이디</td>
  <td><input type="text" name="id"></td>
 </tr>
 <tr>
  <td>비밀번호</td>
  <td><input type="password" name="pwd"></td>
 </tr>
 <tr>
  <td colspan="2" align="center">
   <input type="submit" value="전송">
   <input type="reset" value="다시">
  </td>
 </tr>
</table>

 

# 결과

 

 

 

* 글자속성: style.css 외부파일에 만들고 style2.html에서 실행

 

  0. color : 글자색
  1. font-size : 글자의 크기(pt:point) *pt단위 외에도 여러가지(cm, mm 등등 다양)
  2. font-family : 글꼴
  3. font-style : 글자유형(normal:기본, italic:기울임꼴)
  4. font-weight : 글자두께(normal, 100~900 사이의 값), bold(400), lighter(현재글꼴의 두께-100), bolder(+100)
  5. text-decoration : 글자선(none:기본, underline:밑줄, line-through:취소선, overline:윗줄
  6. letter-spacing : 글자간격,자간(px:pixel)
  7. background-color : 적용하는 태그의 배경색
  8. background-image : 적용하는 태그의 배경그림 ...인것 같은데 한개 가지고 끝나지 않으니 내일...

 

'Html/Jsp/Javascript' 카테고리의 다른 글

[Test] 회원가입 폼 만들기  (1) 2011.10.16
Html,Jsp,Css_05  (0) 2011.10.14
Html,Jsp,Css_04  (0) 2011.10.13
Html,Jsp,Css_03  (0) 2011.10.12
Html_02  (0) 2011.10.11
Html_01  (0) 2011.10.10