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

JavaScript基础速成

news 2025/7/22 5:05:34

由于学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

Java 语言特性(面试系列1)

一、面向对象编程 1. 封装&#xff08;Encapsulation&#xff09; 定义&#xff1a;将数据&#xff08;属性&#xff09;和操作数据的方法绑定在一起&#xff0c;通过访问控制符&#xff08;private、protected、public&#xff09;隐藏内部实现细节。示例&#xff1a; public …...

编程新知 2025/7/8 18:56:27

React Native在HarmonyOS 5.0阅读类应用开发中的实践

一、技术选型背景 随着HarmonyOS 5.0对Web兼容层的增强&#xff0c;React Native作为跨平台框架可通过重新编译ArkTS组件实现85%以上的代码复用率。阅读类应用具有UI复杂度低、数据流清晰的特点。 二、核心实现方案 1. 环境配置 &#xff08;1&#xff09;使用React Native…...

编程新知 2025/7/6 2:55:54

苍穹外卖--缓存菜品

1.问题说明 用户端小程序展示的菜品数据都是通过查询数据库获得&#xff0c;如果用户端访问量比较大&#xff0c;数据库访问压力随之增大 2.实现思路 通过Redis来缓存菜品数据&#xff0c;减少数据库查询操作。 缓存逻辑分析&#xff1a; ①每个分类下的菜品保持一份缓存数据…...

编程新知 2025/7/14 16:25:07

A2A JS SDK 完整教程：快速入门指南

目录 什么是 A2A JS SDK?A2A JS 安装与设置A2A JS 核心概念创建你的第一个 A2A JS 代理A2A JS 服务端开发A2A JS 客户端使用A2A JS 高级特性A2A JS 最佳实践A2A JS 故障排除 什么是 A2A JS SDK? A2A JS SDK 是一个专为 JavaScript/TypeScript 开发者设计的强大库&#xff…...

编程新知 2025/6/18 3:11:41

免费PDF转图片工具

免费PDF转图片工具 一款简单易用的PDF转图片工具&#xff0c;可以将PDF文件快速转换为高质量PNG图片。无需安装复杂的软件&#xff0c;也不需要在线上传文件&#xff0c;保护您的隐私。 工具截图 主要特点 &#x1f680; 快速转换&#xff1a;本地转换&#xff0c;无需等待上…...

编程新知 2025/7/15 8:17:57

MySQL 8.0 事务全面讲解

以下是一个结合两次回答的 MySQL 8.0 事务全面讲解&#xff0c;涵盖了事务的核心概念、操作示例、失败回滚、隔离级别、事务性 DDL 和 XA 事务等内容&#xff0c;并修正了查看隔离级别的命令。 MySQL 8.0 事务全面讲解 一、事务的核心概念&#xff08;ACID&#xff09; 事务是…...

编程新知 2025/7/8 21:19:20

Kubernetes 网络模型深度解析：Pod IP 与 Service 的负载均衡机制，Service到底是什么？

Pod IP 的本质与特性 Pod IP 的定位 纯端点地址&#xff1a;Pod IP 是分配给 Pod 网络命名空间的真实 IP 地址&#xff08;如 10.244.1.2&#xff09;无特殊名称&#xff1a;在 Kubernetes 中&#xff0c;它通常被称为 “Pod IP” 或 “容器 IP”生命周期&#xff1a;与 Pod …...

编程新知 2025/7/7 15:20:50

Java求职者面试指南：Spring、Spring Boot、Spring MVC与MyBatis技术解析

Java求职者面试指南&#xff1a;Spring、Spring Boot、Spring MVC与MyBatis技术解析 一、第一轮基础概念问题 1. Spring框架的核心容器是什么&#xff1f;它的作用是什么&#xff1f; Spring框架的核心容器是IoC&#xff08;控制反转&#xff09;容器。它的主要作用是管理对…...

编程新知 2025/7/17 8:16:30

智能体革命：企业如何构建自主决策的AI代理？

OpenAI智能代理构建实用指南详解 随着大型语言模型&#xff08;LLM&#xff09;在推理、多模态理解和工具调用能力上的进步&#xff0c;智能代理&#xff08;Agents&#xff09;成为自动化领域的新突破。与传统软件仅帮助用户自动化流程不同&#xff0c;智能代理能够自主执行工…...

编程新知 2025/7/10 0:33:08

Centos 7 服务器部署多网站

一、准备工作 安装 Apache bash sudo yum install httpd -y sudo systemctl start httpd sudo systemctl enable httpd创建网站目录 假设部署 2 个网站&#xff0c;目录结构如下&#xff1a; bash sudo mkdir -p /var/www/site1/html sudo mkdir -p /var/www/site2/html添加测试…...

编程新知 2025/7/21 11:26:19