2010년 3월 17일 수요일

[자바스크립트] 자바스크립트 이벤트 처리

⑴ 이벤트

    ① 이벤트의 역할

        사용자가 무슨 일을 했는지, 또는 페이지가 언제 로드 되었는지와 같은 정보를 제공해주는 것


    ② 이벤트와 객체의 관련성

        동작 중인 브라우저에 구현된 DOM에 가장 큰 영향을 받는 것으로 객체와 가장 밀접한 관계를 가지고 있다.


    ③ 이벤트의 기본 처리 방식

        (X)HTML 객체 태그나 자바스크립트 코드 블록 또는 파일 내에서 이루어진다.


    ④ w3c는 이벤트 개념

        ㉠ 사용자 인터페이스 (마우스 , 키보드)

        ㉡ 논리(처리 결과)

        ㉢ 변경(문서를 수정하는 일)


    ⑤ 이벤트 관련 객체
    

사용자 삽입 이미지


⑵ DOM  레벨 0의 이벤트 핸들러

    - 최초의 이벤트 시스템은 Events 또는 DOM 레벨 0라고 불린다.

    - DOM 레벨 0 이벤트

       현재의 모질라 / 파이어폭스에 해당하는 구 넷스케이프와 IE로 나눈다.

    - 객체 이벤트에 이벤트 핸들러를 통해서 새로운 기능이나 개선된 기능을 추가하는 방식      

    - 이벤트 핸들러

       객체 프로퍼티 중 하나로 구문은 onevent

    - 이벤트 핸들러의 이름은 'on'으로 시작하며 그 뒤에 이벤트명(load,  click 등)이 붙는다.           

    - 객체에 직접 이벤트 핸들러를 추가하는 방법              

       <body onload = 'var i = 23 ; i  *=3 ; alert(i);'> // 이벤트 핸들러 이름을 객체 태그의 속으로 넣는다.

                                                                       // 해당 이벤트가 발생했을 때 실행 할 코드를 지정해주는 것


    - 인라인 모델(inline model) 또는 인라인 등록 모델(inline registration model)

       이벤트를 HTML 엘리먼트의 속성으로 추가하는 방식 , 여러개의 함수를 호출하는 경우는 ;(세미콜론)으로 구분한다.


      <body onload = 'javascript:함수1();함수2()'>        

  

    - 이벤트 핸들러를 객체의 프로퍼티로 취급하여 직접 접근도 가능하다.

       window.onload = 함수객체   // 제거하기 위해서는 null

   

    - 기본 모델(traditional model) 또는 기본 등록  모델(traditional registration model)

       이벤트 핸들러를 객체의 프로퍼티로 취급하여 함수를 배정하는 방식  

       

        function Msg_Event(){
            var strMsg = 'Thank you';
            alert(strMsg);
        }
     
        window.onload = Msg_Event();          
   
       <body onload = 'javascript:Msg_Event();'>


   

    ① 이벤트 객체


       -  IE나 파이어 폭스 공통으로 사용되는 Event 프로퍼티


           ① altKey

               이벤트가 발생한 시점에서의  Alt 키의 눌림 여부


           ② clientX

               클라이언트의 X좌표


           ③ clientY

               클라이언트의 Y좌표


           ④ ctrlKey

               이벤트가 발생한 시점에서 ctrl 키의 눌림 여부


           ⑤ keyCode

               눌린 키의 코드값(숫자)


           ⑥ screenX

               이벤트가 발생한 스크린 X 좌표


           ⑦ screenY

               이벤트가 발생한 스크린 Y 좌표


           ⑧ shiftKey

               이벤트가 발생한 시점에서 shift 키의 눌림 여부


           ⑨ type

               이벤트 종류


           ⑩ fromElement (IE) , relatedTarget(파이어 폭스, 넷스케이프)

               onMouseOver나 onMouseOut 이벤트를 사용할 경우의 마우스 객체                


           ⑪ toElement(IE) , currentTarget(파이어 폭스, 넷스케이프)

               마우스 포인터 위치해 있는 객체 설정 혹은 현재 접근하는 엘리먼트               


           ⑫ scrElement(IE) , target(파이어 폭스, 넷스케이프)

               이벤트를 발생한 객체 설정 혹은 이벤트를 직접 받는 객체


           ⑬ 이벤트 프로퍼티 기타 목록

                  

                 ㉠ bubbles

                     이벤트가 DOM을 통해서 버블링 되었는지의 여부


                 ㉡ button

                     마우스 버튼의 상태(눌림 여부)


                 ㉢ cancelBubble

                     버블링의 취소 여부


                 ㉣ cancelable

                     이벤트의 취소 여부


                 ㉤ detail

                     이벤트의 세부 사항


                 ㉥ eventPhase

                     이벤트의 진행 단계


                 ㉦ isChar

                     이벤트가 문자를 발생시키는지의 여부


                 ㉧ layerX , layerY

                      position 프로퍼티가 absolute인 경우,

                      현재 레이어에서의 상대 x(y) 좌표  


                 ㉨ metaKey

                    메타 키 (ctrl/alt/shift 키) 의 상태 (눌림 여부)                      


                 ㉩ pageY , pageX

                     페이지 내의 상대 x(y) 좌표

                   

                 ㉪ timeStamp

                     이벤트가 발생한 시각


                 ㉫ view

                     이벤트가 생성된 AbstractView ( 무슨 말이지 모르겠네요)


                 ㉬ which

                     눌린 키의 유니코드 값


         - IE 에서는 Event가 window 객체의 프로퍼티로 이벤트가 발생하면 그에 따른 데이터가 프로퍼티에  담긴다.

       

             function mouseDown(){
                 var locStr = 'x = ' + window.event.screenX + ' y = ' + window.event.screenY;
                 alert(locStr);
            }
     
            document.onmousedown = mouseDown;         


         -  파이어 폭스는 nsEvent 이벤트 객체로 이벤트가 발생하여 그에 따른 데이터가 프로퍼티에 담긴다.

     

             function mouseDown(nsEvent){
                  var locStr = 'x = ' + nsEvent.screenX + ' y = ' + nsEvent.screenY;
                  alert(locStr);
             }
     
             document.onmousedown = mouseDown;


        - 크로스 브라우저 코드

           여러 브라우저에서 호환되는 코드 , 즉 DOM 레벨 0 이벤트가 IE와 파이어 폭스(넷스케이프)로 나누어져 있으므로

           자바스크립트 코드를 작성할 코드 호환되도록 작성하는 코드


           function mouseDown(nsEvent){
                var theEvent = nsEvent ? nsEvent : window.event;
                var locStr = 'x = ' + theEvent .screenX + ' y = ' + theEvent .screenY;
                alert(locStr);
           }
     
           document.onmousedown = mouseDown;        

         

    ② 이벤트 버블링(IE) , 이벤트 캡처링(넷스케이프 , 파이어폭스)

        하나의 이벤트가 하나의 엘리먼트에만 영향을 미치는 것이 아니라 여러 개의 엘리먼트에 영향을 미칠 경우를 말함.

         

         <script type = 'text/javascript'>
              function mouseDown(nsEvent){
                  var theEvent = nsEvent ? nsEvent : window.event;
                  var locString = 'X = ' + theEvent.screenX + ' Y = ' + theEvent.screenY;
                  var theSrc = theEvent.target ? theEvent.target : theEvent.srcElement;
     
                  alert(locString + ' ' + theSrc);

                 

                  /*

                       버블 이벤트 종료 시키기 아래 함수를 호출하기 위해 이벤트  버블을 하지 않는다.

                  */

                  // document.onmousedown = stopEvent;              

             }
         
             document.onmousedown = function(evnt){
                  var theEvnt = evnt ? evnt : window.event;
                  alert('*' + theEvnt.type);
             }
     
             window.onload = setupEvents;  
     
             function setupEvents(){
                 document.getElementById('1st').onmousedown = mouseDown;
                 document.getElementById('2st').onmousedown = function () {
                        alert('Second event handler');
                 }
             }


             /* 버블 함수를 종료시키기 위한 함수 */

             /*

             function stopEvent(evnt){
                if(evnt.stopPropagation){
                    evnt.stopPropagation();   // 넷스케이프의 경우
                }else{
                   evnt.cancelBubble = true; // IE의 경우
                }
             }          

             */
         </script>

         ****************************************************************************

          <div id = '1st' style='padding : 20px ; background-color : #feb ; width : 150px'>
                <div id = '2st' style='background-color : #f00; width : 100px ; height : 100px'>
               </div>
          </div>

         *****************************************************************************


    ③ 이벤트 핸들러와 this

         이벤트  핸들러 함수나 객체 메소드 내에서 엘리먼트의 프로퍼티에 접근하기 위해 this를 사용한다.

        

         window.onload = setupObjects;
 
         function setupObjects() {
              document.personData.firstName.onblur = testValue;
         }
 
         function testValue() {
             alert('Hi ' + this.value); // 폼 필드값  
         }        

         *****************************************************************************

         <form name = 'personData'>
               First Name : <input type='text' name = 'firstName' /> <br /> <br />
               Second Name : <input type = 'text' name = 'secondName' />
         </form>

         *****************************************************************************

        

         ※ DOM 레벨 2  이벤트 모델과 이전 버전과의 차이점

             - 특정 이벤트 핸들러 프로퍼티에 의존적이지 않음.

             - 하나의 이벤트나 객체 다수의 이벤트 핸들러를 등록이 가능함.

             - 이벤트 핸들러의 프로퍼티 외에 각 객체는 세가지 메소드를 가지고 있음.


                ㉠ addEventListener

                    이벤트 리스너를 추가하기 위한 메소드

                    예)

                    object.addEventListener('이벤트명' , '이벤트 함수', true|false);

                   

                     - 이벤트명  : click 이나 onload 등등...

                     - 이벤트 함수명 : 개발자가 작성한 함수명

                     - true | false { 케스케이드다운(cascade-down)과 버블업(bubble-up)의 두 가지 방식)}

                               true : 케스케이드 다운 방식

                               false : 버블 방식


                ㉡ removeListener  

                    기존 리스너를 제거하기 위한 메소드  


                ㉢ dispatchListener  

                    이벤트를 신속히 처리하기 위한 메소드

                

                 [넷스케이프 , 파이어폭스 전용] , IE에서는 에러  

                 function writeX(evnt){
                      alert('Capturing : ' + evnt.target + ' ' + evnt.currentTarget);
                      return true;
                 }
 
                  function writeY(evnt){
                      alert('Bubbing : ' + evnt.target + ' ' + evnt.currentTarget);
                      return true;
                 }
 
                 window.onload = setup;
 
                 function setup(evnt){
                      // 이벤트 캡처
                       document.addEventListener('click', writeX, true);
                       document.forms[0].addEventListener('click',writeX,true);
                       document.froms[0].elements[0].addEventListener('click',writeX,true);
   
                      // 이벤트 버블업 - 실행되지 않음 .....        
                     document.addEventListener('click',writeY,false);

                     document.forms[0].addEventListener('click',writeY,false);
                     document.forms[0].elements[0].addEventListener('click',writeY,false);
                 }               


                 ※ AddEventListener를 IE 7에서는 지원하지 않음


                 ***********************************************************************************

                  AddEventListener를 사용하지 못할 경우 아래 와 같은 방법을 사용한다.

                  크로스 브라우저 코드

                 ***********************************************************************************

                 

                  function clickMe(evnt){
                       evnt = evnt ? evnt : window.event;
                       alert(evnt.target + ' ' +  evnt.type);
                       alert('Can be canceled? ' + evnt.cancelable);
                       alert('Bubbling? ' + evnt.bubbles);
                       alert(evnt.timeStamp);
                 }
  
                 window.onload = setup;


                 /*
                 윈도우 unload 이벤트를 캡처해서 detachEvent로 설정된 이벤트들을 제거해야 한다.
                 윈도우의 메모리 낭비를 막기위해 사용된다. 
                 */


                 window.onunload = cleanup;
  
                 function setup(evnt){
                        var evtObject = document.getElementById('clickme');
    
                        // 객체 모델 테스트
                       if(evtObject.addEventListener){
                              document.addEventListener('click',clickMe,false);
                        }else if(evtObject.attachEvent){
                              evtObject.attachEvent('onclick',clickMe);
                       }else if(evtObject.onclick){
                              evtObject.onclick = clickMe;
                       }
                }
  
                // 이벤트 핸들러 제거 (IE이 경우 적용)
                function cleanup(){
                      var evtObject = document.getElementById('clickme');
                       if(evtObject.detachEvent){
                             evtBoject.detachEvent('onclick', clickMe);
                       }
                }                 

              

    ④ 이벤트 생성

        특정 시점에 이벤트를 발생시키는 경우에 사용된다. (대표적으로 focus() 메소드를 사용하는 경우 사용한다.)

       
         window.onload = setObjects;
 
         function setObjects() {
              document.personData.lastName.focus();
         }

        <form name = 'personData'>
              First Name : <input type = 'text' name  = 'firstName' /><br /> <br />
              Last  Name : <input type = 'text' name  = 'lastName' />
        </form>


2010년 3월 15일 월요일

[자바스크립트] PHP의 explode() 함수와 같은 기능을 하는 split() 함수 문자열 분할

<script>

var str = "a-b-c";

var arrString = str.split("-");

alert(arrString[0]+arrString[1]+arrString[2]);

</script>


결과화면
a-b-c

간단한 PHP+AJAX 예제

모든 파일은 utf-8로 작성되었습니다.

index.php

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<head>
    <title> new document </title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script type="text/javascript" src="example.js"></script>
</head>
<body>
<div id="head"> hello, guest!</div>
<input type="text" id="name" value="" onkeyup="change()"/>
</body>
</html>



example.js
//XmlHttpRequest 객체 생성
if (typeof ActiveXObject != 'undefined')
{
    XMLHttpRequest = function ()
    {
        return new ActiveXObject(navigator.userAgent.indexOf('MSIE 5') >-1 ? 'Microsoft.XMLHTTP' : 'Msxml2.XMLHTTP');
    };
}
var xhr = new XMLHttpRequest();

// 객체 생성하고 함수 생성
function change()
{
    var name = document.getElementById("name").value;
    var url = "exam.php?name="+name;
    xhr.open("Get",url,true);
    xhr.onreadystatechange = callback;
    xhr.send();
}
function callback()
{
    if (xhr.readyState == 4)
    {
        if (xhr.status == 200)
        {
            var txt = xhr.responseText;
            document.getElementById('head').innerHTML = txt;
        }
    }
}


exam.php :
<?php
header("Content-Type: text/html; charset=UTF-8");
$name = $_REQUEST["name"];
echo "welcome ".$name."!!";
?>


[이미지 출처 : http://compstat.chonbuk.ac.kr/JavaScript/]
참고사이트 http://compstat.chonbuk.ac.kr/JavaScript/

[AJAX] Ajax 데이터로드하기 서버로 데이터 전달 php

Ajax 데이터로드하기 서버로 데이터 전달 php

앞서본 포스팅한것들을 정적인 파일들이였다. html,스크립트 파일 단순한 텍스트(text)등으로 이정도는 ajax방법이 아니고도 가능하다.이번엔 동적인 데이타 전송을 살펴보자

동적 데이타파일

ajax를 이용한것은 동적데이타의 경우 브라우저에서 받은 입력값에따라 비동기적으로 되돌려주게 되어있다. 이런 동적파일은 php,java,asp가 있다.여기서 가장 편히 쓰이고 쉽게 할수있는 php로 예를들어보겠다.

php 데이타요청

먼저데이타 파일을 보자 내용은 하나가아닌 여러가지로 분류되어 있다

01.$entries = array(
02.   'HTML'=> array(
03.   'definition' => 'HyperText Markup Language',
04.   'explantion' => '어쩌고 저쩌고',
05.   ),
06.   'XML'=> array(
07.   'definition' => 'extensible markup language',
08.   'explantion' => '어쩌고 저쩌고',
09.   ),
10.  );

위에서 세가지를 설명해주고 있다.여기서 php의 문법에 대해선 자세히 알아보지 않겠지만 위의 정도이면 대충 알아봇것이라본다. $는 변수지정 그리고 array는 C언어에서 흔히 배운 행렬에대한 정의방식이다

이번엔 메인페이지에 html을 만들어보자.백과사전 처럼 리스트에서 하나를 클릭할경우 위의 데이타중 소속된것을 불러오도록 할 것이다.

1.<UL>
2. <LI><A href="#">HTML</A
3. <LI><A href="#">XML</A>
4.</LI></UL>
5.<DIV id=content> <P>로드된 데이터가 들어올자리</P> </DIV>

앞선데이타 파일과 그리고 메인페이지는 만들어졌다. 그럼 데이타 파일을 html형식으로 만들어줄 스크립트와 불러줄 스크립트 소스가있으면 되겠다.

클릭시 다음과 같이 나오도록 생각해보자

1.<H3>HTML</H3>
2.<H4>HyperText Markup Language</H4>
3.<P>어쩌고 저쩌고</P>

그럼 이걸 소스로 짜준다면은

01.if (isset($entries[$_REQUEST['words']])) {
02.  //변수 entries가 있는지 확인한다
03.  $entry = $entries[$_REQUEST['words']];
04.  //entry란 변수로 entries에 나열된것들을 요청
05.  //인자로 words를 사용했다.
06.  $html .= '<H3>';
07.  $html .= $_REQUEST['words'];
08.  $html .= '</H3>';
09.  $html .= '<H4>';
10.  $html .= $entry['definition'];
11.  $html .= '</H4>';
12.  $html .= '<P>';
13.  $html .= $entry['explantion'];
14.  $html .= '</P>
15.<P>';  
16.  print($html);//출력
17.}
18.</P>

메인페이지에 가서 요청할 하이퍼링크를 다시보자

1.<UL>
2. <LI><A href="ajax_part/server.php?words=HTML">HTML</A>
3. <LI><A href="ajax_part/server.php?words=XML">XML</A>
4.</LI></UL>

li엘리먼트의 각주소는 php파일의 데이타의 일부를 호출하고있다. 첫번쨰는 html,두번째는 json..

마지막으로 볼것을 이들을 작동시킬 스크립트이다.

01.$(document).ready(function() {
02.  $('a').click(function() {
03. $.get('./ajax_part/server.php',
04.  {'words': $(this).text()}, function(data) {
05. //get함수로 php파일을 부른다, 인자는words 
06.      $('#content').html(data);
07.      //콘텐트에 첨가
08.    });
09.    return false; });});

위의 방법은 get함수를 이용한것이다 post방식 역시 별반다를반 없다.

1.$.post('./ajax_part/server.php',
2. {'words': $(this).text()}, function(data) {

마지막으로 볼것은 더간단한 .load사용하는방법이다

1.$('#content').load('e.php', {'term': $(this).text()});

요약

php에 익숙하지않은 사람은 소스가 이해가지않은수있다. 하지만 정적파일을 로드했을때와 모습은 별차이없었다.이제까지 알아본걸 되돌아보면

  • 메인페이지작성
  • 메인페이지에 데이타가 들어올 자리 구성
  • 데이터 마련(html,JSON, php...등
  • 데이타를 html형식으로 바꿔줄 스크립트작성
  • 작동시킬 스크립트작성

마지막으로 덧붙임, 이예제는 php형식의 예제이다. 동적이란것은 서버가 있을때 주고 받음으로서 작동되는 것이다. 따라서 APM으로 로컬로 개인 pc에 서버가 구축되어있지않거나, 별도 마련된 서버에 업로드시켜 확인하지않고 그냥 브라우저로는 당연히 작동되지않는다.맣은사람들이 왜안되냐고 묻곤하는데 동적파일 php임을 생각하자

마지막을 완성된 예제를 직접보자면 아래를 클릭

http://sianasiatiger.cafe24.com/study/A_ajax_server.html

출처 : http://siana.tistory.com/108

2010년 3월 12일 금요일

[HTML/JAVASCRIPT] 레이어 팝업

<?
if('211.174.235' == substr($_SERVER['REMOTE_ADDR'],0,11))  { ?>

<HTML>
<HEAD>
<STYLE type=text/css>
BODY {FONT-SIZE: 9pt; BACKGROUND: #ffffff; COLOR: #787878; FONT-FAMILY: 굴림,tahoma}
</STYLE>
</HEAD>

<BODY>
<script language=javascript>

        var IE5=(document.getElementById && document.all)? true : false;
        var W3C=(document.getElementById)? true: false;
        var currIDb=null, currIDs=null, xoff=0, yoff=0; zctr=0; totz=0;

        function trackmouse(evt){
                if((currIDb!=null) && (currIDs!=null)){
                        var x=(IE5)? event.clientX+document.body.scrollLeft : evt.pageX;
                        var y=(IE5)? event.clientY+document.body.scrollTop : evt.pageY;
                                currIDb.style.left=x+xoff+'px';
                                currIDs.style.left=x+xoff+10+'px';
                                currIDb.style.top=y+yoff+'px';
                                currIDs.style.top=y+yoff+10+'px';
                        return false;
                }
        }

        function stopdrag(){
                currIDb=null;
                currIDs=null;
                NS6bugfix();
        }

        function grab_id(evt){
                xoff=parseInt(this.IDb.style.left)-((IE5)? event.clientX+document.body.scrollLeft : evt.pageX);
                yoff=parseInt(this.IDb.style.top)-((IE5)? event.clientY+document.body.scrollTop : evt.pageY);
                currIDb=this.IDb;
                currIDs=this.IDs;
        }

        function NS6bugfix(){
                if(!IE5){
                        self.resizeBy(0,1);
                        self.resizeBy(0,-1);
                }
        }

        function incrzindex(){
                zctr=zctr+2;
                this.subb.style.zIndex=zctr;
                this.subs.style.zIndex=zctr-1;
        }

        function createPopup(id, title, width, height, x , y , isdraggable, boxcolor, barcolor, shadowcolor, text, textcolor, textptsize, textfamily ){
                if(W3C){
                        zctr+=2;
                        totz=zctr;
                        var txt='';
                                txt+='<div id="'+id+'_s" style="position:absolute; left:'+(x+7)+'px; top:'+(y+7)+'px; width:'+width+'px; height:'+height+'px; background-color:'+shadowcolor+'; filter:alpha(opacity=50); visibility:visible"> </div>';
                                txt+='<div id="'+id+'_b" style="border:outset '+barcolor+' 2px; position:absolute; left:'+x+'px; top:'+y+'px; width:'+width+'px; overflow:hidden; height:'+height+'px; background-color:'+boxcolor+'; visibility:visible">';
                                txt+='<div style="width:'+width+'px; height:16px; background-color:'+barcolor+'; padding:0px; border:1px"><table cellpadding="0" cellspacing="0" border="0" width="'+(IE5? width-4 : width)+'"><tr><td width="'+(width-20)+'"><div id="'+id+'_h" style="width:'+(width-20)+'px; height:14px; font: bold 12px Tahoma; cursor:move; color:'+textcolor+'"> '+title+'</div></td><td align="right"><a onmousedown="document.getElementById(\''+id+'_s\').style.display=\'none\'; document.getElementById(\''+id+'_b\').style.display=\'none\';return false"><img src="http://www.blueb.co.kr/SRC/javascript/image/close.gif" border="0" height="15" width="15"></a></td></tr></table></div>';
                                txt+='<div id="'+id+'_ov" width:'+width+'px; style="margin:5px; color:'+textcolor+'; font:'+textptsize+'pt '+textfamily+';">'+text+'</div></div>';
                                document.write(txt);
                                this.IDh=document.getElementById(id+'_h');
                                this.IDh.IDb=document.getElementById(id+'_b');
                                this.IDh.IDs=document.getElementById(id+'_s');
                                this.IDh.IDb.subs=this.IDh.IDs;
                                this.IDh.IDb.subb=this.IDh.IDb;
                                this.IDh.IDb.IDov=document.getElementById(id+'_ov');
                                if(IE5){
                                        this.IDh.IDb.IDov.style.width=width-6;
                                        this.IDh.IDb.IDov.style.height=height-22;
                                        this.IDh.IDb.IDov.style.scrollbarBaseColor=boxcolor;
                                        this.IDh.IDb.IDov.style.overflow="auto";
                                }
                                else{
                                        this.IDh.IDs.style.MozOpacity=.5;
                                }
                                this.IDh.IDb.onmousedown=incrzindex;
                                if(isdraggable){
                                        this.IDh.onmousedown=grab_id;
                                        this.IDh.onmouseup=stopdrag;
                                }
                        }
                }

        if(W3C)document.onmousemove=trackmouse;
        if(!IE5 && W3C)window.onload=NS6bugfix;       
       
</script>

<script language=javascript>

        createPopup( 'popup1', 'popup 1' ,  300, 120, 50, 50, true, '#ebebeb' , '#787878' , '#cccccc' ,  '<font color="#787878">You can drag and drop these boxes by using the titlebar as the handle if dragging has been enabled.<br>Dragging has been disabled for this box.</font>' , '#ffffff' , 8 , 'Tahoma');

<!-- 이부분은 팝업창을 두개 이상할때를 보여주기 위한 부분입니다 -->
        createPopup( 'popup2', 'popup 2' ,  220, 130, 50, 250, true, '#c0c0c0' , '#555555' , '#c0c0c0' ,  'The HTML in these boxes will wrap if they need to. In NS6, any HTML past the bottom will get chopped off (because of some weird stuff NS6 does while dragging scrollable DIVs), while IE will display a scrollbar to scroll down.<br><br>' , '#f3f3f3' , 10 , 'Arial');


<!-- 이부분은 팝업창을 두개 이상할때를 보여주기 위한 부분입니다 -->
        createPopup( 'popup3', 'popup 3' ,  320, 130, 250, 80, true, '#c0c0c0' , '#555555' , '#c0c0c0' ,  '이곳에 팝업내용을 삽입하세요.        ' , '#f3f3f3' , 10 , 'Arial');

</script>
</P>

</BODY>
</HTML>


<?
}
?>