본문 바로가기

Javascript

객체 안의 프로퍼티 접근 객체의 프로퍼티에 접근하는 방법에는 크게 2가지가 있다. "." 연산자를 이용하던가 "[]"를 이용하는 것이다. 예를들면 다음과 같다.object.property;object['property'];object.method();object['method']();장단점이 있겠지만 "."를 사용하는게 간단하고 보통 그렇게 사용하고 있다. 하지만 "[]"를 이용함면 프로퍼티명을 id와 같은 텍스트로 선택할 수 있다. 별로 사용할 일은 없겠지만, 생각하기에 따라 여러가지 확장성을 고려해서 작업이 가능하게 되겠다. 더보기
javascript Boolean 값 javascript에서는 모든 자료형을 상황에 따라 자동으로 형변환해준다. 알고쓰면 참 편리한 기능이라 하겠다. 당연한 얘기지만 형변환에는 규칙이 있다. 그동안 사용해왔지만 정리해본다. Boolean 값으로의 형변환 규칙은 다음과 같다.null, undefined 값은 false가 된다.숫자 0, NaN은 false가 된다.빈문자열 ''은 false가 된다.그 외의 모든값은 true가 된다.var test1 = document.getElementById('text'); if(test1){if(test1.value){alert('값 있음');}else{alert('값 없음');}}else{ alert('태그 없음');} 위 코드처럼 Object로 사용해도 편하게 사용할 수 있고 값의 유무확인도 간단하게 할.. 더보기
타이머 만들기 시분초를 계산하는 타이머를 만들어보았다. 처음에 다른 사람이 짠 소스를 봤으나 왠지 마음에 들지않아 새로 만들었다. 하지만 내가 만들어도 맘에들지 않는구나... 좀더 쉽게 심플하게 만들고 싶으나 다음에 도전해보자. 시간 카운트60시60분60초 시간 카운트 60시 60분 60초 더보기
달력 만들기 jquery를 이용해 달력을 만들어보자. 태그도 동적으로 생성하여 만들어보았다. 어떤사람은 이렇게 만들면 보기 어렵다고 한다. 나는 동적생성이 편하므로 그렇게 작업하겠다. 위에는 만든 샘플로 생성한 달력이다. 다음은 생성시키는 부분이다.// 달력 생성$.fn.showCalendar = function(thisMonth){var tmpMonth = this.initCalendar(thisMonth); // 달력 월 초기화var weekDateCntForMonth = this.getThisDay(); // 오늘의 요일this.initYearMonthTag(); // 년월 출력this.intCalendarTag(); // 전체 태그 생성this.intWeekTag(); // 주간 태그 생성this.initFr.. 더보기
D-DAY 계산 및 파폭, 사파리 버그 기존에 D-DAY 계산 스크립트가 있었다. 다음과 같다. 이게 사파리와 파이어폭스에서 D-0으로만 찍힌다. 그런데 Date부분이 눈에 거실려서 수정해주니 사파리 파이어 폭스에서도 잘 된다. 그리고 결정적으로 버그까지 있다. ㅡㅡ; 다음은 수정한 소스이다. 버그는 오늘까지 포함한 날을 계산해서 보여준다. 만일 내일 이벤트일이면 위에 소스는 D-2가 되는 것이다. 간만에 해보는거라 내가 잘못생각하는줄 알고 네이버의 D-DAY계산을 돌려보았다. 내 생각이 정확했다... 그리고 두번째 소스를 보면 MM-1이라고 월을 계산했는데, Date 객체의 특성이니 기억하면 되겠다. 더보기
소셜네트워크에 글올리기 PC에서 글올리는 스크립트를 사용하다가 모바일에 연동할 일이 생겨 그대로 사용해 보았다.하지만 안된다.... 트위터와 미투데이는 잘 되지만, 페이스북은 혼자 안된다. 연동하는 방식이 다르다.일딴 완성된 버젼을 보면,//SNS 연동스크립트function goTwitter(msg,url) {var href = "http://twitter.com/share?text=" + encodeURIComponent(msg) + "&url=" + encodeURIComponent(url);var a = window.open(href, 'twitter', 'toolbar=no,status=no,width=800,height=550,directories=no,scrollbars=no,location=no,resizable=.. 더보기
단축키를 눌러 특정위치로 이동 웹표준으로 인해 단축키로 특정위치로 이동하는 소스가 필요하다고 해서 샘플소스를 받았는데 크로스 브라우징이 전혀 안되있어서 jquery로 수정해서 만들어 보았다. 좀더 정리하면 좋겠으나 말그대로 샘플이므로 그냥 두기로 했다. 추가 설명을 하자면 파폭에서 keyCode가 먹지 않는 관계로 event.charCode를 추가해주었다. 대문자 Q, W, E R 에 대한 키보드 입력값에 따라 해당 위치로 이동합니다. H를 누르시면 컨텐츠 상단 (home)으로 설정된 곳으로 이동합니다. ID는 cntQ ID는 cntW ID는 cntE ID는 cntR 더보기
레이어를 화면 중앙에 띄우기 작업을 하다보니, 레이어를 스크롤에 상관없이 자동으로 화면 중앙에 띄우는 소스를 많이 보았다. 그런데 좀더 편하게 사용하고 싶어서 찾다가 커스텀 메서드를 만들어 사용하는게 가장 편하다는 생각이 들어서 만들었다. 사실 만들어 사용한지는 좀 됬지만, 귀차니즘으로 이제야 정리해본다./** * showLayer: 레이어를 브라우저 중앙에 표시 */$jq.fn.showLayer = function(){ var win = $jq(window); var winH = win.scrollTop() + ((win.height() - $jq(this).height()) / 2); var winW = win.scrollLeft() + ((win.width() - $jq(this).width()) / 2); $jq(this)... 더보기
offsetParent() w3shools를 보다가 offsetParent()함수의 기능이 이해가 안가서 찾아보았다.jquery홈페이지에서 찾아보니 금방 알 수 있어 좋구나.http://docs.jquery.com/Traversing/offsetParent offsetParent()는 첫번째로 매칭되는 부모를 선택한다. 선택의 기준은 가장 가까운 위치에 있는 position(relative or absolute)을 가지고 있는 부모를 말한다. Click button to set the background color of the first positioned parent element of this paragraph.Set background-color 위 코드의 경우는 버튼을 클릭하면 부분의 색이 바뀌게 된다. 여기서 조금 수정해.. 더보기
이벤트 처리(펌) 이벤트 동적할당에 대한 자료를 찾던중 정리가 잘된자료를 찾아 퍼왔다. 원문: http://m.mkexdev.net/147 다른 프로그래밍 언어와 마찬가지로 스크립트 환경에서도 이벤트 처리가 많은 부분을 차지하게 된다. 기존 자바스크립트의 addEventListener와 같은 함수를 랩핑한 jQuery 만의 이벤트 처리 방식을 정리해 보자. 기본 이벤트 처리 click, mousedown과 같은 일반적인 이벤트 이름을 그대로 사용하여 이벤트 처리기를 연결할 수 있다. .이벤트명(이벤트처리기 함수) 선택자로 선택된 element에 이벤트명(ex:click, mousedown 등)을 지정해 특정 이벤트 발생시 이벤트처리기 함수가 실행되도록 한다 다음은 이 방식을 이용해 click, hover 두 이벤트를 처리.. 더보기

티스토리툴바