day06[BOM, jQuery]

브라우저 객체 모델(BOM)
자바스크립트를 이용하면 브라우저의 정보에 접근하거나 브라우저의 여러 기능들을 제어할 수 있다.
이 때 사용할 수 있는 객체 모델을 브라우저 객체 모델(BOM)이라고 한다.
브라우저 객체 모델은 문서 객체 모델(DOM)과 달리 W3C의 표준 객체 모델은 아니지만
자바스크립트가 브라우저의 기능적인 요소들을 직접 제어하고 관리할 수 있는 방법을 제공해준다.

window 객체
웹 브라우저의 창(window)을 나타내는 객체로, 대부분의 웹 브라우저에서 지원한다.
자바스크립트의 모든 객체, 전역함수, 전역변수들은 자동으로 window 객체의 프로퍼티가 된다.
(window : 브라우저를 의미)

window.open() : 브라우저를 하나 여는 것
window 객체의 open()메소드를 이용하면, 새로운 브라우저 창을 열 수 있으며,
새로운 브라우저 창의 세부적인 옵션들도 일일이 설정할 수 있다.

 

var	객체명	=	window.open(	url,	name,	specs);
1)	객체명	새로 만들어진 창 객체가 반환되고 창의 생성에 실패하면 null을 리턴한다. 이 객체를 통해 새 창을 제어할 수 있게 되고, 객체명.close()로 창을 닫을 수 있다.
2)	url	이동할 주소
3)	name	_blank(default) : 새 창
		_parent : 부모 프레임
		_self : 현재 페이지
		_child : 현재 페이지의 자식 페이지(서브 창)
4)	specs	선택적인 값으로 창의 크기, 스크롤 여부, 리사이즈 가능 등의 속성을 지정한다.
		height=픽셀값 : 창의 높이 지정
		width=픽셀값 : 창의 너비 지정

========================================================================
location 객체
location 객체는 현재 브라우저에 표시된 HTML 문서의 주소를 얻거나, 브라우저에 새 문서를 불러올 때 사용할 수 있다.
location 객체의 프로퍼티와 메소드를 이용하면, 현재 문서의 URL 주소를 다양하게 해석하여 처리할 수 있게 된다.

-href : 페이지의 URL 전체 정보 반환, URL을 지정하여 페이지 이동 가능. (read, write 다 가능)
-pathname : URL 중 경로 부분의 정보를 반환한다.
-port : 포트번호를 반환한다.
-reload() : 새로 고침
-assign() : 현재 URL을 지정한 URL로 바꿔서 페이지 이동
-replace() : 현재 URL을 지정한 URL로 바꾸고 이전 페이지로 돌아갈 수 없게 한다.(페이지 대체)
========================================================================
history 객체
history 객체는 브라우저의 히스토리 정보를 문서와 문서상태 목록으로 저장하는 객체이다.

-go(n) : n번째 페이지로 이동(n은 0부터 시작)
              1.n이 양수일 때 : 앞으로 가기
              2.n이 음수일 때 : 뒤로 가기
              3.n이 0일 때 : 새로고침
-back() : 뒤로 한 칸 이동
-forward() : 앞으로 한 칸 이동
========================================================================
jQuery  < javascipt로 만들어놓은 라이브러리
DOM,이벤트를 쓸 때 코드가 길었음.
상징하는 심볼이 $
문법이 비슷하지만 이름이 다름.

jQuery
요소들을 선택하는 강력한 방법을 사용하고 선택된 요소들을 효율적으로 제어할 수 있는 자바스크립트 라이브러리이다.
 
jQuery 기본 문법 : $("선택자")

*값 가져오기
$("선택자").val() : 입력한 값을 가져올 때(input많이 사용)  <<js) value 입력받은 값을 가져오기
$("선택자").text() : 미리 작성된 값을 가져올 때  <<js) innerHTML 미리작성되어 있는 값을 가져오기

*값 수정하기
$("선택자").val("값")
$("선택자").text("값")

*반복문
$.each(iterator, function(index, item){
});

iterator.each(function(index, item){
});
(iterator = 반복자)

*변수선언할 때도 $를 앞에 붙이면 가독성이 좋다.

jQuery를 사용하면, 순수 Javascript에 비해 속도가 느려진다.
하지만 간결한 문법으로 인해 개발 속도 증가와 처리비용 감소에 대한 장점이 있으며,
60% 이상의 웹 사이트에서 사용하고 있어서 적절한 상황에 맞춰 사용할 줄 알아야 한다.

 

*암기
closest() : 부모에서 찾기
find() : 자식에서 찾기