Open-Closed Principle

생성자란 new와 함께 호출될 뿐 별다를 것 없는 함수에 불과하다. 그렇다면 생성자를 호출할 때 new를 빼먹으면 어떻게 될까? 문법 오류나 런타임 에러가 발생하지는 않지만, 논리적인 오류가 생겨 예기치 못한 결과가 나올 수 있다. new를 빼먹으면 생성자 내부의 this가 전역 객체를 가리키게 되기 때문이다.생성자 내부에 this.member와 같은 코드가 있을 때 이 생성자를 new 없이 호출하면, 실제로는 전역 객체에 member라는 새로운 프로퍼티가 생성된다. 이 프로퍼티는 window.member 또는 그냥 member를 통해 접근할 수 있다. 알다시피 전역 네임스페이스는 항상 깨끗하게 유지해야 하기 때문에 이런 동작 방식은 대단히 바람직하지 않다. 아래의 예제를 실행해보시면 정확하게 알 수 있..

객체 리터럴 패턴이나 내장 생성자 함수를 쓰지 않고, 직접 생성자 함수를 만들어 객체를 생성할 수 있다.12var adam = new Person("Adam");adam.say(); // "I am Adam"cs이런 형태는 객체지향 언어에서 클래스를 사용하여 객체를 생성하는 방식과 상당히 유사하다. 그러나 문법은 비슷해도 자바스크립트에서는 클래스라는 것이 없으며 위의 예제의 Person은 그저 보통 함수일 뿐이다. 아래 예제는 Person의 함수이다. 123456var Person = function (name){ this.name = name; this.say = function(){ return "I am " + this.name; };};csnew와 함께 생성자 함수를 호출하면 함수 안에서 다음과 ..

자바스크립트의 리터럴 표기법 패턴을 사용하면 좀더 정화하고 표현력이 풍부하면서도 에러율은 낮은 방식으로 객체를 정의할 수 있다. 자바스크립트에서 '객체'라고 하면 단순히 이름-값 싸의 해시 테이블을 생각하면 된다. 다른 언어에서 '연관 배열'이라 불리는 것과 유사하다. 자바스크립트에서 생성한 객체(다시 말해 사용자가 정의한 네이티브 객체)는 언제라도 변경할 수 있으며, 내장 네이티브 객체의 프로퍼티들도 대부분 변경이 가능하다. 빈 객체를 정의해놓고 기능을 추가해나갈 수도 있다. 객체 리터럴 표기법은 이처럼 필요에 따라 객체를 생성할 때 이상적이다. 1234567891011 // 빈 객체에서 시작한다. var dog = {}; // 프로퍼티 하나를 추가한다. dog.name = "Test"; // 이번에는..

javascript에도 기타 다른 언어들과 같이 for문이 존제 한다. 그런데 우리가 아무 생각없이(?) 하고 있이면서도 성능상에는 영향을 줄 수 있는(당연히 반복문이기 때문에 100만 루프이상을 이야기 하는 것이다.) 습관이 있다. 기본적으로 자바스크립트의 for문 문법은 아래와 같다. 구문for ([initialization]; [test]; [increment]) statement initialization : 선택 사항입니다. 이 식은 루프가 실행되기 전에 한 번만 실행됩니다. test : 선택 사항입니다. 부울 식입니다. test가 true이면 statement가 실행됩니다. test가 false이면 루프가 종료됩니다. increment : 선택 사항입니다. 식입니다. 증분식은 모든 루프의 끝에..

확장된 엘리먼트 집합이 있으면 새로운 엘리먼트를 추가해 이것을 증가시킬 수도 이쏙, 일치하는 원본 엘리먼트의 부분 집합으로 축소시킬 수도 있다. jQuery는 확장 엘리먼트의 집합을 관리하는 일련의 메소드를 지원한다. 1) 확장 집합에 다른 엘리먼트 추가하기예를 들어 alt나 title 어트리뷰트를 가진 모든 엘리먼트를 일치시키려고 한다. jQuery에는 이 요구사항을 셀렉터 하나로 표현할 수 있다. $(‘img[alt], img[title]’)하지만 add() 메소드를 사용하여도 똑같은 확장 엘리먼트를 만들 수 있다. $(‘img[alt]’).add(‘img[title]’)이와 같은 방식으로 add() 메소드를 사용하면 많은 셀렉터를 체인으로 연결해서 논리합(or) 관계를 형성하게 된다. 논리합 관계는..

보통은 확장된 엘리먼트의 집합을 얻어 jQuery커맨드를 사용해 일련의 작업을 수행할 수 있다. 예를 들자면 hide() 메서드로 모두 감출 수 있는 경우다. 그러나 확장된 엘리먼트를 참조하여 특정 엘리먼트에만 연산을 수행하고자 할 때도 있다. jQuery 확장 엘리먼트는 자바스크립트 배열과 유사하기 때문에 확장 리스트의 어떤 엘리먼트를 얻더라도 단순한 배열 인텍스를 사용 할 수 있다. $('selector').[index] 처럼 사용하면 된다. index는 0부터 시작한다. jQuery의 함수를 사용하고 싶으면 get(index)를 사용하면 된다. Colored By Color Scripter™12345678910get: function( num ) { return num != null ? // Ret..

jQuery 확장 엘리먼트 집합은 배열과 유사하다. 자바스크립트 배열처럼 length 프로퍼티를 지원하는데 확장 엘리먼트 또한 개수 정보를 갖고 있다. 확장 엘리먼트는 메소드가 지원되는데 $('selector').size()를 사용하여 확장 엘리먼트의 개수 정보를 확인 할 수 있다. http://code.jquery.com/jquery-1.11.1.js 에서 확인 할 수 있겠지만 실제 size()함수의 구현은 아래와 같다. Colored By Color Scripter™123jQuery.fn.size = function() {return this.length;}; 결국 .length와 .size()는 동일하다는 것이다.

jQuery를 이용해 엘리먼트를 선택하려면 셀렉터를 $()로 감싸야 한다.예) $('a') 모든 링크()를 선택하게 된다. 기본 CSS 셀렉터=> jQuery는 몇몇 예외사항을 제외하고는 CSS3를 완벽하게 준수하고 있다. 그리고 모질라 파이어폭스(Firefox), 인터넷 익스플로러(Internet Explorer), 사파리(Safari)와 같은 최신 브라우저가 지원하는 차세대 CSS를 사용해 고급 셀렉터를 지원한다. 즉, 표준 호환 브라우저의 스타일시트와 jQuery 셀렉터 엔진이 선택하는 엘리먼트는 동일하다.기본 사용1. a - 모든 링크() 엘리먼트와 일치하는 셀렉터.2. #specialID - specialID를 아이디로 가지는 엘리먼트와 일치하는 셀렉터3. .specialClass - speci..