JavaScript APIs-第四天（B站黑马程序员）

一、事件高级（接第三天）

1、keyup / keydown / keypress

执行顺序为标号顺序

// 常用的键盘事件
//1. keyup 按键弹起的时候触发 
// document.onkeyup = function() {
//         console.log('我弹起了');
//     }
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');
})

2、keyCode属性

// 键盘事件对象中的keyCode属性可以得到相应键的ASCII码值
// 1. 我们的keyup 和keydown事件不区分字母大小写  a 和 A 得到的都是65
// 2. 我们的keypress 事件 区分字母大小写  a  97 和 A 得到的是65
document.addEventListener('keyup', function (e) {
    // console.log(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);
})

 3、案例1：模拟京东按键输入内容

// 核心思路： 检测用户是否按下了s 键，如果按下s 键，就把光标定位到搜索框里面
// 使用键盘事件对象里面的keyCode 判断用户按下的是否是s键
// 搜索框获得焦点： 使用 js 里面的 focus() 方法
var search = document.querySelector('input');
document.addEventListener('keyup', function (e) {
    // console.log(e.keyCode);
    if (e.keyCode === 83) {
        search.focus();
    }
})

4、案例2：模拟京东快递单号查询

// 快递单号输入内容时， 上面的大号字体盒子（con）显示(这里面的字号更大）
// 表单检测用户输入： 给表单添加键盘事件
// 同时把快递单号里面的值（value）获取过来赋值给 con盒子（innerText）做为内容
// 如果快递单号里面内容为空，则隐藏大号字体盒子(con)盒子
var con = document.querySelector('.con');
var jd_input = document.querySelector('.jd');
jd_input.addEventListener('keyup', function () {
    // console.log('输入内容啦');
    if (this.value == '') {
        con.style.display = 'none';
    } else {
        con.style.display = 'block';
        con.innerText = this.value;
    }
})
// 当我们失去焦点，就隐藏这个con盒子
jd_input.addEventListener('blur', function () {
    con.style.display = 'none';
})
// 当我们获得焦点，就显示这个con盒子
jd_input.addEventListener('focus', function () {
    if (this.value !== '') {
        con.style.display = 'block';
    }
})

二、BOM概述

BOM(Browser Object Model)即浏览器对象模型，它提供了独立于内容而与浏览器窗口进行交互的对象，其核心对象是 window。
BOM 由一系列相关的对象构成，并且每个对象都提供了很多方法与属性。BOM 缺乏标准，JavaScript语法的标准化组织是ECMA，DOM 的标准化组织是W3C，BOM 最初是Netscape 浏览器标准的一部分。

BOM比DOM更大，它包含DOM。

window 对象是浏览器的顶级对象，它具有双重角色。
1.它是 JS 访问浏览器窗口的一个接口。
2.它是一个全局对象。定义在全局作用域中的变量、函数都会变成 window 对象的属性和方法。在调用的时候可以省略 window,前面学习的对话框都属于 window 对象方法,如 alert0)、prompt0 等。注意:window下的一个特殊属性 window.name

三、window对象的常见事件

1、窗口加载事件

load / DOMContentLoaded

window.addEventListener('load', function () {
    var btn = document.querySelector('button');
    btn.addEventListener('click', function () {
        alert('点击我');
    })
})
window.addEventListener('load', function () {
    alert(22);
})
document.addEventListener('DOMContentLoaded', function () {
    alert(33);
})
// load 等页面内容全部加载完毕，包含页面dom元素 图片 flash  css 等等
// DOMContentLoaded 是DOM 加载完毕，不包含图片 falsh css 等就可以执行 加载速度比 load更快一些

2、调整窗口大小事件

window.addEventListener('load', function () {
    var div = document.querySelector('div');
    window.addEventListener('resize', function () {
        console.log(window.innerWidth);
        console.log('变化了');
        if (window.innerWidth <= 800) {
            div.style.display = 'none';
        } else {
            div.style.display = 'block';
        }
    })
})

四、定时器

1、setTimeout()

语法规范：  window.setTimeout(调用函数, 延时时间);
1. 这个window在调用的时候可以省略
2. 这个延时时间单位是毫秒 但是可以省略，如果省略默认的是0
3. 这个调用函数可以直接写函数 还可以写 函数名 还有一个写法 '函数名()'
4. 页面中可能有很多的定时器，我们经常给定时器加标识符 （名字)

function callback() {
    console.log('爆炸了');
}
var timer1 = setTimeout(callback, 3000);
var timer2 = setTimeout(callback, 5000);
// setTimeout('callback()', 3000); // 我们不提倡这个写法

案例：5秒之后自动关闭的广告

var ad = document.querySelector('.ad');
setTimeout(function () {
    ad.style.display = 'none';
}, 5000);

 清楚定时器clearTimeout();

var btn = document.querySelector('button');
var timer = setTimeout(function () {
    console.log('爆炸了');
}, 5000);
btn.addEventListener('click', function () {
    clearTimeout(timer);
})

2、setInterval()

语法规范：  window.setInterval(调用函数, 延时时间)

setInterval(function () {
    console.log('继续输出');
}, 1000);

案例：倒计时效果

// 1. 获取元素 
var hour = document.querySelector('.hour'); // 小时的黑色盒子
var minute = document.querySelector('.minute'); // 分钟的黑色盒子
var second = document.querySelector('.second'); // 秒数的黑色盒子
var inputTime = +new Date('2019-5-1 18:00:00'); // 返回的是用户输入时间总的毫秒数
countDown(); // 我们先调用一次这个函数，防止第一次刷新页面有空白 
// 2. 开启定时器
setInterval(countDown, 1000);
function countDown() {
    var nowTime = +new Date(); // 返回的是当前时间总的毫秒数
    var times = (inputTime - nowTime) / 1000; // times是剩余时间总的秒数 
    var h = parseInt(times / 60 / 60 % 24); //时
    h = h < 10 ? '0' + h : h;
    hour.innerHTML = h; // 把剩余的小时给 小时黑色盒子
    var m = parseInt(times / 60 % 60); // 分
    m = m < 10 ? '0' + m : m;
    minute.innerHTML = m;
    var s = parseInt(times % 60); // 当前的秒
    s = s < 10 ? '0' + s : s;
    second.innerHTML = s;
}

 清除clearInterval()；

var begin = document.querySelector('.begin');
var stop = document.querySelector('.stop');
var timer = null; // 全局变量  null是一个空对象
begin.addEventListener('click', function() {
    timer = setInterval(function() {
        console.log('ni hao ma');
    }, 1000);
})
stop.addEventListener('click', function() {
    clearInterval(timer);
})

案例：发送短信

// 按钮点击之后，会禁用 disabled 为true 
// 同时按钮里面的内容会变化， 注意 button 里面的内容通过 innerHTML修改
// 里面秒数是有变化的，因此需要用到定时器
// 定义一个变量，在定时器里面，不断递减
// 如果变量为0 说明到了时间，我们需要停止定时器，并且复原按钮初始状态
var btn = document.querySelector('button');
var time = 3; // 定义剩下的秒数
btn.addEventListener('click', function () {
    btn.disabled = true;
    var timer = setInterval(function () {
        if (time == 0) {
            // 清除定时器和复原按钮
            clearInterval(timer);
            btn.disabled = false;
            btn.innerHTML = '发送';
            time = 3;
        } else {
            btn.innerHTML = '还剩下' + time + '秒';
            time--;
        }
    }, 1000);
})

区别：setTimeout  延时时间到了，就去调用这个回调函数，只调用一次 就结束了这个定时器；
setInterval  每隔这个延时时间，就去调用这个回调函数，会调用很多次，重复调用这个函数 。

五、JS执行队列

JS执行机制：

1.先执行执行栈中的同步任务
2.异步任务(回调函数)放入任务队列中
3.一旦执行栈中的所有同步任务执行完毕,系统就会按次序读取任务队列中的异步任务，于是被读取的异步任务结束等待状态，进入执行栈，开始执行

由于主线程不断的重复获得任务、执行任务、再获取任务、再执行，所以这种机制被称为事件循环（ event loop）。

六、this指向问题

1. 全局作用域或者普通函数中this指向全局对象window（ 注意定时器里面的this指向window）

console.log(this);
function fn() {
    console.log(this);
}
window.fn();
window.setTimeout(function () {
    console.log(this);
}, 1000);

2. 方法调用中this指向调用对象

var o = {
    sayHi: function () {
        console.log(this); // this指向的是 o 这个对象
    }
}
o.sayHi();

var btn = document.querySelector('button');
// btn.onclick = function() {
//     console.log(this); // this指向的是btn这个按钮对象
// }

btn.addEventListener('click', function () {
    console.log(this); // this指向的是btn这个按钮对象
})

3. 构造函数中this指向构造函数的实例

function Fun() {
    console.log(this); // this 指向的是fun 实例对象
}
var fun = new Fun();

七、location对象

window 对象给我们提供了一个 location 属性用于获取或设置窗体的 URL ，因为这个属性返回的是一个对象，所以我们将这个属性也称为 location 对象，并且可以用于解析 URL 。

 

案例：5秒后自动跳转页面

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);

 案例：获取URL参数数据

<form action="index.html">
    用户名： <input type="text" name="uname">
    <input type="submit" value="登录">
</form>

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] + '欢迎您';

 location对象的方法

 

var btn = document.querySelector('button');
btn.addEventListener('click', function () {
    // 记录浏览历史，所以可以实现后退功能
    // location.assign('http://www.itcast.cn');
    // 不记录浏览历史，所以不可以实现后退功能
    // location.replace('http://www.itcast.cn');
    location.reload(true);
})

八、navigator对象

navigator 对象包含有关浏览器的信息,它有很多属性，我们最常用的是 userAgent,该属性可以返回由客户机发送服务器的 user-agent 头部的值。
下面前端代码可以判断用户那个终端打开页面，实现跳转。

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 = ""; //电脑
}

九、history对象

window 对象给我们提供了一个 history 对象,与浏览器历史记录进行交豆。该对象包含用户(在浏览器窗口中)访问过的 URL。history 对象一般在实际开发中比较少用，但是会在一些 OA 办公系统中见到。

var btn = document.querySelector('button');
btn.addEventListener('click', function() {
    // history.back();
    history.go(-1);
})

var btn = document.querySelector('button');
btn.addEventListener('click', function() {
    // history.forward();
    history.go(1);
})