优化的解决方案：14-Web API / BOM（浏览器对象模型）

1 Web API API的概念

API（应用程序编程接口，应用程序编程接口）是一些预定义的功能，目的是为基于特定软件或硬件的应用程序和开发人员提供访问一组例程而无需访问源代码的功能，或者理解内部工作机制的详细信息。

Web API的概念

浏览器提供的一组用于操纵浏览器功能和页面元素的API（BOM和DOM）

此处的Web API特别是指浏览器提供的API（一组方法）。在以下课程中，Web API具有其他含义。

2 BOM（浏览器对象模型）2.1 BOM的概念

BOM（浏览器对象模型）是指浏览器对象模型。浏览器对象模型提供了一个与内容无关的对象结构，并且可以与浏览器窗口进行交互。 BOM由多个对象组成。表示浏览器窗口的Window对象是BOM的顶级对象，其他对象都是该对象的所有子对象。

我们在浏览器中的某些操作可以使用BOM进行编程处理，

例如：刷新浏览器，前进后退，在浏览器中输入URL，等等。

2.2 BOM的顶级对象窗口

Window是浏览器的顶级对象。在窗口下调用属性和方法时，可以省略窗口

注意：窗口下的特殊属性window.name

2.3三个对话框

1个Alert（“内容”）弹出框

2确认（“提示消息”）确认框，确认返回true，取消返回false

3个提示（“提示信息”，“默认值”）输入框返回值是一个字符串

     window.alert("您好啊");
     //注意:弹出框是具有阻塞行为的
     
     //prompt([描述信息],[默认值]);
     window.prompt("请输入账号");
     
     //返回boolean值 
	 //confirm([描述信息]);
     var result=window.confirm("你确定退出吗");
     console.log(result)

2.4两个计时器

1 setTimeout（）和clearTimeout（）

在指定的毫秒数到达后执行指定的功能，只有一次

	var a = setTimeout(function(){
	 	console.log("heihei");
	 },5000);
	
	clearTimeout(a)

2 setInterval（）和clearInterval（）

// 创建一个定时器，每隔1秒调用一次
var timerId = setInterval(function () {
  var date = new Date();
  console.log(date.toLocaleTimeString());
}, 1000);
// 取消定时器的执行
clearInterval(timerId);

2.5 onload onunload onbeforunload事件

window.onload = function(){
    console.log("页面加载完成"); 
}
  // 页面关闭后触发
window.onunload=function(){
	alert("哈哈");
}
// 页面关闭前触发
window.onbeforunload=function(){
	alert("哈哈");
}

2.6个位置地址对象

位置对象是窗口对象下的属性，窗口对象出现时可以省略。

位置可以获取或设置浏览器地址栏的URL

URL统一资源定位符（URL）

scheme://host:port/path?query#fragment
scheme:通信协议
	常用的http,ftp,maito等
host:主机
	服务器(计算机)域名系统 (DNS) 主机名或 IP 地址。
port:端口号
	整数，可选，省略时使用方案的默认端口，如http的默认端口为80。
path:路径
	由零或多个/符号隔开的字符串，一般用来表示主机上的一个目录或文件地址。
query:查询
	可选，用于给动态网页传递参数，可有多个参数，用&符号隔开，每个参数的名和值用=符号隔开。例如：name=zs
fragment:信息片断
	字符串，锚点.

<input type="button" value="显示效果" id="btn" />
	<script>
    console.log(window.location);
    console.log(window.location.hash);
    console.log(window.location.host);
    console.log(window.location.hostname);
    console.log(window.location.pathname);
    console.log(window.location.port);
    console.log(window.location.protocol);
    console.log(window.location.search);
onload=function(){
	document.getElementById("btn").onclick=function(){
		location.href="https://music.163.com";
		location.assign("https://music.163.com");
		location.reload();
		location.replace("https://www.baidu.com");
	}
}
    // location:地址对象
	// loaction.href url读
	// location.href = "http://www.baidu.com" url写
	// location.replace("http://www.baidu.com") 重新加载	
	// location.reload(); 刷新
	script>

2.7个历史对象

history.back()
history.forward()
history.go()

2.8个导航器对象

//通过userAgent可以判断用户浏览器的类型
console.log(window.navigator.userAgent);
//通过platform可以判断浏览器所在的系统平台类型.
console.log(window.navigator.platform);

本文来自电脑杂谈，转载请注明本文网址：
https://www.pc-fly.com/a/shumachanpin/article-335280-1.html