'Programming/Javascript'에 해당하는 글 4건

새 창(팝업) 띄우기

Programming/Javascript 2007. 6. 27. 16:40
팝업 창 띄울 때 주로 사용하는 기능이다.
a 태그를 사용하는 것 보다 더 유연하게 새 창을 제어할 수 있고, onload를 사용하여 페이지 로딩 후 팝업창을 띄울 수도 있다.

새 창 띄우기
1. 새 창 띄우는 함수를 호출한다.
2. open() 함수에서 url을 지정하고, 타겟 속성이나 이름을 지정하고, 스펙을 지정한다.
(스펙에서 여부를 묻는 속성의 기본값은 yes 이므로, 코딩을 간략하게 줄일 수도 있다.)

<html>
<head>
<script type="text/javascript">
function open_win()
{
   window.open( "http://www.google.co.kr", "_blank", "toolbar=no, location=no,
                directories=no, status=no, menubar=no, scrollbars=no, resizable=no,
                top=100, left=50, width=800, height=600" );
}
</script>
</head>
<body>

<form>
<input type="button" onclick="open_win()" value="New Window" />
</form>

</body>
</html>
WRITTEN BY
손가락귀신
정신 못차리면, 벌 받는다.
,

선택 창(Confirm)에서 선택 여부 체크

Programming/Javascript 2007. 6. 27. 16:17
흔히 경고창을 띄우고 다른 스크립트를 실행하게 하기 위한 기능이다.
[확인]을 누르면 true를 반환하고, [취소]를 누르면 false를 반환한다.

선택 창(Confirm)을 띄우고 페이지 이동하기
1. 버튼을 눌러 함수를 호출한다.
2. 구글로 이동할지 여부를 묻는 confirm 함수로부터 리턴값을 저장한다.
3. 리턴값이 true라면 구글로 이동한다.

<html>
<head>
<script type="text/javascript">
function view_confirm()
{
   var ans = confirm( "구글로 이동할꺼여?" );

   if ( ans ) {
       location.href = "http://www.google.co.kr";
   }
}
</script>
</head>

<body>
<input type="button" onclick="view_confirm()" value="confirm box" />
</body>
</html>
WRITTEN BY
손가락귀신
정신 못차리면, 벌 받는다.
,

체크박스 전체선택 / 선택해제

Programming/Javascript 2007. 6. 27. 15:51
게시판 등에 여러 게시물을 삭제하거나 할 때 사용하는 기능이다.

체크박스 전체선택
1. 체크박스의 name을 묶는다.
2. 버튼을 눌러 체크박스에 모두 체크하는 함수를 호출한다.
3. 이름 지어진 name 배열의 길이를 알아내어 for 제어문으로 길이 만큼 루프시킨다.
4. for문 안에서 첫번째 체크박스(name[0])부터 마지막 체크박스(name[n])까지 체크한다.
(체크박스 선택해제도 같은 방식이다.)

<html>
<head>
<script type="text/javascript">
function check()
{
   f = document.forms[0];

   for ( i = 0; i < f.list.length; i++ )
       f.list[i].checked = true;
}

function uncheck()
{
   f = document.forms[0];

   for ( i = 0; i < f.list.length; i++ )
       f.list[i].checked = false;
}
</script>
</head>

<body>

<form>
<input type="checkbox" name="list" value="1" /><br />
<input type="checkbox" name="list" value="2" /><br />
<input type="checkbox" name="list" value="3" /><br />
<input type="checkbox" name="list" value="4" /><br />
<input type="checkbox" name="list" value="5" /><br />

<input type="button" onclick="check()" value="전체선택" />
<input type="button" onclick="uncheck()" value="선택해제" />
</form>

</body>
</html>
WRITTEN BY
손가락귀신
정신 못차리면, 벌 받는다.
,

텍스트필드 자리수 체크

Programming/Javascript 2007. 6. 27. 15:14
흔히 사업자 등록번호나, 주민등록번호 필드를 채울 때 사용하는 기능이다.

주민등록번호의 경우
1. 이벤트 핸들러 중 onkeyup 속성을 사용하여 입력키를 뗄 때 체크함수 실행한다.
2. 첫번째 필드 값의 길이가 필드 최대 자리 수(6)와 같아지면 두번째 필드에 포커스를 준다.

<html>
<head>
<script type="text/javascript">
function checkLen( f )
{
   if ( f.value.length == f.maxLength ) {
       document.getElementById( "myForm" ).jumin2.focus();
   }
}
</script>
</head>
<body>

<form id="myForm">
<input name="jumin1" size="6" maxlength="6" onkeyup="checkLen( this )" />
<input name="jumin2" size="7" maxlength="7" />
</form>

</body>
</html>
WRITTEN BY
손가락귀신
정신 못차리면, 벌 받는다.
,