블로그이름영역

NSString *aStr = [string stringByTrimmingCharactersInSet:[NSCharacterSet whitespaceAndNewlineCharactersSet]];

NSXMLParser *parser = [[NSXMLParser alloc] initWithData:[xml dataUsingEncoding:NSUTF8StringEncoding]];

[parser setDelegate:self];

[parser parse];

[parser release];

- (void)parser:(NSXMLParser *)parser didStartElement:(NSString *)elementName namespaceURI:(NSString *)namespaceURI qualifiedName:(NSString *)qualifiedName attributes:(NSDictionary *)attributeDict

{

    // Start 태그를 만났을 때

}

- (void)parser:(NSXMLParser *)parser didEndElement:(NSString *)elementName namespaceURI:(NSString *)namespaceURI qualifiedName:(NSString *)qName

{

    // End 태그를 만났을 때

}

- (void)parser:(NSXMLParser *)parser foundCharacters:(NSString *)string

{

// 값을 찾았을 때

}

NSString *str = [[NSString alloc] initWithData:data encoding:NSUTF8StringEncoding];

NSData *data = [str dataUsingEncoding:NSUTF8StringEncoding];

1. 한 번에 한 단계씩 차트 공개하기
2. 중요한 순간을 위해 이미지를 숨겨라
3. 슬라이드 마스터로 프리젠테이션에 스타일을 입히자
4. 읽기용 보기로 프리젠테이션을 검토해보자
5. 자동 재생 프리젠테이션을 설정해보자
6. 이전 프리젠테이션에 사용된 슬라이드를 다시 활용해보자
7. 사진 앨범을 만들어보자
8. 원 클릭 웹사이트링크를 만들어 보자
9. 슬라이드 쇼에서 음악을 재생하자
10. 프리젠테이션을 웹을 통해 배포하라

- idg.co.kr 기사에서 발췌 -

1. 컨텍스트 선택

전체선택 : $(selector)

특정 DOM 선택 : $(selector, 'div#sampleDOM')

jQuery를 이용해 엘리먼트를 선택하려면 셀렉터를 $()로 감싸줘야 함

ex) $("p a.specialClass")

< 간단한 몇 개의 CSS 셀렉터 예제 >

콤마 연산자를 사용해서 하나의 표현식에 여러 개의 셀렉터를 조합하여 사용 가능

&('div, span') : 모든 <div> 엘리먼트와 <span> 엘리먼트 선택

ul.myList li a

: ul 엘리먼트의 myList 클래스 밑에 li 밑에 모든 a 엘리먼트

p > a

: p 엘리먼트 바로 다음의 a 엘리먼트

a[href^=http://]

: href의 값이 정확히 http://로 시작하는 모든 링크와 일치하는 엘리먼트

form[method]

: 이 셀렉터는 명시적으로 method 어트리뷰터를 가지는 <form> 엘리먼트와 일치

input[type=text]

: type이 text인 모든 input 엘리먼트

div[title^= my]

title 어트리뷰트의 값이 my로 시작하는 모든 <div> 엘리먼트

a[href$=.pdf]

: pdf 파일을 참조하는 모든 링크를 찾아오는 셀렉터

a[href*=jquery.com]

: jQuery 사이트를 참조하는 모든 <a> 엘리먼트

2. CSS와  jQuery 정의 필터 셀렉터 사용

3. 새로운 HTML 생성

<example>

$("<div>Hello</div>")

$('<img>',

{

src : 'xxx.png'.

alt : 'string',

title : 'title',

click : function() {

// implementation

)}

}

)

4. 확장된 엘리먼트 집합 관리

1. 확장집합의 크기 결정
• $('a').size()
• 확장 집합된 엘리먼트 개수 반환
• 매개변수 : 없음
• 반환 값 : 엘리먼트 개수
  
2. 확장 집합에서 엘리먼트 획득
• var imgElement = $('img[alt'])[0] / var imgElement = $('img[alt]).get(0)
• get(index)
• 확장 집합에서 하나 또는 모든 일치하는 엘리먼트 가져옴. 매개변수가 명시되지 않았다면 확장 집합에서 모든 엘리먼트를 자바스크립트 배열로 반환, index 매개변수가 주어진다면 해당 인덱스의 엘리먼트 반환
• 매개변수 : index(number) 얻으려는 엘리먼트 인덱스, 생락하면 전체 집합 배열로 반환
• 반환 값 : 하나의 DOM 엘리먼트 또는 DOM 엘리먼트 집합
  
  
• eq(index)
• 확장 집합에서 index에 맞는 엘리먼트를 가져오고 해당 엘리먼트를 포함한 새로운 확장 집합 반환
• 매개변수 : index(number) 얻으려는 엘리먼트의 인덱스. get() 메서드처럼, 생략하면 전체 집합 배열로 반환
• 반환 값 : 하나 또는 빈 엘리먼트 포함한 확장 집합
  
  
• first()
• 확장 집합에서 첫 번째 엘리먼트를 가져오고 해당 엘리먼트를 포함한 새로운 확장 집합을 반환. 만약 확장 집합이 비어있다면 빈 확장 집합이 반환
• 매개변수 : 없음
• 반환 값 : 하나 또는 빈 엘리먼트를 포함한 확장 집합
  
  
• last()
• 확장 집합에서 마지막 엘리먼트를 가져오고 해당 엘리먼트를 포함한 새로운 확장 집합 반환. 만약 확장 집합이 비어있다면 빈 확장 집합 반환
  
  
• var allLabeledButtons = $('label+button').toArray();
• toArray()
• 확장 집합의 DOM 엘리먼트의 배열 반환
• 매개변수 : 없음
• 반환 값 : 확장 집합에 있는 DOM 엘리먼트의 자바스크립트 배열
  
  
• var n = $('img').index('img#id');
• index(element)
• 확장 집합에서 전달된 엘리먼트를 찾고, 집합에서 찾은 엘리먼트의 인덱스를 반환. 또느 확장 집합의 첫 번째 엘리먼트의 인덱스를 찾는다. 집합에 해당 엘리먼트가 존재하지 않으면 -1 반환
• 매개변수 : element(Elelement | Selector) 순서 번호를 알고자 하는 엘리먼트의 참조, 또는 엘리먼트를 식별할 셀렉터. 생략하면 확장 집합에 있는 형제 엘리먼트 중에서 첫 번째 엘리먼트를 찾는다.
• 반환 값 : 확장 또는 확장 집합의 형제들에게 전달된 엘리먼트의 순서 번호, 발견되지 않으면 -1
  
3. 확장 엘리먼트 집합 재편성
• $('img[alt]').add('img[title]')
• add(expression, context)
• 확장 집합의 복사본을 생성하고 expression 매개변수로 명시한 엘리먼트를 확장 집합에 추가. 표현식에는 셀렉터, HTML 코드, DOM 엘리먼트, DOM 엘리먼트의 배열
• 매개변수 : 
1. expression(Selector | Element | Array) 확장 집합에 추가될 대상 명시. jQuery 셀렉터도 매개변수가 될 수 있음. 이 경우 셀렉터에 일치하는 엘리먼트가 집합에 추가됨. 매개변수로 HTML코드가 전달되면 적합한 엘리먼트가 생성되어 집합에 추가됨. 매개변수가 DOM 엘리먼트나 DOM 엘리먼트의 배열인 경우 집합에 추가
2. context (Selector | Element | Array | jQuery) 첫 번째 매개변수와 일치하는 엘리먼트를 찾는 범위를 제한하는 컨텍스트를 명시. 이것은 jQuery 함수에 전달되는 컨텍스트와 동일
• 반환 값 : 추가된 엘리먼트가 포함된 원본 집합의 복사본
  
• $('img[title]').not('[title*=puppy]')
• $('img').not(function() { return !$(this).hasClass('test'); })
• not(expression)
• 확장 집합의 복사본을 생성하고 표현식 매개변수의 값에 따라서 일치하는 엘리먼트를 새로운 집합에서 제거
• 매개변수 : expression (Selector | Element | Array | Function) 제거할 아이템 명시. 매개변수가 jQuery 셀렉터라면 일치하는 모든 엘리먼트를 제거. 엘리먼트 참조 또는 엘리먼트 배열이 전달되면 집합에서 해당 엘리먼트를 제거. 함수가 전달되면 확장 집합의 아이템마다 함수가 실행(아이템이 this에 할당)되고 확장 집합에서 제거된 아이템이 있을 때 true를 반환
• 반환 값 : 제거된 엘리먼트가 포함되지 않은 원본 집합의 복사본
  
• $('td').filter(function() { return this.innerHTML.match(/^\d+$) } );
• filter(expression)
• 확장 집합의 복사본을 생성하고 표현식 매개변수의 값에 따라서 일치하지 않는 엘리먼트를 새로운 집합에서 제거
• 매개변수 : expression (Selector | Element | Array | Function) 제거할 아이템 명시. 매개변수가 jQuery 셀렉터라면 일치하지 않는 모든 엘리먼트를 제거. 엘리먼트 참조 또는 엘리먼트 배열이 전달되면 집합에서 모든 엘리먼트 제거. 함수가 전달되면 확장 집합의 아이템마다 함수가 실행(아이템이 this에 할당)되고 확장 집합에서 제거된 아이템이 있을 때 false를 반환
• 반환 값 : 필터링된 엘리먼트가 포함되지 않은 원본 집합의 복사본
  
• $('*').slice(2,3)
• slice(begin, end)
• 매개변수
  begin (Number) 반환되는 부분 집합에 포함될 첫 엘리먼트의 위치로 0부터 시작
  end (Number) 반환되는 부분 집합에 포함될 마지막 엘리먼트의 바로 다음 위치로, 0부터 시작. 생략하면 집합의 마지막까지 포함
  
• $('div').has('img[alt]')
• has(test)
• 원본 확장 집합에서 전달된 test 표현식과 일치하는 자손을 가진 엘리먼트를 포함한 새로운 확장 집합 생성 반환
• 매개변수 : test (Selector | Element) 확장 집합의 모든 자손에 적용될 셀렉터 또는 검사될 엘리먼트. 셀렉터 혹은 전달된 엘리먼트와 일치하는 엘리먼트를 가진 엘리먼트만이 반환된 확장 집합에 포함
• 반환 값 : 검사 결과로 생성된 확장된 집합
  
• var allIds = $('div').map(function() {
      return (this.id == undefined) ? null : this.id;
  }).get();
• map(callback)
• 확장 집합의 엘리먼트를 순회하면서 콜백 함수를 실행하고 jQuery 객체 인스턴스 내 반환된 값을 모음
• 매개변수 : callback(Function) 확장 집합의 엘리먼트를 순회하면서 실행할 콜백 함수. 콜백 함수에 두 개의 매개변수가 전달된다 첫 번째는 0부터 시작하는 집합의 엘리먼트 인덱스이고 두 번째는 엘리먼트 자신. 엘리먼트는 또한 함수 컨텍스트로 설됭(this 키워드)
• 반환 값 : 변환된 값을 가진 확장 집합
  
• $('img').each(function() {
      this.alt='image['+n'] 의 id는 '+this.i' 이다';
  });
• $([1,2,3]).each(function() { alert9this); });
• each(iterator)
• 전달된 iterator 함수가 확장 집합의 모든 엘리먼트를 순회하면서 실행
  
• 매개변수 : iterator(Function) 일치된 집합의 각 엘리먼트마다 호출되는 함수. 함수에 두 개의 매개변수가 전달. 첫 번째는 0부터 시작하는 집합의 엘리먼트 인덱스 번호이고, 두 번째는 엘리먼트 자신. 엘리먼트는 또한 함수 컨텍스트로 설정
• 반환 값 : 확장 집합
  
4. 관계를 이용해 확장 집합 얻기
   

   메서드	설명
   children([selector])	확장 엘리먼트의 고유한자식으로 구성된 확장 집합을 반환
   closet([selector])	존재할 경우, 전달된 표현식과 일치하는 가장 가까운 조상 하나로 구성된 확장 집합 반환
   contents()	확장 집합에서 엘리먼트의 컨텐츠로 구성된 확장 집합 반환. 여기에는 텍스트 노드도 포함되며 주로 <iframe> 엘리먼트의 컨텐츠를 얻고자 사용
   next([selector])	확장 집합의 각 확장 엘리먼트 다음에 나오는 형제로 구성된 확장 집합 반환
   nextAll([selector])	확장 집합의 각 확장 엘리먼트 다음에 나오는 모든 형제로 구성된 학장 집합 반환
   nextUntil([selector])	확장 집합의 각 확장 엘리먼트 다음에 나오는 모든 형제부터 셀렉터와 일치하는 엘리먼트 전까지의 확장 집합을 반환. 셀렉터와 일치하는 엘리먼트가 없거나 셀렉터가 생략되면 모든 형제 엘리먼트가 선택
   offsetParent()	확장 집합에 상대 혹은 절대적으로 가장 가까운 위치한 첫 번째 엘리먼트의 부모로 구성된 확장 집합 반환
   parent([selector])	확장 집합에 있는 모든 확장 엘리먼트의 바로 위 부모로 구성된 확장 집합 반환
   parents([selector])	모든 확장 엘리먼트의 조상으로 구성된 확장 집합 반환. 바로 위 부모와 상위의 모든 조상이 포함되지만 문서 루트(document root)는 포함되지 않음
   parentsUntil([selector])	확장 집합에 있는 엘리먼트의 모든 조상부터 셀렉터와 일치하는 엘리먼트 전까지의 확장 집합을 반환. 셀렉터와 일치하는 엘리먼트가 없거나 셀렉터가 생략되면 모든 조상 엘리먼트 선택
   prev([selector])	확장 집합의 각 확장 엘리먼트 바로 이전에 나오는 형제로 구성된 확장 집합 반환
   prevAll([selector])	확장 집합의 각 확장 엘리먼트 이전에 나오는 모든 형제로 구성돤 확장 집합 반환
   prevUntil([selector])	확장 집합 내에 있는 엘리먼트의 모든 이전 형제부터 셀렉터와 일치하는 엘리먼트 전까지의 확장 집합 반환. 셀렉터와 일치하는 엘리먼트가 없거나 셀렉터가 생략되면 모든 이전 형제 엘리먼트들이 선택
   siblings([selector])	확장 엘리먼트의 모든 형제를 포함하는 확장 집합을 반환

   다른 HTML DOM 엘리먼트의 관계를 통해 새로운 확장 집합을 얻을 수 있는 메서드
   

5. 확장 집합을 이용하는 기타 방법

• wrappedSet.find('p cite')

• find(selector)

• 원본 엘리먼트의 모든 자손 엘리먼트 중 전달된 셀렉터 표현식과 일치하는 엘리먼트로 구성된 새로운 확장 집합 반환

• 매개변수 : selector (String) 반환될 집합의 일부가 될 엘리먼트가 일치하는 셀렉터

• 반환 값 : 새로 생성된 확장 집합 
  

• var hasImage = $('*').is('img')

• is(selector)

• 확장 집합에 전달된 셀렉터 표현식과 일치하는 엘리먼트가 있는지 확인

• 매개변수 : selector (String) 확장 집합 엘리먼트를 평가할 셀렉터 표현식

• 반환 값 : 전달된 셀렉터에 하나라도 일치하면 true, 그렇지 않으면 false
  

6. jQuery 체인 관리하기

• andSelf()

• 매서드 체인에서 이전 확장 집합 두 개를 하나로 합침

• 매개변수 : 없음

• 반환 값 : 합쳐진 확장 집합

하나의 패턴에는 다음의 네가지 요소는 반드시 들어 있다.

1. 패턴 이름(pattern name)은 한두 단어로 설계 문제와 해법을 서술

2. 문제(Problem)은 언제 패턴을 사용하는가를 서술하며 해결할 문제와 그 배경을 설명

3. 해법(Solution)은 설계를 구성하는 요소들과 그 요소들 간의 관계, 책임 그리고 협력 관계를 서술

4. 결과(Consequence)는 디자인 패턴을 적용해서 얻는 결과와 장단점을 서술

"특정한 전후 관계에서 일반적 설계 문제를 해결하기 위해 상호교류하는 수정 가능한 객체와 클래스들에 대한 설명"

디자인 패턴 영역

디자인 패턴을 이용하여 문제를 푸는 방법

1. 객체지향 프로그램은 객체(object)를 만듦
• 객체는 데이터와 이 데이터에 연산을 가하는 프로시저(procedure)를 함께 묶은 단위
• 프로시저를 일반적으로 메서드(method) 또는 연산(operation)이라고 함
• 객체는 요청(request) 또는 메시지(message)를 사용자에게 받으면 연산을 수행
• 요청은 객체가 연산을 실행하게 하는 유일한 방법
• 연산은 객체의 내부 데이터의 상태를 변경하는 유일한 방법
• 이러한 접근의 제약 사항으로 객체의 내부 상태는 캡슐화(encapsulate)된다고 말함.
  
2. 적당한 객체 찾기
   
3. 객체의 크기 결정
4. 객체 인터페이스 명세
   
• 객체가 선언하는 모든 연산은 연산의 이름, 매개변수로 받아들이는 객체들, 연산의 반환 값 명세. 이를 시그니처(signature)라고 함
• 인터페이스(interface)는 객체가 정의하는 연산의 모든 시그니처들을 일컫는 말로 객체의 인터페이스는 객체가 받아서 처리할 수 있는 연산의 집합
• 타입(type)은 특정 인터페이스를 나타낼 때 사용하는 이름. 다른 인터페이스를 포함하는 인터페이스를 서브타입(subtype), 다른 인터페이스가 포함하는 인터페이스를 슈퍼타입(supertype)이라함. 서브타입은 슈퍼타입의 인터페이스를 상속한다고 이야기함. 서브타입이 슈퍼타입을 상속하면 서브타입은 슈퍼타입에 정의된 연산을 포함
• 어떤 요청과 그 요청을 처리할 객체를 프로그램 실행 중, 즉 런타임에 연결 짓는 것을 동적 바인딩(dynamic binding)이라고 함
• 다형성(polymorphism)은 런타임에 동일한 인터페이스를 갖는 다른 객체로 대체 가능한 것
5. 객체 구현 명세하기
• 객체는 클래스의 인스턴스
• 클래스의 인스턴스화 과정은 객체의 내부 데이터에 대한 공간 할당, 이 데이터들을 연산과 관련짓는 것
• 추상클래스는 모든 서브클래스 사이의 공통되는 인터페이스 정의
• 클래스 상속은 객체의 구현을 정의할 때 이미 정의된 객체의 구현을 바탕으로 진행
• 인터페이스 상속은 어떤 객체가 다른 객체 대신에 사용될 수 있는 경우를 지정하는 메커니즘
• 추상 클래스를 정의하고 인터페이스 개념으로 객체를 다룰 때 얻을 수 있는 두가지 이점
1. 사용자가 원하는 인터페이스를 그 객체가 만족하고 있는 한, 사용자는 그들이 사용하즌 특정 객체 타입에 대해 알아야 할 필요가 없음
2. 사용자가 이 객체들을 구현하는 클래스를 알 필요가 없고, 단지 인터페이스를 정의하는 추상 클래스가 무엇인지만 알면 됨.
• 구현이 아닌 인터페이스에 따라 프로그래밍함
6. 재사용을 실현 가능한 것으로
• 서브클래싱(클래스 상속)에 의한 재사용은 화이트박스 재사용
• 객체 합성이 클래스 합성보다 더 나은 방법임
• 변화에 대비한 설계

• 디자인 패턴이 프레임워크보다는 더 추상적
• 디자인 패턴은 프레임워크에 비해서 소규모의 아키텍쳐 요소
• 디자인 패턴은 프레임워크에 비해 덜 특수화

• 패턴이 어떻게 문제를 해결하는지 파악
• 패턴의 의도 파악
• 패턴들 간의 관련성 파악
• 비슷한 목적의 패턴들을 모아서 공부
• 재설계의 원인을 파악
• 설계에서 가변성을 가져야 하는 부분이 무엇인지 파악

1. 생성 패턴(Creational Patterns)

• 추상팩토리(Abstract Factory) : 구체적인 클래스를 지정하지 않고 관련성을 갖는 객체들의 집합을 생성하거나 서로 독립적인 객체들의 집합을 생성할 수 있는 인터페이스를 제공하는 패턴
• 빌더(Builder) : 복합 객체의 생성 과정과 표현 방법을 분리하여 동일한 생성 절차에서 서로 다른 표현 결과를 만들 수 있게 하는 패턴
• 팩토리 메서드(Factory Method) : 객체를 생성하는 인터페이스는 미리 정의하되, 인스턴스를 만들 클래스의 결정은 서브클래스 쪽에서 내리는 패턴. 팩토리 메서드 패턴에서는 클래스의 인스턴스를 만드는 시점을 서브클래스로 미룸
• 원형(Prototype) : 생성할 객체의 종류를 명세하는 데에 원형이 되는 예시물을 이용하고, 그 원형을 복사함으로써 새로운 객체를 생성하는 패턴
• 단일체(singleton) : 어떤클래스의 인스턴스는 오직 하나임을 보장하며, 이 인스턴스에 접근할 수 있는 전역적인 접촉점을 제공하는 패턴

2. 구조 패턴(Structural Patterns)

• 적응자(Adapter) : 클래스의 인터페이스를 사용자가 기대하는 다른 인터페이스로 변환하는 패턴. 호환성이 없는 인터페이스 때문에 함께 동작할 수 없는 클래스들이 함께 작동하도록 해 줌
• 가교(Bridge) : 구현부에서 추상층을 분리하여 각자 독립적으로 변형할 수 있게 하는 패턴
• 복합체(Composite) : 객체들의 관계를 트리 구조로 구성하여 부분-전체 계층을 표현하는 패턴. 사용자가 단일 객체와 복합 객체 모두 동일하게 다루도록 함
• 장식자(Decorator) : 주어진 상황 및 용도에 따라 어떤 객체에 책임을 덧붙이는 패턴. 기능 확장이 필요할 때 서브클래싱 대신 쓸 수 있는 유연한 대안이 될 수 있음
• 퍼사드(Facade) : 서브시스템에 있는 인터페이스 집합에 대해서 하나의 통합된 인터페이스를 제공하는 패턴. 서브시스템을 좀 더 사용하기 편하게 만드는 상위 수준의 인터페이스 정의
• 플라이급(Flyweight) : 크기가 작은 객체가 여러 개 있을 때, 공유를 통해 이들을 효율적으로 지원하는 패턴
• 프록시(Proxy) : 어떤 다른 객체로 접근하는 것을 통제하기 위해서 그 객체의 대리자(surrogate) 또는 자리채움자(placeholder)를 제공하는 패턴

3. 행동 패턴(Behavioral Patterns)

• 책임 연쇄(Chain of Responsibility) : 요청을 처리할 수 있는 기회를 하나 이상의 객체에게 부여하여 요청을 보내는 객체와 그 요청을 받는 객체 사이의 결합을 피하는 패턴. 요청을 받을 수 있는 객체를 연쇄적으로 묶고, 실제 요청을 처리할 객체를 만날 때까지 객체 고리를 따라서 요청을 전달
• 명령(Command) : 요청을 객체의 형태로 캡슐화하여 서로 요청이 다른 사용자의 매개변수화, 요청 저장 또는 로깅, 그리고 연산의 취소를 지원하게 만드는 패턴
• 해석자(Interpreter) : 주어진 언어에 대해 그 언어의 문법을 위한 표현 수단을 정의하고, 이와 아울러 그 표현 수단을 사용하여 해당 언어로 작성된 문장을 해석하는 해석기를 정의하는 패턴
• 반복자(Iterator) : 내부 표현부를 노출하지 않고 어떤 객체 집합에 속한 원소들을 순차적으로 접근할 수 있는 방법을 제공하는 패턴
• 중재자(Mediator) : 한 집합에 속해 있는 객체들의 상호작용을 캡슐화하는 객체를 정의하는 패턴. 객체들이 직접 서로를 참조하지 않도록 함으로써 객체들 사이의 소결합(loose coupling)을 촉진시키며, 개발자가 객체들의 상호작용을 독립적으로 다양화시킬 수 있게 만듦
• 메멘토(Memento) : 캡슐화를 위배하지 않은 채로 어떤 객체의 내부 상태를 잡아내고 실체화시켜, 그 이후에 해당 객체가 그 상태로 되돌아 갈 수 있도록 하는 패턴
• 감시자(Observer) : 객체들 사이에 일 대 다의 의존 관계를 정의해 두어, 어떤 객체의 상태가 변할 때 그 객체에 의존성을 가진 다른 객체들이 그 변화를 통지받고 자동으로 갱신될 수 있게 만드는 패턴
• 상태(State) : 객체의 내부 상태에 따라 스스로 행동을 변경할 수 있게끔 허가하는 패턴. 이렇게 하면 객체는 마치 자신의 클래스를 바꾸는 것처럼 보임
• 전략(Strategy) : 동일 계열의 알고리즘군을 정의하고, 각각의 알고리즘을 캡슐화하며, 이들을 상호 교환이 가능하도록 만드는 패턴. 알고리즘을 사용하는 사용자와 상관없이 독립적으로 알고리즘을 다양하게 변경할 수 있게 함.
• 템플릿 메서드(Template Method) : 객체의 연산에는 알고리즘의 뼈대만을 정의하고 각 단계에서 수행할 구체적 처리는 서브클래스 쪽으로 미루는 패턴. 알고리즘의 구조 자체는 그대로 놔둔 채 알고리즘 각 단계의 처리를 서브클래스에서 재정의할 수 있게 함.
• 방문자(Visitor) : 객체 구조를 이루는 원소에 대해 수행할 연산을 표현하는패턴. 연산을 적용할 원소의 클래스를 변경하지 않고도 새로운 연산을 정의할수 있게함

-- 여기에 기술되는 모든 내용은 jQuery in Action 2/E 에서 발췌 & 인터넷 서핑을 통한 것입니다. -- 

jQuery를 사용해야 하는 이유

1. 코드의 간결화

위의 소스를 jQuery를 이용하여 다음과 같이 바꿀 수 있다.

코드의 의미는 간단하다.

어떤 라디오버튼이 선택되었는지 알아내고 Value 어트리뷰트 값을 가져오는 작업을 나타내는 소스이다.

성능상의 이유로 스크립트 블록이 문서 몸체의 끝에 위치하기도 하지만, 최신 브라우저에서는 성능 차이는 거의 없다. 구조와 관련된 엘리먼트 내부에 행위에 관련된 엘리먼트를 삽입시키지 않는 것이 더 중요한 개념이다.

효과적인 스크립트 작성요령

구조에서 행위 분리하여 스크립트에 기술

다음과 같이 변경한다.

jQuery 기초(알아야 할 사항들)

1. jQuery() 함수

P a : <p> 엘리먼트에 포함된 모든 링크의 그룹 참조

$(selector) = jQuery(selector)

기타 등등 많다.

셀렉터의 전체 목록은 http://docs.jquery.com/Selectors 에 있다.

2. 문서 핸들러

: 전체 문서가 모두 로드된 다음 실행할 구문을 명시하고자 window 인스턴스의 onload 핸들러를 사용

  문서 전체가 로드된 이후에 정의된 코드가 실행되도록 만든다.

  하지만 로드 해야할 리소스가 많은 경우 사용자가 기다리는 시간이 길어지는 단점이 있다.

다음과 같이 작성을 하게 되면 DOM 트리가 로드된 다음 다른 외부 리소스를 로드할 때까지 기다릴 필요 없이 코드를 실행 할 수 있다.

: read() 메소는 문서를 조작할 준비가 되었을 때 실행될 함수를 매개변수로 전달 받는다.

위의 소스를 다음처럼 더 간단히 기술 가능한다.

: jQuery() 혹은 $()에 함수를 전달하면 브라우저는 DOM이 모두 로드될 ㄱ때까지 코드 실행을 미뤄둔다.

3. DOM 엘리먼트 생성하기

: Hello를 id라는 id를 가진 태그 다음에 동적으로 삽입

4. 다른 라이브러리와 함께 사용 가능

다른 라이브러리와 함께 사용시 $ 식별자 쓰임이 겹치기 때문에 충돌 문제를 야기

해결 방법 : jQuery.noConflict();

jQuery() 함수로 할 수 있는 짓(?)

• 확장 메서드로 어떤 동작을 수행하려고 DOM 엘리먼트를 선택하고 확장하기
• 전역 유틸리티 함수의 네임스페이스 제공하기
• HTML 마크업으로 DOM 엘리먼트 만들기
• DOM을 조작할 준비가 되었을 때 실행할 코드 지정하기

------------------------------------------------------------------------------------------------------------

Ajax = Asynchronous Javascript And XML

Web Runtime = 심비안 OS에서 모바일 웹 어플리케이션을 작성할 수 있도록 만들어 주는 개발 플랫폼

CSS = Cascading Style Sheets

HTML = Hyper Text Markup Language

XHTML = Extensible Hyper Text Markup Language

latest jQuery site = http://jquery.com

selector = 페이지에 있는 대상 엘리먼트를 식별하는데 사용되는 표현식

폼 엘리먼트 그룹 = input, select, textarea 등 데이터 전송할 때 사용되는 엘리먼트를 말함

------------------------------------------------------------------------------------------------------------