'자바스크립트 프로그래밍'에 해당되는 글 3건

자바스크립트에는 타이머 함수가 내장되어 있습니다. 

타이머 함수란 지정한 시간에 지정한 함수를 실행하게 하는 함수 입니다. 

■ 타이머 설정하기 ( setTimeout )

setTimeout 함수 내부에 function(){ ... } 과 3000 이라는  파라미터 값이 들어 왔습니다. 

function 내부는 실행할 함수를 정의 합니다. 

두번째 3000 이라는 값은 3000 밀리세컨드 후 function 함수에서 정의한 동작을 실행 시킨다는 의미 입니다. 

3000 밀리세컨드, 쉽게 이야기 해서 3초 후에 동작 시킵니다.

위 코드를 적용 후 페이지를 로드 하게 되면 페이지 로딩 완료 후 3초가 지나면 알림이 뜨게 됩니다. 

■ 타이머 취소하기 ( clearTimeout )

실행시킨 타이머를 취소 시키는 방법은 내장 함수인 clearTimeout 함수를 콜하면 됩니다. 이때 파라미터 값은 실행 취소시킬 setTimeout 의 ID 값을 넘겨 주면 됩니다. 

위와 같이 setTimeout 을 clearTimeId 라는 변수 형태로 지정을 해줍니다. 

이때 clearTimeId 라는 변수가 clearTimeout 함수를 호출 시 사용하게 되는 id 값이 됩니다. 

stopTimer() 함수를 선언하여 호출되는 시점에 clearTimeout(clearTimerId) 와 같이 실행하게 되면 setTimeout 함수가 실행 되지 않고 취소 되어 버립니다. 

▼ 도움이 되셨다면 로그인이 필요 없는 ▼

▼ 하트 클릭 한번 부탁 드립니다 ▼

감사합니다 :D

안녕하세요. 제임스 입니다. 

웹에서 특정 문구를 복사 하거 버튼 하나 클릭으로 링크를 복사하는 방법을 알아 보겠습니다. 

■ 텍스트를 클립보드에 복사(copy)하기

위와 같이 input 의 value 값을 복사후 ctrl + v (붙여넣기) 또는 마우스 우클릭 후 붙여넣기 하는 방법에 대해 정리 해보겠습니다. 

▶ HTML code

id 값이 inputField 인 input 태그의 입력 값을 버튼을 클릭하여 클립보드에 복사 하고자 합니다. 

그리고 아래 input 태그에 붙여 넣기를 해보는 방식으로 처리 하겠습니다. 

▶ Javascript Code

var textField = document.getElementById('inputField');

textField 라는 변수에 inputField 라는 id 를 가진 요소를 담습니다. 

textField.select();

textField 라는 요소를 선택 합니다. 

document.execCommand('copy');

document.execCommand 는 명령어를 실행하기 위해 사용 하는 함수입니다. 

명령어 종류는 copy, cut, delete 등등, 많은 명령어들이 지원되고 있습니다. 

참조) https://developer.mozilla.org/en-US/docs/Web/API/Document/execCommand

여기서는 copy 를 사용했습니다. 즉, 선택된 영역의 값을 복사 한다는 의미 입니다. 

위 내용들만 있으면 작업은 끝났습니다. 실제 위 코드가 적용된 화면을 보시겠습니다. 

※ 아래 input 필드에 붙여넣기 (Ctrl + v) 해보세요

첫번째 input 에 원하는 문구를 입력 후 문구 복사하기 버튼을 클릭 합니다. 

두번째 input 에 붙여넣기 (ctrl + v) 또는 마우스 우클릭 후 붙여넣기 선택 하시면 클립보드에 복사된 내용이 붙여넣기 됩니다. 

▼ 도움이 되셨다면 로그인이 필요 없는 ▼

▼ 하트 클릭 한번 부탁 드립니다 ▼

감사합니다 :D

HTML input 필드에 표기되는 숫자를 평상시에는 금액 표기법으로 콤마 ( , ) 를 추가 하도록 하고 포커싱이 되어 수정 모드가 되었을 때는 콤마( , )를 제거하여 숫자만 입력 하는 모드로 변경하는 방법에 대해 알아 보겠습니다. 

위와 같이 동작하도록 해보겠습니다. 

위 input 필드에 직접 숫자 입력 후 포커스를 다른 곳으로 이동 시키면 금액 표기법과 같이 세자리마다 콤마 ( , ) 찍혀 나옵니다. 

▼ HTML body 부 

input 필드 id 를 inputPrice 로 지정 했습니다. 

이 input 필드가 focus 되거나 blur 되는 순간에 콤마( , )를 추가 하거나 빼주는 작업을 합니다. 

▼ jQuery 코드 

$('#inputPrice').on('focus', function(){

...

});

위 코드는 id 값이 inputPrice 인 요소가 focus 되면 어떠한 동작을 하겠다는 jQuery 코드 입니다. 

var val = $('#inputPrice').val();

inputPrice 필드의 value 값을 가져와서 val 이라는 변수에 담아 줍니다. 

이 값이 공백문자거나 null 이 아니라면 (공백문자 여부 조회 코드는 아래 첨부하는 전체 소스 참조하세요)

val = val.replace(/,/g, '');

inputPrcie 필드의 value 값에서 콤마 ( , ) 를 제거 하여 공백으로 변환합니다. 

$('#inputPrice').val(val);

콤마를 제거한 val 값을 inputPrice 의 value 값으로 지정합니다. 

이렇게 하면 input 필드가 focus 된 경우에대한 처리가 끝납니다. 

$('#inputPrice').on('blur', function(){

...

});

위 코드는 id 값이 inputPrice 인 요소가 blur (포커스를 잃은 경우) 어떠한 동작을 하겠다는 것을 정의하는 jQuery 코드 입니다. 

var val = $('#inputPrice').val();

inputPrice 필드의 value 값을 가져와서 val 이라는 변수에 담아 줍니다. 

if(!isEmpty(val) && isNumeric(val)){  ...  }

이 값이 공백문자거나 null 이 아니고 숫자라는 조건을 만족 하는 경우 

val = currencyFormatter(val);

currencyFormatter 라는 함수에 val 값을넣어 숫자를 금액 포맷으로 변경하여 리턴 합니다. 

$('#inputPrice').val(val);

금액 포맷으로 리턴된 값을 input 필드의 value 값으로 지정하여 필요한 작업을 완료 합니다. 

위 코드는 입력 받은 값의 공백문자 여부 및 null 값 여부를 체크후 boolean 값으로 리턴하는 코드입니다. 

위 코드는 입력 받은 값을 정규표현식을 이용하여 숫자 값 여부를 체크 하여 결과를 boolean 값으로 리턴 하는 코드 입니다. 

자바스크립트에서는 test() 함수를 이용하여 정규표현식과 일치 하는 문자가 있는지 여부를 확인 및 결과를 true / false 로 리턴 합니다. 

입력 받은 값을 뒤에서 세자리 마다 콤마( , ) 를 추가하는 정규표현식을 활용한 코드 입니다. 

정규 표현식 관련 내용은 java 에서 다뤘으니 참조 하세요.

▶ 정규표현식 관련 포스팅 보러가기(클릭)

전체 코드 (참고하세요)

test.jsp

▼ 도움이 되셨다면 로그인이 필요 없는 ▼

▼ 하트 클릭 한번 부탁 드립니다 ▼

감사합니다 :D