Window Browser:
-Location: Address
-History: Historical
-Document: Documentation
-Screen: Window
-Navigator: Help
> 1. The external object is the browser-provided API--**bom**
> 2. These objects are defined by the Internet Explorer and developed by the browser developer
> 3. These objects are divided into 2 parts, where the BOM contains the DOM
> 4. We can access these objects via JS
# External objects
> BOM (Browser Object Model)
The browser object model, which is used to access and manipulate browser windows, is JavaScript's ability to talk to the browser.
> DOM (Document Object Model)
Document Object model, which is used to manipulate documents.
# #1. dialog box
-Alert (str)
-Prompt dialog box to display the contents of the STR string
-Confirm (STR)
-Confirmation dialog box that displays the contents of the STR string
-Press "OK" button to return true, other actions return false
> Cases
Call the properties or methods of the Window object to omit window.
1. Popup box
1) Popup Box
Function F1 () {
Alert ("Hello, Little Zunko");
}
2) Confirm Box
function F2 () {
var v = confirm ("Did you eat it?") ");
Click OK to return True, otherwise return false
Console.log (v);
}
3) Input Box
Function F3 () {
var p = prompt ("What did you eat?") ");
Click Cancel to return null
Console.log (P);
}
# # 2. Timer
-More for Web dynamic clock, production countdown, marquee effect
-Periodic clocks
-Execute code at a certain interval, cycle through
-SetInterval (Exp,time);
-Returns the timer object that has been started
-Stop timer to start
-Clearinterval (TID)
-TID: Timer object to start
-Disposable Clock
-Executes the code after a set interval, not after the function is called
-SetTimeout (Exp,time);
-Stop timer to start
-Cleartimeout (TID)
-TID: Timer object to start
> Cases
1) Periodic Timers//executes the function once every n milliseconds and executes repeatedly until the stop condition position is reached. functionf4 () {varn = 5; //start timer, return the timer ID, used to stop the timer varid = setinterval (function() {console.log (n); Switch(n%4){ Case0:BTN1 (); Break; Case3:BTN2 (); Break; Case2:btn3 (); Break; Case1:btn4 (); Break; default: ; } N++; },100); //starting the timer is equivalent to starting a regional path, the current method F4 equivalent to the main thread. //2 threads executing concurrently, not waiting for each other, //as a result, the main thread executes immediately after the feeder is started, and the feeder takes 1 seconds to execute.Console.log ("Jumping"); } 2) Disposable Timers//Postpone n milliseconds to execute function once, after execution, automatically stop, //You can also stop manually before it is executed varID; functionf5 () {//Start the timer, if you want to stop it before the timer is executed, you need to use the IDid = setTimeout (function() {Console.log ("Ding ding Ding"); F4 (); },3000); } functionf6 () {//If the timer has been executed, the cancellation is invalid, and if the timer has not been executed, it can be canceled.cleartimeout (ID); Console.log ("Has stopped! "); }
# # 3. Common Properties
-Screen Object
-Contains information about the client display screen
-often used to get the screen resolution and color
-Common Properties:
-Width Height
-Availwidth availheight
-History Object
-Contains URLs that have been visited by the user
-Length property: Number of URLs in the browser history list
Method
-Back ();
-Forwird ();
-Location Object
-Contains information about the current URL
-often used to get and change the current browsing URL
-href attribute: The address of the URL in which the current window is being browsed
-Method
-Reload (): Reload current URL, equivalent to refresh
-Navigator Object
-Contains information about the browser
-Information commonly used to obtain the client browser and operating system
> Cases
//Location Object functionF1 () {varb = Confirm ("Are you really going to leave me?" "); if(b) {location.href= "http://www.tmooc.cn"; } } //Refresh Page functionF2 () {location.reload (); } //Screen object: Get the width height functionF3 () {console.log (screen.width); Console.log (Screen.height); Console.log (Screen.availwidth); Console.log (Screen.availheight); } //History Object functionf4 () {History.forward (); } //Navigator Object functionf5 () {console.log (navigator.useragent); }
# # DOM
# # # DOM Operations
-Find nodes
-Read node information
-Modify node information
-Create node information
-delete Node
# # Read, modify
-Node Information
-NodeName: Node name
-NodeType: Node type
-(1) Read node
-Read the name of the node, type
<p id= "P1" >1.<b> read/write </b> nodes </p>
<p id= "P2" >2.<b> queries </b> nodes </p>
<p id= "P3" >3.<b> adding </b> deleting nodes </p>
var P1 = document.getElementById ("P1");
Console.log (P1.nodename);
Console.log (P1.nodetype);
-Read and write the contents of the node
-The text in the middle of the double label is called content, and any double label has content
-InnerHTML: Includes child tag information
-InnerText: Ignore child tags
Console.log (p1.innerhtml);
P1.innerhtml= "1.<i> read/write </i> node";
Console.log (P1.innertext);
-Read and Write node values
-The data in the form control is called a value, and only the following form controls have values:
-Input
-Select
-TextArea
JavaScript external objects