-
페이지 리소스 로드 후 실행(execute function after complete page load)
document.addEventListener('readystatechange', function () { if (event.target.readyState === "interactive") { // same as: document.addEventListener("DOMContentLoaded"... // same as jQuery.ready console.log("All HTML DOM elements are accessible"); } if (event.target.readyState === "complete") { console.log("Now external resources are loaded too, like css,src etc... "); } }); execute function after complete page load
-
임시 데이터 만들기
function generateData(n) { var tempData = []; var firstNames = [ '지훈', '지혜', '성민', '지은', '현우', '수진', '정훈', '혜진', '동현', '은지', '유진', '수빈', '지원', '준호', '지현', '민준', '서연', '지민', '민서', '준서', '서현', '우진', '서윤', '서준', '주원', '하준', '예준' ]; var lastNames = [ '김', '이', '박', '최', '구', '강', '조', '윤', '장', '임', '한', '신', '오', '서', '권', '황', '송' ]; var productNames = [ "홍차", "녹차", "에스프레소", "에스프레소 더블샷", "카페라떼", "화이트 초콜릿 모카", "카라멜...
-
단위 변환(convert unit)
설정 /** * 숫자 단위 변환 * @param {string} currentUnit 현재 실제 숫자 단위(G, M, k ...) standardUnit 배열에 있는 단위, 없으면 추가해서 사용. 단, 10^3 기준의 단위만 사용 * @param {string} useUnit 사용할 단위(ohm, P, F, Hz ...) * @return {string} ex) {345} + {k} + {ohm} = '345kohm' */ Number.prototype.convertUnit = function (currentUnit, useUnit) { currentUnit = currentUnit || ''; useUnit = useUnit || ''; var convertValue, resultUnit, result; var _v = this;...
-
클로저 패턴(closure pattern)
var closure = (function () { var name = 'jinh'; // private variable var that = this; var exports = { // setter setName: function (name) { that.name = name; }, // getter getName: function () { return that.name; } }; return exports; })();
-
Null Check
Null Check JavaScript에는 ‘없음’를 나타내는 값은 null와 undefined 두 값의 의미는 비슷하지만, 사용되는 목적과 장소가 다름 let foo; foo // undefined const obj = {}; obj.prop; // undefined typeof null // 'object' typeof undefined // 'undefined' 프로그래머의 입장에서 명시적으로 부재를 나타내고 싶다면 항상 null을 사용 function printIfNotNull(input) { if (input !== null && input !== undefined) { console.log(input); } } // 아래 세 개의 식은 완전히 같은 의미입니다. input !== null && input !== undefined;...
-
컬럼 높이 균일하게 맞추기
/** * 배열 분리 * @param {Number} n 나눠야 할 개수 * @return {Array} */ Array.prototype.division = function (n) { var arr = this; var len = arr.length; var cnt = Math.floor(len / n); var tmp = []; for (var i = 0; i <= cnt; i++) { tmp.push(arr.splice(0, n)); } return tmp; }; /* 컬럼 높이 균일 */ var equalHghtCol = { /** * 렌더링 * @param {String} element 대상 컬럼 * @param {Number}...
-
레이어 영역 프린트(modal)
레이어 영역 프린트 var layerPrint = function layerPrint() { var printCont = $('.ly-wrap.active>div').clone(); // 활성화된 레이어 영역 복제 $('body').append('<div class="print-div">'); // 프린트 영역 생성 $('.print-div').append(printCont); // 프린트 영역에 레이어 영역 복사 $('.wrap, .ly-wrap.active').hide(); window.print(); $('.print-div').remove(); // 사용이 끝난 영역 삭제 $('.wrap, .ly-wrap.active').removeAttr('style'); }
-
엑셀로 테이블 만들기
엑셀로 테이블 만들기 1. excel2json 활용 link 2. json to table (ajax) json 파일을 테이블로 생성하기 위해서 ajax를 이용 $.ajax({ type: 'GET', url: 'table.json', //파일경로 dataType: 'json', cache: false, success: function (data) { var tableData = data.a0; //a0 = 임의의 카테고리 이름 var _table = []; //테이블 생성 for (var i = 0; i < tableData.length; i++) { _table.push('<tr>'); _table.push(' <th scope="row">'+ tableData[i].year +'</th>'); _table.push(' <td>'+ tableData[i].position +'</td>'); _table.push('</tr>'); } _tableHtml = _table.join('\n'); $('div').append(_tableHtml); //코드...
-
엘리먼트 속성 가져오기
getComputedStyle() IE9 이상 var style = window.getComputedStyle(Element); console.log(style.width); console.log(style.backgrondColor); IE9 이하 window.onload = function () { if (!window.getComputedStyle) { window.getComputedStyle = function(element) { return element.currentStyle; } } }
-
input file 디자인 입히기
<div class="filebox"> <input class="upload-name" value="파일선택" disabled="disabled"> <label for="ex_filename">업로드</label> <input type="file" id="ex_filename" class="upload-hidden"> </div> .filebox input[type="file"] { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; } .filebox label { display: inline-block; padding: .5em .75em; color: #999; font-size: inherit; line-height: normal; vertical-align: middle; background-color: #fdfdfd; cursor: pointer; border: 1px solid #ebebeb; border-bottom-color: #e2e2e2; border-radius: .25em; } /* named upload */ .filebox .upload-name { display: inline-block; padding:...
-
addEventListener, attachEvent
addEventListener, attachEvent 두 메소드의 기능은 같지만 브라우저마다 지원하는 메소드가 다르기 때문에 분기 처리 해주어야 한다. /** addEventListener * * IE9+, chrome * @param type {string} //이벤트 타입을 구분하기 위한 문자열 (ex click, blur, drag, drop, ...) * @param function {obj} //이벤트를 수신하여 처리할 객체, 해당 객체는 EventListener 인테페이스를 구현하거나 단순한 자바스크립트 함수여야 한다. * @param useCapture {boolean} //true = Capturing, false = Bubling, default = false */ element.addEventListener(type, function[, useCapture]); /** attachEvent * * IE8...
-
iOS position fixed focus event issue
$.fn.mobileFix = function (options) { var $parent = $(this), $fixedElements = $(options.fixedElements); $(document) .on('focus', options.inputElements, function(e) { $parent.addClass(options.addClass); }) .on('blur', options.inputElements, function(e) { $parent.removeClass(options.addClass); // Fix for some scenarios where you need to start scrolling setTimeout(function() { $(document).scrollTop($(document).scrollTop()) }, 1); }); return this; // Allowing chaining }; // Only on touch devices if (Modernizr.touch) { $("body").mobileFix({ // Pass parent to apply to inputElements: "input, textarea", // Pass activation child elements addClass: "fixfixed" // Pass class...
-
자바스크립트 카운트다운
Pure Javascript Countdown Example (Minute&Second Base) function countdown( elementName, minutes, seconds ) { var element, endTime, hours, mins, msLeft, time; function twoDigits( n ) { return (n <= 9 ? "0" + n : n); } function updateTimer() { msLeft = endTime - (+new Date); if ( msLeft < 1000 ) { element.innerHTML = "countdown's over!"; } else { time = new Date( msLeft ); hours = time.getUTCHours(); mins = time.getUTCMinutes(); element.innerHTML = (hours ?...
-
jQuery 이미지 애니메이션
jQuery image animation 이미지 src값의 증가하는 숫자의 범위는 0000~9999 까지로 하며 파일명 또한 0000~9999까지로 만든다. (네자리 숫자) imgname0000.jpg / imgname-0001.gif / imgname_0002.png… 이미지 확장자는 png/jpg/gif 로 한다. @var rePath; [첫번째 문자] ~ [4자리 숫자.] 전까지의 값을 반환 (4자리 숫자.png/jpg/gif ([ex] 0000.jpg)는 반환값에 포함되지 않는다.) ;(function(global, $){ 'use strict'; var plugin_name = 'animationImg'; var run = false; if (!$.fn[plugin_name]) { $.fn[plugin_name] = function(settings) { if(!run) { //실행여부 체크 run = true; var $this = $(this); var...
-
jQuery plugin 만들기
jQuery 플러그인 제작 프로세스 0. 영역 내, $ 별칭 보호 (function(global, $){ 'use strict'; // $ === window.jQuery })(window, window.jQuery); 1. 플러그인 기본형 쉘 작성 (function(global, $){ 'use strict'; var plugin_name = ''; if ( !$.fn[plugin_name] ) { $.fn[plugin_name] = function() { // 플러그인 코드 }; } })(window, window.jQuery); 2. 체이닝 설정 (function(global, $){ 'use strict'; var plugin_name = ''; if ( !$.fn[plugin_name] ) { $.fn[plugin_name] = function() { // jQuery 체이닝 설정 return this;...
-
jquery.fn
애니메이션 (background-image) /** * @param SECTION {number} * @param WIDTH {number} * @param TIME {number} * @param DELAY {number} * @param STOP {number} */ $.fn.aniJin = function (SECTION, WIDTH, TIME, DELAY, STOP){ TIME = TIME || 200; var num = 0; var playing = null; var $this = $(this); var repeat = setInterval(ani, TIME); function ani() { var bpx = parseInt($this.css("backgroundPositionX")); //백그라운드의 현재 위치값 $this.css({ backgroundPositionX: "-=" + SECTION }); //반복되는 구간 만큼 백그라운드 이동...