12월13일

this

-일반함수에서 this

일반함수에서 this는 윈도우객체를 가리킨다.

//밑에 예제에서, this.data = 20;는 window객체의 data에 20을 할당한다는 뜻이다.

//또한 data = 30;은 함수 내에서 data가 없으므로 window 객체에 data를 가리킨다. 

-prototype, 생성자함수 안에서의 this

//prototype안에서의 this, 그리고 실행영역에서 this는 객체를 가리킨다.

//하지만 this를 붙이지 않으면 window의 data를 가리킨다.

-이벤트 핸들러 안에서의 this

이벤트 핸들러 안에서의 this는 이벤트가 발생한 객체를 가리킨다.

예) 버튼을 눌렀을때 이벤트핸들러안에서의 this는 눌린 버튼이다.

call

window 객체 메서드 예제.

//window.open()새로운 창을 띄운다

여러개의 a객체에 한번에 이벤트 핸들러 등록하기.

//getElementsByTagName('a') = 태그이름으로 요소를 찾는다. 항상 배열을 return 한다

DOM API

getElementById(ID): ID로 노드 엘리먼트를 검색하여 return 한다. id므로 단일노드. 

getElementsByTagName(tagName): Tagname으로 노드리스트를 검색한다. 태그이름이므로 배열.

setAttribute(attName): 노드엘리먼트의 속성값 검색하여 return

getAttribute(attrName, attrValue): 노드엘리먼트에서 속성값을 지정한다.

DOM property

nodeType: 특정 노드의 형식을 지정하는 정수값[1-태그 2-속성 3-텍스트노드]

nodeValue: 텍스트 노드의 문자열 값

innerHTML: 노드의 body에 설정된 값을 지정할수도, 추출할 수도 있다. <많이쓴다, 그러나 비표준>

//getAttribute로 href의 값을 가져와서,

//setAttribute로 placeholder의 src속성에 값을 넣어주므로써

//최종적으로 a함수의 href경로의 이미지가 표시되게 된다.

 

<알아두기>

INNER HTML은 표준이 아니다.

또한, INNER HTML은 가운데있는값을 가져오므로

만약 <p><span>처럼 가운데에 태그가 있으면 에러가 난다.

 

INNER HTML 안쓰고 접근하는법?

<p id="description">Choose an image</p>

일때 차례대로 태그노드, 속성노드, 텍스트 노드다.

//노드값을 따라 내려가서, 텍스트 노드를 만나면 (nodeType이 3일때) nodeValue에 값을 넣는다.

기본이벤트를 제거하기위해 return false를 합니다.

//이방법은 지양합시다.

//이벤트 핸들러 내에서 return false 합시다.

AJAX

A: 비동기식

JA: 자바스크립트

X: XML

XMLHttpRequest를 사용한 Ajax 프로그램 과정

XMLHttpRequest 객체 구하기<클라이언트와 서버 사이에서 요청을 전달해준다.>

웹서버에 요청 전송하기.

비동기식이란?

동기식: 어떤 일이 끝나야 그다음 일 을 할수있는것.

예)scanf에서 입력을 해야 다음코드를 진행 할 수 있음

비동기식: 차례대로 하는게 아니라 어떤 일 을 요청을 하고 요청이 올때까지 기다렸다가 다음일을 하는게 아님.

서버의 응답을 기다리지 않는다.

+웹에서 비동기식 중요한 이유

1)웹에서 지도를 볼때 뜰때까지 기다렸을까? =>

2)네이버에 검색어 입력했을때 추천검색어가 뜨는것.

+좋은점

1)페이지가 리로딩을 하지 않는다. 다음페이지에 올 필요가 없다. 바로 화면에 뿌려준다. 

한페이지 안에서 처리=(SAP single application page)

+AJAX예

서울을 클릭하면 서울의 25개 구가 다 뜬다.

경기도를 클릭하면 경기도의 모든 정보가 뜬다.

=>계속해서 피드백 하는것! 순간순간 서버와 통신한다!

AJAX가 하는일

1.모든AJAX는 이벤트에서 시작한다.

예)구글맵이라면 = 마우스 이벤트… 마우스 클릭시 AJAX 반응이 일어나는것!

onload이벤트… 창 켜자마자 서버로부터 뭔가 받고싶어…!

2.XHR 객체를 생성한다.

XHR객체는 클라이언트와 서버의 요청을 받아서 전달한다.

3.클라이언트는 요청 전달 후 서버로부터의 응답이 도착하면 실행할 콜백함수를 등록해야한다.

-> 그리고 함수로부터 어떤 데이터값을 받아야 하는지에 따라 처리한다.

AJAX with 자바스크립트 예제.

//마찬가지로 구형 IE와 표준브라우저를 고려해서 구현해야한다.

//이와같은 번거로움은 향후 배울 Jquery에서는 간단하게 해결 할 수 있다.

 

//위의 코드를 활용한 예제.

//한글 인코딩을 위해 encodeURIComponent로 value를 인코딩 해준다

//httpRequest에서 readyState 속성이 4라면.. 응답이 전부 도착한것이다!.

//서버로부터 응답이 200OK일때만 실행하기 위해 status속성을 체크한다.

 

서버로부터 JSON객체를 받아서 출력하는 예제.

//eval은 문자열을 자바스크립트 객체로 변환할때 사용한다.

 

제이쿼리

자바스크립트의 라이브러리

제이쿼리 특징

선택자를 통한 쉬운 문서 접근

<SI에서는 제이쿼리 1점대를 씁니다.>

제이쿼리를 사용하기 위해서는 라이브러리를 불러와야 한다.

1)라이브러리를 다운받아서 로컬에서 불러온다.

2)CDM방식으로 불러 올 수 있다(네트워크에 연결되어 있어야 한다)

*주의

팩토리함수<$>: 제이쿼리 객체 생성시 사용한다.

자바스크립트 객체와 제이쿼리 객체는 전혀 다르다!

서로 변환할 필요가 있다!

제이쿼리 선택자

-기본셀렉터: 엘리먼트의 ID, CSS 클래스명, 태그명, 페이지 엘리먼트의 DOM계층 구조를 이용해서 엘리먼트를 선택하는 기법

=모든 브라우저에서 동작한다.

*$('a') = 모든 a태그 엘리먼트

*$('#specialID') = specialID를 id로 가진 엘리먼트와 일치

*$('.specialClass') = specialClass를 클래스명으로 가진 모든 엘리먼트와 일치

*$('a#specialID.specialClass') = a태그에 class명이 specialClass이면서 id가 specialID인 엘리먼트와 일치

*$('p a.specialClass') = <p> 엘리먼트의 자손중에 specialClass를 클래스로 가진 모든 a태그엘리먼트와 일치

=return 값이 jQuery 객체이다.

p > a <p>엘리먼트 직계자손 a태그만 일치한다.

<p> 내부의 <span>에 포함된 a태그는 일치하지 않는다(직계가 아니므로)

ul.myList > li > a

클래스 myList를 지닌 <ul>엘리먼트

바로 아래 자식 엘리먼트인 리스트 엘리먼트를 선택한 다음,

a링크를 선택한다.

그러니까, >는 엄격한 구조를 지킨다.

반면 div span은 <div>엘리먼트 자손 중 모든 <span>엘리먼트를 선택한다.

*div.ClassName: div엘리먼트 중 Class가 ClassName인 div 선택

*div[‘Attribute’]: 속성 Attribute를 가지는 모든 div 선택

*div[‘Attribute’=’Value’]: div중 속성의 값이 Value인 모든 div 선택

*div[‘Attribute’^=’Value’]: div중 속성의 값이 Value가 아닌 모든 div 선택

*div[‘Attribute’ $= ‘Value’]: 값이 Value로 끝나는 Attribute를 가지는 모든 div 선택

*div[‘Attribute’ != ‘Value’]: 값이 없거나, Value가 아닌 Attribute를 가지는 모든 div 선택

*div[‘Attribute’ *= ‘Value’]: 값에 Value를 포함하는 Attribute를 가지는 모든 div 선택

-위치기반 셀렉터

: 위치선택자

a:first = a태그 중 첫번째 a태그 선택

p:odd = 모든 홀수번째 <p>엘리먼트와 일치

$(‘li a:first’)는 리스트아이템의 자손중 첫번째 링크를 반환한다.

$(‘li a:last’)는 리스트아이템의 자손중 마지막 링크를 반환한다.

$(‘li:first-child’)는 각 리스트의 첫번째 리스트아이템을 반환한다.

$(‘li:last-child’)는 각 리스트의 마지막 리스트 아이템을 반환한다.

$(‘:only-child’)는 형제가 없는 모든 엘리먼트를 반환한다

$(‘li:nth-child(2)’)는 각 리스트 두번째 리스트아이템을 반환한다.

$(‘li:nth-child(even:odd)’)짝수 혹은 홀수 엘리먼트와 일치

-엘리먼트 확장 커맨드

모두 체크된 상태의 체크박스들을 선택해야 한다면..

$(‘input[type=checkbox][checked]’)

input태그중 type이 checkbox인 엘리먼트들 중에서 checked라는 Attribute를 가지는 input태그만을 반환한다.

*필터셀렉터 예제

:checkbox:checked:enabled 활성화되고 선택된 체크박스만 일치

input:not(:checkbox) 체크박스가 아닌 <input> 엘리먼트 반환

Img:not([src*=’dog’]) = src속성값에 ‘dog’가 포함되지 않은 모든 이미지 선택

div:has(span) = span을 포함하는 조상 엘리먼트인 <div>를 선택