the 1.Window object is the primary access point for all client JavaScript features and APIs.
An important property in the Window object is document, which references the Document object.
A JavaScript program can traverse and manage documents through the document object and the element objects it contains.
JavaScript in 2.URL
Follow the URL followed by a javascript: protocol qualifier. The code inside is run as JavaScript code, separated by semicolons.
Such as:
<a href= "Javascript:alert (' ok! ')" ></a>
Because the <a> label usually scopes a hyperlink, it loads the new document. If you want to use and the URL does not overwrite the current document,
You can use the void operator to force a function call or assign an undefined value to an expression:
Such as:
<a href= "javascript:void window.open (' About:blank ');" ></a>
the implementation of 3.JavaScript is divided into two phases:
Phase one: Load the contents of the document and execute the code in the <sacript> element
Phase two: Document loading complete, and after script execution completes, enter this second phase.
This phase is asynchronous and is driven by events. In the event-driven phase, the Web browser invokes an event handler function.
4. If you want the program to correspond to an event, write a function called "event handler" or "Event listener" or "callback" ,
Then register the function so that he will call it when the event method occurs.
Most of the time in the browser, an object is passed to an event handler as a parameter, and the object's properties provide details of the event.
For example, the object that is passed to the Click event will have a property indicating which button of the mouse is clicked (in IE
, these event information is stored in the global event object instead of being passed to the handler function. )
The return value of an event handler is sometimes used to indicate whether the function has adequately handled the event, and to prevent the browser from performing various actions that it will do by default.
Some events are targeted at document elements, and they are often passed on the web to the document tree, a process called "bubbling."
If you want to register multiple event handlers for an event, you can use the AddEventListener () method to allow multiple listeners to be registered.
Such as:
Window.addeventlistener ("Load", function () {...},false);
This method is realized on the IE9. In IE8 and previous browsers, a similar method must be used, which is attachevent ()
Window.attachevent ("Load", function () {...});
the conditional annotation inside the 5.IE
In order to deal with the incompatibility of IE, it is necessary to encode ie in some way, which is one of the conditions introduced.
In my previous article there is a detailed description of:<!--[if IE 9]>....<!end if-->
6. Parse URL
The Location object is part of a Window object that can be accessed by the Window.location property
7. Browsing History
The window-exclusive history property refers to the history object of the Windows.
The history object is used to represent the browsing history of a window in the form of a list of documents and document states.
History.back ()//back
History.forward ()/forward
History.go (-2)//back two historical records
jquery has history plug-ins.
8. Browser and screen information
The Navigator property of the A:window object refers to the Navigator object that contains the browser manufacturer and version information.
Example:
<div id= "Example" ></div>
<script>
TXT = "<p>browser codename:" + Navigator.appcodename + "</p>";
txt+= "<p>browser Name:" + navigator.appname + "</p>";
txt+= "<p>browser Version:" + navigator.appversion + "</p>";
txt+= "<p>cookies Enabled:" + navigator.cookieenabled + "</p>";
txt+= "<p>platform:" + navigator.platform + "</p>";
txt+= "<p>user-agent Header:" + navigator.useragent + "</p>";
txt+= "<p>user-agent language:" + navigator.systemlanguage + "</p>";
document.getElementById ("Example"). Innerhtml=txt;
</script>
Warning: The information from the Navigator object is misleading and should not be used to detect browser versions because:
Navigator data can be changed by browser consumer
The browser could not report a new operating system later than the browser release
The screen property of the B:window object refers to the screen object.
9. dialog box
The Window object provides three ways to display a simple dialog box to the user
Alert ()
Comfirm ()
Prompt ()
These three methods will cause blocking.
There's a more complicated approach ShowModalDialog ()
JavaScript Window object
The Window:window object is the core of all objects in the BOM, and includes some window control functions in addition to the parent object of all objects in the BOM.
1, the Global Window object
Any global function or variable in JavaScript is a property of window.
<script type= "Text/javascript" >
var name= "Shake sacred Cattle";
document.write (window.name);
</script>
2, window and self object
The Self object is exactly the same as the Window object, and self is typically used to confirm that it is within the current form.
<script type= "Text/javascript" > document.write (window == self); Must be equal, always equal document.write (window. Top == window.self); Determines whether the current frame is the main frame </script>
The
window, self, and window.self are equivalent. The main objects of
3, window's Child
window are mainly as follows:
JavaScript Document Object
JavaScript Frames Objects
JavaScript history Objects
JavaScript Location Objects
JavaScript Navigator Objects
JavaScript screen objects
4, window function index (valid only for IE)
Form control function:
JavaScript moveby () Function: Move form x pixels horizontally from current position, move form y pixel vertically, X is negative, move form left, Y is negative, move form up.
JavaScript moveTo () function: Moves the top-left corner of the form to the (x,y) point relative to the upper-left corner of the screen, and moves the form out of the viewable area of the screen when negative numbers are used as arguments.
JavaScript Resizeby () function: Adjusts the width of w pixels relative to the current size of the form, and adjusts h pixels height. If the argument is negative, the form is narrowed, and the form is enlarged.
JavaScript Resizeto () function: Adjusts the width of the form to w pixels and height to h pixels.
<body> <input type= button " id=" BTN1 " value=" set the form fixed size first! " onclick=" Window.resizeto (500,500); " /> <input type= "button" id= "Btn2" value= "and then reduce the 10 pixel! " onclick=" Window.resizeby ( -10,-10); /> <input type= "button" id= "Btn2" value= "On! " onclick=" Window.moveby (0,-5); /> <input type= "button" id= "BTN2" value= "! " onclick=" Window.moveby (0, 5); /> <input type= "button" id= "Btn2" value= "Left!" " onclick=" Window.moveby ( -5, 0); /> <input type= "button" id= "btn2" value= "right! " onclick=" Window.moveby (5, 0); /> <input type= "button" id= "Btn2" value= "is 100 pixels to the left of the upper left corner, Top 200 pixel " onclick=" Window.moveto (100, 200); />;/body>
Form Scroll axis control function:
JavaScript Scrollto () function: If you have a scroll bar in a form, move the horizontal scroll bar to the position relative to the width of the form x pixels, and move the longitudinal scroll bar to the position of y pixel relative to the form's height.
JavaScript Scrollby () function: If you have a scroll bar, move the horizontal scroll bar to the position of x pixels relative to the current horizontal scroll bar (that is, move x pixels to the left), and move the longitudinal scroll bar to the position of y pixels relative to the current vertical scroll bar height (that is, move y pixels down).
Notice the difference, one is relative to the current window, and one is the position of the scroll bar quite now.
<div style= "height:150%; width:150%; Background-color: #ddd ">
<input type=" button "id=" BTN1 "value=" Move scroll bar! "Onclick=" Window.scrollto (100,100); "/>//equivalent to set absolute position
<input type=" button "id=" BTN1 "value=" Move scroll bar! "Onclick=" Window.scrollby (100,100); "/>//equals cumulative
</div>
Form Focus Control Function:
JavaScript focus () function: Get the form or space focused
JavaScript blur () function: causes a form or control to lose focus
<div>
<input type= "button" value= "gets Focus" onclick= "document.getElementById (' Testinput '). Focusing ()"/>< c1/> <input type= "button" value= "Loses focus" onclick= "document.getElementById (' Testinput '). blur ()"/> <input
Type= "Text" value= "text" id= "Testinput" onblur= "alert (' I have lost Focus ')"/>
</div>
New Form function:
JavaScript open () function: open (eject) a new form
JavaScript Close () function: Closing a form
JavaScript Opener Properties: You can communicate across forms by opener, but make sure that you are under the same domain name and that one form contains the opener of another form.
window.open (URL, name, features, replace);
Open function Parameter Description:
URL--the URL to load the form into;
Name--Creates a new form (also can be the value of the HTML target property, the target);
Features--a string representing the attributes of a form, separated by commas in each attribute of the string;
Replace--A Boolean value that indicates whether the newly loaded page replaces the currently loaded page, and this parameter is usually not specified.
An example of the Open method:
<a href= "2.html" target= "2" > Open Connection in New window </a>
<a href= "#" onclick= "window.open (' http://www.google.com ', ' 2 ');" > Open a new address on a connected page </a>
First open a page with a normal HTML link (target named Dreamdu), and then open another page using the Open function, the browser first looks for a form with a name of DREAMDU, and if so, loads the open address in the form.
The Set Open
window.open (' page.html ', ' newwindow ', ' height=100, width=400, top=0,left=0, Toolbar=no, Menubar=no, Scrollbars=no, Resizable=no,location=no, Status=no ')
Window method:
Method One: <body onload= "Openwin ()" > Browser pop-up window when reading the page;
Method Two: <body onunload= "Openwin ()" > Browser out of the page pop-up window;
Parameter name |
type |
Description |
Height |
Number |
Set the height of the form, not less than 100 |
Left |
Number |
Description creates the left coordinate of the form, not a negative value |
Location |
Boolean |
Whether the form displays the Address bar and the default value is no |
Resizable |
Boolean |
Whether the form allows resizing by dragging the edge, the default value is no |
Scrollable |
Boolean |
If the interior of the form is outside the window's viewable range, drag is allowed, and the default value is no |
Toolbar |
Boolean |
Whether the form displays a toolbar, and the default value is no |
Top |
Number |
Shows the top coordinates of the form being created and cannot be negative |
Status |
Boolean |
Does the form display a status bar with the default value no |
Width |
Number |
Create the width of the form, not less than 100 |
Each attribute in an attribute string is separated by commas, with no spaces allowed between each attribute.
When a new form is created, the Window.Open function returns the Window object for the new form, which allows you to control the form (move, resize, close).
Close function:
<input type= Button "value=" closes the form already open! "Onclick=" Window.close (); "/>
Self.close (), with the settimeout () can be implemented, open the window to the effect of timed shutdown.
dialog box functions:
JavaScript alert () Function: Pop-up message dialog (there is an OK button in the dialog box)
JavaScript confirm () Function: Pop-up message dialog box (contains an OK button and Cancel button in the dialog box)
JavaScript prompt () Function: Pop-up message dialog box (contains an OK button, Cancel button, and a text input box in the dialog box)
alert ();
Don't say.
Confirm (str);
The Confirm () Message dialog box is exclusive, which means that no other action can be performed until the user clicks the button on the dialog box.
if (confirm) (OK jump big?) ")"
{
alert ("Resolute hop Big");
}
else
{
alert ("Wretched dozen money");
}
The display is as follows:
Prompt (str1, str2);
function has two parameters
STR1-text that you want to appear in the message dialog box, cannot be modified
STR2--The contents of the text box, you can modify
var sresult=prompt ("Please enter your name below", "Shake Sacred Cow");
if (sresult!=null)
{
alert (Sresult + "has exceeded the Kill of God");
}
else
{
alert ("John Doe is beyond the Kill of God");
}
The display is as follows:
Time wait and interval function:
JavaScript settimeout () function
JavaScript cleartimeout () function
JavaScript setinterval () function
JavaScript clearinterval () function
1, settimeout (), cleartimeout () call the function after the specified time
Grammar:
SetTimeout (Fun,time); Fun: function body or function name, time specified in milliseconds.
Cleartimeout (ID); Cancels the code that the specified settimeout function will execute
settimeout (function () {
document.write ("trigger every 3 seconds");
}, 3000)//3 seconds after output
settimeout (FUN1, 5000); Output function
fun1 () {
document.write ("The method of the functions name is triggered after 5 seconds") after 5 seconds;
}
2, SetInterval (), clearinterval (value) repeatedly calls the function after the event specified at interval
Grammar:
SetInterval (fun1,time) Fun: function body or function name, time specified in milliseconds. Returns a value that is used to count the number of functions, the first is 1, and the second is 2, which indicates the SetInterval function.
The value returned by the Clearinterval (value) value:setinterval () function to stop the repetition of setinterval ().
var i = 0;
var h = setinterval (function () {
document.write ("3 seconds Output <br/>");
i++;
if (I >= 3) {
clearinterval (h);
document.write ("Stop Output");
}
, 3000);
Note that JavaScript is single-threaded, so the timing function is actually implemented by inserting the execution queue.
As in the following code:
function fn () {
settimeout (function () {alert (' Can you I/I/I? ');},1000);
while (true) {}
}
alert (); will never execute because the thread has been consumed by the dead loop.
Window.location Child Objects
Resolves a URL object location
The properties of the Location object are: Href,protocal,host,hostname,port,pathname,search,hash
document.write (location.href + "<br/>"); // http://localhost:4889/javascripttest.html
document.write (location.protocol + "<br/>"); // http: document.write (location.host + "<br/>"); // localhost:4889
document.write (location.hostname + "<br/>"); // localhost document.write (location.port + "<br/>"); // 4889 document.write (location.pathname + "<br/>"); // / Javascripttest.html &Nbsp; document.write (location.search + "line <br/>"); //http:// Localhost:4889/javascripttest.html?id=1&name= John If the path is this, the output ?id=1&name=%e5%bc%a0%e4%b8 %89 document.write (Location.hash); //http: //localhost : 4889/javascripttest.html#kk= hello? id=1&name= John If the path is this, the output #kk = hello? id=1&name= John
Load New document
Location.reload () reload page
Location.replace () This window loads a new document
Location.assign () This window loads the new document
location = "http://www.baidu.com"//jump to the specified URL
location = "search.html"//Relative Path jumps
location = "#top"//jumps to the top of the page
Browsing history
History () object's back () and forward () are the same as the browser's "backward" and "forward" features 。
History.go (-2); Back two history
Browser and screen information
navigator.appname web browser full name
navigator.appversion web browser manufacturer and version of the detailed string
navigator.useragent Client Most information
Navagator.platform the operating system where the browser is running
document.write ( navigator.useragent + "<br/>"); // mozilla/5.0 (windows nt 6.1) applewebkit/537.11 (Khtml, like gecko) chrome/23.0.1271.97 safari/537.11 document.write (navigator.appname + "<br/>"); //netscape document.write (navigator.appVersion + "<br/>"); //5.0 (windows nt 6.1) AppleWebKit/537.11 (khtml, Like gecko) chrome/23.0.1271.97 safari/537.11 document.write (Navigator.platform); //win32
The relationship of the window
parent = self Only the top-level window returns true
The parent and top properties allow the script to reference the ancestor of its form, which is typically created by the <iframe> element and can be used to get the top-level window.
5, Event Events Object
The two most useful actions: Block event bubbling. sometimes return false; This may work, however.
IE:
window.event.cancelBubble = true;//stop bubbling
window.event.returnValue = false;//The default behavior of blocking events
//firefox:
Event.preventdefault ()//Cancel the default behavior of the event
event.stoppropagation ();//prevent the propagation of events