一、常用键盘事件 1.键盘事件 键盘事件触发条件
onkeyup某个键盘按键被松开的时候触发onkeydown某个键盘按钮被按下的时候触发onkeypress某个键盘按下按下的时候触发 但是它不识别功能按键，比如：ctrl、shift和箭头等
注意： 如果使用addEventListener 不需要加on onkeypress和前面2个的区别的是，它不识别功能键 三个事件执行顺序：keydow —> keypress —> keyup
01常用键盘事件
2.键盘事件对象 键盘事件对象说明 keyCode返回该键的ASCⅡ值 注意： 我们实际开发中，我们更多的使用keydown和keyup，他们能识别所有的键盘（包括功能键） keypress不能识别功能键，返回不同的ASCⅡ值
02keyCode
3.模拟京东按键输入内容 检测用户是否按下了s键盘，如果按下了s键，就会把光标定位到搜索框里面 实现思路：检测用户是否按下了s键盘，如果按下了，就可以使用js中的focus()方法
03京东按键输入内容
4.仿京东快递搜索
04仿京东快递搜索
123
二、BOM javaScript = ECMAScript + DOM + BOM 1.什么是bom BOM：（Browser Object Model）也就是浏览器对象模型，它提供了独立于内容而与浏览器窗口交互对象，其核心对象是window BOM由一系列相关的对象构成，并且每个对象都提供了很多的方法和属性 BOM缺乏标准，javaScript语法的白哦准组织ECMA，DOM的标准化组织W3C，BOM最初是网景浏览器标准的一部分 2.BOM的构成
2.1 顶级对象window window对象是浏览器的顶级对象，它具有双重角色 它是JS访问浏览器窗口的一个接口 它是一个全局对象，定义在全局作用域中的变量，函数就会变成window对象的属性和方法 在调用的时候window是可以省略不写，比如：window.alert(); window.prompt()
Document
2.2 window中常见的事件 第一种:onload
window.onload = function(){
//...
}
或者
window.addEventListener('load',function(){});
是窗口加载事件， 当文档内容完全加载完成后会触发事件
Document
哈哈
第二种：resize 窗口大小事件 window.onresize = function(){} window.addEventListner(‘resize’,function(){});
07窗口大小调整
第三种定时器 window对象给我们提供了2个非常好用的定时方法 setTimeout() setInterval() setTimeout() 语法：
window.setTimeout(调用的函数,[延迟的毫秒数]);
注意： window是可以省略的 这个调用函数可以直接写函数，或者写函数名或者是采用字符串 ‘函数名()’ 三种方式 延迟毫秒可以省略不写，默认是0，如果写，必须是毫秒数 因为定时器可以有很多，所以我们经常给定时器赋值一个标识符
Document
案例：5秒后关闭广告
Document
停止定时器
window.clearTimeout(timeoutId);
Document
setInterval()
window.setInterval(回调函数,[间隔毫秒数])
setInterval()方法重复调用一个函数，每隔这个时间，就会去调用一次回调函数 注意： window是可以省略的 这个调用函数可以直接写函数，或者写函数名或者是采用字符串 ‘函数名()’ 三种方式 延迟毫秒可以省略不写，默认是0，如果写，必须是毫秒数 因为定时器可以有很多，所以我们经常给定时器赋值一个标识符 第一次执行也是间隔毫秒数之后执行，之后每隔毫秒数执行一次
Document
倒计时效果
Document
1
1
1
短信发送案例
Document
手机号码：
定时器开始和停止
Document
2.3 this指向问题 this的指向再函数定义的时候是确定不了的，只有函数执行的时候才能确定this到底指向了谁，一般情况下this的最终指向是那个调用用它的对象， 现阶段：我们先了解以下几个this的指向 全局作用域或者是普通函数this指向全局对象window （注意在定时器里面this指向window） 方法调用中谁调用this指向谁 构造函数中this指向构造函数的实例
Document
2.4 location 2.4.1 什么是location window对象给我们提供的一个location属性用于获取或这只窗体的URL，并且用于解析URL，因为这个属性返回的是一个对象，所以我们将这个属性也称之为location对象 2.4.2 对象中的属性 location对象属性返回值
location.href获取或者设置整个URLlocation.host返回主机名（域名）location.port返回端口号，如果没有写返回空字符串location.pathname返回路径location.search返回参数location.hash返回片段， #后面内容常见于链接锚点
2.4.3 案例：5秒自动跳
Document
123
2.4.4 案例获取URL参数 login.html
Document
index.html
Document
这是index.html
2.4.5 常见的方法 location常见方法说明
location.assign()跟href一样，可以跳转页面location.replace()替换当前的页面，因为不记录历史，所以不能后退的location.reload()重新加载页面，相当于刷新按钮 或者 f5，如果此参数为true表示强制刷新
Document
2.5 navigator[了解] navigator对象包含有关浏览器的信息，它有很多属性，我们常见的是userAgent，该属性可以返回由客户机发送服务器的userAgent头部的值
Document
2.6 histroy window对象给我们提供的一个history对象，与浏览器历史记录进行交互，该对象包含用户访问过的URL history对象方法作用 back()后退forward()向前go(参数)如果1表示前进1个页面，如果-1表示后退1个页面 list.html
list
点击我前往首页
index.html
index
点击我前往list.html
三、JS执行机制 思考？
console.log(1);
setTimeout(function(){
console.log(3);
},1000)
console.log(2);
1 2 3
console.log(1);
setTimeout(function(){
console.log(3);
},0)
console.log(2);
1 2 3 2.JS线程 2.1 线程介绍 JS是单线程。
javaScript语言一大特点就是单线程，也就是说：同一时间只能做一件事。
这是因为javaScript这门脚本语言诞生使命是——处理页面中用户的交互、以及操作DOM而生。
比如我们对某个DOM元素进行添加和删除操作是不能同时进行的。
一般先添加，后删除
单线程就意味着，所有的任务需要排队。前一个任务结束，才会执行后一个任务，如果前一个任务耗时很长，后一个任务九不得不一直等着。
这样所导致的问题是：如果js执行的时间过长，这样就造成了页面的渲染不连贯，导致页面渲染加载阻塞的感觉
3.2 同步任务和异步任务 单线程导致的问题就是后面的任务等待前面的任务完成，如果钱买你任务很耗时（比如：读取网络的数据），后面的任务不得不一直等待。
为了解决这个问题，利用多核CPU的计算能力，HTML5提出WEB Worker标准，允许javaScript脚本创建多个线程，但是子线程完全受主线程控制，于是，JS中出现了 同步任务和异步任务 同步 前一个任务结束后再执行后一个任务，程序的执行顺序和任务的排列顺序是一致、同步的。
比如做饭的做法：先烧水煮饭，切菜和炒菜。
异步 你再做一件事情的时候，因为这件事情会花费很长的时间，再做这件事情的时候，你可以去处理其它的事情。
比如做饭的做法：先烧水煮饭，同时切菜和炒菜。
js中异步是通过回调函数实现的。
一般而言，异步任务由以下三种类型 普通任务，如：click、resize等等 资源加载，如：load，error等等 定时器，包括setInterval、setTimeout等等 异步任务相关回调函数添加到任务队列中（任务队列也成为消息队列） 3.3 JS执行机制（事件循环） 先执行”执行栈中的同步任务“ 异步任务（回调函数）放入到任务队列中. 一旦执行栈中的所有的同步任务执行完毕，系统就按次序读取”任务队列“中异步任务，于是读取的异步任务结束等待状态，进入到执行栈，开始执行
由主线程不断的重复获得任务、执行任务、再次获取任务、再执行任务，所以这种机制被称之为： 事件循环（event loop）
Document
出现了 同步任务和异步任务 同步 前一个任务结束后再执行后一个任务，程序的执行顺序和任务的排列顺序是一致、同步的。
比如做饭的做法：先烧水煮饭，切菜和炒菜。
异步 你再做一件事情的时候，因为这件事情会花费很长的时间，再做这件事情的时候，你可以去处理其它的事情。
比如做饭的做法：先烧水煮饭，同时切菜和炒菜。
js中异步是通过回调函数实现的。
一般而言，异步任务由以下三种类型 普通任务，如：click、resize等等 资源加载，如：load，error等等 定时器，包括setInterval、setTimeout等等 异步任务相关回调函数添加到任务队列中（任务队列也称为消息队列） 3.3 JS执行机制（事件循环） 先执行”执行栈中的同步任务“ 异步任务（回调函数）放入到任务队列中. 一旦执行栈中的所有的同步任务执行完毕，系统就按次序读取”任务队列“中异步任务，于是读取的异步任务结束等待状态，进入到执行栈，开始执行 [外链图片转存中…(img-hJIGDcLS-1730808521358)] 由主线程不断的重复获得任务、执行任务、再次获取任务、再执行任务，所以这种机制被称之为： 事件循环（event loop）
Document