Web APIs(四)

最新推荐文章于 2024-06-10 22:18:41 发布
最新推荐文章于 2024-06-10 22:18:41 发布
阅读量126 收藏
点赞数
分类专栏： # Web APIs 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45419127/article/details/117773781
版权

键盘事件

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

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

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>键盘事件</title>
</head>

<body>
</body>
<script>
    document.addEventListener('keydown', function() {
        console.log('keydown', ' 键盘按下啦');

    })
    document.addEventListener('keypress', function() {
        console.log('keypress', '键盘按下啦');

    })
    document.addEventListener('keyup', function() {
        console.log('keyup', '键盘按下又松开了');

    })
</script>

</html>

在这里插入图片描述

区别如下

  • onkeydown onkeyup识别功能键(ctrl shift) 但不区分字母大小写
  • onkeypress区分大小写 但不识别功能键
  • 实际开发中 主要使用onkeyup与onkeypress

键盘事件对象之keyCode属性

e.keyCode:获得按键的ASCII码值


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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>键盘事件对象之keyCode属性</title>
</head>

<body>

</body>
<script>
    document.addEventListener('keydown', function(e) {
        console.log(e.keyCode);
        if (e.keyCode === 65) {
            alert('按下a键')
        } else {
            alert('没按下a键')
        }
    })
</script>

</html>

在这里插入图片描述

模拟京东按键输入内容

当用户按下s键 光标就自动定位到文本框里面

思路如下

  • 1.检测用用户是否按下s建，如果按下s键，就把光标定位到文本框里面
  • 2.使用键盘事件中的keyCode来判断用户是否按下s键
  • 3.文本框获得焦点：使用js中的focus（）方法
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>模拟京东按键输入内容</title>
</head>

<body>
    <input type="text">
</body>
<script>
    var ipt = document.querySelector('input');
    document.addEventListener('keyup', function(e) {
        console.log(e.keyCode);
        if (e.keyCode === 83) {
            ipt.focus()
        }
    })
</script>

</html>

在这里插入图片描述

仿京东快递单号查询

1.快递单号输入内容时，上面的大号盒子con显示

2.同时把快递单号里面的值（value）赋值给con盒子(innerHTML)作为内容

3.如果快递单号为空，则隐藏大号字体盒子(con)盒子

4.当我们失去焦点，就隐藏con盒子

5.当我们获得焦点，并且文本框内容不为空，就显示这个盒子。


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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>仿京东快递单号查询</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        .search {
            position: relative;
            width: 400px;
            margin: 200px auto;
        }
        
        .con {
            position: absolute;
            display: none;
            left: 0px;
            top: -74px;
            width: 400px;
            height: 60px;
            font-size: 40px;
            border: 1px solid #ccc;
        }
        
        .con::after {
            position: absolute;
            left: 0;
            top: 60px;
            content: '';
            width: 0px;
            height: 0px;
            border: 10px solid transparent;
            border-top: 10px solid #ccc;
            line-height: 0;
            font-size: 0;
        }
        
        .search input {
            display: block;
            outline: none;
            width: 400px;
        }
    </style>
</head>

<body>
    <div class="search">
        <div class="con"></div>
        <input type="text">
    </div>
</body>
<script>
    // 获取事件源
    var con = document.querySelector('.con');
    var ipt = document.querySelector('input');
    //事件处理程序
    ipt.addEventListener('keyup', function(e) {
        if (ipt.value == '') {
            con.style.display = 'none'
        } else {
            con.style.display = 'block';
            con.innerHTML = this.value;
        }
    })

    // 表单获取焦点与失去焦点事件
    ipt.addEventListener('focus', function(e) {
        if (this.value !== '') {
            con.style.display = 'block';
        }

    })

    ipt.addEventListener('blur', function(e) {
        con.style.display = 'none';
        this.value = ''
    })
</script>

</html>

在这里插入图片描述

DOM

BOM:浏览器对象模型，提供访问与操作浏览器交互的接口与方法，其中BOM包含着DOM.其顶级对象是window

BOM缺乏标准

  • javascript的标准化组织是ECMA
  • DOM的标准化组织是W3C
  • BOM最初是Netscape浏览器标准的一部分。

DOM与BOM的区别

在这里插入图片描述

BOM顶级对象之window

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>BOM之顶级对象window</title>
</head>

<body>

</body>
<script>
    var num = 10;
    console.log(window.num);

    function fn() {
        console.log('Hello Word');
    }
    window.fn()
</script>

</html>

在这里插入图片描述

window常见对象

窗口加载事件

window.onload 页面内容加载完毕，其中包括css flash dom元素 图片等

document.DOMContentloaded: DOM加载完毕，不包括css falsh 图片等等，加载速度比较快，但有兼容性

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>窗口加载事件</title>
</head>
<script>
    window.addEventListener('load', function(e) {
        var bth = document.querySelector('button');
        bth.addEventListener('click', function() {
            alert('load')
        })

    })

    window.addEventListener('DOMContentLoaded', function(e) {
        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 http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>调整窗口大小事件</title>
    <style>
        div {
            width: 400px;
            height: 400px;
            background-color: red;
        }
    </style>
</head>
<script>
    window.addEventListener('load', function() {
        var box = document.querySelector('div');
        console.log(box);
        window.addEventListener('resize', function() {
            console.log(window.innerWidth);
            // 窗口尺寸小于或等于900  盒子隐藏 反之则显示
            if (window.innerWidth <= 900) {
                box.style.display = 'none'
            } else {
                box.style.display = 'block'
            }
        })
    })
</script>

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

</html>

在这里插入图片描述

定时器

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

  • setTimeout()

  • setInterval()

setTimeout()

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

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

注意事项

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

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>setTimeout</title>
</head>

<body>

</body>
<script>
    setTimeout(function() {
        console.log('惊鸿一面');
    }, 2000)

    setTimeout(callback, 4000);
    setTimeout(callback, 8000);

    function callback() {
        console.log('临风笑却时间');
    }
</script>

</html>

在这里插入图片描述

定时器之5秒之后关闭图像

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>定时器之5秒之后关闭图像</title>
    <style>
        img {
            width: 400px;
        }
    </style>
</head>

<body>
    <img src="./images/desktop.jpg" alt="">
</body>
<script>
    setTimeout(function() {
        var img = document.querySelector('img');
        img.style.display = 'none'
    }, 5000)
</script>

</html>

在这里插入图片描述

清除定时器

window.clearTimeout(timeoutID)

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>清除定时器</title>
</head>

<body>
    <button>开始</button>
    <button>结束</button>
</body>
<script>
    var star = document.querySelectorAll('button')[0];
    var end = document.querySelectorAll('button')[1];
    console.log(star);
    console.log(end);
    var time = null;

    star.addEventListener('click', function() {
        time = setTimeout(function() {
            alert('hello')
        }, 5000);

    })
    end.addEventListener('click', function() {
        clearTimeout(time)
    })
</script>

</html>

在这里插入图片描述

setInterval()

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

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

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>setInteraval</title>
</head>

<body>

</body>
<script>
    setInterval(function() {
        console.log('Hello Word');
    }, 1000)
</script>

</html>

在这里插入图片描述

定时器之倒计时效果

核心思路如下

  • 倒计时是不断变化的，因此需要定时器来实现自动变化的效果
  • 三个黑色盒子分别存放时分秒 利用innerHTML将数据存入盒子
  • 先调用一次这个函数，防止最开始刷新页面有空白问题
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>倒计时</title>
    <style>
        .time {
            width: 300px;
            margin: 200px auto;
        }
        
        span {
            display: inline-block;
            width: 40px;
            height: 40px;
            color: #fff;
            background-color: rgb(0, 0, 0);
            text-align: center;
            line-height: 40px;
        }
    </style>
</head>

<body>
    <div class="time">
        <span class="day">天</span>
        <span class="hour"></span>
        <span class="min"></span>
        <span class="second"></span>
    </div>
</body>
<script>
    window.addEventListener('load', function() {
        var day = document.querySelector('.day');
        var hour = document.querySelector('.hour')
        var min = document.querySelector('.min')
        var second = document.querySelector('.second');

        var inputTime = +new Date('2021-7-25 18:00');
        countTime();
        setInterval(countTime, 1000)

        function countTime() {
            var nowTime = +new Date();
            var times = (inputTime - nowTime) / 1000;
            var d = parseInt((times / 60 / 60 / 24));
            d = d < 10 ? '0' + d : d;
            day.innerHTML = d + "天"
            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>

</html>

在这里插入图片描述

清除定时器

清除定时器：clearInterval(intervalID)



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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>清除定时器</title>
</head>

<body>
    <button>开始</button>
    <button>结束</button>
</body>
<script>
    var star = document.querySelectorAll('button')[0];
    var end = document.querySelectorAll('button')[1];
    console.log(star);
    console.log(end);
    var time = null;

    star.addEventListener('click', function() {
        time = setInterval(function() {
            console.log('Hello Word');
        }, 1000);

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

</html>

在这里插入图片描述

定时器之发送短信的案例

核心思路

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


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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>定时器之发送短信案例</title>
</head>

<body>
    <input type="number" name="" id=""> <button>提交</button>
</body>
<script>
    // 获取事件源
    var ipt = document.querySelector('input');
    var bth = document.querySelector('button');
    var time = 3;
    // 事件处理程序
    bth.addEventListener('click', function() {
        bth.disabled = true;
        var timer = setInterval(function() {
            if (time == 0) {
                clearInterval(timer);
                bth.innerHTML = '提交';
                bth.disabled = false;
                time = 3;

            } else {
                bth.innerHTML = '还剩下' + time + '秒';
                time--;

            }
        }, 1000)
    })
</script>

</html>

在这里插入图片描述

this指向

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

this指向

  • 全局作用域的this 普通函数的this 定时器中的this指向window
  • 方法调用 this指向调用的对象
  • 构造函数中的this 指向构造函数中的实例对象；
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>this指向</title>
</head>

<body>
    <button>提交</button>
</body>
<script>
    var bth = document.querySelector('button');
    // 全局作用域的this 普通函数的this  定时器中的this指向window
    console.log(this); //window;
    function fn() {
        console.log(this); //this
    };
    fn()

    setTimeout(() => {
        console.log(this);
    }, 2000);

    // 方法调用 this指向调用的对象
    var o = {
        sayHello: function() {
            console.log(this); //o
        }
    }
    o.sayHello()

    bth.addEventListener('click', function() {
        console.log(this); //button
    })

    // 构造函数中的this 指向构造函数中的实例对象；
    function Fun() {
        console.log(this);//fun
    }
    var fun = new Fun();
</script>

</html>

在这里插入图片描述

js是单线程

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

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

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

同步

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

异步

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

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

js单线程

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>js是单线程</title>
</head>

<body>

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

</html>

在这里插入图片描述

js的执行机制

同步任务

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

异步任务
js的异步任务是通过回调函数实现的
一般而言，异步任务有三种类型
1.普通事件 如onclick resize等等
2.资源加载 如load,error等
3.定时器，包括setInterval,setTimeout等

异步任务相关的回调函数添加到任务队列中（任务队列也称为消息队列）

在这里插入图片描述

js事件循环机制

由于主线程不断重复的获得任务，执行任务，再获取任务，再执行，这种机制叫做事件循环
在这里插入图片描述

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>js事件循环进制</title>
</head>

<body>

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

</html>

在这里插入图片描述

location对象

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

URL

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

格式

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

location对象之5秒后跳往新页面

需要用到定时器 并且5秒之后更换location.href的地址即可


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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>location对象之5秒之后跳往新页面</title>
</head>

<body>
    <button>跳往</button>
    <div></div>
</body>
<script>
    var bth = document.querySelector('button');
    var div = document.querySelector('div');
    var time = 5;
    Time(); //先调用一次 防止刷新页面空白

    function Time() {
        bth.addEventListener('click', function() {
            setInterval(() => {
                if (time == 0) {
                    location.href = 'https://www.csdn.net/'
                } else {
                    div.innerHTML = '还剩下' + time + '秒'
                    time--
                }
            }, 1000);
        })
    }
</script>

</html>

在这里插入图片描述

获取url参数

Vs code必须要下载Live Serve插件 使用Live Search插件打开页面

主要练习数据在不同页面的传递

1.利用substr()方法截取location.search参数
2.利用split(‘=’)把截取过来的参数转换成数组
3.把数组的第一项赋值给首页中的div元素

login.html

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登陆页面</title>
</head>

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

</body>

</html>

index.html

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>首页页面</title>
</head>

<body>
    <div></div>
</body>
<script>
    var div = document.querySelector('div');
    // 第一步：利用substr()方法截取location.href参数
    var pathname = location.search.substr(1);
    //第二步：利用split(‘=’)把截取过来的参数转换成数组
    var arr = pathname.split('=');
    console.log(arr);
    //第三步：把数组的第一项赋值给首页中的div元素
    div.innerHTML = arr[1] + "<b>欢迎你</b>"
</script>

</html>

在这里插入图片描述

location对象中的常用方法

在这里插入图片描述

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>location对象中的其它方法</title>
</head>

<body>
    <button>提交</button>
</body>
<script>
    var bth = document.querySelector('button');
    bth.addEventListener('click', function() {
        location.assign('https://www.csdn.net/')
    })
</script>

</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 http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>首页</title>
</head>

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

</html>

list.html

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>列表页</title>
</head>

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

</html>

在这里插入图片描述

「已注销」
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript核心Web APIs
weixin_58997863的博客
08-23 607
前端学习之 JavaScript核心WebAPIs 学完JavaScript基础，就可以学习JavaScript核心 DOM 和 BOM操作了，真正体会JavaScript的魅力，本文会讲解如何获取DOM元素，如何操作DOM 元素，BOM操作， 事件，事件对象，事件委托，JS执行队列，定时器，常见网页特效，比如轮播图，tab栏切换等。 还会讲解移动端如何制作网页特效，带你进入JavaScript的实际开发应用。
Web APIs.xmind
12-05
- API（Application Programming Interface）应用程序编程==接口==（暴露出来的工具）。 - webAPI：浏览器平台对外公开的提供操作浏览器和网页的接口（BOM、DOM
Web APIs
chinusyan的专栏
05-04 701
Web APIs 主要学习 DOM 和 BOM Web APIs are typically used with JavaScript, although this doesn’t always have to be the case. 一、Web API API（Application Programming Interface，应用程序编程接口）是一些预先定义的函数，目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力，而又无需访问源码，无需理解其内部工作机制细节，只需直接调用使用即可
JavaScript——Web APIs
蟹黄堡
05-22 258
JS的组成 JavaScript由ECMAScript（JavaScript基础）、DOM和BOM（Web APIs）组成。 其中，JavaScript基础是ECMAScript标准规定的基本语法；而Web APIs是W3C组织的标准。 API和Web API API（应用程序编程接口）是一些预先定义的函数，目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力，而又无需访问源码或理解内部工作机制的细节。 Web API是浏览器提供的一套操作浏览器功能和页面元素的API（BOM和DOM）。
Web APIs第四天
weixin_44235471的博客
10-23 153
day04 - Web APIs 学习目标： 能够说出常用的3-5个键盘事件 能够知道如何获取当前键盘按下的是哪个键 能够知道浏览器的顶级对象window 能够使用window.onload事件 能够使用window.onresize事件 能够说出两种定时器的区别 能够使用location对象的href属性完成页面之间的跳转 能够使用location对象获取url中的参数部分 能够使用history提供的方法实现页面刷新 1.1. 常用的键盘事件 1.1.1 键盘事件 <script&
Web APIs 简介
喔吼吼吼
08-11 577
1. Web APIs 和 JS 基础关联性 1.1 JS 的组成 1.2 JS 基础阶段以及 Web APIs 阶段 JS 基础学习 ECMAScript 基础语法为后面作铺垫， Web APIs 是 JS 的应用，大量使用 JS 基础语法做交互效果 JS 基础阶段 我们学习的是 ECMAScript 标准规定的基本语法 要求同学们掌握 JS 基础语法 只学习基本语法，做不了常用的网页交互效果 目的是为了 JS 后面的课程打基础、做铺垫 Web APIs 阶段 Web APIs 是
WebAPIs-基础知识
qq_31087241的博客
05-12 1556
###WebAPIs Web APIs 是W3C组织的标准 Web APIs 是JavaScript所独有的部分 Web APIs 主要提供页面交互功能 JS的应用 API (Application Programming Interfact) 应用程序编程接口 : 一些预定义的函数，提供应用程序和开发人员基于某软件或硬件得意访问一组例程的能力 Web API : 浏览器提供的一套操作浏览器功能和页面元素的API(BOM和DOM) DOM （Document Object Model) : W3C组织推
WebAPIs:事件流
2301_76534754的博客
12-27 2110
获取位置1.获取元素距离自己定位父级元素的左、上距离offsetLefth和offsetTop注意是只读属性。
Web APIS Xmind
大龄程序猿的博客
06-23 94
Web APIS Xmind
JavaScript Web APIs
weixin_51062389的博客
07-02 127
Web APIS Web APIs和JS关联性 JS基础：ECMAscript基本语法 Web APIs阶段：DOM+BOM//页面交互功能 API和Web API API（应用程序编程接口）：是一些预先定义的函数，目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力，而又无需访问源码，或理解内部工作机制和的细节。 简单理解:API是给程序员提供的一种工具，以便能更轻松的实现想要完成的功能 Web API：是浏览器提供的一套操作浏览器功能和页面元素的API（BOM\DOM） ...
Web APIs简介
m0_51003607的博客
03-11 269
Web APIs和JS 基础关联性 API API(Application Programming Interface,应用程序编程接口)是一些预先定义的函数，目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力，而又无需访问源码，或理解内部工作机制的细节. Web API Web API 是浏览器提供的一套操作浏览器功能和页面元素的 API(BOM 和 DOM) API 和 Web API 总结 1、API 是为我们程序员提供的一个接口，帮助我们实现某种功能，我们会使用就可以了，不必纠结内
WebAPIs基础笔记
07-07
WebAPIs笔记
RESTful Web APIs.pdf
02-08
You’ll explore the concepts behind REST, learn different strategies for creating hypermedia-based APIs, and then put everything together with a step-by-step guide to designing a RESTful Web API.
RESTful Web APIs
09-05
For you see, the programming world was quite a different place when RESTful Web Services, the predecessor of this book, was written. At that time, the term “REST” was was rarely used. And when it ...
Designing Web APIs--2018
09-15
Scale your web API to support a growing number of API calls and use cases Regularly adapt the API to reflect changes to your product or business Provide developer resources that include API ...
[Vue-常见错误]浏览器显示Uncaught runtime errors
一个喜欢什么都研究一下的小小后端程序员
06-09 329
在vue.config.js中配置关闭Uncaught runtime errors显示。
JS中一个dom元素能绑定多少事件
ggq53219的博客
06-10 504
在JavaScript中，一个DOM元素可以绑定的事件数量并没有明确的限制，这主要取决于浏览器的实现和内存限制。然而，在实际应用中，为同一个DOM元素绑定过多的事件监听器可能会导致性能问题，尤其是在事件处理函数执行复杂操作的情况下。总之，虽然JavaScript中DOM元素可以绑定的事件数量没有明确的限制，但在实际应用中应注意避免过度绑定和优化事件处理函数，以确保良好的性能和用户体验。
基于JavaScript 如何实现爬山算法以及优化方案
最新发布
乐闻世界
06-10 1212
爬山算法（Hill Climbing Algorithm）是一种常见的启发式搜索算法，常用于解决优化问题。其核心思想是从一个初始状态出发，通过逐步选择使目标函数值增大的邻近状态来寻找最优解。接下来，我们将通过 JavaScript 实现一个简单的爬山算法，帮助大家理解其原理和应用。从一个初始状态开始。评估当前状态的目标函数值。在当前状态的邻居中选择一个目标函数值更大的状态。如果找到了更优的邻居，则移动到该邻居并重复步骤2和步骤3。如果没有更优的邻居，则算法结束，当前状态即为局部最优解。
vue3如何定义一个组件
Java程序员专栏
06-09 520
注意在子组件的 <template> 中，你使用 {{ propName }} 来显示传递进来的参数值。在父组件中，你使用 :propName="parentMessage" 来将 parentMessage 数据的值绑定到子组件的 propName prop 上。当使用 <script setup> 语法糖时，你不能直接在 <script> 标签内使用 props 选项。在 Vue 3 中，定义一个可以接收参数的组件通常是通过在组件的 props 选项中定义这些参数来完成的。// 其他组件逻辑...
webapis学生报名系统代码步骤
11-25
设计一个webapis学生报名系统的代码步骤如下： 1. 数据库设计：首先确定需要存储的数据，例如学生的基本信息，课程信息等。根据需求设计数据库表结构，并创建相应的表。 2. 后端接口设计：根据系统需求，设计后端...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值