[JavaScript] 자바스크립트 중급

자바스크립트 중급

1. 사용자 정의객체 작성
2. JSON
3. DOM모델
4. Ajax

---

모델의 종류?

1. 종류
2. 내장객체
   1. BOM(Browser Object Model)
      화면에 보여지는걸 하나하나의 객체로 정의
      모든 브라우저마다 동일하게 적용할 수 없음(IE, Chrome, Safari...) 
      어떤 브라우저를 쓰느냐에 따라 결과가 달라질 수 있음 = 문제 발생!
   2. DOM
      표준으로 쓸만한 모델이 필요해짐
      문서를 정의하는 모든 것을 객체로 정의
      

      

---

DOM

1. WIKI 정의
   문서 객체 모델(DOM; Document Object Model)은 객체 지향 모델로써 구조화된 
   문서를 표현하는 형식이다. 
   DOM은 플랫폼/언어 중립적으로 구조화된 문서를 표현하는 W3C의 공식 표준이다. 
   DOM은 또한 W3C가 표준화한 여러 개의 API의 기반이 된다.
2. DOM의 개요
   자바스크립트를 이용하여 동적으로 웹 페이지를 제어하려면 DOM을 적용해서 작업한다.
   DOM은 HTML의 모든 구성요소를 객체로 인식하고 노드라는 개념을 적용시켜 계층구조를
   형성해 놓은 문서 모델을 의미한다.
   DOM의 최상위 객체는 document이며, HTML객체부터 document의 하위객체로 인식한다.
3. DOM의 구성요소
   document: 최상위 객체
   element(엘리먼트): HTML 태그를 구성하는 모든 태그
   속성: 태그 내부에 정의하는 속성
   텍스트: 모든 문자열, 태그와 태그 사이에 입력하는 공백도 객체로 인식
4. 자바스크립트에서 DOM을 엑세스 하기 위한 명령문
   1. 방법
      자바스크립트에서 DOM모델을 사용하기 위해서는 객체를 식별할 수 있어야 하며 
      DOM에서는 객체를 식별하기 위해 id로 정의하여 사용한다.
   2. 속성
      nodeName: 노드의 이름
      nodeValue: 노드의 값
      childNodes: 하나의 노드 밑에 형성되는 모든 자식노드의 list를 반환
      firstChild: 하나의 노드 밑에 있는 첫 번째 자식노드
      lastChild: 하나의 노드 밑에 있는 마지막 자식노드 
   3. 메소드
      getElementById("id명"): id에 해당하는 객체를 찾아올 때 사용
      getElementByTagName("태그명"): 매개변수로 지정한 모든 태그에 대해 리턴하므로
                                     배열로 관리(NodeList)
      getAttribute("속성명"): 지정한 속성명에 정의된 값을 리턴
      setAttribute("속성명","값"): 지정한 속성명에 값을 세팅한다
      appendChild(노드명): 지정된 노드를 삽입한다
      removeChild(노드명): 지정된 노드 삭제
      createElement("엘리먼트명"): 엘리먼트를 생성
      createTextNode(): 텍스트노드 생성
      insertBefore(노드명, target): 지정된 노드를 target 위치에 삽입

---

동적으로 이벤트 붙이기

1. 방법
   객체.이벤트핸들러명 = 함수명의 형태로 element에 이벤트를 연결할 수 있다.
2. 예시
   
   1. body
      

      

   2. script
      

      

   3. 내부에서 한번 더 function을 정의