JavaScript 学习笔记 总结

回顾：

  • Web页面标准
    • 页面结构：HTML4、HTML5
    • 页面外观和布局：CSS
    • 页面行为：JavaScript
    • 强调三者的分离
    • 前后端分离开发模式
  • 响应式设计
  • Bootstrap框架入门

Bootstrap总结

  • 基础
    • 下载和使用
    • 基础样式：文本样式、图片样式、表格样式
    • 图标库：字体图标、SVG
  • 栅格布局
  • 工具类
    • 工具类基础
    • 颜色工具类：背景颜色 .bg-、文本颜色 .text-、链接颜色 .link-*
  • 尺寸工具类
  • 布局工具类：display、flexbox、float
  • 其他工具类
  • 表单
  • 组件库

JavaScript基础语法

  • 常用语句、运算符和表达式

  • 变量和常用数据类型、对象（Object）

    • 数值（Number）、字符串（String）、布尔（Boolean）、未定义（Undefined）、空引用（Null）
    • var、const、let
    • 注意区分大小写

  • 3种基本结构和嵌套

  • 数组（Array）

  • 函数（Function），注意小驼峰的命名方式

  • 调试

数组

  • 初始化
  • 访问数组元素
  • Array()构造函数
  • 数组解构赋值
  • 数组操作
    • 头尾增删元素、指定位置增删元素、排序、查找、迭代、截取与连接、与字符串的转换、展开运算符

BOM模型

  • window对象
  • location对象
  • navigator对象
  • screen对象
  • history对象
  • 定时器

DOM模型

  • DOM概念及DOM树
  • DOM的节点
    • 元素节点、文本节点、属性节点
  • JS访问DOM
    • 访问节点
    • 检测节点类型
    • 父子兄关系（元素的遍历）
    • 节点属性
    • 创建节点
    • 操作节点
  • DOM与CSS
  • 事件和事件驱动

JavaScript和jQuery入门

— —前端行为编程单元

类与原型机制

类与对象

  • class 、constructor 、 new 、getter 、setter 、static 、 instanceof、 extends 、super

原型机制

  • prototype属性

  • proto 属性 • 原型链

修改DOM元素

修改HTML内容

  • 双标记元素： 元素.innerText 、元素.textContent 、元素.innerHTML

  • 交互表单域元素： 元素.value

  • 元素.nodeValue

修改CSS样式

  • 元素.style.css属性名 （可能和CSS属性名有不同）

改变HTML属性值

  • 元素.属性名

遍历元素

  • parentNode

  • childNodes 、firstChild 、 lastChild 、 nextElementSibling 、 previousElementSibling

新增元素 、移除元素和改变元素

利用JS和DOM提供的方法来新增和移除元素

新增元素

  1. 获取需要新增元素的父元素： document的getElement … …系列方法， 获 取多元素时注意数组访问形式

  2. 创建子元素： document.createElement()方法

  3. 将创建的元素新增到页面的DOM结构中

    • 父元素内部的最后添加元素： 父元素.appendChild(创建的子元素)

    • 在指定已有子元素的前面添加元素： 父元素.insertBefore(创建的子元素， 已有子元素）

移除元素

  1. 获取需要移除子元素的父元素

  2. 获取需要移除的子元素

  3. 移除子元素： 父元素.removeChild(要移除的子元素）

利用JS和DOM提供的方法来改变元素

新增元素的文本节点

  • document.createTextNode(文本内容）

  • 元素.appendChild(新增文本节点）

替换元素

  • 父元素.replaceChild(新元素， 老元素）

jQuery的引入

jQuery 是一个 JavaScript 库。

jQuery 简化了 JavaScript 编程。

jQuery 容易上手。

很多前端库以它为基础库， 来简化JS的编程。

官方网站： jquery.com

img

注意：

在用jQuery编写代码前引入jQuery的框架

可以通过 CDN （内容分发网络） 引用它， 需接入互联网

jQuery使用

$(document).ready()

jQuery的基础语法

  • $(选择器).调用的方法()

jQuery的选择器

jQuery的事件注册

  • $(选择器).事件名(function(){})

  • $(选择器).on(事件名， 事件处理函数）

jQuery的动画效果

  • 隐藏和显示 、淡入和淡出 、滑上和滑下 、动画方法 … …

链式写法

jQuery操作DOM

修改元素内容

修改CSS样式

改变HTML属性值

遍历元素

  • 祖先 、后代 、兄弟元素

新增元素 、移除元素和改变元素

过滤元素

  • 元素集合.eq()， 元素集合.not()， 元素集合.filter()， 元素集合.first()， 元素 集合.last()

AJAX与前端框架入门

B/S工作原理

各种请求不再赘述

image-20240422215752124

异步编程

同步：指步骤在一个控制流序列中按顺序执行

异步：不保证同步的概念，执行将不再与原有的序列有顺序关系

image-20240422223056107

为什么要用异步编程？

主线程作为一个线程，不能够同时接受多方面的请求

子线程来完成一些可能消耗时间足够长以至于被用户察觉的事情，比如读取一个大文件或者发出一个网络请求

子线程独立于主线程，所以即使出现阻塞也不会影响主线程的运行。

子线程有一个局限：一旦发射了以后就会与主线程失去同步，无法确定它的结束，比如处理来自服务器的信息，我们是无法将它合并到主线程中去的。

为了解决这个问题，JavaScript 中的异步操作函数往往通过回调函数来实现异步任务的结果处理。

image-20240422223143608

AJAX

AJAX 是与服务器交换数据的技术，它在不重载全部页面的情况下，实现了对部分网页的更新

浏览器端借助XMLHTTPRequest对象(XHR）

常常用于请求来自远程服务器上的 XML 或 JSON 数据

image-20240422223217012

JS原生调用XHR
var xhr = new XMLHttpRequest(); //声明xhr对象
xhr.onload = function () { // 注册load事件，在异步任务完成后触发document.getElementById("demo").innerHTML=xhr.responseText;
}
xhr.onerror = function () { //注册error事件，请求遇错处理document.getElementById("demo").innerHTML="请求出错";
}
xhr.open("GET","http://127.0.0.1:5500/data/students.json", true); // 发送异步 GET 请求
xhr.send();
jQuery的AJAX方法

jQuery 提供多个与 AJAX 有关的方法。通过 jQuery AJAX 方法，能够使用 HTTP Get 和 HTTP Post 从远程服务器上请求文本、HTML、XML 或 JSON 等数据格式文件，同时能够把这些外部数据直接载入网页的被选元素中。

jQuery提供的AJAX方法

  • $().load()
  • $.get()
  • $.post()
  • $.ajax()
  • ……

jQuery的AJAX调用方法举例

$(selector).load("demo_test.txt",data,callback); //$().load方法
$.get("demo_test.txt",function(data,status){console.log("数据: " + data + "\n状态: " + status);
});
$("button").click(function(){$.ajax({url:"demo_test.txt",success:function(result){$("#div1").html(result);}});
});
ES6的promise对象

Promise 对象是 JavaScript 中用于处理异步操作的一种方式，它提供了更加优雅和可靠的方式来处理异步代码，避免了回调地狱（callback hell）和层层嵌套的问题。

Promise 是 ES6（ECMAScript 2015）引入的新特性，已经成为现代 JavaScript 开发中处理异步代码的标准方式之一。

可参看菜鸟教程：https://www.runoob.com/w3cnote/javascript-promise-object.html

.then() 方法

  • Promise 对象的 .then() 方法用于处理异步操作成功完成后的回调函数。它接受两个参数，第一个参数是成功时的回调函数，第二个参数是可选的失败时的回调函数。

.catch() 方法

  • Promise 对象的 .catch() 方法用于处理异步操作失败时的回调函数，可以替代 .then() 的第二个参数，更加简洁清晰。

链式调用

  • Promise 对象支持链式调用，可以在 .then() 方法中返回新的 Promise 对象，实现多个异步操作的顺序执行

Promise的创建

var promise = new Promise(function(resolve, reject) {// 异步处理// 处理结束后、调用resolve 或 reject
});
axios的使用

axios 是一个基于 Promise 的现代化的 JavaScript HTTP 客户端，用于在浏览器和 Node.js 环境中发送 HTTP 请求。它的设计目标是简单、易用、支持并发请求、提供更好的错误处理和取消请求的功能。

axios中文文档：https://www.axios-http.cn/docs/intro

axios特点

  • 支持 Promise API：Axios 基于 Promise，可以使用 .then 和 .catch 来处理异步请求，使得代码更加清晰和易于维护。

  • 支持浏览器和 Node.js：Axios 可以在浏览器和 Node.js 环境中使用，无需额外的配置或代码改动。

  • 提供丰富的功能：Axios 提供了丰富的功能，如拦截器（interceptors）、取消请求、自动转换 JSON 数据、CSRF 防护等。

  • 易于使用：Axios 的 API 设计简单易懂，可以轻松地发送各种类型的 HTTP 请求（GET、POST 等），并处理返回的数据和错误。

  • 并发请求：Axios 支持并发请求，可以同时发送多个请求，并统一处理它们的响应。

  • 错误处理：Axios 提供了良好的错误处理机制，可以捕获并处理各种类型的请求错误，如网络错误、HTTP 错误码等。

  • 支持取消请求：Axios 支持取消正在进行的请求，可以防止不必要的请求发送或减少对服务器的压力。

  • 社区活跃：Axios 是一个开源项目，在 GitHub 上有很高的活跃度，可以获得及时的更新和支持

node.js简介

Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行时环境，用于构建高性能、可扩展的网络应用程序。它使用非阻塞、事件驱动的方式处理 I/O 操作，使得 Node.js 在处理大量并发请求时表现出色。

Node.js 是一个强大、灵活、高效的后端开发平台，广泛应用于Web 开发、API 开发、实时应用、微服务等领域。

node官网下载安装包：https://nodejs.org/en/download

node.js特点

  • JavaScript 运行时环境：Node.js 提供了一个运行 JavaScript 代码的环境，可以在服务器端运行 JavaScript，而不仅限于浏览器端。这使得开发者可以使用同一种语言（JavaScript）进行前端和后端开发。

  • 非阻塞 I/O：Node.js 使用非阻塞的事件驱动模型来处理 I/O 操作，使得在处理大量并发请求时性能表现优秀。它通过异步处理 I/O 操作，不会阻塞主线程，提高了应用程序的响应速度和并发能力。

  • 单线程：Node.js 采用单线程模型，但通过事件循环机制和异步操作实现了高效的并发处理。它通过利用事件循环在单个线程中处理多个请求，避免了传统多线程模型中线程切换的开销。

  • 模块化系统：Node.js 使用 CommonJS 规范来组织代码和模块，提供了简单而强大的模块化系统。开发者可以轻松地创建、导入和共享模块，使得代码结构更加清晰和可维护。

  • 包管理器 npm：Node.js 自带 npm（Node Package Manager），是世界上最大的开源软件注册表和包管理工具之一。开发者可以使用 npm 来安装、管理和共享代码包，方便了项目的依赖管理和代码复用。

  • 支持异步编程：Node.js 通过回调函数、Promise、async/await 等机制支持异步编程，使得开发者可以编写高效的非阻塞代码，处理大量并发请求和复杂的异步操作。

  • 跨平台：Node.js 可以运行在多种操作系统上，包括 Windows、macOS、Linux 等，具有较好的跨平台性。

  • 活跃的社区：Node.js 拥有庞大而活跃的开发者社区，提供了丰富的文档、教程、插件和工具，为开发者提供了良好的支持和资源。

模块化编程简介

CommonJS

CommonJS模块化规范

  • CommonJS 是一种模块化的 JavaScript 规范，用于在 Node.js等环境中组织和管理代码模块。它定义了一套规则和约定，使得开发者可以将代码模块化，实现代码复用、依赖管理和模块导入导出等功能。

  • CommonJS 规范定义了如何创建和定义模块。每个文件就是一个模块，模块内部的变量和函数默认是私有的，不会暴露给外部。

CommonJS模块导出

  • 通过 module.exports 或 exports 导出模块中的变量、函数或对象，使得其他模块可以引用和使用这些导出的内容。

CommonJS模块导入

  • 通过 require 函数导入其他模块的内容，可以根据模块路径引入指定的模块。

关于CommonJS的其他特点

  • 同步加载：CommonJS 使用同步的方式加载模块，即在导入模块时会立即加载并执行模块代码，然后再继续执行后续代码。

  • 模块缓存：为了提高性能，CommonJS 在第一次加载模块时会将模块的导出缓存起来，后续再次导入同一个模块时会直接使用缓存的导出内容，而不会再次执行模块代码。

  • 适用于服务器端：CommonJS 最初是为 Node.js 等服务器端环境设计的，可以方便地管理服务器端的模块和依赖。

  • 不适用于浏览器端：由于 CommonJS 使用同步加载模块的方式，并且依赖于文件系统等特性，因此在浏览器端并不适用，浏览器端通常采用 AMD 或ES Modules 等模块化方案。

ES Modules

ES Modules 是 ECMAScript（即 JavaScript）中的模块化规范，它在 ECMAScript 6（ES6）中引入，并在现代浏览器和 Node.js等环境中得到广泛支持。ES Modules 提供了一种现代化、标准化的模块化方案，可以用于组织和管理 JavaScript 代码，实现模块的导入、导出和依赖管理。

ES Modules模块导出

  • ES Modules 使用 import 和 export 关键字来定义和导出模块。每个文件就是一个模块，模块内部的变量、函数和类默认是私有的，需要通过 export 导出才能在其他模块中使用。

ES Modules模块导入

  • 通过 import 关键字导入其他模块的内容，可以根据模块路径引入指定的模块，并赋值给一个变量。

ES Modules的其他特点

  • **异步加载：**ES Modules 使用异步加载的方式，即在导入模块时不会立即执行模块代码，而是在需要使用模块内容时才会动态加载和执行模块代码。

  • **静态分析：**ES Modules 具有静态分析的特性，使得在编译阶段就可以确定模块的依赖关系和引用关系，有利于代码优化和性能提升。

  • **作用域管理：**ES Modules 中的模块具有自己的作用域，模块内部的变量、函数和类默认是私有的，不会污染全局作用域。

  • **适用于浏览器和服务器端：**ES Modules 是现代 JavaScript 的标准模块化方案，可以在现代浏览器和 Node.js 等环境中使用，无需额外的配置或插件。

  • 模块加载器：浏览器端通常需要使用模块加载器（如 webpack、Rollup 等）来处理 ES Modules，将多个模块打包成一个或多个 bundle 文件，以便在浏览器中加载和运行。

VUE入门

Vue (发音为 /vjuː/，类似 view) 是一款用于构建用户界面的JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。

无论是简单还是复杂的界面，Vue 都可以胜任。

Vue 的设计非常注重灵活性和“可以被逐步集成”这个特点，它可适用场景如下：

  • 无需构建步骤，渐进式增强静态的 HTML
  • 在任何页面中作为 Web Components 嵌入
  • 单页应用 (SPA)
  • 全栈 / 服务端渲染 (SSR)
  • Jamstack / 静态站点生成 (SSG)
  • 开发桌面端、移动端、WebGL，甚至是命令行终端中的界面

JS练习

1、若用户名为空或者密码为空，提示为空并将焦点置在用户名框中

核心代码：

function validateForm() {var username = document.getElementById('username').value.trim();var password = document.getElementById('password').value.trim();if (username === "" || password === "") {//alert("用户名和密码不能为空！");document.getElementById('username').focus();return false;}// 如果输入有效，这里可以添加进一步的表单提交逻辑//alert("表单输入有效，可以提交表单！");// 例如：document.getElementById('yourFormId').submit();
}function init(){validateForm();
}init();

实现效果：

image-20240428162724947

2、若用户名和密码都不为空，判断用户名和密码是否和给定的常量匹配

核心代码：

const VALID_USERNAME = "admin";
const VALID_PASSWORD = "Jay171717";function validateForm() {var username = document.getElementById('username').value.trim();var password = document.getElementById('password').value.trim();if (username === "" || password === "") {//alert("用户名和密码不能为空！");document.getElementById('username').focus();return false;}// 如果输入有效，这里可以添加进一步的表单提交逻辑//alert("表单输入有效，可以提交表单！");// 例如：document.getElementById('yourFormId').submit();// 检查用户名和密码是否与给定常量匹配if (username === VALID_USERNAME && password === VALID_PASSWORD) {alert("登录成功！");// 可以在此添加重定向逻辑或其他操作，例如：// window.location.href = 'your-success-url.html';} else {alert("用户名或密码错误，请重试！");}
}function init(){validateForm();
}init();

实现效果：

image-20240428163256239

image-20240428165013140

3、若不匹配，提示“登录信息有误”并清空用户名和密码输入，并将焦点置在用户名框中

核心代码：

const VALID_USERNAME = "admin";
const VALID_PASSWORD = "Jay171717";function validateForm() {var username = document.getElementById('username').value.trim();var password = document.getElementById('password').value.trim();if (username === "" || password === "") {//alert("用户名和密码不能为空！");document.getElementById('username').focus();return false;}// 如果输入有效，这里可以添加进一步的表单提交逻辑//alert("表单输入有效，可以提交表单！");// 例如：document.getElementById('yourFormId').submit();// 检查用户名和密码是否与给定常量匹配if (username === VALID_USERNAME && password === VALID_PASSWORD) {alert("登录成功！");// 可以在此添加重定向逻辑或其他操作，例如：// window.location.href = 'your-success-url.html';} else {alert("登录信息有误");document.getElementById('username').value = "";  // 清空用户名document.getElementById('password').value = "";  // 清空密码document.getElementById('username').focus();     // 将焦点重新设置到用户名输入框}
}function init(){validateForm();
}init();

实现效果：

image-20240428165004442

image-20240428165023517

4、若匹配，提示“登录成功”，并将用户信息记录到sessionStorage中，出现“自动跳转提示，若没有自动跳转请单击此处”的提示信息，然后隔1秒后自动跳转到对应的页面（咖啡屋的首页）

核心代码：

const VALID_USERNAME = "admin";
const VALID_PASSWORD = "Jay171717";function validateForm() {var username = document.getElementById('username').value.trim();var password = document.getElementById('password').value.trim();if (username === "" || password === "") {//alert("用户名和密码不能为空！");document.getElementById('username').focus();return false;}// 如果输入有效，这里可以添加进一步的表单提交逻辑//alert("表单输入有效，可以提交表单！");// 例如：document.getElementById('yourFormId').submit();// 检查用户名和密码是否与给定常量匹配if (username === VALID_USERNAME && password === VALID_PASSWORD) {alert("登录成功！");sessionStorage.setItem("username", username);  // 将用户名保存到sessionStorage// 显示跳转信息并准备跳转document.getElementById('redirectMessage').style.display = 'block';setTimeout(function() {window.location.href = '../html/coffee.html';}, 1000);} else {alert("登录信息有误");document.getElementById('username').value = "";  // 清空用户名document.getElementById('password').value = "";  // 清空密码document.getElementById('username').focus();     // 将焦点重新设置到用户名输入框}
}function init(){validateForm();
}init();

实现效果：

image-20240428170415319

image-20240428170837659

image-20240428171817434

5、跳转到咖啡屋首页后header区的信息修改为“你好，xxx(登录名）”，左边导航栏增加一行“退出登录”的提示

6、点击“退出登录”后，可转到登录页，并保证咖啡屋首页回复到未登录状态，用户登录信息清理完成。

核心代码：

    // 页面加载时，设置用户问候信息window.onload = function() {const username = sessionStorage.getItem("username");if (username) {document.getElementById('userGreeting').textContent = `你好，${username}`;}else{document.getElementById('userGreeting').textContent = 'Jay17\'s Coffee Shop';}};// 定义退出登录函数function logout() {sessionStorage.clear();  // 清空sessionStoragewindow.location.href = './login.html';  // 重定向到登录页}

实现效果：

未登录直接访问：

image-20240428175511067

登录后访问：

image-20240428175450134

image-20240428175756723

7、学习小结：在实验2的小结部分，对实验中用到的JavaScript知识进行小结，可以用思维导图的形式。

image-20240428211333383

1、完成注册表单的信息获取并显示在表单下方的div#result中

核心代码：

// const VALID_USERNAME = "admin";
// const VALID_PASSWORD = "Jay171717";// function validateForm() {
//     var username = document.getElementById('username').value.trim();
//     var password = document.getElementById('password').value.trim();//     if (username === "" || password === "") {
//       //alert("用户名和密码不能为空！");
//       document.getElementById('username').focus();
//       return false;
//     }
//     // 如果输入有效，这里可以添加进一步的表单提交逻辑
//     //alert("表单输入有效，可以提交表单！");
//     // 例如：document.getElementById('yourFormId').submit();//     // 检查用户名和密码是否与给定常量匹配
//     if (username === VALID_USERNAME && password === VALID_PASSWORD) {
//         alert("登录成功！");
//         sessionStorage.setItem("username", username);  // 将用户名保存到sessionStorage//         // 显示跳转信息并准备跳转
//         document.getElementById('redirectMessage').style.display = 'block';
//         setTimeout(function() {
//             window.location.href = '../html/FlexBox_coffeeshop.html';
//         }, 1000);
//     } else {
//         alert("登录信息有误");
//         document.getElementById('username').value = "";  // 清空用户名
//         document.getElementById('password').value = "";  // 清空密码
//         document.getElementById('username').focus();     // 将焦点重新设置到用户名输入框
//     }
// }function submitForm() {// 获取表单数据var name = document.getElementById('username').value;var password = document.getElementById('password').value;console.log(name);// 构造要显示的信息var resultText = `Username: ${name}<br>Password: ${password}`;// 显示信息document.getElementById('result').innerHTML = resultText;}function init(){//validateForm();submitForm();
}init();

实现效果：

image-20240428203659115

2、完成登录变体2，创建一个Student类，并在Student类中创建登录验证方法，用户输入的信息和基于该类创建的对象信息做比较，通过后进入到首页，其他逻辑和前一个登录练习相同

核心代码：

const VALID_USERNAME = 'admin'
const VALID_PASSWORD = 'Jay171717'class Student {constructor(username, password) {this.username = usernamethis.password = password}validateLogin(inputUsername, inputPassword) {return this.username === inputUsername && this.password === inputPassword}
}
const student = new Student(VALID_USERNAME, VALID_PASSWORD)function login() {const username = document.getElementById('username').valueconst password = document.getElementById('password').valueif (student.validateLogin(username, password)) {alert('登录成功！')sessionStorage.setItem('username', username) // 将用户名保存到sessionStorage// 显示跳转信息并准备跳转document.getElementById('redirectMessage').style.display = 'block'setTimeout(function () {window.location.href = '../html/FlexBox_coffeeshop.html'}, 1000)} else {alert('登录信息有误')document.getElementById('username').value = '' // 清空用户名document.getElementById('password').value = '' // 清空密码document.getElementById('username').focus() // 将焦点重新设置到用户名输入框}
}
function submitForm() {// 获取表单数据var name = document.getElementById('username').valuevar password = document.getElementById('password').valueconsole.log(name)// 构造要显示的信息var resultText = `Username: ${name}<br>Password: ${password}`// 显示信息document.getElementById('result').innerHTML = resultTextlogin()
}

3、完成登录变体3，用户输入的信息和json文件中的数据做比较，通过后进入到首页，其他逻辑和前一个登录练习相同

同练习4-1。

1、原来的注册表单程序用jQuery来实现，注册表单中原来的兴趣和性别呈现未被选中状态。

image-20240428214335120

2、升级要求如下：

（1）在提交按钮时判断兴趣、性别没有选中时提示“不能为空”
（2）在提交按钮和文本区失去焦点时判断个人介绍字数不足20字提示“字数不足”
（3）在下方的div框中逐行显示获取到的用户输入项内容，并新增“重置”按钮，单击此按钮后，清空该行内容，并将注册表单对应的输入选项清空，还原到未选中状态

image-20240428214535794

image-20240428214647006

image-20240428214748295

const VALID_USERNAME = 'admin'
const VALID_PASSWORD = 'Jay171717'function validateForm() {var username = document.getElementById('username').value.trim()var password = document.getElementById('password').value.trim()if (username === '' || password === '') {//alert("用户名和密码不能为空！");document.getElementById('username').focus()return false}// 如果输入有效，这里可以添加进一步的表单提交逻辑//alert("表单输入有效，可以提交表单！");// 例如：document.getElementById('yourFormId').submit();// 检查用户名和密码是否与给定常量匹配if (username === VALID_USERNAME && password === VALID_PASSWORD) {alert('登录成功！')sessionStorage.setItem('username', username) // 将用户名保存到sessionStorage// 显示跳转信息并准备跳转document.getElementById('redirectMessage').style.display = 'block'setTimeout(function () {window.location.href = '../html/FlexBox_coffeeshop.html'}, 1000)} else {alert('登录信息有误')document.getElementById('username').value = '' // 清空用户名document.getElementById('password').value = '' // 清空密码document.getElementById('username').focus() // 将焦点重新设置到用户名输入框}
}class Student {constructor(username, password) {this.username = usernamethis.password = password}validateLogin(inputUsername, inputPassword) {return this.username === inputUsername && this.password === inputPassword}
}
const student = new Student(VALID_USERNAME, VALID_PASSWORD)function login() {const username = document.getElementById('username').valueconst password = document.getElementById('password').valueconst introduce = document.getElementById('introduce').valuelet selectedGenderif (document.querySelector('input[name="gender"]:checked')) {selectedGender = document.querySelector('input[name="gender"]:checked')}const interests = document.getElementById('interests').value// 个人介绍不能少于20个字符if (introduce.length < 20) {alert('字数不足')} else if (!selectedGender) {alert('性别不能为空')} else if (!interests) {alert('兴趣不能为空')} else if (student.validateLogin(username, password)) {alert('登录成功！')sessionStorage.setItem('username', username) // 将用户名保存到sessionStorage// 显示跳转信息并准备跳转document.getElementById('redirectMessage').style.display = 'block'setTimeout(function () {window.location.href = '../html/FlexBox_coffeeshop.html'}, 1000)} else {alert('登录信息有误')document.getElementById('username').value = '' // 清空用户名document.getElementById('password').value = '' // 清空密码document.getElementById('username').focus() // 将焦点重新设置到用户名输入框}
}
function submitForm() {// 获取表单数据var name = document.getElementById('username').valuevar password = document.getElementById('password').valueconsole.log(name)// 构造要显示的信息var resultText = `Username: ${name}<br>Password: ${password}`// 显示信息document.getElementById('result').innerHTML = resultTextlogin()
}function init() {//validateForm();submitForm()
}function resetUsername() {document.getElementById('username').value = ''document.getElementById('username').focus()
}function resetPassword() {document.getElementById('password').value = ''document.getElementById('password').focus()
}function resetGender() {// 将所有radio设置为未选中const radio = document.querySelector('input[name="gender"]:checked')radio.checked = false
}function resetInterests() {document.getElementById('interests').value = ''document.getElementById('interests').focus()
}function resetIntroduce() {document.getElementById('introduce').value = ''document.getElementById('introduce').focus()
}// init()

3、在实验报告的实验小结中以思维导图形式绘制jQuery的知识点

image-20240428211435433

1、登录用户名和密码信息存储在数据文件中，用jQuery发出AJAX请求后根据获取的用户信息进行比对，其他登录实现逻辑和练习1同。

const VALID_USERNAME = 'admin'
const VALID_PASSWORD = 'Jay171717'function validateForm() {var username = document.getElementById('username').value.trim()var password = document.getElementById('password').value.trim()if (username === '' || password === '') {//alert("用户名和密码不能为空！");document.getElementById('username').focus()return false}// 如果输入有效，这里可以添加进一步的表单提交逻辑//alert("表单输入有效，可以提交表单！");// 例如：document.getElementById('yourFormId').submit();// 检查用户名和密码是否与给定常量匹配if (username === VALID_USERNAME && password === VALID_PASSWORD) {alert('登录成功！')sessionStorage.setItem('username', username) // 将用户名保存到sessionStorage// 显示跳转信息并准备跳转document.getElementById('redirectMessage').style.display = 'block'setTimeout(function () {window.location.href = '../html/FlexBox_coffeeshop.html'}, 1000)} else {alert('登录信息有误')document.getElementById('username').value = '' // 清空用户名document.getElementById('password').value = '' // 清空密码document.getElementById('username').focus() // 将焦点重新设置到用户名输入框}
}class Student {constructor(username, password) {this.username = usernamethis.password = password}validateLogin(inputUsername, inputPassword) {return this.username === inputUsername && this.password === inputPassword}
}
const student = new Student(VALID_USERNAME, VALID_PASSWORD)function login() {const username = document.getElementById('username').valueconst password = document.getElementById('password').valueconst introduce = document.getElementById('introduce').valuelet selectedGenderif (document.querySelector('input[name="gender"]:checked')) {selectedGender = document.querySelector('input[name="gender"]:checked')}const interests = document.getElementById('interests').value// 个人介绍不能少于20个字符if (introduce.length < 20) {alert('字数不足')} else if (!selectedGender) {alert('性别不能为空')} else if (!interests) {alert('兴趣不能为空')} else if (student.validateLogin(username, password)) {alert('登录成功！')sessionStorage.setItem('username', username) // 将用户名保存到sessionStorage// 显示跳转信息并准备跳转document.getElementById('redirectMessage').style.display = 'block'setTimeout(function () {window.location.href = '../html/FlexBox_coffeeshop.html'}, 1000)} else {alert('登录信息有误')document.getElementById('username').value = '' // 清空用户名document.getElementById('password').value = '' // 清空密码document.getElementById('username').focus() // 将焦点重新设置到用户名输入框}
}
function submitForm() {// 获取表单数据var name = document.getElementById('username').valuevar password = document.getElementById('password').valueconsole.log(name)// 构造要显示的信息var resultText = `Username: ${name}<br>Password: ${password}`// 显示信息document.getElementById('result').innerHTML = resultTextlogin()
}function init() {//validateForm();submitForm()
}function resetUsername() {document.getElementById('username').value = ''document.getElementById('username').focus()
}function resetPassword() {document.getElementById('password').value = ''document.getElementById('password').focus()
}function resetGender() {// 将所有radio设置为未选中const radio = document.querySelector('input[name="gender"]:checked')radio.checked = false
}function resetInterests() {document.getElementById('interests').value = ''document.getElementById('interests').focus()
}function resetIntroduce() {document.getElementById('introduce').value = ''document.getElementById('introduce').focus()
}function submitForm() {var username = $('#username').val().trim();var password = $('#password').val().trim();if (username === '' || password === '') {alert("用户名和密码不能为空！");$('#username').focus();return false;}// 使用jQuery发出AJAX请求获取数据文件$.getJSON('../data/users.json', function(data) {var users = data.users;var isValidUser = users.some(function(user) {return user.username === username && user.password === password;});if (isValidUser) {alert('登录成功！');sessionStorage.setItem('username', username); // 将用户名保存到sessionStorage// 显示跳转信息并准备跳转$('#redirectMessage').show().delay(1000).fadeOut(function() {window.location.href = '../html/FlexBox_coffeeshop.html'; // 成功后的跳转页面});} else {alert('登录信息有误');$('#username').val(''); // 清空用户名$('#password').val(''); // 清空密码$('#username').focus(); // 将焦点重新设置到用户名输入框}}).fail(function() {alert("无法加载用户数据，请检查文件路径是否正确！");});
}function init() {submitForm()
}init()

2、在实验报告的小结中总结AJAX的知识点，以思维导图形式。

image-20240428211456701

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/bicheng/23155.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

笔记 | 软件工程03：软件过程和软件开发方法

笔记 | 软件工程03：软件过程和软件开发方法

软件过程 1 何为软件过程模型 1.1 软件开发的特点 1.2 软件过程 1.3 软件过程模型 1.3.1 软件过程模型产生的背景 软件工程产生之前的软件开发——作坊式的个人创作&#xff1a;聚焦于编写代码&#xff1b;依靠个体技能&#xff0c;缺乏合作&#xff1b;关注时空利用&#x…
阅读更多...
Threejs加载DOM+CSS到场景中,实现3D场景展示2D平面的效果

Threejs加载DOM+CSS到场景中,实现3D场景展示2D平面的效果

1. 前言 本篇文章主要实现了将DOM元素转换为Threejs可以使用的数据结构,使用CSS2DRenderer渲染器渲染这些DOMCSS的平面,使其可以作为一个物体添加到Threejs场景里 如下效果图: 2. 实现步骤 首先创建一个ThreejsVueVite的项目,作为本次的demo项目下载Threejs第三方库 yarn…
阅读更多...
C++候捷stl-视频笔记4

C++候捷stl-视频笔记4

一个万用的hash function 哈希函数的形式&#xff0c;一种是一般函数(右边)&#xff0c;一种是成员函数(左边)&#xff0c;类的对象将成为函数对象 具体做法例子。直接把属性的所有hash值加起来&#xff0c;会在hashtable中会产生很多的碰撞&#xff0c;放在同一个bucket中的元…
阅读更多...
游戏UI设计秘诀：专家总结与实际案例解析！

游戏UI设计秘诀：专家总结与实际案例解析！

随着游戏产业的不断发展&#xff0c;游戏UI界面设计变得越来越重要。一个好的游戏UI界面设计可以让玩家更容易理解游戏规则&#xff0c;提高游戏的可玩性&#xff0c;增加游戏的吸引力。在本文中&#xff0c;我们将讨论游戏UI界面设计的重要性和一些常见的设计原则。 1. 游戏U…
阅读更多...
前端框架中的虚拟DOM和实际DOM之间的关系

前端框架中的虚拟DOM和实际DOM之间的关系

聚沙成塔每天进步一点点 本文回顾 ⭐ 专栏简介前端框架中的虚拟DOM和实际DOM之间的关系1. 实际DOM&#xff08;Real DOM&#xff09;1.1 定义1.2 特点 2. 虚拟DOM&#xff08;Virtual DOM&#xff09;2.1 定义2.2 特点 3. 虚拟DOM的工作流程3.1 创建虚拟DOM3.2 比较虚拟DOM&…
阅读更多...
Django redirect()函数实现页面重定向

Django redirect()函数实现页面重定向

1&#xff0c;通过路由反向解析进行重定向 1.1 添加视图函数 myshop/app2/views.py from django.http import HttpResponse from django.shortcuts import render from django.urls import reverse def index(request):return HttpResponse("app2 的index")# 反向…
阅读更多...
PVE安装虚拟主机

PVE安装虚拟主机

本文记录PVE安装其他虚拟主机的步骤&#xff0c;以安装win-server为例。裸机安装PVE则不是本文主题。 准备文件 获取Windows系统镜像 win server镜像可以从官网获取普通Windows镜像可从MSDN获取此外&#xff0c;安装Windows系统还需要从PVE下载特殊驱动 获取Windows必要驱动 …
阅读更多...
康谋技术 | 自动驾驶：揭秘高精度时间同步技术（二）

康谋技术 | 自动驾驶：揭秘高精度时间同步技术（二）

在自动驾驶中&#xff0c;对车辆外界环境进行感知需要用到很多传感器的数据&#xff08;Lidar&#xff0c;Camera&#xff0c;GPS/IMU&#xff09;&#xff0c;如果计算中心接收到的各传感器消息时间不统一&#xff0c;则会造成例如障碍物识别不准等问题。 为了对各类传感器进…
阅读更多...
提高工作效率的神器有哪些？

提高工作效率的神器有哪些？

在这个人工智能技术蓬勃发展的时代&#xff0c;很多AI工具极大地提升我们的工作效率&#xff0c;比如很多人在用的ChatGPT、Kimi&#xff0c;它们几乎无所不能&#xff0c;小编在日常工作也用它们&#xff0c;建议想抓住AI风口&#xff0c;或者是想用这些工具提升自己的朋友去学…
阅读更多...
windows10 安装子linux系统（WSL安装方式）

windows10 安装子linux系统（WSL安装方式）

在 windows 10 平台采用了WSL安装方式安装linux子系统 1 查找自己想要安装的linux子系统 wsl --list --online 2 在线安装 个人用Debian比较多&#xff0c;这里选择Debian&#xff0c;如下图&#xff1a; wsl --install -d Debian 安装完成&#xff0c;如下&#xff1a; 相关…
阅读更多...
【JS重点知识03】定时器—间歇函数

【JS重点知识03】定时器—间歇函数

一&#xff1a;间歇函数的应用场景 网页倒计时是需要每个一段时间需自动执行一段代码&#xff0c;而不需要手动去触发&#xff1b;间歇函数刚好满足了这一要求&#xff1b; 二&#xff1a;间歇函数的使用 1 开启定时器 语法规范&#xff1a; 1 setInterval(匿名函数,时间)…
阅读更多...
Java版电商平台B2B2C：多商家直播商城系统特性解析

Java版电商平台B2B2C：多商家直播商城系统特性解析

B2B2C平台&#xff0c;立足于传统电商领域&#xff0c;同时引入了创新的商业模式。该平台不仅支持商家入驻和平台自营&#xff0c;还积极构建了一个全新的市场环境&#xff0c;旨在为各行各业及互联网创业者提供更多收益机会。 该平台以消费者需求为中心&#xff0c;帮助企业构…
阅读更多...
PyQt5+SQLlite3基于邮箱验证的登陆注册找回系统

PyQt5+SQLlite3基于邮箱验证的登陆注册找回系统

本期教程投稿一篇实用性的基于邮箱登陆注册找回于一体的系统&#xff0c;在日常的开发和软件应用中非常常见&#xff0c;并且也使用了逻辑与界面分离的写法&#xff0c;那这个文章将详细的为大家介绍整个流程&#xff0c;但是细节的话还需要大家自己去完善&#xff0c;也欢迎大…
阅读更多...
人工智能的兴起和发展

人工智能的兴起和发展

人工智能的兴起 人工智能&#xff0c;artificial intelligence&#xff0c;缩写为AI。 它是随着计算机技术的发展才逐步产生并发展起来的一门学科。关于AI的定义有很多种&#xff0c;通俗一点说&#xff0c;它企图了解智能的实质&#xff0c;并生产出一种新的&#xff0c;能以…
阅读更多...
Transformer学习(2)

Transformer学习(2)

这是Transformer的第二篇文章&#xff0c;上篇文章中我们了解了分词算法BPE&#xff0c;本文我们继续了解Transformer中的位置编码和核心模块——多头注意力。下篇文章就可以实现完整的Transformer架构。 位置编码 我们首先根据BPE算法得到文本切分后的子词标记&#xff0c;然…
阅读更多...
拿捏红黑树（C++）

拿捏红黑树（C++）

文章目录 前言一、红黑树介绍二、插入操作三、验证红黑树四、红黑树与AVL性能比较与应用五、总体代码总结 前言 我们之前介绍了一种AVL的高阶数据结构&#xff0c;在本篇文章中&#xff0c;我们将会介绍一种与AVL旗鼓相当的数据结构–红黑树。 我们并且会对它的部分接口进行模…
阅读更多...
zdppy_amauth 实现给角色批量绑定权限

zdppy_amauth 实现给角色批量绑定权限

新增接口 api.resp.post("/auth/role_auth", amauth.role.add_auths)如何测试 如何测试能不能给指定的角色批量的添加权限呢&#xff1f; 1、需要新建一个角色2、需要拿到这个角色的ID3、需要新增三个权限4、需要拿到新增的三个权限的ID5、拿着角色ID和权限ID列表…
阅读更多...
SSL代码签名最佳实践

SSL代码签名最佳实践

代码签名就是软件发布者使用全球可信的证书颁发机构CA颁发的代码签名证书对软件代码进行签名&#xff0c;由此来验证软件开发者的真实身份&#xff0c;确保软件代码的完整性和可信任性。然而&#xff0c;攻击者一直试图渗透代码签名&#xff0c;意将恶意软件嵌入可信代码中。由…
阅读更多...
【二叉树】Leetcode 637. 二叉树的层平均值【简单】

【二叉树】Leetcode 637. 二叉树的层平均值【简单】

二叉树的层平均值 给定一个非空二叉树的根节点 root , 以数组的形式返回每一层节点的平均值。与实际答案相差 10-5 以内的答案可以被接受。 示例 1&#xff1a; 输入&#xff1a;root [3,9,20,null,null,15,7] 输出&#xff1a;[3.00000,14.50000,11.00000] 解释&#xff1a…
阅读更多...
必应bing国内广告怎样开户投放呢？

必应bing国内广告怎样开户投放呢？

企业都在寻找高效、精准的营销渠道以扩大品牌影响力&#xff0c;提升市场占有率&#xff0c;作为全球第二大搜索引擎&#xff0c;微软旗下的必应Bing凭借其卓越的搜索技术和庞大的用户基础&#xff0c;成为了众多企业拓展市场的首选广告平台。在中国&#xff0c;必应Bing广告以…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023