On _javascript techniques of JavaScript external objects

Window Browser:

-Location: Address
-History: History
-Document: Documents
-screen: Windows
-Navigator: Help

> 1. External object is the API provided by the browser--**bom**

> 2. These objects are designed and developed by a browser developer, as defined by the Consortium

> 3. These objects are divided into 2 parts, where the BOM contains the DOM

> 4. We can access these objects through 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 browsers.

> 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 to display the contents of the STR string
-Press the OK button to return true, and other actions return false

> Case

 Call the properties or methods of the Window object to omit the window.
 1. Pop-up box
  //1) pop-up
  function F1 () {
   alert ("Hello, Little Junzi");
  }
  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 do you eat?") ");
   Click Cancel to return null
   Console.log (p);
  }

# # 2. Timer

-More for the web dynamic clock, the production countdown, the effect of the happy lights

-Periodic clock

-Execute code at a certain interval and cycle

- setInterval(exp,time);

-Returns the timer object that has been started

-Stop timer to start

- clearInterval(tID)

-TID: Timer object started

-Disposable Clock

-Executes the code after a set interval, rather than executing it after the function is called

 - setTimeout(exp,time);

-Stop timer to start

- clearTimeout(tID)

-TID: Timer object started

> Case

1) Periodic timer

  Perform a function every n milliseconds, repeatedly until the stop condition position is reached.
  function F4 () {
   var n = 5;
   Start timer, return the timer ID, to stop the timer 
   var id = setinterval (function () {
    console.log (n); 
    Switch (n%4) {case
     0:btn1 ();
     Case 3:BTN2 ();
     Case 2:btn3 ();
     Case 1:btn4 (); 
     Default:;
    }
    n++;
   },100);
   Starting the timer is equivalent to starting a spur, the current method F4 equivalent to the main thread.
   //2 threads execute concurrently, do not wait with each other,
   //So the main thread executes immediately after the spur line is started, but the spur process needs to execute the
   console.log ("Hop") after 1 seconds;
  }

2) Disposable Timer

  Deferred n milliseconds to perform a function, automatically stop after execution,
  //or manually stop the Var ID before it is executed
 ;
 function f5 () {
  //start timer, and if you want to stop the timer before it is executed, you need to use ID
  id = settimeout (function () {
   console.log ("Ding ding Ding");
   F4 ();
  },3000);
 function f6 () {
  //If the timer has been executed, the cancellation is invalid; If the timer has not yet been executed, you can cancel the
  cleartimeout (ID);
  Console.log ("Stopped!") ");
 }

# # 3. Common Properties

-Screen Object

-Contains information about the client display screen
-often used to get the resolution and color of the screen
-Common Properties:
-Width Height
-Availwidth availheight

-History Object

-Contains URLs that the user has visited

-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 currently browsed URLs

-href attribute: The address of the URL that the current window is browsing

-Method

-Reload (): Reload current URL, equivalent to refresh

-Navigator Object

-Contains information about the browser

-often used to get information about the client browser and operating system

> Case

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: Gets the wide-high
 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

-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 </b> node </p>
      <p id= "P2" >2.<b> query </b> node </p>
      <p id= "P3" >3.<b> additions </b> nodes </p>
      var p1 = document.getElementById ("P1");
      Console.log (p1.nodename);
      Console.log (P1.nodetype);

-Read and write the contents of the node

-Double label in the middle of the text is called content, any double tags have content
-InnerHTML: Include child label information
-InnerText: Ignore child labels

        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 are available:
-Input
-Select
-TextArea

The above is the entire content of this article, I hope the content of this article for everyone's study or work can bring some help, if there are questions you can message exchange, but also hope that a lot of support cloud Habitat community!