Html,Jsp,Css_09 Html/Jsp/Javascript 2011. 10. 20. 19:12
* Windows객체 (파일없이 새창띄우기) 

<html>
 <head>
  <title> Windows객체(파일없이 새창띄우기) </title>
 <script>  // 새창, 내용
  win = window.open("","w","width=300 height=300");
  // △파일명을 안썼다고해서 에러가 나지 않는다.
 
  win.document.open(); // ◁ win 안에 쓰겠다 : 내용이 대상 시작태그 역할?
     win.document.write("홍길동<br>");
     // △ win 이라는 객체에 홍길동을 출력
     win.document.write("<img src=../html/img/1.jpg>")
  win.document.close(); // ◁ 다 썼다 : 끝 태그 역할?
 
  function winClear(){
    win.document.open();
        // ▽ 팝업창의 내용 지우기 : 기존 파일이 있는 팝업이어도 그 내용까지 삭제
        win.document.clear();
    win.document.close();
  }

  function winClose(){ // 창 자체를 컨트롤 하므로 open/close 필요 없음
        // ▽ 팝업창 닫기
        win.window.close();
  }

  // window.status = "우와 신기하다" // 텍스트만 가능
 
  // 상태표시줄 텍스트가 오른쪽에서 왼쪽으로 움직이듯 보이게 출력하기
  // 텍스트 앞에 공백을 두고 공백을 한칸씩 줄여가며 글자가 오른쪽에서
  // 왼쪽으로 들어오는 것처럼 보이도록 하고 전일 했었던
  // setTimeOut("함수명",밀리초)를 이용하여 속도 조절.

  statusMsg = "☆우★와☆신★기☆하★다☆하★하☆하★하☆하★하☆하★하☆하★하☆하★하☆하★하☆하★하☆하★하☆하★하☆하★"
  space = "";
  for (i=1; i<82; i++)
  {
    space += " ";
  }
  statusMsg = space + statusMsg;
 
  // 반복처리를 위한 함수생성
  ndx = 0;
  function winStatus(){
 
      window.status = statusMsg.substring(ndx);
      if(ndx>statusMsg.length)ndx=0; // index가 글자의 크기보다 크면 초기화 시킨다.
      // 계속 반복되면 글자수보다 큰 값의 위치를 지정하게 되어 에러→그래서 if문삽입
      ndx++;
      setTimeout("winStatus()",100) // 밀리초만큼 대기 후 함수 재 호출=반복 
  }  
    </script>
 </head>

 <body onLoad="winStatus()">
 <img src="../html/img/2.jpg" onClick="winClear()">
 <input type="button" value="팝업창닫기" onClick="winClose()">
 </body>
</html>

# 결과 (휠 클릭 후 열기 : 마우스 왼쪽 클릭후 열기하면 페이지 이동됨)


이미지 클릭시 팝업창 내용 삭제
팝업창닫기 버튼 누를시 창 사라짐



* 스크롤바 자동이동하기

<html>
 <head>
  <title> ScrollMove.html </title>
<script>
function timer(){
date = new Date(); // 변수=생성 클래스(). 시스템의 날짜를 구하는 객체
 y = date.getYear(); // date라는 객체 안에서 Year(년도)를 얻어내(get)라.
// get은method - 정보를 얻어내는 기능

 // date.setYear(2012) : 객체의 년도만 2012년으로 셋팅해라.
 m = date.getMonth()+1; // 월구하기: 0-1월 ~ 11-12월)
 d = date.getDate(); // 일구하기
 h = date.getHours(); // 시간 구하기: 자바에는 s가 없다
 mm = date.getMinutes(); // 분 구하기: 자바에는 s가 없다
 ss = date.getSeconds(); // 초 구하기: 자바에는 s가 없다

window.status = y+"년 "+m+"월 "+d+"일 "+h+"시 "+mm+"분 "+ss+"초"
}

window.setInterval("timer()",1000); // 1초에 한번씩 timer()함수를 실행하여 초가 바뀌도록
   
     // 스크롤바 자동이동하기
     i=0
     function ScrollDelay()
     {
        i++;
        if(i>700){
            clearTimeout("ScrollDelay()");
            i=0; // 다시 위로 갔을 때 작동되도록 i값 초기화
        }
        else{
        window.scrollBy(0,2); // (x,y)
        setTimeout("ScrollDelay()",15);
        }
     }  
</script>
 </head>

 <body onLoad="timer()"><center>
 <input type="button" value="이동" onClick="ScrollDelay()">
 <!-- 이동을 누르면 스크롤바가 움직이도록 하는 함수 이벤트 만들기 △-->
  
 <br><br><br><br><br><br>
<object id='skplayer' name='skplayer' width='640' height='384' classid='clsid:D27CDB6E-AE6D-11cf-96B8-444553540000' codebase='http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9.0.115.00' align='center'><param name='movie' value='http://v.nate.com/v.sk/movie/0|219090085/20111019071001477945621006' /><param name='allowFullscreen' value='true' /><param name='allowScriptAccess' value='always' /><param name='wmode' value='transparent' /><embed src='http://v.nate.com/v.sk/movie/0|219090085/20111019071001477945621006' wmode='transparent' allowScriptAccess='always' allowFullscreen='true' name='skplayer' width='640' height='384' type='application/x-shockwave-flash' pluginspage='http://www.macromedia.com/go/getflashplayer' /></object><br><br><br>

<object id='skplayer' name='skplayer' width='480' height='384' classid='clsid:D27CDB6E-AE6D-11cf-96B8-444553540000' codebase='http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9.0.115.00'><param name='movie' value='http://v.nate.com/v.sk/movie/0|219077554/20111017181001469645991006' /><param name='allowFullscreen' value='true' /><param name='allowScriptAccess' value='always' /><param name='wmode' value='transparent' /><embed src='http://v.nate.com/v.sk/movie/0|219077554/20111017181001469645991006' wmode='transparent' allowScriptAccess='always' allowFullscreen='true' name='skplayer' width='480' height='384' type='application/x-shockwave-flash' pluginspage='http://www.macromedia.com/go/getflashplayer' /></object><br><br><br><br><br><br>

<object id='skplayer' name='skplayer' width='640' height='384' classid='clsid:D27CDB6E-AE6D-11cf-96B8-444553540000' codebase='http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9.0.115.00'><param name='movie' value='http://v.nate.com/v.sk/movie/0|219069655/20111016181001518942131006' /><param name='allowFullscreen' value='true' /><param name='allowScriptAccess' value='always' /><param name='wmode' value='transparent' /><embed src='http://v.nate.com/v.sk/movie/0|219069655/20111016181001518942131006' wmode='transparent' allowScriptAccess='always' allowFullscreen='true' name='skplayer' width='640' height='384' type='application/x-shockwave-flash' pluginspage='http://www.macromedia.com/go/getflashplayer' /></object><br><br><br><br><br><br>

<object id='skplayer' name='skplayer' width='480' height='384' classid='clsid:D27CDB6E-AE6D-11cf-96B8-444553540000' codebase='http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9.0.115.00'><param name='movie' value='http://v.nate.com/v.sk/movie/0|219072376/20111016221001448724141006' /><param name='allowFullscreen' value='true' /><param name='allowScriptAccess' value='always' /><param name='wmode' value='transparent' /><embed src='http://v.nate.com/v.sk/movie/0|219072376/20111016221001448724141006' wmode='transparent' allowScriptAccess='always' allowFullscreen='true' name='skplayer' width='480' height='384' type='application/x-shockwave-flash' pluginspage='http://www.macromedia.com/go/getflashplayer' /></object><br><br><br><br><br><br>

<a href="#">위로</a>
 </center> 
 </body>
</html>

# 결과 (휠 클릭 후 열기 : 마우스 왼쪽 클릭후 열기하면 페이지 이동됨)

스크롤바 이동효과를 보기 위해 <body> 소스에 잡다한 것을 많이 넣었다.
이동 버튼을 누르면 아래로 이동하고 이동 후 위로 올라가 다시 한번 이동버튼을
눌렀을 때 재작동이 용이하도록 if문에 i값을 초기화 시키는 소스를 넣었다.



* Document 객체

<html>
 <head>
  <title> Document 객체 </title>
 </head>

 <body bgcolor="#ff9900">
 <script>
    // document.write(document.속성명) : 속성값 출력
    // document.속성명='색상명' : 속성 적용

    // <body>의 글자색을 알아내겠다!! forground 전경색, 글자색
    document.write("글자색="+document.fgColor);
    // <body>의 배경색을 알아내겠다!! background 배경색
    document.write("<br>배경색="+document.bgColor);
    // <script>에서의 배경색 설정(#99ffff) : <body>설정값 무시?
    document.bgColor='#e0e0e0';
    // <script>에서의 글자색 설정(#9d9d9d) : <body>설정값 무시?
    document.fgColor='#9d9d9d';
    // link(방문이력없음)Color, alink(active:클릭후 놓지 않음)Color, vlink(visited:방문이력있음)Color
    document.linkColor='#cc0000';
    document.alinkColor='#ffcc00';
    document.vlinkColor='#0099ff';

    document.write("<br>link="+document.linkColor)
    document.write("<br>alink="+document.alinkColor)
    document.write("<br>vlink="+document.vlinkColor)
    // lastModified : 이문서가 마지막으로 업데이트된 날짜
    document.write("<br>마지막작성일="+document.lastModified);
    // title : 윈도우의 제목설정
    document.title='자바스크립트 공부중';
    // location : 현재 페이지 주소
    document.write("<br>현재페이지주소="+document.location);
    // select에 해당 색을 선택하면 배경색 바꾸기

    // 여담: 클라이언트 언어는 완벽하게 소스보기를 막을 수는 없다.
    // 방법이 있기 마련?
    // #FF0000 : FF(R)00(G)00(B)
 </script>
<hr>
 <select onChange="document.bgColor=this.options.value">
 <!--입력값이 변경시 마우스 이벤트 : onChange
 select 객체에서 옵션들 중에 선택된 값(this.options.value)
 -->
 <option value="">----배경----</option>
 <option value="ff0000">빨강</option>
 <option value="blue">파랑</option>
 <option value="black">검정</option>
 <option value="gray">회색</option>
 <option value="purple">보라</option>
 <option value="#ffcccc">#ffcccc</option>
 </select>

 <select onChange="document.fgColor=this.options.value">
 <!--입력값이 변경시 마우스 이벤트 : onChange
 select 객체에서 옵션들 중에 선택된 값(this.options.value)
 -->
 <option value="">----글자----</option>
 <option value="ff0000">빨강</option>
 <option value="blue">파랑</option>
 <option value="black">검정</option>
 <option value="gray">회색</option>
 <option value="purple">보라</option>
 <option value="#ffcccc">#ffcccc</option>
 </select>
 <hr>자바 Web 프로그래밍<br>
  <img src = "../html/img/sun.jpg"><br>
  <a href="#" target="_blank">링크테스트</a>
 </body>
</html>

# 결과 (휠 클릭 후 열기 : 마우스 왼쪽 클릭후 열기하면 페이지 이동됨)

이미지는 별 의미 없이 썰렁해서 넣은 것으로 엑박이어도 관계 없어 링크가 없다.



* Image 객체

<html>
 <head>
  <title> Image 객체 </title>
 </head>

 <body>
  <!-- 이미지와 관련된 정보를 얻어내겠다!! -->
  <img id="img1" src="../html/img/dog.jpg" name="자신의 개 코스프레" align="center" border="10" hspace="20" vspace="10"> <!--id부여로 스타일시트에서 사용가능-->
<br><br><br><br>

 <script>
  // 이미지의 이름을 구하라 연예인
  document.write("<br>이름 = "+document.img1.name);
  // 파일명 : 이미지를 넣을 때 src= 하고 넣어서 src
  document.write("<br>파일명 = "+document.img1.src);
  // document.img1.src='../html/img/1.jpg'; // 이런식으로 프로그램 중간에 바꿀 수 있다..
  // 너비(width), 높이(height), 좌우여백(hspace),상하여백(vspace)
  document.write("<br>너비 = "+document.img1.width);
  document.write("<br>높이 = "+document.img1.height);
  document.write("<br>좌우여백 = "+document.img1.hspace);
  document.write("<br>상하여백 = "+document.img1.vspace);
  // 정렬(align)
  document.img1.align='right';
  document.write("<br>정렬 = "+document.img1.align);
  // 테두리 두께(border)
  document.write("<br>테두리두께 = "+document.img1.border)
  </script>
 
 </body>
</html>

# 결과 (휠 클릭 후 열기 : 마우스 왼쪽 클릭후 열기하면 페이지 이동됨)

 



* onMouseOver시 상세 이미지 뜨는 테이블 작성

<html>
 <head>
  <title> Exam.마우스오버하면 상세 이미지 뜨도록 하기 </title>
 <script>
    function carDetail(n){
        document.aa.img1.src="car/car_b_0"+n+".jpg"}
// 하나의 함수에 여러 값의 결과를 얻기 위해 함수명에 (n)값을 받아 그 n값에
// 해당되는 주소를 출력하도록 하였다.
 </script>
 </head>

 <body>
 <form name="aa"> <!--폼안에 테이블을 넣고 함수에서 폼의 주소값을
 지명하지 않으면 스크립트 오류로 로드되지 않는데 이유를 모르겠다...-->
  <table cellspacing='10' cellpadding='0' border='1'><tr><td><img id='car1_1' src='car/car_a_01.jpg' onMouseOver="carDetail('1')"></td>
<td rowspan='8'><img src='car/car_b_01.jpg' id='img1'></td>

</tr><tr><td><img src='car/car_a_02.jpg' onMouseOver="carDetail('2')"></td></tr>

<tr><td><img src='car/car_a_03.jpg' onMouseOver="carDetail('3')"></td></tr>
<tr><td><img src='car/car_a_04.jpg' onMouseOver="carDetail('4')"></td></tr>
<tr><td><img src='car/car_a_05.jpg' onMouseOver="carDetail('5')"></td></tr>
<tr><td><img src='car/car_a_06.jpg' onMouseOver="carDetail('6')"></td></tr>
<tr><td><img src='car/car_a_07.jpg' onMouseOver="carDetail('7')"></td></tr>
<tr><td><img src='car/car_a_08.jpg' onMouseOver="carDetail('8')"></td></tr>
</table></form>
 </body>
</html>

# 결과

많은 이미지의 링크가 어려워 스크린샷(gif ani)으로 대체



* 페이지 이동 / history 객체

- 메타 태그(meta tag)에서의 페이지 이동
<meta http-equiv="refresh" content="5;url=http://www.daum.net">
: 5초뒤 해당 url로 이동

- 자바스크립트에서의 페이지 이동
<script>
location.href="http://www.google.co.kr"
</script>

- histoty 객체
익스플로러에서 뒤로 앞으로를 눌렀을때 사용자가 왔다 갔다 했던 경로를 저장하고 있듯이 자바스크립트에도 그것을 저장하고 있는 history라는 녀석이 있다고 한다.
실질적으로 테스트 해보진 않았다;;

ex) 홈-회원가입-member.jsp-홈/로그인 : member.jsp 는 페이지 이동시 실행되고
실질적으로도 경로에 남게 되는 것이지만 사용자 측면에서 보면 보여지지 않는 없는 경로일
뿐이다. 이런 경로를 설정해주는데에 history객체가 사용되는 듯 하다.

종류 : 전체일지 대표적인 일부의 예인지 모르겠지만 적는다
history.back() : 전페이지로 이동
history.forward() : 앞페이지로 이동
history.go(n) : n(페이지수)이 양수일땐 앞페이지, 음수일땐 전페이지


* 롤오버시 변경되는 메뉴 이미지 만들기

<html>
 <head>
  <title> RollOverMenu.html </title>
 <script>
function menu(p,imgN){
    if (p==1){ // over 기능을 수행 : eval내에 싱글따옴표 위치에 주의한다.
        eval("document.aa.m"+imgN+".src='menuimg/menu0"+imgN+"_over.gif'");
    }else{ // out 기능을 수행
        eval("document.aa.m"+imgN+".src='menuimg/menu0"+imgN+".gif'");
    }// eval : 문자열의 속성이 가지고 있는 값으로 자동으로 형 변환 (일전에 기술했었음)
}
 </script>
 </head>

 <body>
 <form name="aa">
    <table cellpadding="0" cellspacing="0">
        <tr>
            <td><img src="menuimg/menu_back01.gif"></td>
            <!--오버이미지의 p값을 1 / 아웃이미지의 p값을 2로 정하고
                각자의 imgN을 지정하여 하나의 함수에 여러 이미지가 접근이
                가능하도록 한다.-->
            <td onMouseOver="menu(1,1)" onMouseOut="menu(2,1)"><a href="#">
            <img src="menuimg/menu01.gif" border="0" name="m1"></a></td>
            <td onMouseOver="menu(1,2)" onMouseOut="menu(2,2)"><a href="#">
            <img src="menuimg/menu02.gif" border="0" name="m2"></a></td>
            <td onMouseOver="menu(1,3)" onMouseOut="menu(2,3)"><a href="#">
            <img src="menuimg/menu03.gif" border="0" name="m3"></a></td>
            <td onMouseOver="menu(1,4)" onMouseOut="menu(2,4)"><a href="#">
            <img src="menuimg/menu04.gif" border="0" name="m4"></a></td>
            <td onMouseOver="menu(1,5)" onMouseOut="menu(2,5)"><a href="#">
            <img src="menuimg/menu05.gif" border="0" name="m5"></a></td>
            <td onMouseOver="menu(1,6)" onMouseOut="menu(2,6)"><a href="#">
            <img src="menuimg/menu06.gif" border="0" name="m6"></a></td>
            <td onMouseOver="menu(1,7)" onMouseOut="menu(2,7)"><a href="#">
            <img src="menuimg/menu07.gif" border="0" name="m7"></a></td>
            <td onMouseOver="menu(1,8)" onMouseOut="menu(2,8)"><a href="#">
            <img src="menuimg/menu08.gif" border="0" name="m8"></a></td>

            <td><img src="menuimg/menu_back02.gif"></td>
        </tr>
    </table>
 </form>
 </body>
</html>

# 결과

이미지가 많아 링크에 어려움이 있어 스크린샷으로 대체함

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

jQuery.ajax(options)  (0) 2013.01.22
Html,Jsp,Css_10  (2) 2011.10.21
Html,Jsp,Css_09  (0) 2011.10.20
Html,Jsp,Css_08  (0) 2011.10.19
Html,Jsp,Css_07  (0) 2011.10.18
[Test] for문과 테이블을 이용한 구구단 출력하기 & while문으로도 해보기  (0) 2011.10.17
Html,Jsp,Css_07 Html/Jsp/Javascript 2011. 10. 18. 19:50

어제에 이어 회원가입 폼 만들기 추가정리

* head태그 안에 script태그

function totChk(){
 
 // memId 입력유무확인
 if(frm.memId.value.length<4){
  alert("아뒤는 4~12글자 까지 입니다.");
  return false;
 }

 // memId에 문자,숫자 혼합확인
 // 비교기준: 아스키코드값
 cnt=0; // 숫자의 갯수를 구하기 위해서 cnt라는 변수 선언, 0초기화
 for (i=0; i<frm.memId.value.length; i++) //9글자 라면 0부터 8까지
 { // go75ma 라면 6글자 이므로 012345
  str = frm.memId.value.charAt(i); // 초기값이 0이므로 1번째 글자가 된다
  if (str>='0' && str<='9') // 한글자 떼어서 비교 : 반복
  { // 아스키코드로 입력시 따옴표 없이 입력
   cnt=cnt+1; // 숫자일때만 cnt값 증가
  
  }


 } // 아래의 소스가 for문을 벗어나야 cnt값이 0이어도 alert가 없다.
 if (cnt == 0) // 숫자를 한개도 쓰지 않았다면
  {
   alert("아이디는 문자와 숫자 혼용해야 합니다!!!");
   frm.memId.value=""; //기존에 입력한 text 삭제
   frm.memId.focus(); // 커서 이동
   return false;
  }
 // 비밀번호 검색하기
 // 대,소,숫자 혼용하기
 pwdLng = frm.memPwd.value.length; // 비밀번호 문자길이
 charCnt = 0; // 소문자 갯수구하기
 CharCnt = 0; // 대문자 갯수구하기
 numCnt = 0;  // 숫자   갯수구하기
 etcCnt = 0;  // 기타   갯수구하기
 for (i=0; i<pwdLng; i++)
 {
  str = frm.memPwd.value.charAt(i);
  // str = frm.memPwd.value.charCodeAt(i);
  // 아스키코드 입력시 위처럼 변경
  if (str>='a' && str<='z') // 소문자
  {
   charCnt++;
  }else if (str>='A' && str<='Z') // 대문자
  {
   CharCnt++;
  }else if (str>='0' && str<='9'){ // 숫자
   numCnt++;
  }else{
   etcCnt++; // 그외의 것
  }
 }

 if (charCnt == 0 || CharCnt == 0 || numCnt ==0)
 {
  alert("비번은 대문자,소문자,숫자를 혼용해야 합니다!");
  frm.memPwd.value="";
  return false;
 }
 if (etcCnt>0)
 {
  alert("특수문자는 사용할 수 없습니다");
  frm.memPwd.value="";
  return false;
 }
 if(document.frm.memPwdChk.value == "")
 {
    alert("비밀번호를 다시한번 입력해주세요")
    document.frm.memPwdChk.focus();
    return false;
    }
 if(document.frm.memName.value == "")
    {
    alert("이름이 없는건가..")
    document.frm.memName.focus();
    return false;
    }
 if(document.frm.memJumin01.value == "" || frm.memJumin02.value == "")
    {
    alert("주민등록번호를 입력하세요")
    document.frm.memJumin01.focus();
    return false;
    }
 // 성별입력유무확인
 if (frm.memSung[0].checked==false && frm.memSung[1].checked==false)
 {
  alert("성별을 선택하세요");
  return false;
 }
 // email검사하기 : 골뱅이=atMark
 atMark = frm.memEmail.value.indexOf('@');
 dot = frm.memEmail.value.indexOf('.');
 len = frm.memEmail.value.length;
 if (atMark==-1 || dot==-1 || (dot-atMark)<=1 ||
 atMark==0 || dot==0 || atMark==len-1 || dot==len-1) // 없는 글자
 { alert("이메일 형식에 어긋한 주소 입니다.");
 }
 return true;
 // 취미 체크 여부 검사 : 체크 최소한 두개 이상 확인


}
function jumin1Length(){
 // 주민번호 입력하기
 
 if(frm.memJumin01.value.length==6){
  frm.memJumin02.focus();
 }
}
function jumin2Length(){
 // 앞자리6, 뒷자리7일 경우
 // 생년월일, 성별, 이메일 포커스이동
 if (frm.memJumin01.value.length==6 && frm.memJumin02.value.length==7)
 {
  jumin1 = frm.memJumin01.value;
  jumin2 = frm.memJumin02.value;
  //생년월일
  //년
  f = jumin2.substring(0,1); // 주민번호 뒷자리의 첫번째 글자
  if (f==1 || f==2) //1900년대사람
  {
   frm.memBirth01.value = "19"+jumin1.substring(0,2);
  }else{ //2000년대사람
   frm.memBirth01.value = "20"+jumin1.substring(0,2);
  }
  //월
  frm.memBirth02.value = jumin1.substring(2,4); // 2번째부터 4번째 앞까지
  //일
  frm.memBirth03.value = jumin1.substring(4); // 4번째부터 끝까지
  //성별
  if (f==1 || f==3) // 남자
  { frm.memSung[0].checked = true;
  }else{ // 여자
   frm.memSung[1].checked = true;
  }
  frm.memEmail.focus();
 }

}
//숫자키 입력검사하기
function numChk(){
 if (!(event.keyCode>=48 && event.keyCode<=57)) // 숫자의 범위를 벗어났을 때 
 // event.keyCode : 지금 눌러진 키에 대한 아스키 코드를 구한다.
 { event.returnValue=false; // returnValue라는 변수에 화면에 문자출력취소
 }
}

* body태그안에 form 태그

<form action="#" method="post" name="frm" submit="totChk()">

<table border="0" cellpadding="0" cellspacing="0"> <!-- cellpadding과 cellspacing 값을 0으로 초기화 해주지 않으면 테이블내부의 행/열 간 간격이 벌어진다. -->
<caption align="left">
<font color="white">..</font><font color="red">*</font><font id="s">표시 항목은 필수 입력 항목입니다.</font></caption>
 <tr height="60">
  <td align="right" width="100" bgcolor="#efefef">아&nbsp;이&nbsp;디&nbsp;</td>
  <td valign="top">&nbsp;&nbsp;<font color="red">*&nbsp;</font></td>
  <td width="600"> 
   <input type="text" name="memId" size="16" maxlength="12" value="goguma777" onClick="this.style.backgroundColor='black'; this.value='',this.style.color='white'" onBlur="this.style.backgroundColor='gray'; this.style.borderColor='red'"> <!--스타일시트가 인라인방식일때-를뺀다
   this.style.backgroundColor C대문자-->
   <!--▲ this.:현재인풋태그영역을 가르킨다. -->


   <tr height="30">
  <td align="right" bgcolor="#efefef">주민등록번호&nbsp;</td>
  <td valign="top">&nbsp;&nbsp;<font color="red">*</font></td>
  <td>
  <input type="text" name="memJumin01" size="7" maxlength="6" onKeyUp="jumin1Length()" onKeyPress="numChk()">-
  <input type="text" name="memJumin02" size="7" maxlength="7" onKeyUp="jumin2Length()" onKeyPress="numChk()">
  </td> </tr>
 
 <tr height="30">
  <td align="right" bgcolor="#efefef">생년월일&nbsp;</td>
  <td valign="top">&nbsp;&nbsp;<font color="red">*</font></td>
  <td>
  <input type="text" name="memBirth01" size="4" maxlength="4">년
  <input type="text" name="memBirth02" size="3" maxlength="2">월
  <input type="text" name="memBirth03" size="3" maxlength="2">일
 </tr> 

 <tr height="30">
  <td align="right" bgcolor="#efefef">성<font color="white">....</font>별&nbsp;</td>
  <td valign="top">&nbsp;&nbsp;<font color="red">*</font></td>
  <td>
  <input type="radio" name="memSung" value="man">남자&nbsp;
  <input type="radio" name="memSung" value="woman">여자
 </tr> 

 <tr height="30">
  <td align="right" bgcolor="#efefef">E - mail&nbsp;</td>
  <td valign="top">&nbsp;&nbsp;<font color="red">*</font></td>
  <td>
   <input type="text" name="memEmail" size="28">
  </td>
 </tr>

 <tr height="30">
  <td align="right" bgcolor="#efefef">메일수신&nbsp;</td>
  <td valign="top">&nbsp;&nbsp;<font color="red">*</font></td>
  <td>
   <input type="radio" name="memEmailYes" value="mailYes" checked>수신동의&nbsp;
   <input type="radio" name="memEmailNo" value="mailNo">수신거부
  </td> 
 </tr>

 <tr height="30">
  <td align="right" bgcolor="#efefef">우편번호&nbsp;</td>
  <td valign="top">&nbsp;&nbsp;<font color="red">*</font></td>
  <td>
  <input type="text" name="memZipCode01" size="4" maxlength="3">-
  <input type="text" name="memZipCode02" size="4" maxlength="3">
  <input type="button" value="검색" onClick="zipChk()">
  </td> 
 </tr>

 <tr>
  <td align="right" bgcolor="#efefef">주<font color="white">....</font>소&nbsp;</td>
  <td valign="top">&nbsp;&nbsp;<font color="red">*</font></td>
  <td>
   <input type="text" name="memAddr1" size="28"><br>
   <input type="text" name="memAddr2" size="16">
  </td>
 </tr>


<!--
  - keyEvent 종류
    onKeyPress : 키를 누르고 있을 때 발생
    onKeyUp : 키를 누른 후 놓았을 때 발생
    onKeyDown : 키를 입력했을 때 발생

  - mouseEvent 종류
    onMouseOver : 마우스포인터가 지정 범위안에 있을 때
    onMouseOut : 마우스포인터가 지정 범위 바깥으로 나갈 때
    onClick : 마우스 클릭시
    onBlur : 영역이 클릭이 된 상태에서 다른곳을 클릭하여 포커스가 범위를 벗어났을 때
    onMouseUp : 마우스를 눌렀다 놨을 때
    onMouseDown : 마우스를 누르고 있을 때
    onDbClick : 마우스를 더클클릭시
    onDragDrop : 마우스 드래그시

    onChange : 입력값이 변경시
    onReset : 재시작시
    onMove : 윈도우가 이동시
    onLoad : 대상이 열렸을 때
    onUnLoad : 대상이 닫혔을 때
    onResize : 윈도우의 크기가 변경됐을 때
    onSelect : 입력양식에서 선택했을 때
    onSubmit : 입력양식을 서버로 전송할 때
-->

* 닉네임 중복검사 팝업창 만들기

<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>

* 닉네임 중복검사 팝업창의 외부파일(nickScript.js)

function nickClose(){
opener.document.frm.memNic.value=nickFrm.nick.value;
window.close();
}

* 주소 검색 팝업창 만들기

 <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>

* 아이디 중복검사 팝업창 만들기

 <head>
  <title> 아이디 중복검사 </title>
 <script>
 function idChkClose()
 { // 메인폼에 검색한 아이디를 표시
  opener.document.frm.memId.value="myID"  
   // 현재창 닫기
  window.close();
  //self.close();
  }
 </script>
 </head>
<body>
  당신이 입력한 아이디는 사용가능한 <br>아이디 입니다.
  <p>
  <input type="button" value="Close" onClick="idChkClose()">
 </body>

* 특정 문자의 위치/글자수 구하는 함수

<script>
 id = "goguma777@nate.com"
 // 글자의 길이 구하기
 document.write(id.length+"<br>"); // 글자수를 구하는 변수(?):length
        // 괄호가 없는건 변수
 
 // 한글자 구하기
 document.write(id.charAt(5)+"<br>"); // 괄호안의 인덱스 의미:특정위치의 글자를
 // 꺼냈다 보면 된다. id.charAt(5)는 5번째 글자를 얻어내는 메소드
 // 괄호가 있으면 메소드 없으면 변수
 // 제일 앞글자는 0이라는 위치값, 순서대로 1234...
 // 공백도 한글자 차지

 // 문자열 구하는 함수
 document.write(id.substring(3)+"<br>");
 // 여러글자, 필요한만큼 글자를 얻어내는 메소드
 // 3이라 입력하면 3번째 글자의 위치부터 끝까지~

 document.write(id.substring(3,6)+"<br>");
 // 3인덱스에 있는 문자부터 6인덱스 위치의 앞 문자까지

 // 특정문자의 위치구하기
 // index값을 구하며 찾을 문자가 없으면 -1을 리턴한다
 document.write(id.indexOf('.'));
</script>

* for문을 활용한 구구단 소스 재정리

<script language="JavaScript">
document.write("<table border=1 align=center><caption>=구구단=</caption>");
for (i=2; i<=9; i+=4) // 2, 6
{
 // 제목출력 : 2단 3단 4단 ..
 document.write("<tr>");
 for (dan=i; dan<=i+3; dan++)
 { //     2        5
   //     6        9
   document.write("<td width=100>"+dan+"단</td>")
 }
 document.write("</tr>");
 for (j=2; j<=9; j++)
 { document.write("<tr>");
  for (dan=i; dan<=i+3; dan++)
  { document.write("<td>"+dan+"*"+j+"="+dan*j);
  }
  document.write("</td>")
 }
}
document.write("</table>");
</script>

* 자바스크립트 함수, id와 마우스액션을 이용한 이미지 border 효과
-쉽게 말해 롤오버 이미지효과

<html>
 <head>
  <title> New Document </title>
<script>
 function backImg(ColorName){
  document.all['bImg'].style.borderColor=ColorName;
 }
</script>
 </head>

 <body>
 
 <table cellpadding="0" cellspacing="0" border=1 align=center>
 <tr height="150">
 
 <td width="50" bgcolor="#454545" onMouseOver="backImg('#454545')" onMouseOut="backImg('black')">
 <td width="50" bgcolor="#515151" onMouseOver="backImg('#515151')" onMouseOut="backImg('#ffffff')">
 <td width="50" bgcolor="#5a5a5a" onMouseOver="backImg('#5a5a5a')" onMouseOut="backImg('#ffffff')">
 <td width="50" bgcolor="#686868" onMouseOver="backImg('#686868')" onMouseOut="backImg('#ffffff')">
 <td width="50" bgcolor="#757575" onMouseOver="backImg('#757575')" onMouseOut="backImg('#ffffff')">
 <td width="50" bgcolor="#808080" onMouseOver="backImg('#808080')" onMouseOut="backImg('#ffffff')">
 <td width="50" bgcolor="#8b8b8b" onMouseOver="backImg('#8b8b8b')" onMouseOut="backImg('#ffffff')">
 <td width="50" bgcolor="#999898" onMouseOver="backImg('#999898')" onMouseOut="backImg('#ffffff')">
 <td width="50" bgcolor="#a7a6a6" onMouseOver="backImg('#a7a6a6')" onMouseOut="backImg('#ffffff')">
 <td width="50" bgcolor="#b9b9b9" onMouseOver="backImg('#b9b9b9')" onMouseOut="backImg('#ffffff')">
 <td width="50" bgcolor="#cccbcb" onMouseOver="backImg('#cccbcb')" onMouseOut="backImg('white')">
  </tr>
 <tr>
 <td align="center" colspan="11">
 <img id="bImg" src = "../html/img/1.gif"
 border="10">
 </td>
 </tr>
 </table>
 <p></p>
 <center>
 </center>
 </body>
</html>

 

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

Html,Jsp,Css_09  (0) 2011.10.20
Html,Jsp,Css_08  (0) 2011.10.19
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