Web Programming/JavaScript 5

Javascript 를 이용한 모바일 화면회전 서치

이번 프로젝트는 반응형 웹을 제작하였지만 급하게 진행되는 바람에 모바일 가로형을 생각하지 않고 진행이 되었고 뒤늦게 가로모드를 차라리 못쓰게 해달라는 요청을하셔서 이를 반영했습니다. 1. 디바이스의 회전을 막는다. - 이는 어플리케이션으로 제작하여 권한을 얻지 못하는한 모바일 브라우저에서는 불가능한 기능입니다. 2. 가로방향 회전을 감지해 반대방향으로 회전시킨다. - 구글링해서 찾았던 처음의 방법입니다. (관련 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 $(window).bind('orientationchange resize', function(event..

jQuery 를 이용한 SelectBox Selected 하는법

저번부터 이어서 작업하는 내용에 버튼이 전부 셀렉트 박스로 바뀌어버려서 기능을 전환시키는게 좀 힘들군요 ... 버튼을 누루면 눌린 버튼을 유지해지는 기능이 달려있는 상태인데 그걸 셀렉트박스에 selected 옵션으로 구현해야 하는경우가 굉장히 많이 있었습니다 생각보다 자주 사용하는데 바빠서 정리를 못했습니다 보통은 컨트롤로에서 플래그를 주고 selected 를 제어했는데 이번엔 좀 특이한 케이스여서 jQuery 로 제어하게 되었내요 1 2 3 선택 예시로 이러한 SelectBox 가 존재할 경우에 value 값이 '1' 인 옵션을 selected 시켜주고 싶으면 1 $("#flag").val("1").prop("selected", true); 이런식으로 사용해주면 됩니다. 추가로 '이외의 옵션을 선택하지..

Modal PopUp 사용하기

이번에 작업을하면서 팝업이 아닌 레이어(?) 를 띄워주어야하는 요청사항이 있었습니다 처음사용해보는 기능이어서 정리해 봅니다 일반 PopUp 기능은 새창을 브라우저에 새창을 열어서 사용합니다 Modal 의 경우는 현재 페이지 위에 다른 숨겨놓았던 HTML 로 덮어 씌우는 느낌입니다 Modal 을 사용하면 별도의 새창 없이 간단한 안내문구나 링크 연결 등을 사용 할 수 있습니다 1 우선 jQuery 를 사용하여 숨겨진 Modal 을 화면에 띄우는 것이므로 jQuery 를 불러옵니다 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 .modal { display: none; position: fixed; z-index: 1; left: 0; top: 0; w..

jQuery 날짜를 지정하는 Datepicker

요즘은 검색에 Datepicker 를 넣지 않는곳이 없는것 같다 요청사항은 다들 비슷한데 검색해보면 뭔가 요청사항을 이리저리 찢어놓은 느낌이라 붙여보았다 데이터 피커에 한글로 표시되게 해주세요 (기타 옵션) 시작일은 해당월에 1일을 Default 로 해주세요 끝일은 당일의 날짜로 해주세요 이 옵션들이 검색하면 꼭 한번에 나오지를 않아서 애먹었다 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 $(function() { //모든 datepicker에 대한 공통 옵션 설정 var thisDate = new Date(); var thisYear = thisDate.g..

XSS 크로스 사이트 스크립팅

입력값에 스크립트 코드를 사용하여 공격하는것을 방지 1 2 3 4 5 6 7 8 9 function XSS_Check(strTemp, level) { if ( level == undefined || level == 0 ) { strTemp = strTemp.replace(/\|\"|\'|\%|\;|\(|\)|\&|\+|\-/g,""); } else if (level != undefined && level == 1 ) { strTemp = strTemp.replace(/\/g, ">"); } return strTemp; } 출처 : https://m.blog.naver.com/yaki80/220717933700 XSS(크로스사이트 스크립팅)대응해란다 갑툭튀 자바스크립트에서 XSS체크할 때 적용할 수 있는 ..