JavaScript external objects

Source: Internet
Author: User



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

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.