0、前端知識體系
想要成為真正的“互聯網Java全棧工程師”還有很長的一段路要走，其中前端是繞不開的一門必修課。本階段課程的主要目的就是帶領Java后台程序員認識前端、了解前端、掌握前端，為實現成為“互聯網Java全棧工程師”再向前邁進一步。
0.1、前端三要素
-
HTML（結構）：超文本標記語言（Hyper Text Markup Language），決定網頁的結構和內容
-
CSS（表現）：層疊樣式表（Cascading Style Sheets），設定網頁的表現樣式。
-
JavaScript（行為）：是一種弱類型腳本語言，其源碼不需經過編譯，而是由瀏覽器解釋運行，用於控制網頁的行為
0.2、結構層（HTML）
太簡單，略
0.3、表現層（CSS）
CSS層疊樣式表是一門標記語言，並不是編程語言，因此不可以自定義變量，不可以引用等，換句話說就是不具備任何語法支持，它主要缺陷如下：
-
語法不夠強大，比如無法嵌套書寫，導致模塊化開發中需要書寫很多重復的選擇器；
-
沒有變量和合理的樣式復用機制，使得邏輯上相關的屬性值必須以字面量的形式重復輸出，導致難以維護； 這就導致了我們在工作中無端增加了許多工作量。為了解決這個問題，前端開發人員會使用一種稱之為【CSS預處理器】的工具,提供CSS缺失的樣式層復用機制、減少冗余代碼，提高樣式代碼的可維護性。大大的提高了前端在樣式上的開發效率。
什么是CSS預處理器
CSS預處理器定義了一種新的語言，其基本思想是，用一種專門的編程語言，為CSS增加了一些編程的特性，將CSS作為目標生成文件，然后開發者就只需要使用這種語言進行CSS的編碼工作。轉化成通俗易懂的話來說就是“用一種專門的編程語言，進行Web頁面樣式設計，再通過編譯器轉化為正常的CSS文件，以供項目使用”。
常用的CSS預處理器有哪些
-
SASS：基於Ruby ，通過服務端處理，功能強大。解析效率高。需要學習Ruby語言，上手難度高於LESS。
-
LESS：基於NodeJS，通過客戶端處理，使用簡單。功能比SASS簡單，解析效率也低於SASS，但在實際開發中足夠了，所以如果我們后台人員如果需要的話，建議使用LESS。
0.4、行為層（JavaScript）
JavaScript一門弱類型腳本語言，其源代碼在發往客戶端運行之前不需要經過編譯，而是將文本格式的字符代碼發送給瀏覽器，由瀏覽器解釋運行。
JavaScript框架
-
JQuery：大家熟知的JavaScript庫，優點就是簡化了DOM操作，缺點就是DOM操作太頻繁，影響前端性能；在前端眼里使用它僅僅是為了兼容IE6，7，8；
-
Angular：Google收購的前端框架，由一群Java程序員開發，其特點是將后台的MVC模式搬到了前端並增加了模塊化開發的理念，與微軟合作，采用了TypeScript語法開發；對后台程序員友好，對前端程序員不太友好；最大的缺點是版本迭代不合理（如1代–>2 代，除了名字，基本就是兩個東西；截止發表博客時已推出了Angular6）
-
React：Facebook 出品，一款高性能的JS前端框架；特點是提出了新概念 【虛擬DOM】用於減少真實 DOM 操作，在內存中模擬 DOM操作，有效的提升了前端渲染效率；缺點是使用復雜，因為需要額外學習一門【JSX】語言；
-
Vue：一款漸進式 JavaScript 框架，所謂漸進式就是逐步實現新特性的意思，如實現模塊化開發、路由、狀態管理等新特性。其特點是綜合了 Angular（模塊化）和React(虛擬 DOM) 的優點；
-
Axios：前端通信框架；因為 Vue 的邊界很明確，就是為了處理 DOM，所以並不具備通信能力，此時就需要額外使用一個通信框架與服務器交互；當然也可以直接選擇使用jQuery 提供的AJAX 通信功能；
UI框架
-
Ant-Design：阿里巴巴出品，基於React的UI框架
-
ElementUI、iview、ice：餓了么出品，基於Vue的UI框架
-
BootStrap：Teitter推出的一個用於前端開發的開源工具包
-
AmazeUI：又叫“妹子UI”，一款HTML5跨屏前端框架
JavaScript構建工具
-
Babel：JS編譯工具，主要用於瀏覽器不支持的ES新特性，比如用於編譯TypeScript
-
WebPack：模塊打包器，主要作用就是打包、壓縮、合並及按序加載
注：以上知識點已將WebApp開發所需技能全部梳理完畢
0.5、三端同一
混合開發（Hybrid App）
主要目的是實現一套代碼三端統一（PC、Android：.apk、iOS：.ipa）並能夠調用到設備底層硬件（如：傳感器、GPS、攝像頭等），打包方式主要有以下兩種：
-
雲打包：HBuild -> HBuildX，DCloud 出品；API Cloud
-
本地打包： Cordova（前身是 PhoneGap）
微信小程序
詳見微信官網，這里就是介紹一個方便微信小程序UI開發的框架：WebUI
1、什么是Javascript
1.1、概述
javaScript是一門世界上最流行的腳本語言 Java，JavaScript 10天 一個合格的后端人員，必須精通JavaScript
1.2、歷史
見百度
ECMAScript它可以理解為JavaScript的一個標准 最新版本已經到es6版本~ 但是大部分瀏覽器還只停留在支持es5代碼上！ 開發環境–線上環境，版本不一致
2、快速入門
2.1、引入JavaScript
1、內部標簽
<script>
//....
<script>
2、外部引入
hj.js
aert("hello,world");
test.html
<!--外部引入
注意：script必須成對出現
-->
<script src="js/hj.js"></script>
<!--不用顯示定義type，也默認就是javaScript-->
<script type="text/javascript"></script>
測試代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--script標簽內，寫Javascript代碼-->
<!--<script>
alert("hello,world");
</script>-->
<!--外部引入
注意：script必須成對出現
-->
<script src="js/hj.js"></script>
<!--不用顯示定義type，也默認就是javaScript-->
<script type="text/javascript"></script>
</head>
<body>
<!--這里也可以存放-->
</body>
</html>
2.2、基本語法入門
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--JavaScript嚴格區分大小寫-->
<script>
// 1. 定義變量 變量類型 變量名 = 變量值
var score = 1 ;
//alert(num)
// 2. 條件控制
if (score > 60 && score < 70){
alert("60~70");
}else if(score > 70 && score < 80){
alert("70~80");
}else{
alert("other")
}
</script>
</head>
<body>
</body>
</html>
瀏覽器必備調試須知：
2.3、數據類型
數值，文本，圖形，音頻，視頻
變量
var a
number
js不區分小樹和整數，Number
123//整數123
123.1//浮點數123.1
1.123e3//科學計數法
-99//負數
NaN //not a number
Infinity // 表示無限大
字符串
‘abc’ “abc”
布爾值
true，false
邏輯運算
&& 兩個都為真，結果為真
|| 一個為真，結果為真
! 真即假，假即真
比較運算符 ！！！重要！
=
1，"1"
== 等於（類型不一樣，值一樣，也會判斷為true）
=== 絕對等於（類型一樣，值一樣，結果為true）
這是一個JS的缺陷，堅持不要使用 == 比較
須知：
-
NaN === NaN，這個與所有的數值都不相等，包括自己
-
只能通過isNaN（NaN）來判斷這個數是否是NaN
浮點數問題
console.log((1/3) === (1-2/3))
盡量避免使用浮點數進行運算，存在精度問題！
Math.abs(1/3-(1-2/3))<0.00000001
數組
Java的數組必須是相同類型的對象~，JS中不需要這樣
//保證代碼的可讀性，盡量使用[]
var arr = [1,2,3,4,5,'hello',null,true];
//第二種定義方法
new Array(1,2,3,4,5,'hello');
取數字下標：如果越界了，就會 報undefined
undefined
對象
對象是大括號，數組是中括號
每個屬性之間使用逗號隔開，最后一個屬性不需要逗號
// Person person = new Person(1,2,3,4,5);
var person = {
name:'Tom',
age:3,
tags:['js','java','web','...']
}
取對象值
person.name
> "Tom"
person.age
> 3
2.4、嚴格檢查格式use strict
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--
前提：IDEA需要設置支持ES6語法
'use strict';嚴格檢查模式，預防JavaScript的隨意性導致產生的一些問題
必須寫在JavaScript的第一行！
局部變量建議都使用let去定義~
-->
<script>
'use strict';
//全局變量
let i=1
//ES6 let
</script>
</head>
<body>
</body>
</html>
3、數據類型
3.1、字符串
1、正常字符串我們使用 單引號，或者雙引號包裹
2、注意轉義字符 \
\'
\n
\t
\u4e2d \u##### Unicode字符
\x41 Ascall字符
3、多行字符串編寫
//tab 上面 esc下面
var msg =
`hello
world
你好呀
nihao
`
4、模板字符串
//tab 上面 esc下面
let name = 'Tom';
let age = 3;
var msg = `你好，${name}`
5、字符串長度
str.length
6、字符串的可變性，不可變
7、大小寫轉換
//注意，這里是方法，不是屬性了
student.toUpperCase();
student.toLowerCase();
8、student.indexof(‘t’)
9、substring，從0開始
[)
student.substring(1)//從第一個字符串截取到最后一個字符串
student.substring(1,3)//[1,3)
3.2、數組
Array可以包含任意的數據類型
var arr = [1,2,3,4,5,6];//通過下標取值和賦值
1
1、長度
arr.length
注意：假如給arr.lennth賦值，數組大小就會發生變化~，如果賦值過小，元素就會丟失
2、indexOf，
通過元素獲得下標索引
arr.indexOf(2)
1
字符串的"1"和數字 1 是不同的
3、slice（）
截取Array的一部分，返回的一個新數組，類似於String中substring
4、push()，pop()尾部
push：壓入到尾部
pop：彈出尾部的一個元素
5、unshift(),shift() 頭部
unshift：壓入到頭部
shift：彈出頭部的一個元素
12
6、排序sort()
(3)["B","C","A"]
arr.sort()
(3)["A","B","C"]
7、元素反轉reverse()
(3)["A","B","C"]
arr.reverse()
(3)["C","B","A"]
123
8、concat()
注意：concat()並沒有修改數組，只是會返回一個新的數組
9、連接符join
打印拼接數組，使用特定的字符串連接
10、多維數組
數組：存儲數據（如何存，如何取，方法都可以自己實現！）
3.3、對象
若干個鍵值對
var 對象名 = {
屬性名：屬性值，
屬性名：屬性值，
屬性名：屬性值
}
//定義了一個person對象，它有四個屬性
var person = {
name:"Tom",
age:3,
email:"123456798@QQ.com",
score:66
}
Js中對象，{…}表示一個對象，建制對描述屬性xxx：xxx，多個屬性之間用逗號隔開，最后一個屬性不加逗號！ JavaScript中的所有的鍵都是字符串，值是任意對象！ 1、對象賦值
1、對象賦值
2、使用一個不存在的對象屬性，不會報錯！
undefined
3、動態的刪減屬性，通過delete刪除對象的屬性
delete
4、動態的添加，直接給新的屬性添加值即可
5、判斷屬性值是否在這個對象中！
xxx in xxx
6、判斷一個屬性是否是這個對象自身擁有的
hasOwnProperty()
3.4、流程控制
i f判斷
while循環，避免程序死循環
for循環
forEach循環
ES5.1特性
for …in-------下標
3.5、Map和Set
ES6的新特性~
Map
Set：無序不重復的集合
3.6、iterator
es6新特性
作業：使用iterator來遍歷迭代我們Map，Set！
遍歷數組
遍歷Map
遍歷set
4、函數
4.1、定義函數
定義方式一
絕對值函數
一旦執行到return代表函數結束，返回結果！
如果沒有執行return，函數執行完也會返回結果，結果就是undefined
定義方式二
function(x){…}這是一個匿名函數。但是可以吧結果賦值給abs，通過abs就可以調用函數！
方式一和方式二等價！
調用函數
abs(10)//10
abs(-10) //10
參數問題：javaScript可以傳任意個參數，也可以不傳遞參數~
參數進來是否存在問題？
假設不存在參數，如何規避？
arguments
arguments是一個JS免費贈送的關鍵字；
代表，傳遞進來的所有參數，是一個數組！
問題：arguments包含所有的參數，我們有時候想使用多余的參數來進行附加操作。需要排除已有參數~
rest
以前：
ES6引入的新特性，獲取除了已經定義的參數之外的所有參數~…
rest參數只能寫在最后面，必須用…標識。
4.2、變量的作用域
在javascript中，var定義變量實際是有作用於的。
假設在函數體重聲明，則在函數體外不可以使用~（閉包）
如果兩個函數使用了相同的變量名，只要在函數內部就不沖突
內部函數可以訪問外部函數的成員，反之則不行
假設，內部函數變量和外部函數變量，重名！
假設在JavaScript中，函數查找變量從自身函數開始~， 由“內”向“外”查找，假設外部存在這個同名的函數變量，則內部函數會屏蔽外部函數的變量。
提升變量的作用域
提升變量的作用域
結果：x undefined
說明：js執行引擎，自動提升了y的聲明，但是不會提升變量y的賦值；
這個是在javascript建立之初就存在的特性。 養成規范：所有 的變量定義都放在函數的頭部，不要亂放，便於代碼維護；
全局變量
全局對象window
alert() 這個函數本身也是一個window的變量；
javascript實際上只有一個全局作用域，任何變量（函數也可以視為變量），假設沒有在函數作用范圍內找到，就會向外查找，如果在全局作用域都沒有找到，就會報錯 Refrence
規范
由於我們的所有變量都會綁定到window上，。如果不同的js文件，使用了相同的全局變量，就會產生沖突—>如何減少這樣的沖突？
唯一全局變量
把自己的代碼全部放入自己定義的唯一空間名字中，降低全局命名沖突問題~
jQuery中就是使用的該方法：jQuery.name，簡便寫法：$()
局部作用域
ES6的let關鍵字，解決了局部作用域沖突的問題！
let關鍵字
建議大家都用let去定義局部作用域的變量；
常量
在ES6之前，怎么定義常量：只有用全部大寫字母命名的變量就是常量；建議不要修改這樣的值。
在ES6引入了
常量關鍵字 const
4.3、方法
定義方法
方法就是把函數放在對象的里面，對象只有兩個東西：屬性和方法
this.代表什么？拆開上main的代碼看看
this是無法指向的，是默認指向調用它的那個對象的；
apply
在js中可以控制this指向
5、內部對象
標准對象
5.1、Date
基本使用
轉換
5.2、JSON
JSON是什么
在javascript中，一切皆為對象，任何js支持的類型都可以用JSON表示
格式
-
對象都用{}
-
數組都用[]
-
所有的鍵值對 都是用key:value
JSON字符串和js對象轉化
很多人搞不清楚，JSON和JS對象的區別
5.3、AJAX
-
原生的js寫法 xhr異步請求
-
jQuery封裝好的方法$(#name).
-
ajax("")axios請求
6、面向對象編程
原型對象 javascript、java、c#------面向對象；但是javascript有些區別！
-
類：模板
-
對象：具體實例
在javascript中，需要大家轉換一下思維方式！ 原型：
class集繼承
class關鍵字，是在ES6引入的
1、定義一個類、屬性、方法
2、繼承
<script>
//ES6之后========================
//定義一個學生的類
class Student{
constructor(name){
this.name = name;
}
hello(){
alert('hello');
}
}
class XiaoStudent extends Student{
constructor(name,grade){
super(name);
this.grade = grade;
}
myGrade(){
alert('我是一名小學生');
}
}
var xiaoming = new Student("xiaoming");
var xiaohong = new XiaoStudent("xiaohong",1);
</script>
本質：查看對象原型
原型鏈
proto:
7、操作BOM對象（重點）
瀏覽器介紹
javascript和瀏覽器關系？
BOM：瀏覽器對象模型
-
IE6~11
-
Chrome
-
Safari
-
FireFox
-
Opera
三方
-
QQ瀏覽器
-
360瀏覽器
window
window代表瀏覽器窗口
window 
Navigator（不建議使用）
Navigator封裝了瀏覽器的信息
Navigator（不建議使用） 
大多數時候，我們不會使用navigator對象，因為會被認為修改!
不建議使用這些屬性來判斷和編寫代碼
screen
代表屏幕尺寸
screen
location(重要)
location(重要)**
location代表當前頁面的URL信息
document（內容DOM）
document（內容DOM）
document代表當前的頁面，HTML DOM文檔樹
獲取具體的文檔樹節點
獲取cookie
劫持cookie原理
www.taobao.com
服務器端可以設置cookie為httpOnly
history（不建議使用 ）
history代表瀏覽器的歷史記錄
history 
8、操作DOM對象（重點）
DOM：文檔對象模型
核心
瀏覽器網頁就是一個Dom樹形結構！
-
更新：更新Dom節點
-
遍歷Dom節點：得到Dom節點
-
刪除：刪除一個Dom節點
-
添加：添加一個新的節點
要操作一個Dom節點，就必須要先獲得這個Dom節點
獲得Dom節點
這是原生代碼，之后我們盡量都使用jQuery()
更新節點
操作文本
操作css
刪除節點
刪除節點的步驟：先獲取父節點，再通過父節點刪除自己
注意：刪除多個節點的時候，children是在時刻變化的，刪除節點的時候一定要注意。
插入節點
我們獲得了某個Dom節點，假設這個dom節點是空的，我們通過innerHTML就可以增加一個元素了，但是這個Dom節點已經存在元素了，我們就不能這么干了！會產生覆蓋
追加
創建一個新的標簽
<script>
var js = document.getElementById('js');//已經存在的節點
var list = document.getElementById('list');
//通過JS創建一個新的節點
var newP = document.creatElement('p');//創建一個p標簽
newP.id = 'newP';
newP.innerText = 'Hello,Kuangshen';
//創建一個標簽節點
var myScript = document.creatElement('script');
myScript.setAttribute('type','text/javascript');
//可以創建一個style標簽
var myStyle = document.creatElement('style');//創建了一個空style標簽
myStyle.setAttribute('type','text/css');
myStyle.innerHTML = 'body{background-color:chartreuse;}';//設置標簽內容
document.getElementByTagName('head')[0].appendChild(myStyle);
</script>
insertBefore
var ee = document.getElementById('ee');
var js = document.getElementById('js');
var list = document.getElementById('list');
//要包含的節點.insertBefore(newNode,targetNode)
list.insertBefore(js,ee);
https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js
9、操作表單form***
表單是什么？form-----DOM樹
-
文本框----text
-
下拉框----select
-
單選框----radio
-
多選框----checkbox
-
隱藏域----hidden
-
密碼框----password
-
…
表單的目的提交信息
獲得要提交的信息
<body>
<form action = "post">
<p>
<span>用戶名：</span><input type="text" id = "username" />
</p>
<!--多選框的值就是定義好的value-->
<p>
<span>性別：</span>
<input type = "radio" name = "sex" value = "man" id = "boy"/>男
<input type = "radio" name = "sex" value = "woman" id = "girl"/>女
</p>
</form>
<script>
var input_text = document.getElementById("username");
var boy_radio = document.getElementById("boy");
var girl_radio = document.getElementById("girl");
//得到輸入框的值
input_text.value
//修改輸入框的值
input_text.value = "value";
//對於單選框，多選框等等固定的值，boy_radio.value只能取到當前的值
boy_radio.checked;//查看返回的結果，是否為true，如果為true，則被選中。
girl_radio.checked = true;//賦值
</script>
</body>
提交表單。md5加密密碼，表單優化
onsubmit = "return aaa()"
onclick
md5加密
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<title>Title</title>
<!--MD5加密工具類-->
<script src = "https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js">
</script>
</head>
<body>
<!--表達綁定提交事件
οnsubmit= 綁定一個提交檢測的函數，true，false
將這個結果返回給表單，使用onsubmit接收
-->
<form action = "https://www.baidu.com" method = "post" onsubmit = "return aaa()">
<p>
<span>用戶名：</span><input type="text" id = "username" name = "username"/>
</p>
<p>
<span>密碼：</span><input type="password" id = "password" />
</p>
<input type = "hidden" id = "md5-password" name = "password">
<!--綁定事件 onclick 被點擊-->
<button type = "submit">提交</button>
</form>
<script>
function aaa(){
alert(1);
var username = document.getElementById("username");
var pwd = document.getElementById("password");
var md5pwd = document.getElementById("md5-password");
//pwd.value = md5(pwd,value);
md5pwd.value = mad5(pwd.value);
//可以校驗判斷表單內容，true就是通過提交，false就是阻止提交
return false;
}
</script>
</body>
</html>
10、jQuery
javaScript和jQuery的關系？
jQuery庫，里面存在大量的JavaScript函數
獲取jQuery
公式：$(selector).action()***
選擇器
//原生js，選擇器少，麻煩不好記
//標簽
document.getElementByTagName();
//id
document.getElementById();
//class
document.getElementByClassName();
//jQuery css中的選擇器它全部都能用！
$('p').click();//標簽選擇器
$('#id1').click();//id選擇器
$('.class1').click;//class選擇器
文檔工具站：http://jquery.cuishifeng.cn/
事件
鼠標事件、鍵盤事件，其他事件
mousedown()(jQuery)----按下
mouseenter()(jQuery)
mouseleave()(jQuery)
mousemove()(jQuery)----移動
mouseout()(jQuery)
mouseover()(jQuery)
mouseup()(jQuery)
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<title>Title</title>
<script src="lib/jquery-3.4.1.js"></script>
<style>
#divMove{
width:500px;
height:500px;
border:1px solid red;
}
</style>
</head>
<body>
<!--要求：獲取鼠標當前的一個坐標-->
mouse：<span id = "mouseMove"></span>
<div id = "divMove">
在這里移動鼠標試試
</div>
<script>
//當網頁元素加載完畢之后，響應事件
//$(document).ready(function(){})
$(function(){
$('#divMove').mousemove(function(e){
$('#mouseMove').text('x:'+e.pageX+"y:"+e.pageY)
})
});
</script>
</body>
</html>
操作DOM
操作DOM
節點文本操作
$('#test-ul li[name=python]').text();//獲得值
$('#test-ul li[name=python]').text('設置值');//設置值
$('#test-ul').html();//獲得值
$('#test-ul').html('<strong>123</strong>');//設置值
CSS的操作
$('#test-ul li[name=python]').css({"color","red"});
元素的顯示和隱藏，：本質display:none
$('#test-ul li[name=python]').show();
$('#test-ul li[name=python]').hide();
娛樂測試
$(window).width()
$(window).height()
$('#test-ul li[name=python]').toggle();
未來ajax()；
$('#form').ajax()
$.ajax({url:"test.html",context:document.body,success:function(){
$(this).addClass("done");
}})
小技巧
2、鞏固HTML、CSS（扒網站，全部down下來，然后對應修改看效果~）a