..
자바스크립트 (5)
[javascript] 이벤트
336x280(권장), 300x250(권장), 250x250, 200x200 크기의 광고 코드만 넣을 수 있습니다.


이벤트 : 사용자가 브라우저에서 행한 행위를 이벤트라고 한다.
            즉 버튼을 클릭하거나 더블클릭, 키보드를 누르는 행위 마우스를 드래그 하는 등등을 이벤트라고 한다.

이벤트 핸들러 : 이벤트(사용자의 행위) 발생 시 그에 따른 작용을 나타내기 위해 작성된 자바스크립트 코드
이벤트 이름 앞에 on을 덧붙인다. ex) 마우스 클릭 - onclick

이벤트 핸들러 작성 방법
: <태그이름 이벤트 핸들러="자바스크립트코드">

이벤트 핸들러의 종류

onabort      이미지 로딩이 중단될 때                                                  
                                                                                           
onload       브라우저가 윈도우, 프레임, 이미지 등의 객체 로딩 직후         
                                                                                           
onunload       객체가 언로드될 때                                                          
                                                                                           
onbeforeunload     객체가 언로드되기 전에                                                    
                                                                                           
onreadystatechange    문서의 로딩 과정에 따라 문서 상태가 변할 때마다 발생          
                                                                                           
onerror       HTML 문서나 이미지 로딩 시 오류가 발생할 때                    
                                                                                           
onstop       사용자가 스톱버튼을 클릭하거나 웹페이지를 이동할 때          
                                                                                           
onhelp       사용자가 F1키를 클릭할 때                                               
                                                                                           
onblur       객체가 포커스를 잃을 때                                                   
                                                                                           
onchange       select, text, textarea 필드의 값 변경 후 포커스를 잃을 때  
                                                                                           
onfocus        객체가 포커스를 받을 때                                                   
                                                                                           
onkeydown       사용자가 임의의 키를 누른 순간에                                      
                                                                                           
onkeypress       사용자가 알파뉴메릭 키를 누른 순간에                                
                                                                                           
onkeyup        사용자가 누른 키를 놓을 때                                               
                                                                                           
onclick        객체가 클릭될 때                                                             
                                                                                           
ondblclick      사용자가 객체를 더블클릭할 때

oncontextmenu   사용자가 클라이언트 영역에서 오른쪽 마우스버튼을 클릭할 때   
      
onmousedown     사용자가 마우스를 누른 순간                                                      

onmousemove    사용자가 마우스를 움직일 때                                                      

onmouseout    객체위로 올라간 마우스가 내려올 때                                            

onmouseover     마우스 커서가 객체 위로 올라갈 때                                              

onmouseup     사용자가 누른 마우스 버튼을 놓을 때                                           

onmouseenter    마우스 커서가 객체위로 올라갈 때                                               

onmouseleave    객체위로 올라간 마우스가 내려올 때                                            

ondrag      드래그 동작 동안 소스 객체에 계속적으로 발생                              

ondragenter    소스가 목적 객체위로 드래그되는 순간, 목적 객체에 발생                

ondragstart    선택한 소스로 드래그를 시작할 때 소스객체에 발생                        

ondragover     목적객체 위로 드래그되어 있는 동안 목적 객체에 계속 발생             

ondragleave    드래그 상태로 목적 객체에서 마우스가 빠져 나올 때, 목적 객체에     

ondragend     드래그 동작이 끝날 시점 클릭된 마우스가 놓여질 때, 소스 객체에     

ondrop      드래그 동작이 끝날 시점 클릭된 마우스가 놓여질 때, 목적 객체에     

onselect                          현재 선택된 내용이 변할 때                                                

onselectstart                  객체가 선택되어지고 있을 때, 처음 객체에 발생                     

onselectionchange        문서의 선택된 상태가 변경될 때 document객체에 발생         

onmove          윈도우나 프레임 혹은 객체의 위치가 변경될 때, 변경 전에 발생

onresizestart         윈도우나 프레임 혹은 객체의 크기가 변경될 때, 변경 전에 발생

onresize          onresizestart가 불려진 후                                               

onresizeend         윈도우나 프레임 혹은 객체의 크기가 변경된 후                      

onscroll          스크롤바가 존재하는 객체에 스크롤이 발생할 때                    

onreset    폼이 리셋될 때                                                                 

onsubmit          폼이 전송될 때                                                                 

onbeforecopy         선택된 소스객체가 클립보드로 복사되기 전에, 소스객체에       

oncopy    선택된 소스객체가 클립보드로 복사될 때, 소스객체에             

onbeforecut         선택된 소스객체가 문서에서 제거되기 전에, 소스객체에          

oncut          선택된 소스객체가 문서에서 제거될 때, 소스객체에                

onbeforepaste   클립보드로부터 객체를 문서에 붙이기 전, 목적객체에             

onpaste          클립보드로부터 객체를 문서에 붙일 때, 목적객체에   

onstart                             MARQUEE 객체가 매번 루프를 도는 시작 시점에                                             

onbounce   MARQUEE 객체의 behavior가 alternate로 된 경우 텍스트가 한쪽끝에 도달할 때

onfinish     MARQUEE 객체의 루프가 완전히 종료될 때                                                    

onactivate    객체가 activeElement로 설정될 때                                                               

onbeforedeactivate  activeElement가 변경되기 전, 현재 activeElement 객체에                             

ondeactivate    activeElement가 변경될 때                                                                         

onbeforeprint    문서의 프린트나 미리보기를 수행하기 전                                                         

onafterprint   문서의 프린트나 미리보기를 수행한 후                                                            

onlayoutcomplete  프린트나 미리보기시 레이아웃이 끝날 때                                                         

onfilterchange    비쥬얼 필터의 상태가 변할 때                                                                        

onlosecapture    객체가 마우스 캡쳐를 잃을 때                                                                        

onpropertychange  프로퍼티가 변할 때       

onbeforeupdate              데이터를 주로 포함하는 객체의 데이터가 변경될 때                    

onafterupdate         데이터를 주로 포함하는 객체의 데이터가 변경된 후                    

onerrorupdate         데이터를 주로 포함하는 객체에 데이터를 변경하면서 오류발생     

oncellchange   데이터 공급객체인, applet, bdo, object의 데이터가 변경될 때  

ondataavailable  비동기적으로 데이터를 공급받는 객체에 데이터가 도착할 때        

ondatasetchanged        데이터 공급객체들이 노출한 데이터 셋이 새로 변경될 때             

ondatasetcomplete  데이터 공급객체들로부터 모든 데이터가 준비되었을 때               

onrowenter   데이터 공급객체에 현재 행이 변경되고 새 데이터가 사용가능할 때

onrowexit          데이터 공급 콘트롤이 현재 행을 변경하기 직전                          

onrowsdelete         행들이 레코드셋으로부터 삭제될 때                                         

onrowsinserted         새로운 행들이 레코드셋에 추가될 때      
  Comments,     Trackbacks
※레이어의 스타일 속성 사용법
336x280(권장), 300x250(권장), 250x250, 200x200 크기의 광고 코드만 넣을 수 있습니다.

※레이어의 스타일 속성 사용법
   –레이어를 자바스크립트와 함께 사용할 때는 레이어의 스타일 속성을 이용
   –스타일 속성은 <div style=“ ”>에서 style 속성에 지정한 스타일 속성 값을 그대로 사용
       document.all[id명].style.스타일 속성

     ①레이어 보이거나 감추게 하기
         document.all[id명].style.visibility=visible/hidden
     ①레이어 이동하기
        document.all[id명].style.left=값
        document.all[id명].style.top=값
        document.all[id명].style.left=event.clientX
        document.all[id명].style.top=event.clientY

     
      •애니메이션 효과를 줄 때 사용
      •레이어의 좌표 값을 변경하여 레이어가 담고 있는 문자, 그림 등을 움직이게 할 수 있음

'DEV > html/css/js/img' 카테고리의 다른 글

ajax 관련 사이트 모음  (0) 2008.10.12
Layers 객체  (0) 2008.05.28
Layer 객체의 특성  (0) 2008.05.28
  Comments,     Trackbacks
Layers 객체
336x280(권장), 300x250(권장), 250x250, 200x200 크기의 광고 코드만 넣을 수 있습니다.
레이어란 문서에 떠 있는 새로운 창입니다.
레이어를 문서에 삽입하려면 <div> 태그를 사용합니다.
자바스크립트와 스타일을 함께 사용하면 애니메이션 효과를 만들 수도 있습니다.

레이어의 스타일 속성 사용법
레이어를 자바스크립트와 함께 사용할 떄는 레이어의 스타일 속성을 이용합니다.
레이어의 스타일 속성은 <div style=""> 에서 style 속성에 지정한 스타일 값을 그대로 사용합니다.


  1. document.all[id명].style.스타일 속성  

아래는 실제 사용되는 예입니다.

  1. <div id=coolsoft>  
  2. <a href=# onMouseOver="note1.style.visibility='visible'" onMouseOut="note1.style.visibility='hidden'">쿨소프트</a><br><br>  
  3. </div>  
  4. <div id=note1>  
  5. 쿨소프트<br>  
  6. HTML, CSS, 자바 스크립트, JSP, XML, 플래시 등 웹프로그래밍 강좌 및 자료 수록.  
  7. </div>  

쿨소프트를 누르게 되면 아래에 설명이 나오게 됩니다..

'DEV > html/css/js/img' 카테고리의 다른 글

※레이어의 스타일 속성 사용법  (0) 2008.05.28
Layer 객체의 특성  (0) 2008.05.28
[javascript] javacript 객체 모델  (0) 2008.05.28
  Comments,     Trackbacks
Layer 객체의 특성
336x280(권장), 300x250(권장), 250x250, 200x200 크기의 광고 코드만 넣을 수 있습니다.
Layer 객체의 특성

<name>

 name특성은 <LAYER> 택에서 ID속성을 지정해 놓은 레이어의 이름을 가리키게 된
다. 이 특성은 자바스크립트에서 값을 참조만 할 수 있지 수정할 수는 없다.

<let / top>

left와 top은 레이어의 좌측 상단 위치(픽셀 단위)를 가리키는 특성이다. 특히 이 특성
값은 자신히 현재 속해 있는 레이어나 문서를 기준으로 계산된다는 점에 주의해야
한다.
 
이 특성은 자바스크립트에서 참조 뿐만 아니라 수정도 할 수 있기 때문에 레이어의
위치를 동적으로 바꾸는데 사용할 수 있다.
 

 

<예>

<HTML>
    <HEAD>
 <TITLE> 레이어 예제 </TITLE>
       <SCRIPT LANGUAGE="JavaScript">
        <!--
            function leftLayer() {
                // layer1을 지정하는 방법을 보자.
                // document 객체 밑에 있는 layers라는 객체 배열에는 현재 문서 안에
                // 포함되어 있는 모든 레이어들의 객체가 들어가 있다. 이중에 layer1
                // 레이어 객체를 가리키기 위해 참조 배열 방식을 사용하여야 한다.
                // 또는 이 레이어가 문서에 첫번째로 나타나는 레이어 객체이기 때문에
                // window.document.layers[0]도 동일한 객체를 가리키는 것이 된다.
                var val = window.document.layers['layer1'].left;
                window.document.layers['layer1'].left = val - 5;
            }
            function upLayer() {
                var val = window.document.layers['layer1'].top;
                window.document.layers['layer1'].top = val - 5;

            }
            function downLayer() {
                var val = window.document.layers['layer1'].top;
                window.document.layers['layer1'].top = val + 5;
            }
            function rightLayer() {
                var val = window.document.layers['layer1'].left;
                window.document.layers['layer1'].left = val + 5;
            }
        // 자바스크립트 끝 -->
        </SCRIPT>
    </HEAD>
    <BODY>
        <CENTER> <H1>레이어 이동</H1>
        <FORM NAME="myform">
            <INPUT TYPE="button" VALUE="왼쪽으로" onClick="leftLayer()">
            <INPUT TYPE="button" VALUE="  위로  " onClick="upLayer()">
            <INPUT TYPE="button" VALUE=" 아래로 " onClick="downLayer()">
            <INPUT TYPE="button" VALUE="오른쪽으로" onClick="rightLa

yer()">
        </FORM>
        </CENTER>
        <LAYER ID=layer1 TOP=100 LEFT=250 WIDTH=250 HEIGHT=50
                  BGCOLOR="WHITE">
         <H2> 넷스케이프사에서는 커뮤니케이터 4.0부터 HTML 문서 상에서
         특정 영역을 지정하여 내용을 보여줄 수 있는 레이어(Layer)라는 기능을
         제공하기 시작하였다. </H2>
        </LAYER>
    </BODY>
</HTML>

결과보기

<width / height>

width와 height는 각각 레이어의 너비와 높이에 대한 정보를 가지고 있는 특성이다.
이 특성은 자바스크립트에 의해 참조할 수도 있고 수정할 수도 있다.

<pageX / pageY>

 pagex와 cageY는 앞에 나온 1911와 top특성처럼 레이어의 좌측 상단 위치(픽셀 단위)
를 가리키는 특성이다. 다만 다른점이라면 pagex와 cageY가 항상 전체 페이지를 기
준으로 한 위치 정보라면, left와 top은 현재 포함되어 있는 레이어나 문서를 기준으로
한다는 것이다. 이 특성 역시 자바스크립트에서 참조 뿐만 아니라 수정도 할 수 있다

<clip.top / clip.left / clip.right / clip.bottom>

이 특성들은 클리핑 영역의 크기에 대한 정보를 가지고 있다. 여기서 클리핑 영역이
라는 것은 전체 레이어 중에서 실제로 화면에 보여줄 영역을 의미한다. 이 특성들은
자바스크립트에서 참조 뿐만 아니라 수정도 할 수 있다.

<예>

<HTML>
    <HEAD>
 <TITLE> 레이어 예제 </TITLE>
       <SCRIPT LANGUAGE="JavaScript">
        <!--
           function zoomOut() {
            window.document.layers[0].clip.left = window.document.layers[0].clip.left-2;
            window.document.layers[0].clip.top = window.document.layers[0].clip.top-2;
            window.document.layers[0].clip.right = window.document.layers[0].clip.right+2;
            window.document.layers[0].clip.bottom = window.document.layers[0].clip.bottom+2;
            }
           function zoomIn() {
            window.document.layers[0].clip.left = window.document.layers[0].clip.left+2;
            window.document.layers[0].clip.top = window.document.layers[0].clip.top+2;
            window.document.layers[0].clip.right = window.document.layers[0].clip.right-2;
            window.document.layers[0].clip.bottom = window.document.layers[0].clip.bottom-2;
           }
        // 자바스크립트 끝 -->
        </SCRIPT>
    </HEAD>
    <BODY>
        <CENTER>
        <H1>레이어 이동</H1>
        <FORM NAME="myform">
            <INPUT TYPE="button" VALUE="확대" onClick="zoomOut()">
            <INPUT TYPE="button" VALUE="축소" onClick="zoomIn()">
        </FORM>
        </CENTER>
        <LAYER ID=layer1 TOP=100 LEFT=300 WIDTH=250 HEIGHT=50
                 CLIP=50,50,100,100 BGCOLOR="WHITE">
         <H2> 넷스케이프사에서는 커뮤니케이터 4.0부터 HTML 문서 상에서
         특정 영역을 지정하여 내용을 보여줄 수 있는 레이어(Layer)라는 기능을
         제공하기 시작하였다. </H2>
        </LAYER>
    </BODY>
</HTML>

결과보기

<bgColor / background>


bgcolor는 레이어의 배경색을 가리키는 특성이고, background는 레이어의 배경 이미지
의 URL주소를 가리키는 특성이다. bgcolor에는 직접 색상 이름이 지정될 수도 있고,
RGB 값이 지정될 수도 있다. 또한 배경색을 투명하게 만들고 싶은 경우에는 null을
지정하게 되는데, 이 값이 bgcolor의 디폴트값이다.
 
   //파란색 배경 이데지
   layer.bgcolor = "BLUE":
     or
   layer.bgcolor = "#0000FF":
 
// 배경을 투명하게
layer.bgcolor = null;

<zindex / siblingAbove / siblingBelow / above / below>


zindex는 레이어들 사이의 순서를 지정하는 특성으로, 이 값이 높은 레이어일수록 값
이 낮은 레이어 위로 올라가게 된다. 그리고 siblin턴.hove와 above는 모두 현재 정의
되는 레이어 위에 들어갈 레이어를 지정하게 되고, siblingBelow와 below는 현재 정의
되는 레이어 밑에 들어갈 레이어를 지정하게 된다. 단, sibling이 앞에 붙은 특성의 경
우에는 동일한 상위 레이어 안에 들어간 레이어들 중에서 하나를 지정해야 한다.

여기에서 한 가지 주의해야 할 점은 zlndex의 경우에는 자바스크립트에서 값을 참조
할 뿐만 아니라 수정할 수도 있지만, 나머지 siblin앓,hove, siblingBelow, above, below
특성은 수정할 수는 없고 참조만 할 수 있다는 것이다.
 

<visibility>

 visibility특성은 현재 래이어를 보여줄 것인지 감출 것인지를 지정하기 위한 것이다.
이 특성에는 "show", "hi(k", "irlherit" 중 한 값이 설정될 수 있다. 여기에서 show는 레
이어를 보여준다는 것이구 hide는 레이어를 감춘다는 것이며, inherit는 현 레이어를
포함하고 있는 상위 레이어의 속성값을 상속받는다는 것을 의미한다.

<parentLayer>

 pcrenaayer는 레이어가 현재 포함되어 있는 상위 레이어의 이름을 가리키게 되는데,
만약 레이어 안에 포함되어 있지 않다면, 레이어가 포함되어 있는 윈도우 객체를 가
리키게 된다. 참고로 이 특성값은 참조만 할 수 있고 수정할 수는 없다.
 

<src>
src는 레이어 안에 내용으로 들어갈 HTML파일의 URL주소를 지정하는데 사용하는
특성이다. 이 특성은 자바스크립트에서 수정할 수 있기 때문에 포맷을 그대로 유지하
면서 내용이 계속해서 바뀌는 웹 사이트에 유용하게 사용될 수 있을 것이다.
 

 

<예>

<HTML>
    <HEAD>
 <TITLE> 레이어 예제 </TITLE>
       <SCRIPT LANGUAGE="JavaScript">
        <!--
           function showLayer() {
              window.document.layers[0].visibility = "show";
           }
           function hideLayer() {
              window.document.layers[0].visibility = "hide";
           }
           function docu1() {
              window.document.layers[0].src = "docu1.htm";
           }
           function docu2() {
              window.document.layers[0].src = "docu2.htm";
           }
           function docu3() {
              window.document.layers[0].src = "docu3.htm";
           }
        // 자바스크립트 끝 -->
        </SCRIPT>
    </HEAD>
    <BODY>
        <CENTER>
        <H1>레이어 이동</H1>
        <FORM NAME="myform">
            <INPUT TYPE="button" VALUE="보이기" onClick="showLayer()">
            <INPUT TYPE="button" VALUE="감추기" onClick="hideLayer()">
            <INPUT TYPE="button" VALUE="문서 1" onClick="docu1()">
            <INPUT TYPE="button" VALUE="문서 2" onClick="docu2()">
            <INPUT TYPE="button" VALUE="문서 3" onClick="docu3()">
        </FORM>
        </CENTER>
        <LAYER ID=layer1 TOP=100 LEFT=280 WIDTH=250 HEIGHT=200
                 SRC="docu1.htm" BGCOLOR="WHITE">
        </LAYER>
    </BODY>
</HTML>

<예>

<HTML>
   <BODY>
   <H3>넷스케이프사에서는 커뮤니케이터 4.0부터 HTML 문서 상에서 특정 영역을
   지정하여 내용을 보여줄 수 있는 레이어(Layer)라는 기능을 제공하기 시작하였다.</H3>
   </BODY>
</HTML>

<예>

<HTML>
   <BODY>
   <H3>이 레이어는 여러개가 서로 겹쳐서 나타날 수 있으며, 자바스크립트를 이용하면
   위치도 자유롭게 바꿀 수가 있다. </H3>
   </BODY>
</HTML>

<예>

<HTML>
   <BODY>
   <H3>또한 자바스크립트를 이용하여 레이어를 감출 수도 있으며, 겹쳐진 레이어들이
   투명하게 나타나도록 만들 수도 있다. </H3>
   </BODY>
</HTML>

결과보기

'DEV > html/css/js/img' 카테고리의 다른 글

Layers 객체  (0) 2008.05.28
[javascript] javacript 객체 모델  (0) 2008.05.28
css관련 참고 사이트  (0) 2008.03.11
  Comments,     Trackbacks
[javascript] javacript 객체 모델
336x280(권장), 300x250(권장), 250x250, 200x200 크기의 광고 코드만 넣을 수 있습니다.
사용자 삽입 이미지

'DEV > html/css/js/img' 카테고리의 다른 글

Layers 객체  (0) 2008.05.28
Layer 객체의 특성  (0) 2008.05.28
css관련 참고 사이트  (0) 2008.03.11
  Comments,     Trackbacks