this.$handleButtonClick.bind(this)

코드 //한글 입력제한 $(selector).on('keyup', function(event){ var inputVal = $(this).val(); var regex = /\[ㄱ-ㅎ|ㅏ-ㅣ|가-힣\]/; if(regex.test(inputVal)){ $(this).val(''); }else{ return; } }); // 숫자, - 만 입력되도록 수정 $(selector).on('keypress',function(event){ var key = event.charCode || event.keyCode || 0; // keyCode를 가져온다 var keyValue = event.key; // jquery로 눌려진 값을 가져온다 var str = $(select..

javascript(jquery)에서 resize/scroll 이벤트를 걸면 resize/scroll 되는 동안 이벤트가 반복적으로 계속 호출된다. 이벤트 내부의 내용이 복잡할 수록 브라우저에게 과부하를 주게 되므로 resize가 끝났을때 한번만 실행되도록 해줄 필요가 있다. 1. 먼저 아래와 같이 한번만 실행될 내용을 함수로 작성한다. function resizeDone(){ // 함수 내용 작성 }2. resize/scroll 이벤트를 걸어준다. $(window).on('resize', function(){ // resize 후 한번만 실행 clearTimeout( timer ); timer = setTimeout( resizeDone, delta ); });resize/scroll 이..

작업 내용 중 업데이트 된 날짜가 오늘로부터 2주 내에 있을 경우에만 'new' 아이콘을 보여줘야하는 것이 있었다. 하다보니 Date 객체와 관련된 계산이 혼란스럽게 느껴졌다.이전에 확실히 해두지 않고 넘어간 부분은 언젠가 다시 부딪힐 날이 반드시 오는 것 같다. 기타 부수적은 부분은 빼고오늘로부터 기준날짜까지의 '일수'를 계산하는 방법을 알아보자 1) 기준날짜 설정 var updDate = new Date(year,month,day); // 기준 날짜 var today = new Date(); // 오늘 날짜 먼저 기준날짜를 설정한다. 생성자의 파라미터인 year, month, day는 해당하는 값이 있다고 가정하자.오늘날짜는 그냥 기본 생성자를 호출해서 리턴받는다. 2) Date 연산 var curr..

문서 객체 모델 넓은 의미로 웹 브라우저가 HTML 페이지를 인식하는 방식이고, 좁은 의미로는 document 객체와 관련된 객체의 집합이다. 요소노드란 HTML 태그를, 텍스트 노드는 요소노드 안에 있는 글자를 의미한다. 웹페이지가 처음 HTML 페이지에 적혀 있는 태그들을 읽으며 생성하는 것을 "정적으로 문서 객체를 생성한다"라고 표현한다.반면, 자바스크립트로 원래 HTML 페이지에는 없던 문서 객체를 생성하는 것을 "동저긍로 문서 객체를 생성한다"라고 표현한다. -----------------------------------------------------------------------------------------createElement(tagName)요소 노드를 생성한다 createTextN..

BOM, Browser Object Model그림1. DOM 구조 window 객체 window 객체는 브라우저 기반 자바스크립트의 최상위 객체. open(URL, name, features, replace) 새로운 window 객체를 생성합니다. screen객체 screen 객체는 웹 브라우저의 화면이 아니라 운영체제 화면의 속성을 가지는 객체. location 객체 location 객체는 브라우저의 주소 표시줄과 관련된 객체. 프로토콜의 종류, 호스트 이름, 문서 위치 등의 정보가 있음. navigator 객체 navigator 객체는 웹 페이지를 실행하고 있는 브라우저에 대한 정보를 갖고 있음. 속성으로는 브라우저의 코드명, 이름, 버전, 사용중인 운영체제의 시스템 환경, 브라우저의 전체적인 정보 ..