자바스크립트 이벤트 .....................................................


아주 중요한 이벤트!!!
이벤트란 모든 행위를 말하는 것으로 프로그램에서는 미리 사용자의 행위를 예측하여 미리 사용할 수 있도록 이벤트를 많이 준비해 놓고 있다.


예를 들어 사용자가 마우스를 클릭할 것이다.... 이건 click 이벤트로 준비!
이게 없다면 우리는 사용자가 마우스를 클릭했는지 부터 알아내야 다음 일을 할 수 있을 것이다. 고맙게도 click이 일어났다는 걸 자동으로 알 수 있으니 얼마나 고마운 일인가...


(Click, MouseOver, MouseOut, Submit...)

이벤트 핸들러란 ?

이러한 이벤트와 우리가 준비한 프로그램을 연결해 주는 구실을 한다

(onClick,onMouseOver,onMouseOut, onSubmit...)

* 그래서 우리가 할일은 이벤트가 일어났을 때 할 일을 준비하고
이벤트 핸들러에게 그 일을 하도록 연결해 두면 되는 것이다~~~

* 익스플로러와 네비게이트 사이에 약간의 차이가 있어 익스플로러 기준으로 !!!



■ 이벤트의 종류와 의미 (이벤트핸들러는 이벤트에 on을 붙여 준다)


blur
포커스를 다른곳으로 옮길 경우
click 링크나 폼의 구성원을 클릭할 때
change 선택값을 바꿀 경우
focus 포커스가 위치할 경우
mouseover 마우스가 올라올 경우
mouseout 마우스가 떠날 경우
mousedown 마우스를 누를 경우
mousemove 마우스를 움직일 경우
mouseup 마우스를 눌렀다 놓을 경우
select 입력양식의 하나가 선택될 때
submit 폼을 전송하는 경우
load 페이지,윈도우가 브라우져로 읽혀질 때
unload 현재의 브라우저,윈도우를 떠날 때
error 문서나 이미지에서 에러를 만났을 때
reset 리셋 버튼이 눌렸을 때
dbclick 더블클릭시
dragdrop 마우스 누르고 움직일 경우
keydown 키 입력시
keypress 키 누를 때
keyup 키를 누르고 놓았을 때
move 윈도우나 프레임을 움직일 때
resize 윈도우나 프레임 사이즈를 움직일 때



■ 메서드


blur()
입력 포커스를 다른 곳으로 이동시킴
click() 마우스 버튼이 눌러진 것처럼 해줌
focus() 입력 포커스를 준 것처럼 해줌
submit() 폼의 submit 버튼을 누른 것처럼 해줌
select() 메소드 폼의 특정 입력 필드를 선택함



■ 속성


event.keyCode 누른 키의 ASCII 정수 값
event.x
문서 기준 누른 좌표의 left
event.y 문서 기준 누른 좌표의 top
event.clientX 문서 기준 누른 좌표의 left
event.clientY 문서 기준 누른 좌표의 top
event.screenX 콘테이너 기준 누른 좌표의 left
event.screenY 콘테이너 기준 누른 좌표의 top



■ 브라우저 객체별 이벤트 핸들러


선택 목록(SELECT)
onBlur, onChange, onFocus
문자 필드(TEXT) onBlur, onChange, onFocus, onSelect
문자 영역(TEXTAREA) onBlur, onChange, onFocus, onSelect
버튼(BUTTON) onClick
체크박스(CHECKBOX) onClick
라디오 버튼(RADID) onClick
링크 onClick, onMouseover
RESET 버튼(RESET) onClick
SUBMIT 버튼(BUTTON) onClick
DOCUMENT onLoad, onUnload
WINDOW onLoad, onUnload
폼(FORM) onSubmit
<script language="javascript">
function TEST(){
alert("페이지 로딩시 자동 호출!")
}
</script>

<body onLoad="TEST()">


<script language="javascript">
function TEST(){
alert("Click 했군요!")
}
</script>

<font onClick="TEST()"> Click! </ font>


<script language="javascript">
function TEST(){
alert("마우스를 올리지 마세욤!")
}
</script>

<font onMouseOver="TEST()"> MouseOver</ font>


<script language="javascript">
function TEST(){
alert("현재 좌표는 " + event.x + "/" + event.y)
}
</script>

<font onClick="TEST()"> Click 좌표 </ font>

* 브라우저 객체(window,document,form,image,layer,...)와 함께 사용되기 때문에 여기서는 간단하게 종류와 의미만 살펴보고!!!

'Web(웹) Study > Java Script' 카테고리의 다른 글

시간 간격으로 Response  (0) 2007.12.21
유효성 검사 툴팁 (innerHTML)  (0) 2007.12.21
작성완료시에만 전송시키기  (0) 2007.12.19
IFrame 크기 자동 조절 스크립트  (0) 2007.12.19
영타를 한글로 ^^  (0) 2007.12.19

<HTML>
<HEAD>
<TITLE>작성완료시에만 전송시키기</TITLE>
<script language="javascript">
 function check()
 {
  var f = document.frm
  com = new Array(f.title, f.writer, f.pass, f.email, f.content);
  msg = new Array("제목을", "작성자를", "비밀번호를", "이메일을", "내용을");
  for(i=0;i<com.length;i++)
  {
   if (com[i].value == "")
   {
    alert(msg[i] + " 작성해주세요");
    com[i].focus();
    return false;
   }
  }
  f.submit();
 }

</script>
</HEAD>
<BODY>
<center>
<table border=1>
<form method="post" name="frm" action="board.asp" onreset="this.title.focus()">
 <tr>
  <td>제목</td>
  <td><input type="text" name="title"></td>
 </tr>
 <tr>
  <td>작성자</td>
  <td><input type="text" name="writer"></td>
 </tr>
 <tr>
  <td>비밀번호</td>
  <td><input type="password" name="pass"></td>
 </tr>
 <tr>
  <td>이메일</td>
  <td><input type="text" name="email"></td>
 </tr>
 <tr>
  <td>내용</td>
  <td><textarea cols=50 rows=10 name="content"></textarea></td>
 </tr>
 <tr>
  <td colspan=2 align="center"><input type="button" value="전 송" onClick="check()">
  <input type="reset" value="다시작성"></td>
 </tr>
</form>
</table>
</center>
</BODY>
</HTML>

'Web(웹) Study > Java Script' 카테고리의 다른 글

유효성 검사 툴팁 (innerHTML)  (0) 2007.12.21
자바스크립트 이벤트  (0) 2007.12.19
IFrame 크기 자동 조절 스크립트  (0) 2007.12.19
영타를 한글로 ^^  (0) 2007.12.19
입력 문자 한글 체크  (0) 2007.12.19

iframe이 로딩될때 현재프레임의 스크롤바값을 가져와서 창크기로 변환한다.

(테이블안에 iframe삽입시 스크롤바 생성안되게 할때 유용)

ex)

<script language='javascript'>

function resizeIframe(fr) {
fr.setExpression('height',inFrame//프레임ID.document.body.scrollHeight);
fr.setExpression('width',inFrame.document.body.scrollWidth);
}

</script>

..

..

<body>

 <iframe id=inFrame//프레임ID설정 src=memberRegistPersonal.html name=main_in marginwidth='0' marginheight='0' topmargin='0' scrolling='no' frameborder='0'  ALLOWTRANSPARENCY="true" onload='resizeIframe(this);' >
 </iframe> 

</body>

</html>

<HTML>
<HEAD>
<TITLE>영어 -> 한글</TITLE>
</HEAD>
<SCRIPT>
/**
  * 주기적 함수 실행
  * 영어를 한글로 바꿔주는 englishToKorean() 함수를
  * 100/1 초 간격으로 재실행
  */
function intervalExcute()
{
        setInterval( "englishToKorean()", 10 );
}

/**
  * 영어를 한글로...
  */
function englishToKorean()
{
        form.korean.value = "";

        // 입력한 영문 텍스트 추출
        var text = form.english.value;

        // 변수 초기화
        var initialCode = 0;
        var medialCode  = 0;
        var finalCode   = 0;

        // 입력한 문자열 길이 추출
        var textLength = text.length;

        for( var idx = 0; idx < textLength; idx++ )
        {

                // 초성 코드 추출
                initialCode = getCode( 'initial', text.substring( idx, idx + 1 ) );
                idx++; // 다음 문자로.

                /**
                  * 현재 문자와 다음 문자를 합한 문자열의 중성 코드 추출
                  * ㅞ ( np ) 또는 ㄼ ( fq ) 같은 두개의 문자가 들어가는 것을 체크하기 위함
                  */
                tempMedialCode = getCode( 'medial', text.substring( idx, idx + 2 ) );

                // 코드 값이 있을 경우
                if( tempMedialCode != -1 )
                {
                        // 코드 값을 저장하고 인덱스가 다다음 문자열을 가르키게 한다.
                        medialCode = tempMedialCode;
                        idx += 2;
                }
                else // 코드값이 없을 경우 하나의 문자에 대한 중성 코드 추출
                {
                        medialCode = getCode( 'medial', text.substring( idx, idx + 1 ) );
                        idx++;
                }

                // 현재 문자와 다음 문자를 합한 문자열의 종성 코드 추출
                tempFinalCode = getCode( 'final', text.substring( idx, idx + 2 ) );

                // 코드 값이 있을 경우
                if( tempFinalCode != -1 )
                {
                        // 코드 값을 저장한다.
                        finalCode = tempFinalCode;

                        // 그 다음의 중성 문자에 대한 코드를 추출한다.
                        tempMedialCode = getCode( 'medial', text.substring( idx + 2, idx + 3 ) );

                        // 코드 값이 있을 경우
                        if( tempMedialCode != -1 )
                        {
                                // 종성 코드 값을 저장한다.
                                finalCode = getCode( 'final', text.substring( idx, idx + 1 ) );
                        }
                        else
                        {
                                idx++;
                        }
                }
                else // 코드 값이 없을 경우
                {
                        // 그 다음의 중성 문자에 대한 코드 추출
                        tempMedialCode = getCode( 'medial', text.substring( idx + 1, idx + 2 ) );

                        // 그 다음에 중성 문자가 존재할 경우
                        if( tempMedialCode != -1 )
                        {
                                // 종성 문자는 없음.
                                finalCode = 0;
                                idx--;
                        }
                        else
                        {
                                // 종성 문자 추출
                                finalCode = getCode( 'final', text.substring( idx, idx + 1 ) );

                                if( finalCode == -1 ) finalCode = 0;
                        }
                }

                // 추출한 초성 문자 코드, 중성 문자 코드, 종성 문자 코드를 합한 후 변환하여 출력
                result = String.fromCharCode( 0xAC00 + initialCode + medialCode + finalCode );
                form.korean.value += result;
        }
}

/**
  * 해당 문자에 따른 코드를 추출한다.
  * @param type 초성 : chosung, 중성 : jungsung, 종성 : jongsung 구분
  * @param char 해당 문자
  */
function getCode( type, char )
{
        // 초성
        var initial = "rRseEfaqQtTdwWczxvg";
       
        // 중성
        var medial = new Array( 'k', 'o', 'i', 'O', 'j', 'p', 'u', 'P', 'h', 'hk', 'ho', 'hl', 'y', 'n', 'nj', 'np', 'nl', 'b', 'm', 'ml', 'l' );

        // 종성
        var final = new Array( 'r', 'R', 'rt', 's', 'sw', 'sg', 'e', 'f', 'fr', 'fa', 'fq', 'ft', 'fx', 'fv', 'fg', 'a', 'q', 'qt', 't', 'T', 'd', 'w', 'c', 'z', 'x', 'v', 'g' );

        var returnCode; // 리턴 코드 저장 변수

        var isFind = false; // 문자를 찾았는지 체크 변수

        if( type == 'initial' )
        {
                returnCode = initial.indexOf( char ) * 21 * 28;
                isFind = true;
        }
        else if( type == 'medial' )
        {
                for( var i = 0; i < medial.length; i++ )
                {
                        if( medial[i] == char )
                        {
                                returnCode = i * 28;
                                isFind = true;
                                break;
                        }
                }
        }
        else if( type == 'final' )
        {
                for( var i = 0; i < final.length; i++ )
                {
                        if( final[i] == char )
                        {
                                returnCode = i + 1;
                                isFind = true;
                                break;
                        }
                }
        }
        else
        {
                alert("잘못된 타입입니다.");
        }

        if( isFind == false ) returnCode = -1; // 값을 찾지 못했을 경우 -1 리턴

        return returnCode;
}
</SCRIPT>
<BODY onLoad = "intervalExcute();form.english.focus()">
<FORM name = "form">
<TABLE>
<TR>
        <TD>영어 : </TD>
        <TD><TEXTAREA rows = "4" cols = "30" name = "english"></TEXTAREA></TD>
</TR>
<TR>
        <TD>한글 : </TD>
        <TD><TEXTAREA rows = "4" cols = "30" name = "korean"></TEXTAREA></TD>
<TR>
</TABLE>
</FORM>
</BODY>
</HTML>

function koreanCheck(str) {
    var i;
    var ch;
   
    for (i=0;i<str.length;i++) {
        ch = escape(str.charAt(i));        //ISO-Latin-1 문자셋으로 변경

        if (strCharByte(ch) != 2) { //한글이 아닐 경우
            return;
        }
    }
}

function strCharByte(chStr) {
    if (chStr.substring(0, 2) == '%u') {
        if (chStr.substring(2,4) == '00')
            return 1;
        else
            return 2;        //한글
    } else if (chStr.substring(0,1) == '%') {
        if (parseInt(chStr.substring(1,3), 16) > 127)
            return 2;        //한글
        else
            return 1;
    } else {
            return 1;
    }
}

<!------ 아래의 코드를 HEAD 부분에 복사해 넣으세요 -------------->

<script>
function clearText(y){
if (y.defaultValue==y.value)
y.value = ""
}
</script>



<!------ 아래의 방식으로 BODY 부분에  붙여 넣으세요 ------------->

<B>텍스트 상자에 마우스를 클릭하면 초기문자열이 없어집니다</B>

<form>
<input type="text" value="아이디를 입력 해 주세요" onFocus="clearText(this)">
<input type=submit>
</form>
아주 간단한 팁입니다..
아무리 찾아봐도 나오질 않아 처음으로 팁을 올려보네요..
직거래 게시판으로 쓰면 여러 형태로 가격을 입력하는데 특정문자를 제한하고 숫자만 입력 받아
자동으로 1,000 과 같이 천단위로  ,(콤마) 표시를 해줍니다.


사용자 삽입 이미지

1) 가격 천단위 , 표시하기

현재 애견호텔 서비스 스킨에 적용된 가격 변수에 아래와 같이 number_format() 함수를
적용하면 숫자 입력시 자동으로 , 가 표시 됩니다.
view.php list_main 등에 적용하면 되겠죠?

$price1= number_format($subject6);


2) 특수문자 입력 제한

하지만 사용자가 임의로 1,000  콤마를 추가하여 입력하면 가격표시가 1로 나타나게 되기 때문에
숫자 입력만을 요구 해야합니다.

따라서 write.php 에 아래와 같이 함수를 추가해 주고  

<script>
<!--
function price_check() {
       var i
       var price_reg = '<>?/\\+=-_)(*&^%$#@!.,;:\{\}[]\"\'\`\~\|'
       regstr = price_reg
          var regid = write.subject6
               if (regstr.length > 1) {
               for(i=0;i<regid.value.length;i++) {
                       if(regstr.indexOf(regid.value.substring(i,i+1)) >=0) {
                               alert('가격은 숫자만 입력하세요!');
                               regid.value = ''
                               regid.focus();
                               return false;
                       }
               }
       }
             
}
// -->
</script>

해당 input 입력창에 아래와 같이 onBlur="price_check();" 를 추가해주면 됩니다..

<input type=text name=subject6 value="<?=$subject6?>" <?=size(30)?> maxlength='10' style=width:100  class=input onBlur="price_check();"> 원 </td>

----------------------------------------------------------------------------------
숫자만 들어가게 하는 또 다른 방법...

function onlynum(e) {
if (e.keyCode == 13) {
return;
}
if (e.keyCode < 48 || e.keyCode > 57)
e.returnValue = false;
}

위 함수를 적절한곳에 넣어 주시고,

input 폼 안에 아래 항목을 추가해주세요.

onkeypress="onlynum(event)" style="ime-mode:disabled"

<script type="text/JavaScript">
// Internet Explorer에서 셀렉트박스와 레이어가 겹칠시 레이어가 셀렉트 박스 뒤로 숨는 현상을 해결하는 함수
// 레이어가 셀렉트 박스를 침범하면 셀렉트 박스를 hidden 시킴
// 사용법 :
// <div id=LayerID style="display:none; " onpropertychange="selectbox_hidden('LayerID')">
function selectbox_hidden(layer_id)
{
  var ly = eval(layer_id);

  // 레이어 좌표
  var ly_left  = ly.offsetLeft;
  var ly_top    = ly.offsetTop;
  var ly_right  = ly.offsetLeft + ly.offsetWidth;
  var ly_bottom = ly.offsetTop + ly.offsetHeight;

  // 셀렉트박스의 좌표
  var el;
  for (i=0; i<document.forms.length; i++) {
    for (k=0; k<document.forms[i].length; k++) {
      el = document.forms[i].elements[k];
      if (el.type == "select-one") {
        var el_left = el_top = 0;
        var obj = el;
        if (obj.offsetParent) {
            while (obj.offsetParent) {
              el_left += obj.offsetLeft;
              el_top  += obj.offsetTop;
              obj = obj.offsetParent;
            }
        }
        el_left += el.clientLeft;
        el_top += el.clientTop;
        el_right = el_left + el.clientWidth;
        el_bottom = el_top + el.clientHeight;

        // 좌표를 따져 레이어가 셀렉트 박스를 침범했으면 셀렉트 박스를 hidden 시킴
        if ( (el_left >= ly_left && el_top >= ly_top && el_left <= ly_right && el_top <= ly_bottom) ||
            (el_right >= ly_left && el_right <= ly_right && el_top >= ly_top && el_top <= ly_bottom) ||
            (el_left >= ly_left && el_bottom >= ly_top && el_right <= ly_right && el_bottom <= ly_bottom) ||
            (el_left >= ly_left && el_left <= ly_right && el_bottom >= ly_top && el_bottom <= ly_bottom) )
            el.style.visibility = 'hidden';
      }
    }
  }
}

// 감추어진 셀렉트 박스를 모두 보이게 함
function selectbox_visible()
{
  for (i=0; i<document.forms.length; i++) {
    for (k=0; k<document.forms[i].length; k++) {
      el = document.forms[i].elements[k];
      if (el.type == "select-one" && el.style.visibility == 'hidden')
          el.style.visibility = 'visible';
    }
  }
}

function partAction(arg)
{
  if (arg == "") {
    document.all['poll'].style.display = "none";
  }
  else {
    document.all['poll'].style.display = "block";
  }
}
</script>

<body onLoad="selectbox_hidden('poll')">
<form>
<div id="poll" style="display:block;">
....
</div>
<select>
<option>아파트</option>
</select>
</form>
</body>

devedit (아주 다양항 기능. 상당히 괜찮은......)
홈페이지 http://www.interspire.com/devedit/
데모 http://www.interspire.com/devedit/demo.php

CHEditor (쓸만한데 설치 하는데 좀 막히는 부분이 있다.)
홈페이지 http://www.chcode.com
데모 http://www.chcode.com/cheditor/demo.html

WebEditor V 1.53 Build 41 (마우스 오른쪽으로 테이블, 이미지등 편집 가능. 쓸만하다.)
홈페이지 http://mytnt.co.kr/
데모 http://mytnt.dnip.net:8080/develop/?p=preview (늦게 뜨면 아래 링크 사용)
데모 http://web.gso.co.kr/~sea88/bbs/WebEditor/example.html

basic (쓸만함 HTMLarea와 비슷하다.)
홈페이지 http://www.basic.pe.kr/
데모 http://www.basic.pe.kr/bbs/zboard.php?id=basic_board (자게 글쓰기 클릭)
데모 http://web.gso.co.kr/~sea88/bbs/zboard.php?id=community (우리집 게시판중에 수정해서 쓰고있음. 글쓰기 클릭)

FCKeditor (걍 그저 그렇습니다. 근데 글자 색은 바꿀수 없는거야?)
홈페이지 http://sourceforge.net/projects/fckeditor
데모 : http://www.fredck.com/FCKeditor/Demo/

HTMLarea (가장 많이 쓰는것 같습니다. 쓸만함. htmlarea 3.0 버전은 모질라에서도 익스랑 똑같이 작동 한답니다.)
홈페이지 http://sourceforge.net/projects/itools-htmlarea
데모 : http://www.interactivetools.com/products/htmlarea/index.html#demo

SPAW (보기는 좋지만...엄청 늦게 떠서 탈....약간 비추.)
홈페이지 http://sourceforge.net/projects/spaw/
데모 : http://www.solmetra.com/spaw/demo/demo.php

hypertextare (버튼이 묵직한것이...아마고쳐 써야 할듯...에러의 압박. 비추비추)
홈페이지 http://sourceforge.net/projects/hypertextarea
데모 : http://www.muckum.de/ht

RichText-editor (그저 그렇다. 비추비추비추)
홈페니지 http://sourceforge.net/projects/richtext
데모 : http://richtext.sourceforge.net

aynHTML (소스 보기 하니 컬러로 나옵띠다. ;; 따운 받는데가 어딘지...)
홈페이지 http://sourceforge.net/projects/aynhtml
데모 : http://www.aine.be/aynhtml

web-based WYSIWYG HTML editor (아직 안써봤는데 스샷으로 대신...)
스샷,다운 http://www.unica.edu/uicfreesoft/wysiwyg_web_edit/info_wysiwyg_web_edit_eng.html

RichTextBox™ v2.0
홈페이지 http://richtextbox.com/Default.aspx
데모 http://richtextbox.com/richtextbox/demos/0/

XsDhtmlEdito (이건 안써봐서 모름)
홈페이지 http://sourceforge.net/projects/xsdheditor
데모 없음

bpEditor (이것도 안써봤는데....)
홈페이지 http://sourceforge.net/projects/bpeditor

스크랩 금지된 네이버 블로그와 카페글을 스크랩하고 싶다면...
해당 게시물을 띄운 상태에서 아래와 같은 자바스크립트를 사용하면 필요한 내용들을 복사해서 사용할 수 있습니다. 그러나 저작권이 있는 자료인 경우는 주의 깊게 사용할 필요는 있겠지요.

우선 네이버 블로그 게시물에 사용할 수 있는 자바스크립트입니다.

javascript:function x(){mainFrame.papermain.document.body.oncontextmenu=null;mainFrame.papermain.document.body.onselectstart=null;mainFrame.papermain.document.body.ondragstart=null} x();

이번에는 네이버 카페 게시물에 사용할 수 있는 자바스크립트입니다.

javascript:function x(){document.body.oncontextmenu=null;document.body.onselectstart=null;document.body.ondragstart=null;cafe_main.document.oncontextmenu=null;cafe_main.document.onselectstart=null;cafe_main.document.ondragstart=null;} x();

원리는 간단합니다. 해당 객체의 이벤트를 무력화 하는 것입니다. 응용하시면 다른 사이트에서도 활용하실 수 있겠죠.
자바스크립트를 모르는 분들을 위해 부연 설명을 하면, 주소 창에 위에 있는 스크립트를 한줄이 되도록 복사 후에 붙여 넣기 하시면 됩니다. 더 편하게 사용하려면 아무 웹페이지나 즐겨 찾기를 해둔후 속성을 변경하면 되는데, 속성창에 url를 위 자바스크립트로 대체하시면 됩니다. 즐겨찾기 이름은 간단하게 정하시고, 해당 즐겨찾기의 이름을 주소창에 입력하시면 간단히 원하는 사이트로 가거나 자바스크립트를 실행시킬 수 있습니다.
자주 이용하는 사이트라면 즐겨찾기 이름은 숫자나 영문자 1자로 정하면  더 편합니다.
주소창으로 바로가는 단축키 ALT+D 와 함께 이용하시면 더욱 좋겠죠.

<form name="dynamicselector">
<table border="0" cellspacing="0" cellpadding="0" height="178">
<tr>
<td width="35%" valign="top" align="left">
<select name="dynamicselector2" size="4" onChange="generateimage(this.options[this.selectedIndex].value)">

            <option value="박재원" selected>박재원</option>
            <option value="박재원1">박재원1</option>
            <option value="박재원2">박재원2</option>
            <option value="박재원3">박재원3</option>
            <option value="박재원4">박재원4</option>
</select>
</td>
<td width="65%" valign="top" align="left"><ilayer id="dynamic1" width=100% height=178>
<layer id="dynamic2" width=100% height=178><div id="dynamic3"></div></layer></ilayer></td>
</tr>
</table>
</form>

<script>
var tempobj=document.dynamicselector.dynamicselector2

function generateimage(which){
    if (document.all){
        dynamic3.innerHTML=which
    }
        else if (document.layers){
            document.dynamic1.document.dynamic2.document.write(which)
            document.dynamic1.document.dynamic2.document.close()
        }
        else
            alert('본 스크립트를 지원하지 않는 브라우져 입니다.')
    }

function generatedefault(){
    generateimage(tempobj.options[tempobj.options.selectedIndex].value)
}
    if (document.all||document.layers){
    if (tempobj.options.selectedIndex!=-1)
    window.onload=generatedefault
}
</script>

이 놀라운 프로그램들 보면서 이제 정말 대세는 웹 플랫폼이 될 것이라는 생각이 든다..
두 프로그램 모두 아무런 설치과정이 없으니 정말 편하다..

FCKeditor - the text editor for internet
공개 HTML 에디터.. UI도 아주 멋지고 IE, FF, 모질라, 넷스케이프 4가지 웹브라우저를 지원한다.. 데모도 직접 바로 동작을 시켜볼 수 있다.. 공개 소프트웨어니 물론 소스도 바로 다운로드 받아 바로 사용해볼 수도 있다..
단점이라면 화면이 나타나는데 시간이 꽤 많이 소요된다.. CPU도 안 올라가고, HDD를 많이 읽는 것도 아닌데 암튼 꽤 기둘려야 한다.. 에디터 화면이 뜰때마다 이러니, 너무 느린게 아닌가 하는 생각도 든다..

AJAX Write - the web based word processor
구글에서 인수를 하려고 한다는 (소문만 듣고 확인을 못해봤다..) 회사의 제품.. 이제 에디터 수준을 넘어서 워드 프로세서까지 등장을 했다.. 로딩되는 속도, 위의 에디터 보다 훨씬 느리다.. 역시 워드 프로세서 답다.. (고럼~ 그래도 명색이 워드프로세서인데.. 그정도 위세는 부려야지.. 포토샵 봐.. 로딩속도, 아주 중후하잖아.. 그 정도는 안되더라도 워드 프로세서 답게 어느 정도는..) 웹 어플리케이션에서 스플래쉬 윈도우가 등장할 정도니까.. 오랜시간 기둘려 등장한 화면은 요즘의 세련된 워드프로세서에는 못 미치지만, 초창기 워드 프로세서의 모습이다.. 이제 웹에서 이런 것도 된다.. 놀랍다.. 지원하는 포멧은 MS-Word, Open Office, RTF, PDF.. 이것도 놀랍다.. 표 그리기는 정말 불편한 수준인데, 곧 좋아지겠지..
더 큰 단점은 아직은 Fire Fox 전용이라는 것이다.. 지원하는 웹브라우저에 IE를 빼놓다니.. 멋진 놈들이다.. 해서 멋진 모습을 직접 구경해보려면 FF를 설치해야 한다.. FF도 좋은 웹브라우저고, 이 웹 워드 프로세서가 돌아가는 모습은 정말 봐둬야 하는 멋진 작품이니, FF를 지금이라도 설치하는게 좋다.. (앞으로 FF와 IE를 모두 사용하면서 비교하게 될 일이 점점 더 많이 생길 것이니 얼른 깔아두는게 좋을것이다..)

웹용 워드프로세서 구현에 관심을 가졌던 사람들이 많았는가 보다.. ZOHO Writer 라는 제품도 있다.. (웹 워드 프로세서를 써보자~ 소개글 참조)

* 쿠키


1. 쿠키를 저장할 때 document.cookie = "쿠키정보"형식을 사용하는데,

    쿠키 정보 중 꼭 입력해야 하는것이 name이다.


2. 쿠키정보를 다른 사람이 쉽게 알아볼 수 없게 암호화시키는 과정을

    인코딩이라고 하며 escape(쿠키정보)형식으로 사용함.


3. 쿠키정보중 expires는 쿠키의 유효기간을 나타내며, 이 시간이 되면 쿠키는 자동 소멸된다.

    이기간을 정해 두지 않을 경우, 쿠키는 계속해 디스크에 남아있게 된다.


================== 예제 소스 시작 ======================================================

사용자가 ' 하루 동안 보지 않겠다'고 체크하면 그 정보를 쿠키로 저장해 두었다가, 메인 창에서 새창을 열기전에 쿠키부터 확인하는 것이다.

쿠키정보는 팝업창 뿐만 아니라 팝업창의 부모창에도 들어가야한다.

여기선 팝업창을 gongi.html이라하고 부모창을 main.html이라하겠다.

근데 중간중간 소스 해석하기 무지어렵구먼....

선생님이 직접 작성한 소스가 아니라 선생님도 자세한 해석은 안해주심... -.@;


gongi.html  ============================


<script language=""Javascript">
<!--
function closeWin()
{
  if(document.forms[0].Notice.checked)
  {
     setCookie("Notice","done",1);
   self.close();
   }
}

function setCookie(name,value,expiredays)
{
  var todayDate = new Date();
  todayDate.setDate(todayDate.getDate() + expiredays);  // expiredays는 쿠키유효기간
  document.cookie = name + "=" + escape(value) + "; path=/; expired="
  todayDate.toGMTString() + ";"  // 쿠키정보 암호화 

}

// -->
</script>



<form>
       <TD background ="images/gongji_08.gif" WIDTH=308 HEIGHT=44>
  <input type="checkbox" name="Notice" value="ok">
  <font size="2">하루 동안 창 열리지 않음</font>&nbsp;
  <input type="button"  value="닫기" onClick="closeWin()">
    </TD>
  </form>


main.html ============================


<SCRIPT LANGUAGE="JavaScript">
<!--

function setCookie(name,value,expiredays)
{
  var todayDate = new Date();
  todayDate.setDate(todayDate.getDate() + expiredays);
  document.cookie = name + "=" + escape(value) + "; path=/; expired="
  todayDate.toGMTString() + ";" // path= 는쿠키가 저장될 위치 , 위치지정안하면 웹문서가 있는폴더로 저장된다.
}


function getCookie(name)
{
  var nameOfCookie = name + "=";
  var x = 0;
  while(x <= document.cookie.length)
  {
    var y = (x+nameOfCookie.length);
 if(document.cookie.substring(x,y) == nameOfCookie)
 {
   if((endOfCookie=document.cookie.indexOf(";",y)) == -1)
      {
        endOfCookie = document.cookie.length;
      }
   return unescape(document.cookie.substring(y,endOfCookie));
 }
     x= document.cookie.indexOf(" ", x) + 1;
  if(x==0)
     break;
  }
   return " ";
}



if(getCookie("Notice") !="done")

noticeWindow = window.open('gongji.html',"공지","width=400,height=450,top=0,left=0,menubar=no,resizable=no,status=no,toolbar=no,location=no,scrolls=no,directories=no"); 

noticeWindow.opener = self;
}
// -->
</SCRIPT>


================== 예제 소스 끝 ===================================================

1.메인 페이지


<head>
<script language="javascript">

 <!--

 function getCookie( name ){

         var nameOfCookie = name + "=";
         var x = 0;

         while ( x <= document.cookie.length ) {

                 var y = (x+nameOfCookie.length);

                 if ( document.cookie.substring( x, y ) == nameOfCookie ) {
                         if ( (endOfCookie=document.cookie.indexOf( ";", y )) == -1 )
                                 endOfCookie = document.cookie.length;
                         return unescape( document.cookie.substring( y, endOfCookie ) );
                 }
                 x = document.cookie.indexOf( " ", x ) + 1;

                 if ( x == 0 ) break;
         }
         return "";
 }

 if ( getCookie( "Notice" ) != "check" ) {
         noticeWindow  =  window.open('newwin.htm','notice','left=0, top=0, width=250,height=300');
 }

 // -->

</script>
</head>



2.공지 창(newwin.htm)


<html>
 <head>
 <SCRIPT language="JavaScript">
  <!--
 
  // 쿠키를 만듭니다. 아래 closeWin() 함수에서 호출됩니다
  function setCookie( name, value, expiredays )
  {
          var todayDate = new Date();

          todayDate.setDate( todayDate.getDate() + expiredays );

          document.cookie = name + "=" + escape( value ) + "; path=/; expires=" + todayDate.toGMTString() + ";"

          }

 
  // 체크후 닫기버튼을 눌렀을때 쿠키를 만들고 창을 닫습니다

  function closeWin()
  {
          if ( document.pop.Notice.checked )

           setCookie( "Notice", "check" , 1);  // 오른쪽 숫자는 쿠키를 유지할 기간을 설정합니다

          self.close(); //자기자신을 닫습니다
  }
  // -->
</SCRIPT>
</head>

<form name=pop>
<input type=checkbox name="Notice" value="" onclick="javascript:closeWin();">
<font size=1>오늘 하루 열지 않기
</form>

<script language="JavaScript">
  function checkPopupPage(){
 if( opener != null ){
 }else{
  var surl = "http://blog4u.kr";
  var sname = "index";
  var popupOptions = "left=0, top=0, width=500,height=250,toolbar=no,status=no,scrollbars=yes,resizable=no,menubar=no";
  // MIME로 6.x와 7.0 구분해줘야 함..
  var ie7_flag = false;
  ie7_flag = (window.navigator.userAgent.indexOf("MSIE 7") != -1);
  // 팝업으로 열기     
  window.open(surl, sname, popupOptions);
  // opener창 닫아주기
  if (ie7_flag) {
   // IE 7.0
   window.open(surl, '_self', popupOptions).close();
  }else {
   // IE 7.0아님..
   window.opener = self;
          self.close();
  }
  return;
 }
}
</script>
<a href="javascript:checkPopupPage()"><strong>데모보기: 팝업클릭 Preview</strong></a>
대부분의 언어에서는 자신이 사용할 기능이 선언된 다른 파일을 부르는 명령이 존재한다.
php에는 include / require 가 있고, java 에는 import가 있다. (둘이 성격이 같다는 이야기는 아니다.)

그러나 javascript 에는 include 문이 없다. 그래서 한 js 파일(a.js)에서 다른 js 파일(b.js)에 구현된 스크립트를 가져다 쓰기 위해서는 해당 js 파일을 호출한 html 페이지에서 a.js 와 b.js 모두를 호출해주어야 한다.
이는 실제로 사용할 대상에만 관심을 두는 원칙에 위배된다.

따라서 여타의 js를 include 하는 방법이 필요하다. dojo의 경우 이러한 문제를 해결하기 위해 다음과 같은 선언의 형태로 활용할 수 있도록 만들어졌다. 아래의 예제는 dojo 툴킷 중 TabContainer의 로딩 예제이다.
<script type="text/javascript" src="http://o.aolcdn.com/dojo/0.9.0/dojo/dojo.xd.js" 
        djConfig="parseOnLoad: true"></script>
<script type="text/javascript">
   dojo.require("dojo.parser");
   dojo.require("dijit.layout.ContentPane");
   dojo.require("dijit.layout.TabContainer");
   dojo.require("dijit.form.Button");
</script>

특정 js 파일에서 다른 js 파일을 참조하기 위해서는 필요한 js를 먼저 로딩할 수 있어야 한다.
이러한 방법에는 몇 가지가 알려져 있다.

  1. script 엘리먼트를 만들어서 현  문서에 추가한다. (A)
    var scr = document.createElement("script");
    scr.src = "a.js";
    document.getElementsByTagName("head")[0].appendChild(scr);

  2. document.write / innerHTML을 이용한 직접 태그를 추가한다. (B)
    document.write("<script type='text/javascript' src='b.js'><"+"/script>");
  3. 기타 등등.. (현재 기억 안남)

그러나 위의 방법 중 어떠한 것을 사용해도 수행의 순서를 원하는대로 제어할 수는 없다.
파싱은 기본적으로 다음과 같은 순서로 진행된다. 설명에 사용될 call.js 에는 위에서 설명한 스크립트를 로딩하는 루틴이 모두 포함되어 있다고 가정한다.

  1. html 페이지를 순차적으로 파싱한다.
  2. html 페이지에서 <script src="call.js">태그를 만나면 call.js 파일을 읽어들인다.
  3. call.js 에서 위에 설명한 방법으로 스크립트를 로딩하는 루틴 A를 만나면 call.js 파싱이 모두 끝난 후 A에서 지정한 파일을 읽어들인다.
  4. call.js 내에서 루틴 B를 만나면 html 페이지를 모두 파싱한 후에야 B에서 지정한 js 파일을 읽어들인다.

call.js :
(A 루틴)
(B 루틴)
window.alert("call.js");

a.js :
window.alert("a.js");

b.js :
window.alert("b.js");

라고 각각 쓰여져 있으면,  alert이 나타나는 순서는 call.js, a.js, b.js 순서이다. 아무리 A루틴과 B루틴이 call.js 를 표시하는 루틴보다 앞에 있지만, 파싱 순서상 절대 앞에 나오지 않는다.

즉, 위의 방법으로는 어떤 방법을 써도 브라우저는 먼저 현 페이지의 스크립트를 파싱하고 진행한다.

수행제어를 위한 유일한 돌파구는 SJAX 이다 (비동기가 AJAX니까... ;; 동기식은 S(ynchronous)JAX ;;;)
아래 코드는 IE6, FF2.0에서 테스트되었다.
(참고로, dojo 소스를 보아하니 ipv6관련 지원 문제로 uri 파싱도 수정이 가해져야 하는 듯하다. 오마이갓.)

활용은 다음과 같은 형태로 한다.
eval(require_once("/some_path/some.js", true));

해결해야 할 과제.

  1. 어떻게 하면 eval을 쓰지 않게 할 수 있는지.

해결된 과제

  1. require 대상 js 파일의 경로를 이 js 파일로부터 어떻게 하면 상대경로로 잡을 수 있는지.


XMLHttpRequest를 사용한다고 해서 특별히 성능상의 문제가 발생하지는 않는다. 동기식 통신의 부하는 어차피 <script src="..."> 태그를 썼을때와 동일하다. HTML파서는 서버로부터 HTML을 수신받고 파싱하다가 이 태그를 만나면 해당 src에 선언된 주소에서 파일을 가져오는데, 이 파일을 다 가지고 와서 파싱해야지만 다음 엘리먼트를 파싱한다. 외부 js 호출과 소스 파싱은 절대 비동기가 아니다. 즉, 거의 동일한 성능상의 부하를 가진다.
## 이번 예제는 사이트 최적 해상도보다 사용자 해상도가 작으면 경고 메세지를 출력후 창을 닫는
## 소스 입니다.

<script language="javascript">
function Display_check(){
if (screen.width<1024){
alert("\n\n 이용에 불편을 드려 대단히 죄송합니다.
\n\n\n 저희 사이트는은 모니터 해상도 1024X768 이상에서 제대로 보여집니다.
\n\n 디스플레이 등록정보에서 모니터 해상도를 1024X768 이상으로 변경해
\n\n 주신 후 다시 접속해 주시면 고맙겠습니다. \n"
);
parent.window.close();
}
}
</script>
 

<body onLoad="Display_check();">
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>
<head>
<title></title>
<script language="javascript">
<!--

function slide(Id, interval, to) {
var obj = document.getElementById(Id);
var H, step = 5;

if (obj == null) return;
if (to == undefined) { // user clicking
if (obj._slideStart == true) return;
if (obj._expand == true) {
to = 0;
obj.style.overflow = "hidden";
} else {
slide.addId(Id);
for(var i=0; i < slide.objects.length; i++) {
if (slide.objects[i].id != Id && slide.objects[i]._expand == true) {
slide(slide.objects[i].id);
}
}

obj.style.height = "";
obj.style.overflow = "";
obj.style.display = "block";
to = obj.offsetHeight; // 이거이거
obj.style.overflow = "hidden";
obj.style.height = "1px";
}
obj._slideStart = true;
}

step = ((to > 0) ? 1:-1) * step;
interval = ((interval==undefined)?1:interval);

obj.style.height = (H=((H=(isNaN(H=parseInt(obj.style.height))?0:H))+step<0)?0:H+step)+"px";


if (H <= 0) {
obj.style.display = "none";
obj.style.overflow = "hidden";
obj._expand = false;
obj._slideStart = false;
} else if (to > 0 && H >= to) {
obj.style.display = "block";
obj.style.overflow = "visible";
obj.style.height = H + "px";
obj._expand = true;
obj._slideStart = false;
} else {
setTimeout("slide('"+Id+"' , "+interval+", "+to+");", interval);
}
}
slide.objects = new Array();
slide.addId = function(Id)
{
for (var i=0; i < slide.objects.length; i++) {
if (slide.objects[i].id == Id) return true;
}
slide.objects[slide.objects.length] = document.getElementById(Id);
}
-->
</script>

<style>
.menu {
border:1px solid #999999;
background-color:#FFCC00;
padding:3px 1px 1px 5px;
cursor:hand;
width:150px;
}
.submenu {
border:1px solid #999999;
width:150px;
padding-left:10px;
display:none;
}
</style>
</head>
<body>

<div class="menu" onMouseOver="slide('sub1');">메뉴항목 1</div>
<div id="sub1" class="submenu">
<div>- Sub menu 1-1</div>
<div>- Sub menu 1-2</div>
<div>- Sub menu 1-3</div>
<div>- Sub menu 1-4</div>
<div>- Sub menu 1-5</div>
</div>
<div class="menu" onMouseOver="slide('sub2');">메뉴항목 2</div>
<div id="sub2" class="submenu">
<div>- Sub menu 2-1</div>
<div>- Sub menu 2-2</div>
<div>- Sub menu 2-3</div>
<div>- Sub menu 2-4</div>
<div>- Sub menu 2-5</div>
<div>- Sub menu 2-6</div>
<div>- Sub menu 2-7</div>
<div>- Sub menu 2-8</div>
</div>
<div class="menu" onMouseOver="slide('sub3');">메뉴항목 3</div>
<div id="sub3" class="submenu">
<div>- Sub menu 3-1</div>
<div>- Sub menu 3-2</div>
<div>- Sub menu 3-3</div>
</div>
<div class="menu" onMouseOver="slide('sub4');">메뉴항목 4</div>
<div id="sub4" class="submenu">
<div>- Sub menu 4-1</div>
<div>- Sub menu 4-2</div>
<div>- Sub menu 4-3</div>
</div>
<div class="menu" onMouseOver="slide('sub5');">메뉴항목 5</div>
<div id="sub5" class="submenu">
<div>- Sub menu 5-1</div>
<div>- Sub menu 5-2</div>
<div>- Sub menu 5-3</div>
<div>- Sub menu 5-4</div>
</div>

</body>
</html>

// 메인

 function server_stop() {
   var popup_stop = getCookie('popup_stop');
    if(popup_stop != 1){
     server_stop = '/notice/070711/server_stop.jsp';
     window.open(server_stop,'stop','width=420, height=335, left=0, top=100');
    }
 }


//메인하단

<script>
 server_stop();
</script>


//check_cookies.js


function makeCookie2(cookieName,cookieData){
 if (cookieData != "")
 {
     var expiry = new Date();
     expiry.setTime(expiry.getTime() + (24 * 60 * 60 * 1000));
     setCookie(cookieName, cookieData, expiry);
 }
}


function setCookie(cookieName, cookieData, expiry){
// document.cookie = cookieName + "=" + cookieData + ";domain=.ktedi.com;path=/;expires=" + expiry.toGMTString();
 document.cookie = cookieName + "=" + cookieData + ";path=/;expires=" + expiry.toGMTString();
}

function getCookie(varname) {

 startpos = document.cookie.indexOf(varname);

 if (startpos >= 0) {
  startpos += varname.length;
  endpos = document.cookie.indexOf(";", startpos);
  if (endpos == -1) endpos = document.cookie.length;
  return unescape(document.cookie.substring(startpos+1, endpos));
 } else{
  return '';
 }

}

+ Recent posts