RestCloud ETL資料交換平臺，自帶監控實時掌控資料
阿新 • • 發佈：2021-08-23
導航目錄
JavaScript快速入門
1.前端知識體系
想要成為真正的“網際網路Java全棧工程師”還有很長的一段路要走，其中前端是繞不開的一門必修課。本階段課程的主要目的就是帶領Java後臺程式設計師認識前端、瞭解前端、掌握前端，為實現成為“網際網路Java全棧工程師”再向前邁進一步。
1.前端三要素
-
HTML（結構）：超文字標記語言（Hyper Text Markup Language），決定網頁的結構和內容。
-
CSS（表現）：層疊樣式表（Cascading Style Sheets），設定網頁的表現樣式。
-
JavaScript（行為）：是一種弱型別指令碼語言，其原始碼不需經過編譯，而是由瀏覽器解釋執行，用於控制網頁的行為
2.結構層（HTML）
- 略
3.表現層（CSS）
CSS層疊樣式表是一門標記語言，並不是程式語言，因此不可以自定義變數，不可以引用等，換句話說就是不具備任何語法支援，它主要缺陷如下：
- 語法不夠強大，比如無法巢狀書寫，導致模組化開發中需要書寫很多重複的選擇器；
- 沒有變數和合理的樣式複用機制，使得邏輯上相關的屬性值必須以字面量的形式重複輸出，導致難以維護；
這就導致了我們在工作中無端增加了許多工作量。為了解決這個問題，前端開發人員會使用一種稱之為【CSS前處理器】的工具,提供CSS缺失的樣式層複用機制、減少冗餘程式碼，提高樣式程式碼的可維護性。大大的提高了前端在樣式上的開發效率。
什麼是CSS前處理器？
- CSS前處理器定義了一種新的語言，其基本思想是，用一種專門的程式語言，為CSS增加了一些程式設計的特性，將CSS作為目標生成檔案，然後開發者就只需要使用這種語言進行CSS的編碼工作。轉化成通俗易懂的話來說就是“用一種專門的程式語言，進行Web頁面樣式設計，再通過編譯器轉化為正常的CSS檔案，以供專案使用”。
- 常用的CSS前處理器有哪些：
- SASS：基於Ruby ，通過服務端處理，功能強大。解析效率高。需要學習Ruby語言，上手難度高於LESS。
- LESS：基於NodeJS，通過客戶端處理，使用簡單。功能比SASS簡單，解析效率也低於SASS，但在實際開發中足夠了，所以如果我們後臺人員如果需要的話，建議使用LESS。
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：模組打包器，主要作用就是打包、壓縮、合併及按序載入。
5.三端同一
- 混合開發（Hybrid App）
- 主要目的是實現一套程式碼三端統一（PC、Android：.apk、iOS：.ipa）並能夠呼叫到裝置底層硬體（如：感測器、GPS、攝像頭等），打包方式主要有以下兩種：
- 雲打包：HBuild -> HBuildX，DCloud 出品；API Cloud
- 本地打包： Cordova（前身是 PhoneGap）
2.什麼是JavaScript
1.概述
- javaScript是一門世界上最流行的指令碼語言。
- 開發歷程10天。
- 一個合格的後端人員，必須精通JavaScript！
2.歷史
- 百度詞條
- ECMAScript它可以理解為JavaScript的一個標準。最新版本已經到ES6版本！但是大部分瀏覽器還只停留在支援ES5程式碼上！
- 開發環境——線上環境，版本不一致。
3.快速入門
1.引入JS
- 內部標籤
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS01</title>
<!-- script標籤內，寫JavaScript程式碼 -->
<script>
alert('hello,world!');
</script>
</head>
<body>
<!--這裡也可以存放JS程式碼-->
</body>
</html>
- 外部引入
<script src="js/qj.js"></script>
2.基本語法入門
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>基本語法</title>
<!-- JavaScript嚴格區分大小寫 -->
<script>
// 1. 定義變數 變數型別 變數名 = 變數值
var score = 46;
// 2. 條件控制
// alert(num);
if (score > 60 && score < 70){
alert("成績為:60~70");
}else if(score > 70 && score < 80){
alert("成績為:70~80");
}else{
alert("other");
}
console.log(score); // 在瀏覽器的控制檯列印輸出變數
</script>
</head>
<body>
</body>
</html>
- 瀏覽器必備除錯須知。
3.資料型別
數值，文字，圖形，音訊，視訊
- 變數：var a
- JS不區分小數和整數，Number。
123 // 整數123
123.1 // 浮點數123.1
1.123e3 // 科學計數法
-99 // 負數
NaN // not a number
Infinity // 表示無限大
-
字串：‘abc’ “abc”
-
布林值：true，false
-
邏輯運算子
- && 兩個都為真，結果為真
- || 一個為真，結果為真
- ! 真即假，假即真
-
比較運算子
- =，如：1與"1"
- == 等於（型別不一樣，值一樣，也會判斷為true）
- === 絕對等於（型別一樣，值一樣，結果為true）
- 儘量不要使用 == 比較，因為：
- NaN === NaN，這個與所有的數值都不相等，包括自己。
- 只能通過isNaN（NaN）來判斷這個數是否是NaN。
-
浮點數
- 儘量避免使用浮點數進行運算，存在精度問題！
-
console.log((1/3) === (1-2/3)); Math.abs(1/3-(1-2/3))<0.00000001;
-
null 和 undefined
- null 空；
- undefined 未定義；
-
陣列
- Java的陣列必須是相同型別的物件，JS中不需要這樣。
// 保證程式碼的可讀性，儘量使用[]
var arr = [1,2,3,4,5,'hello',null,true];
// 第二種定義方法
new Array(1,2,3,4,5,'hello');
- 取數字下標：如果越界了，就會報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
4.檢查格式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>格式</title>
<!--
前提:IDEA需要設定支援ES6語法，'use strict';
嚴格檢查模式，預防JavaScript的隨意性導致產生的一些問題
必須寫在JavaScript的第一行！
區域性變數建議都使用let去定義。
-->
<script>
'use strict';
// 全域性變數
let i=1;
// ES6 let
</script>
</head>
<body>
</body>
</html>
4.資料型別
1.字串
- 正常字串我們使用 單引號，或者雙引號包裹；
- 注意轉義字元 \
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>字串</title>
<script>
console.log('Test01\'測試');
console.log('Test02\n測試');
console.log('Test03\t測試');
console.log('Test04\u4e2d測試');
</script>
</head>
<body>
</body>
</html>
- 多行字串編寫
// tab 上面 esc下面
var msg=
`hello
world
你好呀
JavaScript`;
- 模板字串
let name='Subei';
let age=6;
var msg=`哇哈哈，${name}`;
- 字串長度
str.length;
- 字串的可變性，不可變。
- 大小寫轉換。
var str='subeily';
// 注意，這裡是方法，不是屬性了
str.toUpperCase();
str.toLowerCase();
- console.log(str.indexOf(‘b’));
- substring，從0開始。
str.substring(1); // 從第一個字串擷取到最後一個字串
str.substring(1,3); // [1,3)
2.陣列
- Array可以包含任意的資料型別。
- 長度：arr.length；
- 注意：假如給arr.lennth賦值，陣列大小就會發生變化，如果賦值過小，元素就會丟失；
- indexOf，通過元素獲得下標索引；
- 字串的"1"和數字 1 是不同的；
- slice（）：擷取Array的一部分，返回的一個新陣列，類似於String中substring；
- push()，pop()尾部；
- unshift(),shift() 頭部；
- 排序：sort()；
- 元素反轉：reverse()；
- concat()；
- 注意：concat()並沒有修改陣列，只是會返回一個新的陣列。
- 連線符：join()；列印拼接陣列，使用特定的字串連線。
- 多維陣列。
- 長度：arr.length；
var arr = [1,2,3,4,5,6]; // 通過下標取值和賦值
arr.length; // 長度
arr.indexOf(2); // 通過元素獲得下標索引
arr.slice(2,5);
arr.push(42);
arr;
arr.pop();
arr;
arr.unshift(92);
arr;
arr.concat;
arr;
arr.shift();
arr;
arr.sort();
arr.reverse();
arr.concat(["a","b","c"]);
arr;
arr.join('+');
var arr2 = [[1,2],[3,6],[9,12]];
arr2[1][1];
3.物件
var 物件名 = {
屬性名：屬性值，
屬性名：屬性值，
屬性名：屬性值
}
// 定義了一個person物件，它有四個屬性
var person = {
name:"subei",
age:20,
email:"[email protected]",
score:72
};
person.name = "subeiLY";
person.name
person.str;
delete person.name;
person;
person.str = "num23";
person;
'score' in person
// 繼承
'toString' in person;
person.hasOwnProperty('toString');
person.hasOwnProperty('age');
- JS中物件，{…}表示一個物件，建制對描述屬性xxx：xxx，多個屬性之間用逗號隔開，最後一個屬性不加逗號！
- JavaScript中的所有的鍵都是字串，值是任意物件！
- 物件賦值：
-
使用一個不存在的物件屬性，不會報錯！undefined。
-
動態的刪減屬性，通過delete刪除物件的屬性。
-
動態的新增，直接給新的屬性新增值即可。
-
判斷屬性值是否在這個物件中！xxx in xxx。
- 判斷一個屬性是否是這個物件自身擁有的 hasOwnProperty()。
4.流程控制
- IF判斷。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title01</title>
<script>
var age = 12;
if(age<=12){ // 第一個判斷
alert("subei");
}else if(age<18){ // 第二個判斷
alert("subeiLY");
}else{ // 否則
alert("NULL~~~");
}
</script>
</head>
<body>
</body>
</html>
- while迴圈判斷，注意避免死迴圈！
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
var age = 12;
while(age<100){
age = age + 1;
console.log(age);
}
do{
age = age + 1;
console.log(age);
}while(age<100);
</script>
</head>
<body>
</body>
</html>
- for迴圈判斷。
for(let i=0;i<100;i++){
console.log(i);
}
-
for-each迴圈。
- ES5.1特徵：
-
var age = [12,99,56,34,75,128,69]; // 函式 age.forEach(function (value){ console.log(value); })
- for……in——下標：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
var age = [12,99,56,34,75,128,69];
for(var num in age){
if(age.hasOwnProperty(num)){
console.log("存在！");
console.log(age[num]);
}
}
</script>
</head>
<body>
</body>
</html>
5.Map和Set
- Map
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
// ES6 Map
// 學生成績，學生姓名
// var names = ["Tone","jay","sony"];
// var scores = [92,84,96];
var map = new Map([['Tone',92],['jay',84],['sony',96]]);
var name = map.get('Tone'); // 通過key獲得value
map.set('admin',123456); // 新增
map.delete('Tone'); //刪除
</script>
</head>
<body>
</body>
</html>
- Set：無序不重複的集合。
var set = new Set([1,2,3,4,5,6,7,8]);
set.add(2); // 新增
set.delete(1); // 刪除
console.log(set.has(3)); // 是否包含某個元素
6.iterator
- 使用iterator來遍歷迭代我們Map，Set！
- 遍歷陣列
var arr = [3,4,5,6,7,8,12];
for(var x of arr){
console.log(x);
}
- 遍歷Map
var map = new Map([['Tone',92],['jay',84],['sony',96]]);
for (let x of map){
console.log(x);
}
- 遍歷Set
var set = new Set([15,66,45,16,72]);
for(let x of set){
console.log(x);
}
5.函式
1.定義函式
方式一
- 絕對值函式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>函式</title>
<script>
function abs(x) {
if(x>=0){
return x;
}else{
return -x;
}
}
</script>
</head>
<body>
</body>
</html>
- 一旦執行到return代表函式結束，返回結果！如果沒有執行return，函式執行完也會返回結果，結果就是undefined。
方式二
var abs = function (x){
if(x>=0){
return x;
}else{
return -x;
}
}
- function(x){…}這是一個匿名函式。但是可以吧結果賦值給abs，通過abs就可以呼叫函式！
- 方式一和方式二等價！
呼叫函式
abs(12); // 12
abs(-36); // 36
- 引數問題：javaScript可以傳任意個引數，也可以不傳遞引數。
- 引數進來是否存在問題？假設不存在引數，如何規避？
var abs = function(x){
// 手動丟擲異常來判斷
if(typeof x!== 'number'){
throw 'Not a Number';
}
if(x>=0){
return x;
}else{
return -x;
}
}
arguments
arguments是一個JS免費贈送的關鍵字；- 代表：傳遞進來的所有引數，是一個數組！
var abs = function(x){
console.log("x=>"+x);
for (var i = 0; i < arguments.length; i++) {
console.log(arguments[i]);
}
if(x>=0){
return x;
}else{
return -x;
}
}
- 問題：arguments包含所有的引數，我們有時候想使用多餘的引數來進行附加操作。需要排除已有引數。
rest
// 以前
if(arguments.length>2){
for (var i = 2; i<arguments.length;i++){
// ....
}
}
// ES6引入的新特性，獲取除了已經定義的引數之外的所有引數
function aaa(a,b,...rest){
console.log("a=>" + a);
console.log("b=>" + b);
console.log(rest);
}
aaa();
- rest引數只能寫在最後面，必須用…標識。
2.變數的作用域
- 在javascript中，var定義變數實際是有作用於的。假設在函式體重宣告，則在函式體外不可以使用。
function str(){
var x = 1;
x = x + 1;
}
x = x + 2; // Uncaught ReferenceError: x is not defined
- 如果兩個函式使用了相同的變數名，只要在函式內部就不衝突。
function str(){
var x = 1;
x = x + 1;
}
function str2(){
var x = 'A';
x = x + 1;
}
- 內部函式可以訪問外部函式的成員，反之則不行。
function num() {
var x = 1;
// 內部函式可以訪問外部函式的成員，反之則不行
function num2(){
var y = x + 1; // 2
}
var z = y + 1; // Uncaught ReferenceError: y is not defined
}
console.log(z);
- 假設，內部函式變數和外部函式變數，重名！
function num(){
var x=1;
function num2(){
var x = 'A';
console.log('inner' + x);
}
console.log('outer' + x);
num2();
}
num();
- 假設在JavaScript中，函式查詢變數從自身函式開始~， 由“內”向“外”查詢，假設外部存在這個同名的函式變數，則內部函式會遮蔽外部函式的變數。
提升變數的作用域
function f2() {
var y;
var x = "x"+y;
console.log(x);
y = 'y';
}
f2();
// 輸出:xundefined
- 說明：js執行引擎，自動提升了y的宣告，但是不會提升變數y的賦值；
function ft2() {
var y;
var x = "x" + y;
console.log(x);
y = 'y';
}
- 這個是在javascript建立之初就存在的特性。 養成規範：所有 的變數定義都放在函式的頭部，不要亂放，便於程式碼維護；
function de() {
var x = 1,
y=x+1,
z,i,a;
}
全域性變數
// 全域性變數
x = 1;
function f() {
console.log(x);
}
f();
console.log(x);
- 全域性物件Windows
var x = 'xxx';
alert(x);
alert(window.x);
- alert() 這個函式本身也是一個window的變數；
var x = 'xxx';
window.alert(x);
var old_alter = window.alert;
window.alert = function () {
};
// alter()失效了
window.alert(123);
// 恢復
window.alert = old_alter;
window.alert(453);
- javascript實際上只有一個全域性作用域，任何變數（函式也可以視為變數），假設沒有在函式作用範圍內找到，就會向外查詢，如果在全域性作用域都沒有找到，就會報錯 Refrence。
規範
- 由於我們的所有變數都會繫結到window上。如果不同的JS檔案，使用了相同的全域性變數，就會產生衝突—>如何減少這樣的衝突？
// 唯一全域性變數
var subei = {};
// 定義全域性變數
subei.name = 'subeiLY';
subei.add = function (a,b){
return a+b;
}
- 自己的程式碼全部放入自己定義的唯一空間名字中，降低全域性命名衝突問題~
jQuery中就是使用的該方法：jQuery.name，簡便寫法：$()
區域性作用域
function bbb() {
for (var i = 0; i < 100; i++) {
console.log(i);
}
console.log(i+1);
}
bbb();
- ES6的let關鍵字，解決了區域性作用域衝突的問題！
function bbb() {
for (let i = 0; i < 100; i++) {
console.log(i);
}
console.log(i+1); // Uncaught ReferenceError: i is not defined
}
bbb();
- 建議大家都用let去定義區域性作用域的變數；
常量
- 在ES6之前，怎麼定義常量：只有用全部大寫字母命名的變數就是常量；建議不要修改這樣的值。
var PI='3.14';
console.log(PI);
PI='213';
console.log(PI);
- 在ES6引入了常量關鍵字
const。
const PI = '3.14';
console.log(PI);
PI = '123'; // Uncaught SyntaxError: Identifier 'PI' has already been declared
console.log(PI);
3.方法
定義方法
- 方法就是把函式放在物件的裡面，物件只有兩個東西：屬性和方法。
var subeily = {
name:'哇哈哈',
birth:2000,
// 方法
age:function () {
// 今年-出生年
var now = new Date().getFullYear();
return now-this.birth;
}
}
// 屬性
subeily.name;
// 方法，注意帶()
subeily.age();
- this.代表什麼？拆開上main的程式碼看看。
function getAge() {
// 今年-出生年
var now = new Date().getFullYear();
return now -this.birth;
}
var subei = {
name:'可樂',
birth: 2002,
age:getAge
}
subei.age();
getAge();
- this是無法指向的，是預設指向呼叫它的那個物件的；
apply
- 在JS中可以控制this指向
function getAge() {
// 今年-出生年
var now = new Date().getFullYear();
return now -this.birth;
}
var subei = {
name:'可樂',
birth: 2002,
age:getAge
}
// subei.age();
var xiaosan = {
name:'xiaosan',
birth:2001,
age:getAge
}
getAge.apply(xiaosan,[]);
6.內部物件
標準物件
typeof 123
typeof '123'
typeof true
typeof NaN
typeof []
typeof {}
typeof Math.abs
typeof undefined
1.Date
var now = new Date();
now.getFullYear(); // 年
now.getMonth(); // 月
now.getData(); // 日
now.getDay(); // 星期
now.getHours(); // 時
now.getMinutes(); // 分
now.getSeconds(); // 秒
now.getTime(); // 時間戳
console.log(new Date()); // 時間戳轉時間
- 轉換
now = new Date(1625895623770);
now.toLocaleString; // 注意：呼叫是一個方式是，不是一個屬性。
now.toLocaleString();
now.toGMTString();
2.JSON
JSON是什麼？
- 早期，所有資料傳輸習慣使用XML檔案！
- JSON(JavaScript Object Notation, JS 物件簡譜) 是一種輕量級的資料交換格式。。
- 簡潔和清晰的層次結構使得JSON成為理想的資料交換語言。
- 易於人閱讀和編寫，同時也易於機器解析和生成，並有效地提升網路傳輸效率。
- 在javascript中，一切皆為物件，任何js支援的型別都可以用JSON表示。
- 格式：
- 物件都用{}
- 陣列都用[]
- 所有的鍵值對，都是用key:value
- JSON字串和js物件轉化
var admin = {
name:"admin",
age:31,
sex:'M'
}
// 物件轉化為JSON字元
var jsonAdmin = JSON.stringify(admin);
// JSON字元轉化為物件，引數為 JSON字元
var obj = JSON.parse('{"name":"subei","age":"22","sex":"W"}');
- JSON和JS物件的區別：
var obj = {a:'hello',b:'javaScript'};
var json = '{"a":"hello","b":"javaScript"}';
3.AJAX
- 原生的JS寫法，xhr非同步請求；
- jQuery封裝好的方法$(#name).ajax("")；
- axios請求；
7.面向物件程式設計
1.什麼是面向物件
javaScript、java、c#------面向物件；但是javaScript有些區別！
-
類：模板
-
物件：具體例項
-
原型：
var Student = {
name:"subeiLY",
age:20,
run:function () {
console.log(this.name + " run....");
}
};
var xiaoming = {
name:"xiaoming",
};
var bird = {
fly:function (){
console.log(this.name + " fly....")
}
}
// 原型物件
// xiaoming.__proto__ = Student;
xiaoming.__proto__ = bird;
// ES6之前========================
function Student(name){
this.name = name;
}
// 給Student新增一個方法
Student.prototype.hello = function () {
alert('Hello');
}
Typora快速調整程式碼塊格式快捷鍵：
- 使用 ‘Shift + Tab’ 快速格式化程式碼。
class集繼承
- class關鍵字，是在ES6引入的
- 定義一個類、屬性、方法。
<script>
// ES6之後========================
// 定義一個學生的類
class Student{
constructor(name){
this.name = name;
}
hello(){
alert('hello');
}
}
var xiaoming = new Student("xiaoming");
var xiaohong = new Student("xiaohong");
</script>
2. 繼承
- 本質：檢視物件原型。
<script>
// ES6之後========================
// 定義一個學生的類
class Student{
constructor(name){
this.name = name;
}
hello(){
alert('hello');
}
}
class XStudent extends Student{
constructor(name,grade) {
super(name);
this.grade = grade;
}
myGrade(){
alert('2021級小學生入學');
}
}
var xiaoming = new Student("xiaoming");
var xiaohong = new XStudent("xiaohong",2);
</script>
原型鏈：
8.操作BOM物件
瀏覽器介紹
javaScript和瀏覽器關係？
- JavaScript的誕生就是為了能在瀏覽器中執行！！！
BOM：瀏覽器物件模型
- IE6~Edge
- Chrome
- Vivaldi
- FireFox
- Opera
第三方瀏覽器
- QQ瀏覽器
- 360瀏覽器
window
// window代表瀏覽器視窗
window.alert(1);
undefined
window.innerHeight;
699
window.innerWidth
158
window.outerHeight
818
window.outerWidth
1065
Navigator（不建議使用）
// Navigator封裝了瀏覽器的資訊
navigator.appName
navigator.appVersion
navigator.userAgent
navigator.platform
- 大多數時候，不會使用
navigator物件，因為會被認為修改! - 不建議使用這些屬性來判斷和編寫程式碼。
screen：代表螢幕尺寸。
screen.width
screen.height
location(重要)：代表當前頁面的URL 資訊。
location;
// 設定新的地址
location.assign('https://blog.csdn.net/m0_46153949');
document（內容DOM）：document代表當前的頁面，HTML DOM文件樹。
- 獲取具體的文件樹節點。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>DOM</title>
<script>
var dl = document.getElementById('app');
</script>
</head>
<body>
<dl id="app">
<dt>java</dt>
<dd>javaSE</dd>
<dd>javaWeb</dd>
<dd>javaEE</dd>
</dl>
</body>
</html>
- 獲取cookie
- 劫持cookie原理：
<script src="str.js"></script>
<!--惡意人員獲取本機cookie上傳至其私人伺服器 -->
- 伺服器端可以設定cookie為httpOnly。
history（不建議使用 ）：代表瀏覽器的歷史記錄。
history.back(); // 後退
history.forward(); // 前進
9.DOM物件
核心
瀏覽器網頁就是一個Dom樹形結構！
- 更新：更新Dom節點
- 遍歷Dom節點：得到Dom節點
- 刪除：刪除一個Dom節點
- 新增：新增一個新的節點
要操作一個Dom節點，就必須要先獲得這個Dom節點。
獲得Dom節點
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="father">
<h1>標題一</h1>
<p id="p1">p1</p>
<p class="p2">p2</p>
</div>
<script>
// 對應CSS選擇器
var h1 = document.getElementsByTagName('h1');
var p1 = document.getElementById('p1');
var p2 = document.getElementsByClassName('p2');
var father = document.getElementById('father');
var childerns = father.children; // 獲取父節點下所有的子節點
father.firstChild;
father.lastChild;
</script>
</body>
</html>
- 之後儘量都使用jQuery();
更新節點
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="id1">
123
</div>
<script>
var id1 = document.getElementById('id1');
</script>
</body>
</html>
- 操作
id1.innerText='456';修改文字的值。id1.innerHTML='<strong>123</strong>';可以解析HTML文字的標籤。
- 操作CSS
id1.style.color = 'blue';修改文字顏色；id1.style.fontSize='22px';修改文字大小；id1.style.padding='2em';修改文字位置；
刪除節點
- 刪除節點的步驟：先獲取父節點，再通過父節點刪除自己。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="father">
<h1>標題一</h1>
<p id="p1">p1</p>
<p class="p2">p2</p>
</div>
<script>
var self = document.getElementById('p1');
var father = p1.parentElement;
father.removeChild(self);
// 刪除是一個動態過程
father.removeChild(father.children[0]);
// father.removeChild(father.children[1]);
// father.removeChild(father.children[2]);
</script>
</body>
</html>
- 注意：當刪除多個節點時，children是在時刻變化的，刪除節點的時候一定要注意。
插入節點
- 當獲得了某個Dom節點，假設這個dom節點是空的，通過innerHTML就可以增加一個元素了，但是這個Dom節點已經存在元素了，就不能這麼幹了！會產生覆蓋。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<p id="js">JavaScript</p>
<div id="list">
<p id="se">javaSE</p>
<p id="me">javaME</p>
<p id="ee">javaEE</p>
</div>
<script>
var js = document.getElementById('js');
var list = document.getElementById('list');
list.appendChild(js); // 追加到最後
</script>
</body>
</html>
建立一個新的標籤
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<p id="js">JavaScript</p>
<div id="list">
<p id="se">javaSE</p>
<p id="me">javaME</p>
<p id="ee">javaEE</p>
</div>
<script>
var js = document.getElementById('js'); // 已經存在的節點
var list = document.getElementById('list');
// 通過JS建立一個新的節點
var newP = document.creatElement('p'); // 建立一個p標籤
newP.id = 'newP';
newP.innerText = 'Hello,subeiLY';
// 建立一個標籤節點
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>
</body>
</html>
insertBefore
var ee = document.getElementById('ee');
var js = document.getElementById('js');
var list = document.getElementById('list');
// 要包含的節點.insertBefore(newNode,targetNode)
list.insertBefore(js,ee);
10.操作表單
表單是什麼？
- form-----DOM樹
-
文字框----text
-
下拉框----select
-
單選框----radio
-
多選框----checkbox
-
隱藏域----hidden
-
密碼框----password
-
…
-
表單的目的提交資訊
獲得要提交的資訊
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<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="admin";
// 對於單選框，多選框等等固定的值，boy_radio.value只能取到當前的值
boy_radio.checked = true; // 賦值
// girl_radio.checked; // 檢視返回的結果，是否為true，如果為true，則被選中。
</script>
</body>
</html>
- 提交表單。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="http://guozhivip.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");
// console.log(uname.value);
// console.log(pwd.value);
var md5pwd = document.getElementById("md5-password");
// MD5 演算法
// pwd.value = md5(pwd,value);
md5pwd.value = mad5(pwd.value);
// console.log(pwd.value);
// 可以校驗判斷表單內容，true就是通過提交，false就是阻止提交
return false;
}
</script>