웹개발자의 기지개

pc상의 브라우저로 pdf 파일을 자동로딩을 할때, 형식으로 한다면, 크롬에서는 자동 로딩이 된다. IE의 경우, 아크로벳 리더같은 플러그인형태로 설치가 되어 있어야 브라우저 상으로 자동로딩이 된다. 그런데, 문제는 모바일상으로 바로 PDF 파일을 로딩하고 싶을때이다. 이럴때 유용하게 쓸 수 있는 오픈소스가 pdf.js 이다. mozilla.github.io/pdf.js/ PDF.js PDF.js A general-purpose, web standards-based platform for parsing and rendering PDFs. Download Demo GitHub Project mozilla.github.io mozilla.github.io/pdf.js/getting_started/#downl..

먼저 필자가 작업한 네이버지도 결과 화면이다. 그리고, 네이버 api 연동 소스는 다음과 같다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 var mapOptions = { center: new naver.maps.LatLng(35.854721, 128.482413), zoom: 16 }; var map = new naver.maps.Map('map', mapOptions); var marker = new naver.maps.Marker({ position: new naver.maps.LatLng(35.854721, 128.482413), title: '계명대출판부\n보산..

Button 태그의 클릭시 기본적으로 Submit 되도록 되어 있는데, 프로그램을 할때 유효성체크 확인을 위해서는 클릭할때마다 Submit 되어 처리되어 버리면 곤란하다. Client Script 상에서 유효성 체크를 위하여 Submit 되는 현상을 막아보자. 1. HTML 태그 상으로 type="button" 속성값을 추가하자. 버튼 2. javascript 내에서 return false; 나 return; 를 입력하여 Submit 되는 현상을 막는다. javascript 소스내에서 흐름상 막는방법이다. 3. javascript 내에서 이벤트 콜백처리해서 막는다. $(document).on('click','.generateList li button', function (e) { var label = $..

웹프로그램을 할때 아주 기본적인 유효성 검사 소스이다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 Document 아이디 비밀번호 로그인 function loginChk() { var form = document.f1; if (!form.user_id.value) { alert("아이디를 입력해 주십시오."); form.user_id.focus(); return; } if (!form.passwd.value) { alert("비밀번호를 입력해 주십시오."); form.passwd.focus(); return; } form.action ..

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 // 3자리마다 쉼표구분하기 function commify(obj,n) { var reg = /(^[+-]?\d+)(\d{3})/; // 정규식 n += ''; // 숫자를 문자열로 변환 while (reg.test(n)) { n = n.replace(reg,'$1' + ',' + '$2'); } obj.value = n; //obj.innerText = n; } function commify2(n) // 순수하게 쉼표찍기 { var reg = /(^[+-]?\d+)(\d..

코딩을 하다보면 팝업형식의 자식창을 새롭게 띄워서 프로그램 작업을 하다가 그 아래의 부모창의 내용을 자동으로 새로고침 시키고 싶을때가 많다. 이때 간단히 javascript 상으로 아래 코드를 추가하면 된다. opener.location.reload(); 참고 : http://blog.naver.com/PostView.nhn?blogId=bigale&logNo=100159332079

타이머를 Progress 진행바 형태로 색깔을 넣어서 구현해 보았다. 1초단위로 타이머가 깎이면서, 진행바는 점점 짧아 진다. 완료후에는 완료 alert 창이 나타난다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 Javascript Progress Bar #myProgress { width:400px; background-color:#ddd; } #myBar { width:400px; height:30px; background-colo..

실무에서 자주 쓰이는 부분인데 간단히 정리해 본다. 팝업 형태의 작업페이지를 새로 띄우고 거기서 작업을 완료한 뒤에 이 새창을 닫기 전에 그전의 부모창을 refresh 시키는 간단한 소스이다. 위의 소스상에서 self.close() 나 window.close() 모두 같은 표현이다.