맛집 여행 캠핑 일상 생활

HTML5 CANVAS IE 10, 11 에서 터치이벤트 익스플로러 10, 11, 엣지브라우저에서 터치이벤트(mousedown, mousemove 등)가 안 먹힌다.이런 경우엔 아래 처럼 처리를 해주면 된다. (핀치투줌은 none -> pinch-zoom) if(window.PointerEvent) { // for IE11$('#drawCanvas').css({'touch-action':'none'});} else if(window.MSPointerEvent) { // for IE10$('#drawCanvas').css({'-ms-touch-action':'none'});} else {} css 로 바로 처리를 하여도 된다.

JAVASCRIPT AJAX 사용방법 jQuery를 사용하면 조금더 간단하지만 자바스크립트로 ajax를 사용하는 방법에 대해서 알아보자.AJAX 는 "Asynchronous JavaScript And XML" 의 약어이다. ▶ ajax.js ( 공통적으로 사용되는 커스텀 함수 )function getXMLHttpRequest() {if (window.XMLHttpRequest) {return new XMLHttpRequest();} else if (window.ActiveXObject) {try {return new ActiveXObject("Msxml2.XMLHTTP");} catch(e) {try {return new ActiveXObject("Microsoft.XMLHTTP");} catch(e1)..

JAVASCRIPT 페이지 로딩 실행시간 체크 아래 그림은 window.performance.timing 을 표현한 그림이다. ( 출처 : https://www.w3.org/TR/navigation-timing/ )responseEnd 와 loadEventEnd 시간차가 현재 페이지가 실행된 시간이다. window.onload = function(){setTimeout(function(){ var t = performance.timing.loadEventEnd - performance.timing.responseEnd;console.log(t);}, 0);} 페이지를 호출한 시간부터 체크는 navigationStart 와 loadEventEnd 차이를 구하면 된다.

JAVASCRIPT 동적변수명 사용방법 자주는 아니겠지만 가끔은 동적변수명이 필요할 때가 있을 것이다.이런 경우엔 eval 함수를 사용하면 된다. 아래에 간단한 예제를 보면 이해가 쉬울 것이다.var str_1 = "1111";var str_2 = "2222";var str_3 = "3333";for(var i=1; i

CANVAS 이미지 회전시키기 캔버스에서 image 를 회전시킬 수 있다.scale 1 이상은 확대의 의미이다.

JAVASCRIPT substr substring 두 함수 차이점 첫번째 인자만으로는 결과값이 똑같다. var str = "1234567890"; var ret1 = str.substr(2); // 결과 34567890 var ret2 = str.substring(2); // 결과 34567890 하지만 두번째는 다르다. var str = "1234567890"; var ret1 = str.substr(2,7); // 결과 3456789 var ret2 = str.substring(2,7); // 결과 34567 두번째 인자의 의미는 인덱스값을 의미한다.

JAVASCRIPT 배열 FIFO Queue 형태로 넣는 방법 배열에서 push 와 pop 을 사용하면 First In Last Out 이 된다.그런데 pop 대신에 shift 를 사용하면 First In First Out 이 된다. 아래는 간단하게 테스트 해 볼 수 있는 코드이다.var a = new Array();for(var i=0; i

HTML5 웹스토리지 localStorage sessionStorage 예제 브라우저에 데이터를 저장할 수가 있는데 localStorage 와 sessionStorage 가 있다.localStorage 는 일부러 지우지 않는 이상 영구적으로 저장이 가능하며,sessionStorage 는 브라우저를 닫으면 지워진다.그리고 최대 저장용량은 브라우저 마다 다르긴 하겠지만 도메인별 5메가 정도는 저장이 될 것이다. 사용방법에 대해 알아보자.var obj = {item:'localStorage',data:'1234'};localStorage.setItem('item1', JSON.stringify(obj));var obj = localStorage.getItem('item1');alert(JSON.parse(ob..

JAVASCRIPT Web Worker 를 이용한 Background 작업처리 데이터 처리시 시간이 오래걸리는 작업은 Worker 를 이용해서 multi thread 처리가 가능하다.익스플로러는 10 버전 부터 지원한다. Uncaught DataCloneError: Failed to execute 'postMessage' on 'Worker': An object could not be cloned. 처리 도중 위와 같은 에러는 데이터 전달시 JSON.stringify 와 JSON.parse 를 이용하면 된다. ▶ Web worker 예제var worker = null;function startWorker() {if(typeof(Worker) !== 'undefined'){worker = new Worke..

JAVASCRIPT SMS 문자열 바이트 계산 SMS 인지 LMS 인지 판단 하기 위해서 문자열의 바이트 계산이 필요해서 만들어 보았다.여러번 테스트 해서 얻은 결과물이다.하지만 또다른 코드값이 있을 수는 있다.php 의 addslashes 처럼 역슬래쉬 문자가 붙는 특수문자는 쌍따옴표("), 따옴표('), 슬래쉬(/), 역슬래쉬(\), 파이프라인(|) 이다.이 문자는 문자전송시에 역슬래쉬 문자가 붙어서 전송되므로 1바이트씩 늘어나게 된다.그리고 아스키코드가 아닌 문자는 2바이트로 계산되어 진다.마지막으로 엔터문자는 브라우저 마다 다른데 "\n" 만 붙는게 있고 "\r\n" 으로 값이 들어오는 것도 있다.뭐 어쨌든 엔터문자는 1바이트로 계산을 하면 된다.function get_sms_length(str)..