JavaScript

于 2023-12-10 17:10:53 发布
阅读量874 收藏 23
点赞数 17
文章标签： javascript microsoft 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_47698312/article/details/134766751
版权

1. JS介绍

知道HTML负责网页的结构，而CSS负责的是网页的表现。 而要想让网页具备一定的交互效果，具有一定的动作行为，还得通过JavaScript来实现。JavaScript这门语言会让页面能够和用户进行交互。

那什么是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>元素的底部，可改善显示速度

例子：

<span style="background-color:#f8f8f8"><span style="color:#333333"><span style="color:#117700"><</span><span style="color:#117700">body</span><span style="color:#117700">></span>
  <span style="color:#aa5500"><!-- 页面内容 --></span>
  
  <span style="color:#117700"><</span><span style="color:#117700">script</span><span style="color:#117700">></span>
    <span style="color:#000000">alert</span>(<span style="color:#aa1111">"Hello World"</span>);
  <span style="color:#117700"></</span><span style="color:#117700">script</span><span style="color:#117700">></span>
<span style="color:#117700"></</span><span style="color:#117700">body</span><span style="color:#117700">></span></span></span>

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

  • 外部JS文件中，只包含JS代码，不包含<script>标签

  • 引入外部js的<script>标签，必须是双标签

例子：

<span style="background-color:#f8f8f8"><span style="color:#333333"><span style="color:#117700"><</span><span style="color:#117700">script</span> <span style="color:#0000cc">src</span>=<span style="color:#aa1111">"js/demo.js"</span><span style="color:#117700">></</span><span style="color:#117700">script</span><span style="color:#117700">></span></span></span>

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

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

2.2 演示

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

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

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

<span style="background-color:#f8f8f8"><span style="color:#333333"><span style="color:#555555"><!DOCTYPE html></span>
<span style="color:#117700"><</span><span style="color:#117700">html</span> <span style="color:#0000cc">lang</span>=<span style="color:#aa1111">"en"</span><span style="color:#117700">></span>
<span style="color:#117700"><</span><span style="color:#117700">head</span><span style="color:#117700">></span>
    <span style="color:#117700"><</span><span style="color:#117700">meta</span> <span style="color:#0000cc">charset</span>=<span style="color:#aa1111">"UTF-8"</span><span style="color:#117700">></span>
    <span style="color:#117700"><</span><span style="color:#117700">meta</span> <span style="color:#0000cc">http-equiv</span>=<span style="color:#aa1111">"X-UA-Compatible"</span> <span style="color:#0000cc">content</span>=<span style="color:#aa1111">"IE=edge"</span><span style="color:#117700">></span>
    <span style="color:#117700"><</span><span style="color:#117700">meta</span> <span style="color:#0000cc">name</span>=<span style="color:#aa1111">"viewport"</span> <span style="color:#0000cc">content</span>=<span style="color:#aa1111">"width=device-width, initial-scale=1.0"</span><span style="color:#117700">></span>
    <span style="color:#117700"><</span><span style="color:#117700">title</span><span style="color:#117700">></span>JS-引入方式<span style="color:#117700"></</span><span style="color:#117700">title</span><span style="color:#117700">></span>
<span style="color:#117700"></</span><span style="color:#117700">head</span><span style="color:#117700">></span>
<span style="color:#117700"><</span><span style="color:#117700">body</span><span style="color:#117700">></span>
​
    <span style="color:#aa5500"><!-- 方式一: 内部脚本 --></span>
    <span style="color:#117700"><</span><span style="color:#117700">script</span><span style="color:#117700">></span>
        <span style="color:#000000">alert</span>(<span style="color:#aa1111">"Hello World"</span>);
    <span style="color:#117700"></</span><span style="color:#117700">script</span><span style="color:#117700">></span>
<span style="color:#117700"></</span><span style="color:#117700">body</span><span style="color:#117700">></span>
<span style="color:#117700"></</span><span style="color:#117700">html</span><span style="color:#117700">></span></span></span>

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

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

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

<span style="background-color:#f8f8f8"><span style="color:#333333"><span style="color:#000000">alert</span>(<span style="color:#aa1111">'Hello JavaScript'</span>);</span></span>

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

<span style="background-color:#f8f8f8"><span style="color:#333333"><span style="color:#555555"><!DOCTYPE html></span>
<span style="color:#117700"><</span><span style="color:#117700">html</span> <span style="color:#0000cc">lang</span>=<span style="color:#aa1111">"en"</span><span style="color:#117700">></span>
<span style="color:#117700"><</span><span style="color:#117700">head</span><span style="color:#117700">></span>
    <span style="color:#117700"><</span><span style="color:#117700">meta</span> <span style="color:#0000cc">charset</span>=<span style="color:#aa1111">"UTF-8"</span><span style="color:#117700">></span>
    <span style="color:#117700"><</span><span style="color:#117700">meta</span> <span style="color:#0000cc">http-equiv</span>=<span style="color:#aa1111">"X-UA-Compatible"</span> <span style="color:#0000cc">content</span>=<span style="color:#aa1111">"IE=edge"</span><span style="color:#117700">></span>
    <span style="color:#117700"><</span><span style="color:#117700">meta</span> <span style="color:#0000cc">name</span>=<span style="color:#aa1111">"viewport"</span> <span style="color:#0000cc">content</span>=<span style="color:#aa1111">"width=device-width, initial-scale=1.0"</span><span style="color:#117700">></span>
    <span style="color:#117700"><</span><span style="color:#117700">title</span><span style="color:#117700">></span>JS-引入方式<span style="color:#117700"></</span><span style="color:#117700">title</span><span style="color:#117700">></span>
<span style="color:#117700"></</span><span style="color:#117700">head</span><span style="color:#117700">></span>
<span style="color:#117700"><</span><span style="color:#117700">body</span><span style="color:#117700">></span>
​
    <span style="color:#aa5500"><!-- 方式一: 内部脚本 --></span>
    <span style="color:#aa5500"><!-- <script></span>
        <span style="color:#aa5500">alert("Hello World");</span>
    <span style="color:#aa5500"></script> --></span>
    <span style="color:#117700"><</span><span style="color:#117700">script</span> <span style="color:#0000cc">src</span>=<span style="color:#aa1111">"js/demo.js"</span><span style="color:#117700">></</span><span style="color:#117700">script</span><span style="color:#117700">></span>
<span style="color:#117700"></</span><span style="color:#117700">body</span><span style="color:#117700">></span>
<span style="color:#117700"></</span><span style="color:#117700">html</span><span style="color:#117700">></span></span></span>

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

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种输出语句的代码，并且添加注释，具体代码如下；

<span style="background-color:#f8f8f8"><span style="color:#333333"><span style="color:#555555"><!DOCTYPE html></span>
<span style="color:#117700"><</span><span style="color:#117700">html</span> <span style="color:#0000cc">lang</span>=<span style="color:#aa1111">"en"</span><span style="color:#117700">></span>
<span style="color:#117700"><</span><span style="color:#117700">head</span><span style="color:#117700">></span>
    <span style="color:#117700"><</span><span style="color:#117700">meta</span> <span style="color:#0000cc">charset</span>=<span style="color:#aa1111">"UTF-8"</span><span style="color:#117700">></span>
    <span style="color:#117700"><</span><span style="color:#117700">meta</span> <span style="color:#0000cc">http-equiv</span>=<span style="color:#aa1111">"X-UA-Compatible"</span> <span style="color:#0000cc">content</span>=<span style="color:#aa1111">"IE=edge"</span><span style="color:#117700">></span>
    <span style="color:#117700"><</span><span style="color:#117700">meta</span> <span style="color:#0000cc">name</span>=<span style="color:#aa1111">"viewport"</span> <span style="color:#0000cc">content</span>=<span style="color:#aa1111">"width=device-width, initial-scale=1.0"</span><span style="color:#117700">></span>
    <span style="color:#117700"><</span><span style="color:#117700">title</span><span style="color:#117700">></span>JS-基本语法-输出语句<span style="color:#117700"></</span><span style="color:#117700">title</span><span style="color:#117700">></span>
<span style="color:#117700"></</span><span style="color:#117700">head</span><span style="color:#117700">></span>
<span style="color:#117700"><</span><span style="color:#117700">body</span><span style="color:#117700">></span>
    
    <span style="color:#117700"><</span><span style="color:#117700">script</span><span style="color:#117700">></span>
        <span style="color:#aa5500">//方式一: 写入浏览器的body区域</span>
        <span style="color:#000000">document</span>.<span style="color:#000000">write</span>(<span style="color:#aa1111">"Hello JS (document.write)"</span>);
​
        <span style="color:#aa5500">//方式二: 弹出框</span>
        <span style="color:#000000">window</span>.<span style="color:#000000">alert</span>(<span style="color:#aa1111">"Hello JS (window.alert)"</span>);
​
        <span style="color:#aa5500">//方式三: 控制台</span>
        <span style="color:#000000">console</span>.<span style="color:#000000">log</span>(<span style="color:#aa1111">"Hello JS (console.log)"</span>)
    <span style="color:#117700"></</span><span style="color:#117700">script</span><span style="color:#117700">></span>
<span style="color:#117700"></</span><span style="color:#117700">body</span><span style="color:#117700">></span>
<span style="color:#117700"></</span><span style="color:#117700">html</span><span style="color:#117700">></span></span></span>

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

3.2 变量

3.2.1 let

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

  • JS中主要通过 let 关键字来声明变量的。

  • JS是一门弱类型语言，变量是可以存放不同类型的值的。

  • 变量名需要遵循如下规则：

    • 组成字符可以是任何字母、数字、下划线（_）或美元符号（$），且数字不能开头

    • 变量名严格区分大小写，如：name和Name是不同的变量

    • 不能使用关键字作为变量名，如：let、if、for等

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

<span style="background-color:#f8f8f8"><span style="color:#333333"><span style="color:#117700"><</span><span style="color:#117700">script</span><span style="color:#117700">></span>
    <span style="color:#aa5500">//变量</span>
    <span style="color:#770088">let</span> <span style="color:#0000ff">a</span> <span style="color:#981a1a">=</span> <span style="color:#116644">20</span>;
    <span style="color:#000000">a</span> <span style="color:#981a1a">=</span> <span style="color:#aa1111">"Hello"</span>;
    <span style="color:#000000">alert</span>(<span style="color:#000000">a</span>);
<span style="color:#117700"></</span><span style="color:#117700">script</span><span style="color:#117700">></span></span></span>

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

3.2.2 const

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

如下所示：

<span style="background-color:#f8f8f8"><span style="color:#333333"><span style="color:#117700"><</span><span style="color:#117700">body</span><span style="color:#117700">></span>
​
    <span style="color:#117700"><</span><span style="color:#117700">script</span><span style="color:#117700">></span>
        <span style="color:#aa5500">//常量</span>
        <span style="color:#770088">const</span> <span style="color:#0000ff">PI</span> <span style="color:#981a1a">=</span> <span style="color:#116644">3.14</span>;
        <span style="color:#000000">PI</span> <span style="color:#981a1a">=</span> <span style="color:#116644">3.15</span>;
        <span style="color:#000000">alert</span>(<span style="color:#000000">PI</span>);
    <span style="color:#117700"></</span><span style="color:#117700">script</span><span style="color:#117700">></span>
<span style="color:#117700"></</span><span style="color:#117700">body</span><span style="color:#117700">></span></span></span>

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

3.2.3 注意

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

<span style="background-color:#f8f8f8"><span style="color:#333333"><span style="color:#117700"><</span><span style="color:#117700">body</span><span style="color:#117700">></span>
​
    <span style="color:#117700"><</span><span style="color:#117700">script</span><span style="color:#117700">></span>
         <span style="color:#aa5500">//var声明变量</span>
        <span style="color:#770088">var</span> <span style="color:#0000ff">name</span> <span style="color:#981a1a">=</span> <span style="color:#aa1111">"A"</span>;
        <span style="color:#000000">name</span> <span style="color:#981a1a">=</span> <span style="color:#aa1111">"B"</span>;
        <span style="color:#000000">alert</span>(<span style="color:#000000">name</span>);
        
         <span style="color:#770088">var</span> <span style="color:#0000ff">name</span> <span style="color:#981a1a">=</span> <span style="color:#aa1111">"C"</span>
         <span style="color:#000000">alert</span>(<span style="color:#000000">name</span>);
    <span style="color:#117700"></</span><span style="color:#117700">script</span><span style="color:#117700">></span>
<span style="color:#117700"></</span><span style="color:#117700">body</span><span style="color:#117700">></span></span></span>

打开浏览器运行之后，大家会发现，可以正常执行，第一次弹出 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 的文件

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

<span style="background-color:#f8f8f8"><span style="color:#333333"><span style="color:#555555"><!DOCTYPE html></span>
<span style="color:#117700"><</span><span style="color:#117700">html</span> <span style="color:#0000cc">lang</span>=<span style="color:#aa1111">"en"</span><span style="color:#117700">></span>
<span style="color:#117700"><</span><span style="color:#117700">head</span><span style="color:#117700">></span>
    <span style="color:#117700"><</span><span style="color:#117700">meta</span> <span style="color:#0000cc">charset</span>=<span style="color:#aa1111">"UTF-8"</span><span style="color:#117700">></span>
    <span style="color:#117700"><</span><span style="color:#117700">meta</span> <span style="color:#0000cc">http-equiv</span>=<span style="color:#aa1111">"X-UA-Compatible"</span> <span style="color:#0000cc">content</span>=<span style="color:#aa1111">"IE=edge"</span><span style="color:#117700">></span>
    <span style="color:#117700"><</span><span style="color:#117700">meta</span> <span style="color:#0000cc">name</span>=<span style="color:#aa1111">"viewport"</span> <span style="color:#0000cc">content</span>=<span style="color:#aa1111">"width=device-width, initial-scale=1.0"</span><span style="color:#117700">></span>
    <span style="color:#117700"><</span><span style="color:#117700">title</span><span style="color:#117700">></span>JS-数据类型<span style="color:#117700"></</span><span style="color:#117700">title</span><span style="color:#117700">></span>
<span style="color:#117700"></</span><span style="color:#117700">head</span><span style="color:#117700">></span>
<span style="color:#117700"><</span><span style="color:#117700">body</span><span style="color:#117700">></span>
​
    <span style="color:#117700"><</span><span style="color:#117700">script</span><span style="color:#117700">></span>
        <span style="color:#aa5500">//原始数据类型</span>
        <span style="color:#000000">alert</span>(<span style="color:#770088">typeof</span> <span style="color:#116644">3</span>); <span style="color:#aa5500">//number</span>
        <span style="color:#000000">alert</span>(<span style="color:#770088">typeof</span> <span style="color:#116644">3.14</span>); <span style="color:#aa5500">//number</span>
​
        <span style="color:#000000">alert</span>(<span style="color:#770088">typeof</span> <span style="color:#aa1111">"A"</span>); <span style="color:#aa5500">//string</span>
        <span style="color:#000000">alert</span>(<span style="color:#770088">typeof</span> <span style="color:#aa1111">'Hello'</span>);<span style="color:#aa5500">//string</span>
​
        <span style="color:#000000">alert</span>(<span style="color:#770088">typeof</span> <span style="color:#221199">true</span>); <span style="color:#aa5500">//boolean</span>
        <span style="color:#000000">alert</span>(<span style="color:#770088">typeof</span> <span style="color:#221199">false</span>);<span style="color:#aa5500">//boolean</span>
​
        <span style="color:#000000">alert</span>(<span style="color:#770088">typeof</span> <span style="color:#221199">null</span>); <span style="color:#aa5500">//object </span>
​
        <span style="color:#770088">var</span> <span style="color:#0000ff">a</span> ;
        <span style="color:#000000">alert</span>(<span style="color:#770088">typeof</span> <span style="color:#000000">a</span>); <span style="color:#aa5500">//undefined</span>
​
    <span style="color:#117700"></</span><span style="color:#117700">script</span><span style="color:#117700">></span>
<span style="color:#117700"></</span><span style="color:#117700">body</span><span style="color:#117700">></span>
<span style="color:#117700"></</span><span style="color:#117700">html</span><span style="color:#117700">></span></span></span>

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

  • 模板字符串的使用场景：拼接字符串和变量。

  • 模板字符串的语法：

    • `...` ：反引号 （英文输入模式下键盘 tab 键上方波浪线 ~ 那个键）

    • 内容拼接时，使用 ${ } 来引用变量

具体示例如下：

<span style="background-color:#f8f8f8"><span style="color:#333333">  <span style="color:#117700"><</span><span style="color:#117700">script</span><span style="color:#117700">></span>
    <span style="color:#770088">let</span> <span style="color:#0000ff">name</span> <span style="color:#981a1a">=</span> <span style="color:#aa1111">'Tom'</span>;
    <span style="color:#770088">let</span> <span style="color:#0000ff">age</span> <span style="color:#981a1a">=</span> <span style="color:#116644">18</span>;
    <span style="color:#000000">console</span>.<span style="color:#000000">log</span>(<span style="color:#aa1111">'大家好, 我是新入职的'</span> <span style="color:#981a1a">+</span> <span style="color:#000000">name</span> <span style="color:#981a1a">+</span> <span style="color:#aa1111">', 今年'</span> <span style="color:#981a1a">+</span> <span style="color:#000000">age</span> <span style="color:#981a1a">+</span> <span style="color:#aa1111">'岁了, 请多多关照'</span>); <span style="color:#aa5500">//原始方式 , 手动拼接字符串</span>
    <span style="color:#000000">console</span>.<span style="color:#000000">log</span>(<span style="color:#ff5500">`大家好, 我是新入职的${</span><span style="color:#000000">name</span><span style="color:#ff5500">}, 今年${</span><span style="color:#000000">age</span><span style="color:#ff5500">}岁了, 请多多关照`</span>); <span style="color:#aa5500">//使用模板字符串方式拼接字符串</span>
  <span style="color:#117700"></</span><span style="color:#117700">script</span><span style="color:#117700">></span></span></span>

3.4 运算符

3.4.1 运算符

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

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

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

  • = 是赋值操作

  • == 会在比较时，判断左右两边的值是否相等 （会自动进行类型转换）

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

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

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

第二步：编写代码

<span style="background-color:#f8f8f8"><span style="color:#333333"><span style="color:#555555"><!DOCTYPE html></span>
<span style="color:#117700"><</span><span style="color:#117700">html</span> <span style="color:#0000cc">lang</span>=<span style="color:#aa1111">"en"</span><span style="color:#117700">></span>
<span style="color:#117700"><</span><span style="color:#117700">head</span><span style="color:#117700">></span>
    <span style="color:#117700"><</span><span style="color:#117700">meta</span> <span style="color:#0000cc">charset</span>=<span style="color:#aa1111">"UTF-8"</span><span style="color:#117700">></span>
    <span style="color:#117700"><</span><span style="color:#117700">meta</span> <span style="color:#0000cc">http-equiv</span>=<span style="color:#aa1111">"X-UA-Compatible"</span> <span style="color:#0000cc">content</span>=<span style="color:#aa1111">"IE=edge"</span><span style="color:#117700">></span>
    <span style="color:#117700"><</span><span style="color:#117700">meta</span> <span style="color:#0000cc">name</span>=<span style="color:#aa1111">"viewport"</span> <span style="color:#0000cc">content</span>=<span style="color:#aa1111">"width=device-width, initial-scale=1.0"</span><span style="color:#117700">></span>
    <span style="color:#117700"><</span><span style="color:#117700">title</span><span style="color:#117700">></span>JS-运算符<span style="color:#117700"></</span><span style="color:#117700">title</span><span style="color:#117700">></span>
<span style="color:#117700"></</span><span style="color:#117700">head</span><span style="color:#117700">></span>
<span style="color:#117700"><</span><span style="color:#117700">body</span><span style="color:#117700">></span> 
​
    <span style="color:#117700"><</span><span style="color:#117700">script</span><span style="color:#117700">></span>
         <span style="color:#770088">var</span> <span style="color:#0000ff">age</span> <span style="color:#981a1a">=</span> <span style="color:#116644">20</span>;
         <span style="color:#770088">var</span> <span style="color:#0000ff">_age</span> <span style="color:#981a1a">=</span> <span style="color:#aa1111">"20"</span>;
         <span style="color:#770088">var</span> <span style="color:#0000ff">$age</span> <span style="color:#981a1a">=</span> <span style="color:#116644">20</span>;
​
         <span style="color:#000000">alert</span>(<span style="color:#000000">age</span> <span style="color:#981a1a">==</span> <span style="color:#000000">_age</span>); <span style="color:#aa5500">//true ，只比较值</span>
         <span style="color:#000000">alert</span>(<span style="color:#000000">age</span> <span style="color:#981a1a">===</span> <span style="color:#000000">_age</span>); <span style="color:#aa5500">//false ，类型不一样</span>
         <span style="color:#000000">alert</span>(<span style="color:#000000">age</span> <span style="color:#981a1a">===</span> <span style="color:#000000">$age</span>); <span style="color:#aa5500">//true ，类型一样，值一样</span>
    <span style="color:#117700"></</span><span style="color:#117700">script</span><span style="color:#117700">></span>
<span style="color:#117700"></</span><span style="color:#117700">body</span><span style="color:#117700">></span>
<span style="color:#117700"></</span><span style="color:#117700">html</span><span style="color:#117700">></span></span></span>

3.4.2 类型转换

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

  • 字符串 <-> 数字：

    • +号两边只要有一个是字符串，都会把另外一个转成字符串。

    • 除了+外的算术运算符，比如：- * / 都会把字符串转为数字类型。

    • 通过parseInt(...)函数，可以将一个字符串转为数字。

  • 其他类型 -> 布尔类型：

    • Number：0 和 NaN为false，其他均转为true。

    • String：空字符串为false，其他均转为true。

    • Null 和 undefined ：均转为false。

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

<span style="background-color:#f8f8f8"><span style="color:#333333"><span style="color:#aa5500">//类型转换 - 字符串 <-> 数字</span>
<span style="color:#000000">alert</span>(<span style="color:#770088">typeof</span> (<span style="color:#aa1111">'10'</span> <span style="color:#981a1a">-</span> <span style="color:#116644">1</span>)); <span style="color:#aa5500">//number</span>
<span style="color:#000000">alert</span>(<span style="color:#770088">typeof</span> (<span style="color:#aa1111">'10'</span> <span style="color:#981a1a">+</span> <span style="color:#116644">1</span>)); <span style="color:#aa5500">//string</span>
​
<span style="color:#000000">alert</span>(<span style="color:#000000">parseInt</span>(<span style="color:#aa1111">"12"</span>)); <span style="color:#aa5500">//12</span>
<span style="color:#000000">alert</span>(<span style="color:#000000">parseInt</span>(<span style="color:#aa1111">"12A45"</span>)); <span style="color:#aa5500">//12</span>
<span style="color:#000000">alert</span>(<span style="color:#000000">parseInt</span>(<span style="color:#aa1111">"A45"</span>));<span style="color:#aa5500">//NaN (not a number)</span></span></span>

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

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

<span style="background-color:#f8f8f8"><span style="color:#333333"><span style="color:#aa5500">// 类型转换 - 其他类型转为boolean</span>
<span style="color:#770088">if</span>(<span style="color:#116644">0</span>){<span style="color:#aa5500">//false</span>
    <span style="color:#000000">alert</span>(<span style="color:#aa1111">"0 转换为false"</span>);
}
<span style="color:#770088">if</span>(<span style="color:#221199">NaN</span>){<span style="color:#aa5500">//false</span>
    <span style="color:#000000">alert</span>(<span style="color:#aa1111">"NaN 转换为false"</span>);
}
<span style="color:#770088">if</span>(<span style="color:#116644">1</span>){<span style="color:#aa5500">//true</span>
    <span style="color:#000000">alert</span>(<span style="color:#aa1111">"除0和NaN其他数字都转为 true"</span>);
}
​
<span style="color:#770088">if</span>(<span style="color:#aa1111">""</span>){<span style="color:#aa5500">//false</span>
    <span style="color:#000000">alert</span>(<span style="color:#aa1111">"空字符串为 false, 其他都是true"</span>);
}
​
<span style="color:#770088">if</span>(<span style="color:#aa1111">" "</span>){<span style="color:#aa5500">//true</span>
    <span style="color:#000000">alert</span>(<span style="color:#aa1111">"空格字符串为 true"</span>);
}
​
<span style="color:#770088">if</span>(<span style="color:#221199">null</span>){<span style="color:#aa5500">//false</span>
    <span style="color:#000000">alert</span>(<span style="color:#aa1111">"null 转化为false"</span>);
}
<span style="color:#770088">if</span>(<span style="color:#221199">undefined</span>){<span style="color:#aa5500">//false</span>
    <span style="color:#000000">alert</span>(<span style="color:#aa1111">"undefined 转化为false"</span>);
}</span></span>

需要注意的是：在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 格式一

第一种定义格式如下：

<span style="background-color:#f8f8f8"><span style="color:#333333"><span style="color:#770088">function</span> <span style="color:#0000ff">函数名</span>(<span style="color:#0000ff">参数1</span>,<span style="color:#0000ff">参数2</span>..){
    <span style="color:#000000">要执行的代码</span>
}</span></span>

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

  • 形参不需要声明类型，并且JS中不管什么类型都是let去声明，加上也没有意义。

  • 返回值也不需要声明类型，直接return即可

示例：

<span style="background-color:#f8f8f8"><span style="color:#333333"><span style="color:#770088">function</span> <span style="color:#0000ff">add</span>(<span style="color:#0000ff">a</span>, <span style="color:#0000ff">b</span>){
    <span style="color:#770088">return</span> <span style="color:#0055aa">a</span> <span style="color:#981a1a">+</span> <span style="color:#0055aa">b</span>;
}</span></span>

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

<span style="background-color:#f8f8f8"><span style="color:#333333"><span style="color:#770088">let</span> <span style="color:#0000ff">result</span> <span style="color:#981a1a">=</span> <span style="color:#000000">add</span>(<span style="color:#116644">10</span>,<span style="color:#116644">20</span>);
<span style="color:#000000">alert</span>(<span style="color:#000000">result</span>);</span></span>

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

<span style="background-color:#f8f8f8"><span style="color:#333333"><span style="color:#770088">var</span> <span style="color:#0000ff">result</span> <span style="color:#981a1a">=</span> <span style="color:#000000">add</span>(<span style="color:#116644">10</span>,<span style="color:#116644">20</span>,<span style="color:#116644">30</span>,<span style="color:#116644">40</span>);
<span style="color:#000000">alert</span>(<span style="color:#000000">result</span>);</span></span>

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

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

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

4.2 格式二

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

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

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

示例一（函数表达式）：

<span style="background-color:#f8f8f8"><span style="color:#333333"><span style="color:#770088">var</span> <span style="color:#0000ff">add</span> <span style="color:#981a1a">=</span> <span style="color:#770088">function</span> (<span style="color:#0000ff">a</span>,<span style="color:#0000ff">b</span>){
    <span style="color:#770088">return</span> <span style="color:#0055aa">a</span> <span style="color:#981a1a">+</span> <span style="color:#0055aa">b</span>;
}</span></span>

示例二（箭头函数）：

<span style="background-color:#f8f8f8"><span style="color:#333333"><span style="color:#770088">var</span> <span style="color:#0000ff">add</span> <span style="color:#981a1a">=</span> (<span style="color:#0000ff">a</span>,<span style="color:#0000ff">b</span>) <span style="color:#981a1a">=></span> {
    <span style="color:#770088">return</span> <span style="color:#0055aa">a</span> <span style="color:#981a1a">+</span> <span style="color:#0055aa">b</span>;
}</span></span>

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

<span style="background-color:#f8f8f8"><span style="color:#333333"><span style="color:#770088">let</span> <span style="color:#0000ff">result</span> <span style="color:#981a1a">=</span> <span style="color:#000000">add</span>(<span style="color:#116644">10</span>,<span style="color:#116644">20</span>);
<span style="color:#000000">alert</span>(<span style="color:#000000">result</span>);</span></span>

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

<span style="background-color:#f8f8f8"><span style="color:#333333">(<span style="color:#770088">function</span> (<span style="color:#0000ff">a</span>,<span style="color:#0000ff">b</span>) {<span style="color:#000000">console</span>.<span style="color:#000000">log</span>(<span style="color:#0055aa">a</span> <span style="color:#981a1a">+</span> <span style="color:#0055aa">b</span>);})(<span style="color:#116644">10</span>,<span style="color:#116644">20</span>);
​
((<span style="color:#0000ff">a</span>,<span style="color:#0000ff">b</span>) <span style="color:#981a1a">=></span> {<span style="color:#000000">console</span>.<span style="color:#000000">log</span>(<span style="color:#0055aa">a</span> <span style="color:#981a1a">+</span> <span style="color:#0055aa">b</span>);})(<span style="color:#116644">100</span>,<span style="color:#116644">200</span>);</span></span>

5. JS对象

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

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

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

可以大体分页3大类：

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

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

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

我们先来学习基本对象种的Array对象

5.1 基本对象

5.1.1 Array对象

5.1.1.1 语法格式

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

方式1：

<span style="background-color:#f8f8f8"><span style="color:#333333"><span style="color:#770088">var</span> <span style="color:#0000ff">变量名</span> <span style="color:#981a1a">=</span> <span style="color:#770088">new</span> <span style="color:#000000">Array</span>(<span style="color:#000000">元素列表</span>); </span></span>

例如：

<span style="background-color:#f8f8f8"><span style="color:#333333"><span style="color:#770088">var</span> <span style="color:#0000ff">arr</span> <span style="color:#981a1a">=</span> <span style="color:#770088">new</span> <span style="color:#000000">Array</span>(<span style="color:#116644">1</span>,<span style="color:#116644">2</span>,<span style="color:#116644">3</span>,<span style="color:#116644">4</span>); <span style="color:#aa5500">//1,2,3,4 是存储在数组中的数据（元素）</span></span></span>

方式2：

<span style="background-color:#f8f8f8"><span style="color:#333333"><span style="color:#770088">var</span> <span style="color:#0000ff">变量名</span> <span style="color:#981a1a">=</span> [ <span style="color:#000000">元素列表</span> ]; </span></span>

例如：

<span style="background-color:#f8f8f8"><span style="color:#333333"><span style="color:#770088">var</span> <span style="color:#0000ff">arr</span> <span style="color:#981a1a">=</span> [<span style="color:#116644">1</span>,<span style="color:#116644">2</span>,<span style="color:#116644">3</span>,<span style="color:#116644">4</span>]; <span style="color:#aa5500">//1,2,3,4 是存储在数组中的数据（元素）</span></span></span>

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

<span style="background-color:#f8f8f8"><span style="color:#333333"><span style="color:#000000">arr</span>[<span style="color:#000000">索引</span>] <span style="color:#981a1a">=</span> <span style="color:#000000">值</span>;</span></span>

接下来，在VS Code中创建名为 07. JS-对象-Array.html 的文件，按照上述的语法定义数组，并且通过索引来获取数组中的值。

<span style="background-color:#f8f8f8"><span style="color:#333333"><span style="color:#117700"><</span><span style="color:#117700">script</span><span style="color:#117700">></span>
     <span style="color:#aa5500">//定义数组</span>
     <span style="color:#aa5500">//let arr = new Array(1,2,3,4);</span>
     <span style="color:#770088">let</span> <span style="color:#0000ff">arr</span> <span style="color:#981a1a">=</span> [<span style="color:#116644">1</span>,<span style="color:#116644">2</span>,<span style="color:#116644">3</span>,<span style="color:#116644">4</span>];
    
    <span style="color:#aa5500">//获取数组中的值，索引从0开始计数</span>
     <span style="color:#000000">console</span>.<span style="color:#000000">log</span>(<span style="color:#000000">arr</span>[<span style="color:#116644">0</span>]);
     <span style="color:#000000">console</span>.<span style="color:#000000">log</span>(<span style="color:#000000">arr</span>[<span style="color:#116644">1</span>]);
<span style="color:#117700"></</span><span style="color:#117700">script</span><span style="color:#117700">></span></span></span>

浏览器控制台观察的效果如下：输出1和2

5.1.1.2 特点

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

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

<span style="background-color:#f8f8f8"><span style="color:#333333"><span style="color:#aa5500">//特点: 长度可变 类型可变</span>
<span style="color:#770088">let</span> <span style="color:#0000ff">arr</span> <span style="color:#981a1a">=</span> [<span style="color:#116644">1</span>,<span style="color:#116644">2</span>,<span style="color:#116644">3</span>,<span style="color:#116644">4</span>];
<span style="color:#000000">arr</span>[<span style="color:#116644">10</span>] <span style="color:#981a1a">=</span> <span style="color:#116644">50</span>;
​
<span style="color:#000000">console</span>.<span style="color:#000000">log</span>(<span style="color:#000000">arr</span>[<span style="color:#116644">10</span>]);
<span style="color:#000000">console</span>.<span style="color:#000000">log</span>(<span style="color:#000000">arr</span>[<span style="color:#116644">9</span>]);
<span style="color:#000000">console</span>.<span style="color:#000000">log</span>(<span style="color:#000000">arr</span>[<span style="color:#116644">8</span>]);</span></span>

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

因为索引8和9的位置没有值，所以输出内容undefined。 当然，也可以给数组添加其他类型的值，添加代码如下：注释掉之前控制台输出的代码

<span style="background-color:#f8f8f8"><span style="color:#333333"><span style="color:#aa5500">//特点: 长度可变 类型可变</span>
<span style="color:#770088">let</span> <span style="color:#0000ff">arr</span> <span style="color:#981a1a">=</span> [<span style="color:#116644">1</span>,<span style="color:#116644">2</span>,<span style="color:#116644">3</span>,<span style="color:#116644">4</span>];
<span style="color:#000000">arr</span>[<span style="color:#116644">10</span>] <span style="color:#981a1a">=</span> <span style="color:#116644">50</span>;
​
<span style="color:#aa5500">// console.log(arr[10]);</span>
<span style="color:#aa5500">// console.log(arr[9]);</span>
<span style="color:#aa5500">// console.log(arr[8]);</span>
​
<span style="color:#000000">arr</span>[<span style="color:#116644">9</span>] <span style="color:#981a1a">=</span> <span style="color:#aa1111">"A"</span>;
<span style="color:#000000">arr</span>[<span style="color:#116644">8</span>] <span style="color:#981a1a">=</span> <span style="color:#221199">true</span>;
​
<span style="color:#000000">console</span>.<span style="color:#000000">log</span>(<span style="color:#000000">arr</span>);</span></span>

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

5.1.1.3 属性和方法

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

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

  • 属性：

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

  • 方法：

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

  • length属性：

    length属性可以用来获取数组的长度，所以我们可以借助这个属性，来遍历数组中的元素，添加如下代码：

    <span style="background-color:#f8f8f8"><span style="color:#770088">let</span> <span style="color:#0000ff">arr</span> <span style="color:#981a1a">=</span> [<span style="color:#116644">1</span>,<span style="color:#116644">2</span>,<span style="color:#116644">3</span>,<span style="color:#116644">4</span>];
<span style="color:#000000">arr</span>[<span style="color:#116644">10</span>] <span style="color:#981a1a">=</span> <span style="color:#116644">50</span>;
<span style="color:#770088">for</span> (<span style="color:#770088">let</span> <span style="color:#0000ff">i</span> <span style="color:#981a1a">=</span> <span style="color:#116644">0</span>; <span style="color:#0055aa">i</span> <span style="color:#981a1a"><</span> <span style="color:#000000">arr</span>.<span style="color:#000000">length</span>; <span style="color:#0055aa">i</span><span style="color:#981a1a">++</span>) {
    <span style="color:#000000">console</span>.<span style="color:#000000">log</span>(<span style="color:#000000">arr</span>[<span style="color:#0055aa">i</span>]);
}</span>

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

  • forEach()方法

    首先学习forEach()方法，顾名思义，这是用来遍历的，那么遍历做什么事呢？所以这个方法的参数，需要传递一个函数，而且这个函数接受一个参数，就是遍历时数组的值。修改之前的遍历代码如下：

    <span style="background-color:#f8f8f8">//e是形参，接受的是数组遍历时的值
arr.forEach(function(e){
     console.log(e);
})</span>

    当然了，在ES6中，引入箭头函数的写法，语法类似java中lambda表达式，修改上述代码如下：

    <span style="background-color:#f8f8f8">arr.forEach((e) => {
     console.log(e);
}) </span>

<span style="background-color:#f8f8f8"><span style="color:#333333">	浏览器输出结果如下：注意的是，没有元素的内容是不会输出的，因为forEach只会遍历有值的元素 </span></span>

  • map() 方法

    该方法是用于遍历数组中的元素，调用传入的函数对元素进行处理，并将结果封装到一个新数组中。 如下所示：

    <span style="background-color:#f8f8f8">//map: 对arr中的每一个元素进行处理, 在原来的基础上加10, 并将其封装到一个新的数组 arr2 中.
let arr2 = arr.map((e) => e = e+10);
console.log(arr2);</span>

    该方法演示完毕后，将其注释。

  • push()方法

    push()方法是用于向数组的末尾添加元素的，其中函数的参数就是需要添加的元素。编写如下代码：向数组的末尾添加3个元素

    <span style="background-color:#f8f8f8">//push: 添加元素到数组末尾
arr.push(7,8,9);
console.log(arr);</span>

    浏览器输出结果如下：

  • pop()方法

    pop()方法是用来移除数组中的最后一个元素，并返回该元素。编写如下代码：

    <span style="background-color:#f8f8f8">//pop: 移除最后一个元素
arr.pop();
console.log(arr);</span>

    浏览器输出结果如下：

  • unshift() 方法

    该方法是用于在数组的开头添加元素(一个或多个)，并返回新的数组的长度。示例如下：

    <span style="background-color:#f8f8f8">//unshift: 往数组的头部添加元素 A
arr.unshift('A', 'B');
console.log(arr);</span>

    浏览器输出结果如下：

  • shift() 方法

    该方法用来在数组的头部移除第一个元素，并返回该元素。示例如下：

    <span style="background-color:#f8f8f8">arr.shift();
console.log(arr);</span>

    浏览器输出结果如下：

  • splice()方法

    splice()方法用来数组中的元素，函数中填入2个参数。

    参数1：表示从哪个索引位置删除

    参数2：表示删除元素的个数

    如下代码表示：从索引2的位置开始删，删除2个元素

    <span style="background-color:#f8f8f8">//splice: 删除元素
arr.splice(2,2);
console.log(arr);</span>

    浏览器执行效果如下：元素3和4被删除了，元素3是索引2

Array数组的完整代码如下：

<span style="background-color:#f8f8f8"><span style="color:#333333"><!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-对象-Array</title>
</head>

<body>
    <script>
        //1. 定义数组
        //let arr = new Array(1,2,3,4);
        // let arr = [1,2,3,4];
        
        //获取数组中的值，索引从0开始计数
        // console.log(arr[0]);
        // console.log(arr[1]);

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

        // console.log(arr);

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

        //2. 数组属性 - length
        let arr = [1,2,3,4];
        arr[10] = 50;
        // for (let i = 0; i < arr.length; i++) {
        //     console.log(arr[i]);
        // }

        //3. 数组方法 - forEach , map, push , pop , unshift , shift , splice
        // arr.forEach(function(e){
        //     console.log(e);
        // })

        // let arr2 = arr.map((e) => e = e+10);
        // console.log(arr2);

        // arr.push(7,8,9);
        // console.log(arr);

        // arr.pop();
        // console.log(arr);

        // arr.unshift('A', 'B');
        // console.log(arr);

        // arr.shift();
        // console.log(arr);

        //splice: 删除元素
        arr.splice(2,2);
        console.log(arr);

    </script>
</body>

</html></span></span>

5.1.2 String对象

5.1.2.1 语法格式

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

方式1：

<span style="background-color:#f8f8f8"><span style="color:#333333">var 变量名 = new String("…") ; //方式一</span></span>

例如：

<span style="background-color:#f8f8f8"><span style="color:#333333">var str = new String("Hello String");</span></span>

方式2：

<span style="background-color:#f8f8f8"><span style="color:#333333">var 变量名 = '…' ; //方式二</span></span>

例如：

<span style="background-color:#f8f8f8"><span style="color:#333333">var str = 'Hello String';</span></span>

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

<span style="background-color:#f8f8f8"><span style="color:#333333"><script>
    //创建字符串对象
    //var str = new String("Hello String");
    var str = '  Hello String    ';

    console.log(str);
</script></span></span>

5.1.2.2 属性和方法

String对象也提供了一些常用的属性和方法，如下表格所示：

属性：

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

方法：

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

  • length属性：

    length属性可以用于返回字符串的长度，添加如下代码：

    <span style="background-color:#f8f8f8">//length
console.log(str.length);</span>

  • charAt()函数：

    charAt()函数用于返回在指定索引位置的字符，函数的参数就是索引。添加如下代码：

    <span style="background-color:#f8f8f8">console.log(str.charAt(4));</span>

  • indexOf()函数

    indexOf()函数用于检索指定内容在字符串中的索引位置的，返回值是索引，参数是指定的内容。添加如下代码：

    <span style="background-color:#f8f8f8">console.log(str.indexOf("lo"));</span>

  • trim()函数

    trim()函数用于去除字符串两边的空格的。添加如下代码：

    <span style="background-color:#f8f8f8">var s = str.trim();
console.log(s.length);</span>

  • substring()函数

    substring()函数用于截取字符串的，函数有2个参数。

    参数1：表示从那个索引位置开始截取。包含

    参数2：表示到那个索引位置结束。不包含

    <span style="background-color:#f8f8f8">console.log(s.substring(0,5));</span>

整体代码如下：

<span style="background-color:#f8f8f8"><span style="color:#333333"><!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-对象-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(start,end) --- 开始索引, 结束索引 (含头不含尾)
    console.log(s.substring(0,5));

</script>
</html></span></span>

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

5.1.3 JSON对象

5.1.3.1 自定义对象

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

<span style="background-color:#f8f8f8"><span style="color:#333333">var 对象名 = {
    属性名1: 属性值1, 
    属性名2: 属性值2,
    属性名3: 属性值3,
    方法名称: function(形参列表){}
};
</span></span>

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

<span style="background-color:#f8f8f8"><span style="color:#333333">对象名.属性名</span></span>

通过如下语法调用函数：

<span style="background-color:#f8f8f8"><span style="color:#333333">对象名.方法名()</span></span>

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

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

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

浏览器控制台结果如下：

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

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

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

5.1.3.2 JSON
5.1.3.2.1 介绍

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

<span style="background-color:#f8f8f8"><span style="color:#333333">{
    "key":value,
    "key":value,
    "key":value
}</span></span>

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

例如可以直接百度搜索“json在线解析”，随便挑一个进入，然后编写内容如下：

<span style="background-color:#f8f8f8"><span style="color:#333333">{
	"name": "李传播"
}</span></span>

但是将双引号切换成单引号，再次校验，则报错，如下图所示：

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

5.1.3.2.2 定义

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

<span style="background-color:#f8f8f8"><span style="color:#333333">var userStr = '{"name":"Tom", "age":18, "addr":["北京","上海","西安"]}';
alert(userStr.name);</span></span>

浏览器输出结果如下：

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

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

<span style="background-color:#f8f8f8"><span style="color:#333333">var obj = JSON.parse(userStr);
alert(obj.name);</span></span>

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

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

<span style="background-color:#f8f8f8"><span style="color:#333333">alert(JSON.stringify(obj));</span></span>

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

整体全部代码如下：

<span style="background-color:#f8f8f8"><span style="color:#333333"><!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-对象-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);

        var obj = JSON.parse(userStr);
        alert(obj.name);
        
        alert(JSON.stringify(obj));
    </script>
</body>

</html></span></span>

5.2 BOM对象

接下来学习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历史记录对象
Locationd地址栏对象

上述5个对象与浏览器各组成对应的关系如下图所示：

对于上述5个对象，重点学习的是Window对象、Location对象这2个。

1.5.2.1 Window对象

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

<span style="background-color:#f8f8f8"><span style="color:#333333">window.alert('hello');</span></span>

其可以省略window. 所以可以简写成：

<span style="background-color:#f8f8f8"><span style="color:#333333">alert('hello')</span></span>

所以对于window对象的属性和方法，都是采用简写的方式。window提供了很多属性和方法，下表列出了常用属性和方法。

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

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

要使用location对象，只需要通过代码window.location或者简写location即可使用。

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

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

接下来，通过VS Code中创建名为 10. JS-对象-BOM.html 文件来编写代码来演示上述函数：

  • alert()函数：弹出警告框，函数的内容就是警告框的内容

    <span style="background-color:#f8f8f8"><script>
    //window对象是全局对象，window对象的属性和方法在调用时可以省略window.
    window.alert("Hello BOM");
    alert("Hello BOM Window");
</script> </span>

  • confirm()函数：弹出确认框，并且提供用户2个按钮，分别是确认和取消。

    添加如下代码：

    <span style="background-color:#f8f8f8">confirm("您确认删除该记录吗?");</span>

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


    但是我们怎么知道用户点击了确认还是取消呢？所以这个函数有一个返回值，当用户点击确认时，返回true，点击取消时，返回false。我们根据返回值来决定是否执行后续操作。修改代码如下：再次运行，可以查看返回值true或者false

  • <span style="background-color:#f8f8f8">var flag = confirm("您确认删除该记录吗?");
alert(flag);</span>

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

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

    毫秒值：间隔时间

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

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

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

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

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

    <span style="background-color:#f8f8f8">//定时器 - setTimeout -- 延迟指定时间执行一次 
setTimeout(function(){
	alert("JS");
},3000);</span>

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

1.5.2.2 Location对象

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

<span style="background-color:#f8f8f8"><span style="color:#333333">//获取浏览器地址栏信息
alert(location.href);
//设置浏览器地址栏信息
location.href = "https://www.itcast.cn";</span></span>

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


然后点击确定后，因为我们设置了地址栏信息，所以浏览器跳转到传智首页

完整代码如下：

<span style="background-color:#f8f8f8"><span style="color:#333333"><!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-对象-BOM</title>
</head>
<body>
    
</body>
<script>
    //获取
    // window.alert("Hello BOM");
    // alert("Hello BOM Window");

    //方法
    //confirm - 对话框 -- 确认: true , 取消: false
    // var flag = confirm("您确认删除该记录吗?");
    // alert(flag);

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

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

    location.href = "https://www.itcast.cn";

</script>
</html></span></span>

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 元素

从而达到动态改变页面效果目的，具体我们可以查看代码中提供的 11. JS-对象-DOM-演示.html 来体会DOM的效果。

5.3.2 DOM对象

  • DOM对象：浏览器根据HTML标签生成的JS对象

    • 所有的标签属性都可以在这个对象上面找到

    • 修改这个对象的属性，就会自动映射到标签身上

  • DOM的核心思想：将网页的内容当做对象来处理

  • document对象

    • 网页中所有内容都封装在document对象中

    • 它提供的属性和方法都是用来访问和操作网页内容的，如：document.write(…)

  • DOM操作步骤:

    • 获取DOM元素对象

    • 操作DOM对象的属性或方法 (查阅文档)

5.3.3 获取DOM对象

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

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

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

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

PS：在早期的JS中，也可以通过如下方法获取DOM元素（了解）。

函数描述
document.getElementById()根据id属性值获取，返回单个Element对象
document.getElementsByTagName()根据标签名称获取，返回Element对象数组
document.getElementsByName()根据name属性值获取，返回Element对象数组
document.getElementsByClassName()根据class属性值获取，返回Element对象数组

接下来通过VS Code中创建名为 12. JS-对象-DOM-获取元素.html 的文件来演示上述api，首先在准备如下页面代码：

<span style="background-color:#f8f8f8"><span style="color:#333333"><!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-对象-DOM</title>
</head>

<body>
    <span id="sid">DOM元素1</span>
    <span class="txt">DOM元素2</span>
    <span class="txt">DOM元素3</span>

    <script>
        //根据CSS选择器获取DOM元素, 获取到匹配的第一个元素
        let s1 = document.querySelector('#sid');
        console.log(s1);
	    
        //根据CSS选择器获取DOM元素, 获取到匹配的所有元素
        let s2 = document.querySelectorAll('.txt');
        s2.forEach(s => console.log(s))
    </script>
</body>

</html></span></span>

  • 操作属性

    那么获取到标签了，我们如何操作标签的属性呢？通过查询文档资料，如下图所示：



    得出可以通过div标签对象的innerHTML属性来修改标签的内容。此时我们想把页面中的传智教育替换成传智教育666，所以要获取2个div中的第一个，所以可以通过下标0获取数组中的第一个div，注释之前的代码，编写如下代码：

    <span style="background-color:#f8f8f8">//根据CSS选择器获取DOM元素, 获取到匹配的第一个元素
let s1 = document.querySelector('#sid');
console.log(s1);
s1.innerHTML = '传智教育 666'</span>

    浏览器刷新页面，展示效果如下图所示：





    发现页面内容变成了传智教育666

完整代码如下：

<span style="background-color:#f8f8f8"><span style="color:#333333"><!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-对象-DOM</title>
</head>

<body>
    <span id="sid">DOM元素1</span>
    <span class="txt">DOM元素2</span>
    <span class="txt">DOM元素3</span>

    <script>
        //根据CSS选择器获取DOM元素, 获取到匹配的第一个元素
        let s1 = document.querySelector('#sid');
        console.log(s1);
        s1.innerHTML = '传智教育 666'

        //根据CSS选择器获取DOM元素, 获取到匹配的所有元素
        let s2 = document.querySelectorAll('.txt');
        s2.forEach(s => console.log(s))
    </script>
</body>

</html></span></span>

5.3.4 案例

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

5.3.4.1 需求

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

效果如下所示：

5.3.4.2 分析

  • 要实现倒计时效果，那其实倒计时，就是每1秒钟，执行一次，把数字往下减1，直到数据减为0 。所以，这里需要用到一个定时器：setInterval(...)

  • 跳转网页，其实控制的地址栏的地址，那这里就需要通过 location 来设置地址栏的信息 。

5.3.4.3 实现
<span style="background-color:#f8f8f8"><span style="color:#333333"><!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>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></span></span>

6. JS事件

6.1 事件介绍

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

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

  • 按钮被点击

  • 鼠标移到元素上

  • 输入框失去焦点

  • 按下键盘按键

  • ........

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

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

  • 事件监听

  • 常用事件

6.2 事件监听

JS事件监听的语法: 

<span style="background-color:#f8f8f8"><span style="color:#333333">事件源.addEventListener('事件类型', 要执行的函数);</span></span>

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

  • 事件源: 哪个dom元素触发了事件, 要获取dom元素

  • 事件类型: 用什么方式触发, 比如: 鼠标单击 click, 鼠标经过 mouseover

  • 要执行的函数: 要做什么事

演示：

<span style="background-color:#f8f8f8"><span style="color:#333333"><!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></span></span>

JavaScript对于事件的绑定还提供了另外2种方式（早期版本）：

1). 通过html标签中的事件属性进行绑定

例如一个按钮，我们对于按钮可以绑定单机事件，可以借助标签的onclick属性，属性值指向一个函数。

<span style="background-color:#f8f8f8"><span style="color:#333333"><input type="button" id="btn1" value="点我一下试试1" onclick="on()">
<script>
	function on(){
        alert('试试就试试')
    }
</script></span></span>

2). 通过DOM中Element元素的事件属性进行绑定

依据我们学习过得DOM的知识点，我们知道html中的标签被加载成element对象，所以我们也可以通过element对象的属性来操作标签的属性。

例如一个按钮，我们对于按钮可以绑定单机事件，可以通过DOM元素的属性，为其做事件绑定。

<span style="background-color:#f8f8f8"><span style="color:#333333">  <body>
      <input type="button" id="btn1" value="点我一下试试1">
      
  <script>
      document.querySelector('#btn1').onclick = function(){
          alert("按钮2被点击了...");
      }
  </script>
  </body></span></span>

整体代码如下：

<span style="background-color:#f8f8f8"><span style="color:#333333"><!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被点击了...");
        })
		
        document.querySelector('#btn2').onclick = function(){
            alert("按钮2被点击了...");
        }
    </script>
</body>
</html></span></span>

addEventListener 与 on事件 区别:

  • on方式会被覆盖，addEventListener 方式可以绑定多次，拥有更多特性，推荐使用 addEventListener .

6.3 常见事件

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

示例演示：

<span style="background-color:#f8f8f8"><span style="color:#333333"><!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>
    <form action="" style="text-align: center;">
        <input type="text" name="username" id="username">
        <input type="text" name="age" id="age">
        <input id="b1" type="submit" value="提交">
        <input id="b2" type="button" value="单击事件">
    </form>

    <br><br><br>

    <table width="800px" border="1" cellspacing="0" align="center">
        <tr>
            <th>学号</th>
            <th>姓名</th>
            <th>分数</th>
            <th>评语</th>
        </tr>
        <tr align="center">
            <td>001</td>
            <td>张三</td>
            <td>90</td>
            <td>很优秀</td>
        </tr>
        <tr align="center" id="last">
            <td>002</td>
            <td>李四</td>
            <td>92</td>
            <td>优秀</td>
        </tr>
    </table>



    <script>
        //click: 鼠标点击事件
        document.querySelector('#b2').addEventListener('click', () => {
            console.log("我被点击了...");
        })

        //mouseenter: 鼠标移入
        document.querySelector('#last').addEventListener('mouseenter', () => {
            console.log("鼠标移入了...");
        })

        //mouseleave: 鼠标移出
        document.querySelector('#last').addEventListener('mouseleave', () => {
            console.log("鼠标移出了...");
        })

        //keydown: 某个键盘的键被按下
        document.querySelector('#username').addEventListener('keydown', () => {
            console.log("键盘被按下了...");
        })

        //keydown: 某个键盘的键被抬起
        document.querySelector('#username').addEventListener('keyup', () => {
            console.log("键盘被抬起了...");
        })

        //blur: 失去焦点事件
        document.querySelector('#age').addEventListener('blur', () => {
            console.log("失去焦点...");
        })

        //focus: 元素获得焦点
        document.querySelector('#age').addEventListener('focus', () => {
            console.log("获得焦点...");
        })

        //input: 用户输入时触发
        document.querySelector('#age').addEventListener('input', () => {
            console.log("用户输入时触发...");
        })

        //submit: 提交表单事件
        document.querySelector('form').addEventListener('submit', () => {
            alert("表单被提交了...");
        })
    </script>
</body>

</html></span></span>

6.4 案例

6.4.1 表格隔行换色

需求：实现表格隔行换色效果，奇数行设置背景色为： #FBFBD4，偶数行设置背景色为： #D9D9FA 。

效果：




分析：当鼠标引入表格，呈现一个颜色，离开之后颜色马上变为默认的白色了。 那这就涉及到鼠标移入事件 mouseenter、鼠标移出事件 mouseleave。

实现：

<span style="background-color:#f8f8f8"><span style="color:#333333"><!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>Document</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;
        }

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

<body>
    <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>
        //1. 获取表格中的数据行 DOM对象
        let trs = document.querySelectorAll('.data');

        //2. 判断, 如果是奇数行, 设置背景颜色为 #FBFBD4; 如果是偶数行, 设置背景颜色为: #D9D9FA
        for (let i = 0; i < trs.length; i++) {
            const tr = trs[i];
            tr.addEventListener('mouseenter', ()=> {
                if(i % 2 == 0){ //偶数
                    tr.style = "background-color: #D9D9FA";
                }else { //奇数
                    tr.style = "background-color: #FBFBD4";
                }
            })
            
            tr.addEventListener('mouseleave', ()=> {
                tr.style = "background-color: #FFFFFF";
            })
        }
    </script>
</body>

</html></span></span>

6.4.2 表单校验

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

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

  2. 在表单提交时，校验整个表单内容，如果内容格式有一项不正确，弹出提示信息，阻止表单数据提交。

2). 效果：

3). 分析：

  1. JS的事件监听：离焦事件 blur，表单提交事件 submit

  2. DOM对象操作

4). 实现：

<span style="background-color:#f8f8f8"><span style="color:#333333"><!DOCTYPE html>
<html>

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

            <input type="submit" value="提交" class="btn">
            <input type="reset" value="重置" class="btn">
        </form>
    </div>


    <script>
        //在鼠标离开焦点时, 校验输入框内容的长度 .
        //校验用户名
        let checkUsername = function() {
            let errMsg = '';
            let flag = true;
            let username = document.querySelector('#username').value;
            if(username.length < 4 || username.length > 16){
                errMsg = '用户名格式不正确';
                flag = false;
            }
            document.querySelector('#name_msg').innerHTML = errMsg;
            return flag;
        }
        document.querySelector('#username').addEventListener('blur', checkUsername)


        //校验密码
        let checkPhone = function() {
            let errMsg = '';
            let flag = true;
            let phone = document.querySelector('#phone').value;
            if(phone.length != 11){
                errMsg = '手机号格式不正确';
                flag = false;
            }
            document.querySelector('#phone_msg').innerHTML = errMsg;
            return flag;
        }
        document.querySelector('#phone').addEventListener('blur', checkPhone)


        //在表单提交时, 判断是否所有的输入框输入的值合法 .
        document.querySelector('form').addEventListener('submit', (e)=> {
            if(!checkUsername() || !checkPhone()){
                alert('表单校验失败, 不能提交表单')
                e.preventDefault();
            }
        })

    </script>
</body>

</html></span></span>

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

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

  • 12209120990

  • 11009120990

  • 1220912abcd

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

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

6.5 正则表达式

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

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

  • 定义：

    • 正则表达式字面量 （注意不要加引号）

      <span style="background-color:#f8f8f8">const reg1 = /abc/;</span>

    • 创建正则对象RegExp

      <span style="background-color:#f8f8f8">const reg2 = new RegExp('abc');</span>

  • 方法：

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

  • 语法：

    1. 普通字符：大多数的字符仅能描述它们本身，这些字符称作普通字符，比如字母和数字。

    2. 特殊字符：是一些具有特殊含义的字符，可以极大提高了灵活性和强大的匹配功能。

    3. 量词：表示要匹配的字符或表达式的数量。

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

示例：

<span style="background-color:#f8f8f8"><span style="color:#333333">  <script>
    let str1 = 'hello World';
    let str2 = '二哈很二o';
    let str3 = 'er哈就是很二o';
    let str4 = '二哈就是很二';

    console.log(/\w+/.test(str1)); //true
    console.log(/\w+/.test(str2)); //true
    console.log(/\w+/.test(str3)); //true
    console.log(/\w+/.test(str4)); //false

    const reg1 = /abc/;
    const reg2 = new RegExp('abc');
    console.log(reg1.test('my name is : abc')); //true
    console.log(reg2.test('my name is : abc')); //true
  </script></span></span>

基本的正则表达式的语法已经掌握了，那接下来，就需要通过正则表达式来校验表单中用户名、手机号了。 具体代码如下：

<span style="background-color:#f8f8f8"><span style="color:#333333"><!DOCTYPE html>
<html>

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

            <input type="submit" value="提交" class="btn">
            <input type="reset" value="重置" class="btn">
        </form>
    </div>


    <script>
        //在鼠标离开焦点时, 校验输入框内容的长度 .
        //校验用户名
        let checkUsername = function() {
            let errMsg = '';
            let flag = true;
            let username = document.querySelector('#username').value;
            if(!/^\w{4,16}$/.test(username)){
                errMsg = '用户名格式不正确';
                flag = false;
            }
            document.querySelector('#name_msg').innerHTML = errMsg;
            return flag;
        }
        document.querySelector('#username').addEventListener('blur', checkUsername)


        //校验密码
        let checkPhone = function() {
            let errMsg = '';
            let flag = true;
            let phone = document.querySelector('#phone').value;
            if(!/^1[3-9]\d{9}$/.test(phone)){
                errMsg = '手机号格式不正确';
                flag = false;
            }
            document.querySelector('#phone_msg').innerHTML = errMsg;
            return flag;
        }
        document.querySelector('#phone').addEventListener('blur', checkPhone)


        //在表单提交时, 判断是否所有的输入框输入的值合法 .
        document.querySelector('form').addEventListener('submit', (e)=> {
            if(!checkUsername() || !checkPhone()){
                alert('表单校验失败, 不能提交表单')
                e.preventDefault();
            }
        })

    </script>
</body>

</html></span></span>

7. JS模块化

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

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

A. 定义一个js文件，命名位 check.js

<span style="background-color:#f8f8f8"><span style="color:#333333">//在鼠标离开焦点时, 校验输入框内容的长度 .
//校验用户名
let checkUsername = function() {
  let errMsg = '';
  let flag = true;
  let username = document.querySelector('#username').value;
  if(!/^\w{4,16}$/.test(username)){
      errMsg = '用户名格式不正确';
      flag = false;
  }
  document.querySelector('#name_msg').innerHTML = errMsg;
  return flag;
}
document.querySelector('#username').addEventListener('blur', checkUsername)


//校验密码
let checkPhone = function() {
    let errMsg = '';
    let flag = true;
    let phone = document.querySelector('#phone').value;
    if(!/^1[3-9]\d{9}$/.test(phone)){
        errMsg = '手机号格式不正确';
        flag = false;
    }
    document.querySelector('#phone_msg').innerHTML = errMsg;
    return flag;
}
document.querySelector('#phone').addEventListener('blur', checkPhone)

//在表单提交时, 判断是否所有的输入框输入的值合法 .
document.querySelector('form').addEventListener('submit', (e)=> {
    if(!checkUsername() || !checkPassword()){
        alert('表单校验失败, 不能提交表单')
        e.preventDefault();
    }
})</span></span>

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

<span style="background-color:#f8f8f8"><span style="color:#333333"><!DOCTYPE html>
<html>

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

            <input type="submit" value="提交" class="btn">
            <input type="reset" value="重置" class="btn">
        </form>
    </div>


    <script src="./js/check.js"></script>
</body>

</html></span></span>

OK，那这是在html中，引入JS文件，可以直接使用 <script src=".."></script> 来引入。 那如果是在一个js文件中，需要用到另外一个js文件中的方法呢。 那此时该如何实现呢 ？

那在JS中，就提供了模块化导入、导出的操作，可以通过 export 关键字，来导出模块。 然后在别的需要用到的地方，通过 import 关键字导入模块。

如下所示：

A. checkFn.js 中定义是校验方法

在变量前面加上 export 代表，要将该变量、函数、对象导出为一个模块。别的js中要想使用，就可以 import 导入了。

<span style="background-color:#f8f8f8"><span style="color:#333333">//校验用户名
export let checkUsername = function() {
  let errMsg = '';
  let flag = true;
  let username = document.querySelector('#username').value;
  if(!/^\w{4,16}$/.test(username)){
      errMsg = '用户名格式不正确';
      flag = false;
  }
  document.querySelector('#name_msg').innerHTML = errMsg;
  return flag;
}

//校验密码
export let checkPhone = function() {
  let errMsg = '';
  let flag = true;
  let phone = document.querySelector('#phone').value;
  if(!/^1[3-9]\d{9}$/.test(phone)){
      errMsg = '手机号格式不正确';
      flag = false;
  }
  document.querySelector('#phone_msg').innerHTML = errMsg;
  return flag;
}</span></span>

B. check.js 中定义的是校验的事件监听

那在check.js中需要用到 checkUsername、checkPhone函数，就可以通过 import 关键字将其导入进来。

<span style="background-color:#f8f8f8"><span style="color:#333333">import {checkPhone, checkUsername} from './checkFn.js'

//在鼠标离开焦点时, 校验输入框内容的长度 .
document.querySelector('#username').addEventListener('blur', checkUsername)

//校验密码
document.querySelector('#phone').addEventListener('blur', checkPhone)

//在表单提交时, 判断是否所有的输入框输入的值合法 .
document.querySelector('form').addEventListener('submit', (e)=> {
    if(!checkUsername() || !checkPhone()){
        alert('表单校验失败, 不能提交表单')
        e.preventDefault();
    }
})</span></span>

C. xxx.html 中就是html的基础代码样式

注意：如果使用到了 export, import 这种模块化的js，那在通过 <script src="..."></script> 在引入JS文件时，必须指定 type="module" 属性，表明用的是模块化的JS。 如下所示：

<span style="background-color:#f8f8f8"><span style="color:#333333"><!DOCTYPE html>
<html>

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

            <input type="submit" value="提交" class="btn">
            <input type="reset" value="重置" class="btn">
        </form>
    </div>

	<!-- 模块化JS引入方式，需要指定type="module" -->
    <script type="module" src="./js/check.js"></script>
</body>

</html></span></span>

注意：如果使用模块的js，使用了 export，import ，要保证代码，一定是在服务器端运行，而不是在磁盘中直接打开。 所以运行的时候，在VSCode中已经要右键选择 "Open with Live Server"。

数码世界的齿轮
关注
  • 17
    点赞
  • 踩
  • 23
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
javaScript
03-09
Java脚本
javascript百炼成仙 第一章 掌握JavaScript基础01 初入宗门
java小白翻身
10-06 16万+
乐阳村，处于脚本大陆东部的边缘地带，民风淳朴，村名日出而作，日落而息。这一日清晨，所有村民来到村庄的门口，正在为一个十五六岁的少年送别。只见那少年虽然身体瘦弱，可是目中绽放出异彩，身躯虽不壮实，倒也挺拔。 “叶小凡，你是我们全村人的骄傲，百年来唯一一个具备修行JavaScript甲等资质的孩子！马上会有千鹤派的大人来接你，今后你一定要认真修行，给我们全村的人争光！” 他叫叶小凡，几天前通过了修行资质的检验，符合修行JavaScript的资质。 “千鹤派！”叶小凡眼前一亮，语气中伴随着激动，两眼放光。千鹤派，
JavaScript基础大总结
Augenstern_QXL的博客
07-31 13万+
✍初始JavaScirpt JavaScript 是世界上最流行的语言之一，是一种运行在客户端的脚本语言 （Script 是脚本的意思） 脚本语言：不需要编译，运行过程中由 js 解释器( js 引擎）逐行来进行解释并执行 现在也可以基于 Node.js 技术进行服务器端编程 ????浏览器执行JS简介 浏览器分成两部分：渲染引擎和 JS 引擎 渲染引擎：用来解析HTML与CSS，俗称内核，比如 chrome 浏览器的 blink ，老版本的 webkit JS 引擎：也称为 JS 解释器。 用来读
学习JavaScript这一篇就够了
热门推荐
轻松的小希
11-25 73万+
目录第一章 JavaScript简介1.1、JavaScript的起源1.2、JavaScript的组成1.3、JavaScript的特点1.4、JavaScript的使用1.4.1、标签引用1.4.2、文件引用1.5、JavaScript的输出1.5.1、页面输出1.5.2、控制台输出1.5.3、弹出窗口输出1.6、JavaScript的注释1.6.1、单行注释1.6.2、多行注释第二章 JavaScript基础语法2.1、标识符2.2、字面量和变量2.2.1、字面量2.2.2、变量2.3、数据类型2.3
JavaScript详解
最新发布
weixin_48373085的博客
01-25 2万+
HTML对象，定时器，表单验证，正则表达式
JavaScript简介
wsdhy_的博客
04-02 4388
JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言 脚本语言：最开始从 Script 单词翻译过来的。 java、c、c## c++ 都是非脚本语言 脚本和非脚本语言的区别：在于执行方式。 脚本语言：直接浏览器解析执行。 非脚本的：有一个先编译的过程。会生成中间的可执行代码文件。 动态语言：解释执行JavaScript代码的时候才去确定数据的类型。 弱类型语言： 1：变量的类型由实际的数值来确定。任何的变量可以保存任意的数据的类型。 2：不同数据...
javascript百炼成仙 第一章 掌握JavaScript基础 1.2直接量
java小白翻身
10-06 7万+
叶小凡的住处被安排在青山院西北角的一个房间里，虽不宽敞，倒也干净。叶小凡两眼露出振奋的眼神，随便吃了点乡亲们准备的干粮后，就立刻开始打坐修行。编程之修，重在积累，而非资质。资质虽然一样重要，可是后天的努力一样必不可少。这些道理，叶小凡还未上山之前，就已经熟知！因此，即便是资质平凡，只要肯下苦功，一样可以修得正果！叶小凡虽然甲等资质，可依然不骄不躁，开始从“JavaScript基础修炼要诀”第一页开始看起。 修炼要诀第一章，直接量。 编程世界，所谓直接量，就是明面上可以见到的数据值。常见的直接量有数字，小数，
JavaWeb—JavaScript
weixin_61843013的博客
06-25 7647
JavaScript的使用
JavaScript看这一篇就够了，简单全面一发入魂
学Java，找哪吒
03-09 3万+
文档对象模型（DOM,Document Object Model）是一个应用编程接口（API），用于在HTML中使用扩展的HTML。DOM将整个页面抽象为一组分层节点。 DOM通过创建表示文档的树，让开发者可以随心所欲的控制网页的内容和结构。使用DOM API可以轻松地删除、添加、替换、修改节点。 对浏览器而言，DOM就是使用ECMAScript实现的，如今已经成为JavaScript语言的一大组成部分。 言而言之，DOM提供与网页内容交互的方法和接口。
javascript
02-10
javascript官方文档，web前端师的权威文档，web前端的
Javascript
03-22
javascript-examples JavaScript网页程式设计
JavaScript入门
03-04
JavaScript入门
JAVASCRIPT HashTable
10-31
JAVASCRIPT HashTable
Javascript项目
02-13
Javascript项目
高级JavaScript
02-14
高级JavaScript
javaScript api
11-03
javaScript api离线版，chm格式。。。。。。。。。。。。。
JavaScript实现消消乐
01-02
JavaScript实现消消乐源代码JavaScript实现消消乐源代码JavaScript实现消消乐源代码JavaScript实现消消乐源代码JavaScript实现消消乐源代码

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值