BOM
一、BOM
1、什么是BOM？
Browser Object Model： 浏览器对象模型
2、作用：
（1）可以操作浏览器窗口及浏览器窗口中的控件（标签）：即可以在JavaScript程序中操作标签
（2）实现页面和用户之间的动态交互
3、浏览器对象：一系列浏览器内置对象的统称
4、 浏览器对象模型：内置对象之间按照某种层次组织起来的结构
二、BOM对象
1、window对象：浏览器窗口对象，是BOM的核心，BOM的其他内置对象可以作为window的属性
2、document对象：文档对象，是DOM的核心
3、location对象：地址对象。浏览器的地址栏
4、history对象：历史对象。浏览器的访问记录，可以实现前进和后退。
5、navigator对象：浏览器对象，又称为浏览器的嗅探器。通过它可以得到浏览器的版本信息、名称、内核等信息
6、screen对象：屏幕对象。用于获取和屏幕有关的数据。例如屏幕分辨率
三、window对象：可以作为BOM其他对象的父对象
1、全局作用域：在javascript中定义的变量、函数及JavaScript的内置函数都可以被window对象调用
2、注意的问题：
（1）window对象的属性和方法的访问：window.属性名 / window.方法名() —- window可以省略
（2）在全局作用域中使用的this代表window对象
（3）若使用“window.变量名”访问某个未声明的变量时，该变量就是undefined
3、常用方法：
（1）alert（‘字符串’）：弹出消息提示框（只有一个按钮）
（2）prompt(参数1，参数2)：带输入的消息框
参数1：表示提示的字符串
参数2：表示输入框的默认值
当用户点击’确定’按钮时，函数返回用户输入的数据；当用户点击’取消’按钮时，不返回值
（3）confirm(参数)：确认消息框
参数：表示提示字符串
当用户点击“确定”按钮时，返回true，点击“取消”按钮时，返回false
（4）open(url，name，spaces，replace)：打开一个窗口。表示将url代表的页面在name窗口中打开
url：页面地址
name：表示窗口对象
_blank：在新窗口中打开页面
_self：在当前窗口中打开页面
_parent：表示在父框架中打开页面
spaces：表示窗口特征（大小、是否状态栏、是否有工具栏）
replace：默认值为true，表示是否替换默认条目
内联框架：ifrme
四、定时器函数
1、setTimeout（fn，times）：间隔times毫秒后执行fn函数
参数fn：是一个函数
参数times：间隔的时间，单位是毫秒
函数的返回值是一个定时器对象
2、清除setTimeout创建的定时器
clearTimeout(定时器对象)
3、setInterval（fn，times）:每间隔times毫秒后执行fn函数
4、clearInterval(定时器对象)：清除setInterval创建的定时器
五、事件处理
1、事件：用户在页面中进行的某种操作
（1）单击事件名：click —- onclick
（2）页面加载事件名：load —- onload
2、事件处理程序：某个事件发生时执行的程序
3、document对象获取页面元素（标签）的方法：
（1）getElementById(标签的Id属性值)：浏览器都支
（2）querySelector()
a、通过id选择：document.querySelector(‘#id’)
b、通过class选择：document.querySelector(‘.class’)
c、通过标签名选择：document.querySelector(‘标签名’)
4、事件监听：
（1）直接在标签中监听：
<button οnclick="show()">开始</button> //监听click事件<body οnlοad=""> //监听页面的加载事件load
（2）在JavaScript程序中调用addEventListener函数来注册
控件名.addEventListener(‘事件名’，fn)
参数fn：是一个函数，表示事件处理程序
六、标签的属性：
1、innerHTML属性：代表标签的html内容（代表起始标签和结束标签之间的内容）
练习：倒计时
<style>
#app{
width: 800px;
height: 200px;
color: red;
font-size: 20px;
margin: 10px auto;
}
</style>
<body>
<div id="app"></div>
<script>
//1.定义定时器函数
function showTime(){
let start = new Date() //当前日期
let end = new Date('2023-1-1')
let times = end - start
let d = parseInt(times/1000/60/60/24) d = d<10? '0'+d : d
let h = parseInt(times/1000/60/60%24) h = h<10? '0'+h : h
let m = parseInt(times/1000/60%60) m = m<10? '0'+m : m
let s = parseInt(times/1000%60)
s = s<10? '0'+s : s
let str = `距离2023年元旦还有：${ d }天${ h }小时${ m }分钟${ s }秒`
let mydiv = document.querySelector('#app') mydiv.innerHTML = str
}
setInterval(showTime,1000)
</script>
2、input标签的value属性：
let score = document.querySelector('#score')
//input标签
let my_btn = document.querySelector('#btn_score')
//按钮
my_btn.addEventListener('click',function(){ alert(score.value)
})
window对象
一、window对象的其他函数
1、open函数：打开一个窗口
open(url，name，specs，replace)
url：统一资源定位符(网址)，格式：
协议：//主机名：端口号/文件路径
http：超文本传输控制协议，是一个无状态协议。直接运行在TCP协议之上
https：SSL，是安全的超文本传输控制协议。运行在SSL之上，SSL在TCP之上
name：窗口的名称
练习1：打开窗口
var myWindow;
function openWin() {
myWindow = window.open('http://www.woniuxy.com', 'newWin', 'width=400,height=200,left=200');
myWindow.document.write('<p>窗口名称为：' + myWindow.name + '</p>'); myWindow.document.write('<p>当前窗口的父窗口地址：' + window.parent.location + '</p>'); }
(1)open函数返回一个窗口对象。将该对象赋给变量myWindow
(2)myWindow.name：打开的窗口的name属性 --- 'newWin' name属性：表示窗口对象的名称(3)window.parent.location：
window：指的是新打开的窗口中的BOM的window对象
parent：上面window对象的属性，代表的是外层的窗口 l
ocation：代表的是外层窗口的浏览器地址栏
关闭窗口：
function closeWin() {
myWindow.close();}
function checkWin() {
if (myWindow) { //表示如果myWindow对象存在
var str = myWindow.closed ? '窗口已关闭！' : '窗口未关闭！';
} else {
var str = '窗口没有被打开!';
}
document.getElementById('msg').innerHTML = str;
}
(1)myWindow是新打开的窗口对象
(2)close()函数：用来关闭窗口对象
(3)myWindow.closed：closed是窗口对象的属性，若窗口对象关闭该属性值为true,否则为false
2、moveTo(x,y)：将窗口移动到指定的位置
3、resizeTo(w,h)：改变窗口的大小
二、window对象的属性
1、innerHeight / innerWidth：返回窗口的文档显示区的高度和宽度
2、outerHeight / outerWidth：返回窗口外部的高度和宽度（包括工具条和滚动条）
三、location对象：是浏览器的地址栏
1、url：统一资源定位符
IP：网际协议。
IP地址：是计算机在互联网上的唯一标识
IP地址的编址方式：
IPV4：点分十进制
192.168.1.125
IPV6：冒号十六进制
00::A1::B6::CF
2、location的方法：
（1）assign(url)：载入新的文档
（2）reload(true/false)：重新载入当前文档
（3）replace(url)：用新的文档替换当前文档
3、location的属性：
href：表示url地址
C/S结构：Client/Server —- 客户端/服务器结构
B/S结构：Browser/Server —- 浏览器/服务器结构
四、history对象：该对象可以对浏览器访问过的URL历史记录进行操作
1、出于安全方面的考虑，history对象不能直接获取用户浏览过的URL，但可以控制浏览器实现“后退”和“前进”的功能。
2、属性：length —— 历史列表中的网址数
3、方法：
（1）go( 整数 )：加载历史列表中某个具体页面。正数表示前进，负数表示后退
（2）back()：表示后退，加载是历史列表中前一个网址
（3）forward()：表示前进，加载历史列表中下一个网址
五、navigator对象：是浏览器的嗅探器，保存的是浏览器的详细信息
1、appCodeName：浏览器的内部名称 —- 浏览器的内核
2、appName：浏览器的名称
3、platform：运行浏览器的操作平台
4、userAgent：客户端发送给服务器的User-Agent值
练习
1、简单时钟
<style>
.box{
width: 500px;
height: 150px;
/* border: 1px solid #ccc; */
margin: 20px auto;
line-height: 150px;
text-align: center;
}
#clock{
width: 300px;
height: 100px;
border: 1px solid #ccc;
}
</style>
<body>
<div class="box">
<div id="clock"></div>
<p><button id="btn_start">开始</button></p> </div>
<script>
//1.创建变量
var timer = null
//定时器变量
var flag = true
//标记变量：用来标识当前按钮是'开始'还是'暂停' showTime()
//2.定义函数：用于显示时间
function showTime(){
//2.1、创建日期对象-- 当前日期
let now = new Date()
//2.2、取出日期的时间
let h = now.getHours()
let m = now.getMinutes()
let s = now.getSeconds()
h = h<10?'0'+h : h
m = m<10?'0'+m : m
s = s<10?'0'+s : s
//2.3、将时间写入div中
document.getElementById('clock').innerHTML = h + ':' + m + ':' + s
}
//3.给按钮注册click事件，在事件的处理程序中创建定时器 let start = document.getElementById('btn_start') start.addEventListener('click',function(){ //3.1、判断标记变量flag,若为true表示时间正在运行，按钮显示'暂停'
if(flag){
timer = setInterval(showTime,1000)//创建定时器 flag = !flag //取反 this.innerHTML = '暂停'
//this代表的是当前的按钮start
}else{ s
clearInterval(timer) //清除定时器 flag = !flag this.innerHTML = '开始'
}})
</script>
2、在页面加载完成后即刻显示时钟的解决办法：
（1）先调用函数
（2）使用事件：
load — 当浏览器加载页面时触发该事件 ===> 表示当页面加载时就运行showTime函数
3、事件的注册方式
（1）写在页面的标签中：
<button οnclick="函数名()"></button>
（2）使用addEventListener注册：
对象名.addEventListener('事件名',事件处理函数)
（3）使用函数表达式
函数表达式： let/var 变量名 = function([参数]){}
注册事件的方式： 对象名.onclick = function([参数]){}
4、有JavaScript控制复选框
（1）复选框组：将所有复选框的name属性值定义成一样的
（2）复选框的事件：change —- 当复选框的状态发生改变时触发