当前位置: 首页 > news >正文

JavaScript 前端开发:从入门到精通的奇幻之旅

目录

一、引言

二、JavaScript 基础

(一)变量与数据类型

(二)运算符

(三)控制结构

三、函数

(一)函数定义与调用

(二)函数作用域

(三)闭包

四、DOM 操作

(一)DOM 简介

(二)获取元素

(三)修改元素属性

(四)添加和删除元素

五、事件处理

(一)事件简介

(二)添加事件处理程序

(三)常见事件类型


一、引言

在当今的互联网世界中,前端开发扮演着至关重要的角色。而 JavaScript 无疑是前端开发领域的核心技术之一。它就像一把神奇的钥匙,打开了创建交互式网页的大门。无论是炫酷的动画效果、动态的数据更新,还是复杂的用户交互逻辑,JavaScript 都能轻松应对。从简单的网页表单验证到构建大型的单页面应用程序(SPA),JavaScript 的应用场景无处不在。在这篇博客中,我们将深入探讨 JavaScript 前端开发的各个方面,带领大家踏上从入门到精通的精彩旅程。

二、JavaScript 基础

(一)变量与数据类型

  1. 变量声明
    在 JavaScript 中,我们可以使用 varlet 和 const 来声明变量。var 是早期的变量声明方式,它存在变量提升的问题。例如:
    console.log(a); // 输出 undefined
    var a = 5;

    let 和 const 是 ES6 引入的新方式。let 声明的变量不存在变量提升,且不允许在相同作用域内重复声明。const 用于声明常量,一旦赋值就不能再修改。

    console.log(b); // 报错:b is not defined
    let b = 10;
    const c = 20;
    c = 30; // 报错:Assignment to constant variable.
  2. 数据类型
    JavaScript 有多种数据类型,包括基本数据类型和复杂数据类型。基本数据类型有:
    • Number:用于表示数字,包括整数和浮点数。例如:let num = 42; 或 let floatNum = 3.14;
    • String:用于表示文本。可以使用单引号或双引号来创建字符串。例如:let str = 'Hello, JavaScript!'; 或 let anotherStr = "This is also a string."
    • Boolean:只有两个值 true 和 false,用于表示逻辑值。例如:let isTrue = true;
    • Null:表示一个空值。例如:let emptyValue = null;
    • Undefined:当一个变量声明但未赋值时,其值为 undefined。例如:let undef; console.log(undef); // 输出 undefined
      复杂数据类型主要有:
    • Object:这是 JavaScript 中最复杂的数据类型。对象可以包含多个属性和方法。例如:
      let person = {name: 'John',age: 30,sayHello: function() {console.log('Hello!');}
      };
    • Array:用于存储一组有序的值。例如:let fruits = ['apple', 'banana', 'cherry'];

(二)运算符

  1. 算术运算符
    JavaScript 中的算术运算符包括加(+)、减(-)、乘(*)、除(/)和取模(%)。需要注意的是,加法运算符在处理字符串时会进行字符串拼接。例如:
    let num1 = 5;
    let num2 = 3;
    console.log(num1 + num2); // 8
    let str1 = 'Hello, ';
    let str2 = 'world!';
    console.log(str1 + str2); // Hello, world!
  2. 比较运算符
    比较运算符用于比较两个值,返回一个布尔值。包括等于(==)、不等于(!=)、全等(===)、不全等(!==)、大于(>)、小于(<)、大于等于(>=)和小于等于(<=)。全等运算符会比较值和数据类型,而等于运算符只比较值。例如:
    console.log(5 == '5'); // true
    console.log(5 === '5'); // false
  3. 逻辑运算符
    逻辑运算符包括与(&&)、或(||)和非(!)。&& 运算符当两个操作数都为真时返回真,|| 运算符当至少一个操作数为真时返回真,! 运算符用于取反。例如:
    let a = true;
    let b = false;
    console.log(a && b); // false
    console.log(a || b); // true
    console.log(!a); // false

(三)控制结构

  1. 条件语句(if - else)
    if - else 语句用于根据条件执行不同的代码块。例如:
    let score = 80;
    if (score >= 90) {console.log('优秀');
    } else if (score >= 80) {console.log('良好');
    } else if (score >= 60) {console.log('及格');
    } else {console.log('不及格');
    }
  2. 循环语句(for、while、do - while)
    • for 循环:常用于已知循环次数的情况。例如:
      for (let i = 0; i < 5; i++) {console.log(i);
      }

    • 循环语句(for、while、do - while)
      • for 循环:常用于已知循环次数的情况。例如:
        for (let i = 0; i < 5; i++) {console.log(i);
        }
      • while 循环:在条件为真时持续执行代码块。例如:
        let j = 0;
        while (j < 3) {console.log(j);j++;
        }
      • do - while 循环:与 while 循环类似,但会先执行一次代码块再检查条件。例如:
        let k = 0;
        do {console.log(k);k++;
        } while (k < 2);

三、函数

(一)函数定义与调用

函数是 JavaScript 中的重要组成部分,可以将一段可重复使用的代码封装起来。函数可以使用函数声明或函数表达式来定义。

  1. 函数声明
    function add(num1, num2) {return num1 + num2;
    }
    console.log(add(3, 5)); // 8
  2. 函数表达式
    let multiply = function(num1, num2) {return num1 * num2;
    };
    console.log(multiply(2, 4)); // 8

    函数可以有参数和返回值。参数是函数接收外部传入的值,返回值是函数执行后返回的结果。

(二)函数作用域

JavaScript 中的函数有自己的作用域。在函数内部定义的变量在函数外部是不可访问的,而在函数外部定义的变量在函数内部如果没有同名变量则可以访问。例如:

let globalVar = 10;
function testScope() {let localVar = 20;console.log(globalVar); // 10
}
testScope();
console.log(localVar); // 报错:localVar is not defined

(三)闭包

闭包是 JavaScript 中一个比较高级但非常重要的概念。它允许函数访问其定义时所在的词法作用域,即使在函数在其词法作用域之外被执行时。例如:

function outerFunction() {let count = 0;return function() {count++;console.log(count);};
}
let inner = outerFunction();
inner(); // 1
inner(); // 2

在这个例子中,inner 函数形成了一个闭包,它可以访问并修改 outerFunction 中定义的 count 变量。

四、DOM 操作

(一)DOM 简介

DOM(Document Object Model)是文档对象模型,它将 HTML 文档表示为一个树形结构。在 JavaScript 中,我们可以通过 DOM API 来操作 HTML 元素,如获取元素、修改元素属性、添加或删除元素等。

(二)获取元素

  1. 通过 ID 获取元素
    可以使用 document.getElementById 方法来获取具有特定 ID 的元素。例如:
    <!DOCTYPE html>
    <html>
    <body><div id="myDiv">这是一个 div 元素</div><script>let myDiv = document.getElementById('myDiv');console.log(myDiv.innerHTML); // 这是一个 div 元素
    </script>
    </body>
    </html>
  2. 通过标签名获取元素
    使用 document.getElementsByTagName 方法可以获取指定标签名的所有元素。例如:
    <!DOCTYPE html>
    <html>
    <body><p>段落 1</p>
    <p>段落 2</p><script>let paragraphs = document.getElementsByTagName('p');for (let i = 0; i < paragraphs.length; i++) {console.log(paragraphs[i].innerHTML);}
    </script>
    </body>
    </html>
  3. 通过类名获取元素
    document.getElementsByClassName 方法用于获取具有特定类名的所有元素。例如:
    <!DOCTYPE html>
    <html>
    <body><div class="myClass">类名为 myClass 的 div 1</div>
    <div class="myClass">类名为 myClass 的 div 2</div><script>let myClassElements = document.getElementsByClassName('myClass');for (let i = 0; i < myClassElements.length; i++) {console.log(myClassElements[i].innerHTML);}
    </script>
    </body>
    </html>

(三)修改元素属性

可以通过 JavaScript 来修改元素的各种属性,如修改元素的样式、内容等。

  1. 修改样式
    可以直接修改元素的 style 属性来改变其样式。例如:
    <!DOCTYPE html>
    <html>
    <body><div id="myDiv" style="width: 100px; height: 100px; background-color: red;">原始 div</div><script>let myDiv = document.getElementById('myDiv');myDiv.style.backgroundColor = 'blue';myDiv.style.width = '200px';
    </script>
    </body>
    </html>
  2. 修改内容
    可以使用 innerHTML 属性来修改元素的内容。例如:
    <!DOCTYPE html>
    <html>
    <body><div id="myDiv">原始内容</div><script>let myDiv = document.getElementById('myDiv');myDiv.innerHTML = '新内容';
    </script>
    </body>
    </html>

(四)添加和删除元素

  1. 添加元素
    可以使用 document.createElement 创建新元素,然后使用 appendChild 方法将其添加到父元素中。例如:
    <!DOCTYPE html>
    <html>
    <body><div id="parentDiv"></div><script>let parentDiv = document.getElementById('parentDiv');let newDiv = document.createElement('div');newDiv.innerHTML = '新创建的 div';parentDiv.appendChild(newDiv);
    </script>
    </body>
    </html>
  2. 删除元素
    可以使用 parentNode.removeChild 方法来删除一个元素。例如:
    <!DOCTYPE html>
    <html>
    <body><div id="parentDiv"><div id="childDiv">要删除的 div</div>
    </div><script>let childDiv = document.getElementById('childDiv');let parentDiv = document.getElementById('parentDiv');parentDiv.removeChild(childDiv);
    </script>
    </body>
    </html>

五、事件处理

(一)事件简介

事件是用户与网页交互时产生的动作,如点击、鼠标移动、键盘按键等。JavaScript 可以通过事件处理程序来响应这些事件。

(二)添加事件处理程序

  1. 内联方式
    可以在 HTML 元素的属性中直接添加事件处理程序。例如:
    <button onclick="alert('你点击了按钮');">点击我</button>

    不过这种方式将 JavaScript 代码与 HTML 代码混合,不利于维护,一般不推荐使用。
    2. 脚本方式
    可以使用 JavaScript 在脚本中为元素添加事件处理程序。例如:

    <!DOCTYPE html>
    <html>
    <body><button id="myButton">点击我</button><script>let myButton = document.getElementById('myButton');myButton.addEventListener('click', function() {console.log('按钮被点击了');});
    </script>
    </body>
    </html>

    这里使用了 addEventListener 方法,它可以为元素添加多个相同类型的事件处理程序,并且可以更好地控制事件的传播。

(三)常见事件类型

  1. 鼠标事件
    常见的鼠标事件包括 click(点击)、mouseover(鼠标移到元素上)、mouseout(鼠标移出元素)等。例如:
    <!DOCTYPE html>
    <html>
    <body><div id="myDiv" style="width: 100px; height: 100px; background-color: red;">鼠标悬停测试</div><script>let myDiv = document.getElementById('myDiv');myDiv.addEventListener('mouseover', function() {this.style.backgroundColor = 'blue';});myDiv.addEventListener('mouseout', function() {this.style.backgroundColor = 'red';});
    </script>
    </body>
    </html>
  2. 键盘事件
    键盘事件有 keydown(键盘按键按下)、keyup(键盘按键松开)等。例如:
    <!DOCTYPE html>
    <html>
    <body><input type="text" id="myInput"><script>let myInput = document.getElementById('myInput');myInput.addEventListener('keydown', function(event) {console.log('按下的键码:', event.keyCode);});
    </script>
    </body>
    </html>
  3. 表单事件
    对于表单元素,有 submit(表单提交)、change(表单元素值改变)等事件。例如:
    <!DOCTYPE html>
    <html>
    <body><form id="myForm"><input type="text" id="myInput"><input type="submit" value="提交">
    </form><script>let myForm = document.getElementById('myForm');myForm.addEventListener('submit', function(event) {event.preventDefault();console.log('表单提交');});let myInput = document.getElementById('myInput');myInput.addEventListener('change', function() {console.log('输入框内容改变');});
    </script>
    </body>
    </html>

    这里在表单的 submit 事件处理程序中使用了 event.preventDefault 方法来阻止表单的默认提交行为。

相关文章:

JavaScript 前端开发:从入门到精通的奇幻之旅

目录 一、引言 二、JavaScript 基础 &#xff08;一&#xff09;变量与数据类型 &#xff08;二&#xff09;运算符 &#xff08;三&#xff09;控制结构 三、函数 &#xff08;一&#xff09;函数定义与调用 &#xff08;二&#xff09;函数作用域 &#xff08;三&am…...

shell编程基础笔记

目录 echo改字体颜色和字体背景颜色 bash基本功能&#xff1a; 运行方式&#xff1a;推荐使用第二种方法 变量类型 字符串处理&#xff1a; 条件判断&#xff1a;&#xff08;使用echo $?来判断条件结果&#xff0c;0为true&#xff0c;1为false&#xff09; 条件语句&a…...

FPGA实现GTP光口视频转USB3.0传输,基于FT601+Aurora 8b/10b编解码架构,提供3套工程源码和技术支持

目录 1、前言工程概述免责声明 2、相关方案推荐我已有的所有工程源码总目录----方便你快速找到自己喜欢的项目我这里已有的 GT 高速接口解决方案本博已有的FPGA驱动USB通信方案 3、工程详细设计方案工程设计原理框图输入Sensor之-->OV5640摄像头输入Sensor之-->芯片解码的…...

使用 PDF API 合并 PDF 文件

内容来源&#xff1a; 如何在 Mac 上合并 PDF 文件 1. 注册与认证 您可以注册一个免费的 ComPDFKit API 帐户&#xff0c;该帐户允许您在 30 天内免费无限制地处理 1,000 多个文档。 ComPDFKit API 使用 JSON Web Tokens 方法进行安全身份验证。从控制面板获取您的公钥和密钥&…...

Jenkins Nginx Vue项目自动化部署

目录 一、环境准备 1.1 Jenkins搭建 1.2 NVM和Nodejs安装 1.3 Nginx安装 二、Jenkins配置 2.1 相关插件安装 2.2 全局工具安装 2.3 环境变量配置 2.4 邮箱配置&#xff08;构建后发送邮件&#xff09; 2.5 任务配置 三、Nginx配置 3.1 配置路由转发 四、部署项目 …...

python代码实现问卷星问卷内容获取并写入word文档保存

以下附完整代码。 import os from tkinter import Tk, simpledialog, messagebox from docx import Document import time import requests import re from tkinter import ttk# 使用 tkinter 创建一个简单的输入框来获取用户输入的问卷链接 root Tk() root.title("问卷…...

C# 2024年Visual Studio实用插件集合

在2024年&#xff0c;Visual Studio作为.NET开发者的首选IDE&#xff0c;其插件生态不断壮大&#xff0c;为开发者提供了更高效、便捷的开发体验。本文将介绍一些实用的Visual Studio插件&#xff0c;特别是针对C#开发者&#xff0c;帮助提升开发效率和代码质量。 1. GitHub C…...

基于PHP的香水销售系统的设计与实现

摘 要 时代科技高速发展的背后&#xff0c;也带动了经济的增加&#xff0c;人们对生活质量的要求也不断提高。香水作为一款在人际交往过程中&#xff0c;给对方留下良好地第一印象的产品&#xff0c;在生活中也可以独自享受其为生活带来的点缀。目前香水市场体量庞大&#xff…...

QT去除窗口边框(无边框)

ch21_TencentMeetingLogin::ch21_TencentMeetingLogin(QWidget *parent): QDialog(parent) {ui.setupUi(this);this->setWindowFlags(Qt::FramelessWindowHint);//去除窗口边框 } 但此时窗口不能拖动且点击任务栏程序图标不能最小化&#xff01; this->setWindowFlags(Q…...

【k8s】监控metrics-server

metrics-server介绍 Metrics Server是一个集群范围的资源使用情况的数据聚合器。作为一个应用部署在集群中。Metric server从每个节点上KubeletAPI收集指标&#xff0c;通过Kubernetes聚合器注册在Master APIServer中。为集群提供Node、Pods资源利用率指标。 就像Linux 系统一样…...

「Qt Widget中文示例指南」如何为窗口实现流程布局?(二)

Qt 是目前最先进、最完整的跨平台C开发工具。它不仅完全实现了一次编写&#xff0c;所有平台无差别运行&#xff0c;更提供了几乎所有开发过程中需要用到的工具。如今&#xff0c;Qt已被运用于超过70个行业、数千家企业&#xff0c;支持数百万设备及应用。 本文将展示如何为不…...

EditInPlace就地编辑:Dom vs Form

利用Dom和Form实现就地编辑&#xff08;EditInPlace&#xff09;功能&#xff0c;两者在实现方式、用户体验和适用场景上有一些区别。下面我将详细解释这些区别&#xff1a; 1. EditInPlace 就地编辑&#xff08;EditInPlace&#xff09;是一种用户界面设计模式&#xff0c;允…...

【SCT63142FIB】15W高集成、高效率的无线功率发射PMIC

SCT63142FIB 15W高集成、高效率的无线功率发射PMIC 描述 SCT63142是一款高度集成的电源管理IC&#xff0c;可实现符合WPC规范的高性能&#xff0c;高效率和成本效益的无线电源发送系统&#xff0c;支持高达15W的功率传输&#xff0c;可与无线应用特定控制器或基于通用MCU的发送…...

STM32F4系列单片机新玩法---Micropython--pyBoard

只需要更改main.py文件的内容即可&#xff0c;例程CRTLV 1、流水灯&#xff1a; # main.py -- put your code here! import pyb while(1): for n in range(1,5) ledpyb.LED(n) led.on() pyb.delay(1000) led.off() 2、灯条,可以改变delay值来凸显效果…...

MFC中如何在工具条动态增加菜单

在C:\temp\VCSamples-master\VC2010Samples\MFC\Visual C 2008 Feature Pack\WordPad 这个例子中倒是有在工具条上动态增加菜单的方法&#xff0c;但有个缺陷&#xff0c;必须预先将需要的按钮定死。现将方法总结如下&#xff1a; 效果如下&#xff1a;点击前&#xff1a; 点击…...

行为型模式-迭代器模式

迭代器模式&#xff08;Iterator Pattern&#xff09;是一种行为型设计模式&#xff0c;主要用于提供一种方法顺序访问一个聚合对象中的各个元素&#xff0c;而不需要暴露其内部表示。这个模式常被用于集合类对象&#xff08;如列表、数组、图等&#xff09;的实现中。 模式结构…...

SAP SD学习笔记17 - 投诉处理3 - Credit/Debit Memo依赖,Credit/Debit Memo

上一章讲了 请求书&#xff08;发票&#xff09;的取消。 SAP SD学习笔记16 - 请求书的取消 - VF11-CSDN博客 再往上几章&#xff0c;讲了下图里面的返品传票&#xff1a; SAP SD学习笔记14 - 投诉处理1 - 返品处理&#xff08;退货处理&#xff09;的流程以及系统实操&#…...

digit_eye开发记录(3): C语言读取MNIST数据集

在前两篇&#xff0c;我们解读了 MNIST 数据集的 IDX 文件格式&#xff0c;并分别用 C 和 Python 做了 读取 MNIST 数据集的实现。 基于 C 的代码稍长&#xff0c;基于 Python 的代码则明显更短&#xff0c;然而它们的共同特点是&#xff1a;依赖了外部库&#xff1a; 基于 C …...

快速学习GO语言总结

干货分享&#xff0c;感谢您的阅读&#xff01;备注&#xff1a;本博客将自己初步学习GO的总结进行分享&#xff0c;希望大家通过本博客可以在短时间内快速掌握GO的基本程序编码能力&#xff0c;如有错误请留言指正&#xff0c;谢谢&#xff01; 一、初步了解Go语言 &#xf…...

开源多媒体处理工具ffmpeg是什么?如何安装?使用ffmpeg将M3U8格式转换为MP4

目录 一、FFmpeg是什么二、安装FFmpeg&#xff08;windows&#xff09;三、将M3U8格式转换为MP4格式 一、FFmpeg是什么 FFmpeg是一款非常强大的开源多媒体处理工具&#xff0c;它几乎可以处理所有类型的视频、音频、字幕以及相关的元数据。 FFmpeg的主要用途包括但不限于&…...

Python面试实战:高效处理海量日志,找出高频IP

Python面试实战:高效处理海量日志,找出高频IP 问题描述 在处理海量服务器日志时,一个常见的需求是统计出现次数最多的IP地址。这不仅有助于分析网站访问流量,还能为安全监控提供有价值的信息。然而,当日志文件过大,无法一次性加载到内存时,如何高效地解决这个问题就成…...

基于Java Springboot蛋糕订购小程序

一、作品包含 源码数据库设计文档万字PPT全套环境和工具资源部署教程 二、项目技术 前端技术&#xff1a;Html、Css、Js、Vue、Element-ui 数据库&#xff1a;MySQL 后端技术&#xff1a;Java、Spring Boot、MyBatis 三、运行环境 开发工具&#xff1a;IDEA/eclipse 微信…...

Java进程为什么会消失

深夜&#xff0c;办公室里只剩下电脑屏幕的微光。小王正在紧张地盯着生产环境的监控面板&#xff0c;突然发现一个重要的Java应用进程不见了&#xff0c;就像人间蒸发一般。这种情况在Java开发中并不罕见&#xff0c;让我们一起走进这个技术探案&#xff0c;揭开Java进程神秘消…...

继上一篇,设置弹框次数以及自适应图片弹框,部分机型(vivo)老手机不显示的问题

上一篇写的本来测试好多型号都无事, 今天下午公司的战斗机vivo横空冒出… 晕 弹框直接显示都出不来了,现在还有用这种老的机型的,但是没办法咯~ 前端遇到这种兼容性的问题就要勇于解决 主要解决了这几点: // 添加图片加载事件 <imgv-if"imageUrl":src"image…...

【docker】容器卷综合讲解,以及go实现的企业案例

容器卷&#xff08;Volumes&#xff09;基础讲解&#xff1a; 容器概念 容器卷&#xff08;Volumes&#xff09;是 Docker 提供的一种持久化存储机制&#xff0c;允许容器持久化数据&#xff0c;即使容器被删除或重新创建&#xff0c;数据仍然可以保留。 卷是独立于容器的&…...

八、利用CSS制作导航栏菜单

8.1 水平顶部导航栏 水平菜单导航栏是网站设计中应用范围最广的导航设计&#xff0c;一般放置在页面的顶部。水平导航适用性强&#xff0c;几乎所有类型的网站都可以使用。 如果导航过于普通&#xff0c;无法容纳复杂的信息结构&#xff0c;就需要在内容模块较多的情况…...

windows下安装node.js和pnpm

首先&#xff0c;一定要powershell右键选择管理员身份运行&#xff0c;否则第三个命令报错。 # 安装 fnm (快速 Node 管理器) winget install Schniz.fnm# 配置 fnm 环境 fnm env --use-on-cd | Out-String | Invoke-Expression# 下载并安装 Node.js fnm use --install-if-mis…...

MyBlog(五) -- 用户注册页面完善

文章目录 前言一、用户数据提交1. 表单2. 校验数据3. 模版文件1. wait_start2. user_register 二、验证1. 发送邮件1. 注册163邮箱后登录并设置2. 开启IMAP/SMTP服务, IMAP/SMTP服务3. 新增授权密码 2.邮箱内容3.点击注册4.发送邮件5. 激活账号1. 完善激活功能 -- user_active2…...

NLP任务四大范式的进阶历程:从传统TF-IDF到Prompt-Tuning(提示词微调)

引言&#xff1a;从TF-IDF到Prompt-Tuning&#xff08;提示词微调&#xff09;&#xff0c;NLP的四次变革 自然语言处理&#xff08;NLP&#xff09;技术从最早的手工特征设计到如今的Prompt-Tuning&#xff0c;经历了四个重要阶段。随着技术的不断发展&#xff0c;我们的目标…...

量化交易系统开发-实时行情自动化交易-8.3.开拓者TBQuant平台

19年创业做过一年的量化交易但没有成功&#xff0c;作为交易系统的开发人员积累了一些经验&#xff0c;最近想重新研究交易系统&#xff0c;一边整理一边写出来一些思考供大家参考&#xff0c;也希望跟做量化的朋友有更多的交流和合作。 接下来会对于开拓者TBQuant平台介绍。 …...

第八课 Unity编辑器创建的资源优化_特效篇(Particle System)详解

无论是CPU还是GPU&#xff0c;粒子系统对其的影响面都是不容小觑的。随着项目的重度化和3A化&#xff0c;玩家的口味变挑剔了、游戏玩法复杂度变高了、画面的特效表现变复杂了......所以我们还是更加谨慎地对待粒子系统。 特效&#xff08;Particle System&#xff09; 游戏效…...

redis常见数据类型

Redis是一个开源的、内存中的数据结构存储系统&#xff0c;它可以用作数据库、缓存和消息代理&#xff0c;支持多种数据类型。 一、数据类型介绍 String&#xff08;字符串&#xff09; Redis中最基本的数据类型。可以存储任何类型的数据&#xff0c;包括字符串、数字和二进制…...

【解决安全扫描漏洞】---- 检测到目标站点存在 JavaScript 框架库漏洞

1. 漏洞结果 JavaScript 框架或库是一组能轻松生成跨浏览器兼容的 JavaScript 代码的工具和函数。如果网站使用了存在漏洞的 JavaScript 框架或库&#xff0c;攻击者就可以利用此漏洞来劫持用户浏览器&#xff0c;进行挂马、XSS、Cookie劫持等攻击。 1.1 漏洞扫描截图 1.2 具体…...

深入解析 Kubernetes 节点操作:Cordon、Uncordon 和 Drain 的使用与最佳实践

摘要 Kubernetes 是一个用于自动化容器部署、扩展和管理的开源系统&#xff0c;而节点管理是其核心功能之一。cordon、uncordon 和 drain 是 Kubernetes 提供的与节点操作相关的三个重要命令&#xff0c;用于节点的调度控制和维护管理。本文将从概念、命令解析、内部机制和最佳…...

python array矩阵相关操作

目录&#xff1a; 一、判断某个值是否在array二维数组的某列中 二、根据某列中的特定值筛选array数组 三、查找一个元素在二维 array 矩阵中的位置 四、判断array数组中的每个元素是否包含特定的子字符串 一、判断某个值是否在array二维数组的某列中 在 Python 中&#xf…...

网络安全——浅谈HTTP协议

HTTP请求 HTTP请求是客户端往服务端发送请求动作&#xff0c;告知服务器自己的要求。 HTTP请求由状态行、请求头、请求正文三部分组成&#xff1a; 状态行&#xff1a;包括请求方式Method、资源路径URL、协议版本Version&#xff1b;请求头&#xff1a;包括一些访问的域名、…...

BWO-CNN-BiGRU-Attention白鲸优化算法优化卷积神经网络结合双向门控循环单元时间序列预测,含优化前后对比

BWO-CNN-BiGRU-Attention白鲸优化算法优化卷积神经网络结合双向门控循环单元时间序列预测&#xff0c;含优化前后对比 目录 BWO-CNN-BiGRU-Attention白鲸优化算法优化卷积神经网络结合双向门控循环单元时间序列预测&#xff0c;含优化前后对比预测效果基本介绍模型描述程序设计…...

55 基于单片机的方波频率可调

目录 一、主要功能 二、硬件资源 三、程序编程 四、实现现象 一、主要功能 采用STC89C52单片机最小系统&#xff0c;设计DAC0832、放大器、与示波器显示方波&#xff0c;四位数码管显示频率&#xff0c;两个按键可调。 二、硬件资源 基于KEIL5编写C代码&#xff0c;PROT…...

SAP SD学习笔记15 - 投诉处理2 - 返品处理流程之 参照请求传票(发票)来生成返品传票

上一章讲了返品处理&#xff08;退货处理&#xff09;的流程。 SAP SD学习笔记14 - 投诉处理1 - 返品处理&#xff08;退货处理&#xff09;的流程以及系统实操&#xff0c;比如 返品传票&#xff1b;请求Block标记&#xff1b;收到退货之后的处理&#xff0c;请求传票的登录_…...

LWIP和FATFS 实现 FTP 服务端

目录 一、前言 二、LWIP 和 FTP 简介 1.LWIP 2.FTP 三、实现 FTP 服务端的主要步骤 1.初始化 LWIP 2.创建 FTP 服务器任务 3.处理客户端连接 4.实现 FTP 命令处理 5.文件系统操作 6.错误处理和日志记录 四、示例代码 1.创建FTP任务 2. FTP任务代码 3.处理交互数据…...

缓冲区的奥秘:解析数据交错的魔法

目录 一、理解缓存区的好处 &#xff08;一&#xff09;直观性的理解 &#xff08;二&#xff09;缓存区的好处 二、经典案例分析体会 &#xff08;一&#xff09;文件读写流&#xff08;File I/O Buffering&#xff09; BufferedOutputStream 和 BufferedWriter 可以加快…...

【MySQL — 数据库基础】MySQL的安装与配置 & 数据库简单介绍

数据库基础 本节目标 掌握关系型数据库&#xff0c;数据库的作用掌握在Windows和Linux系统下安装MySQL数据库了解客户端工具的基本使用和SQL分类了解MySQL架构和存储引擎 1. 数据库的安装与配置 1.1 确认MYSQL版本 处理无法在 cmd 中使用 mysql 命令的情况&a…...

如何使用Python解析从淘宝API接口获取到的JSON数据?

基本的 JSON 解析 当从淘宝 API 接口获取到数据后&#xff08;假设数据存储在变量response_data中&#xff09;&#xff0c;首先要判断数据类型是否为 JSON。如果是&#xff0c;就可以使用 Python 内置的json模块进行解析。示例代码如下&#xff1a; import json # 假设respon…...

Day1 生信新手笔记

生信新手笔记 生信学习第一天笔记打卡。 转录组学中&#xff1a; 上游分析-基于linux&#xff0c;包括质控、过滤、比对、定量&#xff1b; 下游分析-基于R语言&#xff0c;包括差异分析、富集分析、可视化。 1. 级别标题 一个井号加空格 就是一级标题&#xff0c;两个井号加…...

内网穿透步骤

步骤 第一次需要验证token window和linux的方法不同。 然后 启动 cpolar 服务&#xff1a; 在命令窗口中输入 cpolar.exe htttp 8080&#xff0c;启动内网穿透服务。确保命令窗口保持开启状态&#xff0c;以维持穿透效果。 cpolar.exe hhttp 8080 成功后 注意事项 命令窗口…...

docker启动容器,语句名词解释

#启动容器代码docker run -it -d --name dev_aios -v D:\project\aialign:/www/ -v D:\project\data\dev\aios:/myfile/data/dev/aios -w /www/stand-alone-aios/aios -p 9002:9000 --ulimit core0 aialign/python-base:1.0 bash名词解释 docker run: 这是 Docker 的命令&#…...

微服务之短信验证服务配置完后junit单元测试短信发送失败

总之岁月漫长&#xff0c;然而值得等待。 主要是版本冲突问题&#xff0c;具体报错与解决方法如下&#xff1a; 报错前&#xff1a; 启动失败 短信服务测试报错&#xff1a; 解决后&#xff1a; 启动成功 短信服务测试发送成功&#xff1a; 在使用 SpringBoot 开发时&am…...

QSqlTableModel的使用

实例功能 这边使用一个实例显示数据库 demodb 中 employee 数据表的内容&#xff0c;实现编辑、插入、删除的操作&#xff0c;实现数据的排序和记录过滤&#xff0c;还实现 BLOB 类型字段 Photo 中存储照片的显示、导入等操作&#xff0c;运行界面如下图&#xff1a; 在上图中…...

构建高可用系统设计OpenStack、Docker、Mesos和Kubernetes(简称K8s)

如果构建高可用、高并发、高效运维的大型系统 大型系统架构设计包括业务层设计、服务层设计、基础架层设计、存储层设计、网络层协同设计来完成。 一、业务层 根据主要业务范畴的分类和特征提取&#xff0c;抽象出独立的业务系统&#xff0c;分别统计系统的用户角色群体、访…...

CondaValueError: Malformed version string ‘~‘: invalid character(s).

问题描述&#xff1a;在window下使用conda安装任何包都会报错。报错信息是CondaValueError: Malformed version string ~: invalid character(s). 解决办法&#xff1a;把.condarc文件的源地址删除&#xff08;八成是源地址访问不了了&#xff09;&#xff0c;只保存默认的&am…...