青少年编程与数学 01-007 在网页上编写程序 16课题、文档对象模型3_3

明月看潮生

于 2024-07-30 09:03:14 发布

阅读量682

点赞数 18

分类专栏： # 编程与数学第01阶段文章标签：青少年编程前端 javascript 编程与数学 DOM

本文链接：https://blog.csdn.net/qq_40071585/article/details/140787350

版权

编程与数学第01阶段专栏收录该内容

178 篇文章 0 订阅

订阅专栏

青少年编程与数学 01-007 在网页上编写程序 16课题、文档对象模型3_3

六、Ajax技术简介
七、练习
课题作业
附录一、中国科学院数学与系统科学研究院

文档对象模型（DOM）是Web开发中的核心概念，它提供了一种接口，允许开发者使用JavaScript等脚本语言动态访问和操作HTML和XML文档。DOM将文档呈现为树状结构，每个节点代表文档中的一个元素、属性或文本。通过DOM，开发者可以修改元素的属性、样式和内容，创建和删除节点，以及响应用户事件。DOM的标准化和跨平台特性，简化了网页结构的理解和操作，提高了开发效率，并促进了Web技术的发展。

六、Ajax技术简介

这部分内容不做为本阶段学习要求。可供了解。

（五）Promise

Promise 这个概念最初在JavaScript社区中被提出，并作为一种解决异步编程复杂性的方法而逐渐流行起来。Promise对象作为标准化的构造函数，正式成为ECMAScript（即JavaScript语言的标准）的一部分是在 ECMAScript 6 (ES6) 中，该标准于2015年6月正式发布。

Promise的设计目的是提供一种更好的处理异步操作的方式，它有确定的状态变迁规则（pending -> resolved/rejected），并且通过.then、.catch和.finally等方法来链式处理异步流程，有效地消除了回调地狱的问题。

依赖的技术标准是ECMAScript规范中的Promise定义，遵循的是Promises/A+规范，这是一个经过社区广泛讨论并达成共识的关于Promise接口的行为准则，确保不同实现之间的兼容性和一致性。ECMAScript 6在设计Promise时，采纳了Promises/A+规范的精神，并将其纳入了语言标准之中。
Promise 是 JavaScript 中一种用于处理异步操作的对象，它提供了一种更好的方式来组织和协调异步代码。Promise 对象代表了一个现在、将来或永远可能可用的值，它可以处于以下三种状态之一：

pending（进行中）：初始状态，既没有被 fulfilled（完成），也没有被 rejected（拒绝）。
fulfilled（已成功）：操作成功完成时的状态，此时 Promise 对象拥有一个非空值的结果。
rejected（已失败）：操作失败时的状态，此时 Promise 对象拥有一个错误原因。

一旦 Promise 被 resolve（解决）或 reject（拒绝），就进入稳定状态，不能再次改变状态。

Promise 的主要方法和属性包括：

Promise.resolve(value): 创建并返回一个已经 resolved 的 Promise，其结果为给定的 value。
Promise.reject(reason): 创建并返回一个已经被 rejected 的 Promise，其结果为给定的 reason。
new Promise(executor): 构造函数，接受一个执行器函数（executor）。执行器函数接收两个参数：resolve 和 reject，它们是用于改变 Promise 状态的函数。当异步操作成功时调用 resolve 函数，并传递成功的值；当异步操作失败时调用 reject 函数，并传递错误的原因。
.then(onFulfilled, onRejected): 该方法用于注册回调函数。当 Promise 成功时，onFulfilled 函数会被调用，传入成功的结果作为参数；当 Promise 失败时，onRejected 函数会被调用，传入错误的原因作为参数。.then 方法可以链式调用，使得多个异步操作能够顺序执行。
.catch(onRejected): 用于处理 Promise 链中的错误，相当于 .then(null, onRejected)。当 Promise 被 reject 或者在其 then 方法的回调函数内部抛出错误时，catch 方法指定的回调函数将会被执行。
.finally(onFinally): 不管 Promise 是否成功或失败，都会执行提供的回调函数。通常用来做一些清理工作，如关闭网络连接、取消请求等。

（六）应用示例

以下是一个使用原生JavaScript实现的Ajax GET请求示例：

// 创建XMLHttpRequest对象实例
var xhr = new XMLHttpRequest();

// 配置请求信息
xhr.open('GET', 'https://api.example.com/data', true);

// 设置请求完成后的回调函数
xhr.onload = function() {
    if (xhr.status === 200) { // HTTP状态码为200，表示请求成功
        var data = JSON.parse(xhr.responseText); // 解析返回的JSON数据
        // 在这里处理和使用data内容，例如更新页面DOM元素
        document.getElementById('result').innerHTML = data.message;
    } else {
        console.log('Request failed.  Returned status of ' + xhr.status);
    }
};

// 发送请求
xhr.send();

上述代码中，我们首先创建了一个XMLHttpRequest对象，并通过.open()方法配置了HTTP请求类型、URL以及异步模式。接着定义了请求完成后触发的事件处理器（即onload事件），在其中检查HTTP状态码以确认请求是否成功，然后解析服务器返回的数据并将其用于更新页面内容。

现代Web开发中，更推荐使用Fetch API来替代XMLHttpRequest，以下是使用Fetch的相同功能示例：

fetch('https://api.example.com/data')
.then(response => {
    if (!response.ok) {
        throw new Error('Network response was not ok');
    }
    return response.json(); // 如果服务器返回的是JSON格式，直接转换成JavaScript对象
})
.then(data => {
    // 在这里处理和使用data内容，例如更新页面DOM元素
    document.getElementById('result').innerHTML = data.message;
})
.catch(error => {
    console.error('There has been a problem with your fetch operation:', error);
});

Fetch API基于Promise，提供了更简洁易读的API来发送HTTP请求，并且可以更好地处理错误情况。

（七）小结

Ajax（Asynchronous JavaScript and XML）技术的意义在于革新了传统的网页交互模式，极大地提升了Web应用程序的用户体验和性能。以下是Ajax的重要意义：

异步通信：Ajax允许页面与服务器进行异步数据交换，这意味着用户可以继续在页面上进行其他操作而不必等待整个页面刷新。这种非阻塞式的通信方式消除了传统网页“提交-等待-重新加载”的弊端。
动态更新内容：通过Ajax，开发者能够在不刷新整个页面的情况下，仅更新部分网页内容，比如列表滚动加载、表单验证反馈、地图信息更新等。这样不仅减少了网络流量，也使得用户界面更为流畅、响应更快。
增强用户体验：由于页面局部刷新的特点，用户在使用Ajax驱动的Web应用时会感觉更接近桌面应用的即时性和连贯性，从而提升用户的满意度和留存率。
降低服务器负载：相较于每次交互都重新加载整个页面，Ajax请求只传输必要的数据，减轻了服务器端的压力，并且提高了整体系统的效率。
推动Web应用发展：Ajax为Web开发开辟了新的可能，促进了RIA（Rich Internet Applications）富互联网应用的发展，使得复杂的在线编辑器、图表实时更新、流式聊天等高度互动的应用成为可能。

总结来说，Ajax的核心价值在于其对于Web应用程序表现力和响应性的提升，它使得Web从静态转向动态，从简单的浏览工具变为功能丰富、体验良好的平台级应用载体。

七、练习

下面我将展示一个使用JavaScript和DOM API来动态创建和操作HTML元素的示例程序。这个例子将创建一个简单的待办事项列表，并允许用户添加新的待办事项、标记已完成的事项和删除事项。

首先，我们创建一个基本的HTML结构：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>待办事项列表</title>
    <style>
        .completed {
            text-decoration: line-through;
        }
    </style>
</head>
<body>
    <h1>待办事项列表</h1>
    <input type="text" id="newItemInput" placeholder="输入新的待办事项...">
    <button id="addItemButton">添加</button>
    <ul id="todoList"></ul>

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

然后，我们将编写一个JavaScript文件 app.js 来实现功能：

// 获取DOM元素
const newItemInput = document.getElementById('newItemInput');
const addItemButton = document.getElementById('addItemButton');
const todoList = document.getElementById('todoList');

// 添加待办事项
function addTodoItem(text) {
    const item = document.createElement('li');
    item.textContent = text;

    // 添加完成按钮
    const completeButton = document.createElement('button');
    completeButton.textContent = '完成';
    completeButton.addEventListener('click', () => {
        item.classList.toggle('completed');
    });

    // 添加删除按钮
    const deleteButton = document.createElement('button');
    deleteButton.textContent = '删除';
    deleteButton.addEventListener('click', () => {
        item.remove();
    });

    // 将按钮添加到项中
    item.appendChild(completeButton);
    item.appendChild(deleteButton);

    // 将项添加到列表中
    todoList.appendChild(item);
}

// 监听添加按钮的点击事件
addItemButton.addEventListener('click', () => {
    const text = newItemInput.value.trim();
    if (text !== '') {
        addTodoItem(text);
        newItemInput.value = ''; // 清空输入框
    }
});

// 监听回车键提交待办事项
newItemInput.addEventListener('keyup', event => {
    if (event.key === 'Enter') {
        addItemButton.click();
    }
});

在这个示例中，我们做了以下几件事：

使用getElementById获取需要的DOM元素。
定义了一个addTodoItem函数，该函数创建一个新的<li>元素，添加文本、完成按钮和删除按钮，然后将这些元素附加到待办事项列表中。
给添加按钮添加了一个点击事件监听器，当按钮被点击时，调用addTodoItem函数。
给输入框添加了一个键盘事件监听器，当用户按回车键时，模拟点击添加按钮的行为。

这个例子展示了如何使用DOM API进行基本的DOM操作，如创建元素、添加事件监听器、响应用户输入等。

课题作业

基础DOM操作练习：
- 创建一个简单的HTML页面，包含至少三种不同类型的元素（如div, p, span）。
- 使用JavaScript的DOM API，编写脚本对这些元素进行以下操作：获取元素、更改样式、修改文本内容、添加和删除类。
事件处理编程任务：
- 在你的HTML页面中添加按钮元素，编写事件监听器，当按钮被点击时，执行特定的功能，如改变页面背景色或隐藏/显示某个元素。
动态内容生成：
- 设计一个简单的表单，允许用户输入数据（如用户名）。
- 当用户提交表单时，使用JavaScript捕获输入数据，并动态地将这些数据显示在页面上。
DOM遍历和操作：
- 编写一个脚本，遍历页面上的所有段落（p元素），并为每个段落添加一个特定的类或属性。
DOM和AJAX结合使用：
- 学习AJAX基础，创建一个示例，通过AJAX从服务器获取数据，并使用DOM将数据动态插入到页面中。
CSS样式操作：
- 编写JavaScript代码，动态地为页面上的元素添加CSS动画效果，如渐变、滑动等。
DOM结构理解：
- 绘制一个复杂的HTML页面的DOM树结构图，并解释每个节点的作用。
性能优化：
- 研究并实现一种减少DOM操作对页面性能影响的技术，如使用DocumentFragment或批量更新DOM。
影子DOM探索：
- 学习影子DOM的基本概念，并创建一个自定义的Web组件，使用影子DOM封装样式和结构。
综合应用项目：
- 设计并实现一个具有用户交互功能的小型Web应用，如待办事项列表、简单计算器或个人信息管理器，使用DOM API实现其功能。

附录一、中国科学院数学与系统科学研究院

中国科学院数学与系统科学研究院（Academy of Mathematics and Systems Science, 简称AMSS）是中国科学院下属的一个重要的综合性数学研究机构。以下是关于AMSS的一些简介信息：

成立背景：

AMSS成立于2001年，由原中国科学院数学研究所和系统科学研究所合并而成。

研究领域：

AMSS涵盖了广泛的数学领域，包括基础数学、应用数学、计算数学、概率论与数理统计、运筹学与控制论等。
系统科学研究院部分则侧重于系统科学、复杂性科学、系统工程等交叉学科的研究。

科研实力：

拥有一支由院士、杰出青年科学家、研究员等组成的高水平科研队伍。
承担多项国家级重大科研项目，包括国家重点基础研究发展规划（973计划）项目、国家自然科学基金重点项目等。

学术贡献：

在国内外数学界享有盛誉，发表了大量高质量的学术论文，对数学理论的发展和应用做出了重要贡献。
培养了一大批数学科研和教学人才，对中国乃至世界数学教育和研究产生了深远影响。

国际合作：

积极参与国际学术交流与合作，与世界各地的数学研究机构建立了广泛的合作关系。

教育与培养：

作为研究生培养的重要基地，AMSS设有数学专业的硕士和博士学位授权点，培养高水平的数学研究人才。

设施与环境：

提供先进的科研设施和良好的学术环境，为科研人员和学生提供优越的研究和学习条件。

AMSS致力于推动数学与系统科学的发展，解决国家重大科技需求和前沿科学问题，是国内外数学与系统科学研究的重要基地。

明月看潮生

关注

18
点赞
踩
11

收藏

觉得还不错? 一键收藏
0
评论
青少年编程与数学 01-007 在网页上编写程序 16课题、文档对象模型3_3

文档对象模型（DOM）是Web开发中的核心概念，它提供了一种接口，允许开发者使用JavaScript等脚本语言动态访问和操作HTML和XML文档。DOM将文档呈现为树状结构，每个节点代表文档中的一个元素、属性或文本。通过DOM，开发者可以修改元素的属性、样式和内容，创建和删除节点，以及响应用户事件。DOM的标准化和跨平台特性，简化了网页结构的理解和操作，提高了开发效率，并促进了Web技术的发展。
复制链接

扫一扫

专栏目录