Today is the 82nd day for Liu Xiaoai to learn Java by herself.
Without further ado, let’s move on to the front end:
What is BOM?
Full name browser Object model.
For this kind of conceptual knowledge point, my personal habit is to study the actual example first and then understand the concept.
Let’s start with a few common objects in browsers.
The window object
1 the dialog
There are three types of dialog boxes in the Window object:
① Alert box: window.alert()
I was alert yesterday.
Is to serve as a warning to the user, no return value, only a confirm button.
② Prompt box: window.prompt();
Prompt means prompt. Translating as a hint doesn’t seem very accurate because it requires user input.
And there are two buttons to confirm and cancel:
If you click OK: returns the value entered in the prompt box.
If cancel is clicked: returns null.
Window. Confirm ()
Confirm D.
If you click OK: returns true.
If cancel is clicked: returns false.
2 the timer
In the Window object, there are two kinds of timers:
(1) the setInterval
Interval means that it is executed at intervals.
There are three parameters: function name (test), interval time 5000 (ms), function parameter (” Sun Feiliang “)
Therefore, every 5s, call the function test, test execution is the pop-up “Sun Feiliang” warning content.
In addition, there is a way to set only two parameters: the first parameter contains the parameters of the function.
(2) the setTimeout
Timeout: execute after a certain amount of time has expired.
The difference between Interval and Interval is that an Interval executes continuously in a loop, whereas a Timeout executes only once.
Now that you have a timer, what if you want to stop it?
There is a timer clearing function:
③ Clear timer
ClearInterval, which stands for clearing a timer like Interval, takes one parameter, which is the corresponding variable in the timer.
When clearInterval is executed, its corresponding timer will stop and no longer run.
Similarly, a claerTimeout is a timer that clears a Timeout.
That explains the three dialogs and two timers for the Window object.
Location object
What does location mean? Let’s take a test:
If the location message is displayed, you will find that it describes the current page address, which is the same as the address bar in the browser.
The location is where you live.
It has two important properties:
1 the href
This word has been used many times, meaning hyperlink.
Then in the back of the corresponding hyperlink address, you can achieve the effect of skipping address corresponding to the page.
(2) the reload
Reload means to reload,
Refresh is often touched, that is, reload the page again.
The history object
There is a very useful feature in the browser: history.
History, is the need to have a browsing record will have effect, just entered the first page, there is no history.
(1) 01 page
Click on the first next page (a hyperlink) to go to page 02, so you have a history, and then go back to page 01.
The browser has a forward arrow that goes back to page 02, using History to achieve the same effect.
(2) 02 page
There is a backward arrow on the browser that goes back to page 01, and you can use History to achieve the same effect.
Then how to achieve it with code?
Since history is needed, that one page is certainly not enough, need to write two pages of code:
①01 page code writing
When entering the 01 page, there is no history record, so use an A tag to set a hyperlink to jump to the 02 page.
Once you have a history, you can use the History object.
I’m going to go to the next page.
Click the “Next page” button to trigger the click event, and history calls the forward method to return to page 02.
②02 page code writing
Back to the page. Back to the page
Clicking on the “Previous Page” button triggers the click event, and History calls the back method to return to page 01.
In addition, there is a way to realize the next page of the previous page.
③ Go () on the history object
At first I thought the Go method would do this: jump directly to page 1, 2, 3, and N.
Later I realized that I was really naive…
The go method takes one argument, what does it mean?
- If it’s go(-1), it’s back(), go back to the previous page.
- If it’s go(1), that’s the same thing as forward, go back to the next page.
It is based on the current page, -1 is the previous page, 1 is the next page.
Whether 2 will be as effective as the next page remains to be seen, and it will take some time to discover.
The above is the description of the three common objects in BOM. Of course, there are not only these three objects, but the time is limited.
So to sum it up:
A BOM consists of multiple objects (including the three above).
When you open a browser, a BOM refers to the browser window, which can be interpreted as the three objects described above.
The Window object representing the browser Window is the top object of the BOM, and all other objects are children of this object.
The last
Thanks for watching.
If you can, please give it a thumbs up. Thank you.