Home > Developer > JavaScript
This article was originally published in the blog Park and continues to update the front-end series on GitHub. Follow me on GitHub, get started and go to the advanced front.
Introduction to the BOM the composition of JavaScriptThe following is the text.
The JavaScript base is divided into three parts:
The grammatical standard of ecmascript:javascript. Includes variables, expressions, operators, functions, if statements, for statements, and so on.
DOM: The Document Object model, an API that operates on elements on a Web page . For example, let the box move, color change, Carousel diagram and so on.
BOM: Browser object model, API for manipulating browser-part functionality . For example, let the browser automatically scroll.
Bom:browser object model.
Structure diagram of BOM:
It can also be seen from:
The Window object is the top-level (core) object of the BOM , all of which are extended by it or are called child objects of the window.
Dom the more part of the BOM.
Window object:
The Window object is the top-level object in JavaScript .
Global variables, custom functions are also properties and methods of the Window object.
You can omit window when properties and method calls under the Window object.
Here 's a look at the common built-in methods and built-in objects for the BOM .
Popup System dialog boxFor example alert(1) , window.alert(1) it is shorthand, because it is a sub-method of window.
There are three system dialog boxes:
Open window, close windowalert(); //不同浏览器中的外观是不一样的 confirm(); //兼容不好 prompt(); //不推荐使用
1. Open the window:
window.open(url,target,param)
Parameter explanation:
URL: The address to open.
Target: The location of the new window. Can be: _blank , _self , _parent parent frame.
Param: Some settings for the new window.
Return value: The handle to the new window.
param This parameter, you can fill in a variety of parameters (), such as:
Name: Names of new windows, can be empty
Featurse: Property control string, in which various properties of the window are controlled, separated by commas.
fullscreen= {yes/no/1/0} is full screen, default No
channelmode= {yes/no/1/0} shows Channel bar, default No
toolbar= {yes/no/1/0} displays toolbars, default No
location= {yes/no/1/0} displays the address bar, default No. (Some browsers do not necessarily support)
directories = {yes/no/1/0} whether the turn button is displayed, the default no
status= {yes/no/1/0} whether the window status bar is displayed, default no
menubar= {yes/no/1/0} whether the menu is displayed, default no
scrollbars= {yes/no/1/0} shows scroll bars, default Yes
resizable= {yes/no/1/0} whether the window is resizable, default no
Width=number window width (pixel units)
Height=number window height (pixel units)
Top=number window distance from top of screen (pixel units)
Left=number window distance from the left side of the screen (pixel units)
The arguments are separated by commas, but we'd better put them all together in JSON.
2. Close the window: Window.close ()
Examples of codes (1) and (2):
<! DOCTYPEHtml>lang="en"> <metacharset="UTF-8"> <title></title><body><ahref="javascript:;">Click me to open a new page</a><ahref="javascript:;">Click I close this page</a><script> //New Window = window.open (address, whether open new window, new window of various parameters); varA1= Document.getElementsByTagName("a")[0]; varA2= Document.getElementsByTagName("a")[1]; A1.onclick = function(){//Example 1:window.open ("http://www.jd.com", "_blank"); varJson= { "Name": "HelloWorld", "fullscreen": "No", "Location": "No", "width": "100px", "Height": "100px", "Top": "100px", "left": "100px" }; window.Open("Http://www.baidu.com", "_blank",Json; //Example 2 } //close this page A2.onclick = function(){ window.Close(); }</script></body></html>3, new window Related:
New window. MoveTo (5,5)
New window. Moveby ()
New window. Resizeto ()
Window.resizeby ()
code example:
Location Objectvar=window.open("demo.html","_blank", json); newWin.moveTo(500,500);
window.locationcan be abbreviated as location. Location is equivalent to the browser address bar, which resolves a URL into a separate fragment.
href: Jump
Hash returns the contents of the # after the URL, containing #
Host hostname, including port
Hostname Host Name
Pathname the path part of the URL
The Protocol protocol is typically HTTP, https
Search query string
location.href attribute Examples :
Example 1: Jump When you click on a box.
<body><div>Smyhvae</div><script> varDiv= Document.getElementsByTagName("Div")[0]; Div.onclick = function(){ Location.href = "Http://www.baidu.com"; //Click the div to jump to the specified link //window.open ("http://www.baidu.com", "_blank"); Mode two }</script></body>Example 2:5 seconds after the automatic jump to Baidu .
Sometimes, when we visit a non-existent page, we are prompted to automatically jump to the specified page after 5 seconds, then we can use the location. Example:
Method of the Location object<script> setTimeout(function{ location.href="http://www.baidu.com"; },5000);</script>
Setting Location.href will call assign (). Generally use Location.href to jump between pages.
Location.replace (): Replaces the address of the browser address bar and is not recorded in history
Location.reload (): Reload
Some of the properties of Window.navigator can obtain some information about the client.
UserAgent: System, browser)
Platform: Browser-supported system, Win/mac/linux
Example:
console.log(navigator.userAgent); console.log(navigator.platform);
The effect is as follows:
History Object1. Historical records Management
2. Back:
History.back ()
History.go (-1): 0 is Refresh
3. Forward:
History.forward ()
History.go (1)
Not much to use. Because of the buttons in the browser that already have their own features:
My public number.Want to learn soft skills Beyond the code ? You may wish to follow my public number: Life team (ID: vitateam ).
Sweep, you will discover another new world, and it will be a beautiful surprise:
JavaScript basics: Common built-in methods and built-in objects for BOMs
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
