前端----JavaScript

一、JavaScript 概述

JavaScript 是属于 HTML 和 Web 的编程语言。其代码在发往客户端运行之前不需要经过编译，而是将文本格式的代码交给浏览器由浏览器进行解释运行。

JavaScript是目前世界上最流行的脚本语言之一。

作为一个合格的后端开发人员，必须熟悉精通 JavaScript 。

二、JavaScript 入门

1、引入 JavaScript

方式一：内部标签引入

在 HTML 代码的头部引入

<head><meta charset="UTF-8"><title>Title</title><script>//这里写JavaScript代码</script>
</head>

方式二：引入外部的 JS 代码

<head><meta charset="UTF-8"><title>Title</title><script src="hello.js"></script>
</head>

2、基本语法入门

1、JavaScript 语法是一套规则，它定义了 JavaScript 的语言结构。

JavaScript 中所有的变量都使用 var 关键字定义。

//变量类型 变量名 = 值;
var x, y;   // 如何声明变量
x = 7; y = 8; // 如何赋值
z = x + y;    // 如何计算值

2、数据类型

基本数据类型
在 JavaScript 中是不区分整数和小数的。

100//整数
1.01//浮点数
-99//负数
NaN// not a number
Infinity//表示无限大的一个数

字符串

//用单引号或者双引号包起来
"初级"
'中级'

字符串中的方法：

    <script>var str = "zhangsanlisiwangwu";let length = str.length;//字符串的长度let index = str.indexOf('z');//获取字符串中某个字符的下标let subString = str.substring(0,8);//按照指定的字符串下标截取字符串let toUpperCase = str.toUpperCase();//将字符串转为大写</script>

布尔值

true
false

逻辑运算符

&& //两边都为true，结果为true
|| //一边为true，结果为true
! //假为真，真为假

比较运算符

= //赋值运算符
== //等于符号（数据类型不一样，值一样，结果为true）
=== ///绝对等于（数据类型一样，值一样。结果为true）

null和undefined

null //在内存中定义了，但没有值
undefined //未定义

数组
JavaScript 和 Java 中数组的不同之处就在于 JavaScript 中的数组中的元素的数据类型可以不一样。

var arr = [123,"zhangsan",true,0.01,null,NaN];

数组中的方法：

    <script>'use strict';let arr = [0.1,1,true,"String",null,NaN];let length = arr.length;//获取数组的元素个数let indexOf = arr.indexOf(1);//获取数组中某个元素在数组中的下标let slice = arr.slice(0,3);//截取数组的一部分，返回一个新数组arr.push("zhaohang");//给数组的尾部压入一个元素arr.pop();//将数组尾部的元素弹出arr.unshift("koko");//给数组的头部压入一个元素arr.shift();//弹出数组首部的一个元素arr.sort();//给数组中的元素排序arr.reverse();//将数组中的元素翻转let newArr = ['A','B','C'];let concat = arr.concat(newArr);//将两个数组连接起来，返回一个新的数组let s = arr.join('--');//使用特定的字符串连接数组中的元素let multArr  = [[1,2,3],['a','b','c','d']];//二维数组</script>

对象
对象要用大括号括起来，里面写它的属性；

 var student = {name: "zhaohang",age: 20,hobby: ["java","basketball","games"]}//   如果要取对象属性的值，就像 Java 中一样。student.age;student.name;student.hobby;

3、ES6的严格检查模式

在IDEA中打开 settings 搜索 ES6 找到 JavaScript 将 ES 版本设置为ES6.

在代码中开启严格检查模式：

'use strict'; //开启严格检查模式var i = 1;

3、流程控制

if 判断

   <script>var person = {name: "zhangsan",age: 20,sex: '男'}if (person.name == "zhangsan") {if (person.age >= 18) {if (person.sex == '男') {console.log("hello,zhangsan");}else {console.log("Bye");}}}</script>

执行结果：

while循环

var age = 10;while (age < 100) {console.log(age);age++;}

for 循环

for (let i = 0; i < 100; i++){console.log(i);}

forEach 循环

 var players = ["Kobe","Lebron","Curry","Aodi","Irving","Love","Smith"];players.forEach(function (value) {console.log(value);})

执行结果：

for In 循环

 for (var num in  players){if (players.hasOwnProperty(num)) {console.log("存在");console.log(players[num]);}}

4、Map 和 Set

Map 集合保存键值对。任何值(对象或者原始值) 都可以作为一个键或一个值。 构造函数Map可以接受一个数组作为参数。

Map 集合中的方法：

set(key, val): 向Map中添加新元素
get(key): 通过键值查找特定的数值并返回
has(key): 判断Map对象中是否有Key所对应的值，有返回true,否则返回false
delete(key): 通过键值从Map中移除对应的数据
clear(): 将这个Map中的所有元素删除

案例：

   <script>var map = new Map([[1,"zhangsan"],[2,"lisi"],[3,"wangwu"]]);map.set(4,"lili");//通过set添加或修改键值对元素map.get(4);//通过键获取值map.delete(1);//通过键删除这个键值对映射关系</script>

Map 集合的遍历方法：

keys()：返回键名的遍历器
values()：返回键值的遍历器
entries()：返回键值对的遍历器
forEach()：使用回调函数遍历每个成员

案例：

        //遍历键for (let key of map.keys()) {console.log(key);}//遍历值for (let value of map.values()) {console.log(value);}//遍历每个键值对得到的是每个键值对的数组for (let entry of map.entries()) {console.log(entry);}//使用回调函数遍历每个成员for (let [key, value] of map) {console.log(key,value);}

Set 无序不重复的集合：

Set对象允许你存储任何类型的值，无论是原始值或者是对象引用。它类似于数组，但是成员的值都是唯一的，没有重复的值。

Set 本身是一个构造函数，用来生成Set 数据结构。Set函数可以接受一个数组（或者具有 iterable 接口的其他数据结构）作为参数，用来初始化。

Set 集合存储的值总是唯一的。

Set 集合中的方法：

add(value)：添加某个值，返回 Set 结构本身(可以链式调用)。
delete(value)：删除某个值，删除成功返回true，否则返回false。
has(value)：返回一个布尔值，表示该值是否为Set的成员。
clear()：清除所有成员，没有返回值。

案例：

 var set = new Set([1,2,3,4,"hello","JavaScript"]);set.add(true);set.has("hello");set.delete(true);

Set 集合的遍历：

keys()：返回键名的遍历器。
values()：返回键值的遍历器。
entries()：返回键值对的遍历器。
forEach()：使用回调函数遍历每个成员。

因为 Set 结构的特殊性，所以keys和values的返回值是一样的。

案例：

 //遍历set集合的值for (let key of set.keys()) {console.log(key);}for (let value of set.values()) {console.log(value);}for (let entry of set.entries()) {console.log(entry);}for (let i of set) {console.log(i);}set.forEach(value => console.log(value));

三、函数

JavaScript 函数是被设计为执行特定任务的代码块，函数会在某代码调用它时被执行。

1、函数的定义方式：

        //方式一：function abs(i) {if (i > 0) {return i;}else {return -i;}}//方式二：var abs1 = function (j) {if (j > 0) {return j;}else {return -j;}}

2、关键字 arguments 和关键字 rest

arguments 是 JS 中代表传递进来的所有的参数是一个数组的关键字。

        function abs(i) {console.log(i);for (var i = 0; i < arguments.length; i++) {console.log(arguments[i]);}if (i > 0) {return i;}else {return -i;}}

关键字 rest 是ES6引入的新特性， 它的作用是获取除了已经定义的参数之外的所有参数，使用时只能写在所有参数的后面，并且用 … 标识。

        function run(a, b, c, ...rest) {console.log(a);console.log(b);console.log(c);console.log(rest);}

3、变量的作用域

在 JavaScript 中，var 定义的变量是有作用域的，比如在函数体内声明，就不能在函数体外使用，如果两个函数使用了相同的变量名，但都是是在函数体内部，就不会发生冲突。

内部函数可以使用外部函数的变量，但反之则不行。

案例：

  function test() {var x = "X" + y;console.log(x);var y = "Y";}

执行结果：

说明 JS 的执行引擎自动提升了 y 的声明，但不会提升变量 y 的赋值。

局部变量声明的关键字 let

解决了局部作用域冲突的问题。

案例：

for (var i = 0; i < 100; i++) {console.log(i);
}
console.log(i + 1);

执行结果：

可以看出在 for 循环之外还可以使用变量 i ；但使用 let 定义变量之后，就不能再 for 循环的外部使用局部变量 i 了，显示未定义变量。

        for (let i = 0; i < 100; i++) {console.log(i);}console.log(i + 1);

常量const

在 ES6 之前，使用全部大写的字母命名的变量就是常量，但在 ES6 之后，加入了关键字 const，

const PI = 3.14;//使用const定义的变量就是常量。

4、方法

定义方法： 方法就是把函数放在对象的内部，对象内部只存在属性和方法。

        var person = {name: "zhaohang",birth: 2000,age: function () {var now = new Date().getFullYear();return now - this.birth;}}

在上面定义的这个对象中，age属性就是通过它的方法来计算得到结果的。
上面的this代表什么呢？学习过Java的同学都知道，this 指的是本类对象的引用，在 JavaScript 中，this 默认指向调用它的那个对象。

在 JS 中，我们还可以通过关键字 apply 控制 this 的指向。

        function getAge() {var now = new Date().getFullYear();return now - this.birth;};var xiaohu = {name: "xiaohu",birth: 1997,age: getAge};getAge.apply(xiaohu,[]);//将this指向了xiaohu，参数为空！

执行结果：

四、内部对象

1、Date 对象

Date 对象的基本方法：

    <script>let date = new Date();date.getTime();//获取当前的时间戳 全世界统一 从1970.1.1 0:00:00开始到现在经过的毫秒数date.getFullYear();//获取当前的年份date.getMonth();//获取当前的月份date.getDay();//获取当前是星期几date.getHours();//获取时date.getMinutes();//获取分date.getSeconds();//获取秒date.toLocaleString();//将当前日期转换为 时间字符串 例子："2020/1/31 下午6:32:08"</script>

2、JSON

JSON 是什么？

1、JSON（JavaScript Object Notation JS对象的简称）是一种轻量级的数据交换格式；
2、简洁和清晰的层次及结构使得 JSON 成为理想的数据交换语言；
3、JSON 分为 JSON 字符串和 JSON 对象。

在 JavaScript 中一切皆为对象，任何 JS 支持的类型都可以使用 JSON 来表示。

JSON 格式：

1、对象都用{}
2、数组都用[]
3、所有的键值对都用 key：value

JSON 字符串和 JS 对象的转换

    <script>var person = {name: "zhaohang",age: 20,hobby: "code"};//将JS对象转换为JSON字符串 '{"name":"zhaohang","age":20,"hobby":"code"}'let JSONStr = JSON.stringify(person);//将JSON字符串转换为JS对象let obj = JSON.parse(JSONStr);</script>

JS 对象和 JSON 的区别：

//JS对象时用大括号包含起来的
var person = {name:"zhangsan",age:15};
//JSON 是一个字符串
var person = '{"name":"zhangsan","age","15"}';

五、面向对象编程

原型对象

原型对象就像 Java 中的继承类似，可以拥有父类的属性和方法。

案例：

    <script>var Person = {name: "zhaohang",age: 20,eat: function () {console.log(this.name + " is eating")}};var xiaohu = {name: "xiaohu"};xiaohu.__proto__ = Person;//将xiaohu的原型对象设置为Personxiaohu.eat();//xiaohu就拥有了原型对象Person的方法eat</script>

在 ES6 之前，要给 Person 新增一个方法的操作：

 Person.prototype.hello = function () {console.log("Hello");}

在 ES6 之后，引入了 class 关键字，其用法和 Java 中的用法很相似。

定义一个类，包含属性和方法

    <script>class Student {constructor(name) {this.name = name;}run() {console.log(this.name + " is running");}}let xiaohu = new Student("xiaohu");let xiaoming = new Student("xiaoming");xiaohu.run();</script>

继承

    <script>class Student {constructor(name) {this.name = name;}run() {console.log(this.name + " is running");}}let xiaohu = new Student("xiaohu");let xiaoming = new Student("xiaoming");xiaohu.run();class collegeStudent extends Student {constructor(name,grade) {super(name);this.grade = grade;}show() {console.log("年级" + this.grade)}}let collegeStudent1 = new collegeStudent("xiaozhang",11);collegeStudent1.run();collegeStudent1.show();</script>

六、操作 BOM 对象

BOM（Browser Object Mode）对象：浏览器对象模型

JavaScript 的诞生就是为了能够让它在浏览器中运行。

window(浏览器窗口)

loaction （代表当前页面的 URL 信息）

document 对象（代表当前的页面）

每个载入浏览器的 HTML 文档都会成为 Document 对象。

我们可以获取具体的文档树节点：

<body>
<dl id="element"><dt>fruit</dt><dd>apple</dd><dd>orange</dd><dd>banana</dd>
</dl>
<ol id="app"><li>name</li><li>age</li><li>hobby</li>
</ol>
</body>

    <script>document.getElementById("element");document.getElementById("app");</script>

执行结果：

获取Cookie

document.cookie
"__guid=111872281.103265421215547730.1580265797784.651; monitor_count=211"

七、操作 DOM 对象

每个载入浏览器的 HTML 文档都会成为 Document 对象。 Document 对象使我们可以从 JS 中对 HTML 页面中的所有元素进行访问。

浏览器网页就是一个 DOM 树形结构

对于 DOM 节点的四种操作：

更新：更新 DOM 节点
遍历：得到 DOM 节点
添加：添加一个新的 DOM 节点
删除：删除一个 DOM 节点

1、获得 DOM 节点的方法：

getElementById() 返回对拥有指定 id 的第一个对象的引用。
getElementsByClassName() 返回对拥有指定 class 类名的对象集合。
getElementsByName() 返回带有指定名称的对象集合。
getElementsByTagName()  返回带有指定标签名的对象集合。

2、更新节点：

操作文本

<body>
<h1>一级标题</h1>
<p id="p1"></p>
<p id="p2">
</p>
<script>let p1= document.getElementById('p1');let p2= document.getElementById('p2');elementById.innerText="hello"; //给id为p1的标签添加文本“hello”elementById1.innerHTML="<strong>你好</strong>"; //给id为p2的标签添加html语句
</script>
</body>

操作CSS

p1.style.color= 'red'; //将id为p1的标签字体颜色设置为 “red”
p2.style.fontSize='30px'; //将id为p2的标签字体大小设置为“30px”

3、插入 DOM 节点

在节点后面追加节点

<body>
<p id="JavaWeb">JavaWeb</p>
<div id="list"><p id="Java">Java</p><p id="JavaSe">JavaSe</p><p id="JavaEe">JavaEe</p><script>let list = document.getElementById('list');let JavaWeb = document.getElementById('JavaWeb');list.appendChild(JavaWeb);//给list后面插入节点 JavaWeb</script>
</div>
</body>

创建一个新的节点，插入这个节点

    <script>let list = document.getElementById('list');let JavaWeb = document.getElementById('JavaWeb');//创建一个新的节点，实现插入let newP = document.createElement('p');//创建一个P标签的节点newP.className = "newP";//给p标签加一个类选择器，类名newPnewP.innerText = "Create New Element";//p标签中的添加文本内容//创建一个style标签let myStyle = document.createElement('style');//创建一个style标签myStyle.setAttribute('type','text/css');//给这个标签设置属性myStyle.innerHTML = 'body{background-color: blanchedalmond;}';//给这个标签添加HTML语句document.getElementsByTagName('head')[0].appendChild(myStyle);//把这个标签追加到head标签的后面</script>

4、删除节点

<body>
<div id="father"><h1 id="h1">标题一</h1><p id="p1">p标签1</p><p id="p2">p标签2</p>
</div>
<script>let father = document.getElementById('father');//获取到父级元素的节点father.removeChild(h1);//删除父级元素的中的节点//通过子节点获取父节点，然后在用父节点删除子节点let p1 = document.getElementById('p1');let father1 = p1.parentElement;father1.removeChild(p1);//通过父节点的下标删除子节点,删除多个节点的时候，这是一个动态的过程，删除了第一个元素，第二个元素的下标已经变为0了。father1.removeChild(father1.children[0]);
</script>

八、操作表单

一个表单有三个基本组成部分：

表单标签：这里面包含了处理表单数据所用CGI程序的URL以及数据提交到服务器的方法。

表单域： 包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等。

表单按钮： 包括提交按钮、复位按钮和一般按钮。

获取表单要提交的信息

<body>
<form action="post"><p><span>用户名:</span><input type="text" id="username"></p><p><span>密码:</span><input type="password" id="pwd"></p><p><span>性别:</span><input type="radio" name="sex" value="man" id="boy"> 男<input type="radio" name="sex" value="woman" id="girl"> 女</p>
</form>
<script>let input_text = document.getElementById('username');let input_pwd = document.getElementById('pwd');let boy_radio = document.getElementById('boy');let girl_radio = document.getElementById('girl');//对于单选框和复选框,value只能获取当前选项的值，而不能获取到选择的结果。let value = girl_radio.value;//获取选项的值let checked = boy_radio.checked;//返回一个布尔值，结果为选项是否被选中。
</script>
</body>

表单提交优化：使用MD5加密密码，提高安全性

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script>
</head>
<body>
<!--
表单绑定提交事件
οnsubmit= 绑定一个提交检测的函数， true， false
将这个结果返回给表单，使用 onsubmit 接收！
οnsubmit="return hiddenPwd()"
-->
<form action="https://www.baidu.com/" method="post" onsubmit="return hiddenPwd()"><p><span>用户名:</span><input type="text" id="username" name="username" required></p><p><span>密码:</span><input type="password" id="input-pwd"></p><p><span>性别:</span><input type="radio" name="sex" value="man" id="boy"> 男<input type="radio" name="sex" value="woman" id="girl"> 女</p><p><input type="hidden" id="md5-password" name="password"></p><p><button type="submit">提交</button></p>
</form>
<script>function hiddenPwd() {alert(1);var name = document.getElementById('username');var pwd = document.getElementById('input-pwd');var md5pwd = document.getElementById('md5-password');md5pwd.value = md5(pwd.value);return true;}
</script>
</body>
</html>

提交一个表单信息后查看获取到的表单信息。

可以得到一个MD5加密的密码信息。

JavaScript 的基本内容就是上面这些。