DevNote - Javascript

Javascript

[jQuery] Lazy 로 이미지 리소스 트래픽 절약하기 이미지가 리소스가 많은 웹페이지 로드시 과도한 트래픽이 발생하게 되는데, lazy 는 화면에 노출된 이미지 리소스를 그때그때 로드하여 출력해 주는 플러그인이다. Plugin include cdn 서비스나 본 글 하단에 첨부된 js파일을 다운로드 하여 lazy 적용을 원하는 웹페이지 상단에 인클루드 한다. <script type="text/javascript" src="jquery.lazy.min.js"></script> img 태그 수정 lazy가 적용될 <img> 요소를 아래와 같이 수정한 다음, plugin 을 적용한다. <HTML> 1. src 어트리뷰트를 data-src 로 변경 2. class="lazy" 추가 <img data-src="path/to/image.jpg" class="lazy" /> <jQuery> .lazy 가 부여된 이미지 리소스에 대해 lazy 적용 $(function() { $('.lazy').Lazy(); }); 상세 옵션 설정 lazy는 커스터마이징이나 디버깅 할 수 있는 몇가지의 옵션을 제공한다. ( 전체 옵션 확인 : http://jquery.eisbehr.de/lazy/#configuration ) $(function() { $('.lazy').Lazy({ 'thresold' : 100, // 이미지가 화면에 100px 만큼 보인 시점에 등장하도록 설정 'effect' : 'fadeIn', // fade 등장효과 적용 (기본값: show) 'effectTime' : 500, // fade 적용시 duration 시간 'onError' : function(element) { // img 로드 실패시 callback 함수 console.log('error loading ' + element.data('src')); } }); });
[jQuery] jQuery UI autocomplete 적용하기 jQuery UI에 기본 탑재된 자동완성 기능 (autocomplete) 샘플 코드. 배열을 미리 선언하여 사용하는 방법과 ajax 방식으로 배열을 가져와 구동하는 방법으로 사용할 수 있는데 아래 예시는 배열을 미리 선언한 뒤 사용하는 방식이다. 자동완성 배열 선언 searchSource = [ { 'label' : '서울', 'value' : 'seoul' }. { 'label' : '대전', 'value' : 'daejun' } ] 자동완성 적용 위에서 선언된 배열을 자동완성으로 적용하는 예제이며, 자동완성을 선택하는 경우 위 배열 중 'value'는 input의 value가 되며, 'label'은 자동완성에서 노출될 항목명이 된다. <HTML> <input type="text" name="address" autocomplete="off"> <jQuery> $('input[name="address"]').autocomplete({ 'source' : searchSource, // 위에서 선언한 배열 'minLength' : 0, // 최소 몇글자 입력시 자농완성 노출할 것인지 'autoFocus' : false, // 자동으로 첫번째 항목에 focus를 위치시킬 것인지 'position' : { my : 'right top', at : 'right bottom' }, // 자동완성 창의 노출 위치 'delay' : 0, // 노출 딜레이 시간 'z-index' : 999, // z-index 'classes' : {}, // 자동완성 기본 css class 를 custom class로 대입하는 옵션. 'select' : function(event, ui) {}, // 항목 선택시 수행할 작업 'focus' : function(event, ui) {}, // 항목 focus시 수행할 작업 'close' : function(event) {} // 닫는 경우 수행할 작업 }).on({ 'focus' : function() { $(this).autocomplete("search", ""); // input에 포커싱 되는 순간 자동완성이 열리게 하는 코드 } }); autocomplete가 적용된 ui는 아래 예시와 같다.
[Javascript] SMS 본문 내용 byte 수 계산하는 함수 SMS문자 본문 내용의 byte를 계산하는 간단한 코드. ASCII 코드가 128이상인 경우(한글, 한문, 특수기호 등) 2byte로 계산하고 그 외의 문자 (영어, 숫자, 기본기호 등)는 1byte로 계산한다. Javascript // 내용 byte 체크 function getByteLength(str) { var byteLen = 0; for(var i = 0; i < str.length; i++) { var charCode = str.charCodeAt(i); if (charCode > 128) { byteLen += 2; } else { byteLen ++; } } return byteLen; }
[jQuery] 마우스 드래그 금지 & 우클릭 금지 마우스 드래그 및 우클릭 금지하는 jquery 코드. event로 간단하게 처리 가능하다. jQuery <script type="text/javascript"> $(document).ready(function(){ //우클릭 금지 $(document).bind('contextmenu', function(e){ return false; }); //드래그 금지 $('*').bind('selectstart', function(e){ return false; }); }); </script>
[Javascript] 연락처가 올바른 연락처인지 검증하는 함수 연락처가 올바른 연락처인지 검증하는 함수. 지원되는 연락처 유형은 아래와 같다. - 휴대전화 번호 - 02 (서울) 번호 - 000 (지역) 번호 - 0000-0000 대표번호 Javascript check_phone = function(destPhone) { var regex = /^[0-9-]/; var regex2 = /^0(2|[3-9]\d{1})-?\d{3,4}-?\d{4}$|^01([016789])-?\d{3,4}-?\d{4}|\d{4}-\d{4}$/; if (regex.test(destPhone) && regex2.test(destPhone)) { return true; } else { return false; } };
[jQuery] 멀티 파일 업로드 플러그인 (MultiFile) :file input을 멀티파일 업로더로 손쉽게 적용해주는 jQuery 플러그인. 첨부 가능 확장자, 용량 제한 등 다양한 옵션을 제공하는 간편한 플러그인이다. 직관적인 작동 방식으로 커스터마이징이 편하다. HTML <input type="file" name="attach" id="attach"> <div class="attaedbox"></div> jQuery <script type="text/javascript"> $(':file[name=attach]').MultiFile({ 'max' : 5, 'accept' : 'gif|jpg|jpeg|bmp|png|pdf', 'maxfile' : 10240, //각 파일 최대 업로드 크기 (kb) 'list' : $(':file[name=attachedbox]'), //파일목록을 출력할 요소 지정가능 'STRING' : { // error문구를 원하는대로 수정 'remove' : "<a href=\"#\" class=\"remove\">제거</a>", 'duplicate' : "$file 은 이미 선택된 파일입니다.", 'denied' : "$ext 는(은) 업로드 할수 없는 파일확장자입니다.", 'selected' :'$file 을 선택했습니다.', 'toomuch' : "업로드할 수 있는 최대크기를 초과하였습니다.($size)", 'toomany' : "업로드할 수 있는 최대 개수는 $max개 입니다.", 'toobig' : "$file 은 크기가 매우 큽니다. (max $size)" } }); </script>
[Javascript] text input에 연락처 입력시 자동 하이픈(-) 처리 text input에 연락처를 입력하는 경우 자동으로 하이픈(-) 처리하는 코드. 지원되는 연락처 유형은 아래와 같다. - 휴대전화 번호 - 02 (서울) 번호 - 000 (지역) 번호 - 0000-0000 대표번호 HTML <input type="text" callnumber /> Javascript $(document).on('keyup', 'input[callnumber]', function() { var value = $(this).val(); if (!value) return ""; value = value.replace(/[^0-9]/g, ""); let result = []; let restNumber = ""; // 지역번호와 나머지 번호로 나누기 if (value.startsWith("02")) { // 서울 02 지역번호 result.push(value.substr(0, 2)); restNumber = value.substring(2); } else if (value.startsWith("1")) { // 지역 번호가 없는 경우 // 1xxx-yyyy restNumber = value; } else { // 나머지 3자리 지역번호 // 0xx-yyyy-zzzz result.push(value.substr(0, 3)); restNumber = value.substring(3); } if (restNumber.length === 7) { // 7자리만 남았을 때는 xxx-yyyy result.push(restNumber.substring(0, 3)); result.push(restNumber.substring(3)); } else { result.push(restNumber.substring(0, 4)); result.push(restNumber.substring(4)); } $(this).val(result.filter((val) => val).join("-")); });
[Javascript] 텍스트 클릭시 클립보드(clipboard)에 복사 특정 텍스트 클릭시 클립보드(Clipboard)에 복사하는 Javascript 코드. 복사할 텍스트를 text input 에 value값으로 넣어 클릭시 텍스트를 전체 선택하고 클립보드에 복사하는 방법이다. javascript 구문을 input의 onclick으로 작성 하였기 때문에 간편한 사용이 가능하다. HTML & Javascript <input type="text" value="복사할 텍스트" onclick="this.select();document.execCommand('copy');alert('클립보드에 복사 되었습니다.');return false;" readonly />
[Javascript] 특정 시간 까지의 남아있는 시간 카운트다운 javascript로 오늘을 기준으로 특정 시간까의 남아있는 시간을 카운트다운하는 코드. html로 빈 엘리먼트를 하나 만들어 두고 script를 통해 엘리먼트 내부에 남아있는 시간을 계산하여 html을 조합하여 넣어주는 간단한 방식이다. HTML <div class="count"></div> Javascript <script> CountDownTimer('01/01/2019 00:00 AM'); function CountDownTimer(dt) { var end = new Date(dt); var _second = 1000; var _minute = _second * 60; var _hour = _minute * 60; var _day = _hour * 24; var timer; function showRemaining() { var now = new Date(); var distance = end - now; if (distance < 0) { clearInterval(timer); return; } var days = Math.floor(distance / _day); var hours = Math.floor((distance % _day) / _hour); var minutes = Math.floor((distance % _hour) / _minute); var seconds = Math.floor((distance % _minute) / _second); if(days<10){ days = '0' + days; } if(hours<10){ hours = '0' + hours; } if(minutes<10){ minutes = '0' + minutes; } if(seconds<10){ seconds = '0' + seconds; } days = days.toString(); hours = hours.toString(); minutes = minutes.toString(); seconds = seconds.toString(); var date = new Array(); date[0] = days.substring(0,1); date[1] = days.substring(1,2); date[2] = hours.substring(0,1); date[3] = hours.substring(1,2); date[4] = minutes.substring(0,1); date[5] = minutes.substring(1,2); date[6] = seconds.substring(0,1); date[7] = seconds.substring(1,2); var html = ''; html += '<span>'+date[0]+'</span>'; html += '<span>'+date[1]+'</span>'; html += '일 '; html += '<span>'+date[2]+'</span>'; html += '<span>'+date[3]+'</span>'; html += '시간 '; html += '<span>'+date[4]+'</span>'; html += '<span>'+date[5]+'</span>'; html += '분 '; html += '<span>'+date[6]+'</span>'; html += '<span>'+date[7]+'</span>'; html += '초 '; matches = document.getElementsByClassName('count'); matches[0].innerHTML = html; } timer = setInterval(showRemaining, 1000); } CountDownTimer('01/01/2050 00:00 AM'); // 오늘 날짜 </script> 결과 미리보기 1초 마다 .count 엘리먼트 내부에 innerHTML 되는 것을 확인할 수 있다.
[jQuery] file input으로 파일 첨부시 첨부파일명 가져오기 (fakepath 지우기) 윈도우 환경의 브라우저에서 file input으로 파일을 첨부한 뒤 input 의 value값을 가져오면 fakepath 가 포함된 경로가 반환된다. fakepath를 replace시켜 파일명만 반환받아 보자! jQuery $(this).val().replace(/C:\\fakepath\\/i,'');
[jQuery] e.target 추적하여 자기 자신이 아닌 엘리먼트를 클릭했을 때 hide() 처리 jQuery로 show() 와 hide()되는 toggle 메뉴를 만든 경우 toggle 메뉴 외 body내 '나 자신이 아닌' 다른 엘리먼트를 클릭하는 경우 toggle로 열린 엘리먼트를 hide() 시킬 수 있다. 마우스를 클릭하는 경우 e.target을 통해 클릭 event의 target 내에 '나 자신'이 있는지 검사하고 target 내에 없는 경우 hide() 시킨다. jQuery $me = $('#this-me'); //나 자신 $('body').click(function(e){ if($me.has(e.target).length == 0 && !$me.is(e.target)){ $me.hide(); } });
[jQuery] iframe 높이를 문서 높이에 따라 자동 조절 iframe 내부 문서의 높이에 따라 iframe의 height를 자동으로 조절해주는 코드. HTML <iframe src="document.html" frameborder="0" scrolling="no></iframe> jQuery <script type="text/javascript"> $('iframe').load(function(){ $(this).height(0); setTimeout( function() { $(this).height($(this).contents().find('body').height() + 150), }, 100 ); }); </script>
[Javascript] Crossdomain iframe 컨텐츠 높이에 맞게 자동 조절 iframe 내부의 문서가 외부 웹페이지(Cross Domain)인 경우 내부 iframe의 높이, 폭 크기에 맞게 iframe 사이즈를 자동 조정하는 script 코드. iframe이 삽입되는 부모 페이지 <iframe src="document.html" id="iframeWrap" frameborder="0" scrolling="no"></ifrmae> <script> // iframe auto height let iframe = document.querySelector("#iframeWrap"); window.addEventListener('message', function(e) { let message = e.data; iframe.style.height = message.height + 80 + 'px'; iframe.style.width = message.width + 'px'; } , false); </script> iframe 내부 <script> $(function() { // iframe auto height let auto_height = function() { let message = { height: $('#wmanager').height(), width: $('#wmanager').width() }; window.top.postMessage(message, "*"); } $(window).on({ 'load' : auto_height }) }) </script>
[jQuery] jQuery UI 모바일 디바이스에서도 Touch 되도록 (jQuery UI Touch Punch 0.2.3) jQuery UI로 slider 등의 UI 제작시 모바일, 태블릿등의 디바이스에서 터치가 인식되지 않아 작동되지 않는 경우 아래 jQuery UI Touch Punch 플러그인을 jQuery UI 아래에 추가하여 작동시킬 수 있다. (원본 js 파일은 첨부파일 다운로드!) jQuery UI Touch Punch /*! * jQuery UI Touch Punch 0.2.3 * * Copyright 2011–2014, Dave Furfero * Dual licensed under the MIT or GPL Version 2 licenses. * * Depends: * jquery.ui.widget.js * jquery.ui.mouse.js */ !function(a){function f(a,b){if(!(a.originalEvent.touches.length>1)){a.preventDefault();var c=a.originalEvent.changedTouches[0],d=document.createEvent("MouseEvents");d.initMouseEvent(b,!0,!0,window,1,c.screenX,c.screenY,c.clientX,c.clientY,!1,!1,!1,!1,0,null),a.target.dispatchEvent(d)}}if(a.support.touch="ontouchend"in document,a.support.touch){var e,b=a.ui.mouse.prototype,c=b._mouseInit,d=b._mouseDestroy;b._touchStart=function(a){var b=this;!e&&b._mouseCapture(a.originalEvent.changedTouches[0])&&(e=!0,b._touchMoved=!1,f(a,"mouseover"),f(a,"mousemove"),f(a,"mousedown"))},b._touchMove=function(a){e&&(this._touchMoved=!0,f(a,"mousemove"))},b._touchEnd=function(a){e&&(f(a,"mouseup"),f(a,"mouseout"),this._touchMoved||f(a,"click"),e=!1)},b._mouseInit=function(){var b=this;b.element.bind({touchstart:a.proxy(b,"_touchStart"),touchmove:a.proxy(b,"_touchMove"),touchend:a.proxy(b,"_touchEnd")}),c.call(b)},b._mouseDestroy=function(){var b=this;b.element.unbind({touchstart:a.proxy(b,"_touchStart"),touchmove:a.proxy(b,"_touchMove"),touchend:a.proxy(b,"_touchEnd")}),d.call(b)}}}(jQuery);
[jQuery] 이미지맵 반응형 적용하기 (area 태그) 반응형 사이트의 경우 PC기준으로 이미지맵(area) 태그 작성 후 모바일에서 이미지 사이즈가 축소되었을 때 축소된 비율 만큼 area 좌표를 자동 조정해주는 코드. jQuery $(document).ready(function(){ //이미지맵이 있는 경우 반응형 이미지맵 처리 var coords = new Array(); function imagemap_coords(type = ''){ $('area[response_croods]').each(function(idx){ if(type=='ready'){ coords[idx] = $(this).attr('coords'); } var map_id = $(this).parent('map').attr('name'); var $img = $('img[usemap="#'+map_id+'"]'); var org_width = parseInt($img[0].naturalWidth); var now_width = $img.width(); var croods_exp = coords[idx].split(','); var coords_re = ''; for(var i=0;i<croods_exp.length;i++){ coords_re += ','+croods_exp[i]*(now_width/org_width); } coords_re = coords_re.substring(1); $(this).attr('coords',coords_re); }); } imagemap_coords('ready'); $(window).resize(imagemap_coords); }); HTML <area shape="rect" alt="" title="" coords="472,24,507,64" href="" target="" response_coords />

1
2