A brief introduction to Javascript's external objects

Window browser:

- location：地址
- history：历史
- Document：文档
- screen：窗口
- navigator：帮助

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

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

> 3. These objects are divided into 2 parts, among which BOM contains DOM

> 4. We can access these objects through js

# External objects

> BOM (Browser Object Model)

Browser Object Model , used to access and manipulate browser windows, is JavaScript that has the ability to talk to the browser.

> DOM (Document Object Model)

Document Object Model, used to operate documents.

##1. Dialog box

- alert(str)
- Prompt dialog box, displaying the content of str string

- confirm(str)
- Confirmation dialog box, display the content of str string
- Press the "OK" button to return true, other operations return false

>Case

//调用window对象的属性或方法，可以省略"window."
//1.弹出框
 //1)弹出框
 function f1(){
  alert("你好，小俊子");
 }
 //2)确认框
 function f2(){
  var v = confirm("你吃了吗？");
  //点击确定返回true,否则返回false
  console.log(v);
 }
 //3)输入框
 function f3(){
  var p = prompt("你吃的什么？");
  //点击取消返回null
  console.log(p);
 }

## 2. Timer

- Mostly used for dynamic clocks on web pages, making countdowns, and marquee effects

- Periodic clock

- With a certain Execute the code at intervals, in a loop

- setInterval(exp,time);

- Return the started timer object

- Stop the started timer

- clearInterval(tID)

- tID: started timer object

-One-time clock

- Execute code after a set time interval , instead of executing after the function is called

- setTimeout(exp,time);

- Stop the started timer

- clearTimeout(tID)

- tID: Started timer object

> Case

1) Periodic timer

//每隔N毫秒执行一次函数，反复执行，直到达到停止条件位置。
function f4(){
 var n = 5;
 //启动定时器，返回定时器的ID，用来停止定时器
 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);
 //启动定时器就相当于启动了一个支线程，当前方法f4相当于主线程。
 //2个线程并发执行，不互相等待，
 //因此主线程在启动完支线程后立刻向下执行，而支线程却需要在1秒后才执行
 console.log("蹦");
}

2) One-time timer

//推迟N毫秒执行一次函数，执行完之后，自动停止，
 //也可以在未执行前手动停止
var id;
function f5(){
 //启动定时器,若想在未执行定时器前就将它停止，需要使用id
 id = setTimeout(function(){
  console.log("叮叮叮");
  f4();
 },3000);
}
function f6(){
 //若定时器已经执行，则取消无效; 若定时器还未执行，则可以取消
 clearTimeout(id);
 console.log("已停止！");
}

# 3. Common attributes

- screen object

- Contains information about the client's display screen
- Commonly used to obtain the resolution and color of the screen
- Common properties:
- width height
- availWidth availHeight

- History object

- Contains URLs visited by the user

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

- Method:

- back();
- forwird();

- location object

- Contains information about the current URL

- Commonly used to obtain and change the current browsing URL

- href attribute: URL address being browsed in the current window

- Method

- reload(): Reload the current URL, equivalent to refreshing

- navigator object

- Contains information about the browser

- Commonly used to obtain information about the client browser and operating system

> Case

//Location对象
 function f1(){
  var b = confirm("你真的要离开我吗？");
  if(b){
   location.href = "http://www.tmooc.cn";
  }
 }
 //刷新页面
 function f2(){
  location.reload();
 }
 //screen 对象： 获取屏幕宽高
 function f3(){
  console.log(screen.width);
  console.log(screen.height);
  console.log(screen.availWidth);
  console.log(screen.availHeight);
 }
 //history对象
 function f4(){
  history.forward();
 }
 //navigator对象
 function f5(){
  console.log(navigator.userAgent);
 }

## DOM

DOM operation

-Find node
-Read node information
- Modify node information
- Create node information

- Delete node

Read and modify

- Node information

- nodeName: node name

- nodeType: node type

- (1) Read node

- Read the name of the node, type

<p id="p1">1.<b>读写</b>节点</p>
<p id="p2">2.<b>查询</b>节点</p>
<p id="p3">3.<b>增删</b>节点</p>
var p1 = document.getElementById("p1");
console.log(p1.nodeName);
console.log(p1.nodeType);

- Read and write the content of the node

-The text in the middle of the double label is called content, and any double label has content

console.log(p1.innerHTML);
p1.innerHTML="1.<i>读写</i>节点";
console.log(p1.innerText);

- Read and write the value of the node

-The data in the form control is called the value. Only the following form controls have values:
                - input
                                                                                                                                 ‐ select

         ‐ textarea

The above is the entire content of this article. I hope that the content of this article can be of some help to everyone's study or work and if you have any questions, you can leave a message to communicate , and also hope to support PHP Chinese website!

For more articles related to Javascript’s external objects, please pay attention to the PHP Chinese website!

###