1. JS介绍

YangeIT大约 40 分钟JavaWebweb开发JavaScript函数Vue生命周期

1. JS介绍

1.JS之语法 控制页面行为

html完成了架子，css做了美化，但是网页是死的，我们需要给他注入灵魂，所以接下来我们需要学习JavaScript，这门语言会让我们的页面能够和用户进行交互 🎯。

1️⃣ 1.1 JavaScript概述

JavaScript概述

JavaScript 是 前端开发者必学的三种语言之一：

  • HTML 定义网页的内容
  • CSS 规定网页的布局
  • JavaScript 对网页行为进行编程
    • 1995年布兰登·艾奇发明
    • ES6是目前流行的JavaScript版本，江湖上常称：JS
    • JavaScript 很容易入门
    • JavaScript是一门解释型语言，浏览器直接运行（无需编译）
    • JavaScript的学习和Java类似，有字符串、整数、布尔、对象、数组、函数（方法）逻辑运算符、比较运算符、复制运算符、常量、变量、for循环等等

点击这里体验下JavaScript的效果open in new window 👈

总结

课堂作业

  1. JavaScript能干嘛？和java是什么关系？🎤
  2. 学习js主要学习什么？

2️⃣ 1.2 引入方式

引入方式

js代码也是书写在html中的，那么html需要引入JS代码

代码操作

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

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

例子：

<script>
    alert("Hello JavaScript")
</script>

idea动画 🎥 点击查看演示idea动画open in new window

演示代码： 👇

1️⃣ 第一步：在VS Code中创建名为10. JS-引入方式.html的文件：
1668020876108
1668020876108
2️⃣ 第二步：按照上述第一种内部脚本的方式引入js，编写如下代码：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS-引入方式</title>
    <!-- 内部脚本 -->
    <script>
        alert('Hello JS');
    </script>
</head>
<body>
</body>
</html>
3️⃣ 第三步：浏览器打开效果如图所示：
1668020985363
1668020985363

3️⃣1.3 语法-书写语法

语法-书写语法

掌握了js的引入方式，那么接下来我们需要学习js的书写了，首先需要掌握的是js的书写语法用Java编写规范即可

语法规则如下：

  • 区分大小写：与 Java 一样，变量名、函数名Java中的方法名以及其他一切东西都是区分大小写的
  • 每行结尾的分号;可有可无 Java中有，建议写
  • {}大括号表示代码块
  • 注释：和Java一样
    • 单行注释：// 注释内容
    • 多行注释：/* 注释内容 */

借助js中3钟输出语句，来演示书写语法👇

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

代码演示操作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS-基本语法</title>
</head>
<body>
    
</body>
<script>
    /* alert("JS"); */

    //方式一: 弹出警告框
    // window.alert("hello js");

    // //方式二: 写入html页面中
    // document.write("hello js");

    //方式三: 控制台输出
    console.log("hello js");
</script>
</html>













 


 


 


浏览器F12进入开发者模式，去控制台页面（可以看到console的打印信息，类似idea的控制台信息），如图所示：

1668101840992
1668101840992

总结

课堂作业

  1. js中语法如果按照java中的语法进行书写，可以吗？🎤

4️⃣1.4 语法-变量 🍐

变量

学习js中变量的声明

  1. 在js中，变量的声明和java中还是不同的
  2. js中主要通过如下3个关键字来声明变量的：
关键字解释
var 早期ECMAScript5中用于变量声明的关键字
letECMAScript6中新增 的用于变量声明的关键字，相比较var，let只在代码块内生效
const声明常量的，常量一旦声明，不能修改

在js中声明变量还需要注意如下几点：

  1. JavaScript 是一门弱类型语言，变量可以存放不同类型的值 。
  2. 变量名需要遵循如下规则按照Java规范即可：
    • 组成字符可以是任何字母、数字、下划线（_）或美元符号（$）
    • 数字不能开头
    • 建议使用驼峰命名

代码操作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS-基础语法</title>
</head>
<body>
    
</body>
<script>

    //var定义变量
    // var a = 10;
    // a = "张三";
    // alert(a);

    //var特点1 : 作用域比较大, 全局变量
    //var特点2 : 可以重复定义的
    // {
    //     var x = 1;
    //     var x = "A";
    // }
    // alert(x);



    //let : 局部变量 ; 不能重复定义 
    // {
    //     let x = 1;
    //     alert(x);
    // }


    
    //const: 常量 , 不能给改变的.
    const pi = 3.14;
    pi = 3.15;
    alert(pi);

</script>
</html>

总结

课堂作业

  1. let var 是什么类型的变量？🎤
  2. 定义常量应该用什么关键字？

5️⃣1.5 语法-数据类型和运算符 🍐

数据类型和运算符

虽然js是弱数据类型的语言，但是js中也存在数据类型，js中的数据类型分为 ：原始类型 和 引用类型，具体有如下类型

数据类型描述
number数字（整数、小数、NaN(Not a Number)）
string字符串，单双引 皆可
boolean布尔。true，false
null对象为空
undefined当声明的变量未初始化 时，该变量的默认值是 undefined

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

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

代码操作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS-数据类型</title>
</head>
<body>

</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 

    //undefined未定义
    var a ;
    alert(typeof a); //undefined
    
</script>
</html>

课堂作业

🚩 1. 完成下列案例巩固js的变量定义和运算符

需求1：

  • 输入春天，alert弹出提示：春天花会开
  • 输入夏天, alert弹出提示：夏天是水果成熟的季节
  • 输入秋天, alert弹出提示：秋天是我要月入万元的季节
  • 输入冬天, alert弹出提示：今年冬天，我的卡中新增好几个达不溜
  • 其他，提示：输入错误，请重新输入

提示：

  • prompt 可以接受对话框输入的数据（如图）
var str = window.prompt("请输入季节","") 弹出输入对话框
alert(str); 弹出信息对话框
image-20220402005347572
image-20220402005347572

提示

如果你完成了上述案例，说明你已经掌握js的变量定义、js的运行、js的字符串、js的流程控制语句🎉

需求2：

  • 在上面的需求完成的情况下，增加一个功能：
    • 第二次输入春天，会弹出：春天花会开-2；
    • 第三次输入春天，会弹出：春天花会开-3. 出现累加的效果

提示

如果你完成了上述案例，说明你进一步掌握js的运算符 🎉

6️⃣1.6 语法-函数 ✏️ 🍐

函数

  1. java中我们为了提高代码的复用性，可以使用方法
  2. 在JavaScript中可以使用函数来完成相同的事情
    • JavaScript中的函数被设计为执行特定任务的代码块 (封装)，通过关键字function 来定义
    • JS中定义函数有2中方式

Idea中创建教程动画：

第一种定义格式如下常用：

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

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

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

如下示例：

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

代码演示： 👇

第一步：新建名为js的文件夹，创建名为01. JS-函数的html文件，然后在<script>中定义上述示例的函数：

<script>
     function add(a,b){
        return  a + b;
     }
</script>

但是上述只是定义函数，函数需要被调用才能执行！ 所以接下来我们需要调用函数

第二步： 因为定义的add函数有返回值，所以我们可以接受返回值，并且输出到浏览器上，添加如下代码：

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

查看浏览器运行结果：浏览器弹框内容如下图所示：

1668584359136
1668584359136

注意

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

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

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

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

课堂作业

🚩 1. 定义一个能求出1-n累加的函数，如：

  1. 输入2：结果等于 3 （1+2）
  2. 输入3：结果等于 6（1+2+3）
  3. 输入4：结果等于 10（1+2+3+4）
  4. 输入n：结果等于 xxx（1+2+3+...+n）

2. JS之对象

JS之对象

JavaScript中的对象有很多，主要可以分为如下3大类，我们可以打开W3school在线学习文档open in new window，来到首页

对象分类：👇

2.1 JS基本对象之Array

JS基本对象之Array

w3c学习网站中数组的学习资料open in new window

AArray 对象用于在单个变量中存储多个值。常用语法格式有如下2种：

数组索引从零开始：数组中的第一个元素是 0，第二个元素是 1，依此类推。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>数组</title>
</head>
<body>

<script>
    //方式1：var 变量名 = new Array(元素列表);
    var arr = new Array(1,2,3,4); //1,2,3,4 是存储在数组中的数据（元素）
    // 输出数组
    console.log(arr)
    //方式2：var 变量名 = [ 元素列表 ];
    var arr2 = [1,2,3,4]; //1,2,3,4 是存储在数组中的数据（元素）
    console.log(arr2)
    // 数组中取值：和java一样，通过索引获取值，索引从0开始计数
    // arr[索引] = 值;
    var value=arr2[0];//value=1
    // 输出数组
    console.log(value)

</script>

</body>
</html>

注意：

  1. JavaScript中数组相当于java中的集合，数组的长度是可以变化的。
  2. JavaScript是弱数据类型的语言，所以数组中可以存储任意数据类型的值。

代码操作

定义和访问数组元素

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

// console.log(arr[10]);
// console.log(arr[9]); //定义了吗？
// console.log(arr[8]); //定义了吗？

arr[9] = "A";
arr[8] = true;

console.log(arr);


 





 
 


浏览器控制台输出结果如下：

1668590895662
1668590895662

2.2 JS基本对象之String

JS基本对象之String

JavaScript 字符串存储一系列字符，例如 "Hello YangeIt"。

字符串可以是双引号或单引号内的任何文本：

1.语法格式

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

// 方式1
var 变量名 = new String("…") ; 
//方式二：常用
var 变量名 = "…" ;

代码操作

按照上述的格式，在Idea或者VSCode中创建为名03. JS-对象-String.html的文件，编写代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS-对象-String</title>
</head>
<body>
    
</body>
<script>
    //创建字符串对象
    //var str = new String("Hello String");
    var str = "  Hello String    ";

    console.log(str);

    //length属性：可以用于返回字符串的长度
    console.log(str.length);

    //charAt()函数：用于返回在指定索引位置的字符，函数的参数就是索引
    console.log(str.charAt(4));

    //indexOf()函数用于检索指定内容在字符串中的索引位置的，返回值是索引，参数是指定的内容
    console.log(str.indexOf("lo"));

    //trim()函数用于去除字符串两边的空格的
    var s = str.trim();
    console.log(s.length);

    //
  //substring()函数用于截取字符串的，函数有2个参数。
  // 参数1：表示从那个索引位置开始截取。包含
  // 参数2：表示到那个索引位置结束。不包含
  // substring(start,end) --- 开始索引, 结束索引 (含头不含尾)
    console.log(s.substring(0,5));

</script>
</html>














 


 


 


 


 







 



浏览器执行效果如图所示：

1668595450181
1668595450181

总结

课堂作业

  1. 参考上述的api或者文档链接，完成字符串的练习🎤

2.3 JS基本对象之JSON

JS基本对象之JSON

自定义对象

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

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

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

对象名.属性名

通过如下语法调用函数：

对象名.方法名()

接下来，我们再VS Code中创建名为 09. JS-对象-JSON.html 的文件演示自定义对象

<script>
    //自定义对象
    var user = {
        name: "Tom",
        age: 10,
        gender: "男",
        sing: function(){
             console.log("悠悠的唱着最炫的民族风~");
         }
    }

    console.log(user.name);
    user.eat();
<script>

浏览器控制台结果如下：

image-20231119110652514
image-20231119110652514

其中，上述函数定义的语法可以简化成如下格式：

<script>
    //自定义对象
    var user = {
        name: "Tom",
        age: 10,
        gender: "男",
        sing(){
             console.log("悠悠的唱着最炫的民族风~");
         }
    }

    console.log(user.name);
    user.eat();
<script>






 
 
 





代码操作

代码如下： 👇

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>JS-对象-JSON</title>
</head>

<body>


    <script>
        //1. 自定义JS对象
        // var user = {
        //     name: "Tom",
        //     age: 10,
        //     gender: "男",
        //     sing: function(){
        //         console.log("悠悠的唱着最炫的民族风~");
        //     }
        // }

        // console.log(user.name);
        // user.sing();

        //2. JSON对象  开发中常常用来传递数据
        var userStr = '{"name":"Tom", "age":18, "addr":["北京","上海","西安"]}';
        // alert(userStr.name);

           // //json字符串--js对象
        var obj = JSON.parse(jsonstr);
        //alert(obj.name);

        // //js对象--json字符串
        alert(JSON.stringify(obj));
    </script>
</body>

</html>

课堂作业2

🚩 1. 数组

课堂作业3

🚩 1. 阅读下列图片，定义一个天气数组，里面装上每天的天气对象

2.4 JS对象之-BOM对象 🚀

BOM对象

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

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

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

重点学习：Window对象、Location对象 🎯

window对象官网介绍open in new window

常用函数：

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

可以点击每个函数的方法名，查看对应的案例 👍

案例：输出奇数和偶数

  setInterval(displayHello, 1000);
  var a=1;
  function displayHello() {
    a++;
    if(a%2==0){
      console.log(a+"是偶数");
    }else{
      console.log(a+"是奇数");
  }

运行效果：

image
image

2.5 Js对象之-DOM对象 🚀

DOM对象

DOM：Document Object Model 文档对象模型。也就是 JavaScript 将 HTML 文档的各个组成部分封装为对象。 如下图，左边是 HTML 文档内容，右边是 DOM 树

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

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

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

总而达到动态改变页面效果目的 🎯完成轮播图案例即可

我们先体验下下面程序带来的效果，等学完JS事件后，在做一个综合案例

// 将下列代码粘贴到浏览器中运行（先打开百度首页)
    setTimeout(function () {
document.querySelector(#"s_lg_img").src="http://i0.sinaimg.cn/lx/zc/p/2009/0107/U3394P8T1D822022F913DT20090107064253.jpg"
    },3000)

代码操作步骤：

image
image

思考:

  1. 如果要修改图片，是不是要找到对应的图片标签对象？
  2. 找到了标签对象，接下来修改什么？才能够把图片改掉？

如何获得元素对象的方法👇

在早期的JS中，我们也可以通过如下方法获取DOM元素了解一下 | 函数 | 描述 | | --------------------------------- | ---------------------------------------- | | document.getElementById() 用这个 | 根据id属性值获取，返回单个Element对象 |

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

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

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

鲁迅说的好，光说不练假把式，光练不说傻把式。所以接下来我们需要通过案例来加强对于上述DOM知识的掌握。需求如下2个：

需求：订单支付完成后，5秒之后跳转到系统首页（www.jd.comopen in new window）

效果如下所示：

未命名项目
未命名项目

分析

  • 要实现倒计时效果，那其实倒计时，就是每1秒钟，执行一次，把数字往下减1，直到数据减为0 。所以，这里我们需要用到一个定时器：setInterval(...)
  • 跳转网页，其实控制的地址栏的地址，那这里我们就需要通过 location 来设置地址栏的信息 。

​

实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .center {
            text-align: center;
            margin-top: 50px;
        }
    </style>
</head>

<body>
    <div class="center">
        您好, 支付完成, <span id="time">5</span> 秒之后将自动跳转至 <a href="https://www.jd.com">官网</a> 首页 ~
    </div>
	
    <script>
        //1. 获取时间对应的DOM元素
        let time = document.querySelector('#time');

        //2. 开启定时器, 每秒将时间往下减一 , 如果时间>0 , 更新DOM元素的内容 ; 如果时间 < 0 , 则跳转页面 ;
        count = time.innerHTML;
        let timer = setInterval(() => {
            count--;
            if (count > 0) {
                time.innerHTML = count;
            } else {
                clearInterval(timer);
                location.href = 'https://www.jd.com';
            }
        }, 1000);
    </script>
</body>
</html>

总结

课堂作业

  1. 获得DOM对象，能做什么？🎤
  2. 参考案例，完成5秒跳转到jd网站的案例

3. JS事件

3.1 JS事件入门

JS事件

如下图所示的百度注册页面，当我们用户输入完内容，百度可以自动的提示我们用户名已经存在还是可以使用。那么百度是怎么知道我们用户名输入完了呢？这就需要用到JavaScript中的事件了。

1668802830796
1668802830796

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

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

而我们可以给这些事件绑定函数，当事件触发时，可以自动的完成对应的功能。这就是事件监听。例如：对于我们所说的百度注册页面，我们给用户名输入框的失去焦点事件绑定函数，当我们用户输入完内容，在标签外点击了鼠标，对于用户名输入框来说，失去焦点，然后执行绑定的函数，函数进行用户名内容的校验等操作。JavaScript事件是js非常重要的一部分，接下来我们进行事件的学习。那么我们对于JavaScript事件需要学习哪些内容呢？我们得知道有哪些常用事件，然后我们得学会如何给事件绑定函数。

所以主要围绕2点来学习：

  • 事件监听
  • 常用事件

总结

课堂作业

  1. addEventListener 与 on事件 区别?🎤

3.2 常见事件

常见事件

上面案例中使用到了 onclick 事件属性，那都有哪些事件类型供我们使用呢？下面就给大家列举一些比较常用的事件属性:

image-20231119125817764
image-20231119125817764

代码操作

  1. 创一个 JS-事件-常见事件.html的文件，粘贴下述代码：
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>JS-事件-常见事件</title>
    <style>
        table {
            /* 设置表格的宽度 */
            width: 60%;
            /* 将表格边框合并，消除单元格之间的间距 */
            border-collapse: collapse;
            /* 将表格边框间的距离设置为0，确保没有任何间距 */
            border-spacing: 0;
            /* 文本居中对齐 */
            text-align: center;
            /* 版心居中展示 */
            margin: auto;
            /* 距离顶部的外边距 */
            margin-top: 20px;
            /* 行高 */
            line-height: 30px;
            /* 字体 */
            font-family: 'Courier New', 华文中宋, monospace;
        }

        table, tr, th, td {
            /* 设置表格的边框 */
            border: 1px solid black;
        }

        h1 {
            /* 文本居中对齐 */
            text-align: center;
        }
        img{
            margin: auto;
        }

        .footer_btn {
            /* 文本居中对齐 */
            text-align: center;
            margin-top: 10px;
        }
    </style>
</head>

<body>
<img src="http://i0.sinaimg.cn/lx/zc/p/2009/0107/U3394P8T1D822022F913DT20090107064253.jpg" id="image" width="20%">

<form action="" style="text-align: center;">
    <input type="text" name="age" id="age">
    <input id="b1" type="submit" value="提交">
    <input id="b2" type="button" value="单击事件">
</form>


<h1 id="title">用户信息表</h1>
<table>
    <tr>
        <th>编号</th>
        <th>姓名</th>
        <th>年龄</th>
        <th>性别</th>
        <th>爱好</th>
    </tr>
    <tr class="data">
        <td>1</td>
        <td>Tom</td>
        <td>18</td>
        <td>男</td>
        <td>Java , JS , HTML , Vue</td>
    </tr>
    <tr class="data">
        <td>2</td>
        <td>Cat</td>
        <td>12</td>
        <td>女</td>
        <td>Java , JS , HTML , Vue</td>
    </tr>
    <tr class="data">
        <td>3</td>
        <td>Lee</td>
        <td>21</td>
        <td>男</td>
        <td>Java , Vue</td>
    </tr>
    <tr class="data">
        <td>4</td>
        <td>Jerry</td>
        <td>19</td>
        <td>女</td>
        <td>JS , HTML , Vue</td>
    </tr>
    <tr class="data">
        <td>5</td>
        <td>Jack</td>
        <td>25</td>
        <td>男</td>
        <td>Java</td>
    </tr>
    <tr class="data">
        <td>6</td>
        <td>Jones</td>
        <td>22</td>
        <td>女</td>
        <td>HTML , Vue</td>
    </tr>
</table>

<script>
  //todo 书写js代码
 
</script>
</body>

</html>

总结

课堂作业

  1. 根据上述的事件特性，完成表格隔行变色！！🎤

3.3 表单校验

表单校验

1). 需求： 完成用户注册的表单校验操作，要求做到以下两点。

  1. 在表单项中输入完成，鼠标离开焦点时，进行表单项内容的校验，如果内容格式不正确，显示提示信息。

2). 分析：

  1. JS的事件监听：离焦事件 blur，
  2. DOM对象操作

代码操作

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>校验手机号</title>
    <style>
        label {
            display: inline-block;
            width: 80px;
            text-align: right;
            margin-right: 10px;
        }

        input {
            width: 250px;
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 5px;
            margin-bottom: 10px;
        }

        .btn {
            width: 150px;
        }

        .tip {
            color: #ff0000;
            font-size: 12px;
        }
    </style>
</head>

<body>
<div>
    <h1>用户注册</h1>
    <form>
        <label for="username">用户名：</label>
        <input type="text" id="username" name="username" placeholder="用户名不能为空且长度在4-16个字符">
        <span class="tip" id="name_msg"></span>
        <br>

        <label for="phone">手机号：</label>
        <input type="text" id="phone" name="phone" placeholder="手机号不能为空且长度为11位">
        <span class="tip" id="phone_msg"></span>
        <br>
    </form>
</div>


<script>

//todo 1. 定义一个方法 校验手机号  合法返回true 否则返回false

</script>
</body>

</html>

注意

注意：JavaScript中，可以通过事件对象event中的preventDefault() 方法来阻止事件的默认行为，比如阻止表单提交。

虽然表单校验功能，我们基于DOM操作已经完成了，成功的校验了用户名和密码的长度，长度不符合条件，直接提示错误信息，并不允许表单提交，看似非常完美。但是大家可以想一想，对于手机号，是只要11位就可以了吗？ 如果出现如下的手机号，是合法的手机号吗？

  • 12209120990
  • 11009120990
  • 1220912abcd

我们发现，上述的字符串，长度都是11位，但是却不是合法的手机号 。因为手机号，是需要符合特定规则的，比如全部都是数字，而且第一位，必须是1，第二位，可以是 3/4/5/6/7/8/9 ，然后后面是9位数字。

那我们应该如何来校验类似于手机号这种，特定规则的字符串呢？ 那此时呢，就需要通过正则表达式，来校验了，那接下来，我们就来学习正则表达式。

总结

课堂作业

  1. 上述关于手机号码只验证长度11，有问题吗？🎤

3.4 正则表达式

正则表达式

  • **介绍：**正则表达式（Regular Expression，也简称为正则），定义了字符串组成的规则。

  • **作用：**通常用来验证数据格式、查找替换文本 等。

  • 定义：

    • 正则表达式字面量 （注意不要加引号）
      const reg1 = /abc/;
    • 创建正则对象RegExp
      const reg2 = new RegExp('abc');

  • 方法：

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

  • 常见的正则表达式：https://blog.csdn.net/weixin_44865458/article/details/115604355open in new window

验证字母：/^[a-zA-Z]+$/
验证长度为3的字符：/^.{3}$/
验证由26个英文字母组成的字符串：/^[A-Za-z]+$/
验证日期YYYY-MM-DD：/^(\d{1,4})(-|\/)(\d{1,2})\2(\d{1,2})$/
验证邮编：/^\d{6}$/
验证日期格式YYYY-MM-DD hh:mm:ss：/^(\d{1,4})(-|\/)(\d{1,2})\2(\d{1,2}) (\d{1,2}):(\d{1,2}):(\d{1,2})$/
验证整数：/^[-+]?\d*$/
验证小数：/^[-\+]?\d+(\.\d+)?$/
验证中文：/^[\u0391-\uFFE5]+$/
验证邮箱：/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/
验证手机号：/^1[3456789]\d{9}$/
验证身份证：/^\d{6}(18|19|20)?\d{2}(0[1-9]|1[12])(0[1-9]|[12]\d|3[01])\d{3}(\d|X)$/

示例：

  <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>正则表达式</title>
</head>
<body>
<script>
    let str1 = '13510101111';
    let str2 = '12412328888';
    let str3 = '7869@qq.com';
    const reg1 = /^1[3456789]\d{9}$/;
    const reg2 = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
    const reg3 = /^[a-zA-Z]+$/;
    console.log(reg1.test(str1)); //true
    console.log(reg1.test(str2)); //false
    console.log(reg2.test(str3)); //true
    console.log(reg3.test(str1)); //false

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

修改上述手机验证代码操作

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>校验手机号</title>
    <style>
        label {
            display: inline-block;
            width: 80px;
            text-align: right;
            margin-right: 10px;
        }

        input {
            width: 250px;
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 5px;
            margin-bottom: 10px;
        }

        .btn {
            width: 150px;
        }

        .tip {
            color: #ff0000;
            font-size: 12px;
        }
    </style>
</head>

<body>
<div>
    <h1>用户注册</h1>
    <form>
        <label for="username">用户名：</label>
        <input type="text" id="username" name="username" placeholder="用户名不能为空且长度在4-16个字符">
        <span class="tip" id="name_msg"></span> <br>

        <label for="phone">手机号：</label>
        <input type="text" id="phone" name="phone" placeholder="手机号不能为空且长度为11位">
        <span class="tip" id="phone_msg"></span>
        <br>
    </form>
</div>


<script>

    //1. 校验手机号
    function checkPhone(){ //true, 合法; false, 不合法;
        //定义一个变量，记录校验结果
        let flag = true;
        //通过选择器，获取输入框中的值
        let phoneValue = document.querySelector('#phone').value;
        //定义一个变量，设置错误信息
        let errMsg = "";
        const reg1 = /^1[3456789]\d{9}$/;
        if(!reg1.test(phoneValue)){
            errMsg = "手机号不合法";
            flag = false;
        }
        // //通过选择器，获取错误信息显示 元素，给他设置错误信息
        document.querySelector('#phone_msg').innerHTML = errMsg;
        return flag;
    }
    //给手机号码输入框设置离焦事件
    document.querySelector('#phone').addEventListener('blur', checkPhone)
</script>
</body>

</html>



























































 
 













总结

课堂作业

  1. 正则表达式有什么作用？🎤
  2. 如果正则表达式不会写怎么办？🎤

4. JS模块化

JS模块化

所谓JS模块化，指的是JS提供的一种，将JavaScript程序拆分位若干个可按需导入的单独模块的机制。

比如，我们前面实现的表单校验的案例，我们是可以把JS代码单独的抽取到一个js文件中，然后在html中引入对应的js文件即可，这样做，便于管理、提升代码的复用性。具体如下：

image
image

代码操作

A. 定义一个js文件，命名位 check.js，将checkPhone()代码，粘贴到其中

//在鼠标离开焦点时, 校验输入框内容的长度 .
function checkPhone(){ //true, 合法; false, 不合法;
    let flag = true;
    let phoneValue = document.querySelector('#phone').value;
    let errMsg = "";
    if(!/^1[3-9]\d{9}$/.test(phoneValue)){
        errMsg = "手机号不合法";
        flag = false;
    }
    document.querySelector('#phone_msg').innerHTML = errMsg;
    return flag;
}
document.querySelector('#phone').addEventListener('blur', checkPhone)

B. 在html文件中，如果需要用到上述的JS代码，直接在 script 标签中引入该js即可。image

OK，那这是在html中，引入JS文件，可以直接使用 <script src=".."></script> 来引入。

那如果是在一个js文件中，我需要用到另外一个js文件中的方法呢。 那此时该如何实现呢 ？

总结

课堂作业

  1. js模块化有什么好处！🎤
焱哥的博客
Copyright © 2025 YangeIT