Web API(4)

键盘事件

常见的键盘事件

onkeyup:键盘按键按下被松开时触发
onkeydown:键盘按键被按下时触发
onkeypress:键盘按键被按下时触发（不识别ctrl shift功能键）

三个事件的执行顺序：onkeydown----onkeypress---onkeyup

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
    <script type="text/javascript">
            
        document.addEventListener('keydown',function(e){
            console.log('键盘按键被按下了keydown')
        })
        
            
        document.addEventListener('keypress',function(e){
            console.log('键盘被按下了 press')
        })
        
            
        document.addEventListener('keyup',function(){
            console.log('键盘按键按下被松开了 keyup')
        })
    </script>
    </body>
    
</html>

键盘事件对象

keyCode:返回该键的AScll码

注意

onkeydown和onkeyup不区分大小写，onkeypress区分字母的大小写
在我们实际开发中我们更多的使用keydown和keyup，他能识别所有的功能键
keypress不识别功能键，但是keyCode属性能区分大小写，返回不同的ASCI值

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
</head>

<body>
    <script>
        // 键盘事件对象中的keyCode属性可以得到相应键的ASCII码值

        document.addEventListener('keyup', function(e) {
            console.log(e.keyCode);
            if (e.keyCode === 65) {
                alert("按下a键")
            } else {
                alert('没按下a键')
            }
        })


        document.addEventListener('keypress', function(e) {
            console.log(e.keyCode)
        });
        document.addEventListener('keydown', function(e) {
            console.log(e.keyCode)
        })
    </script>>
</body>

</html>

模拟京东按键输入内容

当我们按下s键光标就自动定位到搜索框里面

思路如下
1.检测用用户是否按下s建，如果按下s键，就把光标定位到搜索框里面
2.使用键盘事件中的keyCod来判断用户是否按下s键
3.搜索框获得焦点：使用js中的focus（）方法

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <input type="text">
    <script>
        var search = document.querySelector('input');
        document.addEventListener('keyup', function(e) {
            // 打印s键相对应的ASCI嘛
            console.log(e.keyCode);
            if (e.keyCode === 83) {
                search.focus()
            }
        })
    </script>
</body>

</html>

仿京东快递单号查询

1.快递单号输入内容时，上面的大号盒子con显示
2.同时把快递单号里面的值（value）赋值给con盒子(innerText)作为内容
3.如果快递单号为空，则隐藏大号字体盒子(con)盒子
4.当我们失去焦点，就隐藏con盒子
5.当我们获得焦点，并且文本框内容不为空，就显示这个盒子。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        .search {
            position: relative;
            width: 600px;
            margin: 200px auto;
        }
        
        .con {
            position: absolute;
            top: -34px;
            left: -4px;
            width: 200px;
            height: 25px;
            border: 1px solid #3c3c3c;
            margin-bottom: 10px;
        }
        
        .con::after {
            position: absolute;
            top: 24px;
            left: 0;
            content: '';
            width: 0;
            height: 0;
            border: 10px solid transparent;
            border-top: 10px solid #000000;
            /* 照顾兼容性 */
            line-height: 0;
            font-size: 0;
        }
    </style>
</head>

<body>
    <div class="search">
        <div class="con"></div>
        <input type="text" class='jd'>
    </div>
    <script>
        var con = document.querySelector('.con');
        var jd = document.querySelector('.jd');
        jd.addEventListener('keyup', function() {
            if (this.value == "") {
                con.style.display = "none"
            } else {
                con.style.display = "block";
                con.innerHTML = this.value
            }
        })

        jd.addEventListener('blur', function() {
            con.style.display = 'none'
        })
        jd.addEventListener('focus', function() {
            if (this.value !== '') {
                con.style.display = "block"
            }
        })
    </script>
</body>

</html>

BOM

BOM:浏览器对象模型，提供访问与操作浏览器交互的接口与方法，其中BOM包含着DOM.其顶级对象是window
BOM缺乏标准，javascript的标准化组织是ECMA,DOM的标准化组织是W3C,BOM最初是Netscape浏览器标准的一部分。
区别如下

<html>
   <head>
       <meta charset="utf-8">
       <title></title>
   </head>
   <body>
       <script>
           var num = 10;
           console.log(window.num);
           
           function fn() {
               console.log('hello')
           }
           window.fn()
       </script>
   </body>
</html>

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title></title>
   </head>
   <body>
       <script>
           var num = 10;
           console.log(window.num);
           
           function fn() {
               console.log('hello')
           }
           window.fn()
       </script>
   </body>
</html>

window常见事件

窗口加载事件

window.onload 页面内容加载完毕，其中包括css flash dom元素图片等
document.DOMContentloaded: DOM加载完毕，不包括css falsh 图片等等，加载速度比较快，但有兼容性

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>

</head>
<script>
    window.addEventListener('load', function() {
        var bth = document.querySelector('button');
        bth.addEventListener('click', function() {
            alert("onload")
        })
    });
    
        
    document.addEventListener('DOMContentLoaded',function(){
        var bth = document.querySelector('button');
            
        bth.addEventListener('click',function(){
            alert('DOMContentLoaded')
        })
    })
</script>

<body>
    <button>按钮</button>
</body>

</html>

窗口大小加载事件

window.onresize = function(){};
windows.addEventListener('resize',function(){})

windows.onresize:是调整窗口大小加载事件，当窗口大小发生改变时，则触发该事件

window.innerWidth:可以获取当前屏幕的宽度

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        div {
            width: 400px;
            height: 400px;
            background-color: blueviolet;
            border-radius: 50%;
        }
    </style>
</head>
<script>
    window.addEventListener('load', function() {
        var div = document.querySelector('div');
        window.addEventListener('resize', function() {
            console.log(window.innerWidth);
            if (window.innerWidth <= 800) {
                div.style.display = 'none'
            }
        })
    })
</script>

<body>
    <div></div>
</body>

</html>

定时器

window对象给我们提供2个非常好用的定时器方法

setTimeout()

setInterval()

setTimeout()

window.setTimeout(调用函数，[延迟的毫秒数])；

setTimeout()中的调用函数也被称为回调函数callback

注意事项

1.window可以省略
2.延迟的毫秒数默认为0，如果写，必须是毫秒
3.因为定时器很多，所以我们经常给定时器赋值给一个标识符。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        // 第一种方法
        setTimeout(function() {
            console.log('hello')
        }, 2000)

        // 第二种方法
        function callback() {
            console.log('word')
        }

        var time1 = setTimeout(callback, 5000);
        var time2 = setTimeout(callback, 8000)
    </script>
</body>

</html>

5秒后关闭广告

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<script>
    window.addEventListener('load', function() {
        var img = document.querySelector('img')

        function callback() {
            img.style.display = 'none'
        }

        setTimeout(callback, 2000)
    })
</script>

<body>
    <img src="./image/side.png" alt="">
</body>

</html>

清除定时器

window.clearTimeout(timeoutID)

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        var time = setTimeout(function() {
            console.log("hello word")
        }, 5000);

        clearTimeout(time)
    </script>
</body>

</html>

setInterval()

setInterval(callback,[间隔的毫秒数])

setInterval()是重复调用此函数，每隔一段时间就调用该回调函数

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        setInterval(() => {
            console.log('hello')
        }, 2000);
    </script>
</body>

</html>

倒计时效果

核心思路如下

这个倒计时是不断变化的，因此需要定时器来自动变化
三个黑色盒子分别存放时分秒
三个盒子利用innerHTML放入计算的小时分钟秒数
先调用一次这个函数，防止最开始刷新页面有空白问题

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        .time {
            width: 400px;
            margin: 200px auto;
        }
        
        span {
            display: inline-block;
            width: 100px;
            height: 50px;
            font: 700 normal 20px '微软雅黑';
            text-align: center;
            line-height: 50px;
            color: white;
            background-color: black;
        }
    </style>
</head>

<body>
    <div class="time">
        <span class="hour">1</span>
        <span class="min">2</span>
        <span class="second">3</span>
    </div>

    <script>
        // 获取事件源
        var hour = document.querySelector('.hour');
        var min = document.querySelector('.min');
        var second = document.querySelector('.second');

        var inputTime = +new Date('2020-8-29 14:00:00');
        countDown()
        setInterval(countDown, 1000)

        function countDown(time) {
            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;
            min.innerHTML=m;
            var s = parseInt(times % 60); // 当前的秒
            s = s < 10 ? '0' + s : s;
            second.innerHTML =s; 
        } 
    </script>
</body>

</html>

停止定时器

window.clearInterval(intervalID);

注意事项

window可以省略
里面的参数是代表计时器的标识符

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <button class="star">计时开始</button>
    <button class="end">计时关闭</button>
</body>
<script>
    // 获取事件源
    var star = document.querySelector('.star');
    var end = document.querySelector('.end');
    var time = null;
    star.addEventListener('click', function() {
        timer = setInterval(function() {
            console.log("hello word")
        }, 1000)
    })


    end.addEventListener('click', function() {
        clearInterval(timer)
    })
</script>

</html>

发送短信案例

核心思路
1.按钮点击之后，会禁用disabled为true
2.同时按钮里面的内容会变化，注意button里面的内容通过innerHTML修改
3.里面的秒数是有变化的，因此需要计时器
4.定义一个变量，在计时器里面，不断递减。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        .container {
            width: 800px;
            margin: 200px auto;
        }
    </style>
</head>

<body>
    <div class="container">
        <input type="text"> <button>发送短信</button>
</body>
<script>
    var bth = document.querySelector('button');
    var time = 3;
    bth.addEventListener('click', function() {
        this.disabled = true;
        var timer = setInterval(function() {
            if (time == 0) {
                clearInterval(timer)
                bth.disabled = false;
                bth.innerHTML = '发送';
                time = 3
            } else {
                bth.innerHTML = '还剩下' + time + '秒'
                time--
            }

        }, 1000)


    })
</script>
</div>

</html>

this指向

this的指向在函数定义的时候缺定不了，只有在函数执行的过程中才能确定

this指向

全局作用域下或者普通函数中的this指向window(注意定时器中的this只想window);
方法调用中的谁调用this指向谁
构造函数中的this指向构造函数的实例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <button>按钮</button>
    <script>
        console.log(this) //window
        function fn() {
            console.log(this) //window
        }
        window.fn();


        var o = {
            sayHi: function() {
                console.log(this) //this指向o这个对象
            }
        };
        o.sayHi();
        var bth = document.querySelector('button');
        bth.addEventListener('click', function() {
            console.log(this) //button
        });

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

</html>

js是单线程

javascript语言的一大特点就是单线程，也就是说，同一个时间只能做一件事。

单线程语言意味着，所有的任务都需要排队，前一个任务结束，才会执行后一个任务，如果一个任务消耗很长，后一个任务不得不等着。

同步任务

为了解决这个问题，利用cpu的计算能力，HTML5提出web worker标准，允许javascript脚本创建多个线程

同步任务

必须等到上一个任务结束之后，才能执行下一个任务

异步

在执行上一个任务同时，还可以执行其它的任务

本质区别：流水线上的各个流程的执行顺序不同

js单线程

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        console.log(1);
        setTimeout(function() {
            console.log(3)
        }, 1000);
        console.log(2);
    </script>
</body>

</html>

js单线程

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        console.log(1);

        setTimeout(function() {
            console.log(3);
        }, 0);

        console.log(2);
    </script>
</body>

</html>

js的执行机制

同步任务

同步任务都在主线程上执行，形成一个执行栈

异步任务
js的异步任务是通过回调函数实现的
一般而言，异步任务有三种类型
1.普通事件如onclick resize等等
2.资源加载如load,error等
3.定时器，包括setInterval,setTimeout等
异步任务相关的回调函数添加到任务队列中（任务队列也称为消息队列）

js的循环机制

由于主线程不断重复的获得任务，执行任务，再获取任务，再执行，这种机制叫做事件循环

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        console.log(1);
        document.onclick = function() {
            console.log('click')
        }
        setTimeout(function() {
            console.log(3)
        }, 3000);
        console.log(2)
    </script>
</body>

</html>

location对象

window对象给我们提供了一个location属性用于获取或设置窗体的URL

URL

URL:统一资源定位符，是互联网上标准资源的地址

格式

京东案例

5秒之后跳往首页

利用定时器做倒计时效果
时间到了，就自动跳往首页，用loaction.herf

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <button>点击</button>
    <p></p>
</body>
<script>
    var bth = document.querySelector('button');
    var p = document.querySelector('p');

    bth.onclick = function() {
        location.href = 'https://www.baidu.com/'
    }
    var time = 5;
    setInterval(function() {

        if (time == 0) {
            location.href = 'https://www.baidu.com/'
        } else {
            p.innerHTML = '还剩' + time + '秒钟跳往首页';
            time--
    }, 1000)
</script>

</html>

获取URL参数

login.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <form action="index.html">
        用户：<input type="text" name="unmame" id="" autocomplete="off">
        <input type="submit" value="登录">
    </form>
</body>

</html>

index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div></div>
    <script>
        // 获取location属性；
        var pathname = location.search.substr(1);
        console.log(pathname)
        var arr = pathname.split('=');
        console.log(arr);
        var div = document.querySelector('div')
        div.innerHTML = arr[1] + "欢迎你"
    </script>
</body>

</html>

location对象中的常用方法

location.assign():跟href一样，可以跳转页面（会记录历史）;
location.replace():替换当前页面，因为不记录历史，所以不能后退页面
location.reload():重新加载页面，相当于刷新按钮或者F5，如果参数为true，则强制刷新；

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <button>按钮</button>
    <script>
        var bth = document.querySelector('button');
        bth.addEventListener('click', function() {
            location.assign("http://www.alloyteam.com/nav/");

        })
    </script>
</body>

</html>

navigator对象

下面前端代码可以判断用户那个终端打开页面，实现跳转

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对象，与浏览器历史记录进行交互。

history.forword()：前进
history.back()：后退
history.go(参数)，参数如果为1，则前进一个页面，参数如果为-1，则后退一个页面。

注意:以下文件位于同一目录中,history对象一般在OA办公系统中用的比较多

index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <a href="list.html">点我前往列表页 </a>;
    <button>前进</button>
    <script>
        var bth = document.querySelector('button')
        bth.addEventListener('click', function() {
            history.forward()
        })
    </script>
</body>

</html>

list.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <a href="index.html">点我前往首页 </a>;
    <button>后退</button>
    <script>
        var bth = document.querySelector('button');
        console.log(bth)
        bth.addEventListener('click', function() {
            history.back()
        })
    </script>
</body>

</html>

Web API(4)

键盘事件

常见的键盘事件

键盘事件对象

模拟京东按键输入内容

仿京东快递单号查询

BOM

window常见事件

窗口加载事件

窗口大小加载事件

定时器

setTimeout()

5秒后关闭广告

清除定时器

setInterval()

倒计时效果

停止定时器

发送短信案例

this指向

js是单线程

同步任务

同步任务

异步

js单线程

js单线程

js的执行机制

js的循环机制

location对象

URL

京东案例

5秒之后跳往首页

获取URL参数

location对象中的常用方法

navigator对象

history对象

已注销

引用和评论

Vue