弱類型語言 i++ before alt 都是 length 前插 inner rtb

JavaScript 是一種通用的網絡腳本語言，常用來為網頁改進設計、驗證表單、添加動態功能等，實現用戶交互。
JavaScript 是一門輕量級，解釋型，基於原型，面向對象，弱類型的網絡腳本語言。

• 解釋型：無需編譯，在程序運行中逐行進行解釋執行。
• 弱類型：對使用的數據類型不嚴格要求。
• 面向對象：JS 基本對象，DOM 對象，BOM 對象。
• 跨平臺：不依賴於操作系統，僅需要瀏覽器的支持。

1. JS基礎

1.1 JS使用方式

1.行內js：

<input type="button" value="js" onclick="javascript:alert(‘hello‘)" />
 

2.內部js：

<script>
    js代碼
</script>

3.外部js：外部js文件

4.引入外部js文件：

<!--引入外部js-->
<script type="text/javascript" src="js/index.js"></script>

1.2 JS註釋

1.單行註釋：

// 單行註釋

2.多行註釋：

/*
 多行註釋
 */

1.3 JS輸出語句

alert();           //彈出框輸出
console.log();     //在console顯示
document.write();  //寫入HTML文件中

1.4 JS標識符

JS標識符命名規則：
①見名知意
②駝峰命名法：首個單詞全小寫，之後的單詞首字母大寫。
③abc123_$
④不能以數字開頭
⑤不能使用關鍵字
⑥嚴格區分大小寫

1.5 JS變量

1.5.1 變量聲明

JS是弱類型的，無需明確的變量聲明，同一個變量可以存放不同類型的值。

1.JS使用var聲明變量：

var a = 3;  //JS使用var聲明變量

2.JS直接使用標識符聲明變量：

x = 4;  //JS直接使用標識符聲明變量，全局變量； 

1.5.2 變量作用域

變量類型	描述
全局變量	定義在函數外的var變量 & 無var變量
局部變量	定義在函數內的var變量

1.5.3 變量提升★

變量提升（Hoisting）：JS函數及變量的聲明都將被提升到函數的最頂部。

1.6 JS數據類型

JS是一種弱類型語言（動態類型），同一個變量可存放不同類型的值。

typeof操作符：檢測變量數據類型；

typeof 3.14       //number 數字
typeof NaN        //number 數字
typeof ‘123‘      //string 字符串
typeof true       //boolean 布爾值
typeof undefined  //undefined 未賦值變量
typeof null       //object 空對象引用
typeof {}         //object 對象
typeof []         //object 數組對象
typeof alert()    //function 函數

1.6.1 原始類型

1.Number | 數字：

3;      // 整數
3.4;    // 浮點數
123e5;  // 科學計數法
0xFFFF; // 十六進制數
NaN;    // 非數字，任何涉及NaN的計算，都返回NaN。

2.String | 字符串：

"abc";  // 雙引號字符串
‘abc‘;  // 單引號字符串
"\r\n"; // 轉義字符

轉義字符	描述
\n	換行
\r	回車
\t	制表
\b	退格
\‘	‘
\"	"
\\	\

3.Boolean | 布爾型：

true;  // true值
false; // false值

4.Undefined | 未賦值變量：

undefined; // 意為"缺少值"，未賦值的變量;（用於變量類型）

5.Null | 空指針：

null; // 空對象指針，（用於對象類型）
/* typeof null，類型為Object; */

-區分undefined和null★：

number(null)==0
number(undefined)==NaN;
/* 目前null與undefined基本同義 */

1.6.2 類型轉換

1.轉換成字符串：

.toString(); // null,undefined沒有toString()

2.轉換成數字：

.parseInt("123red",10);   // 返回123，逐個字符判斷
.parseFloat("1.2.3",10);  // 返回1.2，逐個字符判斷

強制類型轉換：

1.Number()：

Number(1.2)   // 1.2
Number(1.2.3) // NaN
Number(false) // 0
Number(true)  // 1 
Number(undefined) // NaN
Number(null)  // 0
Number(new object()) // NaN

2.String()：

String();   // 轉換任意數據類型
String(null); // "null"
String(undefined); // "undefined"

3.Boolean()：

/* false：空字符串，0，undefined，null */
Boolean("");        //false：空字符串
Boolean(0);         //false：0
Boolean(undefined); //false：undefined
Boolean(null);      //false：null
Boolean(new object()); //true - 對象

1.6.3 引用類型

引用類型：對象，一組屬性和方法的集合。

1.Object | 對象：{}

var obj = {
    var name = "張三";
    var age = 20;
    var eat = function(){
        alert(this.name + "正在吃飯~");
    }
};

var obj = new Object();  // Object對象

2.Array | 數組：[]

var arr = [1,2,3];  // 字面量

var arr = new Array(1,2,3);  //數組對象

3.Function | 函數：

function f(){}  // 一般函數聲明

var f = function(){}  // 函數表達式

var f = new Function(arg1, arg2, ..., argN, function_body) // 函數對象

更多引用類型：String，Boolean，Number，Math，Date，RegExp，Error，EvalError，RangeError，ReferenceError，SyntaxError，TypeError，URIError。

1.7 JS運算符

1.算術運算符：+，-，*，/，%，++，--
2.關系運算符：>，<，>=，<=，==，!=
3.邏輯運算符：&，|，~，^，!，&&，||
4.位運算符：<<，>>，>>>，~，&，|，^
5.賦值運算符：=，+=，-=，*=，/=，%=
6.條件運算符：a?b:c

雙等與三等★：
==&!=：只比較值，不比較類型。
===&!==：既比較值，也比較類型。

1.8 JS語句

1.8.1 選擇語句

if語句：

if(條件表達式){
    條件為true執行語句;
}else{
    條件為false執行語句;
}

switch語句：

switch(n)
{
case 1:
  執行代碼塊 1
  break;
case 2:
  執行代碼塊 2
  break;
default:
  與以上case值不同時執行的代碼
}

1.8.2 循環語句

while循環：

var i = 0;
while(i<10){
    循環體;
    i++;
}

do while循環：

// 先執行一次後判斷
var i = 0;
do{
    循環體;
    i++;
}while(i<10);

for循環：

for(var i = 0;i<10;i++){
    循環體;
}

for-in循環：

for(var i in 對象){
    循環體;
}

1.8.3 跳轉語句

跳轉語句	描述
break	跳出當前循環，跳出一層循環；
continue	跳出本次循環，進行下次循環；
return	結束整個方法；

2. JS高級

2.1 JS字符串

JS字符串本質是一個不可變的字符數組。

2.1.1 創建字符串

1.使用字面量創建字符串：

var str = "abc";  // 字面量

2.使用String對象創建字符串：

var str = new String("abc"); // String對象

2.1.2 字符串拼接

var str = "abc"+"def";  // 使用“+”拼接字符串

2.1.3 String對象

string屬性&方法	描述
length	返回字符串長度
charAt(number)	返回指定索引位置的字符
charCodeAt()	返回指定索引位置字符的 Unicode 值
concat()	連接字符串
substring()	提取字符串中兩個指定的索引號之間的字符
substr()	從起始索引號提取字符串中指定數目的字符
slice()	提取字符串片斷，並在新字符串中返回被提取部分
indexOf()	返回字符串中檢索指定字符第一次出現的位置 如果沒有返回-1
lastIndexOf()	返回字符串中檢索指定字符最後一次出現的位置 如果沒有返回-1
trim()	移除字符串首尾空格
toUpperCase() toLowerCase()	大小寫轉換
localeCompare()	比較兩個字符串大小
match()	找到一個或多個正則表達式的匹配
search()	檢索與正則表達式相匹配的值，返回位置
replace()	替換與正則表達式匹配的子串
split()	把字符串分割為子字符串數組

2.2 JS數組

JS數組是動態數組，無需指定長度。JS又是弱類型的，數組中可以有不同的變量類型。

2.2.1 創建數組

1.使用字面量創建：

var arr=["a","b","c"];  // 字面量

2.使用Array創建：

var arr=new Array("a","b","c");  // Array對象

2.2.2 遍歷數組

1.使用普通for循環遍歷：

for(var i = 0 ; i < arr.length ; i++){
    console.log(arr[i]);
}

2.使用for-each遍歷：

for(var i in arr){
    console.log(arr[i]);
}

2.2.3 Array對象

Array方法	描述
length	返回數組長度
isArray()	判斷是否為數組
valueOf()	返回數組對象的原始值
toString()	將數組以字符串的形式返回
push()	向數組末尾追加元素，返回新的長度
pop()	刪除並返回數組的最後一個元素
join()	將數組轉換為字符串，默認按逗號隔開
shift()	刪除並返回數組的第一個元素
unshift()	向數組的開頭追加元素，返回新的長度
reverse()	數組反轉
slice()	從某個已有的數組返回選定的元素
splice()	刪除元素，並向數組添加新元素
sort()	排序； 數字按大小排，字母按字典順序排，漢字按Unicode排
indexOf()	返回元素索引
lastIndexOf()	返回元素反序索引

2.3 JS函數

JS函數是一種數據類型[function]，JS函數也是對象。

2.3.1 函數定義

1.使用函數聲明定義：

function 函數名(arg0, arg1, ... argN){}  // 函數聲明

2.使用函數表達式定義：

var 函數名 = function(arg0, arg1, ... argN){}  // 函數表達式 | 匿名函數

3.使用構造函數定義：

var function_name = new Function(arg1, arg2, ..., argN, function_body)

4.自執行函數：自己調用自己

(function 函數名([形參]){
    函數體;
})([實參]);

2.3.2 函數提升★

一等公民：JS函數與JS變量處於同等地位，可作為一個值使用。
①可將函數賦值給變量
②可將函數賦值給對象的屬性
③可將函數作為參數出入其他函數
④可將函數作為返回結果

函數提升（Hoisting）：JS函數及變量的聲明都將被提升到函數的最頂部。

2.3.3 Function對象

1.JS函數實際上是功能完整的對象。

function屬性&方法	描述
eval("JS代碼")	執行JS代碼
escape()	對字符串進行編碼
unescape()	對字符串進行解碼
encodeURI()	把字符串編碼為 URI
decodeURI()	解碼某個編碼的 URI
isNaN()	判斷是否是非數字
Number()	把對象轉換為數字
String()	把對象轉換為字符串
parseInt()	解析一個字符串並返回一個整數
parseFloat()	解析一個字符串並返回一個浮點數

2.JS函數不會重載，只會執行最後一個函數。

var doAdd = new Function("num", "alert(num + 20)");
var doAdd = new Function("num", "alert(num + 10)");
doAdd(1);  // 返回11

2.3.4 arguments對象

JS函數內置對象：arguments對象，表示函數調用的參數數組。

1.檢測參數個數：

arguments.length  // 參數數組長度，參數個數

2.模擬函數重載：使用arguments.length判斷傳遞給函數的參數個數，即可模擬重載。

function doAdd() {
  if(arguments.length == 1) {
    alert(arguments[0] + 1);
  } else if(arguments.length == 2) {
    alert(arguments[0] + arguments[1]);
  }
}
doAdd(10);    // 返回11
doAdd(10,20); // 返回30

2.3.5 JS閉包★

閉包（closure）指的是詞法表示包括不被計算的變量的函數，即函數可以使用函數之外定義的變量。

// 閉包實例
var iBaseNum = 10;
function addNum(iNum1, iNum2) {
    function doAdd() {
        return iNum1 + iNum2 + iBaseNum;
        // 內部函數作為閉包，獲取外部函數的參數iNum1、iNum2，以及全局變量iBaseNum。
    }   // doAdd()函數根本不接受參數，它使用的值是從執行環境中獲取的。
  return doAdd(); 
}

2.4 JS對象

2.4.1 Object對象

Object屬性&方法	描述
constructor	指向對象構造器
prototype	指向對象原型
Object.assign({}, obj)	對象復制
Object.assign(obj1, obj2, obj3)	對象合並
Object.create(proto, [prop_Object])	模擬類（class）
Object.is(obj1, obj2)	判斷兩個值是否嚴格相同
Object.keys(obj)	返回對象所有屬性的數組
Object.delete(obj.prop)	刪除對象某個屬性

in操作符：判斷屬性是否屬於對象。

prop in obj  // 判斷prop是否屬於obj

2.4.2 內置對象

JS內置對象（本地對象/全局對象）：由 ECMAScript 實現提供的、獨立於宿主環境的所有對象，在 ECMAScript 程序開始執行時出現。

JS內置對象：Object，String，Array，Function，Boolean，Number，Math，Date，RegExp，Error等。

其中Object，String，Array，Function請參考上文。

Number對象：

Number屬性&方法	描述
NaN	非數字值
MAX_VALUE	最大值
MIN_VALUE	最小值
toFixed(n)	返回指定n位小數的數字的字符串
toExponential()	返回指數為n的科學計數法的數字的字符串
toPrecision()	把數字四舍五入格式化為指定的長度

Math對象：靜態調用方法；Math沒有構造方法，不能生成實例。

Math屬性&方法	描述
Math.random()	隨機數
Math.round()	四舍五入
Math.ceil()	向上取整
Math.floor()	向下取整

Date對象：

var date = new Date();    // 當前日期和時間
var time = date.getTime();     // 返回從 1970 年 1 月 1 日至今的毫秒數
var year = date.getFullYear(); // 獲取年份
date.setFullYear(yyyy, mm, dd); // 設置具體的日期

詳細了解JS內置對象請參考：JavaScript 對象參考手冊；

2.4.3 創建對象

1.原始方式一：

var obj = new Object();
obj.name = "張三";
obj.age = 22;
obj.eat=function(){
    alert(this.name+"吃饅頭");
}

2.原始方式二：

var obj = {
    var name = "張三";
    var age = 20;
    var eat = function(){
        alert(this.name + "正在吃飯~");
    }
};

3.工廠方式：

function objectFactory(name,age){
    return {
        name:name,
        age:age,
        eat:function(){
            alert(this.name+"吃饅頭");
        }
    }
}

4.構造函數★：

function Person(name,age){
    this.name=name,
    this.age=age,
    this.eat=function(){
        console.log(this.name+"吃饅頭");
    }
}

this關鍵字：指向調用該方法的對象。

instanceof操作符：判斷對象是否為類（構造方法）的一個實例。

var obj = new Object();
obj instanceof Object;  // true  判斷obj是否為Object的一個實例。

在 JavaScript 中，很多時候，你需要避免使用 new關鍵字。

2.5 JS原型

JavaScript是一門面向對象的編程語言，Brendan Eich為JavaScript設計了繼承機制，但為了簡化繼承，並未引入“類”的概念，而是采用構造函數直接生成實例，采用原型 (prototype) 共享通用數據。

2.5.1 構造函數

Brendan Eich為JavaScript設計了繼承機制，采用構造函數直接生成實例。

// 構造函數
function Person(name,age){
    this.name=name,
    this.age=age,
}
// 使用[構造函數]生成實例
var p1 = new Person("Tom",20);

2.5.2 原型對象

引入prototype屬性：
使用構造函數直接生成實例，存在一個問題：無法共享通用數據。
為了共享的通用屬性和方法，Brendan Eich為構造函數設置了一個prototype屬性，指向構造函數的原型對象。
原型對象用於存放所有實例共享的通用屬性和方法。構造函數每生成一個實例對象，將自動引用prototype對象中共享的屬性和方法。

// 構造函數
function Person(name,age){
    this.name=name,
    this.age=age,
}
// 原型對象：添加共享屬性&方法
Person.prototype = {species: ‘人類‘}
// 使用[構造函數]生成一個實例
var p1 = new Person("Tom",20);
// 可調用共享屬性
alert(p1.species); // 人類

原型對象的屬性：
①__proto__：指向創建它的函數對象的原型對象；
②constructor：指向構造函數；

Obj.prototype.constructor = Obj

2.5.3 原型鏈

原型鏈：JS對象（不論是普通對象還是函數對象）都有__proto__屬性，指向創建它的函數對象的原型對象。通過__proto__向上遍歷直到Object.prototype.__proto__ = null構成原型鏈。

註意：使用__proto__可使實例（子）獲取構造器（父）的原型對象，容易造成不必要的麻煩。所以__proto__僅是為了實現原型鏈繼承機制而存在的一個屬性，不推薦在編程中使用。

2.5.4 原型繼承

原型繼承：當查找一個對象的屬性時，JavaScript會向上遍歷原型鏈，直到找到相應的屬性為止。
原型繼承的本質：由於所有的實例對象共享同一個prototype對象，那麽從外界看起來，prototype對象就好像是實例對象的原型，而實例對象則好像"繼承"了prototype對象一樣。

原型繼承：設置[子類的原型]是[父類的實例]。

son.prototype = new Father()

2.6 JS事件機制

事件一般與函數配合使用，這樣就可以使事件驅動函數執行。

2.6.1 事件類型

事件三要素：事件源，事件名稱，事件處理程序；

事件句柄	描述
onclick	鼠標單擊
onfocus	元素獲得焦點
onblur	元素失去焦點
onmouseover	鼠標覆蓋
onmouseout	鼠標移開
onmouseup	鼠標點擊
onmousedown	鼠標松開
onscroll	窗口滾動
onchange	發生改變
onload	加載完成
onunload	退出頁面
onerror	加載錯誤
onsubmit	點擊提交
onreset	點擊重置
onkeydown	某個鍵盤的鍵被按下
onkeypress	某個鍵盤的鍵被按下或按住
onkeyup	某個鍵盤的鍵被松開

2.6.2 事件傳播

事件傳播方式：
①事件捕獲：Window->Document -> Element -> Attribute -> Text；
②事件冒泡：Window<-Document <- Element <- Attribute <- Text；
註意：focus blur scroll事件除外其它的大部分事件都會冒泡

阻止事件傳播：

event.stopPropagation()

2.6.3 事件註冊

註冊/移除事件的三種方式：
①on事件：

事件源.onclick = function(){}

②addEventListener()：

事件源.addEventListener(‘click‘,function(){},[useCapture])
// 捕獲階段：useCapture=true; 默認值為false；（IE9+）

③attachEvent()：

事件源.attachEvent(eventName,function(){},[useCapture])
// 捕獲階段：useCapture=true; 默認值為false；（IE8-）

取消事件默認行為：

①阻止獨享屬性（on+event）綁定的事件的默認事件：

return false;

②阻止通過addEventListener()添加的事件的默認事件：

event.preventDefault();

③阻止通過attachEvent()添加的事件的默認事件：

event.returnValue = false;

3. JS DOM

DOM文檔對象模型

3.1 DOM獲取頁面元素

1.根據id獲取元素：

document.getElementById("id"); // 返回單個元素

2.根據標簽名獲取元素數組：

document.getElementByTagName("標簽名"); // 返回數組

3.根據name獲取元素數組：

document.getElementByName("name"); // 返回數組

4.根據類名獲取元素數組：

document.getElememtByClassName("類名"); // 返回數組

5.根據選擇器獲取元素數組：

document.querySelectorAll("選擇器"); // 返回數組

3.2 DOM操作

1.改變HTML輸出流：

document.write();  // 直接向HTML輸出流寫內容。

2.改變HTML內容：

元素.innerText;  // 獲取/設置文本值（對代碼轉義為文本）
元素.innerHTML;  // 獲取/設置HTML代碼

3.改變HTML屬性：

元素.HTML屬性 = 新屬性值 // 改變HTML屬性

4.自定義HTML屬性

元素.getAttribute("屬性");      // 獲取屬性
元素.setAttribute("屬性","值")  // 設置屬性
元素.removeAttribute("屬性");   // 移除屬性

5.改變CSS樣式：

元素.style.CSS樣式 = 新樣式 // 改變CSS樣式

CSS屬性名多個單詞以-分隔s，JS調用CSS屬性名多個單詞采用駝峰命名；
即在JS中使用fontSize來表示CSS中的font-size。

3.3 DOM節點

DOM節點：文檔Document->元素Element->屬性Attribute->文本Text；

1.當前節點屬性：

當前節點屬性	描述
nodeName	文檔節點：#document 元素節點：標簽名 屬性節點：屬性名 文本節點：#text
nodeValue	元素節點：undefined / null 屬性節點：屬性值 文本節點：文本
nodeType	元素：1 屬性：2 文本：3 註釋：8 文檔：9
innerHTML	讀取：當前節點及後代節點的HTML代碼 寫入：HTML代碼，新的DOM樹
innerText	讀取：當前節點的文本內容 寫入：文本值（對html轉義）
textContent	當前節點及後代節點的文本內容

2.當前節點的相關節點：

當前節點的相關節點	描述
ownerDocument	所屬文檔
previousSibling	前一個同級節點
nextSibling	下一個同級節點
parentNode	父節點
parentElement	父元素
firstChild	子節點
children	子元素

3.針對父節點的操作：

針對父節點的DOM方法	描述
appendChild()	追加一個子節點
removeChild()	移除子節點
replaceChild()	替換子節點
insertBefore(new,old)	在舊節點前插入新節點
isEqualNode()	判斷節點是否相同

4.創建節點：

創建節點	描述
createAttribute()	創建屬性節點
createElement()	創建元素節點
createTextNode()	創建文本節點

5.自定義屬性：

自定義屬性	描述
getAttribute("attr")	獲取屬性
setAttribute("attr", "value")	設置屬性及屬性值
removeAttribute("attr")	移除屬性

4. JS BOM

BOM瀏覽器對象模型，其中window對象是BOM頂級對象，document，location，history，navigator都是windows的子對象。

4.1 window-瀏覽器窗口

window對象：瀏覽器窗口；

window屬性&方法	描述
window.name	window對象名稱
window.innerHeight	瀏覽器窗口的內部高度
window.innerWidth	瀏覽器窗口的內部寬度

4.1.1 原生JS入口函數

// 原生JS入口函數：等待加載完頁面元素後再執行JS代碼
window.onload = function(){ JS代碼 }  // 原生JS入口函數

4.1.2 JS彈出框

1.警告框：

window.alert("警告");  // 警告框；

2.確認框：

var flag = window.confirm("確定要刪除？"); // 確認框；
// 確定：返回true | 取消：返回false

3.提問框：

var input = window.prompt("你的年齡？");  //提問框；
// 確定：返回輸入值 | 取消：返回null

可省略windows對象，直接使用。

4.1.3 JS定時器

1.單次定時器：

// 設置單次定時器
var timerId = window.setTimerout(function(){定時任務},timeout);  // 只執行一次
// 清除單次定時器
window.clearTimeout(timerId);

2.循環定時器：

// 設置循環定時器
var timerId = window.setInterval(function(){定時任務},timeout);  // 循環執行
// 清除循環定時器
window.clearInterval(timerId);

可省略windows對象，直接使用。

// 循環定時器：由單次定時器取消。
var timer2 = setInterval(function(){
    document.write(new Date());//輸出當前時間
},1000)
setTimeout(function(){
    clearInterval(timer2);//清除定時器timer2
},5000)

4.2 location-瀏覽器url

location對象：瀏覽器地址

location屬性&方法	描述
location.href	獲取url
location.protocol	返回所使用的 web 協議（http:// 或 https://）
location.hostname	返回 web 主機的域名
location.pathname	返回當前頁面的路徑和文件名
location.port	返回 web 主機的端口（80 或 443）
location.assign()	加載頁面
location.reload()	重新加載

url統一資源定位符：scheme://host:port/path?query#fragment

url元素	描述
scheme	通信協議；如http，ftp，maito，https等
host	主機；服務器域名系統主機名、IP地址；
port	端口；http默認端口80；
path	路徑；
query	查詢；可選，用於給動態網頁傳遞參數； 參數名1=值1&參數名2=值2；
fragment	信息片段；字符串，錨點；

4.3 history-會話歷史

history對象：會話歷史

history屬性&方法	描述
back()	後退，go(-1)
forword()	前進，go(1)
go(n)	跳轉n步

4.4 navigator-瀏覽器信息

navigator對象：瀏覽器信息

navigator屬性&方法	描述
navigator.appName	瀏覽器名稱
navigator.appVersion	瀏覽器版本
navigator.language	瀏覽器語言
navigator.platform	操作系統類型
navigator.userAgent	瀏覽器設定的User-Agent字符串

Web | JavaScript學習筆記