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

Java后端程序员学习前端之JavaScript

news 来源：原创 2025/8/13 21:56:45

1.什么是JavaScript

1.1.概述

JavaScript是一门世界上最流行的脚本语言javaScript
一个合格的后端人员，必须要精通JavaScript

1.2.历史

JavaScript的起源故事-CSDN博客

2.快速入门

2.1.引入JavaScript

1.内部标签

    <script>//.......</script> -->

2.外部引入

    <!-- 外部引入 --><!-- 注意：script标签必须成对出现 --><script src="js/rm.js"></script>

测试代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><!-- 在script标签中写，JavaScript代码<script>alert("hello world");</script> --><!-- 外部引入 --><!-- 注意：script标签必须成对出现 --><script src="js/rm.js"></script>
</head>
<body>  <!-- 这里也可以存放 -->
</body>
</html>

2.2.基本语法入门

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><!-- JavaScript严格区分大小写 --><script>// 1.定义变量 变量类型 变量名 = 变量值var score = 71;// 2.条件控制if(score>60 && score<70){alert("60-70")}else if(score>70 && score<80){alert("70-80")}else{alert("other")}// console.log(score) 在浏览器控制台打印变量 System.out.println();</script>
</head>
<body></body>
</html>

浏览器必备调试须知：

2.3.数据类型

数值，文本，图形，音频，视频.
number
js不区分小数和整数，Number

字符串

'abc' "abc"

布尔值

true false

逻辑运算

比较运算符！！！重要

这是一个JS的缺陷，坚持不要使用==比较

须知:

NaN===NaN，这个与所有的数值都不相等，包括自己
只能通过 isNaN(NaN) 来判断这个数是否是 NaN

浮点数问题

尽量避免使用浮点数进行运算，存在精度问题!

null 和 undefined

null 空
undefined 未定义

数组

Java的数值必须是相同类型的对象~,JS中不需要这样!

取数组下标:如果越界了，就会

对象

对象是大括号，数组是中括号~
每个属性之间使用逗号隔开，最后一个不需要添加

取对象的值

2.4严格检查模式

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><!-- 前提：ide需要设置ES6语法'use strict'; 严格检查模式，预防JavaScript的随意性导致产生一些问题必须卸载JavaScript的第一行！局部变量建议都使用let 去定义--><script>'use strict'// 全局变量let i = 1;// ES6 let</script>
</body>
</html>

3.数据类型

3.1.字符串

1、正常字符串我们使用单引号，或者双引号包裹
2、注意转义字符\

3、多行字符串编写

4.模板字符串

5.字符串长度

6.字符串的可变性，不可变

7.大小写转换

8.substring

3.2.数组

Array可以包含任意的数据类型

1.长度

注意:加入给 arr.length 赋值，数组大小就会发生变化~，如果赋值过小，元素就会丢失

2、indexOf，通过元素获得下标索引

字符串的“1"和数字 1是不同的

3、slice() 截取Array的一部分，返回一个新数组，类似于String中的 substring

4、push()，pop()尾部

5、unshift(),shift()头部

6、排序 sort()

7、元素反转 reverse()

8、concat（）

注意:concat()并没有修改数组，只是会返回一个新的数组

9、连接符 join
打印拼接数组，使用特定的字符串连接

10、多维数组

数组:存储数据(如何存，如和取，方法都可以自己实现!)

3.3.对象

若干个键值对

Js中对象， {..} 表示一个对象,键值对描述属性 xxxx:xxxx，多个属性之间使用逗号隔开，最后一个属性不加逗号!

JavaScript中的所有的键都是字符串，值是任意对象!
1、对象赋值

2、使用一个不存在的对象属性，不会报错！undefined

3、动态的删减属性，通过 delete 删除对象的属性

4、动态的添加，直接给新的属性添加值即可

5、判断属性值是否在这个对象中!xxx in xxx!

6、判断一个属性是否是这个对象自身拥有的 hasOwnProperty（）

3.4.流程控制

if判断

while循环，避免程序死循环

for循环

forEach循环

5.1引入

for...in

3.5.Map和Set

ES6的新特性

Map：

Set:无序不重复的集合

3.6.iterator

遍历数组

遍历map

遍历set

4.函数

4.1.定义函数

定义方式一、

绝对值函数

一旦执行到 return 代表函数结束，返回结果!

如果没有执行 return ，函数执行完也会返回结果，结果就是 undefined

定义方式二、

function(x){…}这是一个匿名函数。但是可以把结果赋值给 abs ，通过abs 就可以调用函数!
方式一和方式二等价!

参数问题:javaScript 可以传任意个参数，也可以不传递参数~

参数进来是否存在的问题?
假设不存在参数，如果规避?

arguments

arguments是一个JS免费赠送的关键字，
代表，传递进来的所有的参数，是一个数组!

问题: arguments 包含所有的参数，我们有时候想使用多余的参数来进行附加操作。需要排除已有参数~

rest

以前：

ES6 引入的新特性，获取除了已经定义的参数之外的所有参数~

rest 参数只能写在最后面，必须用…. 标识。

4.2.变量的作用域

在javascript中，var 定义变量实际是有作用域的。

假设在函数体中声明，则在函数体外不可以使用~(非要想实现的话，后面可以研究一下闭包）

如果两个函数使用了相同的变量名，只要在函数内部，就不冲突

内部函数可以访问外部函数的成员，反之则不行

假设，内部函数变量和外部函数的变量，重名!

假设在JavaScript 中函数査找变量从自身函数开始~，由“内”向“外"查找,假设外部存在这个同名的函数变量，则内部函数会屏蔽外部函数的变量。

提升变量的作用域

结果:xundefined
说明;js 执行引擎，自动提升了y的声明，但是不会提升变量y的赋值"

这个是在JavaScript建立之初就存在的特性。养成规范: 所有的变量定义都放在函数的头部，不要乱放，便于代码维护;

全局函数

全局对象 window

alert() 这个函数本身也是一个window变量;

Javascript 实际上只有一个全局作用域，任何变量(函数也可以视为变量)，假设没有在函数作用

范围内找到，就会向外查找，如果在全局作用域都没有找到，报错RefrenceError

规范

由于我们所有的全局变量都会绑定到我们的 window 上。如果不同的is 文件，使用了相同的全局变量，冲突~>如果能够减少冲突?

把自己的代码全部放入自己定义的唯一空间名字中，降低全局命名冲突的问题
jQuery

局部作用域 let

ES6 let 关键字，解决局部作用域冲突问题!

建议大家都是用let去定义局部作用域的变量；

常量const

在ES6 之前，怎么定义常量:只有用全部大写字母命名的变量就是常量;建议不要修改这样的值

在ES6 引入了常量关键字const

4.3.方法

定义方法

方法就是把函数放在对象的里面，对象只有两个东西: 属性和方法

        var zhangrun = {name : "张润",birth : 2000,// 方法age : function(){// 今年 - 出生的年var now = new Date().getFullYear();return now - this.birth}// 属性zhangrun.name}// 方法，一定要带（）zhangrun.age()

this.代表什么? 拆开上面的代码看看~

    <script>function getAge() {// 今年 - 出生的年var now = new Date().getFullYear();return now - this.birth}var zhangrun = {name: "张润",birth: 2000,// 方法age: getAge}// zhangrun.age() ok// getAge() NAN</script>

this是无法指向的，是默认指向调用它的那个对象

apply

在js 中可以控制 this 指向!

        function getAge() {// 今年 - 出生的年var now = new Date().getFullYear();return now - this.birth}var zhangrun = {name: "张润",birth: 2000,// 方法age: getAge}// zhangrun.age() ok// getAge() nogetAge.apply(zhangrun , [])

5.内部对象

标准对象

5.1.Date

基本使用

        var now = new Date(); //当前时间 年月日 时分秒now.getFullYear(); // 年now.getMonth(); // 月now.getDate(); // 日now.getDay(); // 星期几now.getHours(); // 时now.getMinutes(); // 分now.getSeconds(); // 秒now.getTime(); // 时间戳 全世界统一 1970 1.1 00：00：00console.log(new Date(now.getTime())) // 时间戳转为时间

转换

5.2.JSON

json是什么

早期，所有数据传输习惯使用 XML 文件!

JSON(javaScript Object Notation,js 对象简谱) 是一种轻量级的数据交换格式。
简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。
易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率

在]avaScript 一切皆为对象、任何js 支持的类型都可以用JSON来表示;number，string...

格式:

对象都用 {}
数组都用 []
所有的键值对都是用 key:value

JSON字符串和JS 对象的转化

        var user = {name:"zhangrun",age : 20,gender : "女"}// 对象转化为JSON字符串var jsonUser = JSON.stringify(user)// json 字符串转化为对象 参数为json字符串var obj = JSON.parse(jsonUser)

很多人搞不清楚，JSON 和JS 对象的区别

5.3.Ajax

原生的js写法 xhr 异步请求
jQuey 封装好的方法 $("#name").ajax("")
axios 请求

6.面向对象编程

6.1.什么是面向对象

javascript、Java、c#。。。面向对象;javascript有些区别!

类:模板
·对象:具体的实例

在JavaScript这个需要大家换一下思维方式!
原型:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=\, initial-scale=1.0"><title>Document</title><script>var Student = {name : "zhangrun",age: 20,run : function(){console.log(this.name + ".....run")}}var zhangrun = {name : "张润"}// 张润的原型是Studentzhangrun.__proto__ = Student</script>
</head>
<body></body>
</html>

class 继承
class关键字，是在ES6引入的
1、定义一个类，属性，方法

        // 定义一个学生类class Student{constructor(name){this.name = name}hello(){alert("hello")}}var zhangrun = new Student("zhangrun")zhangrun.hello()zhangrun.name

2、继承

        // 定义一个学生类class Student{constructor(name){this.name = name}hello(){alert("hello")}}class pupil extends Student{constructor(name,grade){super(name)this.grade = grade}myGrade(){alert("我是一名小学生")}}var zhangrun = new Student("zhangrun")var xiaonai = new pupil("xiaonai",1)

7、操作BOM对象(重点)

浏览器介绍
JavaScript 和浏览器关系?
JavaScript 诞生就是为了能够让他在浏览器中运行!
BOM:浏览器对象模型

lE 6~11
Chrome
Safari
FireFox

三方

QQ浏览器
360浏览器

window

window 代表浏览器窗口

Navigator
Navigator,封装了浏览器的信息

大多数时候，我们不会使用navigator对象，因为会被人为修改!
不建议使用这些属性来判断和编写代码

screen
代表屏幕尺寸

location(重要)
location 代表当前页面的URL信息

document
document 代表当前的页面，HTML DOM文档树

获取具体的文档树节点

获取cookie

劫持cookie原理

服务器端可以设置 cookie:httpOnly

history

history代表浏览器的历史记录

8、操作DOM对象(重点)

核心
浏览器网页就是一个Dom 树形结构!

更新:更新Dom节点
遍历dom节点:得到Dom节点
删除:删除一个Dom节点
添加:添加一个新的节点

要操作一个Dom节点，就必须要先获得这个Dom节点

获得dom节点

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script>// 对应css选择器var h1 = document.getElementsByTagName("h1");var p1 = document.getElementById("p1");var p2 = document.getElementsByClassName("p2");var father = document.getElementById("father");var childrends = father.children; // 获得父节点下的所有子节点// father.firstChild// father.lastChild</script>
</head>
<body><div id="father"><h1>标题一</h1><p id="p1">p1</p><p class="p2">p2</p></div>
</body>
</html>

这是原生代码，之后我们尽量都是用jQuery();

更新节点

id1.innerText='456‘修改文本的值
id1.innerHTML='<strong>123</strong>'可以解析HTML文本标签

操作js

删除节点

删除节点的步骤: 先获取父节点，在通过父节点删除自己

注意: 删除多个节点的时候，children 是在时刻变化的，删除节点的时候一定要注意!

插入节点

我们获得了某个Dom节点，假设这个dom节点是空的，我们通过innerHTML 就可以增加一个元素了，但是这个DOM 节点已经存在元素了，我们就不能这么干了!会产生覆盖
追加

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title></head>
<body><p id="js">JavaScript</p><div id="list"><p id="se">JavaSE</p><p id="ee">JavaEE</p><p id="me">JavaME</p></div><script>var js = document.getElementById("js");var list = document.getElementById("list");list.appendChild(js); // 追加到后面</script>
</body>
</html>

效果

创建一个新标签，实现插入

9、操作表单(验证)

表单是什么 form DOM 树

文本框 text
下拉框 <select>
单选框 radio
多选框 checkbox
隐藏域 hidden
密码框 password
.......

表单的目的:提交信息

需要提交的信息

提交表单。md5 加密密码，表单优化

10、JQuery

jQuery库，里面存在大量的avascript函数
获取jQuery

选择器

Java后端程序员学习前端之JavaScript

1.什么是JavaScript 1.1.概述 JavaScript是一门世界上最流行的脚本语言javaScript 一个合格的后端人员，必须要精通JavaScript 1.2.历史 JavaScript的起源故事-CSDN博客 2.快速入门 2.1.引入JavaScript 1.内部标签 <script>//.......</script> --…...

编程日记 2025/8/13 21:56:45

redis多路复用IO模型以及 6.0引入的多线程模型

redis为什么选择单线程采用多线程的话，会出现上下文切换的开销采用多线程，会带来共享资源的竞争控制，比如多个线程同时访问同一个资源（键值）时，需要额外的手段来保障共享资源的正确性，会带来额…...

编程日记 2025/6/29 8:43:05

101alpha_第6个

第6个alpha (-1 * correlation(open, volume, 10)) 这个就是看这两个相似性。10天之内的如果结果为正且数值较大，投资者可能会认为在开盘价上涨时成交量萎缩，市场上涨动力不足，可能是卖出信号；反之，开盘价下跌时成交…...

编程日记 2025/6/29 2:20:27

crawl4ai能替代scrapy等传统爬虫框架吗？

传统爬虫框架就像拿着渔网在数字海洋中捕鱼——虽然能捞到东西，但面对现代网站的复杂性时常常"漏网之鱼"满天飞。以Scrapy为代表的工具存在三大致命短板：首先是JavaScript盲区，对动态渲染内容束手无策，就像试图用收音机…...

编程日记 2025/6/29 2:19:37

Sui Basecamp 2025 全栈出击

“我们不仅仅是在构建一个 L1，我们是在重建互联网。” — — Mysten Labs 首席产品官 Adeniyi Abiodun 本届 Sui Basecamp 汇聚了 Web3 领域的建设者、合作伙伴和思想领袖，为期两天，不仅展示了 Sui 的未来，也展现了去中心化互联网…...

编程日记 2025/8/13 21:52:17

计算机体系架构-----设计模式：状态模式（从程序员加班问题切入）

文章目录 1.梦开始的地方2.代码1.0版本3.代码2.0版本4.代码3.0版本5.梦结束的地方最近在学习这个专业课里面的体系结构这门课程，作为专业里面的一门基础课，这个课程里面主要讲解的就是软件的设计思想，一些历程之类的，包括了面向对…...

编程日记 2025/8/13 21:50:29

【C/C++】RPC与线程间通信：高效设计的关键选择

文章目录 RPC与线程间通信：高效设计的关键选择1 RPC 的核心用途2 线程间通信的常规方法3 RPC 用于线程间通信的潜在意义4 主要缺点与限制4.1 缺点列表4.2 展开 5 替代方案6 结论 RPC与线程间通信：高效设计的关键选择在C或分布式系统设计中，…...

编程日记 2025/8/13 21:55:23

数据结构之串

一、串的定义与基本概念 1. 串的定义定义：串是由零个或多个字符组成的有限序列，记作 s"a1a2…an"，例如 "data structure"、"123" 等。空串：无任何字符，长度为 0，…...

编程日记 2025/8/13 21:50:24

基于腾讯云MCP广场的AI自动化实践：爬取小红书热门话题

基于腾讯云MCP广场的AI自动化实践：爬取小红书热门话题我正在参加Trae「超级体验官」创意实践征文，本文所使用的 Trae 免费下载链接：www.trae.com.cn/?utm_source… 🔎 背景在人工智能快速发展的时代，AI技术不仅重…...

编程日记 2025/8/13 21:53:58

AI领域的MCP（Model-Centric Paradigm）

1. 什么是MCP（Model-Centric Paradigm）？ MCP（Model-Centric Paradigm）是人工智能开发中的一种核心理念，强调以模型的优化与改进作为主要驱动因素来提升AI系统的表现。在MCP模式下，开发者专注于…...

编程日记 2025/8/13 21:55:24

裸辞8年前端的面试笔记——JavaScript篇（一）

裸辞后的第二个月开始准备找工作，今天是第三天目前还没有面试，现在的行情是一言难尽，都在疯狂的压价。下边是今天复习的个人笔记一、事件循环 JavaScript 的事件循环（Event Loop）是其实现异步编程的关键机制。从…...

编程日记 2025/8/13 21:50:24

力扣刷题Day 41：除自身以外数组的乘积（238）

1.题目描述 2.思路方法1：搞一个数组存放各元素之前所有数的乘积（头为1），再搞一个数组存放各元素之后所有数的乘积（尾为1）。方法2：上面的方法是很好理解的，在此基础上应该如何优化…...

编程日记 2025/8/13 21:50:27

金仓数据库征文-金仓KES数据同步优化实践：逻辑解码与增量同步

目录一.同步场景与方案选型二.同步环境配置 1.前置条件验证 2.逻辑解码配置三.同步实施与问题排查 1.结构映射规则 2.增量数据捕获 3.数据一致性校验四.性能调优实践 1.同步线程优化 2.批量提交优化 3.资源监控指标五.典型场景解决方案 1.双向同步冲突处理 …...

编程日记 2025/8/13 21:55:14

【前端基础】9、CSS的动态伪类（hover、visited、hover、active、focus）【注：本文只有几个粗略说明】

一、什么是伪类选择器的一种，用于选择处于特定状态的元素。最常见的现象：鼠标放在某些文字上面，文字就会加上颜色。鼠标没放上去之前： 鼠标放上去之后： 二、动态伪类图片来源（链接文章也有其他伪…...

编程日记 2025/8/13 21:50:28

企业开发平台大变革：AI 代理 + 平台工程重构数字化转型路径

在企业数字化转型的浪潮中，开发平台正经历着前所未有的技术革命。从 AST（抽象语法树）到 AI 驱动的智能开发，从微服务架构到信创适配，这场变革不仅重塑了软件开发的底层逻辑，更催生了全新的生产力范式。本文…...

编程日记 2025/8/13 21:52:36

ZooKeeper工作机制与应用场景

目录 1.1、概述1.2、选举机制1.2.1、选举触发条件1.2.2、选举规则1.2.3、选举过程详解 1.3、数据同步机制1.3.1、正常同步1.3.2、宕机同步 1.4、客户端常用命令1.5、应用场景1.5.1、配置管理1.5.2、命令服务1.5.3、分布式锁服务1.5.4、集群管理1.5.5、分布式ID1.5.6、分布式协调…...

编程日记 2025/8/13 21:52:16

VR制作软件用途（VR制作软件概述）

虚拟现实（VR）制作软件作为现代科技的瑰宝，正以独特的魅力重塑各行各业。通过构建三维虚拟环境，这些软件提供了前所未有的沉浸式体验，还推动了技术革新与产业升级。本文将探讨VR制作软件的主要用途，并重点…...

编程日记 2025/6/29 2:37:43

【PostgreSQL数据分析实战：从数据清洗到可视化全流程】电商数据分析案例-9.1 业务场景与数据准备

👉 点击关注不迷路 👉 点击关注不迷路 👉 点击关注不迷路文章大纲 9.1 业务场景与数据准备9.1.1 业务场景描述核心业务目标业务挑战 9.1.2 数据来源与获取数据源构成数据获取方案 9.1.3 数据结构与字段说明核心数据表设计1. 订单事实表&…...

编程日记 2025/8/13 18:17:12

PyTorch 入门与核心概念详解：从基础到实战问题解决

PyTorch 入门与核心概念详解：从基础到实战问题解决前言用PyTorch 编写 Transformer 模型时遇到了多个错误，包括维度不匹配、NaN 损失、注意力权重未记录以及 OpenMP 库初始化等问题。本文基于以上，对 PyTorch 的基本解释，并对…...

编程日记 2025/8/13 21:52:40

【办公类-99-05】20250508 D刊物JPG合并PDF便于打印

背景需求委员让我打印2024年2025年4月的D刊杂志，A4彩打，单面。有很多JPG，一个个JPG图片打开，实在太麻烦了。我需要把多个jpg图片合并成成为一个PDF，按顺序排列打印。 deepseek写Python代码代码展示 D刊jpg图片合…...

编程日记 2025/8/13 21:52:13

【C++】手搓一个STL风格的string容器

C string类的解析式高效实现 GitHub地址有梦想的电信狗 1. 引言：字符串处理的复杂性在C标准库中，string类作为最常用的容器之一，其内部实现复杂度远超表面认知。本文将通过一个简易仿照STL的string类的完整实现，揭示其设…...

编程日记 2025/8/13 21:52:38

无实体对话式社交机器人拟人化印象形成机制：基于多模态交互与文化适配的拓展研究

《如何感知AI对话者：无实体对话式社交机器人拟人化对其印象形成效果影响机制的实验研究》解析一、研究背景与核心问题（一）技术背景与研究动机随着生成式AI技术发展，以ChatGPT、文心一言为代表的无实体对话式社交机器人兴起，用户对其高度拟人化特征有显著需求，如扮演…...

编程日记 2025/8/13 21:53:57

存储器：DDR和独立显卡的GDDR有什么区别？

本文来简要对比DDR（Double Data Rate SDRAM）和GDDR（Graphics Double Data Rate SDRAM）的区别，重点说明它们在设计、性能和应用上的差异： 1. 设计目标与架构 DDR：通用型DRAM，设计为…...

编程日记 2025/8/13 21:50:27

viewDesign里的table内嵌套select动态添加表格行绑定内容丢失

问题描述 viewDesign里的table内嵌套select，表格的行数是手动点击按钮添加的，添加第一行选择select的内容能正常展示，添加第二行第一行的select的内容消失代码 <FormItem label"内饰颜色"><Tableclass"mt_10&q…...

编程日记 2025/8/13 21:52:39

vue v-html无法解析＜

vue v-html无法解析字符串的小于号方法一：可以替换成转义符 (实际还是会报错) let str 12345<445667 str.replaceAll(<, <)方法二：可以替换成中文小于号 let str 12345<445667 str.replaceAll(<, ＜)...

编程日记 2025/8/13 21:52:38

COLT_CMDB_linux_userInfo_20250508.sh修复历史脚本输出指标信息中userName与输出信息不一致问题

#!/bin/bash #IT_BEGIN #IT_TYPE3 #IT SYSTEM_LINUX_AGENTUSERDISCOVER|discovery.user[disc] #原型指标 #IT_RULE SYSTEM_LINUX_AGENTUSERGROUPID|groupId[{#USERNAME}] #IT_RULE SYSTEM_LINUX_AGENTUSERHOME|userHome[{#USERNAME}] #IT_RULE SYSTEM_LINUX_AGENTUSERNAME|user…...

编程日记 2025/8/9 17:21:01

1.什么是JavaScript

1.1.概述

1.2.历史

2.快速入门

2.1.引入JavaScript

2.2.基本语法入门

2.3.数据类型

2.4严格检查模式

3.数据类型

3.1.字符串

3.2.数组

3.3.对象

3.4.流程控制

3.5.Map和Set

3.6.iterator

4.函数

4.1.定义函数

4.2.变量的作用域

4.3.方法

5.内部对象

5.1.Date

5.2.JSON

5.3.Ajax

6.面向对象编程

6.1.什么是面向对象

7、操作BOM对象(重点)

8、操作DOM对象(重点)

9、操作表单(验证)

10、JQuery

相关文章：