HTML+CSS+JavaScript網(wǎng)頁設(shè)計-第11章-JavaScript語法基礎(chǔ)

1、第1頁第11章 JavaScript語法基礎(chǔ)本章概述 本章的學(xué)習(xí)目標主要內(nèi)容第2頁本章概述JavaScript是一種屬于網(wǎng)絡(luò)的腳本語言，已經(jīng)被廣泛用于Web應(yīng)用開發(fā)，常用來為網(wǎng)頁添加各式各樣的動態(tài)功能，為用戶提供更流暢美觀的瀏覽效果。JavaScript同其他語言一樣，有其自身的語法、表達式和運算符及程序的流程控制語句。本章將從JavaScript的發(fā)展歷程和特點將起，介紹JavaScript的基本語法、運算符、流程控制語句等。通過本章的學(xué)習(xí)讀者應(yīng)掌握JavaScript的基本語法，能夠在HTML頁面中使用JavaScript實現(xiàn)簡單的操作。第3頁本章的學(xué)習(xí)目標了解JavaScript的起源與

2、發(fā)展歷程掌握在HTML中使用JavaScript的方法掌握常用的DOM方法和屬性理解JavaScript中的變量和數(shù)據(jù)類型掌握JavaScript中運算符的用法掌握JavaScript中的選擇語句掌握JavaScript中的循環(huán)語句和跳轉(zhuǎn)語句第4頁主要內(nèi)容11.1 JavaScript簡介11.2 文檔對象模型11.3 變量與數(shù)據(jù)類型11.4運算符11.5 流程控制語句11.6 本章小結(jié)11.7 思考和練習(xí)第5頁11.1 JavaScript簡介JavaScript一種直譯式腳本語言，是一種動態(tài)類型、弱類型、基于原型的語言，內(nèi)置支持類型。它可以嵌入到HTML中，在客戶端執(zhí)行，是動態(tài)特效網(wǎng)頁設(shè)計

3、的最佳選擇，同時也是瀏覽器普遍支持的網(wǎng)頁腳步語言。第6頁JavaScript的發(fā)展歷程在JavaScript出現(xiàn)之前，Web瀏覽器不過是一種能夠顯示超文本文檔的軟件的基本部分。而在JavaScript出現(xiàn)之后，網(wǎng)頁的內(nèi)容不再局限于枯燥的文本，它們的可交互性得到了顯著的改善。JavaScript最初由Netscape的Brendan Eich在1995年設(shè)計，在Netscape導(dǎo)航者瀏覽器上首次實現(xiàn)，其最初的名稱為LiveScript，后來因為Netscape與Sun合作，Netscape管理層希望它外觀看起來像Java，因此取名為JavaScript。但實際上它的語法風(fēng)格與Self及Schem

4、e較為接近。 第7頁JavaScript的發(fā)展歷程JavaScript 1.0獲得了巨大的成功，Netscape隨后在Netscape Navigator 3瀏覽器中發(fā)布了JavaScript 1.1。之后作為競爭對手的微軟在自家的IE3中加入了名為Jscript(名稱不同是為了避免侵權(quán))的JavaScript實現(xiàn)。而此時市面上有3個不同的JavaScript版本：IE的JScript、Netscape的JavaScript和ScriptEase中的CEnvi。當時還沒有標準規(guī)定JavaScript的語法和特性。隨著版本不同暴露的問題日益加劇，JavaScript的規(guī)范化最終被提上日程。第8頁

5、JavaScript的發(fā)展歷程1997年，以JavaScript 1.1為藍本的建議被提交給了歐洲計算機制造商協(xié)會(ECMA，European Computer Manufactures Association)，該協(xié)會指定39號技術(shù)委員會(TC39)負責(zé)將其進行標準化，由來自 Netscape、Sun、微軟、Borland 和其他一些對腳本編程感興趣的公司的程序員組成的 TC39 錘煉出了 ECMA-262，定義了一種名為ECMAScript的新腳本語言的標準。第二年，ISO/IEC(國標標準化組織和國際電工委員會)也采用了ECMAScript作為標準(即ISO/IEC-16262)。從此，

6、Web瀏覽器就開始努力將ECMAScript作為JavaScript實現(xiàn)的基礎(chǔ)。1998年6月，ECMAScript 2.0版發(fā)布。1999年12月，ECMAScript 3.0版發(fā)布，成為JavaScript的通行標準2000年，ECMAScript 4.0開始醞釀。第9頁JavaScript的發(fā)展歷程隨后的幾年，ECMAScript 相繼推出了ECMAScript 5.0和ECMAScript 5.1，到2015年6月，ECMAScript 6(ES6)正式通過，成為國際標準，正式名稱是“ECMAScript 2015”(簡稱ES2015)。2016年6月，小幅修訂的“ECMAScript

7、 2016”(簡稱ES2016或ES7)標準發(fā)布，相當于ES6.1版，因為兩者的差異非常小。目前，各大瀏覽器的最新版本，都支持ES6。第10頁JavaScript的發(fā)展歷程完整的JavaScript實現(xiàn)包含3個部分：ECMAScript，文檔對象模型(DOM)，瀏覽器對象模型(BOM)。ECMAScript是核心，提供核心語言功能。文檔對象模型，提供訪問和操作網(wǎng)頁內(nèi)容的方法和接口。瀏覽器對象模型，提供與瀏覽器交互的方法和接口。第11頁JavaScript的特點JavaScript是一種屬于網(wǎng)絡(luò)的解釋性腳本語言，主要用來向HTML頁面添加交互行為。在絕大多數(shù)瀏覽器的支持下，可以在多種平臺下運行(

8、如Windows、Linux、Mac、Android、iOS等)。(1) 腳本語言。 (2) 基于對象。 (3) 簡單。 (4) 動態(tài)性。 (5) 跨平臺性。第12頁在HTML中使用JavaScript JavaScript程序本身不能獨立運行，它依附于某個HTML頁面，在瀏覽器端解釋執(zhí)行。JavaScript可以直接放在HTML頁面中，也可以向css那樣獨立成一個外部文件，然后在HTML頁面中使用標簽引入外部JavaScript文件。第13頁使用標簽 在HTML中輸入JavaScript 時，需要使用標簽，然后通過type屬性指定腳本的 MIME類型，對于JavaScript，其MIME類型

9、是text/javascript。document.write(在標簽內(nèi)的腳本輸出的內(nèi)容!)使用外部JavaScript雖然可以直接將腳本代碼寫在HTML頁面中，但在大型項目開發(fā)中，很少這樣做，因為這樣做，對于頁面性能及可維護性都比較差。更好的做法是將JavaScript代碼寫在文件擴展名為.js的外部文檔中，就像編寫外部樣式表文件那樣，然后在需要使用這些腳本的HTML頁面中通過的src屬性鏈接外部文件。在運行時，整個外部.js文件的代碼全部嵌入到包含它的頁面內(nèi)，頁面程序可以自由使用。第14頁使用外部JavaScript使用外部JavaScript文件有如下好處：實現(xiàn)代碼的復(fù)用。如果腳本用于多

10、于一個頁面，就不需要在每個使用該腳本的頁面中重復(fù)其內(nèi)容。易于修改和維護。如果需要更新腳本，則只需要修改一處內(nèi)容結(jié)構(gòu)清晰。它使HTML頁面更加整潔且更易讀。在.js文件中，不需要標簽，所以，只需將標簽對中的代碼移入一個獨立的文件，并將其保存為擴展名為.js的文件(如main.js)即可。在需要引用該js文件的HTML頁面中使用類似下面的元素即可：第15頁添加到事件中 除了以上兩種使用JavaScript代碼的方法以外，對于簡單的腳本還可以直接寫在事件處理中，例如，下面是一個“打開”按鈕，在按鈕的OnClick事件中，直接添加JavaScript代碼，以彈出窗口的形式打開11-1.html頁面：i

11、nput type=button value=打開 onClick=window.open(11-1.html,big,height=200, width=400,menubar=no)第16頁第17頁主要內(nèi)容11.1 JavaScript簡介11.2 文檔對象模型11.3 變量與數(shù)據(jù)類型11.4運算符11.5 流程控制語句11.6 本章小結(jié)11.7 思考和練習(xí)11.2 文檔對象模型DOM使用一系列對象表示瀏覽器載入的網(wǎng)頁。其中的主對象是document對象，在【例11-1】中我們就使用的是document對象的write方法。DOM解釋了腳本可以從一個文檔中獲取哪些屬性，以及哪些屬性可以修改

12、。它還定義了一些方法，用于在調(diào)用時在文檔中執(zhí)行某種動作。第18頁使用點符號訪問值為了訪問在JavaScript中遇到的不同對象的屬性和方法，需要依次列出對象、方法或?qū)傩?。每個對象、屬性或方法應(yīng)使用一個句點或完全停止符進行分隔。因此，這被稱為點符號。例如，要訪問元素中的CSS類名，可以使用下面的代碼：document.body.className該語句具有3個使用句點分隔的部分以得到CSS的類名：document指明正在訪問document對象。body對應(yīng)了HTML頁面中的元素。className指定需要訪問附加在body上的任何CSS類。第19頁常用的DOM方法HTML DOM定義了所有HT

13、ML元素的對象和屬性，以及訪問它們的方法。常用的HTML DOM方法getElementById(id)：獲取帶有指定id的節(jié)點(元素)。getElementsByClassName(className)：獲取文檔中所有指定類名的元素集合，作為 NodeList 對象。getElementsByName(name)：獲取帶有指定名稱的對象集合。appendChild(node)：插入新的子節(jié)點(元素)。removeChild(node)：刪除子節(jié)點(元素)。第20頁常用的HTML DOM屬性屬性是能夠獲取或設(shè)置的元素的值，常用的屬性如下：innerHTML：節(jié)點的文本值，即HTML元素的內(nèi)容。

14、nodeName：節(jié)點的名稱。元素節(jié)點的nodeName就是標簽名；屬性節(jié)點的nodeName是屬性名。nodeValue：節(jié)點的值。元素節(jié)點的nodeValue是undefined或null；文本節(jié)點的nodeValue是文本本身；屬性節(jié)點的nodeValue是屬性值。parentNode：節(jié)點的父節(jié)點。childNodes：節(jié)點的子節(jié)點。attributes：節(jié)點的屬性節(jié)點。第21頁第22頁主要內(nèi)容11.1 JavaScript簡介11.2 文檔對象模型11.3 變量與數(shù)據(jù)類型11.4運算符11.5 流程控制語句11.6 本章小結(jié)11.7 思考和練習(xí)11.3 變量與數(shù)據(jù)類型變量是存儲信息的

15、容器。在【例11-2】中的addOption()中，我們就使用了變量x來存儲使用getElementById()方法得到的節(jié)點對象，然后就可以使用x來對該節(jié)點進行操作了。第23頁第24頁關(guān)鍵字在JavaScript中，有多種關(guān)鍵字在起作用，如break、for、if以及while，所有這些都有特殊含義。因此，這些單詞不應(yīng)該作為變量、函數(shù)、方法，或?qū)ο蟮拿Q使用。abstractbooleanbreakbytecasecatchcharclassconstcontinuedefaultdodoubleelseextendsfalsefinalfinallyfloatforfunctiongoto

16、ifimplementsimportininstanceofintinterfacelongnativenewnullpackageprivateprotectedpublicreturnshortstaticsuperswitchsynchronizedthisthrowthrowstransientTruetryvarvoidwhilewith第25頁變量變量的名稱需要遵循以下規(guī)則：變量必須以字母、$或下劃線(_)開頭。變量名稱是區(qū)分大小寫的。但是不建議使用不同的大小寫形式區(qū)分兩個變量(例如username與UserName)，因為這樣很容易混淆，出現(xiàn)錯誤。變量名不能是JavaScript

17、關(guān)鍵字。盡量使用描述性名稱定義變量。這樣做將使代碼更易于維護和閱讀。第26頁變量在JavaScript中，可以通過var語句來聲明變量，例如：var x; var carname;變量聲明結(jié)尾處的分號，表示一個語句的結(jié)束。在以上聲明之后，變量并沒有值，也可以在聲明它們時向變量賦值，例如：var x = 5;var carname = Volvo;第27頁變量當在函數(shù)中聲明一個變量時，它僅能夠在該函數(shù)中被訪問(下一章將介紹函數(shù))。在函數(shù)執(zhí)行過后，則無法再訪問該變量。函數(shù)中的變量被稱為局部變量。因為局部變量僅在函數(shù)內(nèi)部工作，所以可以在不同函數(shù)中聲明名稱相同的變量(因為每個變量僅在所在函數(shù)內(nèi)部能夠識

18、別)。在函數(shù)內(nèi)聲明的變量，僅在函數(shù)被調(diào)用時使用內(nèi)存，并且在函數(shù)運行完成后不再占用任何內(nèi)存。在所有函數(shù)之外聲明的變量，稱為全局變量，因為它對于頁面中的全部腳本全局可用，頁面中的所有函數(shù)都可以訪問它。這類變量的生命周期從變量聲明開始，至頁面關(guān)閉結(jié)束。第28頁數(shù)據(jù)類型JavaScript中包含以下3種簡單的數(shù)據(jù)類型。數(shù)字類型：被用于進行算術(shù)操作(加法、減法、乘法以及除法)。任何不在引號之間的整數(shù)或小數(shù)都將作為數(shù)字對待。字符串類型：用于處理文本。它是一個字符的集合(包括數(shù)字、空格，以及標點符號)，包含在兩個引號之間。布爾類型：布爾值只有兩種可能的取值 true和false。此類數(shù)據(jù)主要用來進行邏輯操作

19、，并檢查某項事物為真或假。第29頁數(shù)據(jù)類型除此之外，還有另外兩種特殊的數(shù)據(jù)類型?？疹愋停褐该髟撝挡淮嬖?。使用關(guān)鍵字null表示。它明確聲明未賦予任何值。未定義類型：即該值在之前的代碼中沒有定義，使用關(guān)鍵字undefined表示。前面提到過，如果聲明一個變量但不為其賦值，則該變量就被認為是未定義的。以上5種類型都是基本數(shù)據(jù)類型，JavaScript還有3大引用數(shù)據(jù)類型：對象、數(shù)組和函數(shù)。這些將在第12章中詳細介紹。第30頁主要內(nèi)容11.1 JavaScript簡介11.2 文檔對象模型11.3 變量與數(shù)據(jù)類型11.4運算符11.5 流程控制語句11.6 本章小結(jié)11.7 思考和練習(xí)第31頁11.

20、4運算符運算符也叫操作符，是在表達式中用于對一個值進行某些操作的關(guān)鍵字或符號。例如，算術(shù)運算符“+”會將兩個值相加。JavaScript的運算符包括算術(shù)運算符、賦值運算符、比較運算符、邏輯運算符、條件運算符和字符串運算符。第32頁算術(shù)運算符算術(shù)運算符對操作數(shù)進行數(shù)學(xué)運算操作需要說明的是自增和自減運算符有兩種形式：一種是操作數(shù)在前(如x+)，一種是操作數(shù)在后(如+x)。這兩種寫法的區(qū)別是，操作數(shù)在前先引用變量的值，然后再進行自增或自減操作；操作數(shù)在后，則是先進行自增或自減操作，然后再引用變量的值(此時變量的值已經(jīng)是自增或自減操作后的新值)。第33頁賦值運算符前面的示例中，我們曾使用過基本的賦值運

21、算符等號，它的作用是將值賦予等號左側(cè)的變量。除了等號以為，還可以與前面的簡單算術(shù)運算符相結(jié)合，從而允許將值賦予某個變量，并且同時進行某些操作。例如，下面的語句，其中帶有一個賦值運算符和一個算術(shù)運算符：total = total - profit;此語句可被精簡為以下形式：total -= profit;這里的-=就是一個符合賦值運算符，類似的還有+=、*=、/=和%=，其含義和用法都類似。第34頁比較運算符比較運算符是比較兩個操作數(shù)的大小的運算符，根據(jù)比較結(jié)果返回true或false。當進行比較的兩個操作數(shù)是不同數(shù)據(jù)類型時，JavaScript會自動進行類型轉(zhuǎn)換，因此“1= 1”的比較結(jié)果是t

22、rue，因為JavaScript會首先將字符串1轉(zhuǎn)換為數(shù)字1，類似地1 = true的比較結(jié)果也是true，因為true轉(zhuǎn)換為數(shù)字也是1。如果我們需要對操作數(shù)的類型和值都進行比較，希望上面這種情況的比較結(jié)果是false，可以使用另一種檢測相等性的方法，即恒等比較操作符“=”(3個等號)。恒等操作符對類型與值都進行檢測，而且不進行任何類型轉(zhuǎn)換。下面的比較結(jié)果為false：1 = “1” 1 = true第35頁邏輯運算符邏輯運算符用來比較兩個布爾值，返回結(jié)果也是一個布爾值。操 作 符描 述示例 (其中x=1且y=2)&與，只有兩個條件都是true時才返回true(x 1)返回true(x 2 &

23、 y 1)返回false| |或，兩個條件中只要有一個為ture，結(jié)果就為true(x 2 | y 2 | y 1)返回false!非，只有一個操作數(shù)，結(jié)果與原操作數(shù)相反! (x y)返回false! (x = y)返回true第36頁條件運算符條件運算符是一個比較特殊的運算符，它需要3個操作數(shù)，語法格式如下；(condition)?value1:value2 其中,第1個操作數(shù)condition是一個布爾指或一個返回布爾值的表達式，如果其值為ture，則條件表達式的結(jié)果為value1，否則結(jié)果為value2。例如，下面的語句用來判斷某年是否為閏年：val=(year%4=0&year%100

24、!=0|year%400=0)?閏年:平年;第37頁字符串運算符字符串運算符是指使用“+”運算符將兩個字符串連接為一個。例如，下面的語句：var firstName = 趙;var lastName = 一凡; name = firstName + lastName;變量name的值為“趙一凡”。還可以使用前面的比較運算符比較兩個字符串。例如，在提交表單時，可以檢查用戶是否向文本框中輸入了某個特定值。第38頁主要內(nèi)容11.1 JavaScript簡介11.2 文檔對象模型11.3 變量與數(shù)據(jù)類型11.4運算符11.5 流程控制語句11.6 本章小結(jié)11.7 思考和練習(xí)第39頁11.5 流程控制

25、語句JavaScript提高了多種用于程序流程控制的語句，這些語句可以分為選擇、循環(huán)和跳轉(zhuǎn)等類型。第40頁選擇語句選擇語句也叫條件語句，用于基于不同的條件來執(zhí)行不同的動作。在JavaScript中，可使用以下條件語句：if語句：用于當某個條件為真時，就執(zhí)行一段腳本的情況。if.else語句：當條件為true時執(zhí)行一操作，當條件為false時，執(zhí)行另一塊語句。if.else if.else語句：用于多個條件分支的選擇。switch語句：用于多個條件分支的選擇。第41頁if語句if語句允許代碼在某個特定條件成立時得到執(zhí)行。如果條件為真，則花括號中的代碼段被執(zhí)行。語法格式如下：if ( condit

26、ion ) /這里是要執(zhí)行的代碼塊第42頁ifelse語句當希望某個條件成立和不成立時執(zhí)行不同的操作，可以使用ifelse語句。它的功能是：如果指定的條件成立，則運行第一個代碼塊，否則運行第二個代碼塊。語法格式如下：if ( condition ) /條件為true時執(zhí)行else /條件為false時執(zhí)行第43頁if.else if.else 語句if.else if.else 語句用來從多個條件中選擇一個來執(zhí)行，語法格式如下：if (condition1) 當條件 1 為 true 時執(zhí)行else if (condition2) 當條件 2 為 true 時執(zhí)行else if (condit

27、ionN) 當條件 N 為 true 時執(zhí)行else 當所有都不為 true 時執(zhí)行第44頁switch語句switch語句也是多條件選擇結(jié)構(gòu)，它需要一個表達式或是變量，根據(jù)表達式的取值情況，與后面的case分支進行比較。如果有匹配的值，則開始執(zhí)行相應(yīng)的代碼塊；如果所有case分支都不匹配，則執(zhí)行default分支。第45頁switch語句switch ( expression )case option1: /與option1匹配時執(zhí)行 break;case option2: /與option2匹配時執(zhí)行 break;case option3: /與option3匹配時執(zhí)行 break;def

28、ault: /所有分支都不匹配時執(zhí)行第46頁循環(huán)語句循環(huán)語句用于按指定的次數(shù)執(zhí)行相同的操作，JavaScript 支持如下幾種類型的循環(huán)：while：只要指定的條件為真，就循環(huán)執(zhí)行指定的代碼塊。dowhile：與while循環(huán)不同，該循環(huán)會先執(zhí)行一次循環(huán)結(jié)構(gòu)，再檢查條件是否為真。如果條件為真，則繼續(xù)執(zhí)行直到條件為假，否則退出循環(huán)。for：通常用來指定循環(huán)次數(shù)的循環(huán)。for/in：用來循環(huán)遍歷對象的屬性。第47頁while循環(huán)在while循環(huán)中，只要條件保持為真，就會重復(fù)執(zhí)行一段代碼塊。語法格式如下：while ( condition ) /循環(huán)代碼塊 循環(huán)條件condition通常是一個條件表

29、達式，當表達式的值為true時，開始執(zhí)行循環(huán)代碼塊，在循環(huán)代碼塊中通常會修改循環(huán)變量的值，執(zhí)行完循環(huán)代碼塊后，會再次判斷循環(huán)條件，如果條件為真，則繼續(xù)執(zhí)行循環(huán)代碼塊，直至循環(huán)條件為false，退出循環(huán)結(jié)構(gòu)。第48頁dowhile在while循環(huán)中，如果條件表達式一開始就為false，則循環(huán)可能一次也不執(zhí)行。而dowhile循環(huán)先執(zhí)行一次代碼塊，然后才檢查條件。只要條件保持為真，循環(huán)就會繼續(xù)執(zhí)行。因此，無論條件如何，循環(huán)都將至少執(zhí)行一次，這是while循環(huán)和dowhile循環(huán)的重要區(qū)別。第49頁for循環(huán)for循環(huán)是用的最多的一種循環(huán)結(jié)構(gòu)，它常用在已知循環(huán)次數(shù)的情況下。for循環(huán)的語法格式如下：

30、for (語句 1; 語句 2; 語句 3) 循環(huán)代碼塊for語句的寫法非常靈活，語句1、語句2和語句3都是可選的，但是括號內(nèi)的兩個分號是必須的第50頁for循環(huán)for ( var i=1,sum=0; i100) break; sum+=i+;這里的break語句用來跳出循環(huán)。第51頁for/in在JavaScript中，for/in語句用來遍歷對象的屬性。例如，下面的代碼：var x, txt=;var person=fname:趙,lname:艷鐸,age:38; for (x in person) txt=txt + personx;執(zhí)行后，txt的值為“趙艷鐸38”跳轉(zhuǎn)語句跳轉(zhuǎn)語句包括break和continue兩個語句。