Develop/HTML & JavaScript & CSS (51) 썸네일형 리스트형 Slick Carousel의 이벤트에서 슬라이드 요소를 가져 오는 방법 $('.your-element').on('afterChange', function(event, slick, currentSlide){ console.log(currentSlide); }); [Html5] History/State를 이용하여 뒤로가기 이벤트 체크하기 0. 들어가기 전에 HTML5에서는 history/state라는 페이지에 대한 상태를 저장하는 기능이 있습니다. pushState나 replaceState등을 이용해서 페이지를 나누고 값을 추가해서 던져주는등 단일 페이지에서 URL을 다르게 주기 위해서 많이 사용하는 기능이지만 여기에서는 뒤로가기를 할 때 발생되는 이벤트를 제어하기 위해서 사용하는 케이스를 짤막하게 소개해 봅니다. 1. HTML5에서의 뒤로가기 체크 이벤트 호출 특정 페이지 혹은 전 페이지에서 뒤로가기를 할 때 뒤로가기가 아니라 새로고침을 하고 싶다면 아래와 같은 식으로 사용 할 수 있습니다. history.pushState(null, null, ''); window.onpopstate = function(event) { var prev.. form내에 선언된 button과 input 태그에서 임의로 submit이 동작하는 경우 form내에 선언된 button과 input 태그에서 임의로 submit이 동작하는 경우 1. button에서 의도와 다르게 계속 submit이 되는 경우 type="button"을 선언해 주면 해결됨 아래와 같은 경우 버튼을 클릭시 form submit이 발생한다. 등록 2. input text 입력 후 Enter 키 입력시 submit 이벤트가 발생하는 경우 form 에서는 아래와 같이 event 를 제어할수 있음, 그외 jquery 등으로 이벤트 제어 가능 jQuery 배열 중복 제거 var names = ["Mike","Matt","Nancy","Adam","Jenny","Nancy","Carl"]; var uniqueNames = []; $.each(names, function(i, el){ if($.inArray(el, uniqueNames) === -1) uniqueNames.push(el); }); Date 날짜 계산 기억이 안나면 아래의 글 참고하기 https://blog.leocat.kr/notes/2017/07/24/javascript-add-days var calDate = function (){ var result = false; var sdd = $('input:text[id=start_date]').val(); var edd = $('input:text[id=end_date]').val(); var ar1 = sdd.split('-'); var ar2 = edd.split('-'); var da1 = new Date(ar1[0], ar1[1]-1, ar1[2]); var da2 = new Date(ar2[0], ar2[1]-1, ar2[2]); var diff = da2.getTime() - da1.get.. jQuery 이벤트 종류 ⊙ 이벤트(Event) •기본적으로 전역에 작성된 프로그램은 프로그램이 실행됨과 동시에 바로 실행되지만 함수(Function)으로 묶인 부분은 호출되지 않으면 실행되지 않는다. •이러한 이유 때문에 원하는 시점에 원하는 기능을 실행하기 위해 프로그램이 실행되는 계기가 필요하다. •이런 역할을 하는 것이 Event이며, 모든 함수는 Event와 연결되어 호출되는 형태를 가진다. ◆ jQuery의 이벤트 처리 방식 - 객체에 직접 이벤트를 등록 - 선언적 함수 - function sum(){ alert(“hello”); } $(“div”).click(sum); - 익명적 함수 - $(“div”).click(function(){ alert(“hello”); }); ◆ jQuery 마우스 이벤트 이벤트 설명 c.. jQuery 이벤트 처리 방법 문서 전체 장점 - 한번만 선언하면 ajax나 html를 그려 넣더라도 이벤트가 동작한다 $(document).on('click', '#get_main_dis_goods', function(e) { alert(1); }); 특정 id 또는 class에 이벤트 지정 단점 해당 셀렉터를 가진 태그가 재 설정되면 이벤트가 유실됨 $('#set_status_complete').on('click', function(e) { alert(1); }); 이벤트를 부득이하게 js단에서 계속 선언하게 될 경우 이벤트 중복되지 않게 선언할 수 있다 $('#set_status_complete').off().on('click', function(e) { alert(1); }); 키보드 입력 이벤트 $('#set_status_c.. Javascript 코드 작성규칙 Javascript 코드 작성규칙 함수 한문자 이름은 피하십시오. 이름에서 의도를 읽을 수 있도록 하십시오. // bad function q() { // ...stuff... } // good function query() { // ..stuff.. } 소문자 낙타표기법(camelCase)을 사용하십시오. function thisIsMyFunction() {}; Class와 생성자에는 PascalCase를 사용하십시오. function User(options) { this.name = options.name; } var good = new User({ name: 'yup' }); private 메서드나 프로퍼티명에 접두어로 밑줄을 붙여 구별하기 쉽게 합니다. // bad var persion = { ge.. 이전 1 2 3 4 5 6 7 다음