Category Archives: Javascript

value = value.replace(/\s+/, “”);//왼쪽 공백제거

value = value.replace(/\s+$/g, “”);//오른쪽 공백제거

value = value.replace(/\n/g, “”);//행바꿈제거

value = value.replace(/\r/g, “”);//엔터제거

자바스크립트 새로고침 종류

location.reload();     // 새로고침
top.document.프레임이름.location.reload();     // 프레임 새로고침
top.document.location.reload();     // 프레임 전체 새로고침
opener.location.reload();     // 부모창 새로 고침
자바로 자동새로고침
<SCRIPT language=”JavaScript”>
setTimeout(“history.go(0);”, 10);
</SCRIPT>

자바스크립트 특수문자 체크

function onlyNumcheck(){
var objEv = event.srcElement;
var num ="{}[]()<>?_|~`!@#$%^&*-+\"'\\.,/ ";    //입력을 막을 특수문자 기재.
event.returnValue = true;

for (var i=0;i<objEv.value.length;i++)
{
if(-1 != num.indexOf(objEv.value.charAt(i)))
event.returnValue = false;
}

if (!event.returnValue)
{
  alert("특수문자는 입력하실 수 없습니다.");
  objEv.value="";
}
}

자바스크립트로 특수 문자 체크하는 함수 입니다.

정규식을 이용하여 간단하게 체크할수 있습니다 .^^

 
 /* 숫자만 입력받기 */
    function fn_press(event, type) {
        if(type == "numbers") {
            if(event.keyCode < 48 || event.keyCode > 57) return false;
            //onKeyDown일 경우 좌, 우, tab, backspace, delete키 허용 정의 필요
        }
    }
    /* 한글입력 방지 */
    function fn_press_han(obj)
    {
        //좌우 방향키, 백스페이스, 딜리트, 탭키에 대한 예외
        if(event.keyCode == 8 || event.keyCode == 9 || event.keyCode == 37 || event.keyCode == 39
        || event.keyCode == 46 ) return;
        //obj.value = obj.value.replace(/[\a-zㄱ-ㅎㅏ-ㅣ가-힣]/g, '');
        obj.value = obj.value.replace(/[\ㄱ-ㅎㅏ-ㅣ가-힣]/g, '');
    }

 <!-- 이렇게하면 숫자만 입력 됨 //전화번호 이런거 입력할 input 만들때 -->
<input type="text" maxlength="3" onkeypress="return fn_press(event, 'numbers');" onkeydown="fn_press_han(this);" style="ime-mode:disabled;"/>


<!-- 이렇게하면 영문만(숫자포함) 입력 됨 //이메일 아이디 같은거 입력을 만들때 -->
<input type="text" onkeydown="fn_press_han(this);" style="ime-mode:disabled;"/>

 


<script type="text/javascript">

//아이디 입력시 한글, 특수문자 체크
function h_check(Objectname) {
 var intErr
 var strValue = Objectname
 var retCode = 0
 var re = /[~!@\#$%<>^&*\()\-=+_\']/gi; //특수문자 정규식 변수 선언
 
 for (i = 0; i < strValue.length; i++) {
  var retCode = strValue.charCodeAt(i)
  var retChar = strValue.substr(i,1).toUpperCase()
  retCode = parseInt(retCode)
 
  //입력받은 값중에 한글이 있으면 에러
  if ( (retChar < "0" || retChar > "9") && (retChar < "A" || retChar > "Z") && ((retCode > 255) || (retCode < 0)) ) {
   intErr = -1;
   break;
  //입력받은 값중에 특수문자가 있으면 에러
  } else if(re.test(strValue)) {
   intErr = -1;
   break;
  }
 }
 return (intErr);
}

</script>

/정규식/.test(문자열)

정규식은 /와 / 사이에 쓴다. 아래처럼 말이다.

str = "test한글";
check = /[ㄱ-ㅎ|ㅏ-ㅣ|가-힣]/;
if(check.test(str)) alert!("한글이 있습니다.");

위 코드는 앞서 출처라고 적은 곳에 있던 코드다. 문자열에 한글이 포함돼있는지 체크하는 코드를 애타게 찾고 있었는데 큰 도움을 받았다. 이렇게 간단한 메서드가 있었다니 말이다.

핵심은

/[ㄱ-ㅎ|ㅏ-ㅣ|가-힣]/

이거다. 이게 정규식(정규식 종류는 모르겠다.)에서 모든 한글을 표현하는 것이다. 알아 두면 좋을 것이다. 분석해 보면 의외로 간단하다. |는 ‘또는’을 의미하는 것이다. []는 안에 있는 놈들을 묶어 주는 역할을 한다. – 는 당연히 어디부터 어디까지를 의미한다.

그래서, ㄱ부터 ㅎ이나 ㅏ부터 ㅣ, 가부터 힣 사이에 있는 놈들이 있냐? 하고 묻는 거다.

이해를 직관적으로 돕기 위해 날코딩을 해 보자.

alert( /a/.test("aaa") );

이렇게 쓰면 얼럿 창에 true가 뜬다.

당연히 W3C Schools의 설명을 참고하면 도움이 된다 :

http://www.w3schools.com/jsref/jsref_regexp_test.asp

자바스크립트에서 숫자를 표기할때 3자리마다 콤마를 찍어줘야 할 때가 있다 자주 사용하는 기능인데 매번 만들기란 여간 귀찮은게 아니다.

자바스크립트로 돈계산할때 콤마 … 찍어주자 ㅋㅋ 돈계산을 즐거우니깐

//콤마찍기
function comma(str) {
    str = String(str);
    return str.replace(/(\d)(?=(?:\d{3})+(?!\d))/g, '$1,');
}

//콤마풀기
function uncomma(str) {
    str = String(str);
    return str.replace(/[^\d]+/g, '');
}

 
//input box에서 사용자 입력시 바로 콤마를 찍어주기 위한 함수도 추가 한다.
function inputNumberFormat(obj) {
    obj.value = comma(uncomma(obj.value));
}
 

  
function onlyNumberInput()

{
 var code = window.event.keyCode;

 if ((code > 34 && code < 41) || (code > 47 && code < 58) || (code > 95 && code < 106) || code == 8 || code == 9 || code == 13 || code == 46)
 {
  window.event.returnValue = true;
  return;
 }
 window.event.returnValue = false;

 
}

 

이때, 텍스트 필드에 아래의 Style을 붙여주면 허용하는 아스키 코드값의 키만 입력가능하게 셋팅할 수 있다.

 

<input type = "text" name ="isbn" id="isbn" value="" maxlength="13"  onKeyDown = "javascript:onlyNumberInput()" style='IME-MODE: disabled' />

//코드 업그레이드

// IE외의 브라우저에서도 동작할 수 있도록 변경

function onlyNumberInput2( Ev )

{
    if (window.event) // IE코드
        var code = window.event.keyCode;
    else // 타브라우저
        var code = Ev.which;

    if ((code > 34 && code < 41) || (code > 47 && code < 58) || (code > 95 && code < 106) || code == 8 || code == 9 || code == 13 || code == 46)
    {
        window.event.returnValue = true;
        return;
    }

    if (window.event)
        window.event.returnValue = false;
    else
        Ev.preventDefault();    
}

<input type = "text" name ="isbn" id="isbn" value="" maxlength="13"  onKeyDown = "javascript:onlyNumberInput(event)" style='IME-MODE: disabled' />

 

자바스크립트 onmouseover() / onmouseout() 함수를 이용해서

마우스 오버 효과를 줘볼까요??

일단 코드를 보면 심플 하죠잉~~~

<!DOCTYPE html>
    <html>
      <head>
        <script>

          function changeImg() 
          {
           var element = document.getElementById('smile');
           element.style.opacity = "0";
           element.style.filter  = 'alpha(opacity=0)';
          }

          function normalImg() 
          {
          var element = document.getElementById('smile');
          element.style.opacity = "1";
          element.style.filter  = 'alpha(opacity=100)';
          }
        </script>
      </head>
      <body>
<div onmouseover="changeImg()" onmouseout="normalImg()" class="box"style="width:200px; height:100px; background-color:red;"></div>
<img src="https://www.google.co.kr/images/srpr/logo11w.png" alt="Smiley"  id="smile">
</body>
</html>

빨간 네모에 마우스를 올리면 구글형님이 사라지고

마우스를 치우면 다시 구글형님이 나오고…

비슷한 효과로 css에 hover 효과가 있지만 onmouseover() / onmouseout()  는 자바스크립트 함수를 제어 할수 있다는점

유용하게 활용해보세요 .. ㅎㅎ

자바스크립트 setInterval 과 clearInterval 사용하기

오늘은 웹 개발 팁하나 올려봅니다. (머… 아시는분은 다 아시겠지만 ^^;)

웹개발할때 Dom을 동적으로 멋잇게(?) 표현하거나 자바스크립트 잠깐 정지하고플때…

자바스크립트로 어떠한 행위(Function) 을 할때, 아 이게 잠깐만 멈춰있었으면 좋겠거나..

혹은 어느정도만 실행하다가 멈추었으면 하는.. 그런 행위들이 있을겁니다…없으면 말구..ㅋ

머.. 요구사항은 그때그때 다르니깐…

함수를 실행시켜놓고 10초뒤 정지 혹은 10초 이후에 호출 등등.. 할때 유용하게 쓸수있는 자바스크립트 함수입니다.

간단한 예시.

/*1초마다 fname 함수 실행*/ 
var refreshIntervalId = setInterval(fname, 1000);

/* refreshIntervalId 중지 */
clearInterval(refreshIntervalId);

음 좀더 활용방법을 생각해볼까요

var i = 0 ;

function fname(){
   i++;
   console.log(i); // 증가값 확인
   if(i==10){
     console.log('10초가 되어 종료 합니다.');
     clearInterval(refreshIntervalId);
    }
  }

/*1초마다 fname 함수 실행*/
var refreshIntervalId = setInterval(fname, 1000);

말그대로 fname에 Function을 넣으면 되고, clearInterval을 통하여 해당 Interval을 stop 시킨다.

refreshIntervalId 을 alert로 출력해보면 Interval 횟수가 출력이되는데, clearInterval을 할경우 단순히 계속 증가되던 값이 잠깐 멈춰있다.

종료하는 개념이 아니라 멈추는 개념입니다.

10초가 되었으니  끝 !