인천총각 Study

 Thread와 Runnable의 java.lang에 있으므로 import문 없이 사용이 가능함.

* Thread클래스를 하위클래스에서 상속받아서 사용하는 경우는 run()에서 보다 구체적인 작업을 하기 위한 목적으로 사용하길 바람...(이런 방식은 비추천됨.)

* Runnable인터페이스를 상속받아서 사용하기를 권장함.

 

* Thread클래스나 Runnable인터페이스를 상속받아 구현하는 클래스에 run()에서 작업할 내용(메서드)을 기술함.

 

* 주요메서드

- 동기화: synchronized 키워드 사용(공유자원에 락(lock)걸기)

- wait(): 스레드를 NotRunnable 상태로 만듦.

- notify(), notifyAll(): NotRunnable상태의 스레드를 Runnable상태로 만듦.

- Thread.sleep() //InterruptedException예외발생. try~catch사용. 실행하고자 하는 스레드를 잠시 멈춤.. , 대기상태

 

* 스레드의 실행은 스레드스케쥴러에 의해서 관리됨...

만일 스레드의 실행방식에 어느정도의 순번을 기대코자 한다면 sleep()메서드를 활용할것.

 

* 자바에서는 애플리케이션 내부의 모든 스레드가 종료되지 않으면 JVM이 종료되지 않음.

 

* 두개 이상의 스레드 사용시 고려사항....

- 두개 이상의 스레드가 하나의 객체 데이터에 접근할 경우...

즉 서로 다른 스택 두개에서 실행되는 메서드가 동일한 객체에 대한 게터 또는 세터 메서드를 호출할 경우 문제가 발생할 수 있음...

이전에 자신이 했던 작업을 기억하지 못하기 때문에 실행하다  대기상태에 들어가게 되면

객체의 데이터가 변화했음을 감지하지 못하고 예상치 못한 결과값을 출력할 수 있슴.

 

* 스레드를 사용할 때 객체를 안전하게 만들고 싶다면 ...

다른 스레드가 같은 객체의 같은 메서드에 들어가기 전에 끝까지 실행되어야만 하는 메서드를 결정하여 synchronized로 동기화시킴.

 

* 락은 매서드마다 하나씩 있는 것이 아니고 객체마다 하나씩 있슴.

즉, 동기화된 메서드 하나에 스레드 두개가 들어갈수 없슴.

 

* 동기화의 목적은 처리중의 데이터를 외부로부터 보호하기 위함.

 

* 동기화를 할 경우 꼭 필요한 부분에만 사용할것...

- 동기화의 단점은 프로그램의 속도를 저하시키며,

여러군데 동기화를 적용할 경우 데드락이 발생할수 있슴.

(주의요망 : 두개 이상의 객체와 두개 이상의 스레드가 있을경우....)

Json (JavaScript Object Notation) 이라는 데이터 형식이 있는데, 생각보다 매우 유용하다.
표준은 Standard ECMA-262 3rd Edition—December 1999 (http://json.org/) 에 나와 있다.

Json 은 XML 처럼 어떤 information 을 hierarchical 하게 보여주는 표현방법인데,
그 형식의 간단함에 비해 매우 편리하게 dynamic 한 방식으로 data 를 나타내게 해준다.
왜 이걸 진작에 활용하지 않았을까 싶을 정도로 강력한 기능에 감탄을 할 정도다.

1. Json 포맷
크게 보면 Json 은 세 가지 포맷만 알면 된다.

(1) 객체
형식 : { Name : Value, Name : Value, ... }
설명 : Name 은 그냥 변수이름틱한 string, Value 는 Json Object, Json Array, 또는 Json Value 다.
Value 형식이 Json Object 가 될 수 있다는 것은 nested 된다는 뜻이다.
예제 : { "ID" : "ABC1213", "NAME" : "Youngin Shin", "Parameters" : { "Age" : 34, "Gener" : "M", ... } }

(2) 배열
형식 : [ Value, Value, Value, ... ]
설명 : Name 없이 value 만 있는 배열. [] 로 열고 닫음. 여기서도 Value 는 Json Object, Json Array,
또는 Json Value 다. Value 형식이 Json Array 가 될 수 있다는 것은 nested 된다는 뜻이다.
예제 : { "ClickTimes" : [0, 2, 3, 5, 6, 8], "Users" : [ { "ID" : "1" }, { "ID" : "2" }, ... ] }

(3) 값
형식 및 설명 : 숫자 또는 문자열 등등..
예제 : 위 예제들에서 [ ] 나 { } 로 둘러싸인 것들 말고 나머지 atomic 한 것들..

2. Json 의 장점
Json 를 좀 써본 결과 내가 느끼는 실용적인 측면에서의 장점은 ...

(1) 매우 compact 하다. 몇 개의 [ ], { }, : 등등으로 모든 정보를 구조적으로 표현하니까..
XML 이나 HTML 등 SGML 계열의 언어를 보면 <TAG> ... </TAG> 형식에 들어가는 문자가 너무 많아서..
자칫 error 가 나기 쉽고 데이터가 어디서 어떻게 잘리는 지 눈으로 보고 파악하기도 매우 어렵다. 그보다,
데이터의 사이즈가 이런 tag 들 때문에 실제 들어있는 정보에 비해 많이 커진다. 거기 비해 Json 은 거의
최소한의 구분을 위한 수준으로 [ ], { }, : 등이 들어 있는 듯 느껴진다. 실제 그렇기에 Google 및 MS 등의
회사들에서는 핵심적인 검색 데이터를 Json 으로 표현하고 있다.

(2) XML parser 에 비해 Json parser 의 사용법이 훠얼씬 간단하다.
XML 로 표현된 데이터를 읽어들이고, 이를 tree 형식으로 메모리에서 재구성하기 위해 XML parser 를
써봤거나 써보려고 했던 사람은 얼마나 복잡하고 잘 안되는 지 알 것이다. XmlNode 이 뭐니 여러가지의
클래스들이 쓰여서 parsing 해야되는데, 각종 컴파일 에러가 나든가 아니면 멀쩡한 XML 이 parse 되도
아무런 정보가 memory 에 안생기는 등의 문제를 해결해야하는 수고에 짜증이 많이 났다. 이걸 되도록
하기 위해 XML 을 다시 재편집하고 앉아 있다보면 원래 잘 표현되어 있던 XML 은 어디로 가고, 매우
이상한 구조로 변해버린 XML 보면 화가 나기도 한다. 또 뭐 새로운 정보를 좀 더 넣으려고 XML 을
재구성하게 되면 또 parsing  이 안되는 문제에 봉착하고...

여기 비해 Json parser 사용법은 그야말로 너무나 간단하다. 예를 들어 C# 용 Json library 를 쓰면..

이러면 끝이다. XML parser 도 이러면 얼마나 좋아?

(3) " 를 제외한 [ ] 나 { } 는 " " 안에 있으면 따로 escape 하지 않아도 된다!!!
이거는 참 별 거 아닌데도, 아주 편리하게 느껴진다. 예를 들면..


위와같은 표현이 가능한다는 말. 물론 " 를 " " 안에 넣으려면 \" 로 escape 해야된다.

3. Json Parser
Microsoft 내부 Live Search 팀에서 사용하는 .NET 용 JsonParser 라이브러리를 나는 사용하고 있는데,
다른 public domain 에서도 library 구하는 것은 어렵지 않을 듯 하다. 공개된 System.Json 도 있다.
Json.Serialize, Deserialize 를 적절히 사용하면 되긴한데 좀 불편한 감이 없지 않다.

하여간... Json 을 알고난 이후, 거의 모든 data 및 configuration 작업은 모조리 Json 으로 하고 있다.
text parsing 을 일일이 손으로 짜면 참 귀찮고, yacc/lex 를 쓰면 너무 번거로운 것을 생각하면..
그야말로 만능이 아닐 수 없다.

JSON(JavaScript Object Notation)?

1. JSON은 무엇인가?
   • 경량의 데이타 교환 포맷이다.
     > XML과 비교한다.
   • 간단한 포맷
     > 사람들을 위해 읽고 쓰기가 쉽다.
     > 기계들을 위해 분석과 생성이 쉽다.
   • JSON은 텍스트 포맷이다.
     > 언어에 독립적으로 프로그래밍된다.
     > 프로그래머들에게 잘 알려진 C,C++,C#,Java,xxJavaScript,Perl,Pyton을 포함하는 C와 유사한 언어로 모여서 사용된다.
2. XML을 넘어 왜 JSON인가?
   • on-the-wire(선을 통한) 데이타 포맷인 XML보다 가볍고 빠르다.
   • JSON 오브젝트는 XML 데이타가 타입이 없는데 비해 타입을 가진다.
     > JSON types : string, number, array, boolean
     > XML 데이타는 모두 String 이다.
   • xxJavaScript 코드를 위해 Native 코드포맷이다.
     > Data는 사용자의 xxJavaScript코드 안에서 JSON 객체에 접근이 쉽다.
     XML 데이타가 해석과 장황한 DOM API를 통해 변수에 접근하는 것을 필요로 하는데 비해
     > 회수한 값들은 사용자의 자바스크립트 안의 객체속성에서 읽기가 쉽다.
3. JSON은 어디에서 사용되는가?
   • 구성정보를 나타낸다.
   • 통신 프로토콜을 실행한다.

JSON Object

1. JSON 구조
   • name/value 쌍으로 구성된다.
     > 여러가지의 언어들에서 object, record, struct, dictionary, hashtable, 키를 가지는 리스트, 배열집합 처럼 얻어진다.
   • 값들이 리스트는 순서가 있다.
     > 대부분의 언어들에서 array, vector, list, sequence 처럼 얻어진다.
   • JSON은 대부분의 지금의 언어를 통해 일반적인 데이타구조들이 지원된다.
2. JSON Object 표기법
   • JSON Object는 name/value 쌍의 set은 순서가 없다.
   • JSON Object는 { 로 시작하고 } 로 끝난다.
   • 각각의 이름은 : 와 ,로 구분된 name/value 쌍의 형식을 따른다.
3. JSON과 xxJavaScript
   • JSON은 xxJavaScript의 객체 문자 표기의 부분집합이다.
     > JSON은 xxJavaScript안에서 혼란스럽거나 야단스럽지 않게 사용될 수 있다.
4. JSON Object 예제

    var myJSONObject = {"bindings": [    {"ircEvent": "PRIVMSG", "method": "newURI", "regex": "^http://.*"},    {"ircEvent": "PRIVMSG", "method": "deleteURI", "regex": "^delete.*"},    {"ircEvent": "PRIVMSG", "method": "randomURI", "regex": "^random.*"}  ]};

   • 위의 예에서, JSON xxJavaScript 객체는 세개의 객체를 포함한 배열을 갖고있는, 각각은 "ircEvent","method","regex" 멤버들을 포함한 하나의 멤버 "bindings"를 포함하여 생성된다.
   • 멤버들은 점(.) 이나 그아래 지시자들로 회수 할수 있다.

      myJSONObject.bindings[0].method // "newURI"

5. xxJavaScript 코드안에서 Text를 Object로 변환하기

    var myObject = eval!('(' + myJSONtext + ')');

   • eval!() 함수를 사용하여, JSON text를 JSON 객체로 변환한다.
     > eval!()은 xxJavaScript 컴파일러에서 실행한다.
     > JSON은 xxJavaScript의 서브셋으로 적합하다. 컴파일러는 text를 정확하게 변환하고, 객체 구조를 만든다.
6. 보안 & JSON Parser

    // Include http://www.json.org/json.jsvar myObject = myJSONtext.parseJSON();

   • eval!()은 컴파일 할 수 있고, 어떤 xxJavaScript 프로그램에서도 실행된다. 그래서 보안 이슈들(cross-site scripting)을 가질 수 있다.
     > 소스를 신뢰할 수 있을때, eval!()을 사용해라.
   • 보안이 염려될 때 - 소스를 신뢰할 수 없을때 - JSON parser를 사용하는게 낫다.
     > JSON parser는 JSON text를 승인할 수 있다. 그래서 좀더 안전하다.
7. Object를 Text로 변환하기

    var myJSONText = myObject.toJSONString();

   • 사용자는 JSON 객체를 JSON text로 변환할 수 있다.
   • JSON은 주기적 데이타 구조를 지원하지 않는다.
     
     > Do not give cyclical structures to the JSON stringifier
     > 주기적 구조들을 JSON stringfier로 줄수 없다

Java 안에서의 JSON

1. 자바 개발자를 위한 JSON Tools
   • Parser
     > JSON text 파일들을 해석하고, 그들을 자바 모델로 변환한다.
   • Renderer
     > 자바를 text로 표현하게 한다.
   • Serializer
     > 알기쉬운 POJO clusters를 JSON 표현으로 나열한다.
   • Validator
     > JSON 스키마를 사용하여 JSON 파일의 내용을 유효한지 체크한다.
2. JSONObject 자바 클래스
   • JSONObject의 name/value 쌍의 집합은 순서가 없다.
   • put 메소드는 객체로 name/value쌍을 add 한다.
   • text들은 JSON syntax rules을 정확히 따른 toString 메소드에 의해 만들어진다.

      myString = new JSONObject().put("JSON", "Hello, World!").toString();// myString is {"JSON": "Hello, World"}

클라이언트와 서버사이드 양쪽에서 JSON 데이타를 주고 받는 방법

1. 서버사이드에서 JSON 데이타를 생성하고 보내는 방법
   • JSONObject 자바 객체를 생성한다.
   • put 메소드를 사용하여 name/value 쌍을 add한다.
   • toString 메소드를 사용하여 String 타입으로 변환한다.
     그리고 "text/xml" 또는 "text/plain" 처럼 content-type과 함께 클라이언트로 보낸다.

      myString = new JSONObject().put("JSON",toString();// myString is {"JSON": "Hello, World"}

2. 클라이언트 사이드에서 JSON 데이타를 받는 방법
   • JSON 데이타는 String 처럼 반환된다.
   • xxJavaScript 코드안에서 JSON 객체를 만들수 있게 eval!()을 호출한다.
     > var JSONdata = eval!(req.response.Text);
   • 사용자는 한번 JSON 객체를 가질수 있고, 객체의 속성들에 접근하기 위해 . 을 사용할 수 있다.

      var name = JSONdata.name;var address = JSONdata.addresses[3];var streetname = JSONdata.addresses[3].street;

   • 클라이언트 사이드에서 JSON 데이타를 생성하고 보내는 방법
   • JSON 자바스크립트 객체를 생성한다.
   • XMLHttpRequest객체의 open 메소드 안에 "POST" HTTO 메소드를 사용한다.
   • XMLHttpRequest객체의 send 메소드안에서 JSON 자바스크립트 객체를 패스한다.

      var carAsJSON = JSON.stringify(car);var url = "JSONExample?timeStamp=" + new Date().getTime();createXMLHttpRequest();xmlHttp.open("POST", url, true);xmlHttp.[안내]태그제한으로등록되지않습니다-onreadystatechange = handleStateChange;xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");xmlHttp.send(carAsJSON);

3. 서버사이드에서 JSON 데이타를 받는 방법
   • String 타입처럼 JSON데이타를 읽는다.
   • string으로부터 JSONObject 자바객체를 생성한다.

      String json = readJSONStringFromRequestBody(request);//Use the JSON-Java binding library to create a JSON object in JavaJSONObject jsonObject = null;try {jsonObject = new JSONObject(json);}catch(ParseException pe) {}

웹브라우저에서의 객체표현..

DOM 이란?
DOM 트리란?
DOM 효과
DOM 장 단점
--------------------------------------------------------------------------------------------------------
마크업 : 문서에 포함된 문장, 표, 소리 등과 같은 문서의 내용에 대한 정보가 아니라  그 문장과 그림, 표가 어떻게 배치되고 글자는 어떤 크기와 모양을 가지며 , 들여쓰기와 줄간격, 여백은 어느정도인지에 대한 정보를 의미
--------------------------------------------------------------------------------------------------------
브라우저가 웹페이지를 객체 구현으로 변환(DOM 트리)

HTML(hyper text markup language)
마크업은 페이지에 구성 또는 프레임웍만 제공한다.!!
브라우저가 모든 텍스트 구성을 가지고, 이를 변경, 추가, 삭제 가능한 객체로 바꾸는 방법!!

텍스트 마크업의 장점: 페이지가 보여질 때 마다 HTML이 네트워크를 통해 웹 브라우저로 보내진다는 것을 생각해 보라. 텍스트와 함께 전달하는 것 보다 효율적인 방법은 없다. 바이너리 객체, 그래픽으로 구현된 페이지, 재구성된 마크업 청크 등, 이 모든 것들은 플레인 텍스트 파일 보다 네트워크를 통해 전송할 때 더 어려운 것들이다.

텍스트 마크업의 단점: 브라우저에는 비교적 큰 단점을 갖고 있다. 특히 브라우저는 텍스트 마크업을 사용자에게 시각적으로 직접 나타내기가 매우 힘들다.텍스트가 페이지의 마크업을 가져오는 좋은 솔루션이었지만 수정하기도 어렵고, 스타일과 작동을 추가하기에는 불편하고, 궁극적으로 오늘날 웹 페이지의 동적인 특징과 거리가 멀다.

이 문제에 대한 답, 오늘날의 웹 브라우저에 맞는 답은 트리 구조를 사용하여 HTML을 나타내는 것이다.
--------------------------------------------------------------------------------------------------------

<html>
<head>
  <title>Trees, trees, everywhere</title>
</head>
<body>
  <h1>Trees, trees, everywhere</h1>
  <p>Welcome to a <em>really</em> boring page.</p>
  <div>
    Come again soon.
    <img src="come-again.gif" />
  </div>
</body>
</html>
--------------------------------------------------------------------------------------------------------

head와 body 는 html의 브랜치(branch)라고도 일컬어진다. 이들은 자신들의 자식이 있기 때문에 브랜치이다.
트리의 말단에 다다르면 "Trees, trees, everywhere"와 "really" 같은 텍스트로 가게 된다. 이들은 자식들이 없기 때문에 잎(leave)으로 일컬어진다

1. 트리에 있는 모든 것이 가장 바깥쪽에서 시작되고 HTML의 엘리먼트(html)를 포함하고 있다는 것이다.
트리 메타포에서 루트(root) 엘리먼트라고 불린다. 이것이 트리의 바닥에 있지만 트리를 분석할 때면 언제나 이것부터 시작한다. 완전히 거꾸로 뒤집어보면 도움이 될 것이다.
2. head와 body 엘리먼트는 html 루트 엘리먼트의 자식들이다.
3. title은 head의 자식이고 "Trees, trees, everywhere" 텍스트는 title의 자식이다.

객체 유형과 속성

엘리먼트 이름과 텍스트가 들어있는 작은 직사각형에 집중해 보자. 각 직사각형들은 객체이다
객체를 사용하여 HTML 문서의 조각들을 나타냄으로서 구성을 변경하고, 스타일을 적용하며, JavaScript를 문서에 액세스 시키기가 매우 쉬워진다. 
브라우저는 객체 모델을 사용하여 문서를 표현하고 객체 유형에 따라 즉각 구분할 수 있다.
다시 말해서, 웹 브라우저는 이와 같이 객체 속성들을 사용하여 트리의 모양과 구조를 쉽게 변경한다.

엄격함을 유지한다.
p 엘리먼트는 세 개의 다른 자식 객체들을 갖고 있고, 이 중 어떤 것도 전체 "Welcome to a really boring Web page" 텍스트를 포함하고 있지 않다. "Welcome to a "와 " boring Web page" 같은 텍스트의 일부를 볼 수는 있어도 이것이 전체 문장은 아니다. 더욱이 강조된 텍스트인 "really"는 p의 자식 엘리먼트가 아니다. 이것은 p의 자식인 em의 자식이다. "really" 텍스트가 나머지 p 엘리먼트의 텍스트와 함께 디스플레이 되더라도 이것은 여전히 em 엘리먼트의 직접적인 자식이다. 이것은 나머지 p와는 다른 포맷팅을 가질 수 있고 나머지 텍스트와 개별적으로 움직일 수 있다.

애트리뷰트
애트리뷰트는 엘리먼트의 자식이 아니다.  각 엘리먼트는 여기에 사용되는 애트리뷰트 리스트를 갖고 있고 자식 객체의 리스트에서 분리된다. 따라서 div 엘리먼트는 "id" 애트리뷰트와 또 다른 이름 " class "를 포함하고 있는 리스트를 갖게 된다.  하나의 엘리먼트가 두 개의 "id" 또는 두 개의 "class"애트리뷰트를 가질 수 없다.
애트리뷰트의 독자성은 리스트를 자식 객체들의 리스트와 구별시킨다. p 엘리먼트는 그 안에 여러 em 엘리먼트를 갖고 있기 때문에 자식 객체의 리스트에는 중복 아이템이 포함될 수 있다. 자식 리스트와 애트리뷰트 리스트는 비슷하게 작동하지만 하나는 중복을 포함할 수 있고(객체의 자식) 하나는 그럴 수 없다는 것이다. (엘리먼트 객체의 애트리뷰트) 마지막으로 엘리먼트만이 애트리뷰트를 가질 수 있기 때문에 텍스트 객체는 여기에 첨부될 리스트가 없다.
--------------------------------------------------------------------------------------------------------

DOM
약어 문제
Document Object Model은 그 동안 Document Node Model로 불려졌다. 물론 대부분의 사람들은 노드(node)라는 단어가 무엇을 의미하는지 모르고, "DNM"은 "DOM"만큼 발음하기 쉬운 것도 아니기 때문에 W3C에서도 DOM이라는 용어를 채택했다.

DOM트리-
HTML과 CSS가 웹 브라우저로 보내지면 이것은 텍스트에서 객체 모델로 변환된다. 브라우저는 제공된 텍스트 파일 보다는 객체 모델을 사용한다. 브라우저가 사용하는 모델을 문서 객체 모델(Document Object Model)이라고 한다. 이것은 문서에 있는 엘리먼트, 애트리뷰트, 텍스트를 나타내는 객체들을 연결한다. HTML과 CSS에 있는 모든 스타일, 값, 심지어 거의 모든 공간들은 객체 모델로 통합된다. 웹 페이지에 대한 특정 모델은 그 페이지의DOM 트리라고 한다.  DOM을 통해서 사용자 인터페이스를 변경할 수 있고 인터랙팅 할 수 있다. 이것은 실로 엄청난 프로그래밍의 힘과 유연성을 제공해 준다. 일단 DOM 트리로 작업하는 방법을 배우면 풍부하고 동적인 인터랙티브 웹 사이트를 마스터하는 단계로 넘어갈 수 있다. 즉, DOM은 브라우저가 마크업을 나타낼 수 있도록 하는 객체의 유형과 속성들을 정의한다

W3C에 의해 개발되고 있는 프로그래밍 인터페이스 규격인 DOM은, 프로그래머가 HTML 페이지나 XML 문서들을 프로그램 객체로 만들거나 수정할 수 있도록 해준다. 현재로서, HTML과 XML은 그저 데이터 구조의 형태로 문서를 표현하는 방법일 뿐이다. 이러한 문서들은 마치 프로그램 객체처럼, 자신들의 콘텐츠나, 객체 내에 감추어진 데이터를 가질 수 있게 됨으로써, 문서를 조작할 수 있는 콘트롤을 보장하는데 도움을 줄 수 있게 될 것이다. 문서들은 객체들과 마찬가지로, 메쏘드라고 불리는 객체지향 프로시저(어떤 행동을 수행하기 위한 일련의 작업 순서)들을 함께 가지고 갈 수 있다. DOM은 문서 상에서 프로그래밍 콘트롤을 어떻게 제공할 것인지를 지정하기 위한, 전략적이고 개방된 노력이다. 이것은 다이내믹 HTML이라고 불리는 새로운 HTML과, 웹페이지 및 그 요소들이 브라우저 상에서 일관된 형태로 나타나게 장려하는 방법의 발명에 일부 영향을 받았다.
--------------------------------------------------------------------------------------------------------
DOM 의 계층 구조 2가지

DOM은 두 가지 계층의 인터페이스 구현을 제공하는데, 그 하나는 XML을 지원하는 DOM Core로서 그 다음 계층의 기반이 되며, 다른 하나는 DOM HTML로서 그 모델을 HTML 문서로 확장한 것이다. 아래에 일부 요점이 정리되어 있다.

• 어떠한 HTML이나 XML 요소에 대해서도 프로그래밍을 통한 개별적인 주소지정이 가능할 것이다.
• 이 규격은 IDL을 사용하여 설명하게 될 것이므로, 언어에 독립적일 것이다.
• 그 외에도, 인터페이스는 자바 프로그래밍 언어와 ECMAScript의 형태로 기술될 것이다.
• DOM을 마이크로소프트의 COM이나 DCOM과 혼동해서는 안된다. COM과 CORBA는 객체를 정의하는데 있어 언어에 독립적인 방법이며, 자바와 같은 특정 언어가 할 수 있는 것과 똑같이 DOM 객체를 만드는데 사용될 수 있을 것이다.

--------------------------------------------------------------------------------------------------------
DOM  효과
한 엘리먼트를 DOM 트리에 추가하면 그 엘리먼트는 페이지 리로딩 없이 사용자의 웹 브라우저에 즉시 나타난다. DOM 트리에서 몇몇 텍스트를 제거하면 그 텍스트는 사용자의 스크린에서 사라진다. 여러분은 DOM을 통해서 사용자 인터페이스를 변경할 수 있고 인터랙팅 할 수 있다. 이것은 실로 엄청난 프로그래밍의 힘과 유연성을 제공해 준다.
--------------------------------------------------------------------------------------------------------
노드개념 배우기!
DOM 트리는 객체의 트리지만 보다 구체적으로는 노드 객체들의 트리이다
Ajax 애플리케이션 또는 JavaScript에서 그러한 노드들과 작업하여 엘리먼트와 이것의 콘텐트를 지우고 특정 텍스트 조각을 강조하고 새로운 이미지 엘리먼트를 추가하는 등 특별한 효과를 만들 수 있다. 이 모든 것은 클라이언트 측(웹 브라우저에서 실행되는 코드)에서 발생하기 때문에 이러한 효과는 서버와 통신 없이 즉시 발생한다. 결국 보다 반응성 있는 애플리케이션이 될 것이다.
--------------------------------------------------------------------------------------------------------
크로스 브라우저, 크로스 언어
Document Object Model은 W3C 표준이다. 따라서 모든 현대의 웹 브라우저는 DOM을 지원하고 있다. 브라우저 간 차이는 있겠지만 핵심 DOM 기능을 사용한다면 어떤 브라우저 상에서도 같은 방식으로 작동할 것이다
DOM은 크로스 언어(cross-language) 스팩이기도 하다.
다시 말해서 대부분의 프로그래밍 언어에서 이것을 사용할 수 있다. W3C는 DOM을 위한 여러 언어 바인딩을 정의하고 있다. 언어 바인딩은 단순한 API로서 특정 언어에 DOM을 사용할 수 있도록 해준다.
--------------------------------------------------------------------------------------------------------
개념상의 노드
1. 노드는 DOM에서 가장 기본적인 객체 유형이다. (DOM에 의해 정의된 거의 모든 객체는 노드 객체를 확장한다.)
2. 모든 애트리뷰트는 하나의 노드이다.(모든 텍스트 조각도 하나의 노드이다,심지어 카피라이트 상징을 나타내는 &copy; 같은 특별 문자도 모두 노드이다 )

노드란?  노드는 DOM 트리에 있는 그저 단순한 하나의 존재이다

(@  DOM 트리에 있는 각 엘리먼트와 텍스트 조각이 부모를 갖고 있다고 생각해 보자. 부모는 또 다른 엘리먼트의 자식일 수도 있고(img가 p 엘리먼트 안에 중첩될 때) 또는 DOM 트리의 가장 위에 있는 엘리먼트일 수 있다. (이것은 각 문서에 대해 단 한번의 특별한 경우이고 이곳에서 html 엘리먼트를 사용한다.) 또한 엘리먼트와 텍스트 모두 type을 갖고 있다고 생각해 보라. 한 엘리먼트의 type은 분명히 하나의 엘리먼트이다. 텍스트의 type은 텍스트이다. 각 노드는 또한 정의가 잘된 구조를 갖고 있다. 이 밑에 자식 엘리먼트 같은 하나의 노드(또는 노드들)을 갖는가? 이것이 자매 노드(sibling node) (엘리먼트나 텍스트 옆에 있는 노드)를 갖는가? 각 노드에는 어떤 문서에 속하는가?
다분히 추상적으로 들린다. 사실 엘리먼트의 유형은 음… 엘리먼트이다 라고 말하는 것은 어리석어 보인다. 하지만 일반 객체 유형으로서 노드를 갖는다는 것의 가치는 추상적으로 이해해야 한다. )

노드의 속성
DOM 노드의 핵심 속성
--------------------------------------------------------------------------------------------------------

nodeName은 노드의 이름을 나타낸다. (아래 참조)

nodeValue:는 노드의 "값"을 제공한다. (아래 참조)

parentNode는 노드의 부모를 리턴한다. 모든 엘리먼트, 애트리뷰트, 텍스트는 부모 노드를 갖고 있다는 것을 기억하라.

childNodes는 노드의 자식들의 리스트이다. HTML로 작업할 때 엘리먼트를 다룰 경우 이 리스트는 유용하다. 텍스트 노드와 애트리뷰트 노드는 어떤 자식도 갖지 않는다.

firstChild는 childNodes 리스트에 있는 첫 번째 노드로 가는 지름길이다.

lastChild도 또 다른 지름길이다. childNodes 리스트에 있는 마지막 노드로 가는 지름길이다.

previousSibling은 현재 노드 앞에 있는 노드를 리턴한다. 다시 말해서, 현재 것 보다 앞에 있는 노드를 리턴한다. 현재 노드의 부모의 childNodes 리스트에 있는 것 보다 선행하는 노드를 리턴한다. (헷갈린다면 마지막 문장을 다시 한번 더 읽어라.)

nextSibling은 previousSibling 속성과 비슷하다. 부모의 childNodes 리스트에 있는 다음 노드로 돌린다.

attributes는 엘리먼트 노드에서 유일하게 유용한 것이다. 엘리먼트의 애트리뷰트 리스트를 리턴한다
--------------------------------------------------------------------------------------------------------
nodeName과 nodeValue는 실제로 모든 노드 유형에 적용되는 것은 아니다. (한 노드 상의 다른 속성들의 경우도 마찬가지다.) 이 속성들은 null 값을 리턴할 수 있다. (JavaScript에서는 "undefined"로 나타난다.)

노드의 메소드
DOM 노드의 핵심 메소드
--------------------------------------------------------------------------------------------------------

• insertBefore(newChild, referenceNode)는 newChild 노드를 referenceNode 앞에 삽입한다. newChild의 미래의 부모에 대해 이것을 호출할 것이다.
• replaceChild(newChild, oldChild)는 oldChild 노드를 newChild 노드로 교체한다.
• removeChild(oldChild)는 함수가 실행되고 있는 노드에서 oldChild 노드를 제거한다.
• appendChild(newChild)는 newChild 노드를 이 함수가 실행되고 있는 노드에 추가한다. newChild는 목표 노드의 자식들의 끝에 추가된다.
• hasChildNodes()는 호출된 노드가 자식을 갖고 있을 경우 true를 , 그렇지 않을 경우 false를 리턴한다.
• hasAttributes()는 호출된 노드가 애트리뷰트를 갖고 있을 경우 true를, 애트리뷰트가 없을 경우 false를 리턴한다.

--------------------------------------------------------------------------------------------------------
ex)
--------------------------------------------------------------------------------------------------------
일반 노드 유형들

- 문서 노드는 전체 HTML 문서를 나타낸다.
- 앨리먼트 노드는 a 또는 img 같은 HTML 엘리먼트를 나타낸다.
- 애트리뷰트 노드는 href (a 엘리먼트에 대해) 또는 src (img 엘리먼트에 대해) 같은 HTML 엘리먼트에 대한 애트리뷰트를 나타낸다.
- 텍스트 노드는 "Click on the link below for a complete set list" 같은 HTML 문서에 있는 텍스트를 나타낸다. 이는 p, a, h2 같은 엘리먼트 내부에 나타나는 텍스트이다.

문서 노드
첫번째 노드 유형은 DOM 기반 코드의 거의 모든 부분에서 여러분이 사용하게 될 유형이다. 바로 문서 노드이다. 문서 노드는 실제로 HTML(또는 XML) 페이지에 있는 엘리먼트가 아니라 페이지 그 자체이다. 따라서 HTML 웹 페이지에서 문서 노드는 전체 DOM 트리이다. 자바스크립트에서 document 키워드를 사용하여 문서 노드에 액세스 할 수 있다.
자바스크립트의 document 키워드는 현재 웹 페이지에 대한 DOM 트리를 리턴한다.여기에서부터 여러분은 트리에 있는 모든 노드들과 작업할 수 있다.

또한 document 객체를 사용하여 다음과 같은 메소드를 사용하는 새로운 노드를 만들 수 있다.

• createElement(elementName)는 제공된 이름을 가진 엘리먼트를 만든다.
• createTextNode(text)는 제공된 텍스트를 가진 새로운 텍스트 노드를 만든다.
• createAttribute(attributeName)는 제공된 이름을 가진 새로운 애트리뷰트를 만든다.

여기에서 주목해야 할 것은 이러한 메소드들이 노드를 만들지만 이들을 첨부하거나 이들을 특정 문서에 삽입하지 않는다는 점이다. 따라서 이미 봤던 insertBefore() 또는 appendChild() 같은 메소드들 중 하나를 사용해야 한다. 따라서 다음과 같은 코드를 사용하여 새로운 엘리먼트를 만들어 문서에 붙여야 한다.
--------------------------------------------------------------------------------------------------------
var myDocument = document;

var pElement = myDocument.createElement("p");

var text = myDocument.createTextNode("Here's some text in a p element.");

pElement.appendChild(text);

bodyElement.appendChild(pElement);
--------------------------------------------------------------------------------------------------------
document 엘리먼트를 사용하여 웹 페이지의 DOM 트리에 액세스 하면 엘리먼트, 애트리뷰트, 텍스트와 직접 작업할 준비가 된 것이다.

엘리먼트 노드
모든 노드들에 공통적인 메소드와 속성들이 포함

1. 애트리뷰트와 작동하는 것과 관련된 메소드: :
   • getAttribute(name)는 name이라는 애트리뷰트의 값을 리턴한다.
   • removeAttribute(name)는 name이라는 애트리뷰트를 제거한다.
   • setAttribute(name, value)는 name이라는 애트리뷰트를 만들고 이것의 값을 value로 설정한다.
   • getAttributeNode(name)는 name라고 하는 애트리뷰트 노드를 리턴한다. (애트리뷰트 노드는 아래에서 설명한다.)
   • removeAttributeNode(node)는 제공된 노드와 매치되는 애트리뷰트 노드를 제거한다.
2. 중첩된 엘리먼트를 찾는 메소드: :
   • getElementsByTagName(elementName)는 제공된 이름을 가진 엘리먼트 노드의 리스트를 리턴한다.

애트리뷰트 작업
자바스크립트는 새로운 img 엘리먼트를 만들고 애트리뷰트를 설정한 다음 이것을 HTML 페이지의 바디에 추가한다
--------------------------------------------------------------------------------------------------------
var imgElement = document.createElement("img");

imgElement.setAttribute("src", "http://www.headfirstlabs.com/Images/hraj_cover-150.jpg");

imgElement.setAttribute("width", "130");

imgElement.setAttribute("height", "150");

bodyElement.appendChild(imgElement);
--------------------------------------------------------------------------------------------------------
중첩 엘리먼트 찾기
getElementsByTagName()을 사용
--------------------------------------------------------------------------------------------------------
  var imgElements = bodyElement.getElementsByTagName("img");

      for (i=0; i<imgElements.length; i++) {

        var imgElement = imgElements.item[i];

        bodyElement.removeChild(imgElement);

      }

--------------------------------------------------------------------------------------------------------
애트리뷰트 노드
DOM은 애트리뷰트를 노드로서 나타내고 여러분은 언제나 엘리먼트의 attributes 속성을 얻을 수 있다.
--------------------------------------------------------------------------------------------------------
// Remove all the top-level <img> elements in the body

      var imgElements = bodyElement.getElementsByTagName("img");



      for (i=0; i<imgElements.length; i++) {

        var imgElement = imgElements.item[i];



        // Print out some information about this element

        var msg = "Found an img element!";

        var atts = imgElement.attributes;

        for (j=0; j<atts.length; j++) {

          var att = atts.item(j);

          msg = msg + "\n  " + att.nodeName + ": '" + att.nodeValue + "'";

        }

        alert(msg);



        bodyElement.removeChild(imgElement);

      }

--------------------------------------------------------------------------------------------------------
애트리뷰트 노드에서 작업하는 것이 가능하지만 엘리먼트 클래스에서 사용할 수 있는 메소드를 사용하여 애트리뷰트 작업을 하는 것이 더 쉽다. 메소드는 다음과 같다.

• getAttribute(name)는 name이라는 애트리뷰트의 값을 리턴한다.
• removeAttribute(name)는 name이라는 애트리뷰트를 제거한다.
• setAttribute(name, value)는 name이라는 애트리뷰트를 만들고 이것의 값을 value로 설정한다.

이 세 개의 메소드들로 인해 여러분은 애트리뷰트 노드와 직접 작업할 필요가 없다. 대신 애트리뷰트와 이것의 값과 함께 간단한 스트링 속성을 설정 및 제거할 수 있다.

텍스트 노드
HTML DOM 트리로 작업하는 유형
텍스트 노드와 작업하기 위해 공통적으로 사용하게 될 거의 모든 속성들은 실제로 노드 객체에서도 사용할 수 있다. 사실 nodeValue 속성을 사용하여 텍스트 노드에서 텍스트를 얻을 수 있다.
--------------------------------------------------------------------------------------------------------
var pElements = bodyElement.getElementsByTagName("p");

for (i=0; i<pElements.length; i++) {

  var pElement = pElements.item(i);

  var text = pElement.firstChild.nodeValue;

  alert(text);

}
--------------------------------------------------------------------------------------------------------
몇 가지 다른 메소드들은 텍스트 노드만의 것이다. 이들은 노드에 있는 데이터를 추가하거나 쪼갠다.

• appendData(text)는 여러분이 제공한 텍스트를 텍스트 노드의 기존 텍스트의 끝에 추가한다.
• insertData(position, text)는 텍스트 노드의 중간에 데이터를 삽입할 수 있다. 이것은 지정된 위치에 여러분이 제공한 텍스트를 삽입한다.
• replaceData(position, length, text)는 지정된 위치부터 시작하여 지정된 길이의 문자를 제거하고 여러분이 제공한 텍스트를 제거된 텍스트를 대신하여 메소드에 둔다.

노드의 유형

여러분이 작업할 노드 유형이 무엇인지에 대해 이미 알고 있다는 전제 하에 설명을 해왔다. 만일 DOM 트리를 통해 검색하고 일반 노드 유형들로 작업한다면 엘리먼트나 텍스트로 이동했는지의 여부를 모를 것이다. 아마도 p 엘리먼트의 모든 자식들을 갖게 되고, 텍스트, b 엘리먼트, 아니면 img 엘리먼트로 작업하는지 확신할 수 없다. 이 경우 더 많은 일을 하기 전에 어떤 유형의 노드를 가졌는지를 규명해야 한다.

다행히도 이것을 파악하기는 매우 쉽다. DOM 노드 유형은 여려 상수들을 정의한다.

1. Node.ELEMENT_NODE는 엘리먼트 노드 유형에 대한 상수이다.
2. Node.ATTRIBUTE_NODE는 애트리뷰트 노드 유형에 대한 상수이다.
3. Node.TEXT_NODE는 텍스트 노드 유형에 대한 상수이다.
4. Node.DOCUMENT_NODE는 문서 노드 유형에 대한 상수이다.

다른 노드 유형들도 많이 있지만 HTML을 처리할 때에는 이 네 가지 외에는 별로 다루지 않는다. 이들 상수의 값이 DOM 스팩으로 정의되었지만 의도적으로 남겨두었다. 여러분은 이 값으로 절대 직접 처리해서는 안된다. 바로 이것 때문에 상수가 있는 것이니까.

nodeType  속성
DOM 노드 유형에 대해 정의되었기 때문에 모든 노드에서 사용할 수 있는 nodeType 속성을 사용하여 노드를 위 상수와 비교할 수 있다.
--------------------------------------------------------------------------------------------------------var someNode = document.documentElement.firstChild;

if (someNode.nodeType == Node.ELEMENT_NODE) {

  alert("We've found an element node named " + someNode.nodeName);

} else if (someNode.nodeType == Node.TEXT_NODE) {

  alert("It's a text node; the text is " + someNode.nodeValue);

} else if (someNode.nodeType == Node.ATTRIBUTE_NODE) {

  alert("It's an attribute named " + someNode.nodeName

                        + " with a value of '" + someNode.nodeValue + "'");

}
--------------------------------------------------------------------------------------------------------
Internet Explorer는 여러분이 자바스크립트에서 Node 상수를 사용할 때 마다 이러한 에러를 보고 할 것이다. 거의 모든 사람들이 Internet Explorer를 사용하기 때문에 Node.ELEMENT_NODE 또는 Node.TEXT_NODE 같은 구조를 피해야 한다. Internet Explorer 7.0이 이러한 문제를 정정했다 하지만 Internet Explorer 6.x의 대중성에 미치려면 오랜 시간이 남았다. 따라서 Node 사용을 피해라. 여러분의 DOM 코드(그리고 Ajax 애플리케이션)가 모든 주요 브라우저에서 작동해야 하기 때문이다.

 

Jquery 란?

물론, 안 써도 됩니다. 매번 스크립트 기능이 필요할 때마다 손수 다 작성해도 뭐라 그럴 사람은 없으니까요. 하지만, 팀 개발을 하는 경우나 유사한 프로젝트를 반복해서 하는 경우에는 여러분 스스로가 가벼운 수준일지라도 자신만의 라이브러리(일반적으로 유틸리티 function들을 모아놓은 js 파일들) 만들어 놓고 있을 것입니다. 그러면서, 뭔가 풍족하고도 믿고 사용할만한 라이브러리는 없을까 둘러보곤 하죠.

일반적으로 우리가 웹 프로젝트에서 공개된 혹은 상용의 스크립트 라이브러리를 사용하려는 데에는 다음과 같은 이유가 있기 때문입니다.

더 많은 이유가 있겠지만, 결론적으로 말하자면 스크립트 라이브러리를 사용할 경우, 공수(비용과 시간)를 줄일 수 있고, 개발 및 관리하기가 편해지며, 균일한 코드 퀄리티를 유지할 수 있고, 그에 따라 스트레스도 줄어들기 때문이라고 할 수 있을 것입니다. 사실 이것이 서버 측이던 클라이언트 측이던 프레임워크를 도입하는 대표적인 이유이기도 하죠.
--------------------------------------------------------------------------------------------------------

JQuery란 무엇인가?

가볍고 빠른 자바스크립트 프레임워크 라이브러리이다.(생산의 편의성 제공)
(jQuery의 코드는 단순하고 간결하다.DOM과 관련한 지겨운 루프문과 Ajax의 복잡성을 기발하게 처리할 수 있게 한다. 코어 외의 부가적인 기능(특화 라이브러리)들은 플러그인의 형태로 제공하고 있으며, 수많은 웹 개발자들에 의해 다양한 플러그인들이 준비되어 있다. 최근 들어 Prototype또한 jQuery의 편리한 코딩 룰을 여러 부분에 도입하고 있는 실정이다. jQuery의 철학은 “이 모든 것은 즐거운 마음으로 프로그래밍하기 위함”이라고 한다.)

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

- 기존의 다른 툴킷이 자바스크립트의 놀랍고 강력한 고급 기술에 중점을 두는 반면, jQuery는 페이지를 개발할 때 웹 개발자들이 생각하는 방식을 바꾸는데 목적을 둔다.

- HTML 문서에서 스타일 정보를 분리하는 것과 마찬가지로 문서에서 동작을 분리하는 작업은 커다란 이점을 제공한다. 이러 사용 방식을 튀지 않는 자바스크립트라고 한다. jQuery의 창시자는 개발자들이 쉽게 동작을 분리해낼 수 있도록 라이브러리를 설계 했다.

왜 JQuery인가.? 가볍다, CSS3 준수 , 크로스 브라우저 해결

1. BDD(Behavior driven development)
 jQuery를 사용하면 CSS로 HTML 엘리먼트의 스타일을 정의하는 것 처럼 HTML 엘리먼트의 행동들을 분리하여 정의할 수 있다.

2. MVC + J
MVC 프레임웍은 웹 개발 환경을 Model-View-Controller로 나누었다. MVC 프레임워크에서 뷰는 HTML, CSS, Javascript의 부분으로 나누어지고 GUI 개발은 이 세부분이 하나로 결합하여 완성된다. 게다가 Ruby on Rails에서의 Prototype 라이브러리는 HTML과 JavaScript도 함께 합쳐버린다(meshup). 뷰를 개발하면서 JavaScript를 분리하는 BDD 방법론을 따르려 한다면 jQuery가 매우 적절하다. 나는 Ajax에서 MVC + J가 매우 강력하다는 것을 깨닭았다.

3. 액션 체인(Chaining of actions)
액션 체인은 DRY 원칙을 따를 뿐만 아니라 JavaScript 코드의 가독성을 증가시킨다.

4. CSS 셀렉터 문제(CSS Selector rocks)
CSS 셀럭터 HTML DOM을 사용하기에 매우 강력한 도구이다. jQuery는 HTML 문서의 엘리먼트를 식별하기 위해 CSS 셀러터를 이용하고 이를 위해 HTML 태그의 id 속성을 관리해야 하는 지루한 작업을 회피하게 해준다. 대부분의 id 속성은 CSS 셀렉터를 올바르게 사용하여 회피할 수 있다. Prototype의 $$ 함수는 CSS 셀렉터를 지원하지만 CSS 셀렉터의 능력을 모두 이끌어내지 못한다.


 jQuery를 사용하면 HTML 코드가 간결해지고 거의 건드릴 필요가 없다. 나의 웹 디자이너는 쉽게 html과 stylesheet를 수정할 수 있다.


jQuery와 Prototype 비교-

Example1: Tab 예제는 tabs 클래스에 속하는 3 개의 tab이 있고 id는 각각 tabs1, tabs2, tabs3이다(ids=>["tabs1","tabs2","tabs3"]). 사용자가 "show first tab" 링크를 클릭했을 때 #tab1만 보여진다.

jQuery

Prototype

Example2:
엘리먼트의 CSS를 수정하는 예제

jQuery

Prototype

Prototype이 좋은 이유
  1. Ajax 요청에서 div의 내용이 부분적으로 변경돼야 할때 JavaScript 행위는  activated/reactivated돼야 한다. jQuery에서는 이를 위한 많은 코드를 만들지 않아도 된다. 하지만 나는 Ajax로 로드된 이 부분을 항상 마음속으로만 새겨야 한다. Prototype에서는 로드된 HTML 엘리먼트들에 관련된 JavaScript 코드가 포함된다.
  2. Ruby on Rails의 Prototype 헬퍼들은 정말 대단하고 JavaScript와 Ajax를 만들때 많은 부분에서 매우 편리하다.
  3. Prototype은 자바스크립에서도 Ruby같은 문법을 사용할 수 있게 해준다. 개발을 쉽고 빠르게 할 수 있도록 배열, 객체 등의 기능을 변경해준다.
  4. jQuery에서는 JavaScrpt 파일이 모두 다운로드되고 DOM 생성된 후에만 엘리먼트의 행위를 사용할 수 있다. 연결이 느릴 때는 기다려야만 하기 때문에 매우 고통스럽다.

--------------------------------------------------------------------------------------------------------
jQuery란?

jQuery는 가볍고 빠르며, 간결한 오픈소스 스크립트 라이브러리입니다. 이를 이용하면 Rich 웹 UI를 개발하는 데 도움이 되는 다양한 기능들 즉, HTML 문서 트래버스, 이벤트 처리, 애니메이션, Ajax 상호 작용 등을 지원하여 빠르고 견고하게 리치 웹 애플리케이션 개발을 할 수 있도록 지원합니다.

이러한 jQuery의 기능적인 특징을 핵심 키워드만 뽑아서 정리하자면,

• 막강한 CSS 셀렉터
• 크로스 브라우저 지원
• 메서드 체인
• Ajax 지원
• 풍부한 플러그 인 지원

jQuery 사용--------------------------------------------------------------------------------------------

 스크립트 태그에서 jquery.js를 참조시켜면 jQuery 라이브러리를 사용할수 있다!.

$() 표현이 jQuery()라는 구문의 단축표현이자, 셀렉터를 수행하기 위한 구문이다.

1. 인자로 셀렉터를 지정한 경우에는 일치되는 모든 요소를 찾는다.
2. 인자로 html 태그를 지정한 경우에는 동적으로 그 요소를 생성한다.
3. 인자로 특정 DOM 요소를 지정하면, 그 요소의 jQuery 래퍼를 생성한다.
4. 인자로 function을 지정하면, 그는 $(document).ready() 메서드와 동일하다.

$(document).ready();
 jQuery가 제공하는 이벤트 메서드 중 하나인데요. 문서의 DOM 요소들을 조작 가능한 시점이 되 상면 자동으로 호출이 되는 이벤트 메서드라고 보시면 됩니다. 굳이 비교하자면, window.onload 이벤트와 유사한 것이라고 보면 되겠네요.

1. jQuery 셀렉터
jQuery의 가장 강력한 부분은 HTML DOM을 마음대로 트래버스 즉, 순회 탐색할 수 있다는 것으로 CSS 셀렉터를 사용하여 원하는 개체를 탐색할 수 있습니다

div p라는 셀렉터는 현재 문서 상에서 div 요소의 자식으로 존재하는 모든 p 요소들에 적용되며, #loginID는 loginID라는 id 값을 가진 요소에, .Columns는 class 어트리뷰트 값으로 Columns를 갖는 모든 요소에 적용되는 것이죠.

이러한 셀렉터를 그대로 jQuery에서 사용할 수 있다는 것은 놀랍습니다. jQuery에서는 원하는 DOM 요소의 그룹을 찾기 위해서 $(selector) 혹은 jQuery(selector)과 같은 표현식을 사용하기에, 위의 3가지 셀렉터를 다음과 같이 사용할 수 있습니다.

$("div p") 혹은 jQuery("div p")
$("#loginID") 혹은 jQuery("#loginID")
$(".Columns") 혹은 jQuery(".Columns")

그리고, 각각의 표현식은 각 DOM 요소의 확장 개체인 jQuery 개체 집합을 반환한다. DOM 요소를 직접 반환해주는 것이 아니라 그의 래퍼(Wrapper)인 jQuery 개체로 반환해 주기 때문에 직접 DOM 요소를 제어할 때보다 훨씬 편하고 쉽게 개체를 제어할 수 있다는 장점이 있습니다.

jQuery는 이러한 기본적인 CSS 셀렉터 외에 고급 CSS 셀렉터도 지원합니다

$("p a")와 $("p > a")의 차이점은 전자가 p요소 하위에 존재하는 모든 a 요소를 선택한다면, 후자는 p 요소 바로 아래의 자식으로 놓여있는 a 요소만을 선택한다는 것이 차이입니다.

$("p a")는 1.aspx 링크와 2.aspx 링크 모두를 선택하지만, $("p > a")는 2.aspx 링크만을 선택한다는 것이죠.

jQuery가 지원하는 CSS셀렉터 들

2. jQuery 셀렉터 : 기본 필터
기본적인 셀렉터에 더하여, 다양한 셀렉터 필터들도 제공한다.
필터는 말 그대로 걸러내는 역할을 합니다. jQuery는 위치를 기반으로 필터링 하거나, 하위 자식들을 필터링할 수 있게 한다거나, 컨텐트를 기반으로 필터링하는 등 다양한 방식으로 원하는 요소들을 필터링하여 선택할 수 있게 합니다. 그리고, 대부분의 필터는 : 을 시작문자로 사용하는 단어들입니다. 이러한 필터는 일반적으로 기본 셀렉터에 덧붙여 사용하곤 하지만, 단독으로 사용할 수도 있다.

각각의 필터는 셀렉터로서 독립적으로 사용될 수도 있고, 다른 셀렉터와 함께 사용할 수도 있습니다. 더불어, 여러 필터를 이어서 사용할 수도 있다.

ex)

$(":header:eq(0)").css("font-weight", "bold").css("color", "blue");
셀렉터 대상에 대해서 css()라는 메서드를 연달아 사용하는 것을 볼 수 있죠? 이를 메서드 체인이라고 하는데요. jQuery가 제공하는 모든 메서드는 그 반환값(return value)이 효과가 반영된 jQuery 개체이기 때문에 이런 식으로 메서드를 이어서 사용할 수가 있습니다

var jQ = $(":header:eq(0)")
jQ = jQ.css("font-weight", "bold");
jQ = jQ.css("color", "blue");

와 동일하다 할 수 있다는 것이죠. 하지만, 이러한 방식은 직관적이기는 하지만 소스가 길어지는 단점이 있기에, 일반적으로는 메서드 체인으로 작성하곤 합니다

3. jQuery 셀렉터 : 컨텐트 필터와 자식 필터

b:contains('j')
div:has('ul')
table.nameTable td:empty
.nameTable td:contains('F')
table.nameTable tr:eq(0)

첫 번째 셀렉터는 "j"라는 단어를 포함하는 모든 b 요소들을 선택합니다.
두 번째 셀렉터는 모든 div 요소들 중에 ul 요소를 가지고 있는 div 만을 선택합니다.
세 번째 셀렉터는 nameTable이라는 css 클래스가 지정된 table들 중에서 자식 요소인 td 내부에 텍스트 값이 없는(또는 자식요소가 없는) 모든 td를 선택합니다.
네 번째 셀렉터는 nameTable이라는 css 클래스가 지정된 요소들 중에서 그 내부의 td가 텍스트로 "F"란 단어를 포함하고 있는 모든 td를 선택합니다.
마지막 셀렉터는 이미 이전에 다루었던 것이라 굳이 설명할 필요가 없어보이긴 하지만 복습의 차원에서 설명하자면, nameTable이라는 css 클래스가 지정된 table 내의 tr 중에서 첫번째 tr을 선택합니다

만일, 문서 내에 table 요소가 한 개만 존재하고, 그 table에 nameTable 이라는 css 클래스가 적용이 되었다면, 다음의 셀렉터는 모두 같은 것을 선택한다는 것!

$("table.nameTable tr")
$(".nameTable tr")
$("table tr")
$("tr")

처음 이 필터를 접할 경우에는 이전에 다루었던 기본 필터 중 :first, :last와 유사한 필터가 아닐까 하고 생각할 수 있는데요. 사실 이들은 기존의 필터와 상당한 차이가 있습니다.

:first, :last 필터가 단일 요소를 선택하는 반면, 자식 필터들은 단일 요소가 아닌 해당 요소들의 집합을 선택한다는 것이 차이입니다. 예를 들어, 다음 두 셀렉터의 차이를 한번 생각해 볼까요?

td:first
td:first-child

얼핏 보기에는 같은 요소를 선택할 것처럼 보이는 이 둘은 확실한 차이를 보입니다. 즉,

td:first는 현재 테이블 안에서 첫 번째로 나오는 td 하나 만을 선택하는 반면, td:first-child는 현재 테이블 안에서 나오는 첫 번째 수준의 td들을 모두 선택한다는 것이죠.

4. jQuery : 폼 필터 및 조작 메서드(each등)


모든 입력 컨트롤을 선택하고 싶다면 $(":input") 라고 작성하면 되고, 체크박스만 선택하고 싶다면 $(":checkbox")라고 jQuery를 작성하면 됩니다. 히든 필드는 $(":hidden") 이라고 작성해서 선택할 수 있다!
일반적으로 $("input#UserID")이나 $("input.required") 와 같이 특정 목적을 위한 입력 컨트롤러로 사용되기도 한다.

jQuery 필터중에는  체크박스 중 체크된 것들을 모두 알아온다던가, 셀렉트 컨트롤들 중에서 선택된 것들을 알아낸다던가 하는 작업을 보다 쉽게 해주는 필터 들이 있다!



전과 비교했을 때, if (sports[i].checked == true){ .. } 와 같은 코드를 사용할 필요가 없게 된 것이죠. 이미 필터를 통해서 체크된 요소들만 가져와진 상태니까요 ^^.

each()메서드 

jQuery 개체가 제공하는 메서드로서, 모든 일치된 개체들에 대해서 순차적으로 특정 함수를 수행할 수 있게 해주는 메서드입니다. 문법은 다음과 같다. 

jQuery(selector).each( function );

each() 메서드 안에 인자로 사용하는 것은 역시나 또 함수입니다(jQuery는 거의 인자로 함수를 사용합니다). 그리고, 역시나 주로 익명 함수를 사용하게 되죠. 해서, 일반적으로 다음과 같은 구문을 가지게 됩니다.

jQuery(selector).each( function(i) {
    //.. 루프 안에서 할 일을 작성
});


5. jQuery : 조작 메서드
요소에 값을 지정한다거나, 특정 요소의 값을 읽어온다거나 하는 작업을 포함해서, 동적으로 요소 자체를 생성, 삭제, 복사, 제거하는 기능들을 의미한다.

jQuery의 조작 메서드 중 하나의 카테고리인 요소의 내용을 다루는 메소드로는 다음과 같은 것들이 있다.

'text() 메서드는 해당 개체가 가지고 있는 컨텐트를 텍스트로 반환하는 메서드입니다. 이와 유사한 메서드로는 html()이 있는데요. 이는 개체가 포함하고 있는 html 컨텐트를 반환하는 메서드입니다. 이 메서드들은 인자를 사용하지 않으면 값을 가져오는 역할을 하지만, 인자로 값을 지정하면 그 값으로 원래의 값을 바꾸는 역할을 합니다.

text() 메서드의 재미있는 점은 개체의 컨텐트가 html 요소들을 포함하고 있다고 해도, 다 무시하고 텍스트만을 반환한다는 점입니다. 즉, <span><b>taeyo</b></span> 와 같은 span 개체가 있을 때, 이 span 개체에 대해서 text()를 수행하면, 반환값은 내부 html을 제외한 "taeyo"가 되고요. html() 메서드를 사용하면 <b>taeyo</b>를 반환한다는 것이죠.'

이어지는 메서드들은 특정 요소나 개체 집합을 다른 요소의 "내부"에다가 앞, 뒤로 덧붙이는 기능을 제공하는 메서드들입니다.

append(content) 메서드는 이름이 의미하는 바가 명확하기에, 쉽게 이해할 수 있을 것입니다. 인자로 지정된 content를 jQuery 개체 내부에 덧붙이는 것이니까요. 예를 들어, 다음과 같은 표현이 있다고 가정해 봐요.

$("b.link").append("(클릭)");

이는 link라는 css 클래스를 갖는 B 태그 내부에 "(클릭)" 이라는 문자열을 추가하는 예입니다. B 태그 내부 뒤쪽에 덧붙이는 것이기에 "(클릭)"이라는 단어도 당연히 굵게 표현될 것입니다. 즉, 다음과 같은 최종 html이 형성된다는 것이죠.

<b class="link">굵은 글자임 (클릭)</b>

appendTo(selector) 메서드는 append와는 덧붙이기의 대상이 반대이며, 더불어, 셀렉터에 의해 일치된 대상 모두에게 덧붙여진다.

$("#linkText").appendTo("a.link");

이는 #linkText 라는 아이디를 갖는 요소를 얻어서, 그를 link라는 css 클래스를 갖는 "모든" 하이퍼링크 뒤에 덧붙이게 됩니다. 그러면서, 원래의 #linkText 요소는 사라집니다. 원본 개체는 복사되면서 제거되는 것이죠. 더불어, 다음과 같은 구문도 가능합니다.

$("<font>(클릭)</font>").appendTo("b");

이는 <font>(클릭)</font>라는 태그 문자열을 동적으로 생성한 뒤, 그를 모든 B 태그의 뒤에 덧붙이는 역할을 합니다

after 메서드는 앞서 설명한 append 메서드와 눈에 보이는 결과는 유사합니다. 다만, 태그 내부에 덧붙이는 것이 아니라, 태그 바깥쪽에 덧붙인다는 차이가 있지요. 예를 들어, 다음 구문을 보도록 해요.

$("a").after("<font>(클릭)</font>");

이는 모든 하이퍼링크 바로 뒤에 "<font>(클릭)</font>" 이라는 태그 문자열을 덧붙이는 구문입니다. 해서, 결과로 다음과 같은 태그가 구성되는 것이죠.

<a href="http://taeyo.net">태오 사이트</a><font>(클릭)</font>

만일, after 메서드 대신 append 구문을 다음과 같이 사용했다면,

$("a").append("<font>(클릭)</font>");

이는 다음과 같은 결과 태그를 구성했을 것입니다.

<a href="http://taeyo.net">태오 사이트<font>(클릭)</font></a> 

복사 관련 메서드(clone)는 약간의 부연 설명을 드릴 필요가 있는데요. 인자로서 true를 지정하게 되면, 단순히 요소만을 복사하는 것이 아니라, 그 요소에 달려있는 이벤트 처리기(예, click, mouseover)등도 복사가 된다는 것입니다. 인자가 없는 기본 clone() 메서드로 복사하게 되면, 요소 자체만 복사될 뿐, 해당 요소에 달려있는 이벤트 처리기들은 복사가 되지 않습니다. 해서, 이벤트 처리기까지 복사하고 싶다면 반드시 clone(true) 메서드를 사용해서 대상을 복사해야 한다는 점에 주의하세요.

6. jQuery : 탐색 메서드
개체들의 집합에서 다시금 특정 개체를 찾거나, 필터하거나, 추가하는 등의 작업을 위해 지원되는 API 메서드들의 그룹

 셀렉터를 통해서 1차적으로 일치되는 집합을 얻어낸 후, 그 집합에 대해서 사용할 수 있는 메서드

eq(index)라는 메서드는 사실 :eq(index) 라는 셀렉터 필터와 거의 동일합니다. 하나는 메서드이고 하나는 셀렉터 구문이라는 차이만 있는 것이죠. 다음 예제 코드를 한번 보세요.

$("div:eq(1)").addClass("blue");
$("div").eq(1).addClass("blue");

첫 번째 구문은 이미 익숙한 셀렉터이죠? 다들 아시겠지만, 현재 문서에 있는 div 중 2번째로 등장하는 div를 얻어내는 셀렉터입니다. 그리고, 그 요소에 대해 blue 라는 css 클래스를 적용하고 있습니다.

이는 eq() 메서드를 사용하는 두 번째 구문처럼 작성할 수도 있습니다.일단 모든 div들을 셀렉트한 다음, 그 중 2번째 개체를 얻어내기 위해서 eq(1)이라는 메서드를 사용하는 것이죠. 사실, 이 둘은 결과적으로 동일합니다. 그렇다면, 어떤 방법을 쓰던지는 우리의 맘일까요? 그럼요~ 여러분의 마음입니다. 다만!!!

eq() 메서드를 사용한 경우에는 end()라는 엄청난 초능력자 메서드의 도움을 받아 이전 상태로 돌아갈 수 있다는 장점이 있습니다.

end() 메서드 :
현재 일치된 개체 집합을 변경하여, 방금 일어난 "파괴적인 작업" 직전의 상태로 되돌린다.

"모든 짝수 번째 div를 구한 다음, 그 중 첫 번째 div는 orange라는 배경색을 적용하고, 두 번째 div는 blue 배경색을 적용하라"

end() 메서드를 모르는 상황이었다면 여러분은 이를 다음과 같이 작성할 듯 합니다.

$("div:odd").eq(0).css("background", "orange");
$("div:odd").eq(1).css("background", "blue");

우선, $("div:odd")를 통해서 짝수번째 div들을 구한 다음, eq() 메서드를 사용해서 그 중 첫 번째와 두 번째 요소에 각각 접근하는 것이죠. 코드가 두 줄이라는 것은 그렇다치더라도, 각각에 대해서 동일한 검색을 두번이나 반복하는 부분은 썩 마음에 들지 않습니다.

여기서 end()는 eq(0)을 하기 직전의 상태로 되돌리는 역할을 합니다. 고로, end()를 사용하면 단 한줄의 메서드 체인으로 원하는 작업을 마무리 할 수 있게 되는 것입니다.

filter(expr)은 결과적으로는 일반 셀렉터를 통한 검색하는 것과 동일하다고 보시면 됩니다. 다만, 셀렉터는 문서상에 존재하는 개체들을 대상으로 검색한다면, 이는 메모리상에 존재하는 개체 집합을 대상으로 필터링을 한다는 부분에서 차이가 있습니다. 즉, 셀렉터에 의한 1차적 검색 집합에 대해서 다시 추가적으로 필터링(걸러냄)을 하고 싶은 경우에 사용하는 API 메서드라는 것이죠. 인자로는 필터링을 위한 표현식을 제공할 수 있고요. 그 표현식과 매치되지 않는 모든 요소들을 개체 집합(메모리)에서 제거하여 필터링된 결과를 얻습니다.

반면, 유사한 API로 Filter(func)도 있는데요. 이는 인자로 표현식이 아닌 함수를 사용하지요. 즉, 필터링(걸러냄)을 함수를 통해서 보다 세밀하게 제어하고 싶은 경우에 사용합니다. 필터링 조건이 일반적인 표현식으로 설명하기 어려운 경우에 별도의 함수로 작성을 해서 그 안에서 어떻게 필터를 수행할 것인지를 지정하는 것이죠.

가장 간단하게 예를 들면, 다음 2개의 표현은 결과적으로는 동일하다고 볼 수 있습니다.

$("div:odd") 
$("div").filter(":odd")

다만, 앞의 예제와 마찬가지로 filter 메서드를 사용한 경우는 end() 메서드의 도움을 얻어 이전 상태로 되돌릴 수가 있다는 장점이 있죠.

7. CSS 와 attr 메서드

여러 CSS 속성을 한번에 설정할 수 있는 css(properties) 라는 오버로드 메서드가 존재한다는 것하고요. CSS Class를 편하게 추가했다 제거했다 할 수 있게 하는 toggleClass()라는 메서드가 제공된다!!



$("img").attr("title", function(i) {
                     return (i + 1) + "번째 이미지입니다";
         });

코드는 모든 <img> 들을 가져와서 그들의 title 어트리뷰트의 값을 동적인 문자열로 설정하는 예입니다. 두 번째 인자로 function이 사용되고 있는 부분이 재미있는 부분입니다. 즉, 그 함수의 반환 값이 결과적으로 img의 title 어트리뷰트 값이 되는 것입니다. function(i)의 인자인 i는 0부터 시작하는 요소의 인덱스 값이기에, 상기 결과에 의해서 각각의 이미지들은 “1번째 이미지입니다”, “2번째 이미지입니다”와 같은 title을 갖게 됩니다.

7. jQuery : Event 

프로그래밍에서의 이벤트란 사용자의 어떤 액션(개체를 클릭하거나, 마우스를 움직이는 행동)에 의해서 야기되는 사건을 의미하며, 그러한 이벤트에는 클릭, 마우스 오버, 키 입력 등이 있습니다. 그리고, 일반적으로 그러한 이E벤트가 발생하는 경우 특정 로직을 수행하기 위해서 해당 이벤트와 특정 메서드를 연결해 놓곤 하는데요. 이러한 연결을 이벤트 처리기 매핑(event hanlder mapping)이라고 이야기하며, 매핑에 의해서 연결된 메서드들을 이벤트 처리기라고 합니다. Click, MouseOver, KeyPress 등등을 알고 계시죠? 그렇습니다. 이들이 이벤트 처리기들입니다

첫 번째 인자로 사용하는 이벤트 명

이미 특정 이벤트에 매핑되어 있는 처리기를 제거하기 위해서는 unbind 메서드를 사용합니다.

사용 예는 다음과 같습니다.

$("#MyBtn").unbind("click");

일회성 이벤트 처리를 지원하기 위한 one 이라는 메서드

$("#MyBtn").one("click", function() {
    alert("누가 내 버튼을 클릭한 것이냐?");");
});

 trigger() : 특정 이벤트를 코드를 사용해서 일으키기 위한 메서드입니다. 즉, 실제로 사용자가 클릭 액션을 하지 않았음에도, 클릭을 한 것처럼 이벤트를 일으키는 코드라는 것입니다.

$("#MyBtn").trigger("click");
--------------------------------------------------------------------------------------------------------
 자주 사용하는 이벤트들에 대해 각각 특별한 이벤트 도우미를 제공하고 있습니다

$("#MtSnow").click(function() {
   alert("...");
});
--------------------------------------------------------------------------------------------------------

 
1. Ajax 란?

 왜 Ajax가 나왔는가? / 불편했던점(Ajax나오기전)
 
 왜 필요한가? / 기존 방식을 어떻게 대체 ? / 사용 예

 특징 단점

 구조(흐름도)

2. Jquery란?

------------------------------------------------------------------------------------------------
1. Ajax : Asynchronous JavaScript and XML
------------------------------------------------------------------------------------------------

@ Ajax란 진정 새로운 것인가??

그렇지 않습니다. Ajax를 포함하는 원격 자바스크립트(Remote Javascript)는 XML 데이터를 이용한 서버와의 커뮤니케이션 기능을 제공합니다. Ajax의 구현이 가능해진 것은, 오늘날 사용되는 주요 브라우저가 독립적인 XML HTTP 요청을 실행하는 오브젝트를 지원하는 덕분입니다. Internet Explorer 5와 이후 버전은 XMLHTTP 오브젝트를, Mozilla 기반 브라우저는 XMLHttpRequest 오브젝트를 제공합니다. 두 가지 오브젝트 모두 서버로부터 XML 데이터를 요청하고, 이와 유사한 방법으로 데이터를 처리하는 기능을 제공합니다. XML이 다이내믹하게 전달될 수 있는 이상, 서버 사이드 Ajax 컴포넌트에 어떤 테크놀로지를 사용해도 관계없습니다. 따라서 PHP에서 servelet에 이르는 다양한 테크놀로지를 Ajax 서버에 사용할 수 있습니다.
Ajax 테크놀로지가 빠르게 확산되고 있는 것은, 오늘날 사용되고 있는 거의 모든 브라우저가 Javascript와 XMLHTTP 오브젝트를 지원하며, 또 모든 웹 서버 테크놀로지가 XML(또는 마크업)의 생성을 지원하는 덕분이라 할 수 있습니다.

@ Ajax란??

-웹 의 플랫폼화를 가능하게 하는 기술적인 토대로서 비동기 통신을 하여, 빠른 서비스의 제공이 가능하도록 한다. 사용자 경험이 기반이(UX) 되는 유연한 사용자 환경을 구현 할 수 있도록 하는 것이다.

- Ajax는 특정한 하나의 기술이 아니다. 몇 가지 각 영역에서 활약하던 기술들로 이루어져있으며, 강력한 새로운 방법들로 뭉쳤다. Ajax는 다음의 것들을 통합한다.

•  동적인 HTML을 지원하는 DHTML, DOM, CSS
   다양한 플랫폼에서 Data 교환을 지원하는 XML, JSON
   웹브라우저에서 다양한 클라이언트 로직을 구현하기 위한 자바스크립트
   서버와 비동기 통신을 지원하는 XMLHTTP
   XML 데이터를 브라우저에서 지원하는 HTML로 변환하는 XSL

-  AJAX는 독립적이고 구체적인 하나의 특정 기술을 지칭하는 것이 아니다. 웹에 이미 존재하고 있는 DHTML, CSS, XML, XMLHttpRequest등의 기술들을 합친 새로운 기술 또는 그 기술들을 이용하여 보여줄 수 있는 이용형태를 나타낸다. 

@ Ajax는 두가지 핵심 테크놀로지가 존재하는 환경에서 구현 가능하다

XMLHTTP 또는 XMLHttpRequest 오브젝트를 지원하는 Javascript 지원 브라우저

XML에 응답할 수 있는 HTTP 서버 테크놀로지

AJAX의 핵심을 이루는 XMLHttpRequest는 인터넷 익스플로러(이하 IE)5.0에서부터 이미 액티브X오브젝트 형태로 제공되기 시작했고 그 후 모질라(Mozilla) 1.0에서부터 윈도우 오브젝트 형태로 XMLHttpRequest 객체가 지원되기 시작하였다. 그 이외에 넷스케이프 7, 맥의 사파리(Safari) 1.2, 오페라(Opera) 7.6에서부터, 그리고 모든 파이어폭스(firefox) 버전에서 지원하고 있다. XMLHttpRequest가 IE에서 액트브X 오브젝트로 다루고 있기 때문에 IE와 다른 브라우저들 간의 XMLHttpRequest 객체를 가져오는 방법이 다르고 브라우저 간에 인터페이스나 구현의 차이로 인해 미묘한 차이점을 보이는 문제가 아직 존재한다.

@ Ajax를 사용하는 목적

AJAX를 사용하는 가장 큰 이유는 웹에서 액티브X, 플래시 또는 자바 애플릿 등에 의존했던 사용성, 접근성, 응답성의 향상이다. 네트워크 인프라가 발전하여 네트워크 속도가 아무리 발라진다고 하더라도 새로운 컨텐츠를 보여주기 위해서 웹 페이지 전체가 매번 리로딩되는 것은 사용성, 응답성의 한계로 이어질 수밖에는 없다. 웹 페이지의 전체 레이아웃이 바뀐다면 웹페이지 전체가 다시 그려지는 것이 불가피 하겠지만(사실 DOM 인터페이스를 이용하여 HTML문서의 전체 구조를 바꿈으로서 레이아웃을 변경할 수는 있지만 효용성은 없을 것이다), 일부 레이아웃 변경 또는 레이아웃은 유지한 채 내용만 변경되는 것이라면 웹 페이지  전부를 다시 리로딩한다는 것이 불필요하게 느껴질 수 있다. 또 모든 액션이 요청을 보내고 응답이 오기를 기다리고 응답이 온 후에 다른 액션 또는 요청을 보내는 동기적인 사용 행태도 기존 웹 어플리게이션의 한계로 느껴질 수 있다.

@ Ajax는 무엇이 다른가?

AJAX의 초점은 앞에서 안급한 기존 웹 어플리케이션의 비효율성, 동기적인 액선의 단점을 해결할 수 있는 웹 페이지의 부분적인 변화, 적용과 비동기성에 있다. 하지만 굳이 AJAX만이 대안은 아니다. 액티브X, 자바 애플릿, 플래시 등이 그 대안이 될 수 있다. 하지만 그러한 기술들 대신에 AJAX가 가질 수 있는 경쟁력을 얘기하자면 플러그인을 사용하지 않고 브라우저만으로 바로 이용할 수 있다는 것과 새로운 것을 배우지 않고 DHTML, 자바스크립트, CSS등의 기존 웹 기술들을 그대로 이용할 수 있다는 것이다. 이러한 장점들은 지금도 널리 사용되고 있는 액티브X, 자바 애플릿, 플래시 등의 기술에 대한 대안으로 AJAX에 관심을 가져볼만한 충분한 이유를 준다.

@ Ajax어플리케이션 이용형태

기존 웹 애플리케이션 이용 행태에서는 사용자가 서버 측에 요청을 보내면 서버에서 응답이 클라이언트로 모두 전송되고 관련 리소스가 모두 로딩된 이후에 또 다른 행동을 취할 수가 있었다. 하지만 AJAX 어플리케이션에서는 서버 측에 보내는 요청이 비동기적으로 이루어지기 때문에 요청을 보낸 이후에도 응답이 완료되기를 기다리지 않고 또 다른 요청을 보내거나 그 이외에 액션을 취할 수 있다.

@ 왜 Ajax 가 나왔는가?

1.  웹 어플리케이션의 단점을 보완하기 위해서!!

2. 사용자 인터페이스(UI : User Interface) 풍부한 UI 기능을 탑재한 애플리케이션의 필요
 
- UI(User Interface), 사용자 인터페이스 사람과(사용자)과 사물 또는 시스템, 특히 컴퓨터 프로그램 등 사이에서
  의사 소틍을 할 수 있도록 일시적 또는 영구적인 접근을 목적으로 만들어진 물리적 가상 매개체

- 웹 어플리 케이션의 이점을 고려!

• 상호작용은 풍부하지 않다. 클라이언트/서버의 관점보다
  언제 어디서나 쉬운 접근성
  설치 없이 사용하는 가벼움과 즉시성
  누구나 쉽게 사용할 수 있는 직관적 인터페이스

@ 전통적인 방법 (Ajax 전)
 
전통적인 웹 어플리케이션 모델은 이렇게 작동한다.: 대부분의 사용자의 인터페이스에서의 액션은 웹 서버로의 HTTP Request를 유발한다. 서버는 데이터 검색, 수 처리, 여러 레거시 시스템들과의 소통 같은 몇 가지 프로세스를 하게 되고, 클라이언트에게 HTML페이지를 돌려준다. 이는 하이퍼텍스트를 매개체로 한 웹의 기본적인 사용법을 채용한 모델이다. 그러나 하이퍼텍스트는 소프트웨어 어플리케이션을 충분히 만족시키기엔 부족했다.
이런 접근법은 많은 기술적인 감각을 만들어냈지만 사용자에게 만족할만한 결과를 주지는 못했다. 서버가 할 일을 하는 동안 유저는 무엇을 하는가? 그렇다. 기다려야만 한다. 그리고 작업의 모든 스텝마다 사용자는 기다린다.
당연하게도, 어플리케이션들을 모두 긁어 모으는 식으로 웹을 디자인한다면 유저들을 기다리게 만들지 않을 수 있었을 것이다. 인터페이스가 한번 로드 되고 나면, 왜 사용자는 어플리케이션이 서버에게 무언가를 필요로 하는 모든 시간마다 기다려야 하는가? 진짜, 도대체 사용자들은 왜 어플리케이션이 서버로 가는 것을 보아야 하는가?
(기존의 웹애플리케이션 방식은 화면을 새로운 정보를 나타내기 위해서 서버에 새로운 요청을 보내고 그 요청에 대해 받아온 결과를 브라우져가 다시 구성해서 사용자에게 보여주는 방식이다.
새 데이터의 페이지를 완전하게 보기위해서 모든 관련 이미지가 다운로드되고 브라우져가 열심히 받아온 HTML 코드에 맞게 자료와 화면을 구성할때 까지 기다려야 했다 )

@ Ajax는 기존 방식을 어떻게 대처 했는가?

Ajax 어플리케이션은 사용자와 서버 사이의 중개자- Ajax 엔진 –를 소개함으로써 웹에서의 소통의 본성인 가다 서는 반복행위를 제거한다. 응답을 더 낮춰주는 어플리케이션을 한층 더 두는 것 같으나 그 반대가 맞다.

세션이 시작될 때 웹 페이지를 로딩하는 것 대신, 브라우저는 Ajax엔진(Javascript로 코딩되고 항상 숨겨진 프레임 안에 집어넣어진)을 로드 한다. 이 엔진은 사용자가 접하는 인터페이스를 구성하는것과 유저를 위해 서버와 통신하는 것 모두를 책임진다. Ajax엔진은, 사용자가 서버와의 통신에 의존하지 않는, 비동기식으로 이루어지는 어플리케이션과 의사소통 할 수 있도록 한다. 그래서 사용자는 결코 빈 페이지나 모래시계 아이콘 같은 것들을 볼 수 없게 되고 서버가 무언가를 하는 동안 초조하게 기다리지 않아도 된다.
(Ajax로 우리는 실제 데이터들만을 주고 받고 화면을 새로 구성해야 할 필요 없이 변경되어야 할 부분만 변경함으로써 속도와 사용이 훨씬 편리해졌다. 또한 UI도 훨씬 세련되게 표현가능하다 )

@ 사용 예) 구글 (Suggest, Map, 지메일)

글자를 칠 때, 제안되는 단어들이 변경되는 순간을 유심히 살펴보자. 거의 즉시 이루어진다

Google Maps의 경우에도 줌 인을 하거나 지도를 여기저기로 이동시켜 보아도 거의 즉시 모든 것이 이루어진다. 기다리라는 페이지를 보여주거나 페이지 전체가 리로드되는 일은 없다.

Google Suggest와 Google Maps는 Ajax라고 불리는 것이 적용된, 웹 어플리케이션의 새로운 접근방식의 실 예다.
Ajax가 기술적인 장점뿐만 아니라 실 세계의 어플리케이션들에도 유용하다는 것을 보여주고 있다. 이것은 연구실에서만 이루어지는 별개의 기술이 아니다. 그리고 Ajax 어플리케이션들은 정말 단순한 Google uggest에서부터 그 복잡하고 정교한 Google Maps에 이르기 까지 어떤 크기로도 될 수 있다.

@  Ajax 주요 특징

1. A가 의미하듯 Asynchronous 처리 방식이다. 즉 새로운 요청을 위해서 페이지 전체를 전송하고 기다릴 필요가 없다. 새로운 요청이 있는 동안에도 브라우저와 그 내용 및 기능들을 계속적으로 사용할 수 있다.

기존 웹 애플리케이션을 이용할 경우 사요자의 액션 흐름, 서버에 요청을 보내고 새로운 페이지가 완료되기를 기다림

Ajax를 이용한 경우 사용자의 액션은 비동기적으로 서버의 응답이 완료되기를 기다리지 않는다.

2. 전체 페이지를 새로 받아와서 그리는 방식이 아닌 실제 해당 데이터만을 주고 받음으로써 데이터양을 줄이고 DOM을 이용하여 화면을 구성함으로써 빠르게 화면에 반영시켜 준다

3.마우스, 키 등 많은 운영체제가 제공하는 이벤트들을 잡아 적절하게 비동기요청을 만들어 낼 수 있다.

4. 수신하는 데이터의 양을 줄임 (DB의 응답을 가공하지 않고 바로 JavaScript에 넘기는 식으로 전송량을 줄임)

@ Ajax 단점

1. 아직은 쉽지 않은 브라우저 독립적인 웹 페이지
: Ajax를 구성하는 요소들이 모두 인터넷 표준을 따르고 있으므로 (사실 XMLHttpRequest는 표준은 아닙니다만) 가급적 브라우저에 독립적인 웹 페이지를 구현하는 것이 보다 Ajax 스러운 웹 응용 프로그램이라는 것!

: 마이크로소프트와 모질라 재단이 W3C의 표준을 적극적으로 준수 해야함!

2. 늘어나는 코딩량

: 서버와 클라이언트 사이에 전달되는 데이터와 트래픽은 감소할 지언정 우리가 작성해야 하는 코드는 획기적으로 늘어날 수 있다는 안타까운점

ex)
만일 여러분이 <TABLE>태그를 페이지에 표시해야 한다고 가정해 보겠습니다. 기존의 방법이라면 그저 서버 측 페이지에서 <TABLE>태그를 작성하기만 해주면 끝이었습니다. 그러나 Ajax를 채택하게 되면 이야기는 달라집니다. 서버에서 전달되는 것은 <TABLE>태그를 작성하는데 필요한 데이터 뿐입니다. 나머지는 자바 스크립트를 통해 제어해야 한다는 것이지요.

 

<table border="0" cellpadding="0">

    <tr>

        <td>Hello, World!</td>

    </tr>

</table>

이 코드를 만들기 위해 우리가 작성해야 하는 자바 스크립트 코드는 다음과 같습니다

function buildTable() {
    var objTable = document.createElement("table");

    objTable.border = 0;

    objTable.cellpadding = 0;

    var objTr = objTable.insertRow(0);

    var objTd = objTr.insertCell(0);

    objTd.innerText = "Hello, World";

    document.body.appendChild(objTable);

}

3. 디버깅

기존에는 라운드 트립 과정에서 서버 코드에 오류가 발생한 경우 브라우저 상에 오류 내용이 표시되었습니다.

그런데 Ajax를 채택하면 이러한 디버깅 정보는 더 이상 볼 수가 없습니다. 왜냐하면 그 오류 데이터는 XMLHttpRequest 덕분에 백그라운드로 숨겨지기 때문이지요. 물론 다른 여러 가지 방법을 통해 디버깅을 할 수는 있습니다. 그.러.나 여러분은 지금까지 알고 있던 디버깅 방법을 버리고 새로운 디버깅 방법을 배우고 경험해야 합니다

 4. 새롭게 대두되는 보안 문제

Ajax는 일단 자바스크립트에 의해 제어가 되며, 자바 스크립트는 js파일만 다운로드하면 간단히 열어볼 수 있기 때문입니다. 다행히 Ajax는 SSL로 보호를 할 수도 있습니다만 그렇다고 모든 페이지에 SSL 보안을 걸기도 우습거니와 다양한 암호화 기술을 적절히 활용하고 중요한 데이터나 정보는 가급적 서버 쪽에서 처리할 수 있도록 하는 것이 최선의 대책이 아닐까 생각됩니다

#. 뒤로가기가 안됨,  기존의 것이 남아있기 때문에 전체적으로 페이지가 바뀌어야 할 경우 처리를 잘 해주어야 한다.

 

@ Ajax 구현을 위한 JavaScript 라이브러리들..

Prototype.js 널리 알려져 있는 Ajax 프레임워크
http://www.prototypejs.org/

Script.aculo.us Prototype.js를 기반으로 하는 여러 인터페이스의 제공
http://script.aculo.us/

jQuery Prototype.js 만큼 널리 사용되는 Ajax 프레임워크
http://jquery.com/

jQuery UI jQuery를 기반으로 하는 여러 인터페이스의 제공
http://jqueryui.com/

Dojo 다양한 화면효과 및 위젯을 제공
http://dojotoolkit.org/

Google Web Toolkit 구글에서 배포중인 Ajax 프레임워크
http://code.google.com/intl/ko/webtoolkit/

ASP.NET AJAX MS에서 공식 개발된 ASP.NET 지원용 AJAX 프레임워크
http://www.asp.net/ajax/

YUI Yahoo User Interface
http://developer.yahoo.com/yui/



@ Ajax 구현 -

XMLHttpRequest 와  ActiveXObject의 차이점!

XMLHttpRequest(XHR) 은 W3C의 표준이 아니므로, 인터넷 익스폴로어에서는 Active X Component 형식으로 구현되었고, 그 밖에 다른 브라우저들(FireFox, Safari, Opera)은 native javascript객체로 구현되었다.
이런 차이점을 고려해서 XHR 객체를 얻어오는 자바스크립트 코드를 다음과 같이 작성할 수 있다.

* 인터넷 익스플로러
var xmlhttp = new ActiveXObject("Microsoft.XMLHTTP")

* 그 이외의 브라우저
 var xmlhttp = new XMLHttpRequest()

좀 더 일반적인 방법으로는 다음과 같이 XMLHttpRequest 객체를 얻어올 수 있다.

 var xmlhttp = false

  if(window.XMLHttpRequest){

   xmlhttp = new XMLHttpRequest()

 } else {

   xmlhttp = new ActiveXObject("Microsoft.XMLHTTP")

 }

XMLHttpRequest의 이용

AJAX에 있어서 가장 매력적인 부분은 비동기성이다. XMLHttpRequest는 동기적, 비동기적 등 두가지 방법으로 이용할 수 있는데, AJAX에서는 비동기적인 방법을 주로 이용하게 된다. 비동기 모드로 XMLHttpRequest를 사용할 경우 send()가 호출된 후 웹 서버로부터 응답이 오기를 기다리며 브라우저가 멈춰있지 않고 웹 서버로부터 결과를 모두 받아낸 이후 콜백 핸들러에 정의된 코드가 실행되기 때문에 사용자는 계속 브라우저를 이용할 수 있게 된다.

* XMLHttpRequest의 동기적 이용 예제

 xmlhttp.open("GET", "test.html", false);

 xmlhttp.send(null);

 if (xmlhttp.status == 200){

      alert(xmlhttp.responseText);

 }

  * XMLHttpRequest의 비동기적 이용 예제

 xmlhttp.open("GET", "test.html", true);

 xmlhttp.onreadystatechange = function() {

    if (xmlhttp.readyState == 4) {

       if (xmlhttp.status == 200) {

            alert(xmlhttp.responseText);

       }  }  }

  xmlhttp.send(null);

XMLHttpRequest를 동기적으로 이용할 때에는 XMLHttpRequest의 send()를 호출한 뒤 response의 status code를 체크하고 responseText에서 결과를 꺼내오면 되므로 자바에서 java.net.HttpURLConnection을 사용하는 방식과 비슷하다. 동기적으로 XMLHttpRequest를 이용할 때는 XMLHttpRequest의 open() 메쏘드의 3번째 파라메터 값을 false로 줘야 한다. open()의 3번째 파라메터는 비동기적으로 이용할 것인지를 나타내는 boolean 값이 들어가고 default로 true이며 생략 가능하다.

XMLHttpRequest를 비동기적으로 이용할 때에는 send()를 호출하기 전에 XMLHttpRequest의 onreadystatechange 프로퍼티에 XMLHttpRequest의 상태가 변할 때마다 실행될 핸들러를 function reference 형태로 줘야 한다. XMLHttpRequest의 상태는 <표> 와 같이 5개의 상태를 가지지만 보통 가장 마지막 상태인 완료 상태를 체크해서 처리해주면 된다.

XHR 속성중에서 중요한 몇가지 속성

onreadystatechange
     자바스크립트 콜백함수(funtion pointer)를 저장한다.
     콜백함수는 readyState 값이 변할때 마다 호출된다.
     요청이 서버로 보내지면 readyState 는 5가지 숫자값으로 계속 변화가 일어나게 된다.

 readyState
     요청의 상태를 의미한다.

      0 : UNINITIALIZED : 오브젝트는 작성되어 있으나 아직 초기화되어 있지 않다.(open()이 불리지 않았음)
     1 : LOADING : 오브젝트가 작성되었으나 아직 send()가 불리지 않았다.
     2 : LOADED : send()가 불렸지만 ststus와 header가 아직 도착하지 않았다.
     3 : INTERACTIVE : data일부를 받았다.
     4 : COMPLETED : data전부를 받았다. 완전한 데이터가 이용가능

 responseText
     서버의 응답을 string 형식으로 나타낸다

responseXML
     서버의 응답을 XML 로 나타낸다.
     이 속성은 DOM 객체로 파싱할 수 있다. 

status
     서버로부터의 HTTP 상태코드이다.(예 200(OK), 404(NOT Found) 등등 

statusText
     HTTP 상태코드에 대한 텍스트 값이다.(예 OK, NOT Found 등등)


-------------------------------------------------------------------------------------------------------
void open(method, url, [async, [user, [ password ]]])
 
    요청을 초기화한다.

     method : GET/POST
     url : 요청대상 URL
     async : 비동기 true, 동기 false (default : true)
     user : 인증페이지에서 사용될 사용자 이름
     password : 인증페이지에서 사용될 암호

async 을 false 로 설정하면 요청은 동기로 처리되기 때문에 서버에서 응답을 받을때까지 프로세스는 기다린다.
XHR 을 사용하는 가장 큰 이점중의 하나인 비동기 처리를 위해서는 asynch 항목을 true 로 설정해야 한다.
false 를 설정한다면 XHR 을 사용하는 이점이 그만큼 줄어든다.

void send(content)
실질적으로 요청을 서버로 보낸다.
요청이 비동기이면 이 메소드는 바로 리턴되지만 요청이 동기이면 서버에서 응답을 받을때까지 계속 대기한다.
content 는 선택사항이며, DOM 객체이거나 input stream, string 값으로 설정할 수 있으며 HttpRequest body 의 한 부분으로 서버로 전달된다.
(※content 에 값을 넘기려면 open() 메소드는 반드시 POST 로 설정해야 하며, GET 방식으로 요청하려면 null 을 설정하면 된다.)

 open(), send() 메소드가 가장 많이 사용되는 메소드들이다.나머지 메소드에 대해서도 알아보자

void setRequestHeader(string header, string value)
     header 에 해당하는 value 값으로 HttpRequest  헤더에 값을 설정하는 메소드이다.
     반드시 open() 메소드 다음에 위치해야 한다.
     POST 방식은 HTTP Request 객체의 바디에 파라미터가 저장되는 것이므로 헤더에도 Content-Type 을 반드시
    정의해 줘야 한다. 정의를 해주지 않으면 서버에서는 클라이언트에서 보낸 파라미터를 얻지 못한다.

void abort()
     요청을 중지한다.

string getAllResponseHeaders()
     요청에 대응되는 응답의 헤더정보를 리턴한다.
     즉, Content-Length, Date, URI 등을 포함하는 헤더정보를 string 형식으로 반환한다.

String getResponseHeader(string header)
     응답의 헤더정보중에서 header 에 대응되는 값을 string 형식으로 반환한다.

responseXML 속성을 이용한 DOM 시작하기

대단히 복잡한 응답데이터의 경우는 단순한 문자열로 처리할 수 없으며 XML 형식으로 처리하는 것이 훨씬 논리적이고 효율적일 것이다. 그러면 어떻게 브라우저는 서버로부터 받은 XML 형식의 데이터를 처리할 수 있는 것일까? XML 문서는 W3C 의 DOM 을 이용해서 처리된다. DOM 을 지원하는 브라우저들은 당연히 XML 문서를 다루는 많은 API 를 구현하고 있기 때문이다.
DOM 은 HTML 과 XML 을 다루는 API 를 제공하고 있으며, 스크립트를 통해서 다큐먼트에 접근할 수 있도록 정의되어 있다. 자바스크립트는 DOM 에 접근할 수 있고 DOM 을 다룰수 있는 스크립팅 언어이다. 다큐먼트의 모든 요소들은 DOM 의 부분들이기 때문에 요소의 속성과 메소드들은 자바스크립트로 제어가 가능하다.
 

다음은 XML 문서를 처리하기 위한 DOM 요소의 속성을 살펴보도록 하자.

 

childNodes : 현재 요소의 자식을 배열로 표현한다.

firstChild : 현재 요소의 첫번째 자식이다.

lastChild : 현재 요소의 마지막 자식이다.

nextSibling : 현재 요소와 바로 다음의 요소를 의미한다.

nodeValue : 해당 요소의 값을 읽고 쓸 수 있는 속성을 정의한다.(=data)

parentNode : 해당 요소의 부모노드이다.

previousSibling : 현재 요소와 바로 이전의 요소를 의미한다.

 

 

다음은 XML 다큐먼트를 다루는 유용한 DOM 요소의 메소드를 살펴보자.

 

getElementById(id) : 다큐먼트에서 특정한 id 속성값을 가지고 있는 요소를 반환한다.

getElementsByTagName(name) : 특정한 태그 이름을 가지고 있는 자식 요소로 구성된 배열을 리턴한다.

hasChildNodes() : 해당 요소가 자식 요소를 포함하고 있는지를 나타내는 Boolean 값을 리턴한다.

getAttribute(name) : 특정한 name 에 해당하는 요소의 속성값을 리턴한다.

Dynamic DOM 객체 다루기

 지금까지는 DOM 의 기초적인 속성 및 메소드들을 다루어 봤다. 이런 속성으로는 다이나믹한 웹페이지를 구성하는데 한계가 있다. 웹페이지 전체가 리로딩 되지 않고 적절한 시점에 필요한 부분만 서버와 통신하여 데이터가 수정되는 동적인 웹페이지를 만들려면 더 다양한 DOM 의 속성을 익혀야 한다. 자, 그럼 컨텐츠를 동적으로 생성할 수 있게 해주는 W3C DOM 의 속성과 메소드에는 어떤것들이 있는지 알아보자.

document.createElement(tagName) : tagName 으로된 엘리먼트를 생성한다. div 를 메소드 파라미터로 입력하면 div 엘리먼트가 생성된다.

document.createTextNode(text) : 정적 텍스트를 담고 있는 노드를 생성한다.

<element>.appendChild(childNode) : 특정 노드를 현재 엘리먼트의 자식 노드에 추가시킨다. (예를들어 select 엘리먼트에 option 엘리먼트 추가)

<element>.getAttribute(name) : 속성명이 name 인 속성값을 반환한다.

<element>.setAttribute(name, value) : 속성값 value 를 속성명이 name 인 곳에 저장한다.

<element>.insertBefore(newNode, tartgetNode) : newNode 를  tartgetNode 전에 삽입한다.

<element>.removeAttribute(name) : 엘리먼트에서 name 속성을 제거한다.

<element>.removeChild(childNode) : 자식 엘리먼트를 제거한다.

<element>.replaceChild(newNode, oldNode) : oldNode 를 newNode 로 치환한다.

<element>.hasChildNodes() : 자식 노드가 존재하는지 여부를 판단한다. 리턴형식은 Boolean 이다.

 

여기서 한가지 짚고 넘어갈 부분이있다. 현재 거의 모든 브라우저는 DOM 을 지원하고 있으며 API 또한 비슷하게 동작하도록 구현되어 있다. 정확히 말하자면 DOM API 의 구현이 브라우저마다 다소 차이가 있다는 말이다. 가장 호환이 안되는 브라우저는 다름아닌 인터넷 익스플로어다. AJAX 의 핵심은 XMLHttpRequest 객체이고 가장 먼저 이 객체를 구현하고 제공한 브라우저가 IE5임을 감안할때 상당히 아이러니컬하지 않은가? 2000년 IE 가 전세계 브라우저의 시장점유율 95% 차지할 즈음, IE 에 대적할 만한 브라우저는 존재하지 않았다. 마이크로소프트가 다양한 웹표준 구현을 포기했던 시점이 바로 이때부터다. 이때까지 XHR 의 사용은 당연히 저조할 수밖에 없었다. 하지만 모질라와 사파리가 잇따라 광범위하게 지원을 시작하게 되자 상황은 변하기 시작했고,  사용율이 극히 부진했던 XHR 객체는 W3C 의 표준으로까지 자리매김하게 되었다. 더우기 구글맵, 구글 Suggest, Gmail, Flickr, Netflix 등에서 AJAX 를 사용하자 이제는 명실상부한 웹의 표준으로 거듭나게 되었다. 너무 늦었지만 Microsoft 쪽에서도 많은 분발을 촉구한다. 그러면 IE 에서 문제가 되고 있는 DOM 객체의 특징을 간략히 살펴보자.

첫째, IE 에서는 <table> 에 <tr> 을 추가할때 appendChilde() 메소드를 사용하더라도 <tr> 은 나타나지 않는다. 따라서 <tr> 을 <tbody> 에 추가해 주는 방식을 사용해야 모든 브라우저에서 동작하는 코드를 작성할 수 있다.

둘째, IE 에서는 setAttribute() 메소드에 class 속성을 이용할 수 없다. setAttribute("class", "newClassName") 한 후에 다시 setAttribute("className", "newClassName") 을 해야 모든 브라우저의 호환성을 보장할 수 있다.

셋째, IE 에서는 style 속성에 setAttribute() 메소드를 이용할 수 없다. <element>.setAttribute("style, font-weight:bold;") 라고 하는 대신에 <element>.style.cssText = "font-weight:bold"  라고 해 줘야 모든 브라우저에서 제대로 작동한다.

get과 post방식의 차이를 보여주는 예제

function makeQuery(){
// making parameter to servlet
 var name = document.getElementById("name").value;
 var phone = document.getElementById("phone").value;
 var str = "name="+name+"&phone="+phone;
 return str;
}

function goGet(){
 var url="GetPostServlet?"+makeQuery();
 xhr.send(null); //get:null, post:insert parameter
}

function goPost(){
 var url="GetPostServlet";
 xhr.open("post", url, true);
 xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
 xhr.send(makeQuery()); //get:null, post:insert parameter
}

 

DOM은 문서의 내용, 구조, 스타일을 프로그램이나 스크립트를 통해 다아니믹하게 접근, 수정 할수 있게 하는 플렛폼/언어 중립의 인터페이스다. 이미 처리가 완료되서 사용자게에 보여진 문서를 다시 수정해서 그 처리결과를 보여줄 수 있다.

 

라는 군요.

 

사용 예는 질문에서 말씀하신데로 인터넷만 들어가면 나오는군요.

추가로 설명드리자면 DOM은 정적인 HTML 태그들을 그냥 태그가 아닌 하나의 개체들로 정의해 두어 접근성과 조작성을 향상시키는 것이 아닐까 생각되고요.

(극단적으로 DOM이 없다면 완성된 페이지를 수정하기 위해서 수정부위를 처음부터 끝까지 찾아서 해당 부분을 수정하는 스크립트를 작성해야 하지 않을까요?)