【JavaWeb03】入门JavaScript：轻松掌握前端开发核心技能

Ne0inhk

15 Mar 2026 — 20 min read

文章目录🌍一. JavaScript 1. 基本说明 2. JavaScript 特点!3. JavaScript 快速入门 🌍二. js变量 1. 变量的声明 2. 示例 3. 变量的命名规则 4. 变量的类型 5. 变量的作用域 6. 变量的提升 🌍三. 数据类型 1. 基本数据类型（Primitive Types）2. 引用数据类型（Reference Types）3. 类型检测 🌍四. 运算符 1. 算术运算符 2. 赋值运算符 3. 关系运算符 4. 逻辑运算符 🌍 五. 数组 1. 数组定义 2. 数组使用和遍历 🌍六. js函数 1. 函数定义方式 2. JavaScript 函数注意事项和细节 🌍七. 事件 onload 加载完成事件 onclick 单击事件 onblur 失去焦点事件 o nchange 内容发生改变事件 onsubmit 表单提交事件!🌍八. 习题

🙋‍♂️ 作者：@whisperrr.🙋‍♂️

👀 专栏：JavaWeb👀

💥 标题：【JavaWeb03】入门JavaScript：轻松掌握前端开发核心技能💥

❣️ 寄语：比较是偷走幸福的小偷❣️

🌍一. JavaScript

1. 基本说明

JavaScript 能改变 HTML 内容，能改变 HTML 属性，能改变 HTML 样式 (CSS)，能完成页面的数据验证
JS 需要运行浏览器来解析执行 JavaScript 代码。
JS 是 Netscape 网景公司的产品，最早取名为 LiveScript，后更名为JavaScript。和 Java 没有关系

JavaScript 简写 JS

2. JavaScript 特点!

1.JavaScript 是一种解释型的脚本语言，C、C++等语言先编译后执行，而 JavaScript 是在程序的运行过程中逐行进行解释。
2.JavaScript 是一种基于对象的脚本语言，可以创建对象，也能使用现有的对象(有对象)。
3.JavaScript 是弱类型的，对变量的数据类型不做严格的要求，变量的数据类型在运行过程可以变化。
4.跨平台性（只要是可以解释 JS 的浏览器都可以执行，和平台无关）

创建 js 弱类型.html演示弱类型特点

1.js 代码可以写在 script 标签中
2. type=“text/javascript” 表示这个脚本(script)类型是 javascript
3. type=“text/javascript” 可以不写，但是建议写上
4. js 语句可以不写 ; 建议写上
5. var

输出 alert() 使用弹框方式
输出 console.log() 在调试输出
输出变量的类型 typeof, 输出变量的类型

</html><!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>JavaScript 是弱类型的</title><script> num =1;alert("num="+ num);alert("num 数据类型="+(typeof num)); num ="ZEEKLOG";alert("num="+ num);alert("num 数据类型="+(typeof num));</script></head><body></body></html>

3. JavaScript 快速入门

JavaScript 可以以多种方式使用，以下是两种主要的使用方式：
使用方式 1:script 标签写 JS 代码

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>script 标签中 写 JS 代码</title><script type="text/javascript"> window.alert("hello, Javascript");</script></head><body><script type="text/javascript">// alert 是 JavaScript 语言提供的一个警告框函数。// 它可以输出指定的内容, 变量等信息//scrpt 标签的位置，可以在 head 中，也可以在 body 体 window.alert("hello, 韩顺平教育");</script></body></html>

使用方式 2: 使用 script 标签引入 JS 文件
通过 <script> 标签的 src 属性引用外部 JavaScript 文件。

<scriptsrc="path/to/your/script.js"></script>

两种使用 js 的方式，是二选一，不能混用, 如果你两种方式都使用了,不会报错
但是只有一个生效, 前面引入的 js 生效

🌍二. js变量

在 JavaScript 中，变量是存储信息的容器。它们是编程语言中的基本构建块，用于存储数据值，这些值可以在需要时进行修改。以下是关于 JavaScript 变量的一些关键点：

1. 变量的声明

在 JavaScript 中，你可以使用以下关键字来声明变量：

var：ES5 及更早版本中的传统声明方式，具有函数作用域。
let：ES6（ECMAScript 2015）中引入，具有块作用域。
const：ES6 中引入，用于声明一个只读的常量引用，也具有块作用域。

2. 示例

使用 var 声明变量

var x =10;

使用 let 声明变量

let y =20;

使用 const 声明变量

constPI=3.14159;

3. 变量的命名规则

变量名必须以字母、下划线（_）或美元符号（$）开头。
变量名不能以数字开头。
变量名只能包含字母、数字、下划线和美元符号。
变量名不能是 JavaScript 中的保留字或关键字，如 if, else, var, let, const 等。

4. 变量的类型

JavaScript 是一种动态类型语言，这意味着同一个变量可以用来存储不同类型的数据。以下是 JavaScript 中的一些基本数据类型：

String：表示文本数据，例如 "Hello, World!"。
Number：表示数值数据，例如 42 或 3.14。
Boolean：表示逻辑值 true 或 false。
Undefined：表示未定义的值，即声明了变量但未初始化。
Null：表示空值或不存在。
Object：表示复杂数据结构，例如对象、数组和函数。
Symbol（ES6 新增）：表示唯一的、不可变的数据类型。

5. 变量的作用域

var 声明的变量具有函数作用域，如果在函数外部声明，则为全局作用域。
let 和 const 声明的变量具有块作用域，这意味着它们只在声明它们的块（{} 内）中有效。

6. 变量的提升

var 声明的变量会被提升到其所在作用域的顶部，但不会初始化。
let 和 const 声明的变量也会被提升，但在声明之前不能访问，这被称为“暂时性死区”。
了解这些基本概念对于编写有效的 JavaScript 代码至关重要。随着 JavaScript 语言的发展，let 和 const 已成为声明变量的首选方式，因为它们提供了更好的作用域管理和代码清晰度。

🌍三. 数据类型

JavaScript 中的数据类型分为两大类：基本（原始）数据类型和引用（对象）数据类型。

1. 基本数据类型（Primitive Types）

基本数据类型是表示简单值的类型，它们是：
1.String

表示文本数据，可以是单引号、双引号或反引号（模板字符串）包围的字符序列。
示例："Hello, World!", 'JavaScript', `This is a template string`
tring 字符串 [可以双引号括起来，也可以单引号括起来]
实例："a book of JavaScript"、'abc'、"a"、""

2.Number

表示整数和浮点数，也包括 Infinity（无穷大）、-Infinity（负无穷大）和 NaN（不是一个数字）。
示例：42, 3.14, Infinity, -Infinity, NaN

3.Boolean

表示逻辑值，只有两个可能的值：true 和 false。
示例：true, false

4.Undefined

表示声明了变量但未初始化的值。
示例：undefined（注意：undefined 也是一个全局变量，但最好使用它作为数据类型而不是变量）

5.Null

表示空值或不存在对象的引用。
示例：null

6.Symbol (ES6 新增)

表示唯一的、不可变的数据类型，常用于对象的属性名，以确保不会与其他属性名冲突。
示例：Symbol("description")

7.BigInt (ES2020 新增)

表示大整数，可以表示超过 Number 类型安全范围的整数值。
示例：BigInt("123456789012345678901234567890")

2. 引用数据类型（Reference Types）

引用数据类型是指对象，它们可以存储多个值和更复杂的数据结构。以下是 JavaScript 中的几种引用类型：
1.Object

表示一组无序的键值对，是所有复杂数据结构的基础。
示例：{ name: "Alice", age: 25 }

2.Array

表示一组有序的元素集合，可以包含不同类型的值。
示例：[1, "two", true]

3.Function

表示函数，JavaScript 中的函数是一等公民，可以作为值来使用。
示例：function greet(name) { return "Hello, " + name; }
除了上述基本引用类型，JavaScript 还提供了许多内置对象，如 Date、RegExp（正则表达式）、Map、Set、WeakMap、WeakSet 等。

3. 类型检测

在 JavaScript 中，可以使用以下方法来检测变量的数据类型：

typeof 操作符：用于检测基本数据类型，对于引用类型（除了函数），它会返回 "object"。
instanceof 操作符：用于检测对象是否是特定构造函数的实例。
Object.prototype.toString.call() 方法：可以准确检测对象的具体类型。
例如：

typeof"Hello";// "string"typeof42;// "number"typeoftrue;// "boolean"typeofundefined;// "undefined"typeofnull;// "object"（这是 JavaScript 的一个历史错误）typeofSymbol();// "symbol"typeof{};// "object"typeof[];// "object"（注意：数组也是对象）typeoffunction(){};// "function"let arr =[]; arr instanceofArray;// true arr instanceofObject;// true（因为数组也是对象）Object.prototype.toString.call([]);// "[object Array]"

🌍四. 运算符

1. 算术运算符

算术运算符用于执行变量与/或值之间的算术运算。
y 等于 5，下面的表格解释了这些算术运算符

2. 赋值运算符

赋值运算符用于给 JavaScript 变量赋值。
给定 x=10 和 y=5，下面的表格解释了赋值运算符

3. 关系运算符

关系(比较) 运算符在逻辑语句中使用，以测定变量或值是否相等。
给定 x=5，下面的表格解释了比较运算符

等于： == 是简单的做字面值的比较
全等于： === 除了做字面值的比较之外，还会比较两个变量的数据类型
var a = "100";//string var b = 100;//number console.log(a == b);//true console.log(a === b);//false

4. 逻辑运算符

逻辑运算符用于测定变量或值之间的逻辑。
给定 x=6 以及 y=3，下表解释了逻辑运算符

注意事项：

在 JavaScript 语言中，所有的变量，都可以做为一个 boolean 类型的变量去使用。0 、null、 undefined、""(空串) 都认为是 false&& 且运算，有两种情况当表达式全为真的时候,放回最后一个表达式的值当表达式中,有一个为假时,返回第一个为假的值|| 或运算, 有两种情况 =当表达式全为假的时候,放回最后一个表达式的值当表达式中,有一个为真时,返回第一个为真的值

🌍 五. 数组

1. 数组定义

数组定义方式 1

var cars1 =["Audi","BMW","Volvo"]; console.log("cars1="+ cars1); console.log(cars1[1]);//表示访问 cars1 数组的第 2 个元素, 1 表示下标/索引， 从 0 开始编号

数组定义方式 2

var cars2 =[];//空数组//添加元素 cars2[0]="奥迪"; cars2[1]="宝马"; cars2[2]="奔驰"; console.log("cars2="+ cars2); console.log("cars2[2]="+ cars2[2]);//奔驰 console.log("cars2[10]="+ cars2[10]);// 如 果 该 元 素 不 存 在 ， 返 回 的 就 是undefined

数组定义方式 3

var cars3 =newArray("Audi","BMW","Volvo"); console.log("cars3="+ cars3); console.log("cars3[0]="+ cars3[0]);//Audi

数组定义方式 4

var cars4 =newArray();//空数组 console.log(typeof cars4); cars4[0]="法拉利"; cars4[1]="保时捷"; cars4[2]="yy";//相当于是给数组扩容 cars4[0]="zz";//替换 cars4[8]="红旗";//扩容, 如果是跳过了下标给赋值，那么中间没有赋值的元素 为 undefined console.log("cars4[3]="+ cars4[3]);//undefined console.log("cars4= "+ cars4);

2. 数组使用和遍历

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>数组使用和遍历</title><script type="text/javascript">var cars =["Audi","BMW","Volvo",100,1.1,true];//遍历 console.log("数组的长度= "+ cars.length)//6for(i =0; i < cars.length; i++){ console.log(cars[i]);//log 方法会自动换行}</script></head><body></body></html>

🌍六. js函数

一句话：函数是由事件驱动的，或者当它被调用时，执行的可重复使用的代码块

1. 函数定义方式

方式 1: function 关键字来定义函数

定义没有返回值的函数

function f1() { alert("f1() 被调用..."); } f1();

定义有形参的函数,这里的形参，不需要指定类型, name 的数据类型是由实参决定

function f2(name) { alert("hi " + name); } f2("刘");

定义有形参和返回值的函数, 不需要指定返回类型, 返回类型由返回的数
据来决定,js 的函数调用机制和 java 一样

function f3(n1, n2) { return n1 + n2; } alert("f3(10, 20)=" + f3(10, 20));

方式 2: 将函数赋给变量

varf1=function(){alert("hi");} console.log(typeof f1);f1();//调用函数

2. JavaScript 函数注意事项和细节

JS 中函数的重载会覆盖掉上一次的定义,也就是没有重载
函数的 arguments 隐形参数（作用域在 function 函数内）
(1) 隐形参数: 在 function 函数中不需要定义，可以直接用来获取所有参数的变量。
(2) 隐形参数特别像 java 的可变参数一样。 public void fun( int … args )
(3) js 中的隐形参数跟 java 的可变参数一样。操作类似数组
如果我们的函数有形参，在传入实参的时候，仍然按照顺序匹配
(1)如果有匹配上，就赋给他，如果没有匹配上，也无所谓
(2)仍然会把所有的实参，赋给 arguments
(3)如果形参个数，大于了实参个数，则该形参的值为 undefined

🌍七. 事件

事件是电脑输入设备与页面进行交互的响应
事件通常与函数配合使用，这样就可以通过发生的事件来驱动函数执行

事件一览表

事件的注册（绑定）
事件注册(绑定)：当事件响应(触发)后要浏览器执行哪些操作代码，叫事件注册或事件绑定
静态注册事件
通过 html 标签的事件属性直接赋于事件响应后的代码，这种方式叫静态注册
动态注册事件(
通过 js 代码得到标签的 dom 对象，然后再通过 dom 对象.事件名 = function(){} 这种形
式叫动态注册
4.16.4 动态注册事件步骤
获取标签<—>dom 对象
dom 对象.事件名 = fucntion(){}

onload 加载完成事件

onload : 某个页面或图像被完成加载
在 js 中，将页面窗口映射成 window dom 对象
window 对象有很多的函数和属性，可以使用
window.onload 表示页面被加载完毕
后面的 function (){} 表示加载完毕后，要执行的函数/代码

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>onload 加载完成事件</title><script type="text/javascript">//定义了一个函数functionsayOK(){alert('静态注册 onload 事件 sayOK');} window.onload=function(){alert("动态注册 onload 事件");}</script></head><!--静态注册--><body> hello~<input type="text" value="测试"/></body></html>

onclick 单击事件

onclick : 鼠标点击某个对象
动态注册 onclick 事件
先拿到 id=btn01 的 button 对应 dom 对象
通过 dom 对象动态的绑定 onclick 事件
通过 document 的 getElementById 获取对应的 dom 对象

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>onclick 单击事件</title><script type="text/javascript">functionsayOK(){alert("你点击了 sayOK 按钮");}//当页面加载完毕后，我们再进行动态绑定//基本概念和机制一定要清楚 window.onload=function(){var btn01 = document.getElementById("btn01"); btn01.onclick=function(){alert("你点击了 sayHi 按钮");}}</script></head><body><!--静态注册 onClick 事件--><button onclick="sayOK()">sayOK 按钮</button><button id="btn01">sayHi 按钮</button></body></html>

onblur 失去焦点事件

onblur : 元素失去焦点
通过下面任务来理解 onblur

输入小写单词,当输入框失去焦点时,小写单词转换大写

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>onblur 失去焦点事件</title><script type="text/javascript">//静态绑定functionupperCase(){//1. 先得到 fname 输入框的 value -> 得到对应 dom 对象var fname = document.getElementById("fname"); fname.value = fname.value.toUpperCase();}//在页面加载完毕，完成动态绑定 window.onload=function(){//1.得到 fname2 的 dom 对象var fname2 = document.getElementById("fname2"); fname2.onblur=function(){ fname2.value = fname2.value.toUpperCase();}}</script></head><body> 输入英文单词： <input type="text" id="fname" onblur="upperCase()"/><br /> 输入英文单词： <input type="text" id="fname2"/></body></html>

o nchange 内容发生改变事件

onchange : 域的内容被改变

通过下面的代码来理解

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>onchange 内容发生改变事件</title><script type="text/javascript"> 韩顺平 Java 工程师 functionmySal(){alert("工资范围变化了~");}//动态注册 window.onload=function(){//获取到 sel01 的 dom 对象var sel01 = document.getElementById("sel01");//给 sel01 绑定 onchange 事件 sel01.onchange=function(){alert("你换女友的~");}}</script></head><body> 你当前工资水平： <!--静态注册 onchange 事件--><select onchange="mySal()"><option>--工资范围--</option><option>10k 以下</option><option>10k-30k</option><option>30k 以上</option></select><br/> 你当前女友是谁： <select id="sel01"><!-- 动态绑定 onchange--><option>---女友---</option><option>艳红</option><option>春桃</option><option>春花</option></select></body></html>

onsubmit 表单提交事件!

onsubmit : 注册按钮被点击, 提交表单(需求: 如果用户名或密码为空，不能提交表单，正则表达式语法是通用)

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>onsubmit 表单提交事件</title><script type="text/javascript">//静态注册表单提交事件functionregister(){//先得到输入的用户名和密码var username = document.getElementById("username");var pwd = document.getElementById("pwd");//判断是否为空""if(""== username.value ||""== pwd.value){alert("用户名和密码不能为空, 不能提交");returnfalse;//不提交}//表示要提交returntrue;}//动态注册表单提交事件 window.onload=function(){//使用折半法, 观察原页面是否真的是最新的, 是不是修改的页面和访 问的页面一致 //得到 from2 表单 dom 对象var form2 = document.getElementById("form2");// //给 form2 绑定 onsubmit 事件// onsubmit 绑定的函数，会直接将结果(f,t)返回给 onsubmit form2.onsubmit=function(){if(form2.username.value ==""|| form2.pwd.value ==""){alert("用户名和密码不能为空, 不能提交");returnfalse;//不提交}returntrue;}}</script></head><body><h1>注册用户 1</h1><!-- 静态注册表单提交事件 --><form action="ok.html" onsubmit="return register()">u:<input type="text" id="username" name="username"/><br/>p:<input type="password" id="pwd" name="pwd"/><br/><input type="submit" value="注册用户"/></form><h1>注册用户 2</h1><!-- 动态注册表单提交事件 --><form action="ok.html" id="form2">u:<input type="text" name="username"/><br/>p:<input type="password" name="pwd"/><br/><input type="submit" value="注册用户"/></form></body></html>

🌍八. 习题

onsubmit : 注册按钮被点击, 提交表单, 要求如下

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>onsubmit 表单提交事件</title><script type="text/javascript">//动态注册表单提交事件 window.onload=function(){var form2 = document.getElementById("form2"); form2.onsubmit=function(){//过关斩将if(!(form2.username.value.length >=4&& form2.username.value.length <=6)){alert("用户名长度(4-6)");returnfalse;//不提交}if(form2.pwd.value.length !=6){alert("密码长度(6)");returnfalse;//不提交}if(form2.pwd.value != form2.pwd2.value){alert("两次密码不等");returnfalse;//不提交}//电子邮件->正则表达式 ^[\\w-]+@([a-zA-Z]+\\.)+[a-zA-Z]+$var emailPatt =/^[\w-]+@([a-zA-Z]+\.)+[a-zA-Z]+$/;if(!emailPatt.test(form2.email.value)){//4 提示用户alert("电子邮件格式不正确~")returnfalse;}returntrue;}}</script></head><body><h1>注册用户</h1><!-- 动态注册表单提交事件 --><form action="ok.html" id="form2">用户名:<input type="text" name="username"/>长度(4-6)<br/> 密 码:<input type="password" name="pwd"/>长度(6)<br/> 确 认:<input type="password" name="pwd2">长度(6)<br/> 电 邮:<input type="text" name="email">满足基本格式<br/><input type="submit" value="注册用户"/></form></body></html>

感谢大家的参与和支持，希望我的交流对您有所帮助。愿我们在未来的日子里继续携手共进，共创美好明天！再见！