javascript

在 HTML 标签中直接引入，针对一些特别简短的 JavaScript 代码。
使用 script 标签可以将 JavaScript 代码嵌入到 HTML 文档的 head 和 body 里。
使用外部 JavaScript 文件，将 JavaScript 脚本代码写入一个后缀为 .js 的文件中，通过给 script 标签设置 src 属性的方式，引入这个文件。

接下来我们学习一下如何在 JavaScript 中定义变量吧！👇

3.JavaScript 变量

在 JavaScript 中，使用 var 声明变量。

其语法格式为：

var 变量名 = 值;

在 JavaScript 中给变量命名应该遵循以下原则：

变量名由字母、下划线、$ 或数字组成，并且必须由字母、下划线、$ 开头。
变量名不能命名为系统关键字和保留字。

4.数据类型

知识点

基本数据类型 : 字符串（string）、数字（number）、布尔（boolean）、空（null）、未定义（undefined）。
引用数据类型 : 对象（object）。
typeof

那么为什么又要分为基本数据类型和引用数据类型呢？🤔️

传参方式不同，基本数据类型是值传递，而引用数据类型是地址传递。
储存方式不同，基本数据类型是栈存储，而引用数据类型是堆存储。

4.1.基本数据类型的使用

新建一个 index.html 文件，在文件中写入以下内容：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      var a = 5;
      var b = a;
      a++; // 相当于 a+1 的意思
      console.log("a 的值为：" + a);
      console.log("b 的值为：" + b);
    </script>
  </body>
</html>

在上述代码中，console.log 可以在控制台输出值，我们也可以使用 document.write 在页面输出值的方式来查看。

使用 Chrome 浏览器，按 F12，在控制台可以看到输出的值，显示如下所示：

从上图我们可以看到，a 输出的值为 6，因为执行了 a++ 的操作；而 b 的值为 5，是因为 a = 5 时，把 5 这个值赋给了 b。

4.2.引用数据类型的使用

新建一个 index1.html 文件，在文件中写入以下内容：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      var a = new Object(); // 创建一个对象
      a.name = "小花";
      var b = a;
      a.name = "小蓝";
      console.log("对象 a 的 name 属性值为：" + a.name);
      console.log("对象 b 的 name 属性值为：" + b.name);
    </script>
  </body>
</html>

在控制台我们可以看到如下所示的输出：

从上图我们可以看到 a.name 和 b.name 的输出都是“小蓝”，因为引用类型传递的是地址，所以 a 对象的数据改变，b 对象的数据也会改变。

4.3.查看数据类型

我们可以使用 typeof 关键字来查看数据类型。

我们来举个例子～

新建一个 index2.html 文件，在文件中写入以下内容。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      var a = 1; // 整型
      var b = "2"; // 字符串
      var c = true; // 布尔类型
      console.log("a 的数据类型是：" + typeof a);
      console.log("b 的数据类型是：" + typeof b);
      console.log("c 的数据类型是：" + typeof c);
    </script>
  </body>
</html>

在控制台可以看到如下输出：

5.运算符与表达式

知识点

算术运算符
比较运算符
赋值运算符
逻辑运算符
条件运算符

5.1.算术运算符

在 JavaScript 中有七种算术运算符：加 +、减 -、乘 *、除 /、取余 %、自加 ++、自减 --。

5.2.比较运算符

比较运算符是比较操作数，并根据表达式判断为真或为假，来返回一个布尔类型的值。

在 JavaScript 中有如下表所示的比较运算符。

运算符	描述
等于（==）	当等于号左右两边的操作数相等时，返回 `true`。
不等于（!=）	当不等号左右两边的操作数不相等时，返回 `true`。
全等（===）	当全等号左右两边的操作数相等且类型相同时，返回 `true`。
不全等（!==）	当不全等号左右两边的操作数不相等或者类型不相同时，返回 `true`
大于（>）	当大于号左边的操作数大于右边的操作数时，返回 `true`。
大于等于（>=）	当大于等于号左边的操作数大于或者等于右边的操作数时，返回 `true`。
小于（<）	当小于号左边的操作数小于右边的操作数时，返回 `true`。
小于等于（<=）	当小于等于号左边的操作数小于或者等于右边的操作数时，返回 `true`。

5.3.赋值运算符

在 JavaScript 中，有五种赋值运算符：=、+=、-=、*=、/=。

5.4.逻辑运算符

在 JavaScript 中，逻辑运算符包括：与 &&、或 ||、非 !。

假设 p 和 q 代表两个条件，我们用 0 代表假（false），用 1 代表真（true），其逻辑运算真值表可以如下所示：

5.5.条件运算符

条件运算符也可叫三目运算符，你可以用来判断条件的真假，根据真假执行不同的语句。

条件运算符的使用格式如下：

条件表达式 ? 表达式1 : 表达式2

6.分支与循环

6.1分支结构

何为分支结构呢？

分支结构就是会根据条件判断来选择执行的路径。

在 JavaScript 中分支结构有两种：

if 语句。
switch 语句。

6.1.1

if 语句有以下三种形式：

单分支语句。if...
双分支语句。if...else
多分支语句。if...else if...else

6.1.2.switch 语句

switch 语句的语法格式为：

switch (条件) {
  case 条件1:
    break;
  case 条件2:
    break;
  default:
    break;
}

6.2.循环结构

循环结构就是当满足判断条件，程序就一直在循环体中运行；当不满足条件时，退出循环。

这里会给大家介绍 JavaScript 中四种循环语句，分别是

while 语句
do...while 语句
for 语句
for...in 语句

6.2.1.while 语句

while 语句是当满足条件时，便执行 while 语句中的内容，这种循环属于先判断再执行。

其语法格式为：

while (条件) {}

6.2.2.do...while 语句

do...while 语句是先执行一次循环体再判断是否符合条件。

其语法格式为：

do {} while (条件);

6.2.3.for 语句

for 语句，会设置一个初始值，循环条件，当不满足条件时退出循环。

其语法格式为：

for (初始化表达式; 条件表达式; 循环后的操作) {}

6.2.4.for...in 语句

for...in 语句循环一个指定的变量来循环指定对象的所有可枚举属性。

其语法格式为：

for (i in obj) {
}

这里我们来举个例子吧！👻

新建一个 index7.html 文件，在其中写入以下内容。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      var arr = ["小红", "小蓝", "小白", "小黑"];
      for (i in arr) {
        r = "欢迎" + arr[i] + "来到蓝桥云课。" + "</br>";
        document.write(r);
      }
    </script>
  </body>
</html>

启动 8080 端口，打开 Web 服务，可以看到如下结果。

从上图效果我们可以看到，当使用 for...in 去遍历数组时，返回的是数组元素的下标值。

7.函数

什么是函数呢？

函数是用来实现某个功能的，我们可以通过调用这个函数，重复使用该功能，这样就避免代码中出现重复的代码。

7.1.函数的使用

在 JavaScript 中有两种函数，一种是有返回值的函数，一种是没有返回值的函数。

定义函数的格式为：

注意：参数可传递也可不传，返回值也是可有可无。

8.变量的作用域

知识点

全局作用域
局部作用域

局部作用域

在函数内声明的变量为局部变量，作用域只在函数内部有效，也只能被函数内部访问。

注：正因为局部变量只作用于函数内部，所以不同函数在函数内部是可以使用相同名称的变量；函数开始执行时创建局部变量，函数执行完成后局部变量会自动销毁。

全局作用域

在函数外部声明的变量，即为全局变量。全局变量的作用域针对整个全局，简单来说，就是网页的所有脚本和函数都能够访问它。

9.内置对象

知识点

数学对象
日期对象
数组对象
字符串对象

9.1.数学对象

JavaScript 中的数学对象为 Math，它的内部有一些数学的属性和函数方法。

Math 的常用属性如下表所示：

属性	描述
Math.E	自然对数的底数
Math.LN2	2 的自然对数
Math.PI	圆周率
Math.SQRT2	2 的平方根

Math 的常用方法如下表所示：

属性	描述
Math.abs(x)	返回一个数的绝对值。
Math.pow(x, y)	返回一个数的 y 次幂。
Math.random()	返回一个 0 到 1 之间的伪随机数。
Math.sqrt(x)	返回一个数的平方根。
Math.round()	返回四舍五入后的整数。
Math.exp(x)	返回欧拉常数的参数次方。

这里我们来举个例子吧！👻

新建一个 index.html 文件，在其中写入以下内容。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      document.write("圆周率为 " + Math.PI + "<br>");
      document.write("2 的平方根为 " + Math.SQRT2 + "<br>");
      document.write("自然对数的底数为 " + Math.E);
    </script>
  </body>
</html>

启动 8080 端口，打开 Web 服务，可以看到如下结果。

9.2.日期对象

在 JavaScript 中，日期对象是 Date，用于处理日期和时间。

其常用方法如下所示：

方法	描述
getDate()	返回一个月的某一天。
getDay()	返回一周中的某一天。
getFullYear()	返回年份。
getHours()	返回小时。
getMonth()	返回月份。
getTime()	返回毫秒数。
setFullYear()	设置年份。
setDate()	设置一个月中的某一天。
setMonth()	设置月份。

这里我们来举个例子吧！👻

新建一个 index1.html 文件，在其中写入以下内容。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      var date = new Date(); // 实例化 Date 对象
      var month = date.getMonth() + 1; // 获取月份，取值为 0（一月）到 11（十二月）之间的整数
      document.write(
        "今天是" +
          date.getFullYear() +
          "年" +
          month +
          "月" +
          date.getDate() +
          "日" +
          "<br>"
      );
    </script>
  </body>
</html>

启动 8080 端口，打开 Web 服务，可以看到如下结果。

9.3.数组对象

在 JavaScript 中，数组对象是 Array，在其语法格式为：

var 数组名 = new Array(元素1, 元素2,...,元素n);

注意：我们在定义数组时，不一定要写入元素，可以只定义一个空数组。

创建数组我们还可以简写为：

var 数组名 = [元素1, 元素2,...,元素n];

例如，我们定一个名为 nums 的数组。

var nums = [1, 2, 3];

在数组中，每一个子项都有其对应的编号，这样的编号被称为下标，下标从 0 开始。

当我们想要取出数组中的某个值时，下标就起作用了，比如我们取出数组中的第二个值 2。

nums[1];

在数组对象中，它有很多方法和属性帮助我们更加灵活地处理数组，下面我们就来学一学它的属性和方法吧！

9.4.slice()

slice() 是用来做数组切片操作的，也就是取数组中的部分值，例如：

arr.slice(2, 4);

表示取名为 arr 的数组中下标从 2 到 4 的值。

这里我们来举个例子吧！👻

新建一个 index2.html 文件，在其中写入以下内容。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      var arr = ["苹果", "梨子", "橙子", "葡萄", "樱桃", "芒果"];
      document.write(arr.slice(1, 4));
    </script>
  </body>
</html>

启动 8080 端口，打开 Web 服务，可以看到如下结果。

9.5.unshift()

unshift() 可以在数组的头部增加新的元素。

使用格式：

数组名.unshift(待添加项);

这里我们来举个例子吧！👻

新建一个 index3.html 文件，在其中写入以下内容。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      var arr = ["苹果", "梨子", "橙子", "葡萄", "樱桃", "芒果"];
      arr.unshift("释迦果");
      document.write(arr);
    </script>
  </body>
</html>

启动 8080 端口，打开 Web 服务，可以看到如下结果。

9.6.shift()

shift() 可以删除数组的首元素。

使用格式：

数组名.shift();

这里我们来举个例子吧！👻

新建一个 index4.html 文件，在其中写入以下内容。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      var arr = ["苹果", "梨子", "橙子", "葡萄", "樱桃", "芒果"];
      arr.shift();
      document.write(arr);
    </script>
  </body>
</html>

启动 8080 端口，打开 Web 服务，可以看到如下结果。

9.7.sort()

sort() 可以给数组中的元素从小到大进行排序。

9.8.reverse()

reverse() 可以将数组中的元素进行逆序排列。

9.9.join()

join() 可以将数组中的字符拼接成字符串。

使用格式：

数值名.join();

这里我们来举个例子吧！👻

新建一个 index7.html 文件，在其中写入以下内容。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      var arr = ["H", "e", "l", "l", "o"];
      document.write(arr.join(""));
    </script>
  </body>
</html>

启动 8080 端口，打开 Web 服务，可以看到如下结果。

9.10.获取数组的长度

我们可以使用 length 来获取数组的长度。

使用格式：

数组名.length;

9.11.concat()

concat() 可以将两个数组拼接在一起。

使用格式：

// 将 数组2 拼接到 数组1 里
数组1.concat(数组2);

9.12.includes()

includes() 可以用来判断该数组中是否包含某个元素。

使用格式：

数组.includes(元素);

9.13.toString()

toString() 可以将数组中的值转换成字符串类型。

使用格式：

数组名.toString();

9.14.indexOf()

indexOf() 可以用来查找指定元素的下标值。

使用格式：

arr.indexOf(元素);

这里我们来举个例子吧！👻

新建一个 index12.html 文件，在其中写入以下内容。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      var arr = ["梨子", "西瓜", "梨子", "葡萄", "柚子"];
      document.write("返回梨子的索引：" + arr.indexOf("梨子") + "<br>");
      document.write("返回樱桃的索引：" + arr.indexOf("樱桃"));
    </script>
  </body>
</html>

启动 8080 端口，打开 Web 服务，可以看到如下结果。

注意：如果查找到多个匹配的元素时，返回的是第一个匹配的元素下标。

9.15.字符串对象

我们通常定义一个字符串，方法如下：

var str = "HELLO";

其实这是以种简写的方式，完整的定义方法如下：

var str = new String("HELLO");

获取字符串长度

获取字符串的长度与获取数组的长度是一样的，都是使用 length。

使用格式：

字符串.length;

toLowerCase()

toLowerCase() 可以把字符串的大写字母转换成小写字母。

使用格式：

字符串.toLowerCase();

toUpperCase()

toUpperCase() 可以把字符串中的小写字母转换成大写字母。

使用格式：

字符串.toUpperCase();

charAt()

charAt() 是用于根据指定下标从一个字符串中返回指定的字符。

使用格式：

字符串.charAt(下标值);

这里我们来举个例子吧！👻

新建一个 index16.html 文件，在其中写入以下内容。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      var str = "HelloJavaScript";
      document.write("第 7 个字符为 " + str.charAt(7)); // 获取下标为 7 的字符
    </script>
  </body>
</html>

启动 8080 端口，打开 Web 服务，可以看到如下结果。

substring()

substring() 可以通过下标来选取字符串中的部分字符。

使用格式：

字符串.substring();

replace()

replace() 可以用来替换指定字符串的内容。

字符串.replace(待替换的字符串, 新的字符串);

split()

split 可以使用指定的分隔符将一个字符串分割成子字符串数组。

indexOf()

indexOf() 是寻找某个字符在字符串中首次出现的位置。

使用格式：

字符串.indexOf(字符);

10.DOM 与 BOM

10.1.DOM 的使用

那么什么是 DOM 呢？🤔

DOM 的英文全称为 Document Object Model（文档对象模型），它是浏览器为每个窗口内的 HTML 页面创建的一个 document 对象来对页面的元素进行操作。

DOM 属性

常用的 DOM 属性如下表所示：

属性	描述
document.title	获取文档的 title 元素。
document.body	获取文档的 body 元素。
document.URL	获取文档的 URL。
document.forms	获取文档的 form 元素。
document.images	获取文档的 img 元素。
document.links	获取文档的 a 元素。
document.cookie	获取文档的 cookie。
document.referrer	返回来用户当前浏览页面的 URL。

DOM 方法

常用的 DOM 方法如下表所示：

方法	描述
document.getElementById()	通过 id 获取元素。
document.getElementByTagName()	通过标签名获取元素。
document.getElementByClassName()	通过 class 获取元素。
document.getElementByName()	通过 name 获取元素。
document.querySelector()	通过选择器获取第一个元素。
document.querySelectorAll()	通过选择器获取所有元素。
document.createElement()	创建元素节点。
document.createTextNode()	创建文本节点。
document.write()	输出内容。
document.writeln()	输出内容并换行。

BOM 的使用

BOM（Browser Object Mode）是浏览器对象模型，通过操作对象的属性和方法来实现与浏览器的交互。

BOM 的构成如下所示：

从图中可以看出，window 是顶级对象，它也是我们学习的核心。

在 window 下面有：

document 是 DOM 对象。
location 是用于获取或设置窗体。
navigation 包含浏览器配置相关的信息。
history 浏览器的历史记录。
screen 用于显示设备信息。

window 对象的方法如下所示：

方法	描述
alert()	显示一个警告框。
prompt()	显示可提示用户输入的对话框。
confirm()	显示一个有确认和取消按钮的对话框。
open()	打开一个新的浏览器窗口。
close()	关闭浏览器。
print()	打印当前窗口内容。

若想了解更多关于 BOM 的知识，请阅读 JavaScript Window - The Browser Object Model。

11.事件

知识点

鼠标事件
键盘事件
表单事件

11.1.鼠标事件

鼠标事件是当用鼠标对页面进行一些操作时会触发的事件。

常用的鼠标事件如下表所示：

事件	说明
onclick	鼠标点击事件
onmouseover	鼠标移入事件
onmouseout	鼠标移出事件
onmousedown	鼠标按下事件
onmouseup	鼠标松开事件
onmousemove	鼠标移动事件

11.2.键盘事件

常用的键盘事件只有以下两个：

onkeydown：键盘按下会触发的事件。
onkeyup：键盘松开会触发的事件。

这里我们来举个例子吧！👻

新建一个 index3.html 文件，在其中写入以下内容。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script>
      window.onload = function () {
        var phone = document.getElementById("phone");
        phone.onkeydown = function () {
          phone.style.color = "#00adb5";
        };
        phone.onkeyup = function () {
          phone.style.color = "#000";
        };
      };
    </script>
  </head>
  <body>
    <input type="text" value="请输入内容" id="phone" />
  </body>
</html>

开启 8080 端口，打开 Web 服务，会看到以下实验效果。

从上面的练习中，我们可以看出当按下键盘输入文字时，字体颜色变成了蓝色，当我们松开按下的键盘时，文字又变成了黑色。

11.3.表单事件

在 JavaScript 中，常用表单事件如下表所示：

事件	说明
onfocus	表单元素聚焦时触发。
onblur	表单元素失焦时触发。

这里我们来举个例子吧！👻

新建一个 index4.html 文件，在其中写入以下内容。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>onfocus 与 onblur</title>
    <script>
      window.onload = function () {
        var name = document.getElementById("username");
        name.onfocus = function () {
          // 当聚焦到该输入框时，把输入框的内容置为空，并设置字体颜色为蓝色
          if (name.value == "输入你的名字") {
            name.value = "";
          }
          this.style.color = "#77acf1";
        };
        name.onblur = function () {
          // 当失去焦点时，显示输入框的默认内容
          if (name.value == "") {
            name.value = "输入你的名字";
          }
        };
      };
    </script>
  </head>
  <body>
    姓名：<input type="text" id="username" value="输入你的名字" />
  </body>
</html>

开启 8080 端口，打开 Web 服务，会看到以下实验效果。

在上面代码中，使用 name.onfocus = function (){} 定义了一个聚焦函数，其内部使用 if 语句判断当前输入框中的值是否为默认的值“输入你的名字”，如果是，则把输入框中的值置为空。
使用 name.onblur = function (){} 定义了一个失焦函数，其内部使用 if 语句判断当前输入框中的值是否为空，如果是，则给输入框加上默认值“输入你的名字”。

12.event 对象

知识点

type
keyCode
shiftKey
ctrlKey
altKey
DOM 0 级事件与 DOM 2 级事件

event 对象，是事件对象，通过事件对象的属性，我们可以了解一个事件的详细情况。

常用的 event 对象属性如下表所示：

属性	说明
type	查看事件类型
keyCode	查看键值码
shiftKey	是否按下 shift 键
ctrlkey	是否按下 ctrl 键
altkey	是否按下 alt 键

keyCode 属性已经从 Web 标准中删除，这里了解即可。

12.1.type 的使用

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>keyCode 的使用</title>
    <style></style>
    <script>
      window.onload = function () {
        var value = document.getElementById("item");
        var value1 = document.getElementById("item1");
        value.onkeydown = function (e) {
          // 判断键入的是否为 shift、alt、ctrl
          if (e.shiftKey || e.altKey || e.ctrlKey) {
            value1.innerHTML = "不能键入 shift|alt|ctrl";
            value1.style.color = "red";
            // 当键入的不为 shift、alt、ctrl 时，输出你的键入码
          } else {
            value1.innerHTML = "你输入的键值码为：" + e.keyCode;
            value1.style.color = "black";
          }
        };
      };
    </script>
  </head>
  <body>
    <input type="text" id="item" />
    <p id="item1"></p>
  </body>
</html>

开启 8080 端口，打开 Web 服务，会看到以下实验效果。

从上面的效果图我们可以看出，当你输入的是 shift、alt、ctrl 键时，输入框的下方会出现红色字样的提示语；当你输入其他键时，会打印其对应的键值码。

12.2.键值码的使用

新建一个 index1.html 文件，在其中写入以下内容。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>keyCode 的使用</title>
    <style></style>
    <script>
      window.onload = function () {
        var value = document.getElementById("item");
        var value1 = document.getElementById("item1");
        value.onkeydown = function (e) {
          // 判断键入的是否为 shift、alt、ctrl
          if (e.shiftKey || e.altKey || e.ctrlKey) {
            value1.innerHTML = "不能键入 shift|alt|ctrl";
            value1.style.color = "red";
            // 当键入的不为 shift、alt、ctrl 时，输出你的键入码
          } else {
            value1.innerHTML = "你输入的键值码为：" + e.keyCode;
            value1.style.color = "black";
          }
        };
      };
    </script>
  </head>
  <body>
    <input type="text" id="item" />
    <p id="item1"></p>
  </body>
</html>

开启 8080 端口，打开 Web 服务，会看到以下实验效果。

下一步

12.3.DOM 0 级事件与 DOM 2 级事件

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      body {
        text-align: center;
      }
    </style>
  </head>
  <body>
    <input type="button" value="点我" onclick="alert('欢迎来到蓝桥云课');" />
  </body>
</html>

或者我们可以把上面代码修改成 JavaScript 版的。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      body {
        text-align: center;
      }
    </style>
  </head>
  <body>
    <input id="btn" type="button" value="点我" />
    <script>
      document.getElementById("btn").onclick = function () {
        alert("欢迎来到蓝桥云课");
      };
    </script>
  </body>
</html>

打开 8080 端口，效果如下所示：

需要注意的是：在 DOM 0 级事件中，如果有多个事件，后面的事件会覆盖前面的事件，比如下面这个例子。

我们新建一个 index3.html 文件，写入以下内容。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      body {
        text-align: center;
      }
    </style>
  </head>
  <body>
    <input
      id="btn"
      type="button"
      value="点我"
      onclick="alert('欢迎来到蓝桥云课')"
    />
    <script>
      document.getElementById("btn").onclick = function () {
        alert("嗨！蓝桥");
      };
    </script>
  </body>
</html>

实现效果如下：

从上面内容我们可以看出，在按钮上绑定了两个点击事件，但页面上只有第二个点击事件有效果。

那么同学们可能会想，我想执行多个事件该怎么办呢？接下来我们来认识一下 DOM 2 级事件吧！

DOM 2 级事件的使用

DOM 2 级事件可以让多个事件执行。

在 DOM 2 级事件里，所有的 DOM 节点都有两个方法，分别是 addEvenetListener 和 removeEventListener。

addEvenetListener 和 removeEventListener 的语法格式如下所示：

target.addEvenetListener(type,listener[,useCapture]);// 添加事件

target.removeEventListener(type,listener[,useCapture]);// 移出事件

其参数说明如下所示：

type 是事件类型。
listener 是事件处理的方法。
useCapture 指定事件是否在捕获或冒泡阶段执行，其值为布尔类型，当取值为 true 时，事件句柄在捕获阶段执行，当取值为 false 时，事件句柄在冒泡阶段执行。

了解了 DOM 2 级事件，接下来我们做一做练习吧！

新建一个 index4.html，写入以下内容。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      body {
        text-align: center;
      }
    </style>
  </head>
  <body>
    <input id="btn" type="button" value="点我" />
    <script>
      document.getElementById("btn").onclick = function () {
        alert("1");
      };
      document.getElementById("btn").addEventListener("click", function () {
        alert("2");
      });
      document.getElementById("btn").addEventListener("click", function () {
        alert("3");
      });
    </script>
  </body>
</html>

效果如下所示：

从上面可以看出，我们给同一个按钮绑定了三个点击事件都显示出来了。

removeEventListener 可以移除 addEventListener 添加的事件句柄，但使用时需要注意，两者的处理方法必须相同，removeEventListener 才会生效，我们来看看下面的示例。新建一个 index5.html，在文件中写入以下内容。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <input id="btn" type="button" value="按钮" />
    <script>
      var btn = document.getElementById("btn");
      btn.addEventListener("click", handler, false);
      function handler() {
        alert("已点击");
        document
          .getElementById("btn")
          .removeEventListener("click", handler, false);
      }
    </script>
  </body>
</html>

效果如下所示：

在上面代码中，如果我们不添加 removeEventListener 的话，当你点击按钮，警告框会一直弹出，但添加了 removeEventListener，点击一次后，事件被移除，警告框不会被弹出。

13.原生 AJAX

知识点

XMLHttpRequest 对象
open 和 send 方法
onreadystatechange 函数

13.1.认识 AJAX

AJAX 的英文全称为 Asynchronous JavaScript And XML，Asynchronous 是异步的意思。何为异步呢？在这里异步是指通过 AJAX 向服务器请求数据，在不刷新整个页面的情况下，更新页面上的部分内容。

其工作原理图如下所示：

用户在浏览器执行一些操作，通过 AJAX 引擎发送 HTTP 请求到服务器请求数据，请求成功后，由服务器把请求的数据拿给 AJAX 引擎，再由 AJAX 拿给浏览器。AJAX 在这个过程中相当于是服务员，用户点好菜，由服务员把菜单交给厨师，厨师做好菜，由服务员把菜送到用户的餐桌上。

同学们可能会想，我直接把菜单交给厨师，省去中间人沟通岂不是更简单？

浏览器如果直接向服务器请求数据的话，在请求过程中，你是不能对页面进行其他操作的，这叫同步请求，而把请求数据这个活外包给 AJAX 后，在请求过程中，用户还是可以对页面进行其他操作，这就是我们的异步请求了，也是 AJAX 的核心特点。

了解了 AJAX，接下来我们学一下 AJAX 的创建吧！

13.2.创建 AJAX 的基本步骤

1. 创建 XMLHttpRequest 对象

在 AJAX 中，XMLHttpRequest 对象是用来与服务器进行数据交换的。其创建如下所示：

var httpRequest = new XMLHttpRequest();

为了保证浏览器的兼容性，我们可以用以下方式来创建。

if (window.XMLHttpRequest) {
  // Mozilla，Safari，IE7+ 等浏览器适用
  httpRequest = new XMLHttpRequest();
} else if (window.ActiveXObject) {
  // IE 6 或者更老的浏览器适用
  httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
}

2.向服务器发送请求

在步骤一中我们已经创建了用于服务器交换数据的 XMLHttpRequest 对象，要向服务器发送请求，我们需要调用该对象中的 open 和 send 方法。

其使用如下：

// 规定发送请求的一些要求
httpRequest.open("method", "url", async);
// 将请求发送到服务器
httpRequest.send();

open 方法中的参数说明如下：

method 是请求的类型，常见的有 GET 和 POST。
url 是请求的地址。
async 是设置同步或者异步请求，其值为布尔类型，当为 true 时，使用异步请求；当为 false 时，使用同步请求，默认为 true。

3.服务器响应状态

我们使用 HTTP 请求数据后，请求是否成功，会反馈给我们相应的请求状态。我们使用 onreadystatechange 去检查响应的状态，当 httpRequest.readyState 为 4 并且 httpRequest.status 等于 200 时，说明数据请求成功，其使用如下：

httpRequest.onreadystatechange = function () {
  if (httpRequest.readyState == 4 && httpRequest.status == 200) {
    // 请求成功执行的代码
  } else {
    // 请求失败执行的代码
  }
};

13.3.AJAX 的使用

新建一个 index.html 文件，在该文件中写入以下内容。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>AJAX 的使用</title>
    <script>
      window.onload = function () {
        if (window.XMLHttpRequest) {
          // Mozilla，Safari，IE7+ 等浏览器适用
          var httpRequest = new XMLHttpRequest();
        } else if (window.ActiveXObject) {
          // IE 6 或者更老的浏览器适用
          var httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
        }
        // 规定发送请求的一些要求
        httpRequest.open(
          "GET",
          "https://jsonplaceholder.typicode.com/users",
          true
        );
        // 将请求发送到服务器
        httpRequest.send();
        httpRequest.onreadystatechange = function () {
          console.log(httpRequest.readyState);
          console.log(httpRequest.status);
          if (httpRequest.readyState == 4 && httpRequest.status == 200) {
            // 请求成功执行的代码
            document.getElementById("item").innerHTML = "请求成功";
          } else {
            // 请求失败执行的代码
            document.getElementById("item").innerHTML = "请求失败";
          }
        };
      };
    </script>
  </head>
  <body>
    <div id="item"></div>
  </body>
</html>

完成上面代码后，开启 8080 端口，打开 Web 服务和控制台可以看到如下效果。

在控制台中输出的 200 是 HTTP 的响应状态码，该状态码还有其他取值，感兴趣的同学可以阅读 HTTP response status codes。

而穿插在 200 之后的数字 2、3、4 是 readyState 的值，它的取值有以下几种：

0 代表未初始化请求。
1 代表已与服务器建立连接。
2 代表请求被接受。
3 代表请求中。
4 代表请求完成。

13.正则表达式

知识点

正则表达式
表单验证

什么是正则表达式

正则表达式是用来验证字符串的模版，开发中为了验证邮箱、手机号、身份证号等字符串是否符合要求，通常会使用正则表达式。

作为匹配字符串的模版，正则表达式本身也是字符串，例如 aaa 就是一个最简单的正则表达式，只不过该表达式只能匹配字符串 aaa，如果一个正则表达式只能匹配 aaa 那么它作为正则表达式的意义就没多大了。真正的正则表达式是能够匹配多个字符串的通用的字符串。

如何使用正则表达式

正则表达式的使用大致分为两步：

第一步：编写一个正则表达式。

var regularExpression = /正则表达式/;

/ / 里面写的内容就是我们的正则表达式，具体写法因为比较复杂我们稍后再说。我们先来学习如何使用写好的正则表达式进行验证。

第二步：使用正则表达式验证目标字符串。

假设第一步我们的正则表达式已经编写完毕，那么我们使用正则表达式去验证目标字符串是否符合格式要求很简单，只需要使用下列代码验证即可。

var flag = regularExpression.test("目标字符串");

上述代码调用了正则表达式的 test 方法进行验证，调用时传入一个需要验证的目标字符串，验证通过返回 true ，不通过返回 false。

如何编写一个正则表达式

常用的正则表达式如下：

常用表达式

表达式	描述
[a-z]	查找任何从小写 a 到小写 z 的字符
[A-Z]	查找任何从大写 A 到大写 Z 的字符
[0-9]	查找任何从 0 至 9 的数字
[abc]	查找括号内的任意一个字符
[^abc]	查找除了括号内的任意字符

常用的元字符（特殊字符）

字符	描述
\w	匹配数字、字母、下划线
\W	匹配非数字、字母、下划线
\d	匹配数字
\D	匹配非数字
\s	匹配空白字符（空格、换行）
\S	匹配非空白字符
\n	匹配换行符

常用的限定符

字符	描述
*	匹配前面的子表达式零次或多次
+	匹配前面的子表达式一次或多次
?	匹配前面的子表达式零次或一次
{n}	匹配确定的 n 次
{n,}	至少匹配 n 次
{n,m}	最少匹配 n 次且最多匹配 m 次

常用的修饰符

修饰符	描述
i	执行对大小写不敏感的匹配。
g	执行全局匹配（查找所有匹配而非在找到第一个匹配后停止）。
m	执行多行匹配。

其他

修饰符	描述
^	以...开始
$	以...结束

具体可以参考 w3school 正则表达式

使用正则表达式验证用户名

前面为大家列举了常用的正则表达式符号等，接下来让我们进入到具体的正则表达式的编写中来吧！

打开线上环境，新建 reg1.html，实现用户名长度为 6-10，且只能由字母组成的正则表达式。

编写代码如下:

<!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></title>
    <script>
      window.onload = function () {
        var userForm = document.getElementById("userForm");
        var usernameText = document.getElementById("username");
        var msg = document.getElementById("msg");
        btn1.onclick = function () {
          var regExp = /^[a-zA-Z]{6,10}$/;
          if (!regExp.test(username.value)) {
            msg.innerHTML = '<b style="color:red;">用户名格式不正确</b>';
          } else {
            // 提交表单
            userForm.submit();
          }
        };
      };
    </script>
  </head>
  <body>
    <div id="msg"></div>
    <form id="userForm" action="handle.html" method="get">
      用户名: <input type="text" id="username" />
      <input id="btn1" type="button" value="提交" />
    </form>
  </body>
</html>

新建 handle.html，作为验证成功后的跳转页面。编写代码如下：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    我是处理表单的代码...
  </body>
</html>

运行 reg1.html，用户输入非字母值时或用户名长度不在 6-10 位，点击提交都会显示“用户名格式不正确”，输入内容后提交，可以提交到 handle.html 页面处理。效果如下：

使用正则表达式验证邮箱

在 reg1.html 中加入邮箱文本框，然后使用正则表达式验证邮箱格式是否合法，要求邮箱的 @ 符前面有 5 到 10 个字符，@ 后面至少 1 个字符，以 com、net、org 结尾，代码如下：

<!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></title>
    <script>
      function isEmail(email) {
        //验证规则：5-10个字符@1个或多个以上字符，以com、net、org结尾
        var regExp = /^\w{5,10}@\w+\.(com|net|org)$/;

        var flag = regExp.test(email);

        return flag;
      }

      window.onload = function () {
        var userForm = document.getElementById("userForm");
        var usernameText = document.getElementById("username");
        var emailText = document.getElementById("email");
        var msg = document.getElementById("msg");
        btn1.onclick = function () {
          var username = usernameText.value;
          var email = emailText.value;

          if (!isEmail(email)) {
            msg.innerHTML = '<b style="color:red;">邮箱格式不正确</b>';
          } else {
            // 提交表单
            userForm.submit();
          }
        };
      };
    </script>
  </head>
  <body>
    <div id="msg"></div>
    <form id="userForm" action="handle.html" method="get">
      用户名: <input type="text" id="username" /> <br />
      邮箱：<input type="text" id="email" /><br />
      <input id="btn1" type="button" value="提交" />
    </form>
  </body>
</html>

运行 reg1.html，效果如下：

波克比~

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
javascript

目录1.考点解析1.1.考点 1.2.考情1.3.JavaScript考题形式1.4.如何备考2.认识 JavaScript3.JavaScript 变量 4.数据类型4.1.基本数据类型的使用4.2.引用数据类型的使用4.3.查看数据类型5.运算符与表达式 5.1.算术运算符5.2.比较运算符5.3.赋值运算符5.4.逻辑运算符5.5.条件运算符6.分支与循环6.1分支结构6.1.16.1.2.switch 语句6.2.循环结构6.2.1.while 语句6.2.2.do...while 语句6.2.3.
复制链接

扫一扫