Easy Learning JavaScript 16: JavaScript BOM learning (i)

Overview of a Window object

the core object of the BOM is the Window object, which represents an instance of the browser. The Window object is at the top level of the JavaScript structure, for each

a the Window object is automatically created for it by the system. All browsers support the Window object, which is a table of browser windows. All

JavaScript global objects, functions, and variables automatically become members of the Window object. A global variable is a property of a Window object. The global function is

of the Window object method. Even the document of the HTML DOM is one of the properties of the window pair image. By the following two lines of code we can see

the Window object is the top-level (core) object of the BOM, all objects are out of its reach. Therefore, it can not be displayed when it is called a child object.

Window object:

Window.document.getElementById ("test");

The equivalent of the above-mentioned notation is:

document.getElementById ("test");

Two Window objects

(1) Properties and methods of the Window object

Properties of the Window object

Method of the Window object

(2) System dialog box

the Window object can create three message boxes in javascript: A warning box, a confirmation box, and a prompt box. browser via alert () method, confirm ()

Method and prompt () party can call the Web Page System dialog to display information to the user. The System dialog box is not related to the Web page displayed by the browser, nor does it contain

Html.

1 Warning Box: Warning boxes are often used to ensure that users can get some information. When the warning box appears, the user needs to click the OK button to continue

Operation.

Syntax: alert ("text");

2 hint Box: A prompt box is often used to prompt the user to enter a value before entering the page. When the prompt box appears, the user needs to enter a value and then click

Click the Confirm or Cancel button to continue the manipulation. If the user clicks Confirm, then the return value is the value entered. If the user clicks Cancel, the return value is

Null.

Syntax: Prompt ("text");

3 Confirmation Box: The confirmation box is used to enable users to verify or accept certain information. When the confirmation box appears, the user needs to click the OK or Cancel button to

can continue to operate. If the user clicks Confirm, then the return value is true. If the user clicks Cancel, the return value is false.

Syntax: Confirm ("text");

Comprehensive Example:

var name=prompt ("Please enter your name", ""), if (Confirm (name!=null&&name!= ")) {     alert (" Hello! ") "+name);} else{     alert ("You did not enter a name!") ");}

3 new Window

Use the window.open () method to navigate to a specific URL, or to open a new browser window. It can accept four parameters:

window.open (Url,name,feature,replace);

Parameter explanation:

URL: The URL to load, set the URL of the document displayed in the open window, or, if the default is "", the new window will not display any documents.

Name: window or window target. Name the new window. The name can be used as the label and as the target property value. If the name is called an existing

The name of the window, the open method no longer creates a new window, and only returns a reference to the specified window, in which case the third parameter is ignored.

Feature: An attribute string that sets the display properties of the new window, optional parameters.

Replace: A Boolean value that indicates whether the new page supersedes the currently loaded page in the browser record. Sets whether to load in the window's browsing history

to the the URL of the new page creates a new entry, or replaces the current entry in the browsing history with it.

Parameters for the third attribute string:

Instance:

Open ("http://www.baidu.com", "Baidu", "Width=400,height=400,top=200,left=200,toolbar=yes", "_parent");

4 Window Page Size

There are three ways to determine the size of the browser window (the viewport of the browser, excluding toolbars and scroll bars).

A for Internet Explorer, Chrome, Firefox, Opera, and Safari:

window.innerheight;//The interior height of the browser window window.innerwidth;//the interior width of the browser window

b for Internet Explorer 8, 7, 6, 5:

Document.documentelement.clientheight;document.documentelement.clientwidth;

Or

Document.body.clientheight;document.body.clientwidth;

There are two practical JavaScript scenarios (all browsers included):

Programme one:

var pagewidth=window.innerwidth; var pageheight=window.innerheight; if (typeof pagewidth!= "number") {     if (document.compatmode== "Css1compat")//Standard mode {        pagewidth= Document.documentElement.clientWidth;        pageheight=document.documentelement.clientheigth;    } else{        pagewidth=document.body.clientwidth;        pageheight=document.body.clientheigth;}    } document.write ("Browser's internal window width:" + P Agewidth + ", Height:" + pageheight + ".) ");

Scenario Two:

var pagewidth=window.innerwidth| | document.documentelement.clientwidth| | Document.body.clientwidth;var pageheight=window.innerheight| | document.documentelement.clientheight| | Document.body.clientheight;document.write ("Browser's internal window width:" + pagewidth + ", Height:" + pageheight + ".) ");

The results of the above two scenarios are:

Browser's internal window width: 1366, Height: 607.

Three screen objects

The Screen object contains information about the user's screens. The two most commonly used properties of a screen object are: availwidth (the width of the screens available) and

Availheight (the available screen height).

Screen Object properties:

Instance:

document.write ("Usable width:" + screen.availwidth+ ",");d ocument.write ("Available height:" + screen.availheight);

Output: Available width: 1366, available height: 728

Four History objects

The history object is a record of keeping the internet, counting from the moment the window is opened, including the browser. In order to protect the privacy of users,

JavaScript accesses the object in a way that restricts it.

Properties and methods for the history object:

Example:

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
The result of the operation is:

Five Location objects
The Location object is one of the BOM objects that provides information about the document that is loaded in the current window, and provides some navigational features. Location
object is used to obtain the address (URL) of the current page and redirect the browser to a new page.
Properties of the Location object:
Method of the Location object:
Example: Get a type of key-value pair such as name=liu&psw=123. 
function Getargs () {      //Create an array of key-value pairs to hold      var args=[];      Remove? Number      var qs=location.search.length>0?location.search.substring (1): "";      Split the fractional group by & String      var items=qs.split ("&");      var item =null,name=null,value=null;      Traverse for      (var i=0;i<items;i++) {          item=items[i].split ("=");          NAME=ITEM[0];          VALUE=ITEM[1];          Store the key-value pairs in the array to          args[name]=value;      }      return args;  }  var  args=getargs ();//Call Function  alert (args["name"]);  Alert (args["PSW"]);       






Easy Learning JavaScript 16: JavaScript BOM learning (i)