Introduction to external objects of Javascript

This article mainly introduces external Javascript objects and lists specific examples. Easy to understand. If you need it, you can check it out.

Window Browser:

-Location: Address-history: history-Document: Document-screen: window-navigator: Help

> 1. The external object is the API provided by the browser -- ** BOM **

> 2. These objects are designed and developed by browser developers according to w3c.

> 3. These objects are divided into two parts. The BOM contains the DOM

> 4. We can access these objects through js.

# External Object

> BOM (Browser Object Model)

Browser object model, used to access and manipulate browser windows, is the ability of JavaScript to communicate with the browser.

> DOM (Document Object Model)

Document Object Model, used to operate documents.

#1. Dialog Box

-Alert (str)
-The prompt dialog box displays the str string content.

-Confirm (str)
-In the confirmation dialog box, the str string content is displayed.
-Press "OK" to return true. Otherwise, return false.

> Case studies

// Call the properties or methods of the window object. You can omit "window. "// 1. pop-up box // 1) function f1 () {alert ("Hello, xiaojunzi");} // 2) check box function f2 () {var v = confirm ("have you eaten? "); // Click OK to return true; otherwise, false console is returned. log (v) ;}// 3) input box function f3 () {var p = prompt ("what do you eat? "); // Click Cancel to return null console. log (p );}

#2. Timer

-It is mostly used for webpage dynamic clock, countdown, and marquee Effect

-Periodic clock

-The code is executed at a certain interval and repeats cyclically.

-SetInterval (exp, time );

-Returns the started timer object.

-Stop the start timer.

-ClearInterval (tID)

-TID: the timer object to be started.

-One-time clock

-Run the code after a set interval, instead of after the function is called.

-SetTimeout (exp, time );

-Stop the start timer.

-ClearTimeout (tID)

-TID: the timer object to be started.

> Case studies

1) Periodic Timer

// Execute the pause function every N milliseconds until the stop condition is reached. Function f4 () {var n = 5; // start the timer, returns the ID of the timer, used to stop the timer var id = setInterval (function () {console. log (n); switch (n % 4) {case 0: btn1 (); break; case 3: btn2 (); break; case 2: btn3 (); break; case 1: btn4 (); break; default:;} n ++;}, 100); // The timer is equivalent to starting a thread, the current method f4 is equivalent to the main thread. // Two threads run concurrently without waiting for each other. // Therefore, the main thread executes the thread down immediately after starting the support thread, but the support thread executes the console only after one second. log ("pop ");}

2) One-time Timer

// Postpone the execution of the timer function for N milliseconds. The callback function is automatically stopped after execution. // You can also manually stop the var id before execution. function f5 () {// start the timer, to stop a timer before it is executed, use id = setTimeout (function () {console. log ("ding"); f4 () ;}, 3000) ;}function f6 () {// If the timer has been executed, the cancellation is invalid. If the timer has not been executed, you can cancel clearTimeout (id); console. log ("stopped! ");}

#3. common attributes

-Screen Object

-Contains information about the client display screen.
-It is often used to obtain screen resolutions and colors.
-Common attributes:
-Width height
-AvailWidth availHeight

-History Object

-Contains the URL accessed by the user

-Length attribute: Number of URLs in the browser history list

-Method:

-Back ();
-Forwird ();

-Location object

-Contains information about the current URL

-It is often used to obtain and change the current browsing URL.

-Href attribute: Address of the URL being viewed in the current window

-Method

-Reload (): reload the current website, which is equivalent to refreshing

-Navigator object

-Contains information about browsers.

-It is often used to obtain information about Client browsers and operating systems.

> Case studies

// Location object function f1 () {var B = confirm ("Do you really want to leave me? "); If (B) {location. href = "http://www.tmooc.cn" ;}/// refresh page function f2 () {location. reload ();} // screen Object: Get the screen width and height function f3 () {console. log (screen. width); console. log (screen. height); console. log (screen. availWidth); console. log (screen. availHeight);} // history object function f4 () {history. forward ();} // navigator object function f5 () {console. log (navigator. userAgent );}

# DOM

### DOM operations

-Search nodes
-Read node Information
-Modify node Information
-Create node Information
-Delete A node

### Read and modify

-Node Information

-NodeName: node name
-NodeType: Node Type

-(1) read nodes

-Read node name, type

1.Read/writeNode
2.QueryNode
3.Add/deleteNode
Var p1 = document. getElementById ("p1"); console. log (p1.nodeName); console. log (p1.nodeType );

-Read and Write node content

-The text in the middle of the dual tag is called content. Any dual tag has content.
-InnerHTML: contains sub-Tag Information
-InnerText: Ignore sub-tags

Console. log (p1.innerHTML); p1.innerHTML = "1.Read/writeNode "; console. log (p1.innerText );

-Read/write node Value

-The data in the Form Control is called a value. Only the following form control has a value:
-Input
-Select
-Textarea

The above is all the content of this article. I hope the content of this article will help you in your study or work. If you have any questions, you can leave a message and share your thoughts. At the same time, I also hope to support PHP!

For more information about the external objects of Javascript, see the PHP Chinese website!