javascript foreach 사용하기

Javascript에서 배열에 담긴 key와 value 를 가져오기 위해서는 for 문을 아래 예와 같이 이용하면 PHP에서 사용하는 foreach 와 같은 효과를 얻을 수 있다. var arr = new Array(‘aaa’, ‘bbb’, ‘ccc’, ‘ddd’); for(var key in arr) { document.write(key + ” = ” + arr[key] + “<br />”); }   덤으로 배열에 담긴 값을 셀렉트박스에 추가 하는 소스를 첨부한다. <select name=”fruit_selectbox” id=”fruit_selectbox”> </select> <script type=”text/javascript”> var data = new Array(“사과”, “배”, “귤”, “딸기”, “바나나”, “오렌지”); var obj = document.getElementById(“fruit_selectbox”); obj.options.length = 0; obj.options[0] = new Option(“과일선택”, “”); for(var key in data) { var value = data[key]; obj.options[obj.options.length] = new Option(value, key); } Continue reading javascript foreach 사용하기

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

브라우저가 웹페이지를 파싱할때 스크립트 부분을 만나면 파싱을 멈추고 해당 스크립트를 다운받아 실행 하는데 이를 지연시킬 수 있는 속성으로 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를 이용한 레이어 가운대 띄우기 (중앙정렬, 멀티레이어, 가운데 위치 자동조절)

jquery를 이용하여 마스크를 현재창 전체로 씌운다음 가운데로 원하는 레이어를 띄워주는 함수 입니다. 그외 창 사이즈를 조절하면 자동으로 레이어의 위치도 가운데로 다시 정렬되며, 레이어를 띄운 상태에서 다른 레이어를 또 띄우게 되면 기존 레이어 위에 마스크와 새로운레이어를 다시 띄우게 됩니다. 백번 말하는 것보다 한번 보는게 낫다고 아래 링크로 들어가서 레이어를 순차적으로 띄워보시고 창 사이즈를 조절 해보세요.!! 여기로 자바스크립트 소스 //레이어 가운데 띄우고 마스크 띄우기 function toggleLayer( obj, s ) { var zidx = $(“#lay_mask”).css(“z-index”); if(s == “on”) { //화면중앙에 위치시키기 var left = ( $(window).scrollLeft() + ($(window).width() – obj.width()) / 2 ); var top = ( $(window).scrollTop() + ($(window).height() – obj.height()) / Continue reading jquery를 이용한 레이어 가운대 띄우기 (중앙정렬, 멀티레이어, 가운데 위치 자동조절)