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

最新推荐文章于 2025-11-23 16:56:34 发布

原创最新推荐文章于 2025-11-23 16:56:34 发布 · 964 阅读

CC 4.0 BY-SA版权

文章标签：

文章目录
🌍一. 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 表单提交事件!
🌍八. 习题

🌍一. 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 = "csdn";
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 文件。

<script src="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 声明变量

const PI = 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"
typeof 42; // "number"
typeof true; // "boolean"
typeof undefined; // "undefined"
typeof null; // "object"（这是 JavaScript 的一个历史错误）
typeof Symbol(); // "symbol"
typeof {}; // "object"
typeof []; // "object"（注意：数组也是对象）
typeof function() {}; // "function"
let arr = [];
arr instanceof Array; // true
arr instanceof Object; // 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 = new Array("Audi", "BMW", "Volvo");
console.log("cars3=" + cars3);
console.log("cars3[0]=" + cars3[0]);//Audi

数组定义方式 4

var cars4 = new Array();//空数组
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)//6
for (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("刘");

方式 2: 将函数赋给变量

var f1 = 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">
//定义了一个函数
function sayOK() {
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">
function sayOK() {
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">
//静态绑定
function upperCase() {
//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 工程师
function mySal() {
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">
//静态注册表单提交事件
function register() {
//先得到输入的用户名和密码
var username = document.getElementById("username");
var pwd = document.getElementById("pwd");
//判断是否为空""
if ("" == username.value || "" == pwd.value) {
alert("用户名和密码不能为空, 不能提交");
return false;//不提交
}
//表示要提交
return true;
}
//动态注册表单提交事件
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("用户名和密码不能为空, 不能提交");
return false;//不提交
}
return true;
}
}
</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 表单提交事件!

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

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>onsubmit 表单提交事件</title>
<script type="text/javascript">
//静态注册表单提交事件
function register() {
//先得到输入的用户名和密码
var username = document.getElementById("username");
var pwd = document.getElementById("pwd");
//判断是否为空""
if ("" == username.value || "" == pwd.value) {
alert("用户名和密码不能为空, 不能提交");
return false;//不提交
}
//表示要提交
return true;
}
//动态注册表单提交事件
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("用户名和密码不能为空, 不能提交");
return false;//不提交
}
return true;
}
}
</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>