JavaScript 창 - 브라우저 개체 모델

JavaScript 창 - 브라우저 개체 모델
BOM(브라우저 개체 모델)은 JavaScript가 브라우저와 "대화"하는 기능을 제공합니다.



Window 객체
모든 브라우저는 window 객체를 지원합니다. 브라우저 창을 나타냅니다.
모든 JavaScript 전역 개체, 함수 및 변수는 자동으로 창 개체의 구성원이 됩니다.
전역 변수는 창 개체의 속성입니다.
전역 함수는 창 개체의 메서드입니다.

HTML DOM의 문서도 window 객체의 속성 중 하나입니다.
window.document.getElementById("header")
다음과 같습니다:
document.getElementById ("header" );



창 크기
브라우저 창의 크기를 결정하는 세 가지 방법이 있습니다(도구 모음과 스크롤 막대를 제외한 브라우저의 뷰포트).
Internet Explorer, Chrome, Firefox, Opera 및 Safari의 경우:
window.innerHeight - 브라우저 창의 내부 높이
window.innerWidth - 브라우저 창의 내부 너비
Internet Explorer 8의 경우 , 7 , 6, 5:
document.documentElement.clientHeight
document.documentElement.clientWidth
또는
document.body.clientHeight
document.body.clientWidth

실용적 JavaScript 솔루션(모든 브라우저에 적용):
var w=window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth

var h=window.innerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight;



기타 창 메서드
window.open() - 새 창 열기
window.close() - 현재 창 닫기
window.moveTo() - 현재 창 이동
window.resizeTo() - 현재 창 크기 조정



Window Screen
window.screen 개체에는 사용자 화면에 대한 정보가 포함됩니다.

일부 속성:
screen.availWidth - 사용 가능한 화면 너비(속성은 창 작업 표시줄과 같은 인터페이스 기능을 뺀 방문자 화면 너비를 픽셀 단위로 반환합니다.)
screen.availHeight - 사용 가능 화면 높이(속성은 창 작업 표시줄과 같은 인터페이스 기능을 제외한 방문자 화면의 높이를 픽셀 단위로 반환합니다.)



창 위치
window.location 개체 현재 페이지의 주소(URL)를 입력하고 브라우저를 새 페이지로 리디렉션합니다.

location.hostname은 웹 호스트의 도메인 이름을 반환합니다.
location.pathname은 현재 페이지의 경로와 파일 이름을 반환합니다.
location.port는 웹의 포트(80 또는 443)를 반환합니다. 호스트
location.protocol 사용된 웹 프로토콜(http:// 또는 https://)을 반환합니다.
location.href 속성은 현재 페이지의 URL을 반환합니다.
location.sign() 메소드는 새 문서를 로드합니다.

예:
<script> <br>document.write(location.href) <br></script>
위 코드의 출력은 다음과 같습니다.
http :// www.w3school.com.cn/js/js_window_location.asp


location.location과 location.replace의 차이점
window.location.asse(url): 새 HTML 로드 URL 문서에 의해 지정됩니다. 지정된 URL로 이동하는 링크와 같습니다.
현재 페이지가 새 페이지 콘텐츠로 변환됩니다. 뒤로를 클릭하면 이전 페이지로 돌아갈 수 있습니다.

window.location.replace(url): URL로 지정된 문서를 로드하여 현재 문서를 교체합니다.
앞과 뒤의 두 페이지가 동일합니다. 창이므로 이전 페이지로 돌아가거나 돌아갈 수 없습니다.



창 기록
history.back() - 브라우저에서 뒤로 버튼을 클릭하는 것과 동일합니다(기록 목록의 이전 URL을 로드합니다.)
history.forward( ) - 브라우저에서 앞으로 버튼을 클릭하는 것과 동일합니다(기록 목록의 다음 URL을 로드합니다.)



Window Navigator window.navigator 개체에는 방문자의 브라우저 정보에 대한 정보가 포함됩니다.



JavaScript 메시지 상자
JavaScript에서 경고 상자, 확인 상자, 프롬프트 상자의 세 가지 유형의 메시지 상자를 만듭니다.

경고 상자
경고 상자가 나타나면 확인 버튼을 눌러야 작업을 계속할 수 있습니다.
구문:
alert("text")


확인 상자
확인 상자가 나타나면 사용자는 작업을 계속하려면 확인 또는 취소 버튼을 클릭해야 합니다.
사용자가 확인을 클릭하면 반환 값은 true입니다. 사용자가 취소를 클릭하면 반환 값은 false입니다.

구문:
confirm("text")

예:



프롬프트 상자
프롬프트 상자가 나타나면 사용자는 다음을 수행해야 합니다. 특정 값을 입력한 후 확인 또는 취소 버튼을 클릭하여 작업을 계속합니다.
사용자가 확인을 클릭하면 입력된 값이 반환됩니다. 사용자가 취소를 클릭하면 반환 값은 null입니다.

구문:
prompt("text","기본값")

예:




JavaScript 타이밍
JavaScript를 사용하면 함수 호출 직후가 아닌 설정된 간격(
) 후에 코드를 실행할 수 있습니다. 우리는 이것을 타이밍 이벤트라고 부릅니다.

setTimeout()
구문
var t=setTimeout("javascript 문", 밀리초)
첫 번째 매개변수는 JavaScript 문이 포함된 문자열입니다. 이 문은 "alert('5 second!')" 또는 함수

호출과 같은 것일 수 있습니다. 예: (무한 루프)



clearTimeout()
구문
clearTimeout(setTimeout_variable) //setTimeout_variable은 생성된 시간 타이머 참조(변수)

예:
function stopCount()
{
clearTimeout(t)
}



자바스크립트 쿠키
쿠키는 방문자의 컴퓨터에 저장되는 변수입니다. 이 쿠키는 동일한 컴퓨터가 브라우저를 통해 페이지를 요청할 때마다 전송됩니다.
JavaScript를 사용하여 쿠키 값을 생성하고 검색할 수 있습니다.

쿠키는 키-값 쌍, 즉 키=값 형식으로 저장됩니다. 각 쿠키는 일반적으로 ";"로 구분됩니다.
document.cookie = "name=value;expires=date;path=path"
document.cookie = "username=Darren;path=/;domain=qq.com"

만들고 쿠키 저장
function setCookie(c_name,value,expiredays)
{
var exdate=new Date()
exdate.setDate(exdate.getDate()+expiredays)
document.cookie= c_name+ "=" +escape(value)+
((expiredays==null) ? "" : ";expires="+exdate.toGMTString())
}

쿠키 읽기
function getCookie(c_name)
{
if (document.cookie.length>0) //document.cookie 객체에 쿠키가 있는지 확인
{
c_start=document.cookie. indexOf (c_name + "=")
if (c_start!=-1)
{
c_start=c_start + c_name.length+1
c_end=document.cookie.indexOf(";", c_start )
if (c_end==-1) c_end=document.cookie.length
return unescape(document.cookie.substring(c_start,c_end))
}
}
return " "
}


쿠키 유효 기간 설정
기본적으로 쿠키는 브라우저를 닫으면 자동으로 지워지지만 만료를 통해 쿠키 유효 기간을 설정할 수 있습니다.
document.cookie = "이름=값;만료=날짜"