25% 25%

[출처] 생활코딩 http://opentutorials.org/module/904/6760 inline _ 이벤트가 발생한 대상을 필요로 하는 경우 this를 통해서 참조 (이벤트가 동작하고 있는 Element를 가리킴) ex) _ 장점 : 태그에 직접기술되어 찾기 쉽다 _ 단점 : javascript가 html(정보)에 혼재되어 있기 때문에 관리가 어렵다. 속성안에 작성하기 때문에 복잡한 코드 작성이 어렵다 property listener _ 이벤트 객체는 이벤트가 실행될 때 이벤트 핸들러의 인자로 전달된다 _ 현재 발생한 이벤트에 대한 다양한 정보를 얻을 수 있다 _ event.target : 이벤트 발생시점에서 이벤트 발생 지점을 확인 _ IE8이하 버전에서는 event 객체를 핸들러 객체의 인자가..

[출처] 생활코딩 http://opentutorials.org/course/1 엘리먼트의 위치와 크기 getBoundingClientRect() : ClientRect 객체를 반환 top - 문서의 최상단으로부터 거리 left - 문서의 시작점에서 객체가 시작되는 왼쪽 지점까지 거리 height - 객체의 높이 width - 객체의 폭 right - 문서의 시작점에서 객체가 끝나는 오른쪽지점까지 offsetParent() : Element의 top, left 측정기준을 확인 -CSS position 값이 static인 table 과 같은 엘리먼트가 부모인경우 offsetParent는 부모 객체가 된다. 뷰포트 setInterval(function(){}, time); -function을 time 간격으로..

[출처] 생활코딩 http://opentutorials.org/module/904/6700 Node 객체 - DOM의 시조, DOM의 최상위 객체 - HTML 코드를 객체화 시킨 것이 DOM - Node 객체는 객체들의 관계성을 정의 관계 : 엘리먼트 요소들이 어떻게 연결되어있는지는 Node객체를 통해 확인가능 - Node.childNodes - Node.firstChild - Node.lastCHild - Node.nextSibling - Node.previousSibling - Node.contains() 자식관리 - Node.appendChild() - Node.removeChild() Node 관계 API 프로퍼티 - Element.firstChild : 첫번째 자식 Element - Elemen..

Element 조회 API document.getElements vs element.getElements - document : 문서 전체 내용중에서 조회 - element : 특정 객체의 하위 엘리먼트에서 조회 Element 속성 API - element.getAttribute(target) : 속성값 가져오기 - element.setAttribute(target, value) : 속성값 추가/변경하기 - element.removeAttribute(target) : 속성 삭제하기 - element.hasAttribute(target) : 속성 존재여부 확인 속성 API 보충 - 속성과 Property의 차이 target.setAttribute('class', 'important'); // 속성방식 ta..

[출처] 생활코딩 http://opentutorials.org/module/904 jQuery 객체 - $() 함수를 실행한 결과의 객체 - jQuery가 선택한 Element를 제어 $.css(arg1, agr2) - arg1만 입력하면 css 속성값을 가져옴 - arg2까지 입력하면 css 속성을 arg2로 수정 .constructor - HTML Element 객체의 타입을 확인 $('arg1') - arg1 - css 선택자 : CSS 태그에 해당하는 jQuery Object 반환 - arg1 - id 선택자 : ID를 갖는 해당하는 jQuery Object 반환 $().map(function(index, elem){}); - jquery로 선택한 Element를 순회하면서 function을 호출..

한치 앞을 내다보지 못한 코드의 결말 웹 화면을 구성하면서 javascript를 활용하다보면, 개발자라면 누구나 금액에 대한 자릿수를 표현해야 하는 경우가 발생한다. Django Framework의 Template 에서 제공되는 기능을 사용할 수 있으면 좋지만 Template을 사용하지 못하는 경우가 간혹있다. 예를 들어 input 되는 숫자값의 Keyup, Keydown Event를 사용하여 다른 값을 계산해내는 경우가 대표적인 예이다. 이번에 다루고자하는 코드는 좀 특별한 경우이다. Django View에서 계산해낸 값에 포함된 (,)를 제거하여 javascript 숫자형으로 바꾸고 이 값을 특정 공식으로 계산을 해야 하는 과정이 필요했다. 코드는 아래와 같다. 1) id Selector를 사용해 필..

본 게시물은 Effective Javascript의 내용을 재구성하여 작성되었음을 알립니다. 저작권 문제 발생시 게시물이 비공개 될 수 있습니다. - Error 객체와 디버거에서 스택 추적을 개선하기 위해 기명 함수 표현식을 사용하라.- ES3과 버그가 있는 자바스크립트 실행 환경에서 함수 표현식이 스코프를 Object.prototype으로 오염시킨다는 점을 주의하라. - 버그가 있는 자바스크립트 실행 환경에서 기명 함수 표현식의 호이스팅과 중복 할당을 주의하라.- 기명 함수 표현식의 사용을 자제하고, 배포하기 전에 제거하라.- ES5를 제대로 구현한 실행 환경에 배포한다면, 걱정할 필요가 없다. 자바스크립트 함수는 문맥에 따라 의미가 달라진다. function double(x) { return x * ..

본 게시물은 Effective Javascript의 내용을 재구성하여 작성되었음을 알립니다. 저작권 문제 발생시 게시물이 비공개 될 수 있습니다. - 바인딩과 할당의 차이점을 이해하라. - 클로저는 외부 변수의 값이 아닌 참조를 저장한다. - 지역 스코프를 만들기 위해 즉시 실행 함수 표현식을 사용하라. - IIFE에서 블록으로 감쌌을 때 변화하는 상황에 주의하라. (버그가 있는!) 프로그램은 어떤 계산을 할까? function wrapElements(a) { var result = [ ], i, n; for ( i = 0, n = a.length; i < n; i++ ) { result[i] = function() { return a[i]; }; } return result; } var wrapped ..