This is the fifth day of my participation in the August Genwen Challenge.More challenges in August

What is BOM?

The definition of BOM

  • BOM (Browser Object Model)The browser object model
  • Concept:The core object of the BOM is windowRepresents an instance of the browser.
    • In browsers, a window is an interface that accesses the browser window through JavaScript and is also a Global object defined by ECMAScript
    • This means that “any object, variable, or function defined on a web page takes the Window as its Global object
  • Function: Because Window has a dual role, variables, functions, and functions declared in the global scope become properties and methods of the Window object.
/** * The global scoped variable age and a function callage are automatically assigned to the * window object, so the function */ can be accessed and called through window.age  
var name='poo';
 function callage(){
     console.log(this.name);
 }
 console.log(window.name); // poo
 callage(); // poo
 window.callage(); //poo
Copy the code

The difference between defining global variables directly and defining variables on window objects

  • Global variables defined directly cannot be deleted by the DELETE operator
  • Properties defined on a window object can be deleted by the DELETE operator
    var age=16;
    window.color='pink';
    delete window.age;
    delete window.color;
    console.log(window.age);/ / 16
    console.log(window.color);//undefined
Copy the code
Principle (just know)
  • Because the window property added using the var statement has a property called[(Configurable)]Property, whose value is set to false, specifying that properties so defined cannot be deleted by the DELETE operator.
Properties of the Window object
  • An undeclared variable is thrown if you try to access it directly(ReferenceError)error
  • If throughQuery window objectIs displayedundefinedDon’t go wrong
var newvalue=oldvalue;//ReferenceError: oldvalue is not defined
var newvalue=window.oldvalue;//newvalue=undefined
Copy the code

What are the common attributes and methods of a BOM as a browser object?

Location object
location.href Returns or sets the URL of the current document
location.hash Return the content after URL#, or null if no # is present
Location.host (back to www.xipengheng.cn) Returns the domain name portion of the URL.
location.reload() This means reloading the page from the server
location.reload(true) Regardless of the modification date, the document is redownloaded directly from the server, bypassing the cache
The history object
History. The go (num) Specify the number of pages forward or backward
History. The back () A back page
History. The forward () On a page
The Navigator object
navigator.userAgent — Returns a string representation of the user agent header (that is, a string containing browser version information, etc.)
navigator.cookieEnabled Returns whether the browser supports (enables) cookies

Three common browser dialogs

The first is the alert() method
  • This is one of the most common methods,alert()It takes a string and presents it to the user as a warning window that conveys information only to be viewed and closed.
The second: confirm() method

This is a dialog similar to the warning window in that it contains both confirm and cancel buttons and can interact with the user. When the user clicks confirm, this method returns a Boolean value of true, and the same cancel button returns a Boolean value of false.

/* The return value of this method can tell the user's wishes */   
   if (confirm('Please confirm code verification')) {
        alert('confirm')}else{
        alert('cancel')}Copy the code
  • Because the confirm() method returns a Boolean, there are many extended uses, such as whether forms should be submitted or links should be jumped;
   <a href="http://www.baidu.com" onclick="Return Confirm (' Need to use Baidu? ')"> baidu < / a >Copy the code

If you click “Confirm” in the popup window, it will jump to Baidu. Click “Cancel” because Confirm () will return false, so it will cancel the default jump link operation. (Same with forms)

The third: prompt() method

  • The effect of this method is a prompt box that prompts the user to enter some text. This method can pass two parameters, one is the prompt text to display to the user, and the other is the pre-typed text in the text input field.
  prompt('Please enter your account name'.'poo')
Copy the code

  • Dialogs with different functions are also easy to interact with users.