《狂神說JS》課程筆記
tips：js——從面向物件編程到面向監獄編程……開個玩笑！
目錄- 《狂神說JS》課程筆記
- JavaScript概述
- JS的優點：適用范圍廣，實用性高
- JS的缺點：高并發缺陷
- JavaScript框架
- UI框架
- JavaScript構建工具
- JavaScript的引入
- 內部參考
- 外部參考
- JavaScript的基本語法
- JavaScript的注釋方式
- JavaScript的資料型別和運算子
- 數值
- 文本
- 布林值
- null和undefined
- 陣列
- 物件
- 邏輯運算子
- 比較運算子
- 數值運算子
- JavaScript基本規范
- JavaScript的嚴格檢查模式
- 嚴格檢查模式
- JavaScript基礎知識詳解
- String
- Array
- 物件
- 流程控制
- Map和Set
- Map
- Set
- iterator
- JavaScript函式
- arguments
- rest引數
- 作用域
- 全域變數的規范
- 方法呼叫和apply
- JavaScript常用物件介紹
- Date
- JSON
- Ajax
- JavaScript的面向物件編程？？
- 操作BOM物件！！
- BOM物件：
- 操作DOM物件！！
- 更新DOM節點
- 洗掉DOM節點
- 插入DOM節點
- 移動節點
- 創建節點并追加
- 操作表單以及驗證
- jQuery
- jQuery的使用：
- 基礎選擇器selector
- 常用事件action
- jQuery的使用：
- 技巧
- 扒網頁
- 鞏固JS知識
- 鞏固HTML，CSS知識
- JavaScript概述
JavaScript概述
前端有很多需要學習的模塊
結構層HTML、表現層CSS、CSS前處理器（用于簡化冗雜的CSS代碼）、行為層JavaScript
JS的優點：適用范圍廣，實用性高
JS的缺點：高并發缺陷
JavaScript框架
- jQuery：簡化DOM操作
- Angular：MVC模式、模塊化開發
- React：虛擬DOM的使用提高了前端的渲染效率，但是使用較為復雜，需要額外學習JSX語言
- Axios：通訊框架、使用jQuery的AJAX通信功能與服務器互動
UI框架
- Ant-Design：基于React的UI框架
- ElementUI：基于Vue的UI框架
- Bootstrap：前端開發的開源工具包
- AmazeUI：HTML5跨屏前端框架
JavaScript構建工具
- Babel：JS編譯器，用于瀏覽器不支持ES新特性
- WebPack：用于打包、壓縮、合并以及按序加載
JavaScript的引入
和CSS樣式表的引入相同，有HTML內部參考和外部參考
內部參考
在head標簽或者body標簽的尾部添加script標簽，在其中添加JavaScript代碼
按照網頁的加載順序來看，位置在body標點尾部實踐最佳
外部參考
在head標簽內用script的src屬性引入js檔案
要注意和link不同，script無論內部參考和外部參考都是雙標簽
JavaScript的基本語法
JavaScript的注釋方式
和Java一樣
//用于單行注釋
/*
* 用于多行注釋
*/
JavaScript的資料型別和運算子
Java中的四類八種部分在JavaScript中分為數值、文本、圖形、音頻、視頻……
數值
整數、浮點數、科學計數法、負數、NaN（表示非數字）、Infinity（表示無窮大）
文本
'abc'、"abc"、"\n"
布林值
true和false
null和undefined
null即為空指標
undefined表示未定義
陣列
var arr = [1,2.3,'abc',"abc",NaN,null,true];
//由于var可以說是通用的資料型別，所以定義上JavaScript的陣列和Java是一樣的——陣列用于儲存一組資料型別相同的資料
new Array(1,2.3,'abc',"abc",NaN,null,true);
console.log(arr[10])-->undefined
物件
邏輯運算子
&&簡潔與、||簡潔或、！非
比較運算子
在js中‘=’表示賦值、‘’僅僅會進行值的比較，相等即為true、‘=’會對值和型別同時進行比較，同時相等則為true
所以NaN和自己進行比較結果為false，呼叫isNaN() 方法即可；
數值運算子
和Java相同，同樣對浮點數的運算會有精度的損失
JavaScript基本規范
- 不要在同一行中宣告多個變數
- 使用‘=’以及‘！’來比較true和false以及數值
- 不要使用全域函式
- switch陳述句必須有default兜底
- 函式的回傳值不應該時有時無
- for回圈必須使用大括號
- if條件陳述句必須使用大括號
- 應當寫注釋！
JavaScript的嚴格檢查模式
JavaScript語法非常隨意，甚至用來避免因隨意性導致錯誤的嚴格檢查模式都用的隨意，很像是ES6后隨意加上去的……
嚴格檢查模式
'use strict';
- 嚴格檢查模式必須放在JavaScript的第一行
- IDEA中的JavaScript版本必須是ES6或者ES6+（雖然我現在不用IDEA）
嚴格檢查模式下，let作為區域變數宣告并不會報錯，而var作為區域變數宣告就會有下劃線題示報錯，所以最好
- var通常用作全域變數
- let通常用作區域變數
JavaScript基礎知識詳解
JavaScript是不是要吧隨意詮釋到底！
出現了一些無法理解的地方，太過隨意導致代碼寫的多了連個錯誤都無法找到
String
"use strict"
var str = "Hello,world!";
let string = str;
let num = Math.random();
console.log(str);
console.log(str+num);
console.log(str+str);
console.log(str[0]);//這個就難以置信！！
console.log(str.indexOf('w'));
console.log(str.length);
console.log(str.toUpperCase());
console.log(str.substring(6,str.length-1));
Console:
Hello,world!
Hello,world!0.7754435203942351
Hello,world!Hello,world!
H
6
12
HELLO,WORLD!
world
Array
var array = [6,5,9,1,3,4,7,6,2]
console.log(array);
console.log(array.length);
array.length = 20;
console.log(array);
console.log(array.length);
array[15]=10;
console.log(array);
console.log(array.length);
array[50]=10;
console.log(array);
console.log(array.length);
console.log(array.sort());//無語了……
console.log(array.length);
console.log(array.slice(5,10));
console.log(array.length);
array.push("abc",'cc');
console.log(array);
console.log(array.length);
array.pop();
console.log(array);
console.log(array.length);
array.unshift("giao");
console.log(array);
console.log(array.length);
array.shift();
console.log(array);
console.log(array.length);
array.reverse();
console.log(array);
console.log(array.length);
var arr = [[1,2],[3,4],[5,6]];
console.log(arr);
Console：
(9) [6, 5, 9, 1, 3, 4, 7, 6, 2]
9
(20) [6, 5, 9, 1, 3, 4, 7, 6, 2, empty × 11]
20
(20) [6, 5, 9, 1, 3, 4, 7, 6, 2, empty × 6, 10, empty × 4]
demo3.html:29 20
(51) [6, 5, 9, 1, 3, 4, 7, 6, 2, empty × 6, 10, empty × 34, 10]
51
(51) [1, 10, 10, 2, 3, 4, 5, 6, 6, 7, 9, empty × 40]
51
(5) [4, 5, 6, 6, 7]
51
(53) [1, 10, 10, 2, 3, 4, 5, 6, 6, 7, 9, empty × 40, 'abc', 'cc']
53
(52) [1, 10, 10, 2, 3, 4, 5, 6, 6, 7, 9, empty × 40, 'abc']
52
(53) ['giao', 1, 10, 10, 2, 3, 4, 5, 6, 6, 7, 9, empty × 40, 'abc']
53
(52) [1, 10, 10, 2, 3, 4, 5, 6, 6, 7, 9, empty × 40, 'abc']
52
(52) ['abc', empty × 40, 9, 7, 6, 6, 5, 4, 3, 2, 10, 10, 1]
52
(3) [Array(2), Array(2), Array(2)]0: (2) [1, 2]1: (2) [3, 4]2: (2) [5, 6]length: 3[[Prototype]]: Array(0)
物件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>物件</title>
</head>
<body>
<script type="text/javascript">
"use strict"
var student = {
name: "Pilo-pillow",
age: 3,
emile: "[email protected]",
score: 60//最后一個不用加逗號
}
</script>
</body>
</html>
流程控制
var arr = [5,1,6,8,7,3,4,9];
arr.forEach(function(value){
console.log(value)
})
/*-----------------------------*/
for(var num in arr){
console.log(arr[num])
}
結果：
Map和Set
Map
map儲存資料分為鍵和值
鍵和值一一對應
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script>
var map = new Map([['1','這是一個字串1'],[1,'這是一個數字1']]);
map.set(true,'這是一個布林值1')
</script>
</body>
</html>
Set
set和Java中的set集合一樣，無序并且可以對資料進行去重
iterator
JavaScript函式
這里的函式和C里的很像
function 方法名稱(引數){
執行處理
return 回傳值;
}
var是全能宣告……
var 變數名稱 = function(引數){
執行處理
return 回傳值;
}//這個相當于Java里的匿名內部類
arguments
arguments是js中內置的一個物件，所有的函式執行時都會將引數值儲存在arguments中，arguments的使用和陣列一樣，但是定義上又不是陣列
JavaScript函式中并沒有多載函式的功能，但是arguments可以實作（模擬）多載，有些函式功能的實作借助于arguments將會變得更容易理解（相較于不適用arguments的時候）
rest引數
rest是為了處理除了已定義函式引數的其他引數，其本質是陣列，儲存的就是前面提的其他引數
function ways(num1,num2,...rest){//rest只能寫在最后
console.log("num1=>"+num1);
console.log("num2=>"+num2);
console.log(rest);
}
作用域
對于區域變數和全域變數在使用規范和習慣上都和Java一樣
但是區域變數對于以下這種情況：
function test(){
var a = 1;
var b = 1;
console.log(a+b);
}
結果為：2
function test(){
var a = 1;
console.log(a+b);
var b = 1;
}
function test(){
console.log(a+b);
var a = 1;
var b = 1;
}
結果為：NaN
function test(){
console.log(a+b);
}
結果為：a is not defined
所以說在第二段程式中，js自動將a，b在函式開頭就宣告了，老特性了……
全域變數的規范
我們所有的全域變數都會系結在window物件（就是網頁視窗）上，這樣多段js代碼的全域變數就若是相同就會沖突，需要定義唯一全域變數
用let去定義區域變數，用var定義全域變數，用const定義常量，并且常量名稱要全大寫
方法呼叫和apply
apply的意思是申請，感覺JavaScript越來越放蕩了……
function getName() {
return this.name;
}
var pillow = {
name: 'pillow',
age: 20
}
getName.apply(pillow);
getName.apply(pillow);——方法指向物件的屬性，this就是pillow物件
JavaScript常用物件介紹
物件判斷使用typeof即可
Date
獲得有關時間的資料，像是現在的年、月、日、時、分、秒、周幾、時間戳（從1970年1月1日00：00：00到現在的毫秒數）
其他的請發揮想象，你想的JavaScript都有……
JSON
JSON 是用于存盤和傳輸資料的格式，
JSON 通常用于服務端向網頁傳遞資料 ，
JSON 格式化后為 JavaScript 物件
JSON 格式在語法上與創建 JavaScript 物件代碼是相同的，
由于它們很相似，所以 JavaScript 程式可以很容易的將 JSON 資料轉換為 JavaScript 物件，
Ajax
Ajax（Asynchronous JavaScript and XML，即異步 JavaScript 和 XML）技術用于與服務器交換資料并重繪部分頁面，實作更好的用戶體驗，
JavaScript的面向物件編程？？
JavaScript的繼承可用proto實作
子類.__proto__=父類;
略顯詭異
"use strict"
// 定義一個類
class Person {
constructor(name) {
this.name = name;
}
sayHello() {
console.log('hello!');
}
}
// 繼承一個類
class Man extends Person {
constructor(name, age) {
super(name)
this.age = age;
}
sayAge(age) {
console.log(age + 'years old');
}
}
// 創建物件
var pillow = new Man("pillow",20);
var haozhi = new Person('haozhidada');
使用相同，但是在瀏覽器中可以看到一直在‘Prototype’，就是一直在繼承繼承……
操作BOM物件！！
BOM?---->Browser Object Model
就是瀏覽器物件模型——將瀏覽器作為物件的模型，這么理解？
BOM由多個物件構成，其中代表瀏覽器視窗的window物件是BOM的頂層物件
BOM物件：
- window物件——JS最頂層物件，直接代表瀏覽器視窗
- document物件——檔案物件，在JavaScript中，代表整個HTML檔案，可以進行寫入、訪問、修改等等
- location物件——瀏覽器當前URL資訊，用于獲得當前頁面的地址，并把瀏覽器重定向到新的頁面，
- 獲取具體的檔案樹節點
- 獲取cookie
- navigator——瀏覽器本身資訊，可通過此得到瀏覽器名稱、內核、版本、用戶資訊等等，可以知道瀏覽器客戶端為手機端或者PC端等等
- screen——客戶端螢屏資訊，像是螢屏大小（我的是1920*1080px）
- history——瀏覽器訪問歷史資訊！！
操作DOM物件！！
檔案樹？就是將HTML中標簽的分級按照樹型結構來看？
像是：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>DOM學習</title>
</head>
<body>
<div >
<a href="https://www.cnblogs.com/Pilo-pillow/archive/2022/04/28/#" >鏈接</a>
<h1 id="c">一級標題</h1>
<ul>
<li>Document</li>
<li>Object</li>
<li>Model</li>
</ul>
</div>
<p>段落</p>
<script>
var a = document.getElementsByClassName('a');
var c = document.getElementById('c');
var li = document.getElementsByTagName('li');
</script>
</body>
</html>
使用原生js選擇很少，大都搭配jQuery封裝使用
更新DOM節點
獲得HTML節點后我們就可以對其進行操作了
洗掉DOM節點
若要洗掉此節點，要先獲取此節點的父節點，然后移除掉此節點
需要注意：更改檔案后的頁面是實時更新的，所以像上面移除掉ul.children[0]后下一個ul.children[0]就是原來第二個li，洗掉到沒有的話就會報錯
插入DOM節點
直接對DOM節點進行修改會覆寫掉原來的內容，所以一般我們會追加節點或者創造節點
移動節點
創建節點并追加
創建就是create……
追加就是創建并移動……
操作表單以及驗證
表單：
- 文本框text
- 下拉框select
- 單選框radio
- 多選框checkbox
- 隱藏域hidden
- 密碼框password以及MD5加密
value：值
checked：是否選中
jQuery
jQuery相當于Java中的工具類別庫，里面是封裝的JavaScript的代碼
可以下載jQuery到本地進行參考，也可以直接使用網路上的鏈接
jQuery的使用：
$(selector).action(function(){
alert(no no no)
};)
$美元符號相當于jQuery，selector是CSS選擇器，action就是事件，內部是事件
基礎選擇器selector
- id選擇器：#id
- 標簽選擇器：element
- 類選擇器：.class
常用事件action
點擊click
滑鼠mouse~~~
鍵盤key~~~
技巧
扒網頁
找到想要的網頁，然后將多余的代碼刪掉，只留下核心代碼，然后下載去看，更換元素等等……從入門到入獄
鞏固JS知識
多多看jQuery的原始碼，看看js游戲的原始碼……
鞏固HTML，CSS知識
多看網頁原始碼
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/467077.html
標籤：其他
下一篇：vue - git