Web BOM basis

In-depth understanding of BOM

1. Introduction to
BOM Common Objects BOM runs in the browser, so it provides a series of objects for interacting with the browser window. These objects include window, document, location, navigator and screen.

• The object properties of window (the top-level object where the entire JavaScript script runs) are as follows:

Attributes	significance
document	Returns the HTML document loaded in the window
location	Returns the URL of the HTML document loaded in this window
navigator	Return to the browser browsing the current page, including a series of browser attributes, including name, version number and platform, etc.
screen	Returns the current viewer screen object
history	Returns the history of this browser window

Tip: These properties are all sub-objects of the window object, and each sub-object also provides its own properties and methods to operate the browser.

• Common methods of the window object:

method	use
alert()、confirm()、prompt()	They are used for pop-up warning window, confirmation dialog box and prompt input dialog box respectively.
close()	close the window
moveBy()、moveTo()	Move window
resizeBy()、resizeTo()	Reset window size
scrollBy()、scrollTo()	Scroll the HTML document of the current window
open()	Open a new browser window to load the address pointed to by the new URL, and specify a series of new attributes, including hidden menus.
setInterval()、clearInterel()	Set and delete timers

example:

• A confirmation box pops up (confirm()):

//js代码
<script type="text/javascript">
	function Confirm() {
    
    
		var answer = confirm("是否退出");//带有确定和取消的按钮方法
		if (answer) {
    
    
			close(); //关闭浏览器的方法
		} else {
    
    
			alert(":-)");
		}
	}
</script>
//HTML代码
<input type="button" value="confirm" onclick="Confirm()">//οnclick="Confirm()调用Confirm()方法

• A text confirmation box pops up (prompt() ):
  Click OK, the value is the value in the text box, click Cancel, the value is null

//js代码
function Prompt() {
    
    
	var pro = prompt("请输入文字", "123");
	alert(pro);
}

//HMTL代码
<input type="button" value="prompt" onclick="Prompt()">

• Text box changes (some browsers currently do not support moveBy(), moveTo(), resizeBy(), resizeTo()):

function MoveBy() {
    
    
	moveBy(50, 50); //每次点击向右向下移动50,第一个值向右，第二个值向下
}
function MoveTo() {
    
    
	moveTo(250, 250); //点击直接移动到那个位置,第一个值向右，第二个值向下
}
function ResizeBy() {
    
    
	resizeBy(50, 50); //每次点击文本框变宽50，变长50,第一个值为宽，第二个值为高
}
function ResizeTo() {
    
    
	resizeTo(250, 250); //点击文本框直接变宽50，变长50,第一个值为宽，第二个值为高
}

• Browser scrolling (scrollBy(), scrollTo()):

 //js代码
function ScrollBy() {
    
    
	scrollBy(50, 50); //每次点击第一个向右滚动多少，第二个向下滚动多少.
}
function ScrollTo() {
    
    
	scrollTo(250, 250); //点击直接滚动到这个位置,第一个向右滚动多少，第二个向下滚动多少.
}

• Pop up a new web page (open())

//js代码
        //window.open(URL,name,features,replace)
function Open() {
    
    
	window.open("https://www.csdn.net/", "新的窗口","left=20,top=50");//第一个网址,第二个name一定要下去
}

• Set the timer (setInterval(), clearInterel())

//js代码
var count = 0;
function Time() {
    
    
	var d = new Date();
	var hour = d.getHours();
	if (hour < 10) {
    
    
		hour = "0" + hour;
	}
	var minute = d.getMinutes();
	if (minute < 10) {
    
    
		minute = "0" + minute;
	}
	var second = d.getSeconds();
	if (second < 10) {
    
    
		second = "0" + second;
	}
	count++;
	if (count == 10) {
    
    
		window.clearInterval(t); //删除定时器
	}
	document.getElementById("display").innerHTML = hour + ":" + minute + ":" + second; //在HTML里面添加数据
}
var t = window.setInterval("Time()", 1000); //设置定时器，第一个为方法,第二个为定时时间。1000为每1秒调用一次

//HTML
<div id="display">
</div>

Common methods of the history object: The
History object contains URLs visited by the user (in the browser window).

method	use
back()	Go back to the page of the previous browser. If the page is opened first, it has no effect.
forward	Advance to the next browse page. If the page is opened first, it has no effect.
go(intValue)	This method can specify how many pages forward or backward, positive forward and negative backward.

//直接用history去调用就可以了
history.back();
history.forward();

Common attributes of the location object: The
Location object contains information about the current URL.

method	use
hostname	The hostname of the address where the document is located
href	URL address where the document is located
host	The host address of the address where the document is located
port	Service port of the address where the document is located
pathname	File address of the address where the document is located
protocol	The protocol used to load the document, such as HTTP; etc.

Common attributes of screen objects:

method	use
avaiHeight	The height of the screen that the window can use, in pixels
avaiWidth	The width of the screen that the window can use, in pixels
colorDepth	The number of color bits represented by the user's browser, usually 32 bits (number of bits per pixel)

Common attributes of navigator objects:

method	use
appCodeName	String representation of browser code name
appName	String representation of official browser name
appVersion	String representation of browser version information
platform	String representation of the computer platform where the browser is located
userAgent	String representation of the user agent header
cookieEnabled	If cookies are enabled, return true, otherwise return false

example:

//js代码
document.write("host name:" + location.hostname + "<br/>"); //文档所在地址的主机名
document.write("href:" + location.href + "<br/>"); //文档所在地址的URL地址
document.write("host address:" + location.host + "<br/>"); //文档所在地址的主机地址
document.write("port:" + location.port + "<br/>"); //文档所在地址的服务端口
document.write("protocol:" + location.protocol + "<br/>"); //装载该文档所使用的协议,例如HTTP;等
document.write("avaiHeight:" + screen.availHeight + "<br/>"); //窗口可以使用的屏幕高度，单位像素
document.write("avaiWidth:" + screen.availWidth + "<br/>"); //窗口可以使用的屏幕宽度，单位像素
document.write("colorDepth:" + screen.colorDepth + "<br/>"); //用户浏览器表示的颜色位数，通常为32位(每像素的位数)
document.write("appCodeName:" + navigator.appCodeName + "<br/>"); //浏览器代码名的字符串表示
document.write("appName:" + navigator.appName + "<br/>"); //官方浏览器名的字符串表示
document.write("appVersion:" + navigator.appVersion + "<br/>"); //浏览器版本信息的字符串表示
document.write("platform:" + navigator.platform + "<br/>"); //浏览器所在计算机平台的字符串表示
document.write("userAgent:" + navigator.userAgent + "<br/>"); //用户代理头的字符串表示
document.write("cookieEnabled:" + navigator.cookieEnabled + "<br/>"); //如果启用cookie返回true，否则返回false

The effect is as follows: