JS - 笔记2-2_3_BOM - 《学习笔记》

JS组成
BOM
- window的成员对象：
  - location对象
    - 属性
    - 方法
  - navigator对象
- window的对象方法

JS组成

ECMAScript简称ES
BOM
DOM
BOM
BrowserObjectModel 浏览器对象模型

BOM的核心对象：window
它表示浏览器的一个实例，它是JS访问浏览器的一个接口。每一个页面，都有自己的window对象,Window对象是JavaScript层级中的顶层对象，它代表一个浏览器窗口或一个框架，会在每次出现时被自动创建
全局作用域：所有在全局作用域中定义的变量、函数都会变成window对象的属性和方法。
window的成员对象：

window.document
window.location
window.navigator
//window.history
//window.event
window.screen
//window.external
location对象
提供与当前窗口中加载的页面有关的信息，以及一些导航功能。它既是window的属性，也是document的属性。它将URL解析为各个片段，让程序员通过不同的属性访问之。
属性
href：全路径http://www.w3.org/TR/html5/browsers.html#the-window-object
protocol：http(协议) (http/https/file://这个是取当地文件协议)
host：www.w3.org:80
hostname：www.w3.org 每个hostname对应网络上的一个ip地址。(DNS:将域名解析成IP地址的系统)
port：80（端口号）默认端口显示”” ;标识一台终端上的具体网络应用程序，有时候会省略。
pathname ：/TR/html5/browsers.html: 路径(path).第一个/叫做根路径。浏览器直接访问的资源，都必须放在服务器的根路径下，否则访问不到
Hash：(哈希) #the-window-object: Hash地址(发送请求时，不会发送hash地址，该地址只是浏览器自己在使用https://www.baidu.com:443/s?ie=utf-8&f=8&rsv_bp=0&rsv_idx=1&tn=baidu&wd=window&rsv_pq=e85a1a4c00012313&rsv_t=3037Hucqghob%2FctkdHkuBPIiTAM11zQKeK1ipkXLTDuB3E7CCs0I%2FfQV1ic&rqlang=cn&rsv_enter=1&rsv_sug3=7&rsv_sug1=3&rsv_sug7=101&rsv_sug2=0&inputT=1005&rsv_sug4=1530
search： ?a=b&c=d&e=f: search地址
```
document.getElementById('go').onclick = function () {
location.href = 'https://www.baidu.com/s?wd=bom'
//将当前页面跳转到百度，并搜索关键字bom
}
```
方法
location.assign(url)
打开新的URL，并在历史中生成一条记录。与location = ‘url’ 和location.href=‘url’相同，第二个的方法最为常用
```
location.assgin('https://www.baidu.com/s?wd=bom') //页面跳转
```
location.replace(url)
替换当前页面的url，且无法回到前一个画面。（因为历史中的数据被替换了）

location.reload(fromServer)
重新加载当前页面
参数：如果为false，则可能从浏览器缓存中重新加载
如果为true，则强制从服务器加载

navigator对象

提供了客户端浏览器的信息。
userAgent  返回浏览器相关信息。可以通过这个变量，判断浏览器、平台。

window的对象方法

window.setTimeout(function(){}, ms)

在指定的时间后执行代码
参数：1.function(){} ：回调函数，一会将要执行的代码；也可以传递一个包含js代码的字符串
2.ms ：以毫秒表示的时间（在执行代码前要等待多少毫秒）
返回值：返回一个数值ID，用于表示这一次调用的setTimeout函数

setTimeout(‘alert(“Helloworld!”)’, 1000);
setTimeout(function () {
  alert(‘Helloworld’);
}, 1000) 
//两种传参方式：1000ms后页面弹出alert

clearTimeout(timeoutId)：

由于window的全局作用域，window通常省略

var timeoutId = setTimeout(function() {
  alert(‘Helloworld!!!’);
}, 1000)
//这条语句，每隔1000ms弹出alert，这个事件就在执行了，然后返回了一个数值赋给timeoutId
clearTimeout(timeoutId）

在setTimeout指定的函数执行前，可以取消这个函数的执行计划。

window.setInterval(function(){}, ms)

每隔指定的时间，执行一次回调函数
参数： 1. 回调函数，一会将要执行的代码。
2. 以毫秒表示的时间（每次执行代码的间隔）
返回值：返回一个数值ID，用于表示这一次调用的setInterval函数。
调用方法： 1. 第一个参数可传递一个包含js代码的字符串
2. 第一个参数也可传递函数

setInterval(‘alert(“Helloworld!”)’, 1000)；
setInterval(function () {
  alert(‘Helloworld’);
}, 1000)

clearInterval(intervalId)

与超时函数类似，间隔函数可以取消尚未被执行的间隔调用

varintervalId = setInterval(function() {
  alert(‘Helloworld!!!’);
}, 1000)
clearInterval(intervalId);

JS:单线程运行环境
当遇到setTimeout时，会在任务队列中添加一条任务
接着执行下面的代码。当下面代码执行完成时，会从任务队列中取出一个到时的任务执行。

console.log('开始计时');
vartimerId1 = setTimeout(function () {
  console.log('1秒钟的，时间到');
}, 1000)
vartimerId2 = setTimeout(function () {
  console.log('2秒钟的，时间到');
}, 2000)
console.log('计时结束');
//上述代码执行：
  开始计时
  计时结束
  1秒钟的，时间到    //与‘计时结束’语句结束间隔1s
  2秒钟的，时间到    //与‘计时结束’语句结束间隔2s

这些函数为浏览器调用，js执行到时会添加一个任务到队列，然后等js代码执行结束后，再执行这些任务。
问题：由于js单线程运行，如果setInterval中回调函数处理时间超过其间隔时间就会导致时间队列的事件堆积，耗费系统资源，要避免这种情况

/用setTimeout模拟setInterval
functioninterval(){
  console.log('aaaa');
  setTimeout(function(){
  interval();
   },5000)
  // setTimeout(interval,300);
}

系统对话框 alert

通过window调用系统的对话框
特点：1.对话框是模态的(弹出后，页面中的元素无法被点击到)
2.当弹出对话框时，js代码停止运行，关闭后恢复执行。
3.与浏览器中显示的页面无关，也不包含HTML。外观有操作系统或浏览器决定，无法通过css设置。

alert(str)

功能：弹出一个只有OK(确认)按钮的对话框。
参数：对话框上显示的字符串
返回值：undefined

var btn = document.getElementById('btn');
btn.onclick = function () {
  alert('系统对话框');
  console.log('对话框后面')
}

confirm(str)

功能：弹出一个有OK(确认)、Cancel(取消)两个按钮的对话框
参数：对话框上显示的字符串
返回值：true：当用户点击了OK
false：当用户点击了cancel或者右上角的X

var result = confirm('是否删除好友');
if(result === true) {
  //点击了确定
  alert('好友已经删除');
} else { //false为用户点击了取消
  alert('可以在考虑考虑');
}

prompt(str, defalutStr)

功能：弹出一个可以输入文本的“提示框”
参数： 1.str，显示给用户的文本
2.defaultStr，文本输入域的默认值

返回值：1.如果点击了OK，返回文本输入域的值
2.当用户点击了cancel或者右上角的X，返回null

prompt()//显示一个输入框
var result = prompt('请输入银行卡密码', '000000');
if(result === null) {
  alert('真的放弃百万的大奖机会么');
} else {
  console.log(result);
}

窗口位置screenLeft screenTop

IE、Safari、Opera和Chrome都提供了screenLeft和screenTop属性，分别用于表示窗口的左边和上边位置。
Firefox则在screenX和screenY属性中提供相同的窗口位置信息。

跨浏览器取得窗口左边和上边位置：

var leftPos = (window.screenLeft !== undefined) ? window.screenLeft : window.screenX;
var topPos = (window.screenTop !== undefined) ? window.screenTop : window.screenY;

窗口大小 innerHeight

1.innerXXX代表可视区域大小，outer代表浏览器窗口大小。innerXXX与document.documentElement.clientXXX相同。
2.窗口高度:
window.innerHeight
window.outerHeight
3.窗口宽度:
window.innerWidth
window.outerWidth

window.open(url, name, options)

1.功能：导航到一个特定url，或者打开一个新的浏览器窗口
2.参数：

url: 字符串，指定要加载的url
name: 字符串，指定窗口名称。已经有窗口命名跟name相同，则在具有该名称的窗口或框架中加载第一个参数指定的url。否则创建一个新的窗口，命名为name并在新窗口中加载url。name支持以下值：
- ‘_blank’ -> 打开新窗口
- ‘_self’ -> 在原窗口打开
options: 如果第二个参数并不是一个已经存在的窗口，会根据这个参数创建新窗口。没有传递options，会按照默认的设置，如果在原窗口打开，忽略这个参数。下表列出了常用的设置选项。

3.返回值：返回新窗口的实例 (可以通过这个返回值，操作打开窗口页面)

window.close()

IE、chrome可以关闭父窗口、FF禁止直接关闭父窗口（需要修改配置项）。
关闭通过open函数打开的窗口

var btn = document.getElementById('open');
btn.onclick = function () {
window.open('http://www.1000phone.com/')
 }
window.open('http://www.1000phone.com/')//此行代码运行后会自动打开一个open后的地址，不过，目前的浏览器都会禁止这种功能，阻止小广告。

常用事件得响应函数：

window.onload

当所有的HTML元素和js代码加载完之后，调用onload函数。可以作为js的一个入口

window.onclick

当window被点击时，调用这个函数。
当在这个函数中调用document.write，这个函数被重新置为null
大多数元素（例如div、span、a标签等）都可以接收click事件

window.onscroll

当前窗口滚动到哪里，用下面属性进行判断。

var scrollTop = document.documentElement.scrollTop ?
document.documentElement.scrollTop :
document.body.scrollTop;

当修改scrollTop时，页面会滚动到对应的位置

笔记2-2_3_BOM