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

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

article 2025/10/9 16:18:57

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/10/5 16:09:43

ARM Linux 设备树

Linux 设备驱动开发详解：基于最新的Linux 4.0内核, 机械工业出版社, 宋宝华, 2015 1. 设备树的起源 • 背景: ARM架构中大量板级代码冗余，硬编码在mach-xxx目录，设备树（Device Tree）引入结构化描述硬件。 • 目的: 减…...

编程日记 2025/8/19 1:20:35

uniapp-商城-43-shop 后台管理页面

后台管理较为简单，主要用于后台数据的管理，包含商品类别和商品信息，其实还可以扩展到管理用户等等 1、后台首页包含分类管理商品管理关于商家等几个栏目主要代码： <template><view class"manage">…...

编程日记 2025/10/8 7:18:40

kotlin JvmName注解的作用和用途

1. JvmName 注解的作用 JvmName 是 Kotlin 提供的一个注解，用于在编译为 Java 字节码时自定义生成的类名或方法名。作用对象： 文件级别（整个 .kt 文件）函数、属性、类等成员主要用途： 控制 Kotlin 编译后生成的 JV…...

编程日记 2025/6/20 18:08:50

Mac 平台字体Unicode范围分析器

字体Unicode范围分析器 #include <CoreText/CoreText.h> // CoreText框架头文件，用于字体处理 #include <CoreFoundation/CoreFoundation.h> // CoreFoundation框架头文件 #include <stdio.h> // 标准输入输出 #include…...

编程日记 2025/5/24 20:14:49

【C++游戏引擎开发】第30篇：物理引擎（Bullet）—软体动力学系统

一、软体动力学理论体系 1.1 连续体力学基础 1.1.1 变形梯度张量物体运动可描述为映射函数： x = ϕ ( X , t ) \mathbf{x} = \phi(\mathbf{X},t) x...

编程日记 2025/6/22 20:22:52

vue2 结合后端预览pdf 跨域的话就得需要后端来返回然后前端呈现

<el-button :loading"pdfIslock" v-if"isPDFFile(form.pic)" type"primary" style"margin: 15px 0" click"previewPDF(form.pic)"> 预览pdf </el-button>//npm install pdfjs-dist //如果没有就得先安装import …...

编程日记 2025/10/2 19:28:11

什么是 HSQLDB？

大家好，这里是架构资源栈！点击上方关注，添加“星标”，一起学习大厂前沿架构！ Java开发人员学习Java数据库连接（JDBC）的最简单方法是试验HyperSQL数据库（又名HSQLDB）。 …...

编程日记 2025/9/16 20:51:18

AI时代企业应用系统架构的新思路与CIO变革指南

作为制造企业CIO，我们看问题需要有前瞻性，AI时代企业应用系统架构需要进行全面转型。一、新思想与新技术 1. 核心新思想可视化开发AI的融合模式：不再只依赖纯代码开发或传统低代码，而是两者结合，通过AI理解自然语…...

编程日记 2025/6/8 11:40:34

多语言爬虫实现网站价格监控

最近突发奇想想用多种代码来爬取数据做价格监控。常见的比如Python、JavaScript(Node.js)、或者Go？不过通常来说，Python应该是首选，因为它的库比较丰富，比如requests和BeautifulSoup，或者Scrapy。不过客户要求多种代码…...

编程日记 2025/9/16 20:51:09

如何修改 JAR 包中的源码

如何修改 JAR 包中的源码前言一、准备工作二、将 JAR 当作 ZIP 打开并提取三、重写 Java 类方法 A：直接替换已编译的 .class方法 B：运行时类路径优先加载四、修改 MyBatis（或其他）XML 资源五、重新打包 JAR（命令行&a…...

编程日记 2025/6/21 4:44:51

16.Three.js 中的 RectAreaLight 全面详解 + Vue 3 实战案例

😎 本文将带你从零了解 THREE.RectAreaLight 的工作原理、使用方式、注意事项，并在最后用 Vue 3 的 Composition API 封装一个完整的光源演示组件，一站式搞懂矩形区域光的魅力 💡！ 🖼️ 一、展示图效果示意…...

编程日记 2025/9/16 20:51:04

excel 批量导出图片并指定命名

一、开发环境打开excel文件中的宏编辑器和JS代码调试工具-》开发工具-》WPS宏编辑器左边是工程区，当打开多个excel时会有多个，要注意不要把代码写到其他工作簿去了右边是代码区二、编写代码宏是js语言，因此变量或者方法可以网上搜…...

编程日记 2025/9/16 20:50:59

PyTorch_创建01张量

torch.ones 和 torch.ones_like 创建全1张量torch.zeros 和 torch.zeros_like 创建全0张量torch.full 和 torch.full_like 创建全为指定值张量上面的函数里有 like 表示根据另外一个张量的形状创建全0或者全1的或者全为指定值的张量。代码 import torch …...

编程日记 2025/9/19 6:10:16

神经网络之互动练习详解：从基础到拟合非线性数据

神经网络之互动练习详解：从基础到拟合非线性数据在机器学习的世界里，神经网络是一种强大而神奇的工具，它可以帮助我们解决各种复杂的问题。今天，我们就通过一个有趣的互动练习，来深入了解神经网络的工作原理以及如何…...

编程日记 2025/9/14 7:23:55

Mem0.ai研究团队开发的全新记忆架构系统“Mem0”正式发布

每周跟踪AI热点新闻动向和震撼发展想要探索生成式人工智能的前沿进展吗？订阅我们的简报，深入解析最新的技术突破、实际应用案例和未来的趋势。与全球数同行一同，从行业内部的深度分析和实用指南中受益。不要错过这个机会，成为AI领…...

编程日记 2025/9/20 0:44:22

海外社交软件技术深潜：实时互动系统与边缘计算的极限优化

一、毫秒级延迟之战：下一代实时通信架构 1.1 全球实时消息投递体系设计图表代码性能基准测试（跨大西洋传输）： 协议/算法组合平均延迟 99分位延迟丢包恢复率 WebSocketTLSBBRv2 142ms 298ms 78% QUIC自定义CC 112ms 201ms 92%…...

编程日记 2025/5/20 21:13:31

通过DeepSeek大语言模型控制panda机械臂，听懂人话，拟人性回答。智能机械臂助手又进一步啦

文章目录前言环境配置运行测试报错前言通过使用智能化的工作流控制系统来精确操控机械臂，不仅能够基于预设算法可靠地规划每个动作步骤的执行顺序和力度，确保作业流程的标准化和可重复性，还能通过模块化的程序设计思路灵活地在原有工作流中…...

编程日记 2025/9/20 0:44:17

如何添加或删除极狐GitLab 项目成员？

极狐GitLab 是 GitLab 在中国的发行版，关于中文参考文档和资料有： 极狐GitLab 中文文档极狐GitLab 中文论坛极狐GitLab 官网项目成员 (BASIC ALL) 成员是有权访问您的项目的用户和群组。每个成员都有一个角色，这决定了他们在项目中可以…...

编程日记 2025/9/20 0:44:11

计算机网络-LDP标签发布与管理

前面学习了LDP建立邻居，建立会话，今天来学习在MPLS中的标签发布与管理。在MPLS网络中，下游LSR决定标签和FEC的绑定关系，并将这种绑定关系发布给上游LSR。LDP通过发送标签请求和标签映射消息，在LDP对等体之间通告FEC和…...

编程日记 2025/10/5 4:15:49

云境天合水陆安全漏电监测仪—迅速确定是否存在漏电现象

云境天合水陆安全漏电监测仪是一种专为水下及潮湿环境设计的电气安全检测设备，通过高灵敏度电磁传感器探测漏电电流产生的交变磁场，基于法拉第电磁感应定律，自动区分高灵敏度信号和低灵敏度信号，精准定位泄漏电源的具体位置。一旦…...

编程日记 2025/9/20 0:43:55

软考系统架构设计师系列知识点之杂项集萃（54）

接前一篇文章：软考系统架构设计师系列知识点之杂项集萃（53） 第87题某银行系统采用Factory Method方法描述其不同账户之间的关系，设计出的类图如下所示。其中与Factory Method的“Creator”角色对应的类是（&#xff…...

编程日记 2025/9/20 0:43:48

Nginx +Nginx-http-flv-module 推流拉流

这两天为了利用云服务器实现 Nginx 进行OBS Rtmp推流，Flv拉流时发生了诸多情况，记录实现过程。环境 OS：阿里云CentOS 7.9 64位Nginx：nginx-1.28.0Nginx-http-flv-module：nginx-http-flv-module-1.2.12 安装Nginx编…...

编程日记 2025/9/20 0:43:42