HTML5 주말 무료 교육 - 3일차 : 수업내용 요약

<목차>

1. 자바스크립트 객체 / BOM / DOM

2. AJAX 프로그래밍

<개념 설명>

[생성자 함수]

- 동일 사양의 객체를 여러개 필요로 할 때

- 메서드를 포함하는 객체를 만들 때 --> prototype 이라는 생성자 함수의 속성을 사용한다.

- OOP적인 특성을 적용할 수 있다.

- 생성자 함수 : 새로이 만들어진 객체의 멤버를 초기화하는 역할

   (멤버 세팅)

   가급적 생성함수의 이름은 첫글자를 대문자로 한다.

   function 함수명(매개변수) {

       this.속성명 = 속성값;

       this.메서드명 = 함수;  <-- this 안붙이면 전역변수가 되버림!! 주의!

   }

[ BOM : browser object model ]

: 브라우저가 제공하는 자바스크립트 API

window 객체

document

history

location

navigator

screen

[ DOM : Document Object Model ]

XML 문서의 파싱과 편집 --> HTML DOM

(1) 원하는 태그에 대한 DOM 객체를 얻어온다.

document.getElementById("id속성값") : Node

document.getElementByTagName("태그명") : NodeList

document.getElementByClassName("class속성값") : NodeList

document.querySelector("CSS선택자") : Node

document.querySelectorAll("CSS선택자") : NodeList

(2) 편집

DOM객체.innerHTML

DOM객체.textContent

DOM객체.setAttribute()

DOM객체.getAttribute()

DOM객체.removeAttribute()

[ 이벤트 모델 ]

DOM 객체에서 발생되는 이벤트에 대하여 처리루틴을 등록하는 구현방법

1. 인라인 이벤트 모델(지역적)

2. 고전 이벤트 모델(전역적)

3. 표준 이벤트 모델(전역적)

// 고전 이벤트 모델

<script>

DOM객체.on이벤트이름 = function() { ...... };

DOM객체.on이벤트이름 = null  //이벤트 해제 방법

DOM객체.on이벤트이름 = 함수1;

DOM객체.on이벤트이름 = 함수2; <-- 마지막 함수인 함수2만 실행해 줌(한꺼번에 실행 안됨)

</script>

// 표준 이벤트 모델

<script>

DOM객체.addEventListener("이벤트이름", function(){ ...... };

DOM객체.removeEventListener("이벤트이름", function(){ ...... };  //이벤트 해제 방법

DOM객체.addEventListener("이벤트이름", 함수1)

DOM객체.addEventListener("이벤트이름", 함수2) <-- 함수 몇개를 등록하든, 등록된 순서대로 다 실행해 줌

</script>

[ jQuery : 자바스크립트의 확장 API ]

 - 자바스크립트 구현시 사용하면 좋은 유용한 함수들의 묶음

 - DOM 프로그래밍

 - AJAX 프로그래밍

 - 이벤트 처리 프로그래밍 (크로스 브라우징을 지원하는) //bind: 알아서 크로스브라우징

 - 다양한 화면 효과

 - AJAX에서 지원하는 API들 : $.ajax(), $.get(), $.post(), $.getJSON(), $("CSS선택자").load()

   ㄴ 붙여주는거는 구현해야 함 : $.ajax(), $.get(), $.post(), $.getJSON()

   ㄴ 바로 붙여주는 기능까지 해줌 : $("CSS선택자").load()

   ㄴ $.getJSON()의 특징 : JSON으로 파싱하는 메서드를 쓸 필요 없음

 - Same Origin Policy(SOP)

   ㄴ 브라우저에서 보안상의 이슈로 동일 사이트의 자원(Resource)만 접근해야 한다는 제약

   ㄴ AJAX는 이 제약에 영향을 받으므로 Origin 서버가 아니면 AJAX로 요청한 컨텐츠를 수신할 수 없다.

 - Cross Origin Resource Sharing(CORS)

   ㄴ 초기에는 Cross Domain이라고 하였음

   ㄴ Origin이 아닌 다른 사이트의 자원을 접근하여 사용한다는 의미임

   ㄴ addHeader("Access-Control-Allow-Origin") <-- 요놈을 넣어줘야 CORS가 가능해진다!!

<특징>

 - 객체 리터럴 방식은 프로토타입 속성 사용이 불가능하다.

 - 생성자 함수 방식은 프로토타입 속성 사용 가능하다.

 - 함수가 많을 수록 프로토타입을 쓰는게 메모리 관리에 훨씬 효율적이다(프로토타입을 안쓰면 각각 메모리 할당함 ;;)

 - navigator.userAgent가 많이 쓰인다

 - DOM 관련된 자바스크립트는 body태그 맨 밑에 위치하는게 성능적으로 가장 좋다.