JavaScript

最新推荐文章于 2024-10-02 05:39:15 发布

抓你去中香菜

最新推荐文章于 2024-10-02 05:39:15 发布

阅读量34

点赞数

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/qq_41226215/article/details/134641846

版权

1. JS介绍

那什么是JavaScript呢 ?

JavaScript（简称：JS）是一门跨平台、面向对象的脚本语言，是用来控制网页行为的，实现人机交互效果。JavaScript 和 Java 是完全不同的语言，不论是概念还是设计。但是基础语法类似。
组成：
- ECMAScript: 规定了JS基础语法核心知识，包括变量、数据类型、流程控制、函数、对象等。
- BOM：浏览器对象模型，用于操作浏览器本身，如：页面弹窗、地址栏操作、关闭窗口等。
- DOM：文档对象模型，用于操作HTML文档，如：改变标签内的内容、改变标签内字体样式等。

备注：ECMA国际（前身为欧洲计算机制造商协会），制定了标准化的脚本程序设计语言 ECMAScript，这种语言得到广泛应用。而JavaScript是遵守ECMAScript的标准的。

2. 引入方式

2.1 介绍

同样，js代码也是书写在html中的，那么html中如何引入js代码呢？主要通过下面的2种引入方式：

第一种方式：内部脚本，将JS代码定义在HTML页面中

JavaScript代码必须位于<script></script>标签之间
在HTML文档中，可以在任意地方，放置任意数量的<script>
一般会把脚本置于<body>元素的底部，可改善显示速度

例子：

<body>
  <!-- 页面内容 -->
  
  <script>
    alert("Hello World");
  </script>
</body>

第二种方式：外部脚本，将JS代码定义在外部 JS文件中，然后引入到 HTML页面中

外部JS文件中，只包含JS代码，不包含<script>标签
引入外部js的<script>标签，必须是双标签

例子：

<script src="js/demo.js"></script>

注意1：demo.js中只有js代码，没有<script>标签

注意2：通过<script></script>标签引入外部JS文件时，标签不能自闭合

2.2 演示

接下来，我们通过VS Code来编写代码，演示html中2种引入js的方式

第一步：在VS Code中创建名为 01.JS-引入方式.html的文件

第二步：按照上述第一种内部脚本的方式引入js，编写如下代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS-引入方式</title>
</head>
<body>

    <!-- 方式一: 内部脚本 -->
    <script>
        alert("Hello World");
    </script>
</body>
</html>

第三步：浏览器打开效果如图所示：

第四步：接下来演示外部脚本，注释掉内部脚本，然后在css目录同级创建js目录，然后创建一个名为demo.js的文件：

第五步：在demo.js中编写如下js内容：

alert('Hello JavaScript');

第六步：注释掉之前的内部脚本代码，添加<script>标签来引入外部demo.js文件,具体代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS-引入方式</title>
</head>
<body>

    <!-- 方式一: 内部脚本 -->
    <!-- <script>
        alert("Hello World");
    </script> -->
    <script src="js/demo.js"></script>
</body>
</html>

第七步：浏览器刷新效果如图

3. 基础语法

3.1 书写规范

掌握了js的引入方式，那么接下来我们需要学习js的书写了，首先需要掌握的是js的书写语法，语法规则如下：

区分大小写：与 Java 一样，变量名、函数名以及其他一切东西都是区分大小写的。
每行结尾的分号可有可无【推荐要么全都写，要么全都不写】。
大括号表示代码块。
注释：
- 单行注释：// 注释内容
- 多行注释：/* 注释内容 */

我们需要借助js中3钟输出语句，来演示书写语法

api	描述
window.alert(...)	警告框
document.write(...)	在HTML 输出内容
console.log(...)	写入浏览器控制台

接下来我们就通过VS Code，来演示一些上述的3种输出语句的书写语法

第一步：在VS Code中创建名为 02.JS-基础语法-输出语句.html的文件

第二步：按照基本语法规则，编写3种输出语句的代码，并且添加注释，具体代码如下；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS-基本语法-输出语句</title>
</head>
<body>
	
    <script>
        //方式一: 写入浏览器的body区域
        document.write("Hello JS (document.write)");

        //方式二: 弹出框
        window.alert("Hello JS (window.alert)");

        //方式三: 控制台
        console.log("Hello JS (console.log)")
    </script>
</body>
</html>

浏览器打开如图所示效果：

3.2 变量

3.2.1 let

基本的书写语法我们清楚了之后，接下来，我们再来讲解JS中的变量。在js中，变量的声明和java中还是不同的。

JS中主要通过 let 关键字来声明变量的。
JS是一门弱类型语言，变量是可以存放不同类型的值的。
变量名需要遵循如下规则：
- 组成字符可以是任何字母、数字、下划线（_）或美元符号（$），且数字不能开头
- 变量名严格区分大小写，如：name和Name是不同的变量
- 不能使用关键字作为变量名，如：let、if、for等

变量的声明示例如下所示：

<script>
    //变量
    let a = 20;
    a = "Hello";
    alert(a);
</script>

上述的示例中，大家会看到变量a既可以存数字，又可以存字符串。因为JS是弱类型语言。

3.2.2 const

在JS中，如果声明一个常量，需要使用const关键字。一旦声明，常量的值就不能改变（不可以重新赋值）。

如下所示：

<body>

    <script>
        //常量
        const PI = 3.14;
        PI = 3.15;
        alert(PI);
    </script>
</body>

浏览器打开之后，会报如下错误：

该错误就表示，常量不可以被重新分配值。

3.2.3 注意

在早期的JS中，声明变量还可以使用 var 关键字来声明。例如：

<body>

    <script>
         //var声明变量
		var name = "A";
		name = "B";
		alert(name);
        
         var name = "C"
         alert(name);
    </script>
</body>

打开浏览器运行之后，大家会发现，可以正常执行，第一次弹出 B，第二次弹出 C 。我们看到 name变量重复声明了，但是呢，如果使用var关键字，是没有问题的，可以重复声明。

var声明的变量呢，还有一些其他不严谨的地方，这里就不再一一列举了，所以这个声明变量的关键字，并不严谨【不推荐】

3.3 数据类型

虽然JS是弱数据类型的语言，但是JS中也存在数据类型，JS中的数据类型分为：原始数据类型和引用数据类型。那这部分，我们先来学习原始数据类型，主要包含以下几种类型

数据类型	描述
number	数字（整数、小数、NaN(Not a Number)）
string	字符串，单双引('...')、双引号("...")、反引号(`...`)皆可，正常使用推荐单引号
boolean	布尔。true，false
null	对象为空。 JavaScript 是大小写敏感的，因此 null、Null、NULL是完全不同的
undefined	当声明的变量未初始化时，该变量的默认值是 undefined

使用typeof 关键字可以返回变量的数据类型，接下来我们需要通过书写代码来演示js中的数据类型

第一步：在VS Code中创建名为 04.JS-基础语法-数据类型.html 的文件

第二步：编写如下代码，然后直接挨个观察数据类型：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS-数据类型</title>
</head>
<body>

    <script>
        //原始数据类型
        alert(typeof 3); //number
        alert(typeof 3.14); //number

        alert(typeof "A"); //string
        alert(typeof 'Hello');//string

        alert(typeof true); //boolean
        alert(typeof false);//boolean

        alert(typeof null); //object 

        var a ;
        alert(typeof a); //undefined

    </script>
</body>
</html>

对于字符串类型的数据，除了可以使用双引号（"..."）、单引号（'...'）以外，还可以使用反引号（`...`）。而使用反引号引起来的字符串，也称为模板字符串。

模板字符串的使用场景：拼接字符串和变量。
模板字符串的语法：
- `...` ：反引号（英文输入模式下键盘 tab 键上方波浪线 ~ 那个键）
- 内容拼接时，使用 ${ } 来引用变量

具体示例如下：

  <script>
    let name = 'Tom';
    let age = 18;
    console.log('大家好, 我是新入职的' + name + ', 今年' + age + '岁了, 请多多关照'); //原始方式 , 手动拼接字符串
    console.log(`大家好, 我是新入职的${name}, 今年${age}岁了, 请多多关照`); //使用模板字符串方式拼接字符串
  </script>

3.4 运算符

3.4.1 运算符

那接下来，我们再来介绍JS中的运算符。JS中的运算规则绝大多数还是和JAVA中是一致的，具体运算符如下：

运算规则	运算符
算术运算符	+ , - , * , / , % , ++ , --
赋值运算符	= , += , -= , *= , /= , %=
比较运算符	> , < , >= , <= , != , == , === 注意 == 会进行类型转换，=== 不会进行类型转换
逻辑运算符	&& , \|\| , !
三元运算符	条件表达式 ? true_value: false_value

上述所罗列的这些运算符中，绝大部分的运算符和Java中的使用方式、含义都是一样的。那这里，我们主要介绍一下 = 、==、=== 的区别：

= 是赋值操作
== 会在比较时，判断左右两边的值是否相等（会自动进行类型转换）
=== 全等，在比较时，判断左右两边的类型和值是否都相等，都相等才为true（不会进行类型转换）

接下来我们通过代码来演示JS中的运算法，主要记忆JS中和JAVA中不一致的地方

第一步：在VS Code中创建名为05. JS-基础语法-运算符.html的文件

第二步：编写代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS-运算符</title>
</head>
<body> 

    <script>
         var age = 20;
         var _age = "20";
         var $age = 20;

         alert(age == _age); //true ，只比较值
         alert(age === _age); //false ，类型不一样
         alert(age === $age); //true ，类型一样，值一样
    </script>
</body>
</html>

3.4.2 类型转换

在某些运算被执行时，系统内部自动将数据类型进行转换，这种转换成为隐式转换。

字符串 <-> 数字：
- +号两边只要有一个是字符串，都会把另外一个转成字符串。
- 除了+外的算术运算符，比如：- * / 都会把字符串转为数字类型。
- 通过parseInt(...)函数，可以将一个字符串转为数字。
其他类型 -> 布尔类型：
- Number：0 和 NaN为false，其他均转为true。
- String：空字符串为false，其他均转为true。
- Null 和 undefined ：均转为false。

演示1: 字符串 <-> 数字

//类型转换 - 字符串 <-> 数字
alert(typeof ('10' - 1)); //number
alert(typeof ('10' + 1)); //string

alert(parseInt("12")); //12
alert(parseInt("12A45")); //12
alert(parseInt("A45"));//NaN (not a number)

演示2: 其他类型 <-> 布尔类型

在js中，还有非常重要的一点是：0，null，undefined，""，NaN 理解成false，反之理解成true。

/ 类型转换 - 其他类型转为boolean
if(0){//false
    alert("0 转换为false");
}
if(NaN){//false
    alert("NaN 转换为false");
}
if(1){//true
    alert("除0和NaN其他数字都转为 true");
}

if(""){//false
    alert("空字符串为 false, 其他都是true");
}

if(" "){//true
    alert("空格字符串为 true");
}

if(null){//false
    alert("null 转化为false");
}
if(undefined){//false
    alert("undefined 转化为false");
}

需要注意的是：在JS中，0，null，undefined，""，NaN理解成false，反之都为 true。

3.5 流程控制语句

在JS中，当然也存在对应的流程控制语句。常见的流程控制语句如下：

if ... else if ... else ...
switch
for
while
do ... while

而JS中的流程控制语句与JAVA中的流程控制语句的作用，执行机制都是一样的。这个呢，我们现在就不再一个一个的如研究了，后面用到的时候，我们再做说明。

4. 函数

在JAVA中我们为了提高代码的复用性，可以使用方法。同样，在JavaScript中可以使用函数来完成相同的事情。JavaScript中的函数被设计为执行特定任务的代码块，方便程序的封装复用。在JS中，需要通过关键字function来定义。接下来我们学习一下JavaScript中定义函数的2种语法：

4.1 格式一

第一种定义格式如下：

function 函数名(参数1,参数2..){
    要执行的代码
}

因为JavaScript是弱数据类型的语言，所以有如下几点需要注意：

形参不需要声明类型，并且JS中不管什么类型都是let去声明，加上也没有意义。
返回值也不需要声明类型，直接return即可

示例：

function add(a, b){
    return a + b;
}

如果要调用上述的函数add，可以使用：函数名称(实际参数列表)

let result = add(10,20);
alert(result);

我们在调用add函数时，再添加2个参数，修改代码如下：

var result = add(10,20,30,40);
alert(result);

浏览器打开，发现没有错误，并且依然弹出30，这是为什么呢？

因为在JavaScript中，函数的调用只需要名称正确即可，参数列表不管的。如上述案例，10传递给了变量a，20传递给了变量b,而30和40没有变量接受，但是不影响函数的正常调用。

注意：由于JS是弱类型语言，形参、返回值都不需要指定类型。在调用函数时，实参个数与形参个数可以不一致，但是建议一致。

4.2 格式二

刚才我们定义函数，是为函数指定了一个名字。那我们也可以不为函数指定名字，那这一类的函数，我们称之为匿名函数。那接下来，方式二，就来介绍一下匿名函数的定义和调用。

匿名函数：是指一种没有名称的函数，由于它们没有名称，因此无法直接通过函数名来调用，而是通过变量或表达式来调用。

匿名函数定义可以通过两种方式：函数表达式和箭头函数。

示例一（函数表达式）：

var add = function (a,b){
	return a + b;
}

示例二（箭头函数）：

var add = (a,b) => {
	return a + b;
}

上述匿名函数声明好了之后，是将这个函数赋值给了add变量。那我们就可以直接通过add函数直接调用，调用代码如下：

let result = add(10,20);
alert(result);

也可以在定义完匿名函数之后，让该函数立即执行，这类函数我们也称为 立即执行函数。

(function (a,b) {console.log(a + b);})(10,20);

((a,b) => {console.log(a + b);})(100,200);

5. JS对象

JavaScript中的对象有很多，主要可以分为如下3大类，我们可以打开W3school在线学习文档，来到首页，在左侧栏找到浏览器脚本下的JavaScript，如下图所示：

然后进入到如下界面，点击右侧的参考书

然后进入到如下页面，此页面列举出了JavaScript中的所有对象

可以大体分页3大类：

第一类：基本对象,我们主要学习Array、String和JSON

第二类：BOM对象,主要是和浏览器相关的几个对象

第三类：DOM对象，JavaScript中将html的每一个标签都封装成一个对象

5.1 基本对象

5.1.1 Array对象

5.1.1.1 语法格式

Array对象时用来定义数组的。常用语法格式有如下2种：

方式1：

let 变量名 = new Array(元素列表);

例如：

let arr = new Array(1,2,3,4); //1,2,3,4 是存储在数组中的数据（元素）

方式2：

let 变量名 = [ 元素列表 ];

例如：

let arr = [1,2,3,4]; //1,2,3,4 是存储在数组中的数据（元素）

数组定义好了，那么我们该如何获取数组中的值呢？和java中一样，需要通过索引来获取数组中的值（索引从0 开始）。语法如下：

arr[索引] = 值;

5.1.1.2 特点

与java中不一样的是，JavaScript中数组相当于java中的集合，数组的长度是可以变化的。而且JavaScript是弱数据类型的语言，所以数组中可以存储任意数据类型的值【总结起来：长度可变、类型可变】。

接下来我们通过代码来演示上述特点。注释掉之前的代码，添加如下代码：

//特点: 长度可变 类型可变
let arr = [1,2,3,4];
arr[10] = 50;

console.log(arr[10]);
console.log(arr[9]);
console.log(arr[8]);

上述代码定义的arr变量中，数组的长度是4，但是我们直接再索引10的位置直接添加了数据10，并且输出索引为10的位置的元素，浏览器控制台数据结果如下：

5.1.1.3 属性和方法

Array作为一个对象，那么对象是有属性和方法的，所以接下来我们介绍一下Array对象的属性和方法

官方文档中提供了Array的很多属性和方法，但是我们只学习常用的属性和方法，如下图所示：

属性	描述
length	设置或返回数组中元素的数量。

方法	描述
forEach()	遍历数组中的每个有值的元素，并调用一次传入的函数
map()	遍历每个数组元素，调用函数进行处理，并将结果封装到一个新数组中
push()	将一个或多个元素添加到数组的末尾，并返回新的长度。
pop()	从数组移除最后一个元素，并返回该元素。
unshift()	在数组开头添加一个或多个元素，并返回数组的新长度。
shift()	从数组移除第一个元素，并返回该元素。
splice()	从数组中删除元素。

5.1.2 String对象

5.1.2.1 语法格式

String对象的创建方式有2种：

方式1：

let str = new String("Hello String");

方式2：

 let str = 'Hello String';

5.1.2.2 属性和方法

属性	描述
length	字符串的长度。

方法	描述
charAt()	返回在指定位置的字符。
indexOf()	检索字符串。
trim()	去除字符串两边的空格
substring()	提取字符串中两个指定的索引号之间的字符。

5.1.3 JSON对象

5.1.3.1 自定义对象JS

在 JavaScript 中自定义对象特别简单，其语法格式如下：

let 对象名 = {
    属性名1: 属性值1,
    属性名2: 属性值2,
    属性名3: 属性值3,
    方法名: function (形参列表) {}
}

我们可以通过如下语法调用属性和函数：

对象名.属性名;对象名.方法名()

5.1.3.2 JSON

5.1.3.2.1 介绍

JSON对象：JavaScript Object Notation，JavaScript对象标记法。JSON是通过JavaScript标记法书写的文本。其格式如下：

{
    "key":value,
    "key":value,
    "key":value
}

其中，key必须使用引号并且是双引号标记，value可以是任意数据类型。

而由于语法简单，层级结构鲜明，现多用于作为数据载体，在网络中进行数据传输。

5.1.3.2.2 定义

接下来我们通过代码来演示json对象：注释掉之前的代码，编写代码如下：

let userStr = '{"name":"Tom", "age":18, "addr":["北京","上海","西安"]}';
alert(userStr.name);

浏览器输出结果如下：

为什么呢？因为上述是一个json格式的字符串，不是JS对象，所以我们需要借助JS中提供的JSON对象，来将json字符串和JS对象之间来完成转换。：

1). JSON字符串 -> JS对象

let obj = JSON.parse(userStr);
console.log(jsObj.name);

此时浏览器输出结果如下：

2). JS对象 -> JSON字符串

let jsonStr = JSON.stringify(jsObj);//将JS对象转为JSON字符串

console.log(jsonStr);

浏览器输出结果如图所示：

5.2 BOM对象

BOM的全称是Browser Object Model,翻译过来是浏览器对象模型。

也就是JavaScript将浏览器的各个组成部分封装成了对象。我们要操作浏览器的部分功能，可以通过操作BOM对象的相关属性或者函数来完成。

例如：我们想要将浏览器的地址改为http://www.baidu.com,我们就可以通过BOM中提供的location对象的href属性来完成，代码如下：location.href='http://www.baidu.com'

BOM中提供了如下5个对象：

对象名称	描述
Window	浏览器窗口对象
Navigator	浏览器对象
Screen	屏幕对象
History	历史记录对象
Location	d地址栏对象

1.5.2.1 Window对象

window对象指的是浏览器窗口对象，是JavaScript的全部对象，所以对于window对象，我们可以直接使用，并且对于window对象的方法和属性，我们可以省略window.例如：我们之前学习的alert()函数其实是属于window对象的，其完整的代码如下

window.alert('hello');
省略window.简写成：
alert('hello')

window对象提供了获取其他BOM对象的属性：

属性	描述
history	用于获取history对象
location	用于获取location对象
Navigator	用于获取Navigator对象
Screen	用于获取Screen对象

也就是说我们要使用location对象，只需要通过代码window.location或者简写location即可使用

window也提供了一些常用的方法，如下表格所示：

函数	描述
alert()	显示带有一段消息和一个确认按钮的警告框。
comfirm()	显示带有一段消息以及确认按钮和取消按钮的对话框。
setInterval()	按照指定的周期（以毫秒计）来调用函数或计算表达式。
setTimeout()	在指定的毫秒数后调用函数或计算表达式。

setInterval(fn,毫秒值)：定时器，用于周期性的执行某个功能，并且是循环执行。该函数需要传递2个参数：

fn:函数，需要周期性执行的功能代码

毫秒值：间隔时间

注释掉之前的代码，添加代码如下：

//定时器 - setInterval -- 周期性的执行某一个函数
var i = 0;
setInterval(function(){
     i++;
     console.log("定时器执行了"+i+"次");
},2000);

刷新页面，浏览器每个一段时间都会在控制台输出，结果如下：

setTimeout(fn,毫秒值) ：定时器，只会在一段时间后执行一次功能。参数和上述setInterval一致

注释掉之前的代码，添加代码如下：

//定时器 - setTimeout -- 延迟指定时间执行一次 
setTimeout(function(){
	alert("JS");
},3000);

浏览器打开，3s后弹框，关闭弹框，发现再也不会弹框了。

1.5.2.2 Location对象

location是指代浏览器的地址栏对象，对于这个对象，我们常用的是href属性，用于获取或者设置浏览器的地址信息，添加如下代码：

//获取浏览器地址栏信息
alert(location.href);
//设置浏览器地址栏信息
location.href = "https://www.itcast.cn";

浏览器效果如下：首先弹框展示浏览器地址栏信息，

5.3 DOM对象

5.3.1 DOM介绍

DOM：Document Object Model 文档对象模型。也就是 JavaScript 将 HTML 文档的各个组成部分封装为对象。

DOM 其实我们并不陌生，之前在学习 XML 就接触过，只不过 XML 文档中的标签需要我们写代码解析，而 HTML 文档是浏览器解析。封装的对象分为

Document：整个文档对象
Element：元素对象
Attribute：属性对象
Text：文本对象
Comment：注释对象

如下图，左边是 HTML 文档内容，右边是 DOM 树

那么我们学习DOM技术有什么用呢？主要作用如下：

改变 HTML 元素的内容
改变 HTML 元素的样式（CSS）
对 HTML DOM 事件作出反应
添加和删除 HTML 元素

5.3.2 DOM对象

DOM的核心思想：将网页的内容当做对象来处理
document对象
- 网页中所有内容都封装在document对象中
- 它提供的属性和方法都是用来访问和操作网页内容的，如：document.write(…)
DOM操作步骤:
- 获取DOM元素对象
- 操作DOM对象的属性或方法 (查阅文档)

5.3.3 获取DOM对象

我们可以通过如下两种方式来获取DOM元素。

根据CSS选择器来获取DOM元素，获取到匹配到的第一个元素：document.querySelector('CSS选择器');
根据CSS选择器来获取DOM元素，获取匹配到的所有元素：document.querySelectorAll('CSS选择器');

注意：获取到的所有元素，会封装到一个NodeList节点集合中，是一个伪数组（有长度、有索引的数组，但是没有push、pop等数组方法）

6. JS事件

什么是事件呢？HTML事件是发生在HTML元素上的 “事情”，例如：

按钮被点击
鼠标移到元素上
输入框失去焦点
按下键盘按键
........

6.2 事件监听

JS事件监听的语法:

事件源.addEventListener('事件类型', 要执行的函数);

在上述的语法中包含三个要素:

事件源: 哪个dom元素触发了事件, 要获取dom元素
事件类型: 用什么方式触发, 比如: 鼠标单击 click, 鼠标经过 mouseover
要执行的函数: 要做什么事

演示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS-事件-事件绑定</title>
</head>

<body>
    <input type="button" id="btn1" value="点我一下试试1">
    <input type="button" id="btn2" value="点我一下试试2">
        
    <script>
        document.querySelector("#btn1").addEventListener('click', ()=>{
            alert("按钮1被点击了...");
        })
    </script>
</body>
</html>

6.3 常见事件

6.5 正则表达式

介绍：正则表达式（Regular Expression，也简称为正则），定义了字符串组成的规则。
作用：通常用来验证数据格式、查找替换文本等。
定义：
- 正则表达式字面量（注意不要加引号）

const reg1 = /abc/;

创建正则对象RegExp

const reg2 = new RegExp('abc');

方法：

test(str)：判断指定字符串是否符合规则，符合返回true；不符合返回false。

符号	含义
^	表示以谁开始
$	表示以谁结束
[]	表示某个范围内的单个字符，如：[0-9]单个数字字符
.	表示任意单个字符，除了换行和行结束符
\w	代表单词字符：字母、数字、下划线（_），相当于[A-Za-z0-9_]
\d	代表数字字符：相当于[0-9]
\s	代表空格（包括换行符、制表符、空格等）