JS Note--bom Programming

1.window objects

the core object of the BOM is window, which represents an instance of the browser. In the browser, the Window object has a dual role. It is both an interface for accessing the browser window via JS and the global object specified by ECMAScript. So any object, variable, and function defined in the Web page takes window as its global object. 1. Global scope

All variables declared in the global scope, the function will program the properties and methods of the Window object. However, there is a difference between defining global variables and defining properties directly on the Window object: Global variables cannot be deleted by the delete operator, but properties defined directly on the Window object can.

var name = "Zhangsan"; window.color = "Red"; Console.log (delete window.name);//fasle console.log (delete window.color);// True

All true in Chrome

Note: Attempting to access an undeclared variable throws a wrong one, but with the Window object lookup, you know whether a given variable exists that might not be declared.

var newvalue = OldValue;  Error var newValue1 = Window.oldvalue;console.log (newValue1); Undefined

2. Window relationship and framework

If the page contains frames, each frame has its own window object and is saved in the Frames collection. The corresponding Window object can be accessed by a numeric index (starting at 0, left to right, top to bottom), or by the frame name. Each Window object has a Name property that contains the names of the frames.

<frameset rows= "160,*" ><frame src= "top.html" name= "Topframe" ><frameset cols= "50%,50%" ><frame Src= "left.html" name= "Leftframe" ><frame src= "right.html" name= "Rightframe" ></frameset></ Frameset>

window.frames["Topframe"]

top.frames["Topframe"]

The top object always points to the highest (outer) layer of the frame, which is the browser window.

The Parent object always points to the immediate upper frame of the current frame. In some cases, the parent may be equal to top

Note: Unless the top-level window is opened through window.open (), the Name property of the Window object does not contain any values.

Self object: Always point to window;self and window objects can be used interchangeably. (The purpose of introducing the Self object is only to correspond to top and parent, not to include other values)

all of these properties are properties of the Window object and can be accessed through window.parent,window.top.

Note: In the case of frames, there are multiple global objects in the browser. The global variables defined in each frame automatically become the properties of the Window object in the frame. Because each Window object contains a constructor of the native type, each frame has its own constructor, which corresponds to one by one, but not equal. such as: Top. object is not equal to top.frames[0]. Object. This issue affects the use of the instanceof operator for objects that are passed across frames.

3. Window Position

Ie,safari,opera and chrome provide  screenleft and Screentop properties. Firefox provides Screenx and Screeny properties. Gets the left and top positions of the window across the browser.  

var LeftPos = (typeof Window.screenleft = =" Number ")? Window.screenleft:window.screenx;var Toppos = (typeof Window.screentop = = "Number")? Window.screentop:window.screeny;console.log (leftpos+ "" +toppos); 

Adjust window position and size

window.moveto (0,0);//window moved to upper left corner of Screen Window.moveby (0,100);// The window moves down 100 pixels window.resizeto (100,100);//Resize Window Window.resizeby (100,50);//adjust to 200*150 

4. Navigating and opening Windows

var topframe = window.open ("top.html", "Topframe", "height=400,width=300,top=10,left=20"); Console.log (topframe); Topframe.close (); 

5. Intermittent call and timeout call

JS is a single-threaded language, but allows you to schedule code to execute at specific times by setting time-outs and intermittent times. The former executes the code after the specified time, which is performed once every specified time.

v
 AR id = setTimeout (function () {///1 seconds to execute alert ("hehe");},1000); cleartimeout (ID); 

The second parameter represents the number of milliseconds to wait , but the code specified after that time is not necessarily executed. JS is an interpreter for a single-threaded program, so only a piece of code can be executed within a certain amount of time. To control the code to execute, there is a JavaScript task queue. These tasks will be executed in the order in which they were added to the queue. SetTimeout () indicates that the task is added to the execution queue after a specified time. If the queue is empty, it executes immediately, and if the queue is not empty, wait until the previous code has finished executing. The
method returns a numeric ID that represents the timeout call. It can be used to cancel a timeout call. The Cleartimeout () method cancels the timeout call.

var num = 0;var max = 10;var intervalid = null;function incrementnumber () {num++;if (num = = max) {clearinterval (intervalid); c Onsole.log ("Done");}} Intervalid = SetInterval (incrementnumber,500);

Using settimeout () to implement intermittent calls

var num = 0;var max = 10;var intervalid = null;function incremen Tnumber () {num++;if (num < max) {console.log (num); setTimeout (incrementnumber,500);} Else{console.log ("Done");}}
 Intervalid = SetTimeout (incrementnumber,500); 

When using a timeout call, you do not need to trace the timeout call ID, because after each code execution, if another timeout call is no longer set, The call will stop. It is generally thought that using a timeout call to simulate intermittent calls is the best mode. Because the latter intermittent call may start before the end of the previous intermittent call, it is best not to use intermittent calls in order to avoid this.

6. System dialog Box

The

browser can call the System dialog box to display a message to the user via the alert (), confirm (), and Prompt () methods. The System dialog box does not have a relationship with the Web page that is displayed in the browser, nor does it contain HTML. Their appearance is determined by the operating system and browser settings, not the CSS. and the dialog boxes that are opened by these methods are both synchronous and modal. That is, the code stops executing when the dialog box is displayed, and the code returns to execution when the dialog box is turned off.

var flag = Confirm ("Is you sure?"); Console.log (flag); Console.log (Prompt ("name", "Zhangsan"));

prompt () The method returns null if the click is canceled or if no click is OK but the dialog box is closed by other means.

2.location objects

Location is one of the most useful BOM objects, It provides information about the documents that are loaded in the current window, and provides some navigational features。 The Location object is a very special object because it is both a property of the Window object and a property of the Document object; in other words, window.location and document.location refer to the same object. The use of a Location object does not only manifest itself in the information that holds the current document, It also behaves as if it resolves the URL to a separate fragment, allowing developers to access these fragments through different properties. Hash "#contents" Returns the hash (#后跟零或多个字符) in the URL and returns an empty string if the URL does not contain a hash

Console.log (Location.hash) Console.log (location.host);//server name and port number Console.log (location.hostname);// Server name Console.log (location.href);//Complete url,location.tostring () Console.log (location.pathname);// The directory and file name Console.log (location.port) in the URL, and the port number specified in//url if no empty string "" is returned. Console.log (Location.protocol);//Returns the protocol used by the page. HTTP or Httpsconsole.log (location.search); Return everything from? To the end of the URL

1. Query string parameters

Although most of the information to the location object can be accessed through the properties above. But there is no way to access each of these query string parameters individually.

function Getquerystringargs () {//Get query parameters? After value var qs = location.search.length>0?location.search.substring (1): ""; args = {};//Parameter object//gets each parameter var items = Qs.length?qs.split ("&"): [];//iterates through each item Items.foreach (function (item) {if ( Item.length) {var keyValue = item.split ("="); var name = decodeURIComponent (keyvalue[0]); var value = decodeURIComponent (k EYVALUE[1]); if (name.length) {Args[name] = value;}} }); return args;} Console.log (Getquerystringargs ());

2. Position Operation

The location object can be used in many ways to change the browser's position. The first and most common way is to use the Assign () method and pass a URL to it.

Location.assign ("http://www.baidu.com"); window.location = "http://www.baidu.com";//called Location.assign () Location.href = "http://www.baidu.com";

Change the URL by setting other property values for the Location object Hash,search,hostname,pathname and port.

A new record is generated in the browser history after the modification, so the user navigates to the previous page by clicking the Back button. You can use the Replace () method to disable this behavior. This method accepts only one parameter, which is the URL to navigate to, and results in a change in the browser location, but does not generate a new record in the history. After calling the replace () method, you cannot go back to the previous page.

Reload () Method: Reloads the currently displayed page. If you do not pass any parameters, the page reloads in the most efficient way. That is, if the page has not changed since the last request, the page will reload from the browser cache. If you want to force a reload from the server, you need to pass the parameter true for the method as follows.

Location.reload ();   Reload, it is possible to re-load location.reload (TRUE) in the browser cache;  Reload (load from server)

Code that is located after the reload () call may not be executed (depending on factors such as network latency or system resources), it is a good idea to put reload () on the last side of the code.

3.navigator objects

Detecting whether a particular plug-in is installed in the browser is one of the most common test routines. For non-IE browsers, you can use the plugins array to achieve this purpose. Array properties: Name: Plugin name Description: Plugin description filename: plugin filename Length: Number of MIME types processed by the plug-in the general Name property contains all the information necessary to detect the plug-in. (detected by the Name property)

Detection plugin (invalid in IE) function Hasplugin (name) {name = Name.tolowercase (); for (var i =0;i<navigator.plugins.length;i++) {if ( Navigator.plugins[i].name.tolowercase (). IndexOf (name) >-1) {return true;}} return false;} Console.log (Hasplugin ("Flash")); Trueconsole.log (Hasplugin ("QuickTime"));//false

Each plug-in object itself is an array of MimeType objects that can be accessed through the square bracket syntax. Each MimeType object has 4 properties: The description that contains the MIME type description, the enabledplugin of the plug-in object, the string that represents the file name extension that corresponds to the MIME type suffixes, and the type that represents the full MIME type string.

4.screen objects

The screen object is basically used only to indicate the client's capabilities, including information about the display outside the browser window, such as pixel width and height.

Window.resizeto (Screen.availwidth,screen.availheight);

5.history objects

The

History object holds the historical record of the user's Internet access, from the moment the window is opened. Because history is a property of the Window object, each browser window, each tab page, and even each frame, has its own history object associated with a particular window object. For security reasons, developers have no way of knowing which URLs a user has browsed. However, the list of pages accessed by the user can be backwards and forwards.
Go (): Enables the user to jump freely in the history record.

Back one page history.go (-1);//forward one page history.go (1);//forward two pages history.go (2);

jumps to the first position in the history that contains the string, possibly backwards or forwards, depending on which location is closest. If this string is not included in the history, nothing is done.

History.go ("Baidu"); History.back (); History.forward ();

The

history object also has a length property that holds the number of records, and if 0, indicates that this is the first open page.

if (History.length = = 0) {     //This is the first open page}

JS Note--bom programming