반응형
1. 브라우저는 전역 window 객체를 가지며 모든 전역변수는 window 객체의 프로퍼티로 지정된다.
- window 객체는 생략될 수 있으므로 아래의 두 코드는 동일하다.
2. window 객체의 다른 프로퍼티
- navigator
. appName : 브라우저의 간단한 이름이다. IE : Microsoft Internet Explorer, FireFox : Netscape
. appCodeName : 코드네임으로 호환을 위해 같은 이름을 사용한다. : Mozilla
. appVersion : 버전정보이기는 하나 내부적으로 사용되는 버전 숫자로 주로 호환성때문에 낮은 버전이 세팅
. userAgent : 표준화된 서식이 존재하지 않으므로 브라우저 독립적인 파싱은 불가능하다.
. plattform : 하드웨어 플랫폼
※ https://developer.mozilla.org/en/DOM_Client_Object_Cross-Reference/navigator
- frames[]
- location
. search : window.location.search 의 값은 url 중에서 ? 를 포함하여 그 이하의 name=value를 포함한다.
. href : location 객체의 toString() 메소드는 href 값을 반환하므로 location.href 대신 location 을 쓴다.
. protocol
. host
. pathname
. hash : top 이란 이름의 anchor를 정의했을 때 그 위치로 스크롤 할 수 있다.
window.location.hash = "#top";
. reload() : 현재 표시된 페이지를 다시 불러오는데 사용된다.
. replace() : 지정한 url 을 불러오는 것으로 window.location 에 url 을 대입하는 것과는 다르다.
replace()를 사용하면 최근 열어본 페이지 목록에 추가되지 않고 현재의 항목을 대신한다.
- history
- screen
. width : 모니터 스크린의 가로크기
. height : 모니터 스크리의 세로크기
- opener
. 자바스크립트 window.open()으로 열려진 창이라면 그 창을 열게한 창을 가리킨다.
사용자에 의해 열린 창이라면 (Ctrl + N) null 값을 갖는다.
- closed
. 창이 닫혔는지 확인할 때 사용한다. true 값이면 창이 닫혔다는 뜻이다.
- x, y
. 윈도우 창의 좌측 좌표(y) 와 상단좌표(y)
- onerror
. onerror 프로퍼티에 함수를 할당하면 창안에서 자바스크립트 에러가 발생할 때 마다 프로퍼티에
할당된 함수가 자동으로 호출된다.
. 세개의 전달인자가 전달된다.
. 첫 번째 전달인자는 에러메세지
. 두 번째 전달인자는 에러를 일으킨 자바스크립트 코드를 담은 문서의 URL
. 세 번째 전달인자는 문서 안에서 ㅇ러가 발생한 위치를 가리키는 줄 번호
. 할당된 함수가 true 를 반환하면 더 이상 브라우저가 에러를 출력하지 않는다.
- document
2-1 . document 객체의 다른 프로퍼티들
- forms[]
. elements[]
. options[] : form element 의 객체가 Select 일 때만 존재
- anchors[]
- links[]
- images[]
- applets[]
- domain : 문서가 불려온 서버의 호스트 네임
- URL : window.location 과는 다르게 읽기 전용이다.
(window.)location.href 는 server redirection 이 발생했을 때 처음 요청한 url 을 저장한다.
document.URL 은 server redirection 이 발생했을 때 새롭게 불려온 url 을 저장한다.
- cookie
- lastModified
- referrer
3. window 객체의 메소드
- open()
. 4가지 전달인자가 있으며 새롭게 열린 window 객체를 반환한다.
. 첫 번째 전달인자는 url 이다
. 두 번째 전달인자는 창의 이름으로 <form>, <a> 태그의 target 어트리뷰트의 값으로 유용하다.
만약 이미 존재하는 창의 이름을 전달하면 open()은 새 창을 여는 대신 단순히 이미 존재하는 창의 참조를
반환한다.
. 세 번째 전달인자는 창의 크기와 GUI 장식등을 지정하는 목록이다.
. 네 번째 전달인자는 두 번째 전달인자가 이미 존재하는 창의 이름을 지정할 때만 유용한다.
첫 번째 전달인자로 지정된 URL의 문서가 브라우저 창의 열어본 페이지 목록에 현재 항목을 덮어씌울
것인지(true), 또는 새로운 항목을 추가할 것인지(false)를 지정한다. 기본값을 false이다.
- close()
. document.close()와 구분하기 위해서 window.close() 처럼 window 를 명시적으로 적는다.
. 대부분의 브라우저는 자바스크립트 코드가 생성한 창들에 대해서만 닫을 권한을 부여한다.
. 창이 외관상 닫힌 뒤라도 window 객체는 계속 존재한다.
. 창이 닫힌 후에는 closed 프로퍼티를 제외하고는 다른 프로퍼티나 메소드에 접근할 수 없다.
- focus()
. 키보드 포커스를 창에 위치하도록 한다.
- blur()
. 창으로 하여금 키보드 포커스를 잃어버리게 한다.
- scrollBy()
. 창에 표시된 문서를 지정된 픽셀 수만큼 상하좌우로 스크롤한다.
- scrollTo()
. 문서를 지정한 절 대 위치로 스크롤한다.
. 지정된 문서 좌표가 창 문서 영역의 좌측 상단 모서리에 표시되게 문서를 옮긴다.
. HTML 엘리먼트에는 엘리먼트의 X, Y 좌표를 지정하는 offsetLeft 와 offsetTop 프로퍼티가 있다.
엘리먼트의 위치를 확인한 후에는 scrollTo() 메소드를 사용하여 그 지정된 엘리먼트가 창의 좌측
상단 모서리에 위치하게 창을 스크롤 할 수 있다.
4. 문서의 모든 스크립트와 이벤트 처리기, 자바스크립트 URL은 전역객체로 하나의 window 객체를 공유한다.
5. window 객체에 있는 프로퍼티들의 수명은 그 프로퍼티를 정의한 자바스크립트가 포함된 문서의 수명과 같다.
하지만 window 객체 그 자체의 수명은 창이 존재하는 한 계속해서 남는다.
window 객체에 대한 참조는 이 창이 얼마나 많은 웹 페이지들을 읽고 버렸는지에 상관없이 항상 유효하다.
6. 창 위치와 크기
- IE 을 제외한 나머지 브러우저는 다음과 같이 표현한다.
※ URL 에서 전달인자 추출하기
※ 브라우저 종류에 관계없이 창의 위치와 크기 알아내기
- getWindowX/Y() : 화면 상에서 브라우저 창이 띄워진 위치를 반환한다.
- getViewportWidth/Height() : 브라우저의 뷰포트 영역의 크기를 반환한다.
- getDocumentWidth/Height() : 문서의 크기를 반환한다.
- getHorizontalScroll() : 수평 스크롤바의 위치를 반환한다.
- getVerticalScroll() : 수직 스크롤바의 위치를 반환한다.
- 브라우저 창의 크기를 반환하는 함수는 없음
※ 브라우저를 판단하기 위한 클라이언트 스니퍼(client sniffer)
- https://developer.mozilla.org/en/Browser_Detection_and_Cross_Browser_Support
- window 객체는 생략될 수 있으므로 아래의 두 코드는 동일하다.
var userName = 'Ahn SeungKyu';
window.userName = 'Ahn SeungKyu';
window.userName = 'Ahn SeungKyu';
2. window 객체의 다른 프로퍼티
- navigator
. appName : 브라우저의 간단한 이름이다. IE : Microsoft Internet Explorer, FireFox : Netscape
. appCodeName : 코드네임으로 호환을 위해 같은 이름을 사용한다. : Mozilla
. appVersion : 버전정보이기는 하나 내부적으로 사용되는 버전 숫자로 주로 호환성때문에 낮은 버전이 세팅
. userAgent : 표준화된 서식이 존재하지 않으므로 브라우저 독립적인 파싱은 불가능하다.
. plattform : 하드웨어 플랫폼
※ https://developer.mozilla.org/en/DOM_Client_Object_Cross-Reference/navigator
- frames[]
- location
. search : window.location.search 의 값은 url 중에서 ? 를 포함하여 그 이하의 name=value를 포함한다.
. href : location 객체의 toString() 메소드는 href 값을 반환하므로 location.href 대신 location 을 쓴다.
. protocol
. host
. pathname
. hash : top 이란 이름의 anchor를 정의했을 때 그 위치로 스크롤 할 수 있다.
window.location.hash = "#top";
. reload() : 현재 표시된 페이지를 다시 불러오는데 사용된다.
. replace() : 지정한 url 을 불러오는 것으로 window.location 에 url 을 대입하는 것과는 다르다.
replace()를 사용하면 최근 열어본 페이지 목록에 추가되지 않고 현재의 항목을 대신한다.
- history
- screen
. width : 모니터 스크린의 가로크기
. height : 모니터 스크리의 세로크기
- opener
. 자바스크립트 window.open()으로 열려진 창이라면 그 창을 열게한 창을 가리킨다.
사용자에 의해 열린 창이라면 (Ctrl + N) null 값을 갖는다.
- closed
. 창이 닫혔는지 확인할 때 사용한다. true 값이면 창이 닫혔다는 뜻이다.
- x, y
. 윈도우 창의 좌측 좌표(y) 와 상단좌표(y)
- onerror
. onerror 프로퍼티에 함수를 할당하면 창안에서 자바스크립트 에러가 발생할 때 마다 프로퍼티에
할당된 함수가 자동으로 호출된다.
. 세개의 전달인자가 전달된다.
. 첫 번째 전달인자는 에러메세지
. 두 번째 전달인자는 에러를 일으킨 자바스크립트 코드를 담은 문서의 URL
. 세 번째 전달인자는 문서 안에서 ㅇ러가 발생한 위치를 가리키는 줄 번호
. 할당된 함수가 true 를 반환하면 더 이상 브라우저가 에러를 출력하지 않는다.
- document
2-1 . document 객체의 다른 프로퍼티들
- forms[]
. elements[]
. options[] : form element 의 객체가 Select 일 때만 존재
- anchors[]
- links[]
- images[]
- applets[]
- domain : 문서가 불려온 서버의 호스트 네임
- URL : window.location 과는 다르게 읽기 전용이다.
(window.)location.href 는 server redirection 이 발생했을 때 처음 요청한 url 을 저장한다.
document.URL 은 server redirection 이 발생했을 때 새롭게 불려온 url 을 저장한다.
- cookie
- lastModified
- referrer
3. window 객체의 메소드
- open()
. 4가지 전달인자가 있으며 새롭게 열린 window 객체를 반환한다.
. 첫 번째 전달인자는 url 이다
. 두 번째 전달인자는 창의 이름으로 <form>, <a> 태그의 target 어트리뷰트의 값으로 유용하다.
만약 이미 존재하는 창의 이름을 전달하면 open()은 새 창을 여는 대신 단순히 이미 존재하는 창의 참조를
반환한다.
. 세 번째 전달인자는 창의 크기와 GUI 장식등을 지정하는 목록이다.
. 네 번째 전달인자는 두 번째 전달인자가 이미 존재하는 창의 이름을 지정할 때만 유용한다.
첫 번째 전달인자로 지정된 URL의 문서가 브라우저 창의 열어본 페이지 목록에 현재 항목을 덮어씌울
것인지(true), 또는 새로운 항목을 추가할 것인지(false)를 지정한다. 기본값을 false이다.
- close()
. document.close()와 구분하기 위해서 window.close() 처럼 window 를 명시적으로 적는다.
. 대부분의 브라우저는 자바스크립트 코드가 생성한 창들에 대해서만 닫을 권한을 부여한다.
. 창이 외관상 닫힌 뒤라도 window 객체는 계속 존재한다.
. 창이 닫힌 후에는 closed 프로퍼티를 제외하고는 다른 프로퍼티나 메소드에 접근할 수 없다.
- focus()
. 키보드 포커스를 창에 위치하도록 한다.
- blur()
. 창으로 하여금 키보드 포커스를 잃어버리게 한다.
- scrollBy()
. 창에 표시된 문서를 지정된 픽셀 수만큼 상하좌우로 스크롤한다.
- scrollTo()
. 문서를 지정한 절 대 위치로 스크롤한다.
. 지정된 문서 좌표가 창 문서 영역의 좌측 상단 모서리에 표시되게 문서를 옮긴다.
. HTML 엘리먼트에는 엘리먼트의 X, Y 좌표를 지정하는 offsetLeft 와 offsetTop 프로퍼티가 있다.
엘리먼트의 위치를 확인한 후에는 scrollTo() 메소드를 사용하여 그 지정된 엘리먼트가 창의 좌측
상단 모서리에 위치하게 창을 스크롤 할 수 있다.
4. 문서의 모든 스크립트와 이벤트 처리기, 자바스크립트 URL은 전역객체로 하나의 window 객체를 공유한다.
5. window 객체에 있는 프로퍼티들의 수명은 그 프로퍼티를 정의한 자바스크립트가 포함된 문서의 수명과 같다.
하지만 window 객체 그 자체의 수명은 창이 존재하는 한 계속해서 남는다.
window 객체에 대한 참조는 이 창이 얼마나 많은 웹 페이지들을 읽고 버렸는지에 상관없이 항상 유효하다.
6. 창 위치와 크기
- IE 을 제외한 나머지 브러우저는 다음과 같이 표현한다.
// 데스크톱 띄운 브라우저 창의 전체 크기
var windowWidth = window.outerWidth;
var windowHeight = window.outerHeight;
// 데스크톱에 띄운 브라우저 창의 위치
var window = window.screenX
var window = window.screenY
// HTML 문서가 표시되는 viewport 의 크기
// 브라우저 창 크기에서 메뉴바, 툴바, 스크롤바 등의 크기를 뺀다
var viewportWidth = window.innerWidth;
var viewportHeight = window.innerHeight;
// 수평, 수직 스크롤바의 위치를 나타낸다.
// 화면의 좌측 상단 모서리에 문서의 어느 부분이 위치하는지 나타난다.
var horizontalScroll = window.pageXOffset;
var verticalScroll = window.pageYOffset;
var windowWidth = window.outerWidth;
var windowHeight = window.outerHeight;
// 데스크톱에 띄운 브라우저 창의 위치
var window = window.screenX
var window = window.screenY
// HTML 문서가 표시되는 viewport 의 크기
// 브라우저 창 크기에서 메뉴바, 툴바, 스크롤바 등의 크기를 뺀다
var viewportWidth = window.innerWidth;
var viewportHeight = window.innerHeight;
// 수평, 수직 스크롤바의 위치를 나타낸다.
// 화면의 좌측 상단 모서리에 문서의 어느 부분이 위치하는지 나타난다.
var horizontalScroll = window.pageXOffset;
var verticalScroll = window.pageYOffset;
※ URL 에서 전달인자 추출하기
function getArgs() {
var args = new Object();
var query = location.search.substring(1); // 질의 문자열을 얻어온다.
var pairs = query.split("&");
for (var i=0; i<pairs.length; i++) {
var pos = paris[i].indexOf('='); // 이름=값 을 추출한다.
if (pos == -1) continue;
var argname = pairs[i].substring(0, pos); // 이름을 추출한다.
var value = pairs[i].substring(pos+1); // 값을 추출한다.
value = decodeURIComponent(value); // 필요하다면 디코딩을 수행한다.
args[argname] = value; // 객체의 프로퍼티로 저장한다.
}
return args
}
var args = new Object();
var query = location.search.substring(1); // 질의 문자열을 얻어온다.
var pairs = query.split("&");
for (var i=0; i<pairs.length; i++) {
var pos = paris[i].indexOf('='); // 이름=값 을 추출한다.
if (pos == -1) continue;
var argname = pairs[i].substring(0, pos); // 이름을 추출한다.
var value = pairs[i].substring(pos+1); // 값을 추출한다.
value = decodeURIComponent(value); // 필요하다면 디코딩을 수행한다.
args[argname] = value; // 객체의 프로퍼티로 저장한다.
}
return args
}
※ 브라우저 종류에 관계없이 창의 위치와 크기 알아내기
- getWindowX/Y() : 화면 상에서 브라우저 창이 띄워진 위치를 반환한다.
- getViewportWidth/Height() : 브라우저의 뷰포트 영역의 크기를 반환한다.
- getDocumentWidth/Height() : 문서의 크기를 반환한다.
- getHorizontalScroll() : 수평 스크롤바의 위치를 반환한다.
- getVerticalScroll() : 수직 스크롤바의 위치를 반환한다.
- 브라우저 창의 크기를 반환하는 함수는 없음
var Geometry = {};
if (window.screenLeft === undefined) { // IE 브라우저
Geometry.getWindowX = function() { return window.screenLeft; };
Geometry.getWindowY = function() { return window.screenTop; };
} else if (window.screeX) { // 파이어폭스
Geometry.getWindowX = function() { return window.screenX; };
Geometry.getWindowY = function() { return window.screenY; };
}
if (window.innerWidth) { // IE 이외의 브라우저
Geometry.getViewportWidth = function() { return window.innerWidth; };
Geometry.getViewportHeight = function() { return window.innerHeight; };
Geometry.getHorizontalScroll = function() { return window.pageXOffset; };
Geometry.getVerticalScroll = function() { return window.pageYOffset; };
// DOCTYPE 이 존재하는 IE 6
} else if (document.documentElement && document.documentElement.clientWidth) {
Geometry.getViewportWidth = function() { return document.documentElement.clientWidth; };
Geometry.getViewportHeight = function() { return document.documentElement.clientHeight; };
Geometry.getHorizontalScroll = function() { return document.documentElement.scrollLeft; };
Geometry.getVerticalScroll = function() { return document.documentElement.scrollTop; };
// DOCTYPE 이 없을 때 IE 6
} else if (document.body.clientWidth) {
Geometry.getViewportWidth = function() { return document.body.clientWidth; };
Geometry.getViewportHeight = function() { return document.body.clientHeight; };
Geometry.getHorizontalScroll = function() { return document.body.scrollLeft; };
Geometry.getVerticalScroll = function() { return document.body.scrollTop; };
}
// 문서의 크기를 반환
if (document.documentElement && document.documentElement.scrollWidth) {
Geometry.getDocumentWidth = function() { return document.documentElement.scrollWidth; };
Geometry.getDocumentHeight = function() { return document.documentElement.scrollHeight; };
} else if (document.body.scrollWidth) {
Geometry.getDocumentWidth = function() { return document.body.scrollWidth; };
Geometry.getDocumentHeight = function() { return document.body.scrollHeight; };
}
if (window.screenLeft === undefined) { // IE 브라우저
Geometry.getWindowX = function() { return window.screenLeft; };
Geometry.getWindowY = function() { return window.screenTop; };
} else if (window.screeX) { // 파이어폭스
Geometry.getWindowX = function() { return window.screenX; };
Geometry.getWindowY = function() { return window.screenY; };
}
if (window.innerWidth) { // IE 이외의 브라우저
Geometry.getViewportWidth = function() { return window.innerWidth; };
Geometry.getViewportHeight = function() { return window.innerHeight; };
Geometry.getHorizontalScroll = function() { return window.pageXOffset; };
Geometry.getVerticalScroll = function() { return window.pageYOffset; };
// DOCTYPE 이 존재하는 IE 6
} else if (document.documentElement && document.documentElement.clientWidth) {
Geometry.getViewportWidth = function() { return document.documentElement.clientWidth; };
Geometry.getViewportHeight = function() { return document.documentElement.clientHeight; };
Geometry.getHorizontalScroll = function() { return document.documentElement.scrollLeft; };
Geometry.getVerticalScroll = function() { return document.documentElement.scrollTop; };
// DOCTYPE 이 없을 때 IE 6
} else if (document.body.clientWidth) {
Geometry.getViewportWidth = function() { return document.body.clientWidth; };
Geometry.getViewportHeight = function() { return document.body.clientHeight; };
Geometry.getHorizontalScroll = function() { return document.body.scrollLeft; };
Geometry.getVerticalScroll = function() { return document.body.scrollTop; };
}
// 문서의 크기를 반환
if (document.documentElement && document.documentElement.scrollWidth) {
Geometry.getDocumentWidth = function() { return document.documentElement.scrollWidth; };
Geometry.getDocumentHeight = function() { return document.documentElement.scrollHeight; };
} else if (document.body.scrollWidth) {
Geometry.getDocumentWidth = function() { return document.body.scrollWidth; };
Geometry.getDocumentHeight = function() { return document.body.scrollHeight; };
}
※ 브라우저를 판단하기 위한 클라이언트 스니퍼(client sniffer)
- https://developer.mozilla.org/en/Browser_Detection_and_Cross_Browser_Support
반응형
