JavaScript Window - Browser Object Model

JavaScript Window - Browser Object Model
The Browser Object Model (BOM) gives JavaScript the ability to "talk" to the browser.



Window Object
All browsers support the window object. It represents the browser window.
All JavaScript global objects, functions and variables automatically become members of the window object.
Global variables are properties of the window object.
Global functions are methods of the window object.

Even the document of HTML DOM is one of the properties of the window object:
window.document.getElementById("header");
Same as this:
document.getElementById("header");



Window size
There are three This method determines the size of the browser window (the browser's viewport, excluding toolbars and scroll bars).
For Internet Explorer, Chrome, Firefox, Opera and Safari:
window.innerHeight - the inner height of the browser window
window.innerWidth - the inner width of the browser window
For Internet Explorer 8, 7, 6, 5:
document. documentElement.clientHeight
document.documentElement.clientWidth
or
document.body.clientHeight
document.body.clientWidth

Practical JavaScript solution (covers all browsers):
var w=window.innerWidth
|| document.documentElement. clientWidth
|| document.body.clientWidth;

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



Other Window methods
window.open() - Open New window
window.close() - Close the current window
window.moveTo() - Move the current window
window.resizeTo() - Adjust the size of the current window



Window Screen
window.screen object contains information about the user's screen information.

Some properties:
screen.availWidth - available screen width (property returns the width of the visitor's screen, in pixels, minus interface features such as the window taskbar.)
screen.availHeight - available screen height (property returns The height of the visitor's screen, in pixels, minus interface features such as the window taskbar)



Window Location
window.location object is used to obtain the address (URL) of the current page and redirect the browser to it. new page.

location.hostname returns the domain name of the web host
location.pathname returns the path and file name of the current page
location.port returns the port of the web host (80 or 443)
location.protocol returns the web protocol used (http:/ / or https://) The location.href property returns the URL of the current page.
location.assign() method loads a new document.

Example:
<script> <br>document.write(location.href); <br></script>
The output of the above code is:
http://www.w3school.com.cn/js/js_window_location.asp


The difference between location.assign and location.replace
window.location.assign(url): Load a new HTML document specified by the URL. It is equivalent to a link that jumps to the specified url.
The current page will be converted to the new page content. You can click Back to return to the previous page.

window.location.replace(url): Replace the current document by loading the document specified by the URL. This method is to replace the current window page.
The two pages before and after share the same window, so there is no way to go back to the previous page.



Window History
history.back() - Same as clicking the back button in the browser (loads the previous URL in the history list.)
history.forward() - Same as clicking the forward button in the browser ( Loads the next URL in the history list. )



Window Navigator The window.navigator object contains information about the visitor's browser.



JavaScript Message Box
Create three types of message boxes in JavaScript: warning box, confirmation box, and prompt box.

Warning Box
When the warning box appears, the user needs to click the OK button to continue the operation.
Syntax:
alert("text")


Confirmation box
When the confirmation box appears, the user needs to click the OK or Cancel button to continue the operation.
If the user clicks to confirm, the return value is true. If the user clicks Cancel, the return value is false.

Syntax:
confirm("text")

Example:



Prompt box
When the prompt box appears, the user needs to enter a certain value and then click the confirm or cancel button to continue the operation.
If the user clicks to confirm, the return value is the entered value. If the user clicks Cancel, the return value is null.

Syntax:
prompt("text","default value")

Example:




JavaScript Timing
By using JavaScript, we have the ability to execute code after a set time interval,
instead of executing it immediately after the function is called. We call this a timing event.

setTimeout()
Syntax
var t=setTimeout("javascript statement", milliseconds)
The first parameter is a string containing the JavaScript statement. This statement may be such as "alert('5 seconds!')", or a call to a function

Example: (infinite loop)



clearTimeout ()
Syntax
clearTimeout(setTimeout_variable) //setTimeout_variable is the timer reference (variable) when created

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




JavaScript Cookies
A cookie is a variable that is stored on the visitor's computer. This cookie is sent each time the same computer requests a page through a browser.
You can use JavaScript to create and retrieve cookie values.

Cookies are saved in the form of key-value pairs, that is, in the format of key=value. Each cookie is usually separated by ";".
document.cookie = "name=value;expires=date;path=path"
document.cookie = "username=Darren;path=/;domain=qq.com"

Create and store cookies
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())
}

Read cookies
function getCookie(c_name)
{
if (document.cookie.length>0) //Check the document.cookie object Whether there is a cookie
{
c_start=document.cookie.indexOf(c_name + "=")
if (c_start!=-1)
(";",c_start)
if (c_end==-1) c_end=document.cookie.length
return unescape(document.cookie.substring(c_start,c_end))
}
}
return ""
}


Set the validity period of cookies
By default, cookies will be automatically cleared when the browser is closed, but we can set the validity period of cookies through expires.
document.cookie = "name=value;expires=date"