Introduction to JavaScript BOM

Composition of JavaScript

The JavaScript foundation is divided into three parts:

ECMAScript: Syntax Standard for JavaScript. Including variables, expressions, operators, functions, if statements, for statements, etc.
DOM: document object model, API for manipulating elements on Web pages. For example, let the box move, change color, rotate pictures, etc.
BOM: browser object model, API for operating some functions of the browser. For example, let the browser scroll automatically.

What is BOM

BOM: Browser Object Model.

BOM structure diagram:

It can also be seen from the above figure:

Window object is the top-level (core) object of BOM. All objects are extended through it, which can also be called sub objects of window.
The more DOM is a part of BOM.

window object:

The window object is a top-level object in JavaScript.
Global variables and user-defined functions are also attributes and methods of window objects.
When calling properties and methods under the window object, you can omit window.

Let's talk about the common built-in methods and built-in objects of BOM.

The system dialog box pops up

For example, alert(1) is short for window.alert(1) because it is a child method of window.

There are three types of system dialog boxes:

	alert();	//The appearance is different in different browsers
	confirm();  //Poor compatibility
	prompt();	//Not recommended

Open window, close window

1. Open window:

	window.open(url,target,param)

Parameter interpretation:

url: the address to open.
target: the location of the new window. Can be:_ blank ,_ self, _ Parent parent frame.
param: some settings for the new window.
Return value: handle to the new window.

param is a parameter that can be filled with various parameters (), such as:

Name: name of the new window; can be blank
features: attribute control string. Various attributes in this control window are separated by commas.
Fullscreen = {yes / no / 1 / 0} full screen, no by default
Channelmode = {yes / no / 1 / 0} whether to display the channel bar. The default is No
Toolbar = {yes / no / 1 / 0} whether to display toolbar. No by default
Location = {yes / no / 1 / 0} whether to display the address bar. The default is No. (some browsers do not necessarily support it)
Directions = {yes / no / 1 / 0} whether to display the steering button. The default is No
Status = {yes / no / 1 / 0} whether to display the window status bar. The default is No
Menubar = {yes / no / 1 / 0} show menu or not, no by default
Scrollbars = {yes / no / 1 / 0} whether to display scroll bars. The default is yes
Resizable = {yes / no / 1 / 0} is the window resizable? No by default
width=number window width (in pixels)
height=number window height (in pixels)
top=number the distance (in pixels) from the window to the top of the screen
left=number the distance from the window to the left of the screen (in pixels)

Just separate the parameters with commas, but we'd better put them in json.

2. Close window: window.close()

(1) And (2):

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<a href="javascript:;">Click me to open a new page</a>
<a href="javascript:;">Click me to close this page</a>
<script>
    //New window = window.open (address, whether to open a new window, various parameters of the new window);
    var a1 = document.getElementsByTagName("a")[0];
    var a2 = document.getElementsByTagName("a")[1];
    a1.onclick = function () {
//Example 1: window.open(“ http://www.jx.com ","_blank");
        var json = {
            "name": "helloworld",
            "fullscreen": "no",
            "location": "no",
            "width": "100px",
            "height": "100px",
            "top": "100px",
            "left": "100px"
        };
        window.open("http://www.baidu.com", "_blank", json); / / example 2
    }

    //Close this page
    a2.onclick = function () {
        window.close();
    }
</script>
</body>
</html>

3. New window related:

New window. moveTo(5,5)
New window. moveBy()
New window. resizeTo()
window.resizeBy()

Code example:

        var newWin = window.open("demo.html", "_blank", json);
        newWin.moveTo(500, 500);

location object

window.location can be abbreviated as location. Location is equivalent to the browser address bar and can parse the url into independent fragments.

Properties of the location object

href: Jump
hash returns the content in # the url, including#
host hostname, including port
Hostname hostname
Pathname the path part of the URL
The protocol protocols are generally http and https
search query string

Example of location.href attribute:

**Example 1: * * click the box to jump.

<body>
<div>smyhvae</div>
<script>

    var div = document.getElementsByTagName("div")[0];

    div.onclick = function () {
        location.href = "http://www.baidu.com";   // When you click div, you jump to the specified link
 //     window.open("http://www.baidu.com","_blank");  // Mode II
    }

</script>
</body>

Example 2: automatically jump to Baidu after 5 seconds.

Sometimes, when we visit a non-existent web page, we will be prompted to automatically jump to the specified page after 5 seconds. At this time, we can use location. give an example:

<script>

    setTimeout(function () {
        location.href = "http://www.baidu.com";
    }, 5000);
</script>

Method of location object

location.assign(): change the address of the browser address bar and record it in the history

Setting location.href will call assign(). Location.href is generally used to jump between pages.

location.replace(): replaces the address in the browser address bar and will not be recorded in the history
location.reload(): reload

navigator object

Some properties of window.navigator can obtain some information of the client.

userAgent: system, browser)
platform: Browser supported system, win/mac/linux

give an example:

    console.log(navigator.userAgent);
    console.log(navigator.platform);

The effects are as follows:

Tags: Javascript html css

Posted on Fri, 19 Nov 2021 13:25:03 -0500 by Brendan

Programmer Help