JavaScript——WEBAPIS_BOM对象以及js执行机制
1.常见的键盘事件
1.1 键盘事件
以下通过代码的形式来表达，这三种键盘事件,我们使用事件监听的方式触发事件
// 常用的键盘事件
//1. keyup 按键弹起的时候触发
document.addEventListener('keyup', function() {
console.log('我弹起了');
})
//3. keypress 按键按下的时候触发 不能识别功能键 比如 ctrl shift 左右箭头啊
document.addEventListener('keypress', function() {
console.log('我按下了press');
})
//2. keydown 按键按下的时候触发 能识别功能键 比如 ctrl shift 左右箭头啊
document.addEventListener('keydown', function() {
console.log('我按下了down');
})
// 4. 三个事件的执行顺序 keydown -- keypress -- keyup
注意一下他们之间的区别
1.2 键盘事件的对象
键盘事件的属性，主要是KeyCode，放回该键的ASCII值，注意啊这个事件对象e
实例代码：
// 键盘事件对象中的keyCode属性可以得到相应键的ASCII码值
document.addEventListener('keyup', function(e) {
console.log('up:' + e.keyCode);
// 我们可以利用keycode返回的ASCII码值来判断用户按下了那个键
if (e.keyCode === 65) {
alert('您按下的a键');
} else {
alert('您没有按下a键')
}
})
document.addEventListener('keypress', function(e) {
// console.log(e);
console.log('press:' + e.keyCode);
})
2.BOM
2.1 基础知识知识
BOM是浏览器对象模型，BOM 缺乏标准，JavaScript 语法的标准化组织是 ECMA，DOM 的标准化组织是 W3C，BOM 最初是Netscape 浏览器标准的一部分。兼容性比较差。
DOM的顶级对象是document，BOM 顶级对象是window
2.2 BOM对象的组成部分
它是顶级对象，有两重角色，
- js访问浏览器接口的一个接口
- 全局对象，所有定义在其中定义的东西，都会变成它的属性和方法，调用的时候可以省去window.
- 它自带一个特殊属性：window.name
2.3 window对象的常见事件
接下来，我们来讲一下它的常见事件，
- 页面（窗口）加载事件，有了它我们就可以把script标签放到前面去了。他有两种
//第一种
window.onload = function(){}或者
window.addEventLisstener("load",function(){});
// 第二种
document.addEventListener('DOMcontentLoad',function(){})
//他们的区别，第一种是在页面全部加载完全之后调用，第二种仅DOM加载完全之后调用，不包括土拍你 样式表等加载完毕。IE9以上才支持，有兼容性问题，
//第二种比较常用。交互效果比较流畅
- 调整创建大小事件
winidow.onresize = function(){}
window.addEventListner('resize',function(){});
我们经常用它完成一些相应式布局
// 注册页面加载事件
window.addEventListener('load', function() {
var div = document.querySelector('div');
// 注册调整窗口大小事件
window.addEventListener('resize', function() {
// window.innerWidth 获取窗口大小
console.log('变化了');
if (window.innerWidth <= 800) {
div.style.display = 'none';
} else {
div.style.display = 'block';
}
})
})
2.4 定时器（两种）
这个非常重要！！！有两种，
window.setTimeout(调用函数，延迟事件（毫秒计ms）)，其中哈，这个传入的函数也叫回调函数
window.setInterval()也是一样的
代码示例：
- 使用定时器
<script>
// 1.第一个定时器
// 回调函数是一个匿名函数
setTimeout(function() {
console.log('时间到了');
}, 2000);
function callback() {
console.log('爆炸了');
}
// 回调函数是一个有名函数
var timer1 = setTimeout(callback, 3000);
var timer2 = setTimeout(callback, 5000);
// 2.第二个定时器，闹钟定时器，意思就和闹钟一样，隔一段事件响一下
// . setInterval
setInterval(function() {
console.log('继续输出');
}, 1000);
</script>
- 拿掉定时器
<!-- clearTimeout()就完事了， -->
<button>点击停止定时器</button>
<script>
var btn = document.querySelector('button');
// 开启定时器
var timer = setTimeout(function() {
console.log('爆炸了');
}, 5000);
// 给按钮注册单击事件
btn.addEventListener('click', function() {
// 停止定时器
clearTimeout(timer);
})
</script>
2.5 this指向问题
现阶段我们需要理解的就是在普通函数里面this指向window。
在方法中，指向调用者
2.6 location对象
location对象，可以解析，地址栏里面的一些url参数，这个在后期开发很重要！
- 关于http还有URl请百度，一些吧
- 这里是location对象的属性，还有常见的方法
href和search很重要！！！
代码示例
# 1.事件到达自动跳转页面
<button>点击</button>
<div></div>
<script>
var btn = document.querySelector('button');
var div = document.querySelector('div');
btn.addEventListener('click', function() {
// console.log(location.href);
location.href = 'http://www.itcast.cn';
})
var timer = 5;
setInterval(function() {
if (timer == 0) {
location.href = 'http://www.itcast.cn';
} else {
div.innerHTML = '您将在' + timer + '秒钟之后跳转到首页';
timer--;
}
}, 1000);
</script>
# 2. 从地址中拿参数
<div></div>
<script>
console.log(location.search); // ?uname=andy
// 1.先去掉？ substr('起始的位置'，截取几个字符);
var params = location.search.substr(1); // uname=andy
console.log(params);
// 2. 利用=把字符串分割为数组 split('=');
var arr = params.split('=');
console.log(arr); // ["uname", "ANDY"]
var div = document.querySelector('div');
// 3.把数据写入div中
div.innerHTML = arr[1] + '欢迎您';
</script>
2.7 navigator对象
这个包含浏览器的所有信息
- 属性太多太多了，常见的常用的有哪些，userAgent,这个里面包含了很多信息，你可以去翻阅文档
代码实例-判断用户拿什么访问的网站，从而调用不同的地址去访问
if((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i))) {
window.location.href = ""; //手机
} else {
window.location.href = ""; //电脑
}
2.8 history对象
在这里，仅仅是一些简要的说明，
3.JS执行的机制，还有js的线程问题！
- js的任务有分两种
JS中所有任务可以分成两种，一种是同步任务（synchronous），另一种是异步任务（asynchronous）。 同步任务指的是： 在主线程上排队执行的任务，只有前一个任务执行完毕，才能执行后一个任务； 异步任务指的是： 不进入主线程、而进入”任务队列”的任务，当主线程中的任务运行完了，才会从”任务队列”取出异步任务放入主线程执行。
- 异步任务有？
普通的时间，资源加载load ,定时器，还有回调函数，当然了还有一些，你可以去MDN文档查阅
- 执行顺序，
先同步，再异步。对于异步任务的执行顺序，还得看实际的代码。去分析。
但是有一点是可以确定的，在同步任务的队列中，执行完同步任务，js会回去看任务队列里面的异步任务，如果有，就拿到执行栈中去执行。
