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

JavaScript基础速成

news 2025/12/26 19:46:30

由于学web时只学了后端，现在到了前后端联调的场景发现看不懂前端代码，于是开始恶补

看了下基础内容发现html和css比较好看懂，但JavaScript比较迷，大概知道组件id绑定事件

下面选取看菜鸟教程补充的JS知识

JS的作用

JS是在html搭建好骨架，css设计好样式的基础上添加交互性和其他动态功能。

下面是基本案例，可以看到JS定义函数绑定了html写的一个按钮，让这个按钮可以动态显示日期

<!DOCTYPE html>
<html>
<title>基础教程(cainiaojc.com)</title>
<body><h1>第一个javascript示例入门</h1><button type="button" onclick="showDate()">点我显示日期和时间</button><p id="output"></p><script>
function showDate() {document.getElementById("output").innerHTML = new Date();
}
</script></body>
</html>

具体而言，JS可以实现以下功能：

JavaScript可以更改HTML属性
JavaScript可以隐藏和显示HTML元素
JavaScript可以添加和删除HTML元素
JavaScript可以更改元素的样式（CSS）和位置
JavaScript可以修改文本内容
JavaScript可以监视鼠标单击，悬停等事件并对其做出反应
JavaScript可以创建警告弹出窗口，以向用户显示信息或警告消息
JavaScript可以在将用户输入提交到服务器之前对其进行验证

JS用法

（传统）可以在<script>标记之间插入JavaScript代码
（简单的JS代码）使用事件属性（例如onclick，onkeypress等）将JavaScript代码直接放在HTML标记内
（复杂的JS代码）创建一个外部JavaScript文件，然后通过

输出

经典Hello World 写入浏览器控制台使用 console.log()

<script>
console.log("Hello World")
</script>

写入HTML元素使用 innerHTML
写入文档流使用 document.write()
弹出警告框，使用 window.alert()

基本语法

变量

可以使用let（对于块级变量），var（对于函数级变量）或const（只读）声明变量。

仅使用var而没赋值时变量具有值undefined,表示尚未为变量分配值，或者根本没有声明变量。

var x;
x = 1;
var y = 1;

标识符

变量，函数或属性的名称在JavaScript中称为标识符，JavaScript 标识符必须以字母、下划线(_)或美元符（$）开始，后续的字符可以是字母、数字、下划线或美元符。

所有JavaScript标识符均区分大小写，标识符的约定是使用camelCase(驼峰命名)编写的。

注释

和Java的一样，单行注释以双斜杠（//）开头，行注释以斜杠和星号（/*）开头，以星号和斜杠（*/）结束。

数据类型

好消息，JS变量定义时不用声明类型，因为会动态分配

 var length = 4;// Number 数字var firstName = "Vishal";  // String 字符串var user = {firstName:"Vishal", age:22};  // Object 对象var fruits = ["Apple", "Mango", "Banana"];// Array 数组

Number

JS中数字具有64位，不分整数和浮点数，但底层也和其他语言一样

toExponential()，toFixed()，toPrecision()得到对应位数的数

valueOf()得到原始数值（像Java Integer拆包）

Number()转换数字,parseInt(),parseFloat()解析数字

String

JS中单双引号都可以包字符串

+ 运算符用于拼接字符串，还可以用于长代码换行

直接定义的字符串变量是string，而使用new创建的是字符串对象，属于object。

var city = new String("New Delhi");

length,concat(),toUpperCase(),split(),trim(),replace(),substring(),charAt()和Java一样

此外还有indexOf(),lastIndexOf(),search()用于匹配。

运算符

基本都跟其他语言一样，只有几个特殊的

**=：求幂之后再赋值

===：相等且同类型

!==：不相等且不同类型

三元运算符：

var status = (age >= 18) ? "adult" : "minor";

delete运算符可删除对象，对象的属性或数组中指定索引处的元素

var user = {firstName:"Vishal", age:"22", color:"blue"};
delete user.firstName;  // returns true
var fruits = ["Apple", "Mango", "Banana"];
delete fruits[0];   // delete "Apple"

in：看在不在集合里

instanceof：看指定的对象是否属于指定的对象类型

控制流

if语句，if...else语句，else...if语句，switch语句，while循环，do while循环，for循环都跟Java完全一样。也用continue和break跳出循环。

for...in循环迭代的对象的属性，以任意的顺序

var myObj = {
name: "VISHAL",
age: 22,
height: 175,
city: "New Delhi",
getNothing: function () {return "";}
};for (let x in myObj) {
document.write(x);
}

for...of循环迭代数据，该迭代的对象定义要遍历

let iterable = [10, 20, 30, 40, 50];for (let x of iterable) {
document.write(x);
}

函数

function nameOfFunction(parameter1, parameter2, ..., parameterN) {// 要执行的代码return 返回值;}
//调用函数，返回值将存储在x中
var x = nameOfFunction(parameter1, parameter2, ..., parameterN);

还有个类似匿名函数，用变量名调用

var square = function(number) { return number * number; };var x = square(5);

对象

像经常看到的JSON，里面还可以定义函数

 var user = {firstName: "Vishal",lastName : "Choudhary",age  : 22,location : "New Delhi",getName  : function() {return this.firstName + " " + this.lastName;}};

可以用.和数组索引来访问对象属性

user.firstName;
user["firstName"];

访问对象方法也和Java一样

user.getName();

当使用关键字声明JavaScript变量时new，该变量将作为对象创建：

var a = new Number();  // 将a声明为Number对象
var b = new String();  // 将b声明为String对象
var c = new Boolean();   // 将c声明为Boolean对象

数组

也和Java一致，再添加元素事如果能刚好接上下一个可以为下一个索引分配值，不确定就用push

let fruits = ["Apple", "Mango", "Banana", "Orange"];
fruits[4] = "Guava";

其他的pop(),shift(),concat(),slice(),fill(),sort(),reverse()也可以望文生义

forEach()方法对数组的每个元素执行一次提供的函数，也和Java很像

var fruits = ["Apple", "Mango", "Banana", "Orange"];
var result = document.getElementById("result");fruits.forEach(function(element, index, array) {result.innerHTML += index + ": " + element + "<br>";
});

map()方法返回一个新数组，不会改变原始数组。同时新数组中的元素为原始数组元素调用函数处理后的值，并按照原始数组元素顺序依次处理元素

var nums1 = [1, 5, 20, 14, 55, 16];
var nums2 = nums1.map(twice);function twice(element, index, array) {return (element * 2);
}

filter(),find(),every()同理

事件

事件是在浏览器中发生的操作，可由用户或浏览器本身启动

页面加载完成
用户单击一个按钮
用户滚动文档
用户调整浏览器大小
用户移动鼠标
用户提交表单
用户按下键盘上的一个键
HTML输入字段已更改

使用方法为：

内联事件处理程序（html上）

<p onclick="this.innerHTML = 'Hello world'">单击此处更改此文本</p>

事件处理程序属性

let para = document.querySelector("#para");para.onclick = function() {this.innerHTML = "Hello world";
}

事件监听器

let para = document.querySelector("#para");
para.addEventListener("click", changeText);function changeText() {para.innerHTML = "Hello world";
}

JavaScript基础速成

由于学web时只学了后端，现在到了前后端联调的场景发现看不懂前端代码，于是开始恶补看了下基础内容发现html和css比较好看懂，但JavaScript比较迷，大概知道组件id绑定事件下面选取看菜鸟教程补充的JS知识 JS的作用 JS是在html…...

编程日记 2024/2/6 9:39:31

openGauss学习笔记-215 openGauss性能调优-确定性能调优范围-性能日志

文章目录 openGauss学习笔记-215 openGauss性能调优-确定性能调优范围-性能日志215.1 性能日志概述215.2 性能日志收集的配置参数 openGauss学习笔记-215 openGauss性能调优-确定性能调优范围-性能日志 215.1 性能日志概述性能日志主要关注外部资源的访问性能问题。性能日…...

编程日记 2024/2/6 9:38:30

在vs code的terminal，debug执行python main.py --train True

GPT4告诉我： 在VS Code中以debug状态执行带有参数（如--train）的main.py文件，你需要在launch.json配置文件中正确设置参数。以下是详细步骤： 打开你的main.py文件：确保你的main.py文件已经在VS Code中打开…...

编程日记 2024/2/6 9:34:26

docker 简单项目

要将服务器端口映射到容器端口，你可以使用 Docker 命令的 -p 选项。以下是基本的步骤： 1. **拉取镜像：** 在服务器上运行以下命令拉取你想要的 Docker 镜像，例如 Nginx： bash docker pull nginx 2. **运行容器…...

编程日记 2024/2/6 9:33:25

计算机毕业设计基于SpringBoot的线上教育培训办公系统的设计与实现 Java实战项目附源码+文档+视频讲解

博主介绍：✌从事软件开发10年之余，专注于Java技术领域、Python人工智能及数据挖掘、小程序项目开发和Android项目开发等。CSDN、掘金、华为云、InfoQ、阿里云等平台优质作者✌ 🍅文末获取源码联系🍅 👇🏻 精…...

编程日记 2024/2/6 9:31:23

四、机器学习基础概念介绍

四、机器学习基础概念介绍 1_机器学习基础概念机器学习分类1.1 有监督学习1.2 无监督学习 2_有监督机器学习—常见评估方法数据集的划分2.1 留出法2.2 校验验证法（重点方法）简单交叉验证K折交叉验证（单独流出测试集）（常…...

编程日记 2024/2/6 9:26:18

Excel设置单元格下拉框（poi）

前言年关在即，还在最后的迭代处理，还分了个其他同事的单，说是导出的Excel模版的2列要修改为下拉选项，过程很曲折，不说，以下其实就是一个笔记而已！ 其实之前分享过阿里的EasyExcel设置单…...

编程日记 2024/2/6 9:22:14

api接口是什么意思,api接口该如何防护呢?

API接口：应用程序与服务之间的接口什么是API接口 API是应用程序接口的缩写，指的是能够让不同的应用程序之间交换数据的一种方式。一个API接口就是应用程序与服务之间的接口，它定义了服务提供的功能和数据，以及应用程序如何访问这…...

编程日记 2024/2/6 9:21:13

PMP资料怎么学？PMP备考经验分享

PMP考试前大家大多都是提前备考个一两个月，但是有些朋友喜欢“不走寻常路”，并不打算去考PMP认证，想要单纯了解PMP，不管要不要考证，即使是仅仅学习了解一下我个人都非常支持，因为专业的基础的确能提高工作效…...

编程日记 2024/2/6 9:17:08

partition by list(msn_id)子句的含义

在数据库查询中，特别是在使用SQL语言时，"PARTITION BY" 子句用于对结果集进行分区，以便可以对每个分区进行单独的聚合操作。这是在执行窗口函数（如 ROW_NUMBER(), RANK(), SUM(), AVG() 等）时特别有用的。 …...

编程日记 2024/2/6 9:16:07

【C++】I/O多路转接详解（二）

在上一篇文章【C】I/O多路转接详解（一） 在出现EPOLL之后，随之而来的是两种事件处理模式的应运而生：Reator 和 Proactor,同步IO模型常用于Reactor模式，异步IO常用于Proactor. 目录 1. 服务器编程框架简介2. IO处理1. R…...

编程日记 2024/2/6 9:14:05

PySpark（三）RDD持久化、共享变量、Spark内核制度，Spark Shuffle

目录 RDD持久化 RDD 的数据是过程数据 RDD 缓存 RDD CheckPoint 共享变量广播变量累加器 Spark 内核调度 DAG DAG 的宽窄依赖和阶段划分内存迭代计算 Spark是怎么做内存计算的? DAG的作用?Stage阶段划分的作用? Spark为什么比MapReduce快？ Spar…...

编程日记 2024/2/6 9:13:04

详解MYSQL中的平均值组大小

文章目录平均值组大小了解平均值组大小MySQL什么时候会使用平均值组大小平均值组大小对于索引选取的影响平均值组大小了解平均值组大小总数据量 / 值组 = 平均值组大小值组是一组具有相同键前缀值的行，及所有相等的键为一个值组。总数据量为全表数据量MySQL什么时候会使…...

编程日记 2024/2/6 9:08:59

【爬虫专区】批量下载PDF （无反爬）

天命：只要没反爬，一切都简单这次爬取的是绿盟的威胁情报的PDF 先看一下结构，很明显就是一个for循环渲染 burp抓包会发现第二次接口请求接口请求一次就能获取到了所有的数据然后一个循环批量下载数据即可，其实没啥难度的 imp…...

编程日记 2024/2/6 9:06:57

PostgreSQL解决序列(自增id)自动增长冲突

背景一般表的id主键我们都是设置为自增序列。但是如果我们在插入一些数据的时候手动指定id，那么自增序列不会跟随我们手动设置的id增长。就会出现下次不设置id的时候自增到我们手动指定的id导致主键冲突bug 举个例子现在数据有 id123 现在我们手动插入数…...

编程日记 2024/2/6 9:03:54

1.0 Zookeeper 分布式配置服务教程

ZooKeeper 是 Apache 软件基金会的一个软件项目，它为大型分布式计算提供开源的分布式配置服务、同步服务和命名注册。 ZooKeeper 的架构通过冗余服务实现高可用性。 Zookeeper 的设计目标是将那些复杂且容易出错的分布式一致性服务封装起来，构成一个高…...

编程日记 2024/2/6 9:01:52

(Flutter 常用插件整理

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 Flutter 常用插件整理 # Flutter 城市列表，联系人列表，索引&悬停 https://github.com/flutterchina/azlistviewazlistview: ^2.0.0# Dart 汉字转拼音 https://github.com/flutterchina/lpinyinlpinyin…...

编程日记 2024/2/6 8:59:50

vue2.0+使用md-edit编辑器

前言：小刘开发过程中，如果是博客项目一般是会用到富文本。众多富文本中，小刘选择了markdown，并记录分享了下来。 # 使用 npm npm i kangc/v-md-editor -Smain.js基本配置import VueMarkdownEditor from kangc/v-md-editor; import…...

编程日记 2024/2/6 8:57:47

Java设计模式大全：23种常见的设计模式详解（二）

本系列文章简介： 设计模式是在软件开发过程中，经过实践和总结得到的一套解决特定问题的可复用的模板。它是一种在特定情境中经过验证的经验和技巧的集合，可以帮助开发人员设计出高效、可维护、可扩展和可复用的软件系统。设计模式提供了一种在…...

编程日记 2024/2/6 8:55:45

【算法与数据结构】718、1143、1035、392、115、LeetCode最长重复子数组+最长公共子序列+不相交的线+判断子序列+不同的子序列

文章目录一、718、最长重复子数组二、1143、最长公共子序列三、1035、不相交的线四、392、判断子序列五、115、不同的子序列六、完整代码所有的LeetCode题解索引，可以看这篇文章——【算法和数据结构】LeetCode题解。一、718、最长重复子数组思路分析&#xff1…...

编程日记 2024/2/6 8:54:44

YSYX学习记录（八）

C语言，练习0： 先创建一个文件夹，我用的是物理机： 安装build-essential 练习1： 我注释掉了 #include <stdio.h> 出现下面错误在你的文本编辑器中打开ex1文件，随机修改或删除一部分，之后…...

编程新知 2025/12/26 15:35:33

2024年赣州旅游投资集团社会招聘笔试真

2024年赣州旅游投资集团社会招聘笔试真题 ( 满分 1 0 0 分时间 1 2 0 分钟 ) 一、单选题(每题只有一个正确答案，答错、不答或多答均不得分) 1.纪要的特点不包括()。 A.概括重点 B.指导传达 C. 客观纪实 D.有言必录【答案】: D 2.1864年，()预言了电磁波的存在，并指出…...

编程新知 2025/12/10 4:08:53

条件运算符

C中的三目运算符（也称条件运算符，英文：ternary operator）是一种简洁的条件选择语句，语法如下： 条件表达式 ? 表达式1 : 表达式2• 如果“条件表达式”为true，则整个表达式的结果为“表达式1”…...

编程新知 2025/12/6 22:50:48

文章目录 A 基础语言模型A.1 TransformerA.2 Bert B 大语言模型结构B.1 GPTB.2 LLamaB.3 ChatGLMB.4 Qwen C 大语言模型微调C.1 Fine-tuningC.2 Adapter-tuningC.3 Prefix-tuningC.4 P-tuningC.5 LoRA A 基础语言模型 A.1 Transformer （1）资源论文&a…...

编程新知 2025/12/14 14:26:01

Java + Spring Boot + Mybatis 实现批量插入

在 Java 中使用 Spring Boot 和 MyBatis 实现批量插入可以通过以下步骤完成。这里提供两种常用方法：使用 MyBatis 的 <foreach> 标签和批处理模式（ExecutorType.BATCH）。方法一：使用 XML 的 <foreach> 标签&#xff…...

编程新知 2025/6/11 2:44:05

【从零学习JVM|第三篇】类的生命周期(高频面试题)

前言： 在Java编程中，类的生命周期是指类从被加载到内存中开始，到被卸载出内存为止的整个过程。了解类的生命周期对于理解Java程序的运行机制以及性能优化非常重要。本文会深入探寻类的生命周期，让读者对此有深刻印象。目录 …...

编程新知 2025/12/19 10:17:24

tomcat入门

1 tomcat 是什么 apache开发的web服务器可以为java web程序提供运行环境tomcat是一款高效，稳定，易于使用的web服务器tomcathttp服务器Servlet服务器 2 tomcat 目录介绍 -bin #存放tomcat的脚本 -conf #存放tomcat的配置文件 ---catalina.policy #to…...

编程新知 2025/7/7 19:44:31

MySQL：分区的基本使用

目录一、什么是分区二、有什么作用三、分类四、创建分区五、删除分区一、什么是分区 MySQL 分区（Partitioning）是一种将单张表的数据逻辑上拆分成多个物理部分的技术。这些物理部分（分区）可以独立存储、管理和优化，…...

编程新知 2025/12/24 20:33:52

给网站添加live2d看板娘

给网站添加live2d看板娘参考文献： stevenjoezhang/live2d-widget: 把萌萌哒的看板娘抱回家 (ノ≧∇≦)ノ | Live2D widget for web platformEikanya/Live2d-model: Live2d model collectionzenghongtu/live2d-model-assets 前言网站环境如下，文章也主…...

编程新知 2025/12/26 3:29:20

Qt 事件处理中 return 的深入解析

Qt 事件处理中 return 的深入解析在 Qt 事件处理中，return 语句的使用是另一个关键概念，它与 event->accept()/event->ignore() 密切相关但作用不同。让我们详细分析一下它们之间的关系和工作原理。核心区别：不同层级的事件处理方…...

编程新知 2025/6/10 21:19:52