Window对象
BOM(浏览器对象模型)
BOM(Browser Object Model ) 是浏览器对象模型
注意:
- window对象是一个全局对象,也可以说是JavaScript中的顶级对象
- 像document、alert()、console.log()这些都是window的属性,基本BOM的属性和方法都是window的。
- 所有通过var定义在全局作用域中的变量、函数都会变成window对象的属性和方法。
- window对象下的属性和方法调用的时候可以省略window。
定时器-延时函数
JavaScript 内置的一个用来让代码延迟执行的函数,叫 setTimeout。
语法:setTimeout(回调函数,等待的毫秒数)
setTimeout 仅仅只执行一次,所以可以理解为就是把一段代码延迟执行, 平时省略window。
清除延时函数:let timer = setTimeout(回调函数,等待的毫秒数)
clearTimeout(timer)
注意
(1)延时器需要等待,所以后面的代码先执行。
(2)每一次调用延时器都会产生一个新的延时器,返回的也是数字Id。
两种定时器对比:执行的次数
延时函数: 执行一次
间歇函数:每隔一段时间就执行一次,除非手动清除
案例 5秒钟之后消失的广告
<body>
<img src="./images/ad.png" alt="">
<script>
const img = document.querySelector('img')
setTimeout(function () {
img.style.display = 'none'
}, 3000)
</script>
</body>
JS执行机制
//经典面试题
console.log(1)
setTimeout(function(){
console.log(2)
},1000)
console.log(3) //1 3 2
console.log(1)
setTimeout(function(){
console.log(2)
},0)
console.log(3) //1 3 2
JavaScript 语言的一大特点就是单线程,也就是说,同一个时间只能做一件事。
单线程就意味着,所有任务需要排队,前一个任务结束,才会执行后一个任务。这样所导致的问题是: 如果 JS 执行的时间过长,这样就会造成页面的渲染不连贯,导致页面渲染加载阻塞的感觉。
JS 执行机制
- 同步: 前一个任务结束后再执行后一个任务,程序的执行顺序与任务的排列顺序是一致的、同步的。比如做饭的同 步做法:我们要烧水煮饭,等水开了(10分钟之后),再去切菜,炒菜。
- 异步: 你在做一件事情时,因为这件事情会花费很长时间,在做这件事的同时,你还可以去处理其他事情。比如做饭的异步做法,我们在烧水的同时,利用这10分钟,去切菜,炒菜。
- 本质区别: 这条流水线上各个流程的执行顺序不同。
同步任务 : 同步任务都在主线程上执行,形成一个执行栈。
异步任务 JS 的异步是通过回调函数实现的。
一般而言,异步任务有以下三种类型:
(1)普通事件,如 click、resize 等
(2)资源加载,如 load、error 等
(3)定时器,包括 setInterval、setTimeout 等
- 异步任务相关添加到任务队列中(任务队列也称为消息队列)。
执行顺数
(1)先执行执行栈中的同步任务。
(2)异步任务放入任务队列中。
(3)一旦执行栈中的所有同步任务执行完毕,系统就会按次序读取任务队列中的异步任务,于是被读取的异步任务结束等待状态,进入执行栈,开始执行。
由于主线程不断的重复获得任务、执行任务、再获取任务、再执行,所以这种机制被称为事件循环( event loop )。
console.log(1)
document.addEventListener('click', function () {
console.log(4)
})
console.log(2)
setTimeout(function () {
console.log(3)
}, 3000)
//先关闭后点击 1 2 3 4
//先点击后关闭 1 2 4 3
location对象
location 的数据类型是对象,它拆分并保存了 URL 地址的各个组成部分。
常用属性和方法:
- href 属性获取完整的 URL 地址,对其赋值时用于地址的跳转。
- search 属性获取地址中携带的参数,符号 ?后面部分 。location.search
- hash 属性获取地址中的啥希值,符号 # 后面部分 。location.hash
- reload 方法用来刷新当前页面,传入参数 true 时表示强制刷新。 location.reload(true)
案例 5秒钟之后跳转的页面
<body>
<a href="http://baidu.com"><span>n</span>秒后跳转页面</a>
<script>
const a = document.querySelector('a')
let timer = 5
let timerId = setInterval(function () {
timer--
a.innerHTML = `<span>${timer}</span>秒后跳转页面`
if (timer === 0) {
clearInterval(timerId)
//跳转页面
location.href = 'http://baidu.com'
}
}, 1000)
</script>
</body>
navigator对象
navigator的数据类型是对象,该对象下记录了浏览器自身的相关信息。
常用属性和方法:
通过 userAgent 检测浏览器的版本及平台
// 检测 userAgent(浏览器信息)
!(function () {
const userAgent = navigator.userAgent
// 验证是否为Android或iPhone const android = userAgent.match(/(Android);?[\s\/]+([\d.]+)?/) const iphone = userAgent.match(/(iPhone\sOS)\s([\d_]+)/)
// 如果是Android或iPhone,则跳转至移动站点
if (android || iphone) {
location.href = 'http://m.itcast.cn'
}
})()
histroy对象
history 的数据类型是对象,主要管理历史记录, 该对象与浏览器地址栏的操作相对应,如前进、后退、历史记 录等。
常用属性和方法:
本地存储
本地存储介绍
(1)数据存储在用户浏览器中
(2)设置、读取方便、甚至页面刷新不丢失数据
(3)容量较大,sessionStorage和localStorage约 5M 左右
本地存储分类
localStorage
作用: 可以将数据永久存储在本地(用户的电脑), 除非手动删除,否则关闭页面也会存在。
特性:
(1)可以多窗口(页面)共享(同一浏览器可以共享)
(2)以键值对的形式存储使用
(3)只能存储字符串类型,所有的键都要加""。
- 存储数据: localStorage.setItem(key, value)
- 获取数据: localStorage.getItem(key)
- 删除数据: localStorage.removeItem(key)
sessionStorage
特性:
(1)生命周期为关闭浏览器窗口
(2)在同一个窗口(页面)下数据可以共享
(3)以键值对的形式存储使用
(4)用法跟localStorage 基本相同
存储复杂数据类型
原因:本地只能存储字符串,无法存储复杂数据类型。
解决:需要将复杂数据类型转换成JSON字符串,在存储到本地。
语法:JSON.stringify(复杂数据类型) (属性和值都有引号,统一为双引号。)
原因:因为本地存储里面取出来的是字符串,不是对象,无法直接使用。
解决:把取出来的字符串转换为对象
语法:JSON.parse(JSON字符串)
补充:数组中map和join方法
数组中map方法 迭代数组
map 可以处理数据,并且返回新的数组。map 也称为映射。映射是个术语,指两个元素的集之间元素相互“对应”的关系。map的重点在于有返回值,forEach没有返回值。
数组中join方法
join() 方法用于把数组中的所有元素转换一个字符串
数组元素是通过参数里面指定的分隔符进行分隔的,默认空括号用逗号分隔。
const arr = ['pink','red','blue']
const newArr = arr.map(function(ele,index){
console.log(ele) //'pink' 'red' 'blue'
console.log(index) // 0 1 2
return ele + '老师'
})
console.log(newArr) //['pink老师','red老师','blue老师']
console.log(newArr.join('')) //pink老师red老师blue老师
综合案例 学生就业信息表
<body>
<h1>学生就业统计表</h1>
<form class="info" autocomplete="off">
<input type="text" class="uname" name="uname" placeholder="姓名" />
<input type="text" class="age" name="age" placeholder="年龄" />
<input type="text" class="salary" name="salary" placeholder="薪资" />
<select name="gender" class="gender">
<option value="男">男</option>
<option value="女">女</option>
</select>
<select name="city" class="city">
<option value="北京">北京</option>
<option value="上海">上海</option>
<option value="广州">广州</option>
<option value="深圳">深圳</option>
<option value="曹县">曹县</option>
</select>
<button class="add">
<i class="iconfont icon-tianjia"></i>添加
</button>
</form>
<div class="title">共有数据<span>0</span>条</div>
<table>
<thead>
<tr>
<th>ID</th>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
<th>薪资</th>
<th>就业城市</th>
<th>录入时间</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<!-- <tr>
<td>1</td>
<td>迪丽热巴</td>
<td>23</td>
<td>女</td>
<td>12000</td>
<td>北京</td>
<td>2099/9/9 08:08:08</td>
<td>
<a href="javascript:">
<i class="iconfont icon-shanchu"></i>
删除
</a>
</td>
</tr> -->
</tbody>
</table>
<script>
// 参考数据
const initData = [
{
stuId: 1,
uname: '迪丽热巴',
age: 22,
salary: '12000',
gender: '女',
city: '北京',
time: '2099/9/9 08:08:08'
}
]
//本地存储,已经存储没必要再重复存储
// localStorage.setItem('data', JSON.stringify(initData))
// 1. 渲染业务
// 1.1 先读取本地存储的数据
// (1). 本地存储有数据则记得转换为对象然后存储到变量里面,后期用于渲染页面
// (2). 如果没有数据,则用空数组来代替
const arr = JSON.parse(localStorage.getItem('data')) || []
// 1.2 利用map和join方法来渲染页面
//获取tbody
const tbody = document.querySelector('tbody')
function render() {
// (1). 利用map遍历数组,返回对应tr的数组
const trArr = arr.map(function (ele, index) {
return `
<tr>
<td>${ele.stuId}</td>
<td>${ele.uname}</td>
<td>${ele.age}</td>
<td>${ele.gender}</td>
<td>${ele.salary}</td>
<td>${ele.city}</td>
<td>${ele.time}</td>
<td>
<a href="javascript:" data-id="${index}">
<i class="iconfont icon-shanchu"></i>
删除
</a>
</td>
</tr>
`
})
// (2). 把数组转换为字符串 join
// (3). 把生成的字符串追加给tbody
tbody.innerHTML = trArr.join('')
// 显示共计有几条数据
document.querySelector('.title span').innerHTML = arr.length
}
render()
// 2. 新增业务
// 2.1 form表单注册提交事件,阻止默认行为
const info = document.querySelector('.info')
const uname = document.querySelector('.uname')
const age = document.querySelector('.age')
const salary = document.querySelector('.salary')
const gender = document.querySelector('.gender')
const city = document.querySelector('.city')
info.addEventListener('submit', function (e) {
e.preventDefault()
//2.2 非空判断
if (!uname.value || !age.value || !salary.value) {
return alert('输入内容不能为空')
}
//2.3 给 arr 数组追加对象,里面存储 表单获取过来的数据
arr.push({
//处理stuId:数组最后一条数据的stuId+1
stuId: arr.length ? [arr.length - 1].stuId + 1 : 1,
uname: uname.value,
age: age.value,
salary: salary.value,
gender: gender.value,
city: city.value,
//获取当前时间
time: new Date().toLocaleString()
})
// 2.4 渲染页面和重置表单(reset()方法)
render()
this.reset()
// 2.5 把数组重新存入本地存储里面,记得转换为JSON字符串存储
localStorage.setItem('data', JSON.stringify(arr))
})
// 3. 删除业务
// 3.1 采用事件委托形式,给 tbody 注册点击事件
tbody.addEventListener('click', function (e) {
//判断是否点到的是删除按钮
if (e.target.tagName === 'A') {
// 3.2 得到当前点击链接的索引号。渲染数据的时候,动态给a链接添加自定义属性例如 data-id="0"
//确认删除
if (confirm('您确定要删除这条数据吗?')) {
//3.3 根据索引,利用splice删除数组这条数据
arr.splice(e.target.dataset.id, 1)
//3.4 重新渲染页面
render()
//3.5 把最新的arr数组存入本地存储
localStorage.setItem('data', JSON.stringify(arr))
}
}
})
</script>
</body>