JavaScript Window - Browser Object Model

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



The Window Object
The window object is supported by all browsers. It represents a browser window.
All JavaScript global objects, functions, and variables are automatically 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 the HTML DOM is one of the properties of the window object:
window.document.getElementById("header");
is the same as:
document.getElementById("header");



Window Dimensions
There are three ways to determine the dimensions 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

useful 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 a new window
window.close() - close the current window
window.moveTo() - move the current window
window.resizeTo() - Resizing the current window



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

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



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

location.hostname returns the domain name of the web host
location.pathname returns the path and filename 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.
The location.assign() method loads a new document.

Example:
<script>
document.write(location.href);
</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, jump 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 replaces the current window page,
The two pages before and after share a window, so there is no going 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 button forward in the browser (loads the next URL in the history list A URL.)



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



JavaScript Message Box
Three types of message boxes are created in JavaScript: alert 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.
Returns true if the user clicks OK. If the user clicks Cancel, the return value is false.

Syntax:
confirm("text")

Example:
<script type="text/javascript">
function show_confirm()
{
var r=confirm("Press a button!");
if (r==true)
  {
  alert("You pressed OK!");
  }
else
  {
  alert("You pressed Cancel!");
  }
}
</script>


Alert box
When the alert box appears, the user needs to enter a value and then click the confirm or cancel button to continue to operate.
If the user clicks OK, the return value is the entered value. If the user clicks Cancel, the return value is null.

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

Example:
<script type="text/javascript">
function disp_prompt()
  {
  var name=prompt("Please enter your name","Bill Gates")
  if ( name!=null && name!="")
    {
    document.write("Hello!" + name + "How was your day?")
    }
  }
</script>



JavaScript Timing
By using JavaScript, we have the ability to execute code after a set time interval,
rather than immediately after a function is called. We call this a timed event.

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

Example : (endless loop)
<script type="text/javascript">
var c=0
var t
function timedCount()
{
document.getElementById ('txt').value=c
c=c+1
t=setTimeout("timedCount()",1000)
}
</script>


clearTimeout()
syntax
clearTimeout(setTimeout_variable) //setTimeout_variable is the timer reference at creation ( variable)

example:
function stopCount()
{
clearTimeout(t)
}
</script>



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

Cookies are stored in the form of key-value pairs, that is, the format of key=value. Each cookie is generally 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 document.

  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 ""
}


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



Refer to the original text: http://www.w3school.com.cn/js