【前端】JavaScript
一、JavaScript概述
1.JavaScript的歷史
-
1992年Nombas開發出C-minus-minus(C--)的嵌入式腳本語言(最初綁定在CEnvi軟件中).後將其改名ScriptEase.(客戶端執行的語言)
-
Netscape(網景)接收Nombas的理念,(Brendan Eich)在其Netscape Navigator 2.0產品中開發出一套livescript的腳本語言.Sun和Netscape共同完成.後改名叫Javascript
-
微軟隨後模仿在其IE3.0的產品中搭載了一個JavaScript的克隆版叫Jscript.
-
為了統一三家,ECMA(歐洲計算機制造協會)定義了ECMA-262規範.國際標準化組織及國際電工委員會（ISO/IEC）也采納 ECMAScript 作為標準（ISO/IEC-16262）。從此，Web 瀏覽器就開始努力（雖然有著不同的程度的成功和失敗）將 ECMAScript 作為 JavaScript 實現的基礎。EcmaScript是規範.
2.ECMAScript
盡管 ECMAScript 是一個重要的標準，但它並不是 JavaScript 唯一的部分，當然，也不是唯一被標準化的部分。實際上，一個完整的 JavaScript 實現是由以下 3 個不同部分組成的：
- 核心（ECMAScript）
- 文檔對象模型（DOM） Document object model (整合js，css，html)
- 瀏覽器對象模型（BOM） Broswer object model（整合js和瀏覽器）
- Javascript 在開發中絕大多數情況是基於對象的.也是面向對象的.
簡單地說，ECMAScript 描述了以下內容：
- 語法
- 類型
- 語句
- 關鍵字
- 保留字
- 運算符
- 對象 (封裝 繼承 多態) 基於對象的語言.使用對象.
二、JavaScript的基礎
1.JS的引入方式
1 直接編寫 <script> alert(‘hello yuan‘) </script> 2 導入文件 <script src="hello.js"></script>
2.JS的變量、常量和標識符
2.1：JS的變量
（1）聲明變量時不用聲明變量類型，全都使用var關鍵字；
var a;<br>a=3;
（2）一行可以聲明多個變量，並且可以是不同類型
var name="yuan", age=20, job="lecturer";
（3）聲明變量時，可以不用var，如果不用var，那麽它是全局變量
（4）變量命名，首字符只能是字母,下劃線,$美元符 三選一，余下的字符可以是下劃線、美元符號或任何字母或數字字符且區分大小寫，x與X是兩個變量
Camel 標記法 首字母是小寫的，接下來的字母都以大寫字符開頭。例如： var myTestValue = 0, mySecondValue = "hi"; Pascal 標記法 首字母是大寫的，接下來的字母都以大寫字符開頭。例如： Var MyTestValue = 0, MySecondValue = "hi"; 匈牙利類型標記法 在以 Pascal 標記法命名的變量前附加一個小寫字母（或小寫字母序列），說明該變量的類型。例如，i 表示整數，s 表示字符串，如下所示“ Var iMyTestValue = 0, sMySecondValue = "hi";命名規範
2.2：常量和標識符
常量：直接在程序中出現的數據值
標識符：
- 由不以數字開頭的字母、數字、下劃線(_)、美元符號($)組成
- 常用於表示函數、變量等的名稱
- 例如：_abc,$abc,abc,abc123是標識符，而1abc不是
- JavaScript語言中代表特定含義的詞稱為保留字，不允許程序再定義為標識符
3.JS的數據類型
number ----- 數值 boolean ----- 布爾值 string ----- 字符串 undefined ----- undefined null ----- null
3.1：數字類型（number）
- 不區分整型數值和浮點型數值;
- 所有數字都采用64位浮點格式存儲，相當於Java和C語言中的double格式
- 能表示的最大值是±1.7976931348623157 x 10308
- 能表示的最小值是±5 x 10 -324
整數：
在JavaScript中10進制的整數由數字的序列組成
精確表達的範圍是?-9007199254740992 (-253) 到 9007199254740992 (253)
超出範圍的整數，精確度將受影響
浮點數：
使用小數點記錄數據
例如：3.4，5.6
使用指數記錄數據
例如：4.3e23 = 4.3 x 1023
16進制和8進制數的表達:
16進制數據前面加上0x，八進制前面加0;16進制數是由0-9,A-F等16個字符組成;8進制數由0-7等8個數字組成
3.2：字符串類型（string）
是由Unicode字符、數字、標點符號組成的序列；字符串常量首尾由單引號或雙引號括起；JavaScript中沒有字符類型；常用特殊字符在字符串中的表達
字符串中部分特殊字符必須加上右斜杠\；常用的轉義字符：
\n：換行 \‘：單引號 \"：雙引號 \\：右斜杠
3.3：布爾類型（boolean）
Boolean類型僅有兩個值：true和false，也代表1和0，實際運算中true=1，false=0
布爾值也可以看作on/off、yes/no、1/0對應true/false
Boolean值主要用於JavaScript的控制語句，例如：
f (x==1){ y=y+1; }else{ y=y-1; }
3.4：Null & Undefined類型
Undefined類型
Undefined 只有一個值，即undefined。當生命的變量未初始化時，該變量的默認值是undefined。當函數無明確返回值時，返回的也是值“undefined”；
Null類型
另一種只有一個值的類型是Null，它只有一個專用值null，即它的字面量。值undefined實際上是從值null派生來的，因此ECMAScript把他們定義為相等的。
盡管這兩個值相等，但它們的含義不同。undefined是聲明了變量但未對其初始化時賦予該變量的值，null則用於表示尚未存在的對象（在討論typeof運算符時，簡單的介紹過這一點）。如果函數或方法要返回的是對象，name找不到該對象時，返回的通常是null。
4.運算符
算術運算符： + - * / % ++（自加一） -- 比較運算符： > >= < <= != == === !== 邏輯運算符： && || ！ （邏輯與或非） 賦值運算符： = += -= *= /= 字符串運算符： + 連接，兩邊操作數有一個或兩個是字符串就做連接運算
4.1：算術運算符
（1）自加自減
假如x=2，那麽x++表達式執行後的值為3，x--表達式執行後的值為1；i++相當於i=i+1，i--相當於i=i-1；
遞增和遞減運算符可以放在變量前也可以放在變量後：--i
x++（先賦值再計算） var ret=x++：ret=10 ++x（先計算後賦值） var ret=++x：ret=11
（2）單元運算符
- 除了可以表示減號還可以表示負號 例如：x=-y + 除了可以表示加法運算還可以用於字符串的連接 例如："abc"+"def"="abcdef"
JS不同於python，是一門弱類型語言
靜態類型語言 一種在編譯期間就確定數據類型的語言。大多數靜態類型語言是通過要求在使用任一變量之前聲明其數據類型來保證這一點的。Java 和 C 是靜態類型語言。 動態類型語言 一種在運行期間才去確定數據類型的語言，與靜態類型相反。VBScript 和 Python 是動態類型的，因為它們確定一個變量的類型是在您第一次給它賦值的時候。 強類型語言 一種總是強制類型定義的語言。Java 和 Python 是強制類型定義的。您有一個整數，如果不明確地進行轉換 ，不能將把它當成一個字符串去應用。 弱類型語言 一種類型可以被忽略的語言，與強類型相反。JS 是弱類型的。在JS中，可以將字符串 ‘12‘ 和整數 3 進行連接得到字符串‘123‘，然後可以把它看成整數 123 ，所有這些都不需要任何的顯示轉換。 所以說 Python 既是動態類型語言 (因為它不使用顯示數據類型聲明)，又是強類型語言 (因為只要一個變量獲得了一個數據類型，它實際上就一直是這個類型了)。
（3）NaN
var d="yuan"; d=+d; alert(d);//NaN:屬於Number類型的一個特殊值,當遇到將字符串轉成數字無效時,就會得到一個NaN數據 alert(typeof(d));//Number //NaN特點: var n=NaN; alert(n>3); alert(n<3); alert(n==3); alert(n==NaN); alert(n!=NaN);//NaN參與的所有的運算都是false,除了!=
var d="yuan"; d=+d; alert(d);//NaN:屬於Number類型的一個特殊值,當遇到將字符串轉成數字無效時,就會得到一個NaN數據 alert(typeof(d));//Number //NaN特點: var n=NaN; alert(n>3); alert(n<3); alert(n==3); alert(n==NaN); alert(n!=NaN);//NaN參與的所有的運算都是false,除了!=
4.2：比較運算符
> >= < <= != == === !==
用於控制語句時：
if (2>1){ // 3 0 false null undefined ［］ console.log("條件成立!") }
等號和非等號的同類運算符是全等號和非全等號。這兩個運算符所做的與等號和非等號相同，只是它們在檢查相等性前，不執行類型轉換。
console.log(2==2); console.log(2=="2"); #自動執行類型轉換 console.log(2==="2"); #不執行類型轉換 console.log(2!=="2"); #不執行類型轉換
註意1：
比較運算符兩側如果一個是數字類型,一個是其他類型,會將其類型轉換成數字類型.
比較運算符兩側如果都是字符串類型,比較的是最高位的asc碼,如果最高位相等,繼續取第二位比較.
註意2：
等性運算符：執行類型轉換的規則如下： 如果一個運算數是 Boolean 值，在檢查相等性之前，把它轉換成數字值。false 轉換成 0，true 為 1。 如果一個運算數是字符串，另一個是數字，在檢查相等性之前，要嘗試把字符串轉換成數字。 如果一個運算數是對象，另一個是字符串，在檢查相等性之前，要嘗試把對象轉換成字符串。 如果一個運算數是對象，另一個是數字，在檢查相等性之前，要嘗試把對象轉換成數字。 在比較時，該運算符還遵守下列規則： 值 null 和 undefined 相等。 在檢查相等性時，不能把 null 和 undefined 轉換成其他值。 如果某個運算數是 NaN，等號將返回 false，非等號將返回 true。 如果兩個運算數都是對象，那麽比較的是它們的引用值。如果兩個運算數指向同一對象，那麽等號返回 true，否則兩個運算數不等。
5.流程控制
5.1：順序結構
<script>
console.log(“星期一”);
console.log(“星期二”);
console.log(“星期三”);
</script>
5.2：分支結構
if-else結構：
if (表達式){ 語句１; ...... }
else{ 語句２; ..... }
如果表達式的值為true則執行語句1,否則執行語句2
if-elif-else結構：
if (表達式1) { 語句1; }
else if (表達式2){ 語句2; }
else if (表達式3){ 語句3; }
else{ 語句4; }
seitch-case結構
switch比else if結構更加簡潔清晰，使程序可讀性更強,效率更高。
switch基本格式 switch (表達式) { case 值1:語句1;break; case 值2:語句2;break; case 值3:語句3;break; default:語句4; }
var week=3; switch (week){ case 1:console.log("禮拜一");break; case 2:console.log("禮拜2");break; case 3:console.log("禮拜3");break; case 4:console.log("禮拜4");break; case 5:console.log("禮拜5");break; case 6:console.log("禮拜6");break; case 7:console.log("禮拜7");break; default:console.log("輸入錯誤") }示例
5.2：循環結構
for循環：條件循環
語法規則： for(初始表達式;條件表達式;自增或自減) { 執行語句 …… }
功能說明：實現條件循環，當條件成立時，執行語句1，否則跳出循環體
for循環的另一種形式：遍歷循環
for( 變量 in 數組或對象) { 執行語句 …… }
white循環：
語法規則： while (條件){ 語句1； ... }
功能說明：運行功能和for類似，當條件成立循環執行語句花括號{}內的語句，否則跳出循環；同樣支持continue與break語句。
5.3：異常處理
try { //這段代碼從上往下運行，其中任何一個語句拋出異常該代碼塊就結束運行 } catch (e) { // 如果try代碼塊中拋出了異常，catch代碼塊中的代碼就會被執行。 //e是一個局部變量，用來指向Error對象或者其他拋出的對象 } finally { //無論try中代碼是否有異常拋出（甚至是try代碼塊中有return語句），finally代碼塊中始終會被執行。 } 註：主動拋出異常 throw Error(‘xxxx‘)
三、JavaScript的對象
簡介：
在JavaScript中除了null和undefined以外其他的數據類型都被定義成了對象，也可以用創建對象的方法定義變量，String、Math、Array、Date、RegExp都是JavaScript中重要的內置對象，在JavaScript程序大多數功能都是基於對象實現的。
<script language="javascript"> var aa=Number.MAX_VALUE; //利用數字對象獲取可表示最大數 var bb=new String("hello JavaScript"); //創建字符串對象 var cc=new Date(); //創建日期對象 var dd=new Array("星期一","星期二","星期三","星期四"); //數組對象 </script>
3.1：string對象
3.1.1：字符串對象創建
字符串對象創建（兩種方式）
（1）變量=“字符串”
（2）字符串對象名稱=newstring（字符串）
var str1="hello world"; var str1= new String("hello word");
3.1.2：字符串對象的屬性和函數
x.length －－－－獲取字符串的長度 x.toLowerCase() －－－－轉為小寫 x.toUpperCase() －－－－轉為大寫 x.trim() －－－－去除字符串兩邊空格 －－－－字符串查詢方法 x.charAt(index) －－－－str1.charAt(index);－－－－獲取指定位置字符，其中index為要獲取的字符索引 x.indexOf(findstr,index)－－－－查詢字符串位置 x.lastIndexOf(findstr) x.match(regexp) －－－－match返回匹配字符串的數組，如果沒有匹配則返回null x.search(regexp) －－－－search返回匹配字符串的首字符位置索引 示例： var str1="welcome to the world of JS!"; var str2=str1.match("world"); var str3=str1.search("world"); alert(str2[0]); // 結果為"world" alert(str3); // 結果為15 －－－－子字符串處理方法 x.substr(start, length) －－－－start表示開始位置，length表示截取長度 x.substring(start, end) －－－－end是結束位置 x.slice(start, end) －－－－切片操作字符串 示例： var str1="abcdefgh"; var str2=str1.slice(2,4); var str3=str1.slice(4); var str4=str1.slice(2,-1); var str5=str1.slice(-3,-1); alert(str2); //結果為"cd" alert(str3); //結果為"efgh" alert(str4); //結果為"cdefg" alert(str5); //結果為"fg" x.replace(findstr,tostr) －－－－ 字符串替換 x.split(); －－－－分割字符串 var str1="一,二,三,四,五,六,日"; var strArray=str1.split(","); alert(strArray[1]);//結果為"二" x.concat(addstr) －－－－ 拼接字符串
【前端】JavaScript