我的博客：https://520526.xyz/

JavaScript初識

JavaScript是Web頁面中的一種腳本編程語言，也是一種通用的、跨平臺的、基於對象和事件驅動並具有安全性的腳本語言。它不需要進行編譯，而是直接嵌入在HTML頁面中，把靜態頁面轉變成支持用戶交互並響應相應事件的動態頁面。

在HTML中的使用

在頁面中直接嵌入JavaScript

在HTML文檔中可以使用標記將JavaScript腳本嵌入到其中。
script屬性：

屬性	說明
language	不常用
type	用於指定使用的腳本類型
src	指定外部腳本文件路徑
defer	不常用

type屬性的語法格式：

html

<script type = "text/javascript"></script>

鏈接外部JavaScript文件

語法格式：多了個src屬性

html

<script type = "text/javascript" src = "js文件的rul路徑"></script>

注意：

外部JavaScript文件中只能包含JavaScript代碼，不能包含HTML和``標籤。
在``標籤內部不要存在其他的JavaScript代碼。
在鏈接外部JavaScript文件時``結束標籤不能省略。

作爲標籤的屬性值使用

在HTML文檔中可以在標籤、標籤中使用JavaScript腳本作爲它們的屬性值。
通過“JavaScript”調用

html

<a href="javascript:alert('你好JavaScript')">測試</a>

與實踐結合調用

html

<input type="button" value="測試" onclick="alert('你好JavaScript ')" />

基本語法

執行順序

程序按照在HTML文件中出現的順序逐行執行。

大小寫敏感

在輸入語言的關鍵字、函數名、變量時，都必須採用正確的大小寫形式。

空格與換行

在JavaScript中會忽略程序中的空格、換行和製表符。

每行結尾的分號可有可無

爲了養好習慣，經量寫上分號。

註釋

註釋就是向文件代碼中添加的–些說明性的文字，或者對代碼進行暫時屏蔽。//內容ro /*內容*/

數據結構

數據類型

數值型

數值類型	說明
十進制	由0~9組成的數字序列
十六進制	“0X”或“0x”開頭數字序列
八進制	以0開頭
浮點型	傳統計數法、科學計數法e或E後面的整數表示10的指數次冪
特殊值Infinity	超出最大值範圍，則正超出最小範圍，則負
特殊值NaN	非數字

科學計數法
語法格式：

text

[digits] [.digits] [E|e[(+|-)]]

例子：

4E+2=4∗102=4004E+2=4∗102=400

3.14e4=3.14∗104=314003.14e4=3.14∗104=31400

.14e4=0.14∗104=1400.14e4=0.14∗104=1400

314E−2=314∗10−2=3.14314E−2=314∗10−2=3.14

字符串型

字符串是由0個或多個字符組成的序列，它可以包含太小寫字母、數字、標點符號或其他字符，也可以包含漢字。程序中的字符串型數據是包含在單引號或雙引號中的。
由單引號定界的字符串中可以含有雙引號，由雙引號定界的字符串中也可以含有單引號。

text

"I'm legend" = I'm legend 
'你好"JavaScript"' = 你好"JavaScript"

空字符串不包含任何字符，也不包含任何空格，用一對引號表示，即 “” 或 ‘ ‘
轉義字符是\，通過轉義字符可以在字符串中添加不可顯示的特殊字符（例如\n, \t），或者防止引號匹配混亂的問題

轉義字符

轉義字符	描述
\r	回車符
\t	水平製表符，Tab空格
\b	退格
\v	垂直製表符
\f	換頁
\n	換行符
\ \	反斜槓
\OOO	八進制，範圍000~777
\ ‘	單引號
\xHH	十六進制整數，範圍00~FF
\ “	雙引號
\uhhhh	十六進制編碼Unicode字符

在document. write語句中使用轉義字符時，只有將其放在格式化文本塊中才會起作用，即腳本必須放在``標籤內。
代碼：

javascript

<script type="text/javascript">
    document.write("<pre>");
    document.write("網頁基礎:\nHTML\nCSS\nJavascript");
    document.write("<pre>");
</script>

布爾型

布爾數據類型只有兩個值，一個是true （真），一個是false （假），它說明了某個事物是真還是假。
特殊數據類型：
未定義值就是undefined，表示還沒賦值

空值 nullnull

用於定義空的或不存在的引用。

常量與變量

常量：固定不變數據
變量：存儲要用的數據
如果只是聲明瞭變量，並未對其賦值，則其值默認爲undef ined。可以使用var語句重複聲明同一個變量，也可以在重複聲明變量時爲該變量賦一個新值。
在JavaScript中的變量必須要先定義後使用，沒有定義過的變量不能直接使用。

JavaScript的關鍵字


abstract	continue	finally	instanceof	private
boolean	default	float	int	public
break	do	for	interface	return
byte	double	function	long	short
case	else	goto	native	static
catch	extends	implements	new	super
char	false	import	null	switch
class	final	in	package	synchronized
this	throw	typeof	true	var
void	while	with

算術運算符

用於在程序中進行加、減、乘、除等運算。

比較運算符

對操作數進行比較，然後返回一個布爾值true或faIse.

< , <= , > , >= , == , != , === 絕對等於絕對等於 , !==絕對不等於絕對不等於

賦值運算符

簡單賦值運算符：=
符合賦值運算符：+= , -= , *= , /= , %=

字符串運算符

用於兩個字符串型數據之間的運算符，它的作用是將兩個字符串連接起來。
如果比較字符串，則逐個比較字符的ASCIl碼值，ASCII碼值大的字符串大。ASCII碼值都相等，字符數多的字符串大。

邏輯運算符

用於對一個或多個布爾值進行邏輯運算：&&（與）、||（或）、!(非）

條件運算符

表達式?結果1:結果2
結果1爲: true
結果2爲: false

逗號運算符

用於將多個表達式排在一起，整個表達式的值爲最後一個表達式的值。
例子：

javascript

var a , b , c , d;
a = (b=3 , c=4 , d=1);
document.write("a最終值爲"+a);
//結果爲 1

運算符 typeoftypeof

typeof 用於判斷操作數的數據類型。語法格式：

javascript

typeof 操作數;

數據類型（操作數）	返回值
數值型	number
字符串型	string
布爾型	boolean
undefined	nudefined
null	object
對象	object
函數	functio

運算符 newnew

new 用來創建一個新的對象實例。語法格式：

格式1：
對象實例名稱 = new 對象類型參數參數;
格式2：
對象實例名稱 = new 對象類型2;

運算符的優先級

優先級	結合性	運算符
最高	向左	、[]、
由高到低依次排列		++、–、-、！、delete、new、typeof、void
	向左	*、/、%
	向左	+、-
	向左	<<、>> 、>>
	向左	<、<=、>、>=、in、instanceof
	向左	=、!=、=== 、絕對不等於
	向左	&
	向左	^
	向左	\|
	向左	&&
	向左	\|\|
	向右	?:
	向右	=
	向右	=、/=、%=、+=、-=、<<=、>>=、>>>=、&=、^=、\|=
最低	向右	,

結合性
左結合：除了賦值、條件和單目運算符
右結合：賦值運算符、條件運算符

表達式

是運算符和操作數組合而成的式子。運算結果可分爲：算術表達式、字符串表達式、邏輯表達式
表達式是一個相對的概念，在表達式中可以含有若千個子表達式，而且表達式中的一個常量或變量都可以看作是一個表達式。

表達式類型轉換

轉換爲數值型

類型	轉換爲數值型
undefined	NaN
null	0
邏輯型	true,則爲 1 ;false,則爲 0
字符串型	若內容爲數字，則相應的數字，否則爲NaN
其他對象	NaN（非數字）

轉換爲布爾型

類型	轉換爲布爾型
undefined	false
null	false
數值型	值爲0或NaN,則結果爲false,否則爲true
字符串型	長度爲0，則結果爲false,否則爲true
其他對象	true

轉換爲字符串型

類型	轉換爲字符串型
undefined	“undefined”
null	“null”
數值型	NaN、0或者與數值相對應的字符串
邏輯型	值true,則爲”true”,值爲false,則結果爲”false”
其他對象	若存在，結果爲toString方法的值，否則結果爲”undefined”

語句結構

賦值語句

···

判斷語句 ifif

if語句，語法格式：

javascript

if(表達式){
  語句
}

if…else語句，語法格式：

javascript

if(表達式){
  語句1
}else{
  語句2
}

if…else if語句，語法格式：

javascript

if(表達式1){
  語句1
}else if(表達式2){
    語句2
}···
else if(表達式n){
    語句n
}else{
    語句n+1
}

if語句的嵌套

套娃格式，if中的if。語法格式：

javascript

if(表達式1){
    if(表達式2){
        語句1
    }else{
        語句2
    }
}else{
    if(表達式3){
        語句3
    }else{
        語句4
    }
}

分支語句 switchswitch

switch 它根據一個表達式的值，選擇不同的分支執行。語法格式：

javascript

switch (表達式){
    case 常量表達式1 :
        語句1;
        ···;
        break;
    case 常量表達式2 :
        語句2;
        ···;
        break;
        ···
    case 常量表達式n :
        語句n;
        ···;
        break;
    default:
        語句n+1;
        break;
}

*default語句可以省略。在表達式的值不能與任何一個case語句中的值相匹配的情況下，JavaScript會直接結束switch語句，不進行任何操作。*
*case後面常量表達式的數據類型必須與表達式的數據類型相同，否則匹配會全部失敗，而去執行default語句中的內容。*
*在switch語句中漏寫break語句。則會影響其他語句*

循環語句 whilewhile

while 判斷，它是利用一個條件來控制是否要繼續重複執行這個語句。語法格式：

javascript

while(表達式)(
   語句（循環體）
)

*在使用while語句時，一定要保證循環可以正常結束，即必須保證條件表達式的值存在爲false的情況，否則將形成死循環。*

循環語句 do…whiledo…while

do…while 後判斷，它也是利用一個條件來控制是否要繼續重複執行這個語句。語法格式：

javascript

do{
   語句
}while(表達式);

循環語句 forfor

for 計次循環，一般用於循環次數已知的情況。語法格式：

javascript

if(初始化表達式;條件表達式;迭代表達式){
    語句（循環體）
}

*在使用for語句時，也一定要保證循環可以正常結束，也就是必須保證循環條件的結果存在爲false的情況，否則循環體將無休止地執行下去，從而形成死循環。*

跳轉語句

continue語句

用於跳過本次循環，並開始下一次循環。
當使用continue語句跳過本次循環後，如果循環條件的結果爲false,則退出
循環，否則繼續下一次循環。
*continue語句只能應用在while、for、do…while語句中.*

break語句

在循環語句中，break語句用於跳出循環。

*continue語句只能應用在while、for、do…while或switch語句中。在嵌套的循環語句中，break語句只能跳出當前這一層的循環語句，而不是跳出所有的循環語句。*

函數

函數的定義

函數是定義一次，可以調用或執行多次的一段JavaScript代碼。定義函數的語法格式：

javascript

function 函數名([參數1,參數2...]){
    語句
    [return返回值]
}

函數調用

函數的簡單調用

調用的語法格式：

javascript

函數名(傳遞給函數的參數1,傳遞給函數的參數2,....);

函數名有大小寫的區分

在事件響應中調用函數

事件處理流程：

觸發事件→調用和執行函數→在頁面中產生響應

javascript

<input type="button" value="提交" onclick="[調用函數]"/>

通過鏈接調用函數

在 < a > 標籤中的href鏈接地址鏈接地址屬性中使用javascript:函數名()格式來調用函數，單擊這個鏈接時，函數將被執行。

javascript

<a href="javascaript:[調用函數]"> 單擊鏈接 </a>

函數的參數

函數的參數分爲形參和實參
形參：定義函數時指定的參數
實參：調用函數時實際傳遞的值
語法格式：

javascript

定義函數參數的語法格式:
function 函數名(形參1,形參2...){
    函數體
}

調用函數語法格式:
函數名(實參1,實參2...);

形參和實參要對應

函數的返回值

在函數中，可以使用return語句爲函數返回一個值。語法格式：

javascript

retutn 表達式;

嵌套函數

函數的嵌套定義

函數的嵌套定義就是在函數內部再定義其他的函數。會使程序的可讀性降低

函數的嵌套調用

允許在一個函數的函數體中對另一個函數進行調用

遞歸函數

所謂遞歸函數就是函數在自身的函數體內調用自身，只在特定的情況下使用。語法格式：

javascript

function 函數名(參數1){
    函數名(參數2);
}

注意判斷結束條件，否則死循環！！！

內置函數

內置函數
parseInt	數值處理前四個
parseFloat
isNaN
isFinite
eval	字符串處理函數後五個
escape
unescape
encodeURI
decodeURI

數值處理函數

字符轉數字函數 parseIntparseInt

parseInt 將首位爲數字的字符串轉換成數字，字符串開頭不是數字的字符，則返回NaN，前提是默認十進制。語法格式：（默認十進制）

javascript

parseInt(String,[進制數]) 
如: parseInt("e2b",16)
結果爲:3627

字符轉浮點函數 parseFloatparseFloat

parseFloat 將首位爲數字的字符串轉化成浮點型數字，字符串不是以數字開頭，則返回NaN。語法格式：

javascript

parseFloat(String)
如: parseFloat("5.411")

檢驗函數 isNaNisNaN

isNaN 檢驗某個值是否爲NaN。語法格式：

javascript

isNaN(num)

返回值：
結果爲NaN 函數返回值爲true
否則，函數返回值爲false

檢驗限度函數 isFiniteisFinite

isFinite 檢驗其參數是否有限。語法格式：

javascript

isFinite(num)

num：需要驗證的數字

返回值：
有限數字，則返回true
NaN或無窮大，則返回false

代碼示範：

css

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"> 
    <title>Title</title>
</head>
<body>
    <script type="text/javascript">
        var no1 = "123abc";
        var no2 = "abc123";
        var no3 = "e2b";
        var no4 = "3434.43";
        var no5 = "abb434.43";
        var no6 = "12322";
        var no7 = "1232a2";
        var no8 = "123";
        var no9 = "123abc";
        var no10 = "1/0";
        document.write("parseInt:"+"<br/>");
        document.write("123abc = "+parseInt(no1)+"<br/>");
        document.write("abc123 = "+parseInt(no2)+"<br/>");
        document.write("e2b = "+parseInt(no3,16)+"<br/>");
        document.write("<br/>"+"parseFloat:"+"<br/>");
        document.write("3434.43 = "+parseFloat(no4)+"<br/>");
        document.write("abb434.43 = "+parseFloat(no5)+"<br/>");
        document.write("<br/>"+"isNaN:"+"<br/>");
        document.write("12322 = "+isNaN(no6)+"<br/>");
        document.write("1232a2 = "+isNaN(no7)+"<br/>");
        document.write("<br/>"+"isFinite:"+"<br/>");
        document.write("123 = "+isFinite(no8)+"<br/>");
        document.write("123abc = "+isFinite(no9)+"<br/>");
        document.write("1/0 = "+isFinite(no10)+"<br/>");
    </script>
</body>
</html>

字符串處理函數

字符表達式值函數 evaleval

eval 計算字符串表達式的值並執行。語法格式：

javascript

eval(String)
//如: eval("5 * 4")

字符串編碼函數 escapeescape

escape 將一些特殊字符(不包括字母和數字字符以及*、@、一、_、+、.和/)進行編碼，它可以將這些特殊字符轉換爲“%XX” 格式的數字。語法格式：

javascript

escape(String)
//如: escape("You & Me") →You%20%26%20Me

字符串解碼函數 unescapeunescape

unescape 對應用escape函數編碼後的字符串進行解碼。它可以將字符串中“%XX”格式的數字轉換爲字符。語法格式：

javascript

unescape(String)
//如: unescape("You%20%26%20Me") →You & Me

URL編碼函數 encodeURIencodeURI

encodeURI 將URI字符串進行編碼，語法格式：

javascript

encodeURI(uri)
//如:encodeURI("https://www.baidu.com/?name=測試");

URL解碼函數 decodeURIdecodeURI

decodeURI **對已編碼URI字符串進行解碼，**語法格式：

javascript

decodeURI(uri)
//如:decodeURI("https://www.baidu.com/?name=%E6%B5%8B%E8%AF%95")

代碼示範：

css

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <script type="text/javascript">
        document.write("eval:"+"<br/>");
        document.write("3+5 ="+eval("3+5")+"<br/>");
        document.write("3*4/2+1 = "+eval("3*4/2+1")+"<br/>");
        eval("x = 5 ; y = 6 ; document.write(x * y)");
        document.write("<br/><br/>"+"escape:"+"<br/>");
        document.write("I%20love%20JS%20%21%21%21 ="+escape("I love JS !!!")+"<br/>");
        document.write("<br/>"+"unescape:"+"<br/>");
        document.write("I love JS !!! = "+unescape("I%20love%20JS%20%21%21%21")+"<br/>");
        document.write("<br/>"+"encodeURI:"+"<br/>");
        document.write("https://www.baidu.com/?name=%E6%B5%8B%E8%AF%95 = "+encodeURI("https://www.baidu.com/?name=測試")+"<br/>");
        document.write("<br/>"+"decodeURI:"+"<br/>");
        document.write("https://www.baidu.com/?name=測試 = "+decodeURI("decodeURI(\"https://www.baidu.com/?name=%E6%B5%8B%E8%AF%95\")")+"<br/>");
    </script>
</body>
</html>

定義函數的其他方法

定義匿名函數

語法格式：

javascript

var 變量名 = function(參數1，參數2...){
    函數體
};

Function 構造函數

語法格式：

javascript

var 變量名 = new Function("參數1","參數2",..."函數體");

Function構造函數中的所有參數和函數體都必須是字符串類型，因此一定要用雙引號或單引號引起來。

前端-JavaScript API筆記（超級詳細版本）

我的博客：https://520526.xyz/

JavaScript初識

在HTML中的使用

在頁面中直接嵌入JavaScript

鏈接外部JavaScript文件

作爲標籤的屬性值使用

基本語法

執行順序

大小寫敏感

空格與換行

每行結尾的分號可有可無

註釋

數據結構

數據類型

數值型

字符串型

轉義字符

布爾型

空值 nullnull

常量與變量

JavaScript的關鍵字

算術運算符

比較運算符

賦值運算符

字符串運算符

邏輯運算符

條件運算符

逗號運算符

運算符 typeoftypeof

運算符 newnew

運算符的優先級

表達式

表達式類型轉換

轉換爲數值型

轉換爲布爾型

轉換爲字符串型

語句結構

賦值語句

判斷語句 ifif

分支語句 switchswitch

循環語句 whilewhile

循環語句 do…whiledo…while

循環語句 forfor

跳轉語句

continue語句

break語句

函數

函數的定義

函數調用

函數的簡單調用

在事件響應中調用函數

通過鏈接調用函數

函數的參數

函數的返回值

嵌套函數

函數的嵌套定義

函數的嵌套調用

遞歸函數

內置函數

數值處理函數

字符轉數字函數 parseIntparseInt

字符轉浮點函數 parseFloatparseFloat

檢驗函數 isNaNisNaN

檢驗限度函數 isFiniteisFinite

字符串處理函數

字符表達式值函數 evaleval

字符串編碼函數 escapeescape

字符串解碼函數 unescapeunescape

URL編碼函數 encodeURIencodeURI

URL解碼函數 decodeURIdecodeURI

定義函數的其他方法

定義匿名函數

Function 構造函數