JavaScript_初級

JavaScript書寫位置

<!-- 直接寫在HTML标簽裡 -->
<button οnclick="alert('點選彈出一句話')"></button>
<a href="javascript:alert('彈出一句話，不跳轉')" target="_blank" rel="external nofollow" >
<a href="javascript:;" target="_blank" rel="external nofollow" >

<!-- 寫在<script>标簽裡 -->
<script type="text/javascript">
    alert("彈出對話框");
</script>

<!-- 寫在外部檔案，并連結進來 -->
<!-- 這個script标簽内部不能寫js，會被忽略 -->
<script type="text/javascript" src="js檔案位置"></script>

資料類型(6種)
- 基本資料類型
  1. String 字元串
  2. Number 數字(整數和浮點數)
    - Number.MAX_VALUE 最大值
    - Number.MIN_VALUE 最小值
    - Infinity 正無窮計算結果超過最大值就是 Infinity
    - NaN 不是一個數字計算結果不是數字就會傳回NaN
  3. Boolean 布爾值
  4. Null 空對象(typeof null 傳回的是object)
  5. Undefined 未定義
- 引用資料類型
  1. Object
- typeof 變量可以檢視變量的類型

類型轉換

其他轉字元串

// 1. 調用toString方法
var a = 10;
var b = a.toString()
// 2. 調用String()方法
var a;
var b = String(a); // b的結果就是undifined

其他轉數字

// 1. 調用Number()方法
//     不是數字就傳回NaN
//     空串或者全是空格的字元串轉為0
//     布爾true 1, false 0
//     null 0
//     undefined NaN
var a = “123”;
var b = Number(a); 
// 2. parseInt()、parseFloat()
var a;
var b = parseInt(a);

其他轉布爾

// 調用Boolean()方法
//     1. 除了0和NaN，其餘數字都是true
//     2. 除了空串，其餘字元串都是false
//     3. null false
//     4. undefined false
//     5. 對象也會轉換為true
var a = 123;
var b = Boolean(a);

運算符
- == 和 != 會自動轉換類型并比較
- === 和 !== 不會自動轉換類型比較
- NaN和任何值都不相等，包括本身。是以使用isNaN來判斷

對象

内建對象
1. 由ES标準中定義的對象，在任何ES的實作中都可以使用
2. Math String Number Boolean Function Object
宿主對象
1. 由JS的運作環境提供的對象(比如：document，console)
2. BOM DOM

自定義對象，自己建立的對象

// 使用構造器建立對象
var obj = new Object();
// 添加屬性
obj.name = "tom";
// 這種方式更加靈活
obj["str"] = 99;
// 删除屬性
delete obj.name;
// in 檢查對象中是否包含指定的屬性
// 在原型對象中的屬性也會傳回true
// 隻檢查本身有沒有，用hasOwnProperty("屬性名")
"age" in obj;

// 使用字面量建立對象
var obj1 = {name:"tom", age:12}

函數

函數也是一個對象

// 可以将要封裝的代碼傳給函數的構造函數
// 這種方式不常用
var fun = new Function("console.log('print')");
fun();

// 常用方法
funtion fun1();
fun1();

// 立即執行函數
(function(a,b){
    alert(a+b);
})(10,20);

this
- 解析器在調用函數時會傳遞一個隐含參數(this)，this指向一個對象
- this稱為函數執行的上下文對象
- 根據函數的調用方式不用，this會指向不同的對象
  1. 以函數調用，this就是window
  2. 以方法調用，this就是調用方法的那個對象

構造方法

function Person(name, age, gender) {
    this.name = name;
    this.age = age;
    this.gender = gender;
    this.sayName = fun;
}

// 将構造函數中的方法定義放在構造函數外部
// 這樣可以避免，每次建立的對象都有一個函數執行個體，10000個對象有10000個函數對象執行個體
// 但這樣會污染全局作用域，因為是定義在全局作用域中的
function fun() {
    alert(this.name);
}

原型對象prototype
- 我們建立的每一個函數，解析器都會向函數中添加一個屬性prototype(函數也是對象，可以添加屬性)
- 如果作為普通函數調用，原型對象沒有任何作用
- 當函數以構造函數的形式調用時，它所建立的每一個對象中都會有一個隐含的屬性指向這個原型對象
```
function MyClass(){}
var mc = new MyClass();
console.log(mc.__proto__);
           
```
- __proto__相當于一個公共區域，所有同一個類的執行個體都可以通路到這個原型對象，可以将對象中共有的内容，放到原型對象中
```
function Person(name, age, gender) {
    this.name = name;
    this.age = age;
    this.gender = gender;
}

Person.prototype.sayName = function() {
    alert(this.name);
};

// 添加toString() 方法就可以直接列印對象
Person.prototype.toString = function() {
    return "name: " + this.name + ", age: " + this.age + ", gender: " + this.gender;
}
           
```
- 尋找一個屬性或者方法時
  1. 自身有，直接使用
  2. 自身沒有去原型對象中尋找
  3. 2沒有再去原型對象中的原型對象中尋找，直到直到Object對象的原型
  4. Object對象的原型沒有原型，如果在Object原型中沒有找到，則傳回undefined
數組(内建對象)
1. 建立方式
```
var arr = new Array();
var arr1 = new Array(5);
var arr2 = new Array(5, 6, 7);
var arr3 = [];
var arr4 = [1, "abc", true];
           
```
2. 常用方法
  - push() 向末尾添加元素，傳回新數組長度
  - pop() 删除末尾元素，傳回被删除的元素
  - unshift() 向頭部添加元素，傳回新數組長度
  - shift() 删除第一個元素，傳回被删除的元素
  - forEach(function(self, index, arr){}, this)
    1. self 周遊的值
    2. index 周遊的索引
    3. arr 被周遊的整個數組
    4. 不會改變原數組
    5. break、continue沒有作用
    6. return 傳回值不能傳回出去
  - slice(start, end) 截取指定位置的數組(不包含end索引的元素)，傳回截取結果不會影響數組本身
  - splice(start, count, newProperty) 删除數組中指定位置的元素，并替換。傳回被删除的元素，會直接影響數組
  - concat() 連接配接兩個或更多的數組，并傳回結果，不會對影響數組本身
  - join(seperate) 把數組的所有元素放入一個字元串，元素通過指定的分隔符分隔。不會對影響數組本身
  - reverse() 反轉數組中的元素，會直接影響數組
  - sort(function(a,b)) 對數組的元素進行排序(可以傳入函數自定義排序規則)，會直接影響數組
函數的方法(函數也是對象)
- call()和apply()，這兩個方法時函數對象的方法，需要通過函數對象調用
- 調用這兩個方法，都會使得函數執行
- 調用這兩個方法可以将一個對象指定為第一個參數，此時這個對象會成為函數執行時的this
```
var obj = {};
function fun() {
    alert(this);
}

// alert(this) this就變成obj
// fun() 這樣調用 this 是window
fun.call(obj);
fun.apply(obj);
           
```
- 傳遞參數的時候
```
var obj = {};
function fun(a, b) {
    alert(a + " " + b);
}

// call直接傳
fun.call(obj, 2, 3);
// apply需要封裝到數組裡再傳
fun.apply(obj, [2, 3]);
           
```
- this的情況
  1. 以函數形式調用時，this永遠是window
  2. 以方法形式調用時，this是調用方法的對象
  3. 以構造函數的形式調用，this是新建立的對象
  4. 使用call和apply調用時，this是指定的那個對象

arguments 函數的參數清單
- 調用函數時，浏覽器每次都會傳遞兩個隐含的參數
  1. 函數的上下文 this
  2. 封裝實參的對象 arguments
- arguments是一個類數組對象，但是不是數組
- 調用函數時，傳遞的實參都會在arguments中儲存
- 它有一個屬性 callee 這個屬性對應一個函數對象，就是目前正在指向的函數對象

Date對象
- 建立方式
```
var d = new Date();
// 月/日/年 建立指定日期的日期對象
var d1 = new Date("12/31/2021 11:11:11");
           
```
- 常用方法
  1. getDate() 擷取哪一号
  2. getDay() 擷取星期幾(0-6，0是星期天)
  3. getMonth() 擷取月(0-11,0是1月份)
  4. getFullYear() 擷取年份
  5. getTime() 傳回197011到日期的毫秒數
  6. Date.now() 現在的時間戳，毫秒
Math對象(工具類，不用new出來)
- 常用方法
  1. ceil() 向上取整，小數位有值就自動進1
  2. floor() 向下取整，不管小數位有沒有值，保留整數部分原值
  3. round() 四舍五入取整
  4. random() 生成0-1之間的任意小數，不包含0-1
包裝類
- String() Number() Boolean();
- String 常用方法
  1. charAt(index) 傳回指定位置的字元
  2. concat() 連接配接兩個或多個字元串
  3. indexOf(str, index) 傳回指定字元串第一次出現的位置，可以指定查找位置
  4. lastIndexOf(str, index) 傳回指定字元串最後一次出現的位置，可以指定查找位置
  5. slice(start, end) 截取字元串，不包括end
  6. substring(start, end) 截取字元串，不包括end，這個方法不接受負值
  7. subStr(strat, count) 截取字元串
  8. split(seperate) 将字元串拆分成數組
    - 可以傳遞正則去拆
  9. search(regex) 檢索字元串中正則比對的值，傳回第一次出現的索引
  10. match(regex) 提取正則比對的字元串，預設情況下隻會傳回第一個，開啟全局比對就能傳回所有結果。傳回結果放在數組中
  11. replace(regex, newStr) 替換，設成全局比對模式才會替換所有，預設隻替換第一個

正規表達式

基本使用

var reg = new RegExp("正規表達式", "比對模式");
// 字面量建立正規表達式對象
var reg1 = /a/i;
// 比對模式
//     i 忽略大小寫
//     g 全局比對模式
reg.test(str); 測試str是否滿足定義的正則

基本規則

/*----------------------------------
{n} 正好n次
{m, n} 正好m~n次，包括中間次
{m, } m次以上，包括m
+ 至少1個
* 0或多個
? 0或1個
^ 開頭
$ 結尾
\w 任意字母、數字、下劃線 
\W 除了字母、數字、下劃線
\d 任意的數字
\D 除了數字以外
\s 空格
\S 除了空格
\b 單詞邊界
\B 除了單詞邊界
----------------------------------*/

DOM
- 在加載完文檔之後再執行 window.onload = function(){};
- DOM查詢
  1. 通過document調用
    - getElementById() 根據ID擷取一個元素
    - getElementsByTagName() 根據标簽名擷取一組元素
    - getElementsByName() 根據name屬性擷取一組元素
    - getElementsByClassName() 根據class擷取一組元素
    - querySelector() 傳入一個選擇器，傳回選擇的元素，隻會傳回第一個
    - querySelectorAll() 傳入一個選擇器，傳回選擇的元素，傳回全部
  2. 通過元素節點調用，擷取元素節點的子節點
    - 擷取子節點
      1. getElementsByTagName() 根據标簽名擷取一組元素包括孫子節點
      2. childNodes 所有子節點不包括孫子節點，小心文本節點
      3. children 所有子節點不包括孫子節點，也不包括文本節點
      4. firstChild 第一個子節點，小心文本節點
      5. lastChild 最後一個子節點，小心文本節點
    - 擷取父節點和兄弟節點
      1. parentNode 父節點
      2. previousSibling 前一個兄弟節點，小心文本節點
      3. nextSibling 後一個兄弟節點，小心文本節點
- DOM增删改
  1. appendChild(新節點) 把新的子節點添加到指定節點
  2. removeChild(待删除子節點) 删除子節點
  3. replaceChild(新節點，舊節點) 替換子節點
  4. insertBefore(新節點，指定的子節點) 在指定的子節點前插入新的子節點
  5. createElement(“節點名”) 建立元素節點不是傳進一段完整的HTML代碼，如createElement(“li”)
  6. createTextNode(“文本内容”) 建立文本節點
- 操作内聯樣式，用style屬性
  1. 修改元素樣式元素.style.樣式名 = 樣式值，直接設定到元素上的内聯樣式
  2. 讀取元素樣式元素.style.樣式名，直接讀取内聯樣式(帶機關)
- 讀取元素正在生效的樣式(隻讀，不能修改)
  1. 用currentStyle(隻有IE支援)。讀取元素樣式元素.currentStyle.樣式名，擷取正在生效的樣式
  2. 用getComputedStyle(元素, null)
    - 第一個參數是要擷取樣式的元素
    - 第二個參數，可以傳遞一個僞元素，一般傳null
    - 這個方法會傳回一個封裝了元素樣式的對象
```
var box = document.getElementById("box");
var obj = getComputedStyle(box, null);
alert(obj.widt);
           
```
- 節點相關屬性
  1. clientWidth 元素可見寬度(不帶機關，隻讀，内容+内邊距)
  2. clientHeight 元素可見高度(同上)
  3. offsetWidth 元素寬度(不帶機關，隻讀，内容+内邊距+外邊距)
  4. offsetHeight 元素高度(同上)
  5. offsetParent 擷取目前元素的定位父元素，擷取到離目前元素最近的開啟了定位的祖先元素，沒有就傳回body
  6. offsetLeft 目前元素相對于其定位父元素的水準偏移量
  7. offsetTop 目前元素相對于其定位父元素的垂直偏移量
  8. scrollWidth 擷取到整個滾動區域的寬度
  9. scrollHeight 擷取到整個滾動區域的高度
  10. scrollLeft 擷取水準滾動條滾動的距離
  11. scrollTop 擷取垂直滾動條滾動的距離
事件對象
- 當事件的響應函數被觸發時，浏覽器每次都會将一個事件對象作為實參傳遞到響應函數中
```
box.onclick = function(event){} // event就是事件對象
           
```
- 事件對象中封裝了目前事件相關一切資訊
- 在IE8中，響應函數被觸發時，浏覽器不會傳遞事件對象，在IE8及以下的浏覽器中，是将事件對象作為window對象的屬性儲存的
```
var x = window.event.clientX; // 用window擷取event對象
           
```
- 事件對象中的相關屬性
  1. clientX 擷取滑鼠指針的水準坐标
  2. clientY 擷取滑鼠指針的垂直坐标
  3. target 傳回觸發事件的目标元素
  4. wheelDelta 滾輪滾動的方向，向上是正，向下是負值(火狐不支援)
    - event.datail 可以解決上述問題，向上是負，向上是負值
  5. keyCode 擷取按鍵的編碼
- 基本的一些事件
  1. onblur 元素失去焦點
  2. onclick 當使用者點選某個對象時調用的事件句柄
  3. ondblclick 當使用者輕按兩下某個對象時調用的事件句柄
  4. onfocus 元素獲得焦點
  5. onkeydown 某個鍵盤按鍵被按下
  6. onkeypress 某個鍵盤按鍵被按下并松開
  7. onkeyup 某個鍵盤按鍵被松開
  8. onmousedown 滑鼠按鈕被按下
  9. onmousemove 滑鼠被移動
  10. onmouseout 滑鼠從某元素移開
  11. onmouseover 滑鼠移到某元素之上
  12. onmouseup 滑鼠按鍵被松開
事件冒泡Bubble
- 後代元素事件被觸發時，其祖先元素的相同僚件也會觸發
- 用事件對象取消冒泡
```
event.cancelBubble = true;
           
```
事件的委派
- 将事件統一綁定給元素的共同祖先元素，這樣當後代元素上的事件觸發時，會一緻冒泡到祖先元素，進而通過祖先元素的響應函數來處理事件
- 事件委派是利用了冒泡，通過委派可以減少事件綁定的次數，提高程式的性能
- 這樣做了之後，所有的子元素都會觸發事件，可以通過event.target來進一步限制觸發事件的條件解決

事件的綁定

使用對象.事件 = 函數的形式綁定響應函數，隻能同時為一個元素的一個事件綁定一個響應函數。綁定多個，後面會覆寫前面的。
通過方法 addEventListener(事件的字元串(沒on)，回調函數，是否在捕獲階段觸發事件(一般是false))。按綁定順序執行 IE8不支援

IE8解決 attachEvent(事件的字元串(有on)，回調函數)。後綁定，先執行

function bind(obj, eventStr, callback) {
    // addEventListener的this是綁定事件的對象
    // attachEvent的this是window
    if (obj.addEventListener) {
        obj.addEventListener(eventStr, callback, false);
    } else {
        obj.attachEvent("on" + eventStr, function(){
            // this指向由方法的調用方式來決定
            // call方法可以調整this的指向
            callback.call(obj);
        });
    }
}

事件的傳播
- 事件的傳播，網景和微軟有不同的了解
- 微軟
  1. 事件應該是由内向外傳播，事件觸發時，先觸發目前元素上的事件，再是祖先元素的事件
  2. 事件應該在冒泡階段執行
- 網景
  1. 事件應該是由外向内傳播，先祖先，後元素本身
- W3C将事件傳播分成了三個階段
  1. 捕獲階段：在捕獲階段時，從祖先元素向目标元素進行事件捕獲，預設此時不會觸發事件
  2. 目标階段：事件捕獲到目标元素，捕獲結束開始觸發事件
  3. 冒泡階段：事件向祖先元素冒泡，并執行
  4. IE8及以下沒有事件捕獲階段
滾輪事件
- onmousewheel滑鼠滾輪滾動事件，會在滾輪滾動時觸發
  1. 火狐不支援，用DOMMouseScroll解決，需要通過addEventListner綁定
鍵盤事件
- onkeydown 按鍵被按下
- onkeyup 按鍵松開
- 鍵盤事件一般綁定給可以擷取到焦點的對象或者document
BOM 浏覽器對象模型
- Window 代表整個浏覽器的視窗，同時也是網頁中的全局對象
- Navigator 代表目前浏覽器的資訊，可以通過該對象識别不同的浏覽器，不太行，用userAgent
- Location 代表目前浏覽器的位址欄資訊
- History 代表浏覽器的曆史記錄(隐私問題，隻能擷取到當次通路前進或後退的曆史記錄)
- Screen 代表使用者的螢幕資訊，該對象可以擷取到使用者的顯示器的相關資訊、
- 上述内容，都可以通過window擷取
定時器 setInterval(function(){}, time)
- 定時調用，可以将一個函數，每隔一段時間(time毫秒)執行一次
- 傳回值是一個Number型的資料，這個數字用來辨別唯一的定時器
- clearInterval(定時器的傳回值) 關閉定時器
延時調用 setTimeout(function(){}, time)
- 延時用，将一個函數在指定時間(time毫秒)後執行一次
- 傳回值是一個Number型的資料，這個數字用來辨別唯一的延時調用
- clearTimeout(延時調用的傳回值)
JSON
- JSON就是一個特殊的字元串，這個字元串可以被任意的語言識别，以及轉換
- 用來進行資料傳遞
- JavaScript用JSON對象來做JS對象和JSON字元串的互相轉換
- JSON.parse(jsonStr) JSON字元串轉JS對象
- JSON.stringify(jsObject) JS對象轉JSON字元串

Tips

取消綁定事件的預設行為。
- 在綁定的回調函數中return false;
- return對addEventListener不好用，用event.preventDefault(); 調用一下就可以(IE8不支援)
通過style屬性來修改元素的樣式，每修改一個樣式，浏覽器就重新渲染一次頁面，性能差。可以修改class去替換樣式
取消輸入框按鍵按下的預設行為，就輸入不進去了
擷取滾動條
- chrome認為是body的
  1. document.body.scrollTop
  2. document.body.scrollLeft
- 火狐認為是html的
  1. document.documentElement.scrollTop
  2. document.documentElement.scrollLeft
setCaputer() 在處理一個 mousedown 事件過程中調用這個方法來把全部的滑鼠事件重新定向到這個元素，直到滑鼠按鈕被釋放或者 document.releaseCapture() 被調用。
releaseCapture() 如果該 document 中的一個元素之上目前啟用了滑鼠捕獲，則釋放滑鼠捕獲。
className 屬性擷取元素class值
innerHTML擷取元素内部的HTML代碼
innerText元素内部的文本内容

變量聲明提前，使用var聲明的變量，會先執行，在聲明前輸出不會出錯，會傳回undefined

// var a; 提前了，但是指派10并沒有提前
console.log(a); // 會輸出undefined
var a = 10;

var result = confirm() 确認框，确認和取消。确認傳回true，取消傳回false
var str = prompt(); 會彈出一個帶有文本輸入框的提示框，輸入後可以取得值

JavaScript_初級

Tips

繼續閱讀

主流浏覽器四大綜合性能測試

JavaScript自學筆記【4】函數的聲明與調用目錄二、函數的聲明三、函數的調用

請求逾時VUE axios重新再次請求

nodejs微信開發---授權登入+擷取使用者資訊微信網頁授權

debian9更新4.9.0核心到4.19.2核心過程

Javascript建構Bingo卡片遊戲

JavaScript的那些坑之事件代理事件代理事件階段

javascript的for (var i in data)慎用javascript中的for (var i in data)謹慎用

tab滑鼠經過菜單切換

vue （vue2.0）使用總結(從大體結構總結)

vue搭建過程及出現問題

/\B(?=(?:\d{3})+$)/g 一條令人費解的正規表達式

适用于JavaScript的ECMAScript 2020規範向前發展

JS生成uuid的四種方法

layui多任務上傳添加進度條