前端----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的原型對象設置爲Person
        xiaohu.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標籤加一個類選擇器，類名newP
        newP.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

一、JavaScript 概述

二、JavaScript 入門

1、引入 JavaScript

2、基本語法入門

1、JavaScript 語法是一套規則，它定義了 JavaScript 的語言結構。

2、數據類型

3、ES6的嚴格檢查模式

3、流程控制

4、Map 和 Set

三、函數

1、函數的定義方式：

2、關鍵字 arguments 和關鍵字 rest

3、變量的作用域

4、方法

四、內部對象

1、Date 對象

2、JSON

五、面向對象編程

六、操作 BOM 對象

七、操作 DOM 對象

1、獲得 DOM 節點的方法：

2、更新節點：

3、插入 DOM 節點

4、刪除節點

八、操作表單

JavaScript 的基本內容就是上面這些。

JavaSE——Java8之函數式接口、函數式編程、Lambda表達式

Mybatis學習（一）Mybatis簡介、編寫第一個Mybatis程序

JavaWeb學習（二）Maven

數據庫學習----MySQL（一）

MyBatis學習（二）使用註解開發、Mybatis 執行流程、一對多多對一的結果集映射

Mac下配置sublime實現LaTeX

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結