I BOM

Browser object model: browser object model refers to browser related js operations
Usually window xxxx

1. Get browser height

1. Both width and height include the width of the scroll bar
2. This is the width and height of the browser, not the page

console.log(  window.innerWidth) // Browser width 
console.log( window.innerHeight )// Browser height, not page height 

2. Get some browser related information: navigator

console.log( window.navigator);
//appName: Netscape 
//appVersion: version number
//Platform: 'Win32' system version

II Related to browser address

1. Content related to browser operation address

 //  1.window.open("address") opens a page
 document.getElementById("btn").onclick = function () {
 // window.open("./a.html");
 window.open("http://www.baidu.com");
}

// 2.window.close() closes the current page;
// Note that the closed page can only be closed if it is opened through code. The directly opened page cannot be closed
document.getElementById("btn2").onclick = function () {
window.close();
}

III Related to viewer events

1.window.onload: wait until the page document and resources are loaded, not immediately

2.onresize: this event will be triggered when the browser is reset

var html =  document.getElementsByTagName("html")[0];
//    console.log(html);
html.style.fontSize = window.innerWidth/10 + "px";  //Dynamically set html root font size
window.onresize = function () {
	console.log("The browser size has been reset");
    // Assuming that any width is 10rem, set the root font size dynamically  
var html =  document.getElementsByTagName("html")[0];
//    console.log(html);
html.style.fontSize = window.innerWidth/10 + "px";  //Dynamically set html root font size
}

3.onscroll: it will be triggered when the page scrolls, and the browser must be able to scroll

window.onscroll = function () {
    console.log("The page scrolled");
 }

4. The distance the page is rolled off when scrolling

window.onscroll = function () {
// Get the rolled height
console.log(document.documentElement.scrollTop );  // Documented declaration 
console.log(document.body.scrollTop) //No document declaration 
}

1, If there is a document declaration, we use document Documentelement to obtain;
2, If there is no document declaration, we use document Body to get
IE : 1. If there is no document declaration, both can be used
2. If there is a document declaration, document Documentelement works, document Body doesn't work
safari : window.pageYoffset to get

4 . Explorer pop-up window

1. Pop up alert;
2.prompt: an input box will pop up
3.confirm query box

// 1. Pop up alert;
// alert(123);
// 2.prompt: an input box will pop up. If you click OK, it is the content in the input box. If you click Cancel, you will get a null return
// var str = prompt("please enter the content");
// console.log(str);
// 3.confirm query box, return value: if you click OK, return true; if you click Cancel, return false
var res =  confirm("Are you sure?");
console.log(res);

V timer

1. Countdown timer: executes a piece of code after a period of time. The unit is milliseconds

setTimeout(function() {
    console.log("Code that will be executed after 3 seconds of timing");
 }, 2000);

2... Interval timer: specify a period of time to cycle and execute a piece of code

// setInterval will always be executed in the background;
var num = 0;
   setInterval(function(){
       console.log("Execute the code here every 1 second");
       // Modify the title of the page
       num++;
       document.title = num;  //Modify the title of the page
    }, 1000);

3. Stop timer: 1. The return value of timer is a number; 2. Stop timer: cleartimeout (return value of timer);

var timer = setTimeout(function(){
    console.log("Code executed");
}, 3000);
// console.log(timer);
var ele = document.getElementsByClassName("btn")[0];
ele.onclick = function () {
    clearTimeout(timer);  //Stop Timer  
}

var timer = setInterval(function(){
   console.log("timer");
}, 2000);
ele.onclick = function () {
    // clearTimeout(timer);  // Stop Timer  
    clearInterval(timer);  //Stop interval timer
}

Note: clearInterval and clearTimeout can be used with each other

4. The countdown timer can replace the interval timer

setInterval(function () {
     console.log(111);
}, 2000);

// Simulate interval timer through countdown timer 
function fn() {
   setTimeout(function () {
        console.log("Code executed");
        fn();
    }, 2000);
}
fn();

5. All timer codes must lag behind js codes

setTimeout(() => {
    console.log(111);
}, 0);
console.log(222);
setTimeout(() => {
    console.log(333)
});
console.log(444);

6. This problem in the timer: if it is not the arrow syntax in the timer, its this points to the window;

        var obj = {
            name: "Zhang San",
            fn: function () {
                console.log("1",this);
                // Save the external this value through a variable 
                var that = this;
                setTimeout(function () {
                    // console.log("2",obj.name);
                    console.log("2",that.name);
                    // What about printing the name in obj??
                    
                }, 2000);
            }
        }
        obj.fn();