第二章 JavaScript

万有引力_LH

已于 2022-11-23 10:39:09 修改

阅读量217

点赞数

分类专栏：前端文章标签： javascript 开发语言 ecmascript

于 2022-11-23 10:38:56 首次发布

本文链接：https://blog.csdn.net/weixin_43352648/article/details/127995813

版权

前端专栏收录该内容

6 篇文章 0 订阅

订阅专栏

内容来源于蓝桥杯竞赛，自己根据这个题纲重新巩固下前端的知识

第二章 JavaScript

JavaScript 变量

变量名由字母、下划线、$ 或数字组成，并且必须由字母、下划线、$ 开头。
变量名不能命名为[系统关键字和保留字](https://labfile.oss.aliyuncs.com/courses/3773/JavaScript 保留关键字总结-阿里云开发者社区.pdf)。

数据类型

基本数据类型和引用数据类型

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

运算符与表达式

算术运算符：+、-、*、/、%、++、–
比较运算符：>、<、>=、<=、!=、…
赋值运算符：=、+=、-=、*=、/=
逻辑运算符：&&、||、!
条件运算符：条件表达式 ? 表达式 1 : 表达式 2

分支与循环

if 语句。
switch 语句。
while 语句

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

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

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

函数

变量的作用域

局部和全局

内置对象

数学对象

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)	返回欧拉常数的参数次方。

日期对象

常用方法如下所示：

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

数组对象

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

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

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

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

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

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

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

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

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

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

字符串对象

var str = new String("HELLO");

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

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

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

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

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

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

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

DOM 与 BOM

DOM（ Document Object Model）

属性	描述
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 方法如下表所示：

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

<!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>
    <p id="demo">蓝桥云课</p>
    <button onclick="changeColor()">改变颜色</button>
    <button onclick="createElem()">创建元素</button>
    <div class="item"></div>
    <button onclick="addText()">添加内容</button>
    <script>
      // 改变元素的颜色
      function changeColor() {
        document.getElementById("demo").style.color = "blue"; // 通过 id 改变指定元素的样式
      }
      // 创建一个指定名字的按钮
      function createElem() {
        var btn = document.createElement("BUTTON"); // 创建元素节点
        var t = document.createTextNode("确认"); // 创建文本节点
        btn.appendChild(t);
        document.body.appendChild(btn); // 在 body 中添加一个元素。
      }
      // 在指定标签中添加内容
      function addText() {
        var e = document.getElementsByClassName("item");
        e[0].innerHTML = "蓝桥云课是国内领先的 IT 在线编程及在线实训学习平台。";
      }
    </script>
  </body>
</html>

BOM（Browser Object Mode）

window 对象的方法如下所示：

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

<!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>
      // 警告框
      function myFunction1() {
        alert("你好!");
      }
      // 输入对话框
      function myFunction2() {
        var info;
        var name = prompt("请输入你的名字", "");
        info = "欢迎" + name + "的到来！";
        document.getElementById("demo").innerHTML = info;
      }
    </script>
  </head>
  <body>
    <div id="demo"></div>
    <input type="button" onclick="myFunction2()" value="欢迎" />
    <input type="button" onclick="myFunction1()" value="点我" />
  </body>
</html>

事件

鼠标事件

window.onload

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

<!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>
      div {
        width: 70px;
        height: 70px;
        background-color: #b8b5ff;
      }
    </style>
    <script>
      window.onload = function () {    
        var value = document.getElementById("item");
        value.onclick = function () {
          value.style.background = "#ffefa1";
        };
      };
    </script>
  </head>
  <body>
    <div id="item"></div>
  </body>
</html>

键盘事件

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

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

出当按下键盘输入文字时，字体颜色变成了蓝色，当我们松开按下的键盘时，文字又变成了黑色。

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

表单事件

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

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

event 对象

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

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

当你输入的是 shift、alt、ctrl 键时，输入框的下方会出现红色字样的提示语；当你输入其他键时，会打印其对应的键值码。


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

DOM 0 级事件与 DOM 2 级事件

DOM 0 就是可以在html中直接赋值函数操作，也可以在js中定义函数。但是当同一个标签对应两个函数时只会执行第二个。解决这个问题就需要使用DOM 2级事件，DOM 2 级事件可以让多个事件执行。

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

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

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

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

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

原生 AJAX

创建 XMLHttpRequest 对象

var httpRequest = new XMLHttpRequest();
向服务器发送请求

open 方法中的参数说明如下：
- method 是请求的类型，常见的有 GET 和 POST。
- url 是请求的地址。
- async 是设置同步或者异步请求，其值为布尔类型，当为 true 时，使用异步请求；当为 false 时，使用同步请求，默认为 true。
```
// 规定发送请求的一些要求
httpRequest.open("method", "url", async);
// 将请求发送到服务器
httpRequest.send();
```

服务器响应状态

ttpRequest.onreadystatechange = function () {
  if (httpRequest.readyState == 4 && httpRequest.status == 200) { 
         // 0 代表未初始化请求。
         // 1 代表已与服务器建立连接。
         // 2 代表请求被接受。
         // 3 代表请求中。
         // 4 代表请求完成。
    // 请求成功执行的代码
  } else {
    // 请求失败执行的代码
  }
};

XMLHttpRequest 对象

open 和 send 方法

onreadystatechange 函数

正则表达式

// 1.编写正则表达式
var regularExpression = /正则表达式/;
// 2.验证目标字符串
var flag = regularExpression.test("目标字符串");

常用表达式

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

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

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

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

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