수라의 티스토리

<script type="text/javascript">

frmUrl = 'http://www.naver.com/a.htm?ace=1214&enter=6001'  //예문용 경로입니다. 사용하실때는 아랫줄의 경로를 이용하세요
//frmUrl = location.href                 //사용하실대는 이줄의 주석을 지우고 상단의 예문을 지우세요

varCut = frmUrl.indexOf("?")               //전송된 값을 받기위해 ?의 순서를 찾습니다.

varCheck = frmUrl.substring(varCut+1)           //?의 뒷값을 구하여 사용할 값을 뽑아냅니다.

var varList = varCheck.split("&")              //&를 기준으로 배열변수로 만들어놓습니다.

forCount = varList.length                //총배열갯수를 구합니다.

for(i=0; i < forCount; i++)                 //배열갯수만큼 포문을 돌려 변수를 정의합니다.
 {
  eval(varList[i])                  //경로의 특성을 살려 eval로 그냥 쉽게 뽑아놨습니다.
  /*
  변수를 새로 지정하고 싶다면
 
  포문 위에 var 변수명 = new Array 을 쓰고

  도는 포문앞에 변수명[i] = varList[i]

  로 바까쓰시면 됩니다.
  */
 }

/*
해당 경로의 받아온값을 바로 변수화 해서 사용합니다.

request("ace")로 받아야할값은 ace의 변수로 저장이되고 값은 1214그대로 사용됩니다.

아래 처럼 변수가 지정되어 값을 가지고있습니다.
*/

alert(ace)     //테스트용 얼럿창
alert(enter)    //테스트용 얼럿창

</script>

참조 : http://blog.nettor.com/jquery_quick/quick.html

<script type="text/javascript">
var quick_menu = $('#quick_menu');
var quick_top = 100;
/* quick menu initialization */
quick_menu.css('top', $(window).height() );
$(document).ready(function(){
    quick_menu.css('top', quick_top );
    //quick_menu.animate( { "top": $(document).scrollTop() + quick_top +"px" }, 500 ); //스크롤중간에서 refresh할떄 이동
    $(window).scroll(function(){
        quick_menu.stop();
        quick_menu.animate( { "top": $(document).scrollTop() + quick_top + "px" }, 1000 );
    });
});
</script>

1.로그인창에서 아이디/비번 인풋영역에 설명이 bg로 깔린상태
2.포커싱되면 bg삭제, blur되면 bg 온.
  단, 입력값이 있을때는 blur되도 bg삭제 유지.

[SCRIPT]
<script type="text/javascript">
$(document).ready(function() {
    $(".top-menu .itp-id").focus(function() {
        $(".itp-id").removeClass("empty");
    });
    $(".top-menu .itp-id").blur(function() {
        $(".itp-id").addClass("empty");
    });
    $(".top-menu .itp-pw").focus(function() {
        $(".itp-pw").removeClass("empty");
    });
    $(".top-menu .itp-pw").blur(function() {
        $(".itp-pw").addClass("empty");
    });
    $(".itp-id").each(function() {
        $(this).blur(function() {
            var data=$(this).val();
            var len=data.length;
            if(len<1) {
                $(".itp-id").addClass("empty");
            }
            else {
                $(".itp-id").removeClass("empty");
            }
        });
    });
    $(".itp-pw").each(function() {
        $(this).blur(function() {
            var data=$(this).val();
            var len=data.length;
            if(len<1) {
                $(".itp-pw").addClass("empty");
            }
            else {
                $(".itp-pw").removeClass("empty");
            }
        });
    });
});
</script>

[HTML]
<form method="post" action="">
                <fieldset>
                    <legend>로그인 폼</legend>
                    <ul class="top-menu">
                        <li><input type="text" class="itp-id empty" id="emailId" /> <input type="password" class="itp-pw empty" id="pass" /> <a href="#"><img src="/images/common/btns_login.gif" alt="로그인" /></a></li>
                    </ul>
                </fieldset>
            <form>

[CSS]
#emailId.empty, #pass.empty {background:url('/images/common/bg_dec01.gif') no-repeat; }
#emailId.empty {background-position:0px 0px; }
#pass.empty {background-position:0px -19px; }



간략화

<input type="text" id="searchbox_for" onblur="if(this.value==''){this.value='프로젝트명을 입력해 주세요.'};" onfocus="if(this.value=='프로젝트명을 입력해 주세요.'){this.value=''};" value="프로젝트명을 입력해 주세요.">

자바스크립트가 강력해 지면서 DOM을 다루는 스크립트를 많이 사용하곤 한다. Ajax를 하면 특히 많이 사용하기도 하고 그 외에 편리한 UI를 위해서 동적(Dynamic)으로 자바스크립트를 이용해서 HTML의 내용을 바꾸거나 구조를 변환하거나 한다. 여기서 동적이라는 의미는 HTML문서를 작성할때 HTML코드를 입력한 것이 아니라 HTML페이지의 랜더링 후에 페이지를 사용하면서 스크립트를 이용해서 순간순간 바꾼다는 뜻이다.

이런 부분이 자바스크립트가 재밌는 점이기도 하면서 잘 활용하면 여러가지 편리한 인터페이스나 효과를 제공할 수 있다.

하지만 이렇게 동적으로 바꾸었다고 하더라도 브라우저에서 제공하는 "소스보기"를 하면 처음 작성한 HTML코드만 나올뿐 동적으로 생성한 코드를 볼 수가 없다. 동적으로 생성한 HTML이 내가 의도한 대로 잘 안나오면 간단한 것은 스크립트 부분을 보면서 해결할 수 있지만 소스가 복잡하다면 스크립트코드만 보면서 생성되는 HTML코드를 예상하는 것은 생각처럼 만만치 않을 때가 있지만 실제로 생성된 HTML코드를 볼 수 있다면 디버깅하는데 훨씬 편리할 수 있다.(왠만한 HTML Syntax에러는 에디터에 붙혀만 넣어놔도 발견할 수 있으니까....)

이게 불가능 한 줄로만 알고 있었는데 동적으로 생성한 코드를 볼 수 있는 방법이 있다.

document.documentElement.innerHTML

위 코드를 실행하면 현재 눈에 보이는 랜더링상태의 HTML코드를 볼 수 있다.

간단하게는

alert(document.documentElement.innerHTML);

를 통해서 볼 수 있지만 이렇게 할 경우 일단 줄바꿈이 제대로 되지 않으며 alert창에서는 복사를 할 수도 없고 또 긴코드는 alert창으로 다 볼 수도 없다. alert창에는 스크롤이 없으므로....(테스트 중인게 아니라면 대개의 경우 alert에서 보여줄 수 있는 야을 넘어갈 것이다.

그래서 동적으로 생성되는 코드를 볼 수 있도록 간단한 예제를 만들어 보았다.

document.documentElement.innerHTML에서 나온값은(head~/body 까지 나온다.) html코드이기 때문에 일반적인 방법으로 페이지에 찍어내도 다시 렌더링 되어버려서 소스코드를 볼 수가 없다.(결국 이것도 동적으로 생성한 것이니까...) 소스를 볼 수 있는 <xmp></xmp>코드를 이용해서 HTML코드가 찍히도록 할 수도 있는데 보통의 HTML페이지 소스에서는 스크립트 코드가 당연히 들어가 있을 것이기 때문에 </script>부분에서 결국 깨져버린다.

위의 예제에서는 textarea를 이용했다. textarea에 찍으면 html코드도 그대로 찍히니까 가장 간단한 방법일 것이다. 복사해서 에디터쪽에 붙히기만 하면 되니까....  예제를 약간 설명(?)하면 div를 하나두고 그안에 있는 change버튼을 누르면 div안의 내용을 스크립트를 이용해서 바꾸어 주었고 소스보기 버튼을 누르면 현재상태의 html코드가 textarea에 찍히는데 change버튼을 누르기 전에 소스보기를 눌러보고 바꾼 후에 눌러보면 쉽게 달라진 점을 비교할 수 있을 것이다.

귀찮아서 그렇게 까지는 안했지만 일반적으로 게시판에디터에서 하듯이 document.documentElement.innerHTML에서 나온 값의 태그가 동작하지 않도록 &lt; &gt;등으로 바꾸어줘서 찍어주는 방법도 있을 것이다.

머 보여주는 방법보다는 일단 본수 있다는게 중요한거니까.. ㅎㅎㅎ