코딩왕랄프👊🏻

[Javascript] Browser BOM 본문

카테고리 없음

[Javascript] Browser BOM

hyerm_2 2021. 7. 17. 21:12
반응형
SMALL
Browser BOM

Javascript Browser Object Models

 

 

# Window

: 브라우저의 window를 나타냄

=> JavaScript objects, 함수, 변수들이 window object의 멤버가 됨.

 

size
=> window.innerHeight
=> window. innerWidth
Methods
=> window.open()
=> window.close()
=> window.moveTo()
=> window.resizeTo()

 

 

# Screen

Property
screen.width
screen.height
screen.availWidth : visitor 스크린의 넓이 리턴
screen.availHeight : visitor 스크린의 높이 리턴 
screen.colorDepth : 한 컬러를 나타내는데 사용되는 bit 수
screen.pixelDepth : pixel depth 리턴

 

 

# Location

 

Property

window.location.href  : 현재 페이지 URL 
window.location.hostname : 웹 호스트의 domain 이름 
window.location.pathname : 현재 페이지 경로와 파일이름 
window.location.protocol : 웹 프로토콜 
window.location.assign() : 새로운 문서 로드

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript</h2>

<h3>The window.location object</h3>

<p id="demo1"></p>
<p id="demo2"></p>
<p id="demo3"></p>
<p id="demo4"></p>
<p id="demo5"></p>
<input type="button" value="Load new document" onclick="newDoc()">



<script>
document.getElementById("demo1").innerHTML = 
"The full URL of this page is:<br>" + window.location.href;

document.getElementById("demo2").innerHTML = 
"Page hostname is: " + window.location.hostname;

document.getElementById("demo3").innerHTML =
"Page path is: " + window.location.pathname;

document.getElementById("demo4").innerHTML =
"Page protocol is " + window.location.protocol;

document.getElementById("demo5").innerHTML =
"Port number is " + window.location.port;

function newDoc() {
  window.location.assign("https://www.w3schools.com")
}
</script>

</body>
</html>

 

 

# History

 

Method

history.back() :  clicking back in the browser
history.forward() :  clicking forward in the browser

<html>
<head>
<script>
function goBack() {
  window.history.back()
}
</script>
</head>
<body>

<input type="button" value="Back" onclick="goBack()">

</body>
</html>

 

 

# Navigator

 

navigator.appName
navigator.appCodeName
navigator.platform

 

Browser Cookies
=> cookieEnabled : cookies가 enable 하면 true
<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML =
"cookiesEnabled is " + navigator.cookieEnabled;
</script>

 

Browser Cookies
=> cookieEnabled : cookies가 enable 하면 true
Browser Application Name
=> appName : application 이름
Browser Application Code Name
=> appCodeName : application 코드 name
Browser Engine
=> product : 브라우저 엔진의 product name
Browser Version
=> appVersion : 브라우저 관한 버전 정보
Browser Agent
=> userAgent : 브라우저에서 서버로 보내지는  user-agent header

 

# Popup Alert

 

Alert Box
=> information을 make sure 하길 원할때
=> alert box가 팝업 -> OK 클릭
window.alert("sometext");

 

Confirm Box
=> 어떤 것을 verify/accept 하길 원할때
=> alert box가 팝업 -> OK/Cancel 클릭
window.confirm("sometext");

 

Prompt Box
=> 페이지를 들어가기 전에 value를 input 하기 원할때
=> alert box가 팝업 -> OK/Cancel 클릭
window.prompt("sometext","defaultText");

 

 

# Timing Events

 

Methods
=> setTimeout()
=> setInterval()

 

setTimeout()
window.setTimeout(function, milliseconds);

 

clearTimeout()
window.clearTimeout(timeoutVariable)

 

setInterval()
window.setInterval(function, milliseconds);

 

반응형
LIST