Java World

Java Korean

Category Archives: Javascript

자바스크립트 위키 – http://ko.wikipedia.org/wiki/자바스크립트

부드럽게 스크롤되는 Top버튼 스크립트

Posted on by Posted in Javascript Leave a comment

부드럽게 스크롤되는 Top버튼 스크립트

페이지의 맨 위로 부드럽게 이동시켜 주는 Top버튼 스크립트입니다. 오래전부터 사용해서 원본 소스는 어디에서 구했는지 모르겠구요. 크로스브라우징 때문에 좀 수정했습니다.  파이어폭스, 크롬, 사파리, 오페라, IE6이상 에서 작동합니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
function go_top(orix,oriy,desx,desy) {
    var Timer;
    if (document.body.scrollTop == 0) {
        var winHeight = document.documentElement.scrollTop;
    } else {
        var winHeight = document.body.scrollTop;
    }
    if(Timer) clearTimeout(Timer);
    startx = 0;
    starty = winHeight;
    if(!orix || orix < 0) orix = 0;
    if(!oriy || oriy < 0) oriy = 0;
    var speed = 7;
    if(!desx) desx = 0 + startx;
    if(!desy) desy = 0 + starty;
    desx += (orix - startx) / speed;
    if (desx < 0) desx = 0;
    desy += (oriy - starty) / speed;
    if (desy < 0) desy = 0;
    var posX = Math.ceil(desx);
    var posY = Math.ceil(desy);
    window.scrollTo(posX, posY);
    if((Math.floor(Math.abs(startx - orix)) < 1) && (Math.floor(Math.abs(starty - oriy)) < 1)){
        clearTimeout(Timer);
        window.scroll(orix,oriy);
    }else if(posX != orix || posY != oriy){
        Timer = setTimeout("go_top("+orix+","+oriy+","+desx+","+desy+")",15);
    }else{
        clearTimeout(Timer);
    }
}

아래처럼 사용하면 됩니다. ^^

1
<span onclick="go_top();">Top으로</span>

 

자바스크립트 영문/숫자 체크

Posted on by Posted in Javascript Leave a comment

function fnCheckPassword(uid, upw)

{
if(!/^[a-zA-Z0-9]{8,20}$/.test(upw))

{
alert!(‘비밀번호는 숫자와 영문자 조합으로 8~12자리를 사용해야 합니다.’);
return false;
}
var chk_num = upw.search(/[0-9]/g);
var chk_eng = upw.search(/[a-z]/ig);

if(chk_num < 0 || chk_eng < 0)

{
alert!(‘비밀번호는 숫자와 영문자를 혼용하여야 합니다.’);
return false;
}

if(/(\w)\1\1\1/.test(upw))

{
alert!(‘비밀번호에 같은 문자를 4번 이상 사용하실 수 없습니다.’);
return false;
}

if(upw.search(uid)>-1)

{
alert!(‘ID가 포함된 비밀번호는 사용하실 수 없습니다.’);
return false;
}
return true;

}

 

영문 또는 숫자로 입력 된 값을 확인하시려면 … 쉽죠잉?

자바스크립트 alert 줄 바꿈

Posted on by Posted in Javascript Leave a comment

자바스크립트에서 팝업창으로 흔히 alert()를 많이 사용합니다.

 

간혼 내용이 길어지거나, 줄 바꿈을 해야 할때 우리는 \n ^^ 찾죠.. c, java 등 많은 프로그램 언어에서

사용됩니다.

 

♤ 자바스크립트에서 alert창내에서 줄바꿈하기 위해서는 줄바꿈 문자 ‘\n’를 넣어주면 된다.

 

예)alert(“ABC\nDEF”);

 

♤ jsp변수값에서 줄바꿈 문자를 넣어줄때 유의사항

jsp변수값에서 줄바꿈 문자를 넣어주면 안되고 따로 변수를 설정하고 사이에 줄바꿈을 주면된다.

<%

String a=”ABC”

String b=”DEF”

%>

alert(‘<%=a%>\n<%=b%>’);

 

jsp 와 함께 혼용해서 써도 됩니다. 그럼 줄바꾸기 끝 !

제이쿼리 체크박스 선택 여부

Posted on by Posted in jQuery Leave a comment

제이쿼리를 이용한 체크박스 선택 여부 확인 방법을 알아보겠습니다.

 var check_type=$(“input:checkbox[id=’example_id’]”).is(“:checked”);  /* 체크 여부 */

다음과 같이  체크박스 아이디값을 명시해주고, is(“:checked”) 함수를 통해 체크 여부를 판단합니다.

물론 체크박스 활성시 true

체크박스 비활성시 false 를  return 합니다 ^^

 

이런식으로도 확인 할수있습니다 .ㅎ

if ($(‘#example_id’).is(“:checked”))

{

}

팝업창을 닫으면서 부모창을 새로고침하는 방법

Posted on by Posted in Javascript Leave a comment

팝업창을 닫으면서 부모창을 새로고침하는 방법

 

예1)

opener.parent.location=’부모창주소(원하는주소)’;

 

– 원하는 주소를 직접 써줘도되고

 

예2)

opener.parent.location.reload();
window.close();

 

– 이런식으로 reload를 써줘도 된다.

 

 

window.close() 는

<(input type=”button” value=”목록” style=”width:50px;” (onclick=”window.close();” />

이런식으로 써주면 목록버튼을 누를때 팝업창이 닫히게 된다.

자바스크립트 select태그 값 받아오기

Posted on by Posted in Javascript Leave a comment

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
        <title>Select Event</title>
        <script type="text/javascript">
            function selectEvent(selectObj) {
                alert(selectObj.value + "가 선택 되었습니다.");
            }
        </script>
    </head>
    <body>
        <select name="select" onChange="javascript:selectEvent(this)">
            <option value="menu1" selected>메뉴 1</option>
            <option value="menu2">메뉴 2</option>
            <option value="menu3">메뉴 3</option>
        </select>
    </body>
</html>
select 태그에서 onChange를 이용하여 자바스크립트 함수를 호출한다.
onChange는 select태그에 값을 선택하게 될때 함수를 호출되도록 한다.

자바스크립트 글자수 제한

Posted on by Posted in Javascript Leave a comment

 

<style type=”text/css”>

/*********************************************************

* javascript 글자수 제한 함수

*********************************************************/

 

/*

‘ ——————————————————————

‘ Function : fc_chk_byte(aro_name)

‘ Description : 입력한 글자수를 체크

‘ Argument : Object Name(글자수를 제한할 컨트롤)

‘ Return :

‘ ——————————————————————

*/

function fc_chk_byte(aro_name,ari_max,type){

 

var ls_str = aro_name.value; // 이벤트가 일어난 컨트롤의 value 값

var li_str_len = ls_str.length; // 전체길이

 

// 변수초기화

var li_max = ari_max; // 제한할 글자수 크기

var i = 0; // for문에 사용

var li_byte = 0; // 한글일경우는 2 그밗에는 1을 더함

var li_len = 0; // substring하기 위해서 사용

var ls_one_char = “”; // 한글자씩 검사한다

var ls_str2 = “”; // 글자수를 초과하면 제한할수 글자전까지만 보여준다.

 

for(i=0; i< li_str_len; i++){

// 한글자추출

ls_one_char = ls_str.charAt(i);

 

// 한글이면 2를 더한다.

if (escape(ls_one_char).length > 4){

li_byte += 2;

}else{// 그밗의 경우는 1을 더한다.

li_byte++;

}

 

// 전체 크기가 li_max를 넘지않으면

if(li_byte <= li_max){

li_len = i + 1;

}

}

$(“#”+type+”_length”).text(li_byte);

// 전체길이를 초과하면

if(li_byte > li_max){

$(“#”+type+”_length”).text(li_max);

ls_str2 = ls_str.substr(0, li_len);

aro_name.value = ls_str2;

}

aro_name.focus();

}

 

/*

‘ ——————————————————————

‘ Function : fc_chk2()

‘ Description : Enter키를 못치게한다.

‘ Argument :

‘ Return :

‘ ——————————————————————

*/

function fc_chk2(){

if(event.keyCode == 13) event.returnValue=false;

}

</script>

 

 

textarea 태그에서 fc_chk_byte를 함수를 호출함으로써 2번자 인자에 입력 글 자 수를 제한한다. fc_chk2함수는 엔터키를 제한한다 ^^;

한글 입력은 한글자에 2byte이기 때문에 함수에 1000으로 입력하면 500글자로 제한이 된다.

<textarea name=”contents” style=”height:100px;width: 402px” id=”msg_contents” onkeyup=”fc_chk_byte(this,1000,’msg’);” onkeypress=”fc_chk2()”></textarea>

자바스크립트에서 EL 태그 값 받아오기

Posted on by Posted in Javascript Leave a comment

 

자바스크립트에서 EL태그를 이용하여 값을 핸들링 할 경우가 있다.

예를들면 서버 값에 따라서 alert를 뿌려주거나, 서버 값에따라 ui를 핸들링 할 경우

등등 여러가지 많은 경우가 필요하겠지만,

분명 자바스크립트로 EL 태그를 컨트롤 한다면 더욱더 많은 웹 개발 핸들링을 할 수 있을 것이다 ^^;

 

간단하게 태그 이용방법을 보면

<script>

var example_value = “<c:out value=”${example_el.value}” />”;

</script>

다음과 같이 코딩할 경우 자바스크립트 변수에 EL태그 값을 넣어 줄 수가 있다.

 

자바스크립트에 날개를 달아보자 ~

 

제이쿼리를 이용한 자동 클릭 효과 주기

Posted on by Posted in jQuery Leave a comment

제이쿼리를 이용하녀 DOM태그를 쉽게  컨트롤 할수 있는부분은 다들 아시죠?

$(document).ready(function() {} );

스크립트를 자동 시작되게 하는 코드 죠 ^^;; 쉽죠잉

그럼 본론으로 들어가서  html안에 버튼이나 onclick 효과를 자동으로 주기 위해서

어떤 키워드를 써야 할까요.

.trigger(‘click’);

위 코드를 보면 타겟에 (‘클릭’) 이라고 입력해줍니다. 그럼 태그 속성에 클릭효과를 주게 됩니다.

제이쿼리와 결합하게 되면

 $(‘#example_id’).last().trigger(‘click’);

.last() 는 선택된 요소 집합에서 마지막 요소를 선택하게 해주는 함수입니다.

우리말로 해석해보면,

example_id라는 id속성을 가진 태그중에  마지막 요소를 선택해서 클릭 효과를 줍니다. ^^? ㅋㅋ 제 해석입니다.

그럼 시작하자 마자 자동으로 클릭효과를 주는 방법으로는

$(document).ready(function() {

 $(‘#example_id’).last().trigger(‘click’);

} );

위 함수와 결합해서 사용하게 되면

시작하자마자, 선택된 요소를 선택하여 클릭하게 해준다. 입니다.

자바스크립트는 알면알수록 재밌는 녀석 ^,^ 그럼 즐프하세요