웹관련/JavaScript-Jquery45 [자바스크립트] 마우스 휠 이벤트를 활용하자 마우스 휠을 이용하여 이벤트를 만드는경우가 있습니다. 예를 들면 상단에 탑 배너영역이 있는데, 해당 배너영역에서 마우스 휠을 조작할경우아래로 휠을 하면 아래원하는 위치로 이동을 하고 위로 휠을 돌리면 상단으로 올라가게끔 하는 이벤트를 작성해보았습니다. 우선 마우스 이벤트를 활용하기위해 jquery mousewheel 이라는 이벤트를 활용해야했습니다.하지만 파이어폭스에선 mousewheel 인식을 못하기 때문에 파이어폭스에서 인식이 가능한 DOMMouseScroll 이벤트 2개를 동시에 걸어주기위해On 이벤트로 잡아주었습니다. 마우스 스크롤을 아래로 하는지 위로 하는지 알기위해 e 라는 이벤트생성자를 만들어객체를 확인해보니 originalEvent객체 안에 detail 이라는 객체가 휠을 아래로 돌리면 3.. 2016. 12. 13. [자바스크립트] 윈도우 팝업이 차단되어있을경우 경고창 띄우기 요즘은 레이어팝업을 많이 사용하지만, 고객의 요구로 인하여 윈도우 팝업을 사용을 한적이 있었습니다. 근데 요즘 브라우져들은 기본적으로 설정이 팝업 차단설정이 자동으로 되어있다....근데 고객들은 팝업차단이 설정되어있는지 모르고 왜 안뜨냐고 항의를 할수가 있죠... 너님 팝업차단으로 인해 안뜨는거에요 라고 경고창이 필요했다. 기본적으로 윈도우 팝업을 자바스크립트로 띄우는건 간단하다. window.open("http://www.daum.net","_blank"); 요렇게 치면 팝업이 뜬다. 근데 고객 브라우져가 팝업이 차단되었다고 경고창을 띄우기 위해선 아래의 소스처럼 하면된다. var popup = window.open("http://www.daum.net","_blank"); if (popup = nul.. 2016. 11. 16. [자바스크립트] for in 사용하여 객체하나하나 접근하기 오늘 홈페이지작업중 특정 파라메터값을 갖는 URL만 특정페이지로 보내는 작업을 해야했다 데이터 관리를 쉽게하기위해 데이터입력을 객체로 입력하여 루프문을 돌려서 비교하는걸 만들었다. 우선 파라메터값을 추출하기위해 현재페이지의 주소를 가지고와서 파라미터 값만 split 한뒤해당 파라미터값과 내가 입력한 객체에서의 파라미터값을 비교하여 일치할경우 리다이렉션을 시키는 코드를 생각해냈다. 하여 객체를 아래와 같이 작성을 했다. var obj = { value1 : { Name : "MR. MARIUS", jusoSplit : "cate_no=105", jusoHref : "http://www.daum.net" }, value2 : { Name : "COTE DESIGN", jusoSplit : "cate_no=9.. 2016. 11. 15. [자바스크립트] Object 값 불러오는 방법 오늘 게시판작업을 하면서 3시간동안 뻘짓을 하다가 알아낸것이 있습니다. 객체를 하나 만들고 객체안 매칭되는 컬러를 작성해줌으로써 게시판 카테고리 이름과 객체이름이 동일하면 해당 카테고리 색상을 정해주는 코드를 만들었다. 예를 들면 아래와 같이 객채를 생성하였고, var cate_name = { "푸드":"#522700", "뷰티":"#e13022" }; 루프를 돌려서 해당게시판 카테고리 이름을 아래와 같이 가지고와서 var this_text = $(this).text(); $(this).css({ "background-color" : cate_name.this_text }); 하면 끝날줄 알았다.... 근데 근데!!!!!!! cate_name.this_text; 이것만 찍으면 계속 undefined 만나.. 2016. 11. 13. [자바스크립트] 기초 - 현재 페이지 새로고침하기 현재페이지 새로고침 하는 방법 2가지 location.reload(true); location.href = location.href; 너무 글이 짧나요?? ㅎㅎㅎ 2016. 11. 7. [자바스크립트] 날짜 관련 자주사용하는 함수 자바스크립트에서 날짜를 변형해서 사용하는데 자주사용하는 함수라 별도로 기록해둔다 아래의 함수를 사용하게 되면 "2016-09-11" 와 같이 데이터 포맷을 바꿀수 있다. var cur_date = new Date(); console.log(getTimeStamp(cur_date)); function getTimeStamp(d) {var s =leadingZeros(d.getFullYear(), 4) + '-' +leadingZeros(d.getMonth() + 1, 2) + '-' +leadingZeros(d.getDate(), 2); return s;} //숫자를 문자열로 변환과 자리수가 작을경우 앞쪽에 0을 붙힘function leadingZeros(n, digits) {var zero = '';n .. 2016. 11. 7. [자바스크립트] 이메일 드롭다운 선택버튼 - onchange함수 회원가입을 하거나, 이메일을 작성시에 드롭다운 되어있는 사이트를 선택하면 자동으로 입력되는걸 많이 사용합니다. 자바스크립트로 간단한데 또 막상 사용하려고 하면 기억이 안날때가 있어 정리를 해둡니다. onchange를 사용하여 option 이 바뀔때마다 input_email() 함수를 실행을 하게 됩니다. @ 직접입력naver.comnate.comhanmail.netgmail.comyahoo.comyahoo.co.krhotmail.com frm 폼 email_server 안의 value 값을 frm 의 e2의 네임값에 value로 넣어주면 끝~ 2016. 11. 3. [자바스크립트] 입력필드에서 숫자만 입력받기 데이터를 입력받을때 전화번호 입력필드의 경우 숫자만 입력을 받아야 하는경우가 있습니다. 그럴경우 사용하면 좋습니다. 아래의 예제의 경우onKeyDown 의경우 키를 눌렀을때마다 validNum() 함수를 리턴받습니다. See the Pen 입력필드에 숫자만 입력받기 by DeokHwan (@deokhwan) on CodePen. 은근히 폼 입력할때 많이 사용되니 참고하시면 좋을듯 합니다. 2016. 11. 3. [자바스크립트] 즐겨찾기 와 시작페이지 링크만들기 [즐겨찾기 함수 만들기] [시작페이지 함수 만들기] [링크 거는방법] 즐겨찾기추가 시작페이지로 지정 2016. 11. 2. 이전 1 2 3 4 5 다음
