'프로그램/jquery, javascript'에 해당되는 글 44건

  1. 2009.07.15 키보드 입력시 아스키코드값 알아내기
  2. 2009.07.15 onload 여러 곳에서 사용하기
  3. 2009.07.15 메뉴 슬라이딩 효과
  4. 2009.07.15 Stack overflow at line

[javascript-tip]키보드 입력시 아스키코드값 알아내기

 

 

<html>
<head>
<title>[javascript-tip]키보드 입력시 아스키코드값 알아내기</title>

<style type="text/css">
<!--
-->
</style>
<script language="javascript">
<!--
window.onload = function()
{
 if(window.addEventListener)
 {
  document.addEventListener("keypress", pKeydown,false);
 }
 
 else if(window.attachEvent)
 {
  document.attachEvent("onkeypress", pKeydown);
 }
   
 else
 {
  document.onkeypress=pKeydown;
 }
}


function pKeydown(event)
{
   var event = window.event ? window.event : event;
   var ecode = event.charCode ? event.charCode : event.keyCode;

   // 아스키코드값 출력
   document.getElementById("retView").innerHTML = ecode;
   alert(ecode);
}
//-->
</script>
</head>
<body>
<h1>키보드 입력시 아스키코드값 알아내기</h1>
<div>키보드를 눌러보세요.^^</div>
<div id="retView"></div>
</body>
</html>

Posted by 은둔고수

[javascript-tip(ie,ff)]onload 여러 곳에서 사용하기

 

 

자바스크립트를 사용하다보면 한페이지 안에서 onload 이벤트를 여러번 사용할 필요를 가끔 느끼게 된다.
여러가지 고급기술도 있겠지만 간단하고 편한 코드가 있어 소개한다.

 

/*

addLoadEvents( func )
*/
function addLoadEvents( func )
{
  var oldonload = window.onload;
  if ( typeof window.onload != 'function' ){
    window.onload = func;
  } else {
    window.onload = function()
    {
      oldonload();
      func();
    }
  }
}

 

 

[사용법]

addLoadEvents(불러올 함수1);
addLoadEvents(불러올 함수2);
.
.
addLoadEvents(불러올 함수x);

Posted by 은둔고수

[javascript-tip]메뉴 슬라이딩 효과

 

 

<html>
<head>
<title>[javascript-tip]메뉴 슬라이딩 효과</title>

<style type="text/css">
<!--
BODY { font-size:9pt; }
.menu {
    border:1px solid #CCCCCC;
    background-color:#DEDEDE;
    padding:3px 1px 1px 5px;

    width:150px;
    cursor:hand;
}

.submenu {
    width:150px;
    padding-left:10px;
    display:none;
    cursor:hand;
}
-->
</style>
<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>
</head>
<body>
<h1>[javascript-tip]메뉴 슬라딩 효과</h1>

<div class="menu" onClick="slide('sub1');">Tree1</div>
<div id="sub1" class="submenu">
    <div>  + SubTree1-1</div>
    <div>  + SubTree1-2</div>
    <div>  + SubTree1-3</div>
    <div>  + SubTree1-4</div>
    <div>  + SubTree1-5</div>
</div>
<div class="menu" onClick="slide('sub2');">Tree2</div>
<div id="sub2" class="submenu">
    <div>  + SubTree2-1</div>
    <div>  + SubTree2-2</div>
    <div>  + SubTree2-3</div>
    <div>  + SubTree2-4</div>
</div>
<div class="menu" onClick="slide('sub3');">Tree3</div>
<div id="sub3" class="submenu">
    <div>  + SubTree3-1</div>
    <div>  + SubTree3-2</div>
    <div>  + SubTree3-3</div>
</div>
<div class="menu">이건 다른 메뉴</div>
</body>
</html>

Posted by 은둔고수

[javascript-error]Stack overflow at line

 

 

무한루프에 빠지면 나타나는 현상으로 스택이 넘쳤다는 뜻이다.

 

Stack.overflow at line: 0

이런 식으로 맨 뒤에 숫자가 있다.

그 숫자에 해당하는 라인을 참조하여 디버깅을 한다.

Posted by 은둔고수