웹페이지 로딩시 자바스크립트의 실행을 지연시키는 속성

브라우저가 웹페이지를 파싱할때 스크립트 부분을 만나면 파싱을 멈추고 해당 스크립트를 다운받아 실행 하는데 이를 지연시킬 수 있는 속성으로 defer, async 을 사용 할 수 있습니다. async 속성은 HTML5 부터 추가된 속성이다. 사용방법은 아래와 같이 script 태그에 해당 속성을 추가 해주면된다. <script defer src=””></script> // 또는 <script async src=””></script> 두개의 차이점으로는 스크립트가 실행되는 시점이 다른데 defer의 경우 문서의 스크립트 부분을 만나면 해당스크립트를 파싱과 동시에 다운 받은뒤 파싱이 끝나면 해당 스크립트를 실행하고, async의 경우 파싱과 동시에 스크립트 파일을 다운 받은뒤 스크립트의 다운이 모두 끝나면 바로 스크립트를 실행 한다. 아래 이미지는 http://peter.sh/experiments/asynchronous-and-deferred-javascript-execution-explained/ 에서 제공하는 javascript의 실행 시점에 대한 이미지 이다. defer, async 속성은 브라우저별로 적용되는 Continue reading 웹페이지 로딩시 자바스크립트의 실행을 지연시키는 속성

자바스크립트로 주간(일~토) 셀렉트 박스 만들기

년도와 월을 선택하면 해당 년/월에 포함 되어있는 주 시작일과 종료일을 셀렉트박스로 만들게 하는 함수 입니다. 요령 모양의 셀렉트 박스 입니다. 작동되는 모습은 예제링크를 통해서 확인해주세요. 예제링크 function makeWeekSelectOptions() { var year = $(“#sh_year”).val(); var month = $(“#sh_month”).val(); var today = new Date(); var sdate = new Date(year, month-1, 01); var lastDay = (new Date(sdate.getFullYear(), sdate.getMonth()+1, 0)).getDate(); var endDate = new Date(sdate.getFullYear(), sdate.getMonth(), lastDay); var week = sdate.getDay(); sdate.setDate(sdate.getDate() – week); var edate = new Date(sdate.getFullYear(), sdate.getMonth(), sdate.getDate()); var obj = document.getElementById(“sh_week”); obj.options.length = 0; var seled = “”; while(endDate.getTime() >= edate.getTime()) { var sYear = sdate.getFullYear(); var sMonth = (sdate.getMonth()+1); Continue reading 자바스크립트로 주간(일~토) 셀렉트 박스 만들기

jquery를 이용한 슬라이드(slides)배너

jquery에서 사용할 수 있는 slidesjs 라는 좋은 툴이 있지만, 퍼블리셔가 작업해서준 HTML 구조와 CSS 변경 작업이 어려워서 직접 만들었습니다. 어떤건지는 여기서 확인! slidesjs 보다 별로이니 되도록이면 slidesjs 를 쓰도록 하자! 그래도 나름 비슷하게 만든다고 만들었음 자바스크립트 부분 var slides_auto_time = 5000; //자동으로 다음이미지를 불러올시간 var slides_ani_time = 500; // 애니메이션 초 var slides; var slides_pagination; var slides_total = 0; var slides_idx = 0; var slides_time = null; var slides_click_page = -1; var slides_move_img = -1; var slides_button_lock = 0; $(document).ready(function () { slides_main(); }); function slides_main() { slides = $(“#slides .main_img .content”); //슬라이드 컨텐츠 영역 slides_pagination = $(“#slides .btn_area p”); Continue reading jquery를 이용한 슬라이드(slides)배너

javascript comma and uncomma 2

이전에 올린 스크립트를 수정해서 -기호를 포함하여 천단위마다 콤마를 찍거나 뺄수 있도록 변경하였다. 소스 //콤마찍기 function comma(str) { str = String(str); var minus = str.substring(0, 1); str = str.replace(/[^\d]+/g, ”); str = str.replace(/(\d)(?=(?:\d{3})+(?!\d))/g, ‘$1,’); if(minus == “-“) str = “-“+str; return str; } //콤마풀기 function uncomma(str) { str = String(str); var minus = str.substring(0, 1); str = str.replace(/[^\d]+/g, ”); if(minus == “-“) str = “-“+str; return str; }   jquery를 이용해서 아래와 같이 이용 할 수 있다. //jquery 라이브러리 필요 function inputNumberFormat(obj) { $(obj).keyup(function (event) { if(event.which != “9”) { obj.value = comma(uncomma(obj.value)); } }); }   Related posts: javascript comma Continue reading javascript comma and uncomma 2

javascript comma and uncomma

자바스크립트에서 숫자를 표기할때 3자리마다 콤마를 찍어줘야 할 때가 있다 자주 사용하는 기능인데 매번 만들기란 여간 귀찮은게 아니다. 콤마찍기 //콤마찍기 function comma(str) { str = String(str); return str.replace(/(\d)(?=(?:\d{3})+(?!\d))/g, ‘$1,’); } 콤마풀기 //콤마풀기 function uncomma(str) { str = String(str); return str.replace(/[^\d]+/g, ”); } 복사 붙여넣기로 사용하자! input box에서 사용자 입력시 바로 콤마를 찍어주기 위한 함수도 추가 한다. function inputNumberFormat(obj) { obj.value = comma(uncomma(obj.value)); } //<input type=”text” onkeyup=”inputNumberFormat(this)” />   Related posts: javascript comma and uncomma 2 이전에 올린 스크립트를 수정해서 -기호를 포함하여 천단위마다 콤마를 찍거나 뺄수… 한글로 표기한 숫자를 정수로 변환 하여 출력하는 Java소스코드 한글로 표기한 숫자를 정수로 변환하여 출력하는 자바 소스코드이다. Continue reading javascript comma and uncomma