js--BOM

@ (js basic part)
The meaning of BOM: BOM (Browser Object Document) is browser object model.
- BOM provides content-independent objects that interact with browser windows.
Because BOM is mainly used to manage the communication between windows, its core object is window.
- BOM consists of a series of related objects, and each object provides many methods and attributes.
- BOM lacks standards. The standardization organization of JavaScript grammar is ECMA. The standardization organization of DOM is W3C. BOM was originally a part of Netscape browser standard.

1. Windows object is the core object of BOM. It regards the whole browser as an object.
Windows object is the top-level object in js. All variables and functions defined in the global scope will become the attributes and methods of windows object, and windows can be omitted when invoked.
Example: Open window.open(url,target,param);
// url address to open
// Location of the new target window _blank_self_parent (parent framework)
// Some settings for the new param window
// Return value, handle to new window
Close the window: window.close();

function test(){
        console.log("this is test");
    }
    window.test();
    window.setInterval(function (){console.log(1);}, 1000);

 var a = 1;
    if(window.a){
        console.log(a);
    }

    function test(){
        console.log("this is test");
    }
    if(window.test && typeof window.test == "function"){
        test();
    }//A variable or function used to determine the existence of a global scope


    var btn = document.getElementById('btn');
    btn.onclick = function (){
    };//This is written to avoid generating global variables.

2. 1. Common methods of window s objects

1. Timer

var btn = document.getElementById('btn');
    btn.onclick = function (){
        // The first parameter of the timer: function
         // 1. Definition of Passing Anonymous Function
         // 2. Pass the name of the defined function
        // 3. Pass a small string of js code
        window.setInterval("console.log(1)", 1000);
        For js code running mechanism in string form:
         The interpreter of js temporarily creates a function in global scope.
         The code for this function is the code given in string form.
    };

2. System Dialogue Box

   var res = window.alert('abc');
              console.log(res);

var res = window.confirm("Are you sure??");
        console.log(res);

var res = window.prompt('prompt string','default value)
// The default value is a matching string

The features of the system dialog box are as follows:

1. The dialog code has code blocking effect. Once the dialog function is stopped, the js code is immediately suspended (paused). * Specify that the dialog box is processed (determined or closed).

2. Dialogue boxes are modal and cannot be clicked and interacted with anything else on the page if they are not processed.
3. It has nothing to do with the page.

• The style of the dialog box cannot be changed
• It can only be determined by the operating system and the browser itself.

2. Common attributes of window s objects

1. Width and Height of Visual Area of Page

• The innerWidth attribute of the window object can get the width of the visual area of the whole page.

window.innerWidth;

• The innerHeight property of the window object can get the height of the visual area of the entire page

window.innerHeight

Note: You can also use the clientWidth attribute of the documentElement object under the document object, which treats the entire document as an object, documentElement, which is actually the tag element of html.

window.document.documentElement.clientWidth;

The height of the visual area of the page can also be obtained using the clientHeight property of the documentElement object under the document object.

window.document.documentElement.clientHeight

• Note: The innerXXX attribute includes the width (height) of the scroll bar on the page.
• The clientXXX attribute does not include the width (height) of the scrollbar of the page.

2. Width-height correlation of browsers

• The outerWidth attribute of the window object can get the browser's width

window.outerWidth

• outerHeight of the window object, you can get the height of the browser

window.outerHeight;

3. Several Common Events in Windows

• Windows onscroll event triggers when a page scrolls

window.onscroll = function (){
            //scrollTop property of the documentElement object under the document object
             //You can get the scroll distance in the vertical direction of the page
            //firefox and IE can get values, chrome has been 0
            var st = document.documentElement.scrollTop;

            //The scrollTop attribute of document.body can be obtained under chrome.
            //This property has been zero under firefox and IE
            var st = document.body.scrollTop;
//Processing Chrom and Others for Compatibility
var st = document.documentElement.scroollTop || document.body.scrollTop

//Achieving rolling distance in horizontal direction
var sl = document.documentElement.scrollLeft ||document.boy.scrollLeft;


window.onload = function (){
            var btn = document.getElementById('btn');
            btn.onclick = function (){
                //Accessing the scollTop(Left) attribute can get the scroll distance
                //By assigning this property, you can change the scroll distance

                //Assignment requires writing two lines at the same time to ensure compatibility
                document.body.scrollTop = 200;
                document.documentElement.scrollTop = 200;
            };
        };

• The onload event of the window object, after the page is fully loaded

  Immediate trigger
  Note: onload is designed to run functions inside the document after loading. Normally, script tags cannot be placed in front of body tags.

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    </style>
    <script>
        // The onload event of the window object triggers immediately after the page is fully loaded
        window.onload = function (){
            var btn = document.getElementById('btn');
            btn.onclick = function (){
                console.log("btn is clicked");
            };
        };
    </script>
</head>
<body style="height:2000px;width:2000px;">
    <input type="button" id="btn" value="test">
</body>
</html>

• onclick event in Windows (pay attention to observation to distinguish)

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    </style>
    <script>
        // The onload event of the window object triggers immediately after the page is fully loaded
        window.onload = function (){
            var btn = document.getElementById('btn');
            btn.onclick = function (){
                console.log("btn is clicked");
            };
        };
    </script>
</head>
<body style="height:2000px;width:2000px;">
    <input type="button" id="btn" value="test">
</body>
</html>

(Supplementary) Several commonly used methods that only take effect under IE

• 1. The moveBy method allows the browser window to move a certain distance relative to the current location.
  Scope can only be in the visual area of the screen
  Parameters:
  1) Integer, Horizontal Moving Distance, Negative Backward, Positive Forward
  2) Integer, moving distance in vertical direction, negative value up, positive value down

window.moveBy(100,100);

• 2. The moveTo method allows the browser window to move to a specified location
  Scope can only be in the visual area of the screen
  Parameters:
  1) Integer, Horizontal Endpoint Position
  2) Integer, end point in vertical direction

window.moveTo(-100,100);

• 3. The resizeBy method can make the browser window change a certain size relative to the current size.
  Scope can only be in the visual area of the screen
  Parameters: Pixels, positive for enlargement, negative for reduction
  1) Integer, Horizontal Width of Change
  2) Integer, Vertical Height Change

window.resizeBy(100,100);

• 4. The resizeTo method can change the browser window to a certain size.
  Scope can only be in the visual area of the screen
  Parameters: Pixels
  1) Integer, end of width
  2) Integer, high end point

  window.resizeTo(300,400);

  These methods are the standard methods of W3C. IE realizes the functions of these methods concretely.
  firefox and chrome have these methods, but they are not implemented specifically.

Practice making a button to go back to the top
window.resizeBy(100,100);

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    </style>
    <script>
        // The onload event of the window object triggers immediately after the page is fully loaded
        window.onload = function (){
            var btn = document.getElementById('btn');
            btn.onclick = function (){
                console.log("btn is clicked");
            };
        };
    </script>
</head>
<body style="height:2000px;width:2000px;">
    <input type="button" id="btn" value="test">
</body>
</html>

• Routine Writing

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<style type="text/css">
 body {height: 5000px;}
  #btn{
       position: fixed;right: 50px; bottom:80px;
       border:none;
       background: rgba(0,0,0,.8);
       color: #fff;
       width: 60px;
       height: 60px;
       font-size: 30px;
       transition:all .8s;
       outline: none; 
  }
  #btn:hover {
      background: #C6C2C2;
      transform:rotate(900deg);
      border-radius:30px;
      color: #434242;
      font-size: 25px;
  }
</style>
<body>
<input type="text" id="inp">
<div>dasdasdasas sdaerawdasfasfasfasrfasfasfasfasfsa</div>
<input type="button" value="↓" id="btn">
    <script>
    var btn = document.getElementById('btn');
    btn.onclick = function(){
    document.body.scrollTop = 0;
    document.documentElement.scrollTop = 0;    
    }
    </script>
</body>
</html>

#### Note: location object

1. The location object treats the browser's address bar as an object
2. location is an attribute of a window object

* Attributes of location object

• 1. href attribute of location object: 1. url that can be used to get or modify address bar, access this attribute, to get address bar value (string)

 `var res = window.location.href;
 console.log(res);
//Assigning a value to this property can change the page address (equivalent to a jump)
location.href = 'http://www.baidu.com'

Common methods of location objects

var url = 'http://www.baidu.com/';
location.assign(url);//Jump to Baidu's http://www.baidu.com'

var url = 'http://www.baidu.com';
location.replace(url);//Jump to the specified page

location.reload();

Exercise: Make an input box and a button on the page to realize the function of transferring what to Baidu search.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    </style>
</head>
<body>
<!-- Input box  -->
    <input type="text" id="inp">
 <!-- Search button -->
    <input type="button" id="btn" value="Use Baidu Search">
    <script>
        var btn = document.getElementById('btn');
        btn.onclick = function (){//The whole idea is to get the values in the input box and splice them with the web api, then use location method to jump.
            var inp = document.getElementById('inp');
            var str = inp.value;//Get the value in the input box

            var url = "http://Www.baidu.com/s?Wd="+str;//'s?Wd='an API of Baidu,'s?'is what search is, semantic understanding
            location.href = url;
        };
    </script>
</body>
</html>

Note 2: navigator object

• navigator objects encapsulate basic information of browsers into objects
  1. appVersion of navigator object,
  Marks the current version of the browser

window.navigator.appVersion;

2. appName property of navigator object.
The name of the previous browser (the original manufacturer of the kernel)

window.navigator.appName

3. The platform property of the navigator object.
The system platform that marks the current browser running

window.navigator.platform

These three attributes are now largely discarded and replaced by userAgent attributes, which contain all the basic information about browsers.

• chrome:
  Mozilla/5.0 (Windows NT 6.1; WOW64)
  AppleWebKit/537.36 (KHTML, like Gecko)
  Chrome/56.0.2924.87 Safari/537.36
• firefox:
  Mozilla/5.0 (Windows NT 6.1; WOW64; rv:51.0)
  Gecko/20100101 Firefox/51.0
  
• IE:
  Mozilla/5.0 (MSIE 9.0; qdesk 2.4.1266.203;
  Windows NT 6.1; WOW64; Trident/7.0; SLCC2;
  .NET CLR 2.0.50727; .NET CLR 3.5.30729;
  .NET CLR 3.0.30729; Media Center PC 6.0; rv:11.0)
  like Gecko

How to Judge Browser Brand Sample Code

var res = navigotar.userAgent
      console.log(res);
            if(res.indexOf("WebKit") != -1 && res.indexOf('Chrome') != -1){
                console.log('This is Google Browser');
            } else if(res.indexOf("Gecko") != -1 && res.indexOf('Firefox') != -1){
                console.log("This is Firefox Browser");
            } else if(res.indexOf('Trident') != -1 && res.indexOf("MSIE") != -1){
                console.log("This is IE Browser");
            }

Window size, a common property of window objects

Supplementary: Short Circuit for Logical Operations

• Meaning: In logical operations, if the previous operation can uniquely determine the result of the entire operation, then the latter expression will no longer run.
• for example

      var a = 1;
            a++; // Result 1
            var res = true || a++;
            true && a++;
            alert(a);

blog example

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    
    <script type="text/javascript">
        // Logical interruption (short circuit operation)
        // Logic or:||
        // Logic and:&&

        // Logic or:
        // Syntax: expression 1 | | expression 2
        // If the value of the first expression is true: expression 1 is returned
        // Returns expression 2 if the value of the first expression is false

        // Logic and:
        // Grammar: expression 1 & expression 2
        // Returns expression 2 if the value of the first expression is true
        // Returns expression 1 if the value of the first expression is false

        // var b = 123 || 456 || 345; // / Whatever operation follows has ended at 123. The first'real'place.
        var b = 0 || 456 || 34;//Return to 456. If the first one is false, it will go to the back and find the true one. Finding it will end the operation.
        console.log(b);

        // Application scenario: default values for parameters of functions
        function fn(num1) {
            // console.log(num1);
            num1 = num1 || 1;
            // if(num1 !== 0)  {
            //     num1 = 1;
            // }
            console.log(num1);
        }

        // If the parameter is not worn, the value of num1: undefined
        fn();         // 0
        fn(123);    // 123

        // Logic and
        // Var B = 123 & 456 & 34; / / Print 34, although 34 is true, because it is the last one, if the first one is false, it will end directly at the place of the first operation.
        // var b = 0 && 456;
        // console.log(b);

        // When judging
        // If (condition 1 & condition 2 & condition 3)
        // If (condition 1 | | | condition 2 | | condition 3)
        // 
    </script>
</body>
</html>