第1章 JavaScript基礎

時間 2019-11-19

標籤 javascript 基礎欄目 JavaScript 简体版

原文原文鏈接

1.1 爲何學習JavaScriptjavascript

JavaScript在網頁製做中佔有很是重要的地位。前端

一、客戶端表單驗證java

網站中常常見到的會員登陸、註冊，咱們填寫登陸、註冊信息時，若是某項信息格式輸入錯誤，或沒有輸入內容，表單頁面將及時給出錯誤提示。這些錯誤在提交到服務器前，由客戶端提早進行驗證，稱爲客戶端表單驗證。編程

二、頁面動態效果數組

在JavaScript中，能夠編寫響應鼠標單擊等事件的代碼，建立動態頁面特效，從而高效地控制頁面的內容。瀏覽器

雖然JavaScript能夠實現許多動態效果，但要實現一個特效代碼量大，而使用jQuery(JavaScript程序庫)能夠用極少的代碼實現一樣的效果。安全

三、 jQuery基礎服務器

JavaScript是學習jQuery的基礎。網絡

1.2 什麼是JavaScriptapp

JavaScript是一種描述性語言，也是一種基於對象(Object)和事件驅動(Event Driven)的，並具備安全性能的腳本語言。它與HTML(超文本標記語言)一塊兒，在一個Web頁面中連接多個對象，與Web客戶實現交互。不管在客戶端仍是在服務器端，JavaScript應用程序都要下載到瀏覽器的客戶端執行，從而減輕了服務器端的負擔。

特色：

→ JavaScript主要用來在HTML頁面中添加交互行爲。

→ JavaScript是一種腳本語言，語法和Java相似。

→ JavaScript通常用來編寫客戶端的腳本。

→ JavaScript是一種解釋性語言，邊執行邊解釋。

ECMAScript是一種腳本語言的標準，JavaScript語言就是遵循ECMAScript標準的一種實現。

1.2.1 JavaScript的組成

一個完整的JavaScript由三個部分組成：ECMAScript、BOM、COM。

一、 ECMAScript標準

ECMAScript是一種開放的、被國際上廣爲接受的、標準的腳本語言規範。它不與任何具體的瀏覽器綁定。ECMAScript標準主要描述瞭如下內容：

→ 語法。

→ 變量和數據類型。

→ 運算符。

→ 邏輯控制語句。

→ 關鍵字、保留字。

→ 對象。

ECMAScript是一個描述，規定了腳本語言的全部屬性、方法和對象的標準，所以在使用Web客戶端腳本語言編碼時必定要遵循ECMAScript標準。

二、瀏覽器對象模型

瀏覽器對象模型(Browser Object Model,BOM)，提供了獨立於內容與瀏覽器窗口進行交互的對象，使用瀏覽器對象模型能夠實現與HTML的交互，如網上常見的彈出窗口、前進後退等功能都是瀏覽器對象控制的。

三、文檔對象模型

文檔對象模型(Document Object Model,DOM)，是HTML文檔對象模型(HTML DOM)定義的一套標準方法，用來訪問和操縱HTML文檔，如網上商城常見的隨鼠標移動顯示大的圖片、彈出小提示等都是文檔對象的功勞。

1.2.2 JavaScript的基本結構

JavaScript代碼是用<script>標籤嵌入HTML文檔中。瀏覽器遇到<script>標籤時，將逐行讀取內容，直到遇到</script>結束標籤爲止。而後，瀏覽器將檢查JavaScript語句的語法，若是有任何錯誤，則會在警告框中顯示；若是沒有錯誤，則瀏覽器將編譯並執行語句。

一、 JavaScript的基本結構

JavaScript的基本結構以下：

JavaScript語句;

</script>

其中type是<script>標籤的屬性，用於指定文本使用到的語言類別爲text/javascript。

注意：有的網頁中用默認「text/javascript」，這種寫法是正確的，由於HTML5中可省略type屬性，HTML5默認爲text/javascript。

document.write()用來向頁面輸出能夠包含HTML標籤的內容。

經驗：

→ 若是不使用<script>標籤，瀏覽器就會將document.write(「<h1>Hello,JavaScript</h1>」)看成純文原本處理，也就是說會把這條命令自己寫到頁面上。

→ <script>…</script>的位置並非固定的，能夠包含在文檔的任何地方，只要保證這些代碼在被使用前已讀取並加載到內存便可。

二、 JavaScript的執行原理

在JavaScript的執行過程當中，瀏覽器客戶端與應用服務器端採用請求/響應模式進行交互。

（1）瀏覽器客戶端向服務器端發送請求：一個用戶在瀏覽器的地址欄中輸入要訪問的頁面（頁面中包含JavaScript程序）。

（2）數據處理：服務器端將某個包含JavaScript的頁面進行處理。

（3）發送響應：服務器端將含有JavaScript的HTML文件處理頁面發送到瀏覽器客戶端，而後由瀏覽器客戶端從上而下逐條解析HTML標籤和JavaScript，並將頁面效果呈現給用戶。

使用客戶端腳本的好處：

（1）包含JavaScript的頁面只要下載一次便可，這樣能減小沒必要要的網絡通訊。

（2） JavaScript程序由瀏覽器客戶端執行，而不是由服務器端執行，所以能減輕服務器端的壓力。

1.2.3 在網頁中引用JavaScript的方式

JavaScript做爲客戶端程序，嵌入網頁時有如下三種方式。

→ 內部JavaScript文件。

→ 使用外部JavaScript文件。

→ 直接在HTML標籤中。

一、內部JavaScript文件

直接使用<script>標籤將JavaScript代碼加入HTML文檔中。這是最經常使用的方式，但這種方式一般適用於JavaScript代碼較少，而且網站中的每一個頁面使用的JavaScript代碼均不相同的狀況。

二、使用外部JavaScript文件

外部JavaScript文件是將JavaScript代碼寫入一個外部文件中，以*.js爲擴展名保存，而後將該文件指定給<script>標籤中的「src」屬性，這樣就可使用這個外部文件了。這種方式適用於在若干個頁面實現相同的JavaScript效果。

不管是使用<script>標籤在網頁中編寫JavaScript代碼，仍是引用js文件，瀏覽器都會按照<script>標籤在頁面中出現的前後順序對它們依次進行解析。所以若是將<script>標籤放在<head>中，那麼意味着必須等到所有JavaScript代碼被下載、解析和執行完成以後，纔開始呈現網頁內容，這樣對於許多包含JavaScript代碼的頁面來講，會致使瀏覽器呈現頁面時出現明顯的延遲，而延遲期間瀏覽器窗口將一片空白。爲了不這個問題，如今許多網頁開發者會把<script>標籤放在<body>中，而且放在頁面內容的後面。

注意：外部文件不能包含<script>標籤，一般將擴展名爲.js的文件放到網站目錄中單獨存放腳本的子目錄中（通常爲js），這樣容易管理和維護。

三、直接在HTML標籤中

有時須要在頁面中加入簡短的JavaScript代碼實現一個簡單的頁面效果，如單擊按鈕時彈出一個對話框等，這樣一般會在按鈕事件中加入JavaScript處理程序。

onclick是單擊的事件處理程序，當用戶單擊按鈕時，就會執行執行「javascript:」後面的JavaScript命令，alert()是一個函數，相似Java中的方法，做用是向頁面彈出一個對話框。

這三種方式的應用場合。

→ 內部JavaScript文件適用於JavaScript特效代碼量少，僅用於單個頁面。

→ 外部js文件則適用於代碼較多，重複應用於多個頁面。

→ 直接在標籤中寫JavaScript則適合於極少代碼，僅用於當前標籤，可是這種方式增長了HTML代碼，所以這種方式在實際開發中應用較少。

1.3 JavaScript核心語法

1.3.1 變量的聲明和賦值

JavaScript是一種弱類型語言，沒有明確的數據類型，也就是說，在聲明變量時，不須要指定變量的類型，變量的類型由賦給變量的值決定。

在JavaScript中，變量是使用關鍵字var聲明的。

語法：

var 合法的變量名;

其中var是聲明變量所使用的關鍵字；「合法的變量名」是遵循JavaScript變量命名規則的變量名。JavaScript變量命名規則與Java變量命名規則相同，便可以由數字、字母、下劃線和「$」符號組成，但首字母不能是數字，而且不能使用關鍵字命名。能夠在聲明變量的同時爲變量賦值，這稱爲變量的初始化；也能夠在稍後的腳本中爲變量賦值。

聲明變量的同時爲變量賦值，例如：

var width=20;//在聲明變量width的同時，將數值20賦給了變量width

var x,y,z=10;//在一行代碼中聲明多個變量時，各變量之間用逗號分隔

JavaScript區分大小寫，因此大小寫不一樣的變量名錶示不一樣的變量。另外，因爲JavaScript是一種弱類型語言，所以容許不聲明變量而直接使用，系統將會自動聲明該變量，例如：

x=68;//沒有聲明變量x，直接使用

規範

→ 千萬要注意JavaScript區分大小寫，特別是變量的命名、語句關鍵字等，這種錯誤有時很難查找。

→ 變量能夠不通過聲明而直接使用，但這種方法很容易出錯，也很難查找排錯，所以不推薦使用，在使用變量以前，請先聲明後使用，這是良好的編程習慣。

1.3.2 數據類型

經常使用的基本數據類型以下。

→ undefined（未定義類型）。

→ null（空類型）。

→ number（數值類型）。

→ String（字符串類型）。

→ boolean（布爾類型）。

一、 typeof

ECMAScript提供了typeof運算符來判斷一個值或變量究竟屬於哪一種數據類型。

語法：

typeof(變量或值)

其返回結果有如下幾種。

→ undefined:若是變量是undefined類型的，則返回undefined類型的結果。

→ number:若是變量是number類型的，則返回number類型的結果。

→ string:若是變量是string類型的，則返回string類型的結果。

→ boolean:若是變量是boolean類型的，則返回boolean類型的結果。

→ object:若是變量是null類型的，或者變量是一種引用類型，如對象、函數、數組，則返回object類型的結果。

二、 undefined類型

undefined類型只有一個值，即undefined。當聲明的變量未初始化時，該變量的默認值是undefined。例如：

var width;

這行代碼聲明瞭變量width，且此變量沒有初始值，將被賦予值undefined。

三、 null類型

只有一個值的類型是null，是一個表示「什麼都沒有」的佔位符，能夠用來檢測某個變量是否被賦值。值undefined其實是值null派生來的，所以JavaScript把它們定義爲相等的，例如：

alert(null==undefined);//返回值爲true

儘管這兩個值相等，但它們的含義不一樣，undefined表示聲明瞭變量但未對該變量賦值，null則表示對該變量賦予了一個空值。

四、 number類型

JavaScript中定義的最特殊的類型是number類型，這種類型既能夠表示32位的整數，又能夠表示64位的浮點數。下面的代碼聲明瞭存放整數值和浮點數值的變量。

var iNum=32;

var iNum=32.0;

整數也能夠表示爲八進制或十六進制，八進制首數字必須是0，其後的數字能夠是任何八進制數字（0~7）；十六進制首數字也必須是0，後面是任意的十六進制數字和字母（0~9和A~F）。

例如：

var iNum=070;//070等於十進制的56

var iNum=0x1f;//0x1f等於十進制的31

對於很是大或很是小的數，能夠用科學計數法表示浮點數，也是number類型。另一個特殊值NaN(Not a Number)表示非數，它是number類型。例如：

typeof(NaN);//返回值爲number

五、 String類型

1) 字符串定義

在JavaScript中，字符串是一組被引號（單引號或雙引號）括起來的文本。例如：

var string1=」This is a string」;//定義了一個字符串string1

與Java不一樣，JavaScript不對「字符」或「字符串」加以區別，所以下面的語句也定義了一個字符串。

var oneChar=」a」;//定義了只有一個字符「a」的字符串

2) 字符的屬性與方法

JavaScript語言中的String也是一種對象。它也有一個length屬性，表示字符串的長度（包括空格等），調用length的語法格式以下。

語法：

字符串對象.length;

var str=」this is JavaScript」;

var strLength=str.length;

JavaScript中，字符串對象的使用語法格式以下。

語法：

字符串對象.方法名();

String對象經常使用方法

方法	描述
indexOf()	查找某個指定的字符串在字符串中首次出現的位置
charAt(index)	返回在指定位置的字符
toLowerCase()	把字符串轉化爲小寫
toUpperCase()	把字符串轉化爲大寫
substring(index1,index2)	返回位於指定索引index1和index2之間的字符串，而且包括索引index1對應的字符，不包括index2對應的字符
split(str)	將字符串分割爲字符串數組

最經常使用的是indexOf(str,index)方法，若是找到了指定字符串，則返回索引位置，不然返回-1。

index是可選的整數參數，表示從第幾個字符開始查找。

六、 boolean類型

boolean類型數據被稱爲布爾型數據或邏輯型數據，boolean類型是ECMAScript中經常使用的類型之一，它只有兩個值，true和false。

1.3.3 數組

同Java中的數組同樣，JavaScript中的數組也是具備相同數據類型的一個或多個值的集合。數組用一個名稱存儲一系列的值，用下標區分數組中的每一個值，數組的下標從0開始。

JavaScript中的數組也須要先建立、賦值，再訪問數組元素，並經過數組的一些方法和屬性對數組元素進行處理。

一、建立數組

語法：

var 數組名稱=new Array(size);

其中，new是用來建立數組的關鍵字，Array表示數組的關鍵字，而size表示數據中可存放的元素總數，所以size用整數來表示。

二、爲數組元素賦值

在聲明數組時，能夠直接爲數組元素賦值。

語法：

var fruit=new Array(「apple」,」orange」,」peach」,」banana」);

也能夠分別爲數組元素賦值。例如：

var fruit = new Array(4);

fruit[0]=」apple」;

fruit[1]=」orange」;

fruit[2]=」peach」;

fruit[3]=」banana」;

另外，除了Array()對象外，數組還能夠方括號「[」和「]」來定義。例如：

var fruit = [「apple」,」orange」,」peach」,」banana」];

三、訪問數組元素

能夠經過數組的名稱和下標直接訪問數組的元素，訪問數組的表示形式：數組名[下標]。

四、數組的經常使用屬性和方法

數組的經常使用方法和屬性

類別	名稱	描述
屬性	length	設置或返回數組中元素的數目
方法	join()	把數組的全部元素放入一個字符串，經過一個分隔符進行分隔
	sort()	對數組排序
	push()	向數組末尾添加一個或多個元素，並返回新的長度

1) length

數組的length屬性用於返回數組中元素的個數，返回值爲整型。若是在建立數組時就指定了數組的size值，那麼不管數組元素中是否存儲了實際數據，該數組的length值都是這個指定的長度值size。例如，var score=new Array(6);無論數組中的元素是否存儲了實際數據，score.length的值老是6。

2) join()

join()方法經過一個指定的分隔符把數組元素放在一個字符串中。

語法：

join(分隔符);

1.3.4 運算符號

經常使用的運算符

類別	運算符號
算術運算符	+、-、*、/、%、==、--
比較運算符	>、<、>=、<=、==、!=、===、!==
邏輯運算符	&&、\|\|、!
賦值運算符	=、+=、-=

其中，==表示等於，===表示恆等，!==表示不恆等，都是用於比較，可是==用於通常比較，===用於嚴格比較，==在比較時能夠轉換數據類型，===嚴格比較，只要數據類型不匹配就返回false。例如，」1」==true返回true，而」1」===true返回false。

1.3.5 邏輯控制語句

邏輯控制語句分爲兩類：條件結構和循環結構。

一、條件結構

與Java同樣，JavaScript的條件結構也分爲if結構和switch結構。

1) if結構

基本語法格式以下。

語法：

if(表達式){

//JavaScript語句1;

}

else{

//JavaScript語句2;l

}

其中，當表達式的值爲true時，執行JavaScript語句1，不然執行JavaScript語句2.

注意：若是if或else後只有一條語句，則能夠省略大括號；若是if或else後有多行語句，則JavaScript語句必須括在大括號內。

2) switch結構

基本語法格式以下。

語法：

switch(表達式){

case 值1:

//JavaScript語句1;

break;

case 值2:

//JavaScript語句2;

break;

……

default:

//JavaScript語句n;

break;

}

與Java相似，當用於等值的多分支比較時，使用switch語句可使程序的結構更加清晰。case表示條件判斷，關鍵字break會使代碼跳出switch語句，若是沒有關鍵字break，代碼就會繼續執行，進入下一個case。關鍵字default說明表達式的結果不等於任何一種狀況。

與Java中的switch語句不一樣的是，在JavaScript中的switch語句能夠用於字符串。例如：

var weekday=」星期一」;

switch(weekday){

case 「星期一」:

alert(「新的一週開始了」);

break;

case 「星期五」:

alert(「明天就能夠休息了」);

break;

default:

alert(「努力工做」);

break;

}

二、循環結構

JavaScript中的循環結構分爲for循環、while循環、do-while循環、for-in循環。

1) for循環語句

語法：

for(初始化;條件;增量或減量;){

//JavaScript語句;

}

其中，初始化參數告訴循環的開始值，必須賦予變量初值；條件用於判斷循環是否終止，若知足條件，則繼續執行循環體中的語句，不然跳出循環；增量或減量定義循環控制變量在每次循環時怎麼變化。在三個條件之間，必須使用分號（;）隔開。

2) while循環語句

語法：

while(條件){

//JavaScript語句;

}

其特色是先判斷後執行，當條件爲真時，就執行JavaScript語句；當條件爲假時，就退出循環。

3) do-while循環語句

語法：

do{

//JavaScript語句;

}while(條件);

該語句表示反覆執行JavaScript語句，直到條件爲假時才跳出循環。與while循環語句的區別在於，do-while循環語句先執行再判斷。

4) for-in循環

JavaScript提供了for-in循環經常使用於對數組或者對象的屬性進行循環操做。

語法：

for(變量 in 對象){

//JavaScript語句;

}

其中，「變量」爲指定的變量，能夠是數組元素，也能夠是對象的屬性。例如：

var fruit = [「apple」,」orange」,」peach」,」banana」];

for(var i in fruit){

document.write(fruit[i]+」<br/>」);

}

5) 中斷循環

break:能夠當即跳出整個循環。

continue:只是退出當前的循環，根據判斷條件決定是否進行下一次循環。

1.3.6 註釋

註釋是描述部分程序功能或整個程序功能的一段說明性文字，註釋不會被解釋器執行，而是會被直接跳過。註釋的功能是幫助開發人員閱讀、理解、維護和調試程序。JavaScript語言的註釋分爲單行註釋和多行註釋兩種。

單行註釋，以//開始，以行末結束。

多行註釋，以/*開始，以*/結束。

1.3.7 關鍵字和保留字

關鍵字標識了ECMAScript語句的開頭和結尾，關鍵字是保留的，不能用做變量名或函數名。

JavaScript的關鍵字

關鍵字	關鍵字	關鍵字	關鍵字	關鍵字
break	case	catch	continue	default
delete	do	else	finally	for
function	if	in	instanceof	new
return	switch	this	throw	try
typeof	var	void	while	with

保留字在某種意義上是爲未來的關鍵字而保留的單詞，所以保留字不能被用做變量名或函數名。

JavaScript的保留字

保留字	保留字	保留字	保留字	保留字
abstract	boolean	byte	char	class
const	debugger	double	enum	export
extents	final	float	goto	implements
import	int	interface	long	native
package	private	protected	public	short
static	super	synshronized	throws	transient
volatile

1.3.8 經常使用的輸入/輸出

在網上衝浪時，頁面上常常會彈出一些信息提示框，如註冊時彈出提示輸入信息的提示框，或者彈出一個等待用戶輸入數據的對話框等，這樣的輸入/輸出在JavaScript中稱爲警告對話框(alert)和提示對話框(prompt)。

一、警告(alert)

語法：

alert(「提示信息」);

該方法將彈出一個警告對話框，其內容能夠是一個變量的值，也能夠是一個表達式的值。

警告對話框是當前運行的網頁彈出的，在對該對話框作出處理前，當前網頁將不可用，後面的代碼也不會被執行，只有對警告對話框進行處理後（單擊「肯定」按鈕或直接關閉），當前網頁纔會繼續顯示後面的內容。

二、提示(prompt)

prompt()方法會彈出一個提示對話框，等待用戶輸入一行數據。

語法：

prompt(「提示信息」,」輸入框的默認信息」);

該方法的返回值也能夠被引用或存儲到變量中，例如：

var color=prompt(「請輸入你喜歡的顏色」,」紅色」);

prompt()方法的第一個參數值顯示在對話框上，一般是一些提示信息；第二個參數出如今用戶輸入的文本框中，且被選中，做爲默認值使用。若是省略第二個參數，則提示對話框的輸入文本框中會出現「undefined」，能夠將第二個參數的值設置爲空字符串，例如：

var color=prompt(「請輸入你喜歡的顏色」,」」);

若是用戶單擊「取消」按鈕或者直接關閉提示對話框，則該方法將返回null；若是用戶單擊「肯定」按鈕，則該方法將返回一個字符串型數據。

1.3.9 語法約定

一、大小寫的區分

JavaScript區分大小寫，大寫字母和小寫字母是不能互相替換的，幾個基本規則以下。

→ JavaScript的關鍵字，如for何if，永遠都是小寫的。

→ 內置對象，如Math何Date是以大寫字母開頭的。

→ 對象的名稱一般是小寫，如fruit。但其方法常常是多個單詞的大小寫混合，一般第一個字母是小寫，以後單詞的首字母是大寫，如charAt()。

二、變量、對象和函數的名稱

當聲明使用變量、對象或函數時，名稱能夠包括大寫字母、小寫字母、下劃線和美圓符號（$），可是必須以字母、下劃線或美圓符號（$）開頭。

能夠選擇在變量名稱中使用大寫字母或小寫字母，但必須牢記JavaScript是區分大小寫的，count、Count、COUNT是三個不一樣的變量。

三、分號

JavaScript容許開發者自行決定是否以分號結束一行代碼，若是沒有分號，JavaScript就將行代碼的結尾看做該語句的結尾。但不推薦使用，由於不屬於規範的代碼編寫風格。

1.4 程序調試

在JavaScript中可使用Chrome調試工具和alert()方法兩種方式調試程序。

1.4.1 Chrome開發人員工具

一、語法錯誤的排除

使用Chrome瀏覽器打開HTML文件，按F12鍵進入腳本調試界面，表示開啓運行時錯誤自動暫停功能，準肯定位出錯腳本的位置；自動暫停按鈕下方有一個選項，Pause On Caught Exception，若是選中，則即便發生運行時異常代碼在try/catch範圍內，Chrome開發者工具也可以在錯誤處停住。

Chrome的開發者工具經常使用八個大模塊，每一個模塊及其主要功能以下。

→ Elements：用於查看和編輯當前頁面中的HTML和CSS元素。

→ Console：用於顯示腳本中所輸出的調試信息，或運行測試腳本等。

→ Sources：用於查看和調試當前頁面所加載的腳本的源文件。

→ Network：用於查看HTTP請求的詳細信息，如請求頭、響應頭及返回內容等。

→ TimeLine：用於查看腳本執行時間，頁面元素渲染時間等信息。

→ Profiles：用於查看CPU執行時間與內存佔用等信息。

→ Resource：用於查看當前頁面所請求的資源文件，如HTML、CSS樣式文件等。

→ Audits：用於優化前端頁面，加速網頁加載速度等。

二、邏輯錯誤的排除

1) 肯定設置斷點的位置

中止斷點調試。

單步調試，不進入函數體內部。

單步調試，進入函數體內部。

跳出當前函數。

禁用全部的斷點，不作任何調試。

2) 單步調試

3) 修改錯誤

1.4.2 alert()方法

經過alert()方法將不肯定的數據以信息框的方式展現，以此來判斷出現錯誤的位置。

1.5 JavaScript經常使用語法——函數

在JavaScript中，函數相似於Java中的方法，是執行特定功能的JavaScript代碼塊。可是JavaScript中的函數使用更簡單，不用定義函數屬於哪一個類，所以調用時不須要用「對象名.方法名()」的方式，直接使用函數名稱來調用函數便可。

JavaScript中的函數有兩種，一種是JavaScript自帶的系統函數，另外一種是用戶自行建立的自定義函數。

1.5.1 經常使用系統函數

JavaScript提供了兩種把非數字的原始值轉換成數字的函數，即parseInt()和parseFloat()。另外，它還提供了一個檢查是不是非數字的函數isNaN()，一般用於邏輯判斷。

一、 parseInt()

parseInt()函數可解析一個字符串，並返回一個整數。

語法：

parseInt(「字符串」)

從位置0開始查看每一個字符，若0處就不是有效數字，則返回

NaN，若0處是有效數字，直到找到第一個非有效的字符爲止，而後把該字符以前的字符串轉換爲整數。

二、 parseFloat()

parseFloat ()函數可解析一個字符串，並返回一個浮點數。

語法：

parseFloat(「字符串」)

從位置0開始查看每一個字符，若0處就不是有效數字，則返回

NaN，若0處是有效數字，直到找到第一個非有效的字符爲止，而後把該字符以前的字符串轉換爲浮點數。

對於這個函數來講，第一個出現的小數點是有效字符，若是有兩個小數點，那麼第二個小數點被看做無效。

三、 isNaN()

isNaN()函數用於檢查其參數是不是非數字。

語法：

isNaN(x)

若是x是特殊的非數字值，則返回值是true，不然返回false。

經驗：isNaN()函數一般用於檢測parseInt()和parseFloat()的結果，以判斷它們表示的是不是合法的數字，也能夠用isNaN()函數來檢測算數是否錯誤，如用0做爲除數的狀況。

1.5.2 自定義函數

JavaScript須要先定義函數，而後才能調用函數。

一、定義函數

在JavaScript中，自定義函數由關鍵字function、函數名、一組參數及置於括號中的待執行的JavaScript語句組成。

語法：

function 函數名(參數1，參數2，參數3，…){

//JavaScript語句;

[return返回值]

}

→ function是定義函數的關鍵字，必須有。

→ 參數1、參數2等是函數的參數。由於JavaScript自己是弱類型，因此它的參數也沒有類型檢查和類型限定。函數中的函數是可選的，根據函數是否帶參數，可分爲不帶參數的無參函數和有參函數。例如，無參函數：

function 函數名{

//JavaScript語句;

}

→ 「{」和「}」定義了函數的開始和結束。

→ return語句用來規定函數返回的值。

二、調用函數

要執行一個函數，必須先調用這個函數，當調用函數時，必須指定函數名及其後面的參數（若是有參數）。函數的調用通常和元素的事件結合使用。

語法：

事件名=」函數名()」;

無參函數例：

<input name="btn" type="button" value="顯示5次歡迎學習JavaScript" onclick="study()"/>
<script type="text/javascript">
    function study(){
        for(var i=0;i<5;i++){
            document.write("<h4>歡迎學習JavaScript</h4>");
        }
    }
</script>

study()是建立的無參函數，onclick表示按鈕的單擊事件，當單擊按鈕時調用函數study()。

有參函數例：

<input name="btn" type="button" value="請輸入顯示歡迎學習JavaScript的次數" onclick="study(prompt('請輸入顯示歡迎學習JavaScript的次數：',''))"/>
<script type="text/javascript">
    function study(count){
        for(var i=0;i<count;i++){
            document.write("<h4>歡迎學習JavaScript</h4>");
        }
    }
</script>

count表示傳遞的參數，不須要定義數據類型，將prompt()方法返回的值做爲參數傳遞給函數study(count)。

1.5.3 變量的做用域

與Java中的變量同樣，在JavaScript中，根據變量做用範圍不一樣，可分爲全局變量和局部變量。

JavaScript中的全局變量，是在全部函數以外的腳本中聲明的變量，做用範圍是該變量定義後的全部語句，包括其後定義的函數中的代碼，以及其後的<script>與</script>標籤中的代碼。

JavaScript中的局部變量，是在函數內聲明的變量，只有在該函數中且位於該變量以後的代碼中可使用這個變量。

1.5.4 事件

事件是使用JavaScript實現網頁特效的靈魂內容，當與瀏覽器進行交互的時候瀏覽器就會觸發各類事件，來完成網頁中的各類特效。

常見的事件

名稱	說明
onload	一個頁面或一副圖像完成加載
onclick	鼠標單擊某個對象
onmouseover	鼠標指針移到某元素上
onkeydown	某個鍵盤按鍵被按下
onchange	域的內容被改變