Chapter III JavaScript manipulating BOM objects

Chapter I JavaScript manipulating BOM objects one. Window Object

The browser object model (BOM) is one of the components of JavaScript that provides an object that can be exchanged independently from the browser window, using the browser object model to enable interaction with the HTML.

His role is to organize the relevant elements into a package that can be used by program designers to reduce developer labor and improve the ability to design Web pages.

A BOM is a hierarchical structure:

Window object is the entire BOM At the core , when the Web page is opened in a browser, the first thing you see is the browser window, the top-level window object, followed by the page content, the document.

Window objects are also known as browser objects. when a browser opens an HTML document, a Window object is typically created, and if the document defines one or more frames, the browser creates a Window object for the original document, and creates a separate window object for each frame.

1. The role of the BOM

1). Pop up the browser window.

2). Move, close, and resize the browser window.

3). Implement the forward and backward functions of the page in the browser window.

2.window Common Properties

Name	Description
History	Information about URLs that customers have visited
Location	Information about the current URL
Screen	Read-only property that contains information about the client display screen

Syntax: Windoe. Property name = "attribute value";

Example: window.location= "http//www.baidu.com", said to jump to the official homepage of Baidu.

Screen.height returns the height, in pixels, of the screen that displays the browser.

3.window Common methods

Name	Description
Prompt ()	Displays a dialog box that can be prompted and the user can enter, cancels the return of NULL and determines the value returned by the user input
Alert ()	Displays a warning dialog box with a hint and a OK button, with no return value
Confrim ()	Displays a dialog box with a prompt, OK, and Cancel buttons that return True or false
Colse ()	Close the browser window
Open ()	Opens a new browser window that loads the stable specified by the given URL
SetTimeout ()	Calls a function or evaluates an expression after a specified number of milliseconds
SetInterval ()	Invokes a function or expression in the specified period (in milliseconds)

Pop-up window syntax:

window.open ("URL of popup window", "Window name", "Window feature");

1. Feature Properties for Windows

Name	Description
Height, Width	The height, width, and pixels of the window's document display area
Left, top	The x-coordinate, y-coordinate of the window, in pixels
Toolbar=yes|no|1|0	Whether to display the browser's toolbar, the default is Yes
Scrollbars=yes|no|1|0	Whether the scroll bar is displayed, the default is Yes
loaction= yes|no|1|0	Whether to show the address bar, the default is Yes
status= yes|no|1|0	Whether to add the status bar, the default is Yes
Menubar=yes|no|1|0	Whether the menu bar is displayed, by default Yes
Resizable=yes|no|1|0	Whether the window is adjustable, by default Yes
Titlebar= yes|no|1|0	Whether to display the title bar, the default is Yes
Fullscreen=yes|no|1|0	Whether the browser is displayed in full screen mode, the default is no

Two. History object and Location object 1. History Object

The History object provides a list of URLs that the user has recently browsed, that is, browsing histories. For privacy reasons, the History object no longer allows scripts to access the actual URLs that have been accessed

Methods of the History object
Name	Describe
Back ()	Load the previous URL in the History object list
Forward ()	Load the last URL in the History object list
Go ()	Loads a URL for a location in the History object list with a positive and negative integer argument

N in the Go (n) method is a specific number that, when N>0, enters the first few pages of the history list.

When n<0, enter the first few pages of the history list to go back.

A) History.go (1) Represents a forward page, equivalent to the forward () method.

B) History.go (-1) represents a backward page, equivalent to the back () method.

2. Location Object

The Laction object provides the URL information for the current page and can reload the current page (refresh) or mount a new page.

Properties of the Location object
Name	Describe
Host	Sets or returns the host name and port number of the current URL
Hostname	Sets or returns the host name of the current URL
Href	Sets or returns the full URL
Methods for Loaction objects
Reload ()	Reload (refresh) the current document
Replace ()	Replace the current document with a new document

Cases:

<! DOCTYPE html>
<meta charset= "UTF-8" >
<title> Main Page </title>
<body>
<br/>
<!-- Jump to Flowers page--
<a href= "javascript:location.href= ' flower.html '" > View flowers Details </a>
<a href= "Javascript:location.reload ()" > Refresh this page </a>
</body>

I. Document Object

The Document object is part of the Window object and represents the entire HTML document, which can be used to access all the elements in the page. Therefore, in the use of the Document object, in addition to apply to each browser, but also to meet the standard.

Common Properties for Document objects
Referrer	Returns the URL of the current document
Url	Returns the URL of the current document

The syntax format for 1.referrer is as follows:

Document.referrer;

If the current document is not accessed through a hyperlink, the value of Document.referrer is null

Example: Determine whether a user is logged on from a specified page by a jump address.

<! DOCTYPE html>
<meta charset= "UTF-8" >
<title></title>
<body>
<script type= "Text/javascript" >
var preUrl=document.referer; // load jump to the address of the current document
if (preUrl= = "") {
document.write ("SetTimeout ("location.href= ' login.html '", 3000); // using settimeout Delay 5 seconds to jump to the sign-in page of the bonus page
}else{
document.write ("}
</script>
</body>

Syntax for 2.URL:

Document. URL;

Common methods for Document objects
Method	Describe
getElementById ()	Returns a reference to the first object that owns the specified ID
Getelementsbyname ()	Returns the collection of objects with the specified name
getElementsByTagName ()	Returns a collection of objects that are specified with a table signature
Write ()	Writing text to a document, HTML expressions, or JavaScript code

Two. JavaScript built-in objects

In JavaScript, the system has built-in objects such as a Date object, an array object, a string object, and a math object.

A) Date object: Used to manipulate dates and events.

B) Array object: Used to store a series of values in a separate variable name.

C) String object: Used to support the processing of strings.

D) Math object: Performs a common math task that contains several numeric constants and functions.

1.Date objects

Syntax: var date instance =new date (parameter);

Example: Var today=new Date (); Stores the current time in the variable today

var tdate=new Date ("July 15,2013,16:10:12");//pass in a value in string format

Common Methods for Date objects
Method	Description
GetDate ()	Returns the Date object for each day of the one month, with a value of 1~31
GetDay ()	Returns the row of a Date object each day, with a value of 0~6
GetHours ()	Returns the number of hours of the Date object, value 0~23
Getminutes ()	Returns the number of minutes of a Date object with a value of 0~59
Getseconds ()	Returns the number of seconds of the Date object, the value 0~59
GetMonth ()	Returns the month of the date object, the value 0~11
getFullYear ()	Returns the year in the date object with a value of 4 digits
GetTime ()	Returns the number of milliseconds since a moment (January 1, 1970)

Example: Show time

<! DOCTYPEHTML>
<HTML>
<Headlang="en">
<Metacharset="UTF-8">
<title> Clock Effects </title>
</Head>
<Body>
<Divid="Myclock"></Div>
<Scripttype="Text/javascript">
functionDisptime(){
vartoday=NewDate ();//Get the current time
varHh=today.gethours ();
varMm=today.getminutes ();
varSs=today.getseconds ();
//set the content of the div to the current time
Document. getElementById ("Myclock").InnerHTML="now is: "+hh+":"+mm+":"+SS;
}
Disptime();
</Script>
</Body>
</HTML>

2.Math objects

The Math object provides a number of math-related features, which are a global object of JavaScript that you do not need to create, and that you can invoke its properties and methods directly as an object.

Common Methods for math objects
Method	Description	Example
Ceil ()	Rounding on logarithmic (direction first quadrant)	Math.ceil (25.5); return 26 Math.ceil (-25.5); return-25
Floor ()	Rounding with logarithms (in the third quadrant of the direction)	Math.floor (25.5); return 25 Math.floor (-25.5); return-26
Round ()	Rounded	Math.Round (25.5); return 26 Math.Round (-25.5); return-26
Random ()	Returns the random number of 0~1	Math.random ();

Three. Timing function

Two timer functions settimeout () and SetInterval () are available in JavaScript.

In addition, two functions cleartimeout () and clearinterval () for clearing the timer are also provided.

1. SetTimeout

SetTimeout () is used to call a function or evaluate an expression after a specified millisecond, syntax:

setTimeout (" function name called", number of milliseconds to wait) ;

2. SetInterval

Invokes a function or expression in the specified period (in milliseconds). Grammar:

setinterval (" called function name", the number of milliseconds between periodic calls to the function) ;

SetInterval () will call the function repeatedly, knowing that the window is closed or forced to stop by another method.

Chapter III JavaScript manipulating BOM objects