JS events, Bom objects and Dom objects (2) (Le byte architecture)

Posted Jun 26, 20205 min read

If you want to be an excellent java architect, look here Free Open Course(Tencent Classroom)

If you need more information, please click on the right(remember to enter the group secret number:66) This is a no return route, there is a risk of baldness, please choose carefully!

BOM object

The core object of BOM is window, which represents an instance of the browser. The window object has a dual role. It is not only an interface for accessing the browser window through JavaScript, but also a Global object specified by ECMAScript. This means that any object, variable and function defined in the web page has window as its Global object, so it has the right to access methods such as parseInt(). If the page contains frames, each frame has its own window object and is saved in the frames collection. In the frames collection, you can access the corresponding window object by numerical index(starting at 0, left to right, and top to bottom) or the name of the frame.

Window Object Method

System dialog

The browser can call the system dialog box to display messages to the user through the alert(), confirm(), prompt() methods(actually the method of the window object).

(1) Message box:alert, commonly used.
The alert() method is used to display an alert box with a specified message and an OK button.
(2) Input box:prompt, returns the value in the prompt box.
The prompt() method is used to display a dialog box that prompts the user for input.
Parameters(optional):
The first parameter:plain text to be displayed in the dialog box.
The second parameter:the default input text.
(3) Confirmation box:confirm, return true/false.
The confirm() method is used to display a dialog box with the specified message and OK and Cancel buttons.

<style type="text/css">
    #aa{
        border:1px solid red;
        height:100px;
    }
</style>
<body>
    <div id="aa">
        This is a div
    </div>
    <button onclick="testAlert();">Warning</button>
    <button onclick="testComfirm();">Edit</button>
    <button onclick="testPrompt();">Enter</button>
    <script type="text/javascript">
        //1. Warning box
        function testAlert(){
            alert('Alert box!!!');
        }

        /*
         2. Input box
             Return value:input content
         * */
        function testPrompt(){
            var item = prompt('Please enter age'); //item gets the entered value
            //console.log(item)
            //alert(prompt('Please enter age', 18)); //output the input value
        }

        /*
         3. Confirmation box
             Return value:boolean(true|false)
         * */
        function testComfirm(){
            var result = confirm('Do you really want to change it?');
            if(result){
                var ele = document.getElementById("aa");
                ele.style.color="red";
                ele.innerHTML="<span>fdsfsd</span>";
            }else{
                alert("It's okay, don't be blind...");
            }
        }
    </script>
</body>

Open the window

The window.open() method can either navigate to a specific URL or be used to open a new window

<script type="text/javascript">
function openBaidu(){
    window.open('http://www.baidu.com','_self'); //_self, _blank, etc.
    //window.open(); //blank window
}
</script>
<input type="button" name="open" value="Baidu" onclick='openBaidu();' />

close the window

Window.close():Close the window.

Example:Click the button to close the current window.

<input type="button" value="Close window" onclick="window.close();" />

Time function

setTimeout()

SetTimeout():Call the function or calculation expression after the specified number of milliseconds. Return a unique identifier; you can also clear the execution of the specified function by the returned identifier cliearTimeout(id):.

var id = setTimeout(function,times);

clearTimeout(id);

Examples:

<script type="text/javascript">
    //Alert appears after a delay of 3 seconds
    function hello() {
          alert("Sorry, I need you to wait");
    }
    setTimeout("hello()", 3000);

    //time display
    var timeout;
    function init(){
           //get the current time
           var date = new Date();
           var time = date.toLocaleString();
           //Get the corresponding object
             var h1 = document.getElementById('h1');
           //Add styles as required
           if(0==date.getSeconds()){ //When the seconds of the time become 0, display a red font
               h1.innerHTML ='<span style="color:red">' + time +'</span>';
           } else {
               h1.innerHTML = time;
           }
           /*
            * Timed operation, only performed once
                 The first parameter:the method of execution; the second parameter:timing, in milliseconds
            * */
            setTimeout(init,1000); //how long to wait to execute
    }
    //window.setTimeout(init,1000);//execute only once
    //stop operation
    function stopShow() {
        clearTimeout(timeout);
    }
</script>
<body onload="init();">
    <h1 id="h1"></h1>
    <button onclick="stopShow()">Time stops</button>
</body>

The method specified by the function is executed after the time of milliseconds, and can also be canceled before execution

setInteval()

SetInterval():The function or calculation expression can be called according to the specified period(in milliseconds), or it can be used to end according to the returned logo. This method will continuously call the function until clearInterval() is called or the window is closed.

var id = setInterval(function,times);

clearInterval(id);

function test(){
    console.log(".....");
}
//window is a global object, call setInterval() function through the global object
window.setInterval(test,1000);

history object

The history object is a history object. Contains the URL visited by the user(in a browser window). The history object is part of the window object and can be accessed through the window.history property.

The attribute of the history object:length, returns the number of URLs in the browser history list.

back():Load the previous URL in the history list.

forward():Load the next URL in the history list. When the page is first visited, there is no next url.

go(number|URL):The URL parameter uses the URL to be accessed. The number parameter uses the relative position of the URL to be accessed in the URL list of History. go(-1), go to the previous page

013-history.html

<body>
    <a href="013-history-a.html">013-history-a.html</a>
    <h1>I am the first page</h1>
    <input type="button" value="forward" onclick="window.history.forward();" />
    <script>
        console.log(window.history);
    </script>
</body>

013-history-a.html

<body>
    <a href="013-history-b.html">013-history-b.html</a>
    <h1>I am A page</h1>
    <input type="button" value="Back" onclick="window.history.back();"/>
</body>

013-history-b.html

<body>
      <h1>I am B page</h1>
      <input type="button" value="First page" onclick="window.history.go(-2);"/>
      <input type="button" value="Back" onclick="window.history.back();"/>
</body>

location object

The location object is one of the window objects, which provides information about the documents loaded in the current window, and also provides some navigation functions. It can also be accessed through the window.location property.

The attribute href of the location object:set or return the complete URL

Method of location object

reload():Reload the current document.

Replace():Replace the current document with a new document.

<script type="text/javascript">
    function openBaidu(){
        //No history, replace the current document with a new document
        //window.location.replace("http://www.baidu.com");
        //console.log(window.location.href); //get the complete url
        window.location.href = "http://www.baidu.com";
    }
</script>
<body>
    <input type="text" value="" />
    <input type="button" value="refresh" onclick="window.location.reload();" />
    <input type="button" value="Baidu" onclick="openBaidu();" />
</body>