webAPI

妖风吹不倒小熊栽的树

已于 2022-07-27 17:22:33 修改

阅读量275

点赞数

文章标签： java html 开发语言 javascript css

于 2022-07-27 17:15:15 首次发布

本文链接：https://blog.csdn.net/wxx200008/article/details/126002475

版权

javaweb 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

本文介绍了JavaScript中的WebAPI，用于操作文档和浏览器对象。讲解了DOM的概念，展示了如何获取和修改元素属性，以及如何操作DOM树结构。此外，详细解释了事件驱动编程，包括事件绑定和冒泡机制，并给出了猜数字游戏和冒泡排序的实例。内容涵盖HTML、CSS、JavaScript交互，以及事件处理和排序算法的应用。

摘要由CSDN通过智能技术生成

1.WebAPI

使用js完成一些有实际意义的工作

操作文档（document）:页面上看到的 DOM

操作浏览器 BOM

2.什么是API

Application Interface 应用接口

3.DOM（操作修改节点属性）

让我们可以操作网页内容、页面结构、页面样式

js 眼中每一个标签是一个对象

3.获取元素(如何在文档树中定位节点)

document.querySelector()

document.quer

可以把用户的输入读出来

例子如下

上面是个匿名函数，效果一样。

背景可以一次切换一个效果

4.变更树的结构（操作DOM树结构）

通过html修改某个结点的子孙 element.innerHTML=""

完全按照结点的方式处理：

1.新建一个元素（结点）文档树之外的结点

5.事件驱动（event-driven）

当某事发生时，谁们应该做什么事

发生地震时，我应该去安全的地方

事件源：地

事件：发生地震

处理对象（处理函数）：主要用于图行化界面的编程（网页/App/PC软件）

示例：

按钮（处理对象）事件（点击）事件源（用户）

事件处理函数：把页面背景从白色改成红色

事件驱动的绑定
//1.找到事件处理的对象
var a =document.querySelector('button');

//2.定义处理函数
function 处理背景色(){
    //给body 添加css样式：background:red;
    var body =document.querySelector('body');
    body.style='background-color:pink';

}

function 添加一个Helloworld (){

}
//3.将 事件、事件处理对象、事件处理函数  绑定(bind)
//修改 btn 元素的一个属性
//on ：当
//click :点击
//当点击时，调用这个函数
//如果绑定多个处理函数怎么办？
btn.onclick =处理背景色;
//btn.onclick =添加一个Helloworld();  不可以这样写，写了结果只会执行这个，上面的不会执行

//下面的就俩个都会执行
btn.addEventListener('click',处理背景色)
btn.addEventListener('click',添加一个Helloworld())
事件驱动的冒泡

从俯视图看

如何阻止时间冒泡

e.stopPropagation();

题外话：

HTML中关联外部CSS

<link rel ="stylesheet" href="......">

link:css 按tab键

与鼠标回车键绑定，不用点击，按回车就可以

小案例：猜数字游戏

//1.生成一个随机数字
var 随机数 = parseInt(Math.random()*100)

//2.为按钮绑定随机事件
//3.给input绑定一个键盘被按下的事件
var 按钮 =document.querySelector('#按钮')
var 结果区 =document.querySelector('#结果区')
var 输入 =document.querySelector('#输入');
function 结果判断(){
    //1.读取用户输入

    var 用户输入的数字 =parseInt(输入.value);
    if(isNaN(用户输入的数字)){
        结果区.innerHTML +='请输入数字';
        return;
    }
    输入.value='';

    if(用户输入的数字<随机数){
        结果区.innerHTML +='<p>小了</p>';

    }else if(用户输入的数字 >随机数){
        结果区.innerHTML +='<p>大了</p>';
    }else{
        结果区.innerHTML +='<p>正确</p>';
    }
}
//然后把他们绑定在一块
输入.onkeypress =function (e){
    if(e.key=='Enter'){
        结果判断();
    }
}
按钮.onclick =结果判断;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>猜数字</title>
</head>
<body>
    <input type="text" id =输入>
    <button id ="按钮">猜</button>
    <div id="结果区">

    </div>

    <script src="script.js"></script>
</body>
</html>

冒泡排序（一秒钟执行一步）

var div = document.querySelector('div');
function 打印数组(array) {
    div.innerHTML = '';
    for (var i in array) {
        var span = document.createElement('span');
        span.style.display = 'inline-block';
        span.style.backgroundColor = 'blue';
        span.style.marginRight = '5px';
        span.style.width = '30px';
        span.style.height = `${30 + array[i] * 30}px`;
        span.textContent = array[i];
        span.style.textAlign = 'center';
        span.style.color = 'white';
        span.style.lineHeight = span.style.height;
        div.appendChild(span);
    }
    //div.innerHTML += `<p>[${array.join(', ')}]</p>`;
}

var array = [9, 5, 2, 7, 3, 6, 8, 4, 1];

var i = 0;
var j = 0;
setInterval(function () {
    // 冒泡排序的其中一步（两两比较 + 可能的交换）
    if (j >= array.length - i - 1) {
        j = 0;
        i++;
        if (i >= array.length - 1) {
            return;
        }
    }
    if (array[j] > array[j + 1]) {
        var t = array[j];
        array[j] = array[j + 1];
        array[j + 1] = t;
    }
    j++;

    打印数组(array);
}, 1000);  //时间设置为1秒

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>冒泡排序</title>
</head>
<body>
    <div></div>
    <script src="script.js"></script>
</body>
</html>