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

JavaScript基础速成

news 2025/9/20 21:44:11

由于学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时只学了后端&#xff0c;现在到了前后端联调的场景发现看不懂前端代码&#xff0c;于是开始恶补 看了下基础内容发现html和css比较好看懂&#xff0c;但JavaScript比较迷&#xff0c;大概知道组件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告诉我&#xff1a; 在VS Code中以debug状态执行带有参数&#xff08;如--train&#xff09;的main.py文件&#xff0c;你需要在launch.json配置文件中正确设置参数。以下是详细步骤&#xff1a; 打开你的main.py文件&#xff1a;确保你的main.py文件已经在VS Code中打开…...

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

docker 简单项目

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

partition by list(msn_id)子句的含义

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

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

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

在上一篇文章【C】I/O多路转接详解&#xff08;一&#xff09; 在出现EPOLL之后&#xff0c;随之而来的是两种事件处理模式的应运而生&#xff1a;Reator 和 Proactor,同步IO模型常用于Reactor模式&#xff0c;异步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快&#xff1f; Spar…...

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

详解MYSQL中的平均值组大小

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

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

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

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

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

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

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

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

1.0 Zookeeper 分布式配置服务教程

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

编程日记 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编辑器

前言&#xff1a;小刘开发过程中&#xff0c;如果是博客项目一般是会用到富文本。众多富文本中&#xff0c;小刘选择了markdown&#xff0c;并记录分享了下来。 # 使用 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种常见的设计模式详解（二）

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

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

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

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

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

抖音增长新引擎：品融电商，一站式全案代运营领跑者

抖音增长新引擎&#xff1a;品融电商&#xff0c;一站式全案代运营领跑者 在抖音这个日活超7亿的流量汪洋中&#xff0c;品牌如何破浪前行&#xff1f;自建团队成本高、效果难控&#xff1b;碎片化运营又难成合力——这正是许多企业面临的增长困局。品融电商以「抖音全案代运营…...

编程新知 2025/9/19 15:30:31

STM32标准库-DMA直接存储器存取

文章目录 一、DMA1.1简介1.2存储器映像1.3DMA框图1.4DMA基本结构1.5DMA请求1.6数据宽度与对齐1.7数据转运DMA1.8ADC扫描模式DMA 二、数据转运DMA2.1接线图2.2代码2.3相关API 一、DMA 1.1简介 DMA&#xff08;Direct Memory Access&#xff09;直接存储器存取 DMA可以提供外设…...

编程新知 2025/9/8 21:10:29

MMaDA: Multimodal Large Diffusion Language Models

CODE &#xff1a; https://github.com/Gen-Verse/MMaDA Abstract 我们介绍了一种新型的多模态扩散基础模型MMaDA&#xff0c;它被设计用于在文本推理、多模态理解和文本到图像生成等不同领域实现卓越的性能。该方法的特点是三个关键创新:(i) MMaDA采用统一的扩散架构&#xf…...

编程新知 2025/9/14 12:34:56

数据链路层的主要功能是什么

数据链路层&#xff08;OSI模型第2层&#xff09;的核心功能是在相邻网络节点&#xff08;如交换机、主机&#xff09;间提供可靠的数据帧传输服务&#xff0c;主要职责包括&#xff1a; &#x1f511; 核心功能详解&#xff1a; 帧封装与解封装 封装&#xff1a; 将网络层下发…...

编程新知 2025/6/16 23:36:50

WordPress插件：AI多语言写作与智能配图、免费AI模型、SEO文章生成

厌倦手动写WordPress文章&#xff1f;AI自动生成&#xff0c;效率提升10倍&#xff01; 支持多语言、自动配图、定时发布&#xff0c;让内容创作更轻松&#xff01; AI内容生成 → 不想每天写文章&#xff1f;AI一键生成高质量内容&#xff01;多语言支持 → 跨境电商必备&am…...

编程新知 2025/9/18 20:10:28

BCS 2025｜百度副总裁陈洋：智能体在安全领域的应用实践

6月5日&#xff0c;2025全球数字经济大会数字安全主论坛暨北京网络安全大会在国家会议中心隆重开幕。百度副总裁陈洋受邀出席&#xff0c;并作《智能体在安全领域的应用实践》主题演讲&#xff0c;分享了在智能体在安全领域的突破性实践。他指出&#xff0c;百度通过将安全能力…...

编程新知 2025/8/26 15:36:54

Android 之 kotlin 语言学习笔记三（Kotlin-Java 互操作）

参考官方文档&#xff1a;https://developer.android.google.cn/kotlin/interop?hlzh-cn 一、Java&#xff08;供 Kotlin 使用&#xff09; 1、不得使用硬关键字 不要使用 Kotlin 的任何硬关键字作为方法的名称 或字段。允许使用 Kotlin 的软关键字、修饰符关键字和特殊标识…...

编程新知 2025/9/19 22:03:32

人工智能（大型语言模型 LLMs）对不同学科的影响以及由此产生的新学习方式

今天是关于AI如何在教学中增强学生的学习体验&#xff0c;我把重要信息标红了。人文学科的价值被低估了 ⬇️ 转型与必要性 人工智能正在深刻地改变教育&#xff0c;这并非炒作&#xff0c;而是已经发生的巨大变革。教育机构和教育者不能忽视它&#xff0c;试图简单地禁止学生使…...

编程新知 2025/9/17 21:08:40

【C++进阶篇】智能指针

C内存管理终极指南&#xff1a;智能指针从入门到源码剖析 一. 智能指针1.1 auto_ptr1.2 unique_ptr1.3 shared_ptr1.4 make_shared 二. 原理三. shared_ptr循环引用问题三. 线程安全问题四. 内存泄漏4.1 什么是内存泄漏4.2 危害4.3 避免内存泄漏 五. 最后 一. 智能指针 智能指…...

编程新知 2025/9/9 1:20:43

并发编程 - go版

1.并发编程基础概念 进程和线程 A. 进程是程序在操作系统中的一次执行过程&#xff0c;系统进行资源分配和调度的一个独立单位。B. 线程是进程的一个执行实体,是CPU调度和分派的基本单位,它是比进程更小的能独立运行的基本单位。C.一个进程可以创建和撤销多个线程;同一个进程中…...

编程新知 2025/9/2 17:48:53